/* Student pages — one card aesthetic, taken from the shared student/HTE identity
 * band that sits under the heading.
 *
 * Measured before this sheet (on /internship):
 *   identity band : padding 9.6px 12px, radius 8px, title 13px/700
 *   .card header  : padding 10px 16px, radius 5px, title 14px/600
 *   .card body    : padding  4px 16px 14px
 *
 * So the surfaces already agreed (white, 1px #E5E9F2, same shadow) and only the
 * inner rhythm disagreed: cards used a 16px gutter and a lighter, larger title.
 * This sheet aligns the inner rhythm with the band, scoped to role 3 so the admin
 * tables keep their own denser treatment.
 *
 * Scoped by [data-role="3"], set on <body> in app.js updateUI(). */

[data-role="3"] #main-content .card {
    /* the band's corner, now stated in both places as 12px: the reference design
       uses 12px, and .stu-id-panel no longer rides --tblr-border-radius-lg (8px) */
    border-radius: 12px;
    border-color: var(--ojt-border);
    /* the card-header is its own element: without clipping, its corner radius
       (5px) showed inside the card's 8px corner */
    overflow: hidden;
}

[data-role="3"] #main-content .card > .card-header {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--tblr-border-color);
}

[data-role="3"] #main-content .card > .card-header .card-title,
[data-role="3"] #main-content .card > .card-header h1,
[data-role="3"] #main-content .card > .card-header h2,
[data-role="3"] #main-content .card > .card-header h3 {
    font-size: .8125rem;   /* 13px — the identity name's size */
    font-weight: 700;      /* the identity name's weight */
    line-height: 1.35;
    margin: 0;
}

[data-role="3"] #main-content .card > .card-body {
    padding: 1rem;
}

/* A card that wraps a table keeps its own full-bleed chrome. */
[data-role="3"] #main-content .card.table-card > .card-body,
[data-role="3"] #main-content .card:has(> .table-responsive) > .card-body {
    padding: 0;
}

/* The identity band is the first card of the page: give it the same gutter under
   the heading that every other card has above it. */
[data-role="3"] #main-content .stu-identity {
    margin-bottom: 12px;
}

[data-role="3"] #main-content .stu-identity + .card,
[data-role="3"] #main-content .stu-identity + div > .card {
    margin-top: 0;
}

/* The waitlist is a grid of student panels. It must NOT reuse .stu-identity:
   decorateWithIdentity() skips inserting the band when it finds that class, and the
   waitlist can render before the band's async load returns — which silently dropped
   the whole identity band from the application page. */
[data-role="3"] #main-content .waitlist-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
    gap: 0.5rem;
}

/* A requirement waiting on its prerequisite: readable, clearly not actionable. */
[data-role="3"] #main-content .doc-card.is-locked {
    background: #f8fafc;
    border-style: dashed;
}
[data-role="3"] #main-content .doc-card.is-locked .doc-card-name { color: var(--tblr-muted); }

/* Attendance Permissions — the identity band's language applied to a list of
   capabilities: a tile header with one pill, a hairline divider, then label over
   value per row with the action on the right. The card's shell, header, rows and
   notes are the page's own now (attendance-page.css); what stays here is the
   legacy permission-line styling other student surfaces still read. */
[data-role="3"] #main-content .perm-lines { display: flex; flex-direction: column; }
[data-role="3"] #main-content .perm-line {
    display: flex; align-items: center; gap: 0.65rem;
    padding: 0.6rem 0;
}
[data-role="3"] #main-content .perm-line + .perm-line {
    border-top: 1px solid var(--tblr-border-color);
}
[data-role="3"] #main-content .perm-icon {
    display: grid; place-items: center;
    width: 28px; height: 28px; flex: 0 0 28px;
    border-radius: 8px;
    background: var(--tblr-border-color-light, #f1f5f9);
    color: var(--tblr-muted);
    font-size: 0.75rem;
}
[data-role="3"] #main-content .perm-line .stu-field { flex: 1; min-width: 0; }
[data-role="3"] #main-content .perm-line .permission-state {
    font-size: 0.75rem; font-weight: 500; color: var(--tblr-body-color);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
[data-role="3"] #main-content .perm-line .permission-state.is-granted { color: #0f9d6e; }
[data-role="3"] #main-content .perm-line .permission-state.is-denied { color: #d63939; }
[data-role="3"] #main-content .perm-line .btn { flex: 0 0 auto; }

/* The band's label treatment, applied to the Today figures. */
[data-role="3"] #main-content .today-stat-label {
    font-size: 0.625rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--tblr-muted);
}
[data-role="3"] #main-content .today-card .card-body { padding-top: 0.5rem; }

/* The permissions strip: three capabilities side by side, each an icon, a label over a
   status pill, and its action — the reference layout, at the band's width. */
[data-role="3"] #main-content .perm-cols {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    padding-top: 0.25rem;
}
[data-role="3"] #main-content .perm-col {
    display: flex; align-items: center; gap: 0.6rem; min-width: 0;
}
[data-role="3"] #main-content .perm-col .stu-field { flex: 1; min-width: 0; }
[data-role="3"] #main-content .perm-col .btn { flex: 0 0 auto; }
@media (max-width: 900px) {
    [data-role="3"] #main-content .perm-cols { grid-template-columns: minmax(0, 1fr); }
}

/* ── Attendance Permissions card ───────────────────────────────────────────────
   Layout only. Scoped to the student role so the admin pages are untouched, and
   to #att-context-card so nothing else that shares .card is affected.
   Reuses the project's .card shell and .btn/.btn-primary; the pill is styled here
   because the JS writes .permission-state + a stu-pill-* tone class.            */
[data-role="3"] #main-content .perm-card {
    background: #fff;
    border: 1px solid #E8ECF1;
    /* Geometry shared with the identity/HTE band so the three read as one system. */
    border-radius: 16px;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: 0 1px 2px rgba(15,27,45,.04), 0 8px 24px rgba(15,27,45,.04);
}
/* hairlines: inset inside the card padding */
[data-role="3"] #main-content .perm-hairline { height: 1px; background: #EEF1F5; margin-bottom: 14px; }

/* header status pill (Working day) */
[data-role="3"] #main-content .perm-status-pill {
    display: inline-flex; align-items: center; gap: 7px; flex: none; white-space: nowrap;
    padding: 3px 10px 3px 8px; border-radius: 999px;
    font-size: 12.5px; font-weight: 600;
}
[data-role="3"] #main-content .perm-status-pill.is-green { background: #E6F5EC; color: #0B6B3A; }
[data-role="3"] #main-content .perm-status-pill.is-grey  { background: #EDF1F5; color: #526173; }
[data-role="3"] #main-content .perm-status-dot {
    width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}

/* the three permissions, as list rows (spec 6 LEFT): 52 high, bottom hairline */
[data-role="3"] #main-content .perm-row { display: flex; flex-direction: column; }
[data-role="3"] #main-content .perm-cell {
    display: flex; align-items: center; gap: 12px; min-width: 0;
    height: 52px; padding: 0;
    border-bottom: 1px solid #EEF1F5;
}
[data-role="3"] #main-content .perm-cell:last-child { border-bottom: 0; }
[data-role="3"] #main-content .perm-cell-icon {
    width: 38px; height: 38px; flex: none;
    display: grid; place-items: center;
    border-radius: 11px;
    background: #EEF2F6;
    color: #5B6779;
    font-size: 17px;
}
/* label sits on the row's baseline with its pill beside it, label taking the slack */
[data-role="3"] #main-content .perm-cell-text {
    display: flex; flex-direction: row; align-items: center; gap: 10px;
    flex: 1; min-width: 0;
}
[data-role="3"] #main-content .perm-label {
    flex: 1; min-width: 0;
    font-size: 11px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .07em; color: #6B7686;
}

/* status pill — the JS writes .permission-state + a stu-pill-* tone class, so the
   tones are mapped here rather than changed in the handler */
[data-role="3"] #main-content .perm-cell .permission-state {
    display: inline-flex; align-items: center; gap: 7px;
    margin: 0; align-self: flex-start;
    padding: 3px 10px 3px 8px; border-radius: 999px;
    font-size: 12.5px; font-weight: 600; line-height: 1.4;
    white-space: nowrap;
}
[data-role="3"] #main-content .perm-cell .permission-state .stu-pill-dot {
    width: 6px; height: 6px; border-radius: 50%; flex: none; background: currentColor;
}
[data-role="3"] #main-content .perm-cell .permission-state.stu-pill-success { background: #E6F5EC; color: #0B6B3A; }
[data-role="3"] #main-content .perm-cell .permission-state.stu-pill-warning { background: #FFF1D6; color: #8A4B00; }
[data-role="3"] #main-content .perm-cell .permission-state.stu-pill-danger  { background: #FDECEC; color: #B42318; }

/* action */
[data-role="3"] #main-content .perm-card .perm-cell .perm-action,
[data-role="3"] #main-content .perm-card .perm-cell .perm-action.btn {
    flex: none; height: 36px; min-height: 36px; max-height: 36px;
    padding: 0 16px; border-radius: 10px;
    background: #0A66A8; border-color: #0A66A8; color: #fff;
    font-size: 13.5px; font-weight: 600; line-height: 1;
}

/* notes */
/* Footer: compressed, band-style — small muted text, no lead labels, tight spacing. */
[data-role="3"] #main-content .perm-notes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 4px 24px;
    margin-top: -2px;
}
[data-role="3"] #main-content .perm-note {
    margin: 0; font-size: 12px; line-height: 1.45; color: #6B7686;
}
[data-role="3"] #main-content .perm-note strong { font-weight: 500; color: #6B7686; }

@media (max-width: 900px) {
    [data-role="3"] #main-content .perm-row { grid-template-columns: minmax(0, 1fr); }
    [data-role="3"] #main-content .perm-cell { padding: 14px 0 0; }
    [data-role="3"] #main-content .perm-cell + .perm-cell {
        border-left: 0; border-top: 1px solid #EEF1F5;
    }
    [data-role="3"] #main-content .perm-cell:first-child { padding-top: 0; }
    [data-role="3"] #main-content .perm-notes { grid-template-columns: minmax(0, 1fr); }
}

/* One shared card radius: the identity/HTE band panels take the same 16px as the
   Attendance cards, so the three bands read as one system rather than three looks. */
[data-role="3"] #main-content .stu-id-panel {
    border-radius: 16px;
    padding: 16px 20px;
}

/* One shared radius for every card on the page (spec: "no one-off values"). */
[data-role="3"] #main-content .today-card,
[data-role="3"] #main-content .location-card,
[data-role="3"] #main-content .perm-card,
[data-role="3"] #main-content .stu-id-panel {
    border-radius: 16px;
}