/* Doplnky k site.css pre PHP verziu (v pôvodnej aplikácii ich riešili komponenty React/base-ui). */

/* dialóg „Napíšte mi“ */
dialog.ns-dialog { position: fixed; inset: 0; margin: auto; display: none; flex-direction: column; color: var(--ink); }
dialog.ns-dialog[open] { display: flex; }
dialog.ns-dialog::backdrop { background: rgba(16, 33, 54, .55); backdrop-filter: blur(3px); }
dialog.ns-dialog .dialog-description { margin: 0 0 .4rem; color: var(--muted); }
html.dialog-open { overflow: hidden; }
.dialog-close { cursor: pointer; color: var(--navy); }

/* záložky podnet / otázka a záložky administrácie */
.ns-tabs { display: flex; align-items: stretch; gap: .3rem; }
.ns-tabs [data-slot=tabs-trigger] { flex: 1; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--ink); padding: .55rem 1rem; cursor: pointer; text-decoration: none; transition: background .15s, box-shadow .15s; }
.ns-tabs [data-slot=tabs-trigger]:hover { background: rgba(255, 255, 255, .55); }
.ns-tabs [data-slot=tabs-trigger][aria-selected=true] { background: #fff; box-shadow: 0 2px 8px -3px rgba(31, 74, 120, .35); color: var(--navy); }
.admin-tabs.ns-tabs { display: flex; }
.admin-tabs.ns-tabs [data-slot=tabs-trigger] { flex: none; }

/* natívne výberové polia v štýle pôvodného Select */
select.ns-select { width: 100%; appearance: none; -webkit-appearance: none; padding: .7rem 2.6rem .7rem .9rem; font: inherit; color: var(--ink); cursor: pointer;
  background: #fdfdfb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231f4a78' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right .9rem center !important; }
select.ns-select:focus { outline: 3px solid rgba(242, 207, 99, .6); outline-offset: 1px; }

/* zaškrtávacie políčka (vzhľad base-ui Checkbox) */
[data-slot=checkbox] { flex: none; background: #fff; border: 1.5px solid #9fb2c6; border-radius: .35rem; width: 1.15rem; height: 1.15rem; display: inline-grid; place-content: center; }
[data-slot=checkbox] [data-slot=checkbox-indicator] { display: none; }
[data-slot=checkbox][data-checked] { background: var(--navy); border-color: var(--navy); color: #fff; }
[data-slot=checkbox][data-checked] [data-slot=checkbox-indicator] { display: grid; }
.poll-option [data-slot=checkbox][data-checked] { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.poll-option.is-disabled { opacity: .55; cursor: not-allowed; }
.poll-option:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.ns-check { cursor: pointer; }
.button[disabled] { opacity: .55; cursor: not-allowed; }

/* formuláre */
.ns-label-text { font-weight: inherit; }
.form-tabs-wrap { margin-bottom: .2rem; }
.submission-form [hidden], [hidden] { display: none !important; }
.form-success .button { margin-top: .6rem; }

/* administrácia */
.admin-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: 0 0 1.4rem; }
.admin-filters a { text-decoration: none; }
.admin-detail summary .tag { margin-right: .4rem; vertical-align: middle; }
.admin-original { display: grid; gap: .6rem; margin: .4rem 0 1.2rem; padding: 1rem 1.1rem; border-radius: .9rem; background: var(--sky); }
.admin-original > div { display: grid; grid-template-columns: minmax(8rem, 12rem) 1fr; gap: .8rem; }
.admin-original dt { font-weight: 700; color: var(--navy); }
.admin-original dd { margin: 0; }
.admin-form { margin-top: .6rem; }
.admin-form h3 { margin-top: 1.8rem; }
.admin-actions { display: flex; flex-wrap: wrap; align-items: center; }
.admin-actions form { margin: 0; }
.admin-actions button.text-link { border: 0; cursor: pointer; padding: 0; font: inherit; font-weight: 700; }
.text-link.danger { color: #8a2c24; }
.admin-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 1rem; overflow: hidden; box-shadow: var(--shadow); }
.admin-table th, .admin-table td { padding: .7rem .9rem; text-align: left; border-bottom: 1px solid var(--line); }
.admin-login { max-width: 32rem; }
.admin-toolbar .text-link { font-size: .88rem; }
@media (max-width: 640px) {
  .admin-original > div { grid-template-columns: 1fr; gap: .1rem; }
}