/* The certificate list pages — the student's شهاداتي and the teacher's issued
 * table. Colours come from base.css / the dashboard theme, so a teacher-branded
 * dashboard carries through; only the certificate sheet itself (certificate.css)
 * is exempt, because its palette is snapshotted per document.
 */

.cl-wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px 16px 64px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.cl-intro p {
    margin: 0;
    color: var(--text-secondary, #64748b);
    line-height: 1.9;
}

.cl-filters { display: flex; gap: 8px; flex-wrap: wrap; }

.cl-chip {
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid var(--border-color, #cbd5e1);
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.cl-chip.active {
    background: var(--accent-color, #137980);
    border-color: transparent;
    color: #fff;
}

.cl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.cl-card {
    background: var(--white, #fff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 14px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* A revoked certificate is dimmed but never hidden: the student was told he had
   it, and a card that silently disappears is worse than one that says why. */
.cl-card.is-revoked { opacity: .68; }

.cl-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

.cl-kind {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .82rem;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-color, #137980) 14%, transparent);
    color: var(--accent-color, #137980);
}

.cl-revoked {
    font-size: .78rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    /* Hardcoded red: "ملغاة" must not be rendered in the teacher's own palette,
       where it could come out as a friendly accent badge. */
    background: #fef2f2;
    color: #991b1b;
}

.cl-card-title { margin: 0; font-size: 1.05rem; }
.cl-card-sub { margin: 0; color: var(--text-secondary, #64748b); font-size: .92rem; }

.cl-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    font-size: .85rem;
    color: var(--text-secondary, #64748b);
}

.cl-card-foot {
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--border-color, #e2e8f0);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.cl-serial {
    /* See the note in certificate.css: a Latin serial inside an RTL document is
       reordered around its hyphens without this. */
    direction: ltr;
    unicode-bidi: isolate;
    font-size: .8rem;
    letter-spacing: .04em;
    color: var(--text-secondary, #64748b);
}

.cl-view { padding: 8px 14px; font-size: .9rem; }

.cl-empty {
    text-align: center;
    padding: 48px 16px;
    color: var(--text-secondary, #64748b);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.cl-empty i { font-size: 2.4rem; opacity: .45; }

/* `hidden` works through the UA rule `[hidden]{display:none}`, which ANY author
   `display:` beats — and `.cl-empty` sets `display: flex` right above. Without
   this the empty-state line sat under a full grid of cards. */
.cl-empty[hidden],
.cl-grid[hidden],
.cl-filters[hidden] { display: none !important; }

/* ── The view modal ─────────────────────────────────────────────────────── */

.cl-modal {
    max-width: min(96vw, 1120px);
    width: 100%;
    max-height: 92vh;
    overflow-y: auto;
    padding: 18px;
}

.cl-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.cl-modal-head h3 { margin: 0; }

.cl-close {
    background: none;
    border: none;
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
    color: inherit;
}

.cl-modal-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 16px;
}

/* ── Teacher-side additions ─────────────────────────────────────────────── */

.cl-panel {
    background: var(--white, #fff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 14px;
    padding: 20px;
}

.cl-panel > h2 {
    margin: 0 0 6px;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.cl-panel-hint {
    margin: 0 0 16px;
    color: var(--text-secondary, #64748b);
    font-size: .9rem;
    line-height: 1.8;
}

.cl-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    align-items: end;
}

.cl-field { display: flex; flex-direction: column; gap: 6px; }
.cl-field label { font-size: .86rem; font-weight: 600; }

.cl-field input,
.cl-field select,
.cl-field textarea {
    padding: 10px 12px;
    border: 1px solid var(--border-color, #cbd5e1);
    border-radius: 10px;
    font: inherit;
    background: var(--input-bg, #fff);
    color: inherit;
}

.cl-field textarea { min-height: 88px; resize: vertical; }
.cl-field-wide { grid-column: 1 / -1; }

/* `flex-direction: row` is not redundant: this element is also a `.cl-field`,
   which sets `column` — without the override the four pickers stacked into four
   full-width rows. */
.cl-colors {
    display: flex;
    flex-direction: row;
    gap: 14px;
    flex-wrap: wrap;
}
.cl-colors .cl-field { min-width: 0; }
.cl-colors input[type='color'] { width: 54px; height: 38px; padding: 2px; }

.cl-table { width: 100%; border-collapse: collapse; }
.cl-table th,
.cl-table td {
    padding: 10px 8px;
    text-align: right;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    font-size: .9rem;
}
.cl-table th { font-weight: 700; color: var(--text-secondary, #64748b); }

/* Wide content scrolls inside its own container — the page body never scrolls
   sideways on a phone. */
.cl-table-scroll { overflow-x: auto; }

.cl-row-actions { display: flex; gap: 6px; flex-wrap: wrap; }

.cl-mini {
    padding: 6px 10px;
    font-size: .82rem;
    border-radius: 8px;
    border: 1px solid var(--border-color, #cbd5e1);
    background: transparent;
    color: inherit;
    font-family: inherit;
    cursor: pointer;
}

/* #b91c1c on its own is unreadable on the dark half of the dashboard theme, and
   these pages are teacher-themed. The red has to stay red — it is what marks the
   destructive action — so it is lightened for dark rather than dropped. */
.cl-mini.danger { border-color: #fca5a5; color: #b91c1c; }

@media (prefers-color-scheme: dark) {
    .cl-mini.danger { border-color: #b91c1c; color: #fca5a5; }
}

:root[data-theme='dark'] .cl-mini.danger { border-color: #b91c1c; color: #fca5a5; }
:root[data-theme='light'] .cl-mini.danger { border-color: #fca5a5; color: #b91c1c; }

.cl-rule-list { display: flex; flex-direction: column; gap: 10px; }

.cl-rule {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 14px;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 12px;
}

.cl-rule.is-off { opacity: .6; }
.cl-rule-main { display: flex; flex-direction: column; gap: 4px; }
.cl-rule-main strong { font-size: .98rem; }
.cl-rule-main span { font-size: .84rem; color: var(--text-secondary, #64748b); }

.cl-preview-host { margin-top: 18px; }

.cl-toast {
    position: fixed;
    inset-inline: 0;
    bottom: 24px;
    margin: 0 auto;
    width: max-content;
    max-width: 90vw;
    padding: 12px 20px;
    border-radius: 10px;
    background: #0f172a;
    color: #fff;
    z-index: 9999;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
}

.cl-toast.bad { background: #b91c1c; }