/* Components specific to the server-rendered PHP pages.
   Loaded after the shared stylesheets so it can extend them. */

/* ---------- flash messages ---------- */

.flash {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: var(--calm-tint);
    color: var(--calm);
    border: 1px solid var(--calm);
    border-radius: var(--radius-s);
    padding: .6rem 1rem;
    margin-bottom: 1rem;
    font-weight: 600;
    font-size: .92rem;
    transition: opacity .6s ease;
}

.flash--error {
    background: var(--danger-tint);
    color: var(--danger);
    border-color: var(--danger);
}

.flash--fade { opacity: 0; }

/* ---------- admin form cards ---------- */

.form-card {
    background: #fff;
    border: 1px solid #d7dbe3;
    border-radius: var(--radius-m);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

[data-theme="dark"] .form-card,
[data-theme="dark"] .toolbar input,
[data-theme="dark"] .toolbar select {
    background: var(--surface);
}

.form-card h2 { color: var(--ink); }

.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1rem;
}

.field--inline {
    flex-direction: row;
    align-items: center;
    gap: .5rem;
}

.field--inline input[type="checkbox"] {
    width: 1.05rem;
    height: 1.05rem;
    accent-color: var(--pine-solid);
}

.field--inline label { font-weight: 500; }

/* destructive action buttons inside tables */
.a-danger-btn { color: var(--danger); }
.a-danger-btn:hover { color: #fffdf8; background: var(--danger); }

/* anchor target for edit forms */
#form { scroll-margin-top: 1rem; }

/* ---------- theme toggle glyph swap (pure CSS) ---------- */

.theme-toggle {
    border: 1px solid var(--line-strong);
    background: var(--surface);
    transition: border-color 120ms ease, background 120ms ease;
}

.theme-toggle:hover {
    border-color: var(--accent, var(--pine));
    color: var(--accent, var(--pine));
}

.theme-toggle .icon-moon { display: flex; }
.theme-toggle .icon-sun { display: none; }

[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: flex; }

/* keep the glyph perfectly centred: flex (not inline-flex) so the SVG
   never sits on the text baseline, and line-height 0 removes stray space */
.icon-moon, .icon-sun {
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.icon-moon svg, .icon-sun svg { display: block; }

/* ---------- Jalali date selects ---------- */

.jalali-fields {
    display: flex;
    gap: .5rem;
}

.jalali-fields select,
.time-fields select {
    flex: 1 1 0;
    min-width: 0;
}

.time-fields {
    display: flex;
    gap: .5rem;
}

/* ---------- small utilities ---------- */

.setup-note {
    background: var(--warn-tint);
    color: var(--warn);
    border: 1px solid var(--warn);
    border-radius: var(--radius-s);
    padding: .6rem .9rem;
    font-size: .88rem;
    margin-bottom: 1rem;
}

@media (max-width: 30rem) {
    .field-row { grid-template-columns: 1fr; }
}