@charset "UTF-8";
/* ===================================================================
   Al Iman Physics Department Teachers' Agenda

   Layout uses CSS logical properties (inline-start/end rather than
   left/right) so the whole interface mirrors under dir="rtl" without
   a duplicate stylesheet. rtl.css only handles what cannot mirror
   on its own.
   =================================================================== */

:root {
    /* Instrument palette: ink, cool paper, a single measured accent. */
    --ink:        #12212e;
    --ink-2:      #3d5163;
    --muted:      #6b7f91;
    --bg:         #eef1f5;
    --surface:    #ffffff;
    --surface-2:  #f6f8fa;
    --line:       #d8e0e8;
    --line-soft:  #e8edf2;

    --accent:     #0f6f8c;
    --accent-ink: #0a4d62;
    --accent-soft:#e2f0f4;

    --draft:      #8a5d00;
    --draft-soft: #fdf3dd;
    --sent:       #17624a;
    --sent-soft:  #e0f1e9;
    --danger:     #a32020;
    --danger-soft:#fbe9e9;

    --radius:     6px;
    --radius-lg:  10px;

    /* System stacks: no webfont downloads, and Arabic and Latin both
       fall back to faces the device already has. */
    --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", "Noto Sans", "Noto Sans Arabic",
               "Segoe UI Arabic", Tahoma, Arial, sans-serif;
    --font-data: ui-monospace, SFMono-Regular, "SF Mono", Menlo,
                 Consolas, "Liberation Mono", monospace;

    --shadow-sm: 0 1px 2px rgba(18, 33, 46, .06);
    --shadow:    0 2px 8px rgba(18, 33, 46, .08);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font-ui);
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink);
    background: var(--bg);
}

h1, h2, h3 { line-height: 1.25; margin: 0; font-weight: 650; letter-spacing: -.01em; }
p { margin: 0 0 .75rem; }
a { color: var(--accent-ink); }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 3px;
}

/* -------------------------------------------------------------- brand */

.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border-radius: var(--radius);
    background: var(--ink);
    color: #7fd4e8;
    margin-block-end: 1rem;
}
.brand-mark svg { inline-size: 1.6rem; block-size: 1.6rem; }
.brand-mark-sm { inline-size: 2rem; block-size: 2rem; margin: 0; }
.brand-mark-sm svg { inline-size: 1.2rem; block-size: 1.2rem; }

/* ---------------------------------------------------------- auth pages */

.auth-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-block-size: 100dvh;
    padding: 2rem 1rem;
    background:
        linear-gradient(180deg, #f3f6f9 0%, var(--bg) 100%);
}

.auth-card {
    inline-size: 100%;
    max-inline-size: 25rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 2rem;
    box-shadow: var(--shadow);
}

.auth-title { font-size: 1.15rem; }
.auth-sub { color: var(--muted); font-size: .9rem; margin-block: .35rem 1.25rem; }

.auth-langs {
    display: flex;
    gap: .5rem;
    justify-content: center;
    margin-block-start: 1.5rem;
    padding-block-start: 1rem;
    border-block-start: 1px solid var(--line-soft);
}

/* ------------------------------------------------------------- top bar */

.topbar {
    background: var(--ink);
    color: #e6edf3;
    position: sticky;
    inset-block-start: 0;
    z-index: 40;
}

.topbar-inner {
    max-inline-size: 78rem;
    margin-inline: auto;
    padding: .6rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    text-decoration: none;
    color: inherit;
    margin-inline-end: auto;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-weight: 650; font-size: .95rem; }
.brand-dept { font-size: .72rem; color: #8fa6b8; }

.nav { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; }

.nav-link {
    color: #c6d5e0;
    text-decoration: none;
    padding: .4rem .7rem;
    border-radius: var(--radius);
    font-size: .9rem;
    white-space: nowrap;
}
.nav-link:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.nav-link.is-current { background: rgba(127, 212, 232, .16); color: #b8e8f5; }

.nav-end {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-inline-start: .75rem;
    padding-inline-start: .75rem;
    border-inline-start: 1px solid rgba(255, 255, 255, .14);
}

.who { display: flex; flex-direction: column; line-height: 1.2; }
.who-name { font-size: .85rem; font-weight: 600; }
.who-role { font-size: .7rem; color: #8fa6b8; }

.lang-switch { display: inline-flex; gap: 1px; background: rgba(255,255,255,.1); border-radius: var(--radius); overflow: hidden; }
.lang-option {
    padding: .25rem .5rem;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .03em;
    color: #c6d5e0;
    text-decoration: none;
    background: transparent;
}
.lang-option:hover { background: rgba(255,255,255,.12); color: #fff; }
.lang-option.is-active { background: var(--accent); color: #fff; }

.auth-langs .lang-option {
    color: var(--muted);
    letter-spacing: 0;
    font-size: .8rem;
    border-radius: var(--radius);
}
.auth-langs .lang-option.is-active { background: var(--accent-soft); color: var(--accent-ink); }

.nav-toggle { display: none; }

/* ---------------------------------------------------------------- page */

.page {
    max-inline-size: 78rem;
    margin-inline: auto;
    padding: 1.75rem 1.25rem 3rem;
}

.page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-block-end: 1.25rem;
}

.page-title { font-size: 1.4rem; }

/* Signature: a short measured rule under section headings, echoing the
   scale markings on lab instruments. */
.page-title::after,
.card-title::after {
    content: "";
    display: block;
    inline-size: 2.5rem;
    block-size: 3px;
    /* Space on both sides: the following line sits close, and tall
       ascenders (Arabic hamza, accented capitals) would otherwise
       touch the rule. */
    margin-block: .5rem .45rem;
    background:
        linear-gradient(90deg,
            var(--accent) 0 40%,
            transparent 40% 55%,
            var(--accent) 55% 70%,
            transparent 70% 85%,
            var(--accent) 85% 100%);
}

.page-sub { color: var(--muted); font-size: .9rem; }

.footer {
    text-align: center;
    color: var(--muted);
    font-size: .78rem;
    padding: 1.5rem 1rem 2.5rem;
}

/* ---------------------------------------------------------------- card */

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-block-end: 1.5rem;
    box-shadow: var(--shadow-sm);
}

.card-title { font-size: 1.05rem; margin-block-end: 1rem; }
.card-intro { color: var(--muted); font-size: .875rem; margin-block-end: 1rem; }

/* -------------------------------------------------------------- forms */

.stack { display: flex; flex-direction: column; gap: 1rem; }

.field { display: flex; flex-direction: column; gap: .35rem; }

.label { font-size: .85rem; font-weight: 600; color: var(--ink-2); }
.label .req { color: var(--danger); margin-inline-start: .15rem; }

.input, .textarea, select.input {
    inline-size: 100%;
    font: inherit;
    font-size: .92rem;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: .5rem .65rem;
    transition: border-color .12s, box-shadow .12s;
}
.textarea { min-block-size: 6rem; resize: vertical; line-height: 1.5; }

.input:focus, .textarea:focus, select.input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.input[readonly], .textarea[readonly], .input:disabled {
    background: var(--surface-2);
    color: var(--ink-2);
}

.hint { font-size: .78rem; color: var(--muted); margin: 0; }

.check { display: flex; align-items: flex-start; gap: .55rem; font-size: .88rem; cursor: pointer; }
.check input { margin-block-start: .2rem; }

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1rem;
}
.form-grid .span-2 { grid-column: 1 / -1; }

.form-actions {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
    margin-block-start: 1.5rem;
    padding-block-start: 1.25rem;
    border-block-start: 1px solid var(--line-soft);
}

/* ------------------------------------------------------------ buttons */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    font: inherit;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.2;
    padding: .55rem 1rem;
    border-radius: var(--radius);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .12s, border-color .12s, transform .06s;
}
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-ink); }

.btn-quiet { background: var(--surface); color: var(--ink-2); border-color: var(--line); }
.btn-quiet:hover { background: var(--surface-2); border-color: var(--muted); }

.btn-danger { background: var(--surface); color: var(--danger); border-color: #e7c4c4; }
.btn-danger:hover { background: var(--danger-soft); }

.btn-block { inline-size: 100%; }
.btn-sm { padding: .3rem .6rem; font-size: .78rem; }

.link-quiet {
    font-size: .85rem;
    color: var(--muted);
    text-decoration: none;
    text-align: center;
}
.link-quiet:hover { color: var(--accent-ink); text-decoration: underline; }

/* ------------------------------------------------------------ notices */

.notice {
    padding: .65rem .85rem;
    border-radius: var(--radius);
    font-size: .875rem;
    margin-block-end: 1rem;
    border-inline-start: 3px solid;
}
.notice-success { background: var(--sent-soft);   border-color: var(--sent);   color: #0f4a37; }
.notice-error   { background: var(--danger-soft); border-color: var(--danger); color: #7d1919; }
.notice-info    { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }

/* ------------------------------------------------------------- badges */

.badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .72rem;
    font-weight: 650;
    letter-spacing: .01em;
    padding: .15rem .5rem;
    border-radius: 3px;
    white-space: nowrap;
}
.badge::before {
    content: "";
    inline-size: 3px;
    block-size: .7em;
    background: currentColor;
    border-radius: 1px;
}
.badge-draft     { background: var(--draft-soft); color: var(--draft); }
.badge-submitted { background: var(--sent-soft);  color: var(--sent); }
.badge-past      { background: var(--surface-2);  color: var(--muted); }
.badge-sample    { background: var(--surface-2);  color: var(--muted); font-weight: 500; }
.badge-sample::before { display: none; }

/* -------------------------------------------------------------- tabs */

.tabs {
    display: flex;
    gap: .25rem;
    flex-wrap: wrap;
    border-block-end: 1px solid var(--line);
    margin-block-end: 1.25rem;
}

.tab {
    padding: .5rem .85rem;
    font-size: .875rem;
    font-weight: 600;
    color: var(--muted);
    text-decoration: none;
    border-block-end: 2px solid transparent;
    margin-block-end: -1px;
}
.tab:hover { color: var(--ink); }
.tab.is-active { color: var(--accent-ink); border-block-end-color: var(--accent); }
.tab-count {
    font-size: .72rem;
    font-weight: 600;
    color: var(--muted);
    background: var(--surface-2);
    padding: 0 .3rem;
    border-radius: 3px;
    margin-inline-start: .3rem;
}

/* ------------------------------------------------------------- tables */

.table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--line); }

.table {
    inline-size: 100%;
    min-inline-size: 40rem;
    border-collapse: collapse;
    background: var(--surface);
    font-size: .875rem;
}

.table th {
    text-align: start;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
    background: var(--surface-2);
    padding: .6rem .75rem;
    border-block-end: 1px solid var(--line);
    white-space: nowrap;
}

.table td {
    padding: .65rem .75rem;
    border-block-end: 1px solid var(--line-soft);
    vertical-align: top;
}
.table tbody tr:last-child td { border-block-end: none; }
.table tbody tr:hover { background: var(--surface-2); }

.table .num { font-family: var(--font-data); font-size: .82rem; white-space: nowrap; }
.cell-actions { white-space: nowrap; text-align: end; }

/* ------------------------------------------------------------- filters */

.filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: .75rem;
    align-items: end;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1rem;
    margin-block-end: 1.25rem;
}
.filters .field { gap: .25rem; }
.filters .label { font-size: .75rem; }
.filter-actions { display: flex; gap: .5rem; }

/* --------------------------------------------------------- definition */

.detail-grid { display: grid; gap: 1.1rem; }
@media (min-width: 40rem) {
    .detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .detail-grid .span-2 { grid-column: 1 / -1; }
}

.detail-item { min-inline-size: 0; }
.detail-label {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
    margin-block-end: .25rem;
}
.detail-value { white-space: pre-wrap; word-break: break-word; }
.detail-value:empty::before { content: "—"; color: var(--muted); }

.meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    padding-block: .9rem;
    margin-block-end: 1.25rem;
    border-block: 1px solid var(--line-soft);
    font-size: .82rem;
    color: var(--muted);
}
.meta-row strong { color: var(--ink-2); font-weight: 600; }

/* --------------------------------------------------------------- empty */

.empty {
    text-align: center;
    padding: 3rem 1.5rem;
    background: var(--surface);
    border: 1px dashed var(--line);
    border-radius: var(--radius-lg);
    color: var(--muted);
}
.empty-title { font-size: 1rem; color: var(--ink); margin-block-end: .5rem; }

/* ------------------------------------------------------------ combobox */

.combo { position: relative; }

.combo-input-wrap { position: relative; display: flex; }
.combo-input-wrap .input { padding-inline-end: 2rem; }

/* The input carries a `list` attribute as a no-JavaScript fallback.
   Browsers draw their own indicator for that, which would sit next to
   the one below, so hide theirs and keep ours. */
.combo-input-wrap .input::-webkit-calendar-picker-indicator {
    display: none !important;
}
.combo-input-wrap .input::-webkit-list-button { display: none !important; }

.combo-toggle {
    position: absolute;
    inset-block: 1px;
    inset-inline-end: 1px;
    inline-size: 1.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--muted);
    border-radius: 0 var(--radius) var(--radius) 0;
}
.combo-toggle:hover { color: var(--ink); }
.combo-toggle svg { inline-size: .8rem; block-size: .8rem; }

.combo-list {
    position: absolute;
    inset-inline: 0;
    inset-block-start: calc(100% + 3px);
    z-index: 30;
    max-block-size: 14rem;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: .25rem;
    margin: 0;
    list-style: none;
}
.combo-list[hidden] { display: none; }

.combo-option {
    padding: .4rem .55rem;
    font-size: .875rem;
    border-radius: 3px;
    cursor: pointer;
}
.combo-option:hover,
.combo-option.is-active { background: var(--accent-soft); color: var(--accent-ink); }

.combo-option mark { background: transparent; color: var(--accent); font-weight: 700; }

.combo-empty { padding: .5rem .55rem; font-size: .82rem; color: var(--muted); }

/* --------------------------------------------------------------- modal */

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(18, 33, 46, .5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 60;
}
.modal-backdrop[hidden] { display: none; }

.modal {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    max-inline-size: 26rem;
    inline-size: 100%;
    box-shadow: 0 12px 32px rgba(18, 33, 46, .25);
}
.modal-title { font-size: 1.05rem; margin-block-end: .5rem; }
.modal-body { font-size: .9rem; color: var(--ink-2); }
.modal-actions { display: flex; gap: .6rem; justify-content: flex-end; margin-block-start: 1.25rem; }

/* --------------------------------------------------------- responsive */

@media (max-width: 52rem) {
    .nav-toggle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        inline-size: 2.25rem;
        block-size: 2.25rem;
        padding: 0 .4rem;
        background: transparent;
        border: 1px solid rgba(255,255,255,.2);
        border-radius: var(--radius);
        cursor: pointer;
    }
    .nav-toggle span { display: block; block-size: 2px; background: #c6d5e0; border-radius: 1px; }

    .nav {
        display: none;
        inline-size: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: .15rem;
        padding-block: .6rem;
    }
    .nav.is-open { display: flex; }

    .nav-end {
        flex-direction: column;
        align-items: stretch;
        gap: .6rem;
        margin-inline-start: 0;
        padding-inline-start: 0;
        margin-block-start: .5rem;
        padding-block-start: .75rem;
        border-inline-start: 0;
        border-block-start: 1px solid rgba(255,255,255,.14);
    }
    .lang-switch { align-self: flex-start; }
    .who { flex-direction: row; align-items: baseline; gap: .5rem; }
}

@media (max-width: 34rem) {
    .page { padding-inline: .9rem; }
    .card { padding: 1.15rem; }
    .auth-card { padding: 1.5rem; }
    .form-actions .btn { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
    .btn:active { transform: none; }
}