/**
 * ==========================================================
 * ABSENSIKU v1.0 — UI ENGINE v2
 * MASTER VISUAL SYSTEM
 * ==========================================================
 */

:root {
    --ui-sidebar-width: 292px;
    --ui-navbar-height: 72px;
    --ui-content-max: 1480px;

    --ui-bg: #f6f8fc;
    --ui-surface: #ffffff;
    --ui-surface-soft: #f8fafc;
    --ui-surface-muted: #f1f5f9;

    --ui-text: #0f172a;
    --ui-text-strong: #0b1220;
    --ui-muted: #64748b;
    --ui-muted-soft: #94a3b8;
    --ui-border: #e5eaf2;
    --ui-border-strong: #dbe3ee;

    --ui-primary: #2563eb;
    --ui-primary-hover: #1d4ed8;
    --ui-primary-soft: #eff6ff;

    --ui-accent: #7c3aed;
    --ui-accent-soft: #f4efff;

    --ui-success: #16a34a;
    --ui-success-soft: #ecfdf3;

    --ui-warning: #d97706;
    --ui-warning-soft: #fff7ed;

    --ui-info: #0284c7;
    --ui-info-soft: #f0f9ff;

    --ui-danger: #dc2626;
    --ui-danger-soft: #fef2f2;

    --ui-neutral: #64748b;
    --ui-neutral-soft: #f1f5f9;

    --ui-font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    --ui-font-xs: 10px;
    --ui-font-sm: 12px;
    --ui-font-md: 13px;
    --ui-font-lg: 16px;
    --ui-font-xl: 20px;

    --ui-title-page: 30px;
    --ui-title-welcome: 32px;
    --ui-title-section: 18px;
    --ui-title-card: 15px;

    --ui-line-tight: 1.15;
    --ui-line-normal: 1.5;
    --ui-line-relaxed: 1.65;

    --ui-weight-normal: 500;
    --ui-weight-medium: 650;
    --ui-weight-bold: 750;
    --ui-weight-heavy: 850;

    --ui-space-1: 4px;
    --ui-space-2: 8px;
    --ui-space-3: 12px;
    --ui-space-4: 16px;
    --ui-space-5: 20px;
    --ui-space-6: 24px;
    --ui-space-7: 28px;
    --ui-space-8: 32px;
    --ui-space-10: 40px;
    --ui-space-12: 48px;

    --ui-page-gap: 20px;
    --ui-content-padding-x: 34px;
    --ui-content-padding-y: 28px;

    --ui-radius-xs: 8px;
    --ui-radius-sm: 10px;
    --ui-radius-md: 14px;
    --ui-radius-lg: 18px;
    --ui-radius-xl: 22px;
    --ui-radius-pill: 999px;

    --ui-shadow-xs:
        0 1px 2px rgba(15, 23, 42, .025);

    --ui-shadow-sm:
        0 8px 22px rgba(15, 23, 42, .035);

    --ui-shadow-md:
        0 12px 34px rgba(15, 23, 42, .05);

    --ui-shadow-focus:
        0 0 0 3px rgba(37, 99, 235, .10);

    --ui-control-height: 42px;
    --ui-button-height: 40px;
    --ui-icon-size: 40px;
    --ui-row-height: 64px;
}

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

.ui-page {
    width: min(100%, var(--ui-content-max));
    margin: 0 auto;
    display: grid;
    gap: var(--ui-page-gap);
    color: var(--ui-text);
    font-family: var(--ui-font-family);
}

.ui-page a {
    text-decoration: none;
}

.ui-page button,
.ui-page input,
.ui-page select,
.ui-page textarea {
    font: inherit;
}

.ui-page-header {
    min-height: 132px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ui-space-8);
    padding: var(--ui-space-7) var(--ui-space-8);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-sm);
}

.ui-page-header__main {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--ui-space-5);
}

.ui-page-header__icon {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    color: var(--ui-primary);
    background: var(--ui-primary-soft);
}

.ui-page-header__icon svg {
    width: 23px;
    height: 23px;
}

.ui-page-header__content {
    min-width: 0;
}

.ui-eyebrow {
    display: block;
    margin-bottom: 6px;
    color: var(--ui-primary);
    font-size: var(--ui-font-xs);
    line-height: 1.2;
    font-weight: var(--ui-weight-heavy);
    letter-spacing: .13em;
    text-transform: uppercase;
}

.ui-page-header__title {
    margin: 0;
    color: var(--ui-text-strong);
    font-size: var(--ui-title-page);
    line-height: var(--ui-line-tight);
    font-weight: var(--ui-weight-heavy);
    letter-spacing: -.035em;
}

.ui-page-header__description {
    max-width: 760px;
    margin: 8px 0 0;
    color: var(--ui-muted);
    font-size: var(--ui-font-md);
    line-height: var(--ui-line-normal);
}

.ui-page-header__aside {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--ui-space-4);
}

.ui-page-header__meta {
    color: var(--ui-muted);
    font-size: var(--ui-font-sm);
    font-weight: var(--ui-weight-medium);
    white-space: nowrap;
}

.ui-page-header--welcome {
    min-height: 146px;
}

.ui-page-header--welcome .ui-page-header__title {
    font-size: var(--ui-title-welcome);
}

.ui-page-header--compact {
    min-height: 104px;
    padding-block: var(--ui-space-5);
}

.ui-page-header--compact .ui-page-header__title {
    font-size: 28px;
}

.ui-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
}

.ui-button {
    min-height: var(--ui-button-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 16px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    cursor: pointer;
    font-size: 11px;
    font-weight: var(--ui-weight-bold);
    transition:
        transform .15s ease,
        border-color .15s ease,
        background-color .15s ease,
        box-shadow .15s ease;
}

.ui-button:hover {
    transform: translateY(-1px);
}

.ui-button--primary {
    border-color: var(--ui-primary);
    color: #fff;
    background: var(--ui-primary);
    box-shadow: 0 8px 18px rgba(37, 99, 235, .16);
}

.ui-button--primary:hover {
    border-color: var(--ui-primary-hover);
    background: var(--ui-primary-hover);
}

.ui-button--secondary {
    color: #334155;
    background: var(--ui-surface);
}

.ui-button--danger {
    border-color: #fecaca;
    color: var(--ui-danger);
    background: var(--ui-danger-soft);
}

.ui-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--ui-space-5);
}

.ui-section-heading h2,
.ui-card__title {
    margin: 0;
    color: var(--ui-text);
    font-size: var(--ui-title-section);
    line-height: 1.2;
    font-weight: var(--ui-weight-heavy);
    letter-spacing: -.025em;
}

.ui-card {
    padding: var(--ui-space-6);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-sm);
}

.ui-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ui-space-5);
    margin-bottom: var(--ui-space-5);
}

.ui-card__description {
    margin: 5px 0 0;
    color: var(--ui-muted);
    font-size: 11px;
    line-height: var(--ui-line-normal);
}

.ui-link {
    color: var(--ui-primary);
    font-size: 11px;
    font-weight: var(--ui-weight-bold);
}

.ui-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-sm);
}

.ui-stat {
    min-height: 126px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--ui-space-5) var(--ui-space-6);
    border-right: 1px solid var(--ui-border);
}

.ui-stat:last-child {
    border-right: 0;
}

.ui-icon {
    width: var(--ui-icon-size);
    height: var(--ui-icon-size);
    display: grid;
    place-items: center;
    margin-bottom: 8px;
    border-radius: 12px;
}

.ui-icon svg {
    width: 19px;
    height: 19px;
}

.ui-icon--primary { color: var(--ui-primary); background: var(--ui-primary-soft); }
.ui-icon--success { color: var(--ui-success); background: var(--ui-success-soft); }
.ui-icon--warning { color: var(--ui-warning); background: var(--ui-warning-soft); }
.ui-icon--info { color: var(--ui-info); background: var(--ui-info-soft); }
.ui-icon--danger { color: var(--ui-danger); background: var(--ui-danger-soft); }
.ui-icon--neutral,
.ui-icon--secondary { color: var(--ui-neutral); background: var(--ui-neutral-soft); }

.ui-stat__value {
    color: var(--ui-text-strong);
    font-size: 28px;
    line-height: 1;
    font-weight: var(--ui-weight-heavy);
}

.ui-stat__label {
    margin-top: 7px;
    color: var(--ui-muted);
    font-size: 11px;
    font-weight: var(--ui-weight-medium);
}

.ui-filter-card {
    padding: 18px 20px;
}

.ui-filter {
    display: grid;
    grid-template-columns:
        minmax(220px, 1.2fr)
        minmax(160px, .65fr)
        minmax(160px, .65fr)
        minmax(155px, .55fr)
        minmax(155px, .55fr)
        auto;
    align-items: end;
    gap: 12px;
}

.ui-field {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ui-field__label {
    color: #475569;
    font-size: 10px;
    font-weight: var(--ui-weight-bold);
}

.ui-input,
.ui-select,
.ui-textarea {
    width: 100%;
    min-height: var(--ui-control-height);
    padding: 0 12px;
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-sm);
    color: var(--ui-text);
    background: var(--ui-surface);
    font-size: 12px;
    outline: none;
}

.ui-textarea {
    min-height: 110px;
    padding-block: 10px;
    resize: vertical;
}

.ui-input:focus,
.ui-select:focus,
.ui-textarea:focus {
    border-color: #93b4fb;
    box-shadow: var(--ui-shadow-focus);
}

.ui-filter__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ui-table-wrap {
    overflow: hidden;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-sm);
}

.ui-table-scroll {
    overflow-x: auto;
}

.ui-table {
    width: 100%;
    border-collapse: collapse;
}

.ui-table th {
    padding: 12px 15px;
    border-bottom: 1px solid var(--ui-border);
    color: var(--ui-muted);
    background: var(--ui-surface-soft);
    font-size: 10px;
    line-height: 1.25;
    font-weight: var(--ui-weight-bold);
    text-align: left;
    text-transform: uppercase;
    letter-spacing: .035em;
    white-space: nowrap;
}

.ui-table td {
    min-height: var(--ui-row-height);
    padding: 14px 15px;
    border-bottom: 1px solid #edf1f6;
    color: #334155;
    font-size: 12px;
    line-height: 1.45;
    vertical-align: middle;
}

.ui-table tbody tr:last-child td {
    border-bottom: 0;
}

.ui-table tbody tr:hover {
    background: #fbfdff;
}

.ui-badge {
    min-height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 9px;
    border-radius: var(--ui-radius-pill);
    font-size: 9px;
    line-height: 1;
    font-weight: var(--ui-weight-heavy);
    white-space: nowrap;
}

.ui-badge--primary { color: var(--ui-primary); background: var(--ui-primary-soft); }
.ui-badge--success { color: var(--ui-success); background: var(--ui-success-soft); }
.ui-badge--warning { color: var(--ui-warning); background: var(--ui-warning-soft); }
.ui-badge--info { color: var(--ui-info); background: var(--ui-info-soft); }
.ui-badge--danger { color: var(--ui-danger); background: var(--ui-danger-soft); }
.ui-badge--neutral,
.ui-badge--secondary { color: var(--ui-neutral); background: var(--ui-neutral-soft); }

.ui-chart__total {
    min-width: 82px;
    padding: 9px 12px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface-soft);
}

.ui-chart__total span {
    display: block;
    color: var(--ui-muted-soft);
    font-size: 9px;
}

.ui-chart__total strong {
    display: block;
    margin-top: 2px;
    color: var(--ui-text);
    font-size: 21px;
}

.ui-chart__body {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(220px, .6fr);
    gap: var(--ui-space-7);
    align-items: center;
}

.ui-chart__bars {
    display: grid;
    gap: 13px;
}

.ui-chart__row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
    color: var(--ui-muted);
    font-size: 10.5px;
}

.ui-chart__track {
    height: 9px;
    overflow: hidden;
    border-radius: var(--ui-radius-pill);
    background: #edf2f7;
}

.ui-chart__fill {
    height: 100%;
    display: block;
    border-radius: inherit;
}

.ui-chart__fill--primary { background: var(--ui-primary); }
.ui-chart__fill--success { background: var(--ui-success); }
.ui-chart__fill--warning { background: var(--ui-warning); }
.ui-chart__fill--info { background: var(--ui-info); }
.ui-chart__fill--danger { background: var(--ui-danger); }
.ui-chart__fill--neutral,
.ui-chart__fill--secondary { background: var(--ui-neutral); }

.ui-chart__legend {
    display: grid;
    gap: 8px;
}

.ui-chart__legend-item {
    min-height: 34px;
    display: grid;
    grid-template-columns: 8px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    padding: 7px 10px;
    border-radius: 9px;
    color: var(--ui-muted);
    background: var(--ui-surface-soft);
    font-size: 10.5px;
}

.ui-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.ui-dot--primary { background: var(--ui-primary); }
.ui-dot--success { background: var(--ui-success); }
.ui-dot--warning { background: var(--ui-warning); }
.ui-dot--info { background: var(--ui-info); }
.ui-dot--danger { background: var(--ui-danger); }
.ui-dot--neutral,
.ui-dot--secondary { background: var(--ui-neutral); }

.ui-split {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, .85fr);
    gap: var(--ui-page-gap);
}

.ui-student-list,
.ui-activity-list {
    display: grid;
}

.ui-student-row {
    min-height: 68px;
    display: grid;
    grid-template-columns:
        42px
        minmax(180px, 1fr)
        68px
        68px
        auto;
    align-items: center;
    gap: 11px;
    padding: 11px 0;
    border-bottom: 1px solid #edf1f6;
}

.ui-student-row:last-child,
.ui-activity-row:last-child {
    border-bottom: 0;
}

.ui-avatar {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: var(--ui-primary);
    background: var(--ui-primary-soft);
    font-size: 13px;
    font-weight: var(--ui-weight-heavy);
}

.ui-student-row__main,
.ui-activity-row__main,
.ui-time {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.ui-student-row__main strong,
.ui-activity-row__main strong {
    overflow: hidden;
    color: var(--ui-text);
    font-size: 12px;
    line-height: 1.35;
    font-weight: var(--ui-weight-bold);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-student-row__main span,
.ui-activity-row__main span {
    margin-top: 3px;
    overflow: hidden;
    color: var(--ui-muted);
    font-size: 9.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-time span {
    color: var(--ui-muted-soft);
    font-size: 8.5px;
    text-transform: uppercase;
}

.ui-time strong {
    margin-top: 2px;
    color: #334155;
    font-size: 11px;
}

.ui-activity-row {
    min-height: 62px;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    padding: 10px 0;
    border-bottom: 1px solid #edf1f6;
}

.ui-empty {
    min-height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: var(--ui-space-8);
    text-align: center;
}

.ui-empty__icon {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    margin-bottom: 12px;
    border-radius: 16px;
    color: var(--ui-primary);
    background: var(--ui-primary-soft);
}

.ui-empty__title {
    margin: 0;
    color: var(--ui-text);
    font-size: 15px;
    font-weight: var(--ui-weight-bold);
}

.ui-empty__description {
    max-width: 480px;
    margin: 7px 0 0;
    color: var(--ui-muted);
    font-size: 11px;
    line-height: var(--ui-line-relaxed);
}

@media (max-width: 1180px) {
    .ui-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ui-stat:nth-child(2) {
        border-right: 0;
    }

    .ui-filter {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ui-filter__actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 920px) {
    .ui-page-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .ui-page-header__aside {
        width: 100%;
        justify-content: space-between;
    }

    .ui-split,
    .ui-chart__body {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    :root {
        --ui-title-page: 28px;
        --ui-title-welcome: 31px;
    }

    .ui-page-header {
        padding: 22px 20px;
    }

    .ui-page-header__main {
        align-items: flex-start;
    }

    .ui-page-header__icon {
        width: 46px;
        height: 46px;
        flex-basis: 46px;
    }

    .ui-stat-grid {
        grid-template-columns: 1fr;
    }

    .ui-stat {
        min-height: 100px;
        border-right: 0;
        border-bottom: 1px solid var(--ui-border);
    }

    .ui-filter {
        grid-template-columns: 1fr;
    }

    .ui-filter__actions {
        grid-column: auto;
    }

    .ui-student-row {
        grid-template-columns: 42px minmax(0, 1fr) auto;
    }

    .ui-time {
        display: none;
    }
}


/* ==========================================================
   LEGACY MODULE BRIDGE — AUTHORITATIVE
   ----------------------------------------------------------
   Semua halaman lama dibawa ke kontrak visual UI Engine.
   Modul tidak lagi menentukan sendiri typography/frame utama.
   ========================================================== */

/* Root typography: satu font untuk seluruh modul Web */
.master-user-page,
.master-student-page,
.master-teacher-page,
.master-supervisor-page,
.master-company-page,
.master-internship-page,
.permission-admin-page,
.journal-admin,
.announcement-admin,
.assessment-page,
.report-page {
    font-family: var(--ui-font-family) !important;
    color: var(--ui-text) !important;
}

/* ----------------------------------------------------------
   PAGE HEADER / HERO FRAME — satu bentuk resmi
   ---------------------------------------------------------- */
.master-user-hero,
.master-student-hero,
.master-teacher-hero,
.master-supervisor-hero,
.master-company-hero,
.master-internship-hero,
.permission-admin-page__hero,
.journal-hero,
.ann-page-head,
.assessment-hero,
.report-head {
    min-height: 126px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: var(--ui-space-7) !important;
    margin: 0 0 var(--ui-page-gap) !important;
    padding: 24px 28px !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-lg) !important;
    background: var(--ui-surface) !important;
    box-shadow: var(--ui-shadow-sm) !important;
}

.master-user-hero__content,
.master-student-hero > div:first-child,
.master-teacher-hero > div:first-child,
.master-supervisor-hero > div:first-child,
.master-company-hero > div:first-child,
.master-internship-hero > div:first-child,
.permission-admin-page__hero > div:first-child,
.journal-hero > div:first-child,
.ann-page-identity,
.assessment-hero > div:first-child,
.report-head > div:first-child {
    min-width: 0 !important;
}

/* Semua judul utama memakai token yang sama */
.master-user-hero h1,
.master-student-hero h1,
.master-teacher-hero h1,
.master-supervisor-hero h1,
.master-company-hero h1,
.master-internship-hero h1,
.permission-admin-page__title,
.journal-hero h1,
.ann-page-title,
.assessment-hero h1,
.report-head h1 {
    margin: 0 !important;
    color: var(--ui-text-strong) !important;
    font-family: var(--ui-font-family) !important;
    font-size: var(--ui-title-page) !important;
    line-height: var(--ui-line-tight) !important;
    font-weight: var(--ui-weight-heavy) !important;
    letter-spacing: -.035em !important;
}

/* Eyebrow / category label */
.master-user-eyebrow,
.master-student-eyebrow,
.master-teacher-eyebrow,
.master-supervisor-eyebrow,
.master-company-eyebrow,
.master-internship-eyebrow,
.permission-admin-page__eyebrow,
.journal-eyebrow,
.ann-page-head .ann-page-subtitle + *,
.assessment-hero .eyebrow,
.report-head .eyebrow,
.ann-page-identity::before {
    font-family: var(--ui-font-family) !important;
}

.master-user-eyebrow,
.master-student-eyebrow,
.master-teacher-eyebrow,
.master-supervisor-eyebrow,
.master-company-eyebrow,
.master-internship-eyebrow,
.permission-admin-page__eyebrow,
.journal-eyebrow,
.ann-page-eyebrow,
.assessment-hero .eyebrow,
.report-head .eyebrow {
    display: block !important;
    margin: 0 0 6px !important;
    color: var(--ui-primary) !important;
    font-size: var(--ui-font-xs) !important;
    line-height: 1.2 !important;
    font-weight: var(--ui-weight-heavy) !important;
    letter-spacing: .13em !important;
    text-transform: uppercase !important;
}

/* Subtitle/descriptions */
.master-user-hero p,
.master-student-hero p,
.master-teacher-hero p,
.master-supervisor-hero p,
.master-company-hero p,
.master-internship-hero p,
.permission-admin-page__description,
.journal-hero .journal-muted,
.ann-page-subtitle,
.assessment-hero .muted,
.report-head .muted {
    max-width: 760px !important;
    margin: 8px 0 0 !important;
    color: var(--ui-muted) !important;
    font-family: var(--ui-font-family) !important;
    font-size: var(--ui-font-md) !important;
    line-height: var(--ui-line-normal) !important;
    font-weight: var(--ui-weight-normal) !important;
}

/* Announcement identity icon stays optional but uses engine proportions */
.ann-page-icon {
    width: 48px !important;
    height: 48px !important;
    flex: 0 0 48px !important;
    border-radius: 14px !important;
    color: var(--ui-accent) !important;
    background: var(--ui-accent-soft) !important;
}

/* ----------------------------------------------------------
   SECTION HEADINGS
   ---------------------------------------------------------- */
.master-user-panel__heading h2,
.master-user-list-header h2,
.master-student-list-header h2,
.master-teacher-list-header h2,
.master-supervisor-list-header h2,
.master-company-list-header h2,
.master-internship-list-header h2,
.journal-panel h2,
.ann-section-head h2,
.assessment-page .panel h2,
.report-page .panel h2 {
    margin: 0 !important;
    color: var(--ui-text) !important;
    font-family: var(--ui-font-family) !important;
    font-size: var(--ui-title-section) !important;
    line-height: 1.2 !important;
    font-weight: var(--ui-weight-heavy) !important;
    letter-spacing: -.025em !important;
}

/* ----------------------------------------------------------
   CARDS / PANELS / FRAMES
   ---------------------------------------------------------- */
.master-user-panel,
.master-student-panel,
.master-teacher-panel,
.master-supervisor-panel,
.master-company-panel,
.master-internship-panel,
.permission-admin-page__toolbar,
.permission-admin-page__table-wrap,
.journal-panel,
.ann-card,
.ann-info-bar,
.assessment-page .panel,
.report-page .panel {
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-lg) !important;
    background: var(--ui-surface) !important;
    box-shadow: var(--ui-shadow-sm) !important;
}

/* ----------------------------------------------------------
   STAT CARDS — same density and typography
   ---------------------------------------------------------- */
.master-user-summary,
.master-student-summary,
.master-teacher-summary,
.master-supervisor-summary,
.master-company-summary,
.master-internship-summary,
.permission-admin-page__summary,
.assessment-page .summary,
.report-page .cards {
    gap: 0 !important;
    overflow: hidden !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-lg) !important;
    background: var(--ui-surface) !important;
    box-shadow: var(--ui-shadow-sm) !important;
}

.master-user-summary__card,
.master-student-summary > *,
.master-teacher-summary > *,
.master-supervisor-summary > *,
.master-company-summary > *,
.master-internship-summary > *,
.permission-summary-card,
.assessment-page .summary-card,
.report-page .cards > .card {
    min-height: 112px !important;
    padding: 18px 20px !important;
    border-radius: 0 !important;
    border: 0 !important;
    border-right: 1px solid var(--ui-border) !important;
    box-shadow: none !important;
    background: var(--ui-surface) !important;
    font-family: var(--ui-font-family) !important;
}

.master-user-summary__card:last-child,
.master-student-summary > *:last-child,
.master-teacher-summary > *:last-child,
.master-supervisor-summary > *:last-child,
.master-company-summary > *:last-child,
.master-internship-summary > *:last-child,
.permission-summary-card:last-child,
.assessment-page .summary-card:last-child,
.report-page .cards > .card:last-child {
    border-right: 0 !important;
}

.master-user-summary__card strong,
.master-student-summary strong,
.master-teacher-summary strong,
.master-supervisor-summary strong,
.master-company-summary strong,
.master-internship-summary strong,
.permission-summary-card strong,
.assessment-page .summary-card strong,
.report-page .card strong {
    color: var(--ui-text-strong) !important;
    font-size: 25px !important;
    line-height: 1 !important;
    font-weight: var(--ui-weight-heavy) !important;
}

.master-user-summary__card span,
.master-student-summary span,
.master-teacher-summary span,
.master-supervisor-summary span,
.master-company-summary span,
.master-internship-summary span,
.permission-summary-card span,
.assessment-page .summary-card .muted,
.report-page .card .muted {
    color: var(--ui-muted) !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
}

/* ----------------------------------------------------------
   FORMS / FILTERS / CONTROLS
   ---------------------------------------------------------- */
.master-user-filter input,
.master-user-filter select,
.master-student-filter input,
.master-student-filter select,
.master-teacher-filter input,
.master-teacher-filter select,
.master-supervisor-filter input,
.master-supervisor-filter select,
.master-company-filter input,
.master-company-filter select,
.master-internship-filter input,
.master-internship-filter select,
.permission-admin-page__toolbar input,
.permission-admin-page__toolbar select,
.journal-input,
.journal-select,
.ann-form input,
.ann-form select,
.ann-form textarea,
.assessment-page .input,
.report-page .input {
    min-height: var(--ui-control-height) !important;
    border: 1px solid var(--ui-border-strong) !important;
    border-radius: var(--ui-radius-sm) !important;
    color: var(--ui-text) !important;
    background: var(--ui-surface) !important;
    font-family: var(--ui-font-family) !important;
    font-size: 12px !important;
    outline: none !important;
}

.master-user-filter input:focus,
.master-user-filter select:focus,
.master-student-filter input:focus,
.master-student-filter select:focus,
.master-teacher-filter input:focus,
.master-teacher-filter select:focus,
.master-supervisor-filter input:focus,
.master-supervisor-filter select:focus,
.master-company-filter input:focus,
.master-company-filter select:focus,
.master-internship-filter input:focus,
.master-internship-filter select:focus,
.journal-input:focus,
.journal-select:focus,
.ann-form input:focus,
.ann-form select:focus,
.ann-form textarea:focus,
.assessment-page .input:focus,
.report-page .input:focus {
    border-color: #93b4fb !important;
    box-shadow: var(--ui-shadow-focus) !important;
}

/* Buttons */
.master-user-button,
.master-student-button,
.master-teacher-button,
.master-supervisor-button,
.master-company-button,
.master-internship-button,
.permission-admin-page button,
.permission-admin-page a.permission-admin-page__detail,
.journal-btn,
.detail-link,
.ann-btn,
.assessment-page .btn,
.report-page .btn {
    min-height: var(--ui-button-height) !important;
    border-radius: var(--ui-radius-sm) !important;
    font-family: var(--ui-font-family) !important;
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: var(--ui-weight-bold) !important;
}

/* ----------------------------------------------------------
   TABLE TYPOGRAPHY
   ---------------------------------------------------------- */
.master-user-table,
.master-student-table,
.master-teacher-table,
.master-supervisor-table,
.master-company-table,
.master-internship-table,
.permission-admin-page__table,
.journal-table,
.ann-table,
.assessment-page .table,
.report-page .table {
    font-family: var(--ui-font-family) !important;
}

.master-user-table th,
.master-student-table th,
.master-teacher-table th,
.master-supervisor-table th,
.master-company-table th,
.master-internship-table th,
.permission-admin-page__table th,
.journal-table th,
.ann-table th,
.assessment-page .table th,
.report-page .table th {
    color: var(--ui-muted) !important;
    background: var(--ui-surface-soft) !important;
    font-size: 10px !important;
    line-height: 1.25 !important;
    font-weight: var(--ui-weight-bold) !important;
    letter-spacing: .035em !important;
}

.master-user-table td,
.master-student-table td,
.master-teacher-table td,
.master-supervisor-table td,
.master-company-table td,
.master-internship-table td,
.permission-admin-page__table td,
.journal-table td,
.ann-table td,
.assessment-page .table td,
.report-page .table td {
    color: #334155 !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
}

/* ----------------------------------------------------------
   BADGES / PILLS
   ---------------------------------------------------------- */
.master-user-badge,
.master-student-badge,
.master-company-badge,
.master-internship-badge,
.journal-table .badge,
.ann-badge,
.assessment-page .pill,
.report-page .pill {
    min-height: 26px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 5px 9px !important;
    border-radius: var(--ui-radius-pill) !important;
    font-family: var(--ui-font-family) !important;
    font-size: 9px !important;
    line-height: 1 !important;
    font-weight: var(--ui-weight-heavy) !important;
}

/* ----------------------------------------------------------
   PAGE WIDTH / VERTICAL RHYTHM
   ---------------------------------------------------------- */
.master-user-page,
.master-student-page,
.master-teacher-page,
.master-supervisor-page,
.master-company-page,
.master-internship-page,
.permission-admin-page,
.journal-admin,
.announcement-admin,
.assessment-page,
.report-page {
    width: min(100%, var(--ui-content-max)) !important;
    margin-inline: auto !important;
}

/* Top-level legacy heading from layout is not needed when a module hero exists. */
.master-user-page-body .page-header,
.master-student-layout .page-header,
.master-teacher-layout .page-header,
.master-supervisor-layout .page-header,
.master-company-layout .page-header,
.master-internship-layout .page-header {
    display: none !important;
}

@media (max-width: 720px) {
    .master-user-hero,
    .master-student-hero,
    .master-teacher-hero,
    .master-supervisor-hero,
    .master-company-hero,
    .master-internship-hero,
    .permission-admin-page__hero,
    .journal-hero,
    .ann-page-head,
    .assessment-hero,
    .report-head {
        min-height: 0 !important;
        align-items: flex-start !important;
        flex-direction: column !important;
        padding: 20px !important;
    }
}


/* ==========================================================
   MODULE STRUCTURE — SINGLE LAYOUT ENGINE
   ========================================================== */

/* Root wrappers live INSIDE layouts/app.php .page-content. */
.permission-admin-page,
.journal-admin,
.announcement-admin,
.assessment-page,
.report-page,
.profile-page {
    display: grid;
    gap: var(--ui-page-gap);
    width: min(100%, var(--ui-content-max));
    margin: 0 auto;
    padding: 0 0 36px;
    min-width: 0;
}

/* Page frame matches Master Siswa. */
.ann-page-head,
.journal-hero,
.permission-admin-page__hero,
.assessment-hero,
.report-head,
.profile-page__header {
    margin: 0 !important;
}

.ann-page-identity {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.ann-page-eyebrow {
    display: block;
    margin: 0 0 6px;
    color: var(--ui-primary);
    font-size: var(--ui-font-xs);
    line-height: 1.2;
    font-weight: var(--ui-weight-heavy);
    letter-spacing: .13em;
    text-transform: uppercase;
}

/* Announcement */
.ann-info-bar {
    min-height: 58px;
    display: flex;
    align-items: center;
    padding: 14px 18px;
    border: 1px solid #ddd6fe !important;
    border-radius: var(--ui-radius-md) !important;
    color: #6d28d9;
    background: #faf7ff !important;
    font-size: 12px;
}

.ann-info-copy {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ann-info-symbol {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    flex: 0 0 28px;
    border: 1px solid #c4b5fd;
    border-radius: 50%;
    font-weight: 850;
}

.ann-grid {
    display: grid;
    grid-template-columns: minmax(330px, .82fr) minmax(0, 1.55fr);
    gap: var(--ui-page-gap);
    align-items: start;
}

.ann-card {
    padding: 22px;
    overflow: hidden;
}

.ann-section-head,
.ann-list-head,
.ann-section-title-wrap,
.ann-form-footer,
.ann-table-actions {
    display: flex;
    align-items: center;
}

.ann-section-head,
.ann-list-head,
.ann-form-footer {
    justify-content: space-between;
}

.ann-section-title-wrap { gap: 12px; }

.ann-section-icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: var(--ui-primary);
    background: var(--ui-primary-soft);
}

.ann-section-head h2,
.ann-list-head h2 {
    margin: 0;
    color: var(--ui-text);
    font-size: var(--ui-title-section);
    font-weight: var(--ui-weight-heavy);
}

.ann-section-meta,
.ann-help,
.ann-table-summary {
    color: var(--ui-muted);
    font-size: 10px;
    line-height: 1.45;
}

.ann-form {
    display: grid;
    gap: 12px;
    margin-top: 18px;
}

.ann-form label {
    display: grid;
    gap: 6px;
    margin: 0;
    color: #334155;
    font-size: 11px;
    font-weight: var(--ui-weight-bold);
}

.ann-form input,
.ann-form select,
.ann-form textarea {
    width: 100%;
    padding: 0 12px;
}

.ann-form textarea {
    min-height: 92px;
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 1.5;
    resize: vertical;
}

.ann-form textarea[name="content"] { min-height: 112px; }

.ann-form-footer {
    gap: 10px;
    margin-top: 4px;
    padding-top: 14px;
    border-top: 1px solid #edf1f6;
}

.ann-table-wrap,
.journal-table-wrap,
.permission-admin-page__table-wrap,
.assessment-page .table-wrap,
.report-page .table-wrap {
    overflow-x: auto;
}

.ann-table-actions {
    gap: 6px;
    flex-wrap: wrap;
}

.ann-btn,
.journal-btn,
.detail-link,
.permission-admin-page__toolbar button,
.permission-admin-page__reset,
.permission-admin-page__detail,
.assessment-page .btn,
.report-page .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    border: 1px solid var(--ui-border);
    text-decoration: none;
    cursor: pointer;
}

.ann-btn--primary,
.journal-btn,
.permission-admin-page__toolbar button,
.assessment-page .btn-primary,
.report-page .primary {
    border-color: var(--ui-primary);
    color: #fff;
    background: var(--ui-primary);
}

.ann-btn--soft,
.permission-admin-page__reset,
.assessment-page .btn-light,
.report-page .light {
    color: #334155;
    background: #fff;
}

.ann-btn--danger {
    border-color: #fecaca;
    color: var(--ui-danger);
    background: var(--ui-danger-soft);
}

/* Journal */
.journal-panel {
    overflow: hidden;
}

.journal-toolbar {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) 220px auto;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--ui-border);
}

.journal-input,
.journal-select {
    width: 100%;
    padding: 0 12px;
}

.detail-link {
    border-color: #dbeafe;
    color: var(--ui-primary);
    background: var(--ui-primary-soft);
}

.empty,
.permission-admin-page__empty {
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 34px;
    color: var(--ui-muted);
    text-align: center;
}

/* Permission */
.permission-admin-page__hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
}

.permission-admin-page__hero-count {
    min-width: 150px;
    padding: 15px 18px;
    align-self: center;
    border-radius: var(--ui-radius-md);
    color: var(--ui-text);
    background: var(--ui-primary-soft);
    font-size: 11px;
    text-align: center;
}

.permission-admin-page__hero-count strong {
    display: block;
    margin: 4px 0;
    color: var(--ui-primary);
    font-size: 27px;
    line-height: 1;
}

.permission-admin-page__toolbar {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 190px 190px auto;
    gap: 12px;
    padding: 18px 20px;
}

.permission-admin-page__toolbar input,
.permission-admin-page__toolbar select {
    width: 100%;
    padding: 0 12px;
}

.permission-admin-page__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 4px 0;
    color: var(--ui-muted);
    font-size: 10px;
}

.permission-admin-page__pagination {
    display: flex;
    gap: 8px;
}

.permission-admin-page__pagination a,
.permission-admin-page__pagination span {
    min-width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ui-border);
    border-radius: 9px;
    color: var(--ui-text);
    background: #fff;
    text-decoration: none;
}

.permission-admin-page__pagination .is-active {
    border-color: var(--ui-primary);
    color: #fff;
    background: var(--ui-primary);
}

.permission-status {
    min-height: 26px;
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: var(--ui-radius-pill);
    font-size: 9px;
    font-weight: var(--ui-weight-heavy);
}
.permission-status.is-success { color: var(--ui-success); background: var(--ui-success-soft); }
.permission-status.is-warning { color: var(--ui-warning); background: var(--ui-warning-soft); }
.permission-status.is-danger { color: var(--ui-danger); background: var(--ui-danger-soft); }
.permission-status.is-info { color: var(--ui-info); background: var(--ui-info-soft); }
.permission-status.is-neutral { color: var(--ui-neutral); background: var(--ui-neutral-soft); }

/* Assessment + Report */
.assessment-page .filters,
.report-page .filters {
    display: grid;
    align-items: end;
    gap: 10px;
    padding: 18px 20px;
}

.assessment-page .filters {
    grid-template-columns: minmax(240px, 1fr) 220px auto auto;
}

.report-page .filters {
    grid-template-columns: 1fr 1fr 1.35fr 1.35fr auto auto;
}

.assessment-page .input,
.report-page .input {
    width: 100%;
    padding: 0 12px;
}

.assessment-page .table { min-width: 1000px; }
.report-page .table { min-width: 1050px; }

/* Profile */
.profile-page__header {
    min-height: 126px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 24px 28px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-sm);
}

.profile-page__eyebrow {
    display: block;
    margin-bottom: 6px;
    color: var(--ui-primary);
    font-size: var(--ui-font-xs);
    font-weight: var(--ui-weight-heavy);
    letter-spacing: .13em;
    text-transform: uppercase;
}

.profile-page__title {
    margin: 0;
    color: var(--ui-text-strong);
    font-size: var(--ui-title-page);
    line-height: var(--ui-line-tight);
    font-weight: var(--ui-weight-heavy);
    letter-spacing: -.035em;
}

.profile-page__subtitle {
    margin: 8px 0 0;
    color: var(--ui-muted);
    font-size: var(--ui-font-md);
    line-height: var(--ui-line-normal);
}

.profile-grid {
    display: grid;
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
    gap: var(--ui-page-gap);
}

.profile-card {
    overflow: hidden;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-sm);
}

.profile-identity {
    padding: 28px;
    text-align: center;
}

.profile-avatar {
    width: 78px;
    height: 78px;
    display: grid;
    place-items: center;
    margin: 0 auto 16px;
    border-radius: 20px;
    color: #fff;
    background: var(--ui-primary);
    font-size: 23px;
    font-weight: var(--ui-weight-heavy);
    box-shadow: 0 10px 24px rgba(37, 99, 235, .18);
}

.profile-name {
    margin: 0;
    color: var(--ui-text);
    font-size: var(--ui-title-card);
    font-weight: var(--ui-weight-heavy);
}

.profile-role {
    min-height: 25px;
    display: inline-flex;
    align-items: center;
    margin-top: 10px;
    padding: 5px 9px;
    border-radius: var(--ui-radius-pill);
    color: var(--ui-primary);
    background: var(--ui-primary-soft);
    font-size: 9px;
    font-weight: var(--ui-weight-heavy);
}

.profile-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 18px;
    color: var(--ui-success);
    font-size: 11px;
    font-weight: var(--ui-weight-bold);
}

.profile-status__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
}

.profile-id {
    margin-top: 16px;
    color: var(--ui-muted-soft);
    font-size: 10px;
}

.profile-details { padding: 24px 28px; }

.profile-details__title {
    margin: 0 0 15px;
    color: var(--ui-text);
    font-size: var(--ui-title-section);
    font-weight: var(--ui-weight-heavy);
}

.profile-row {
    min-height: 52px;
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    padding: 12px 0;
    border-bottom: 1px solid #edf1f6;
}

.profile-row__label { color: var(--ui-muted); font-size: 10px; }
.profile-row__value { color: var(--ui-text); font-size: 12px; font-weight: var(--ui-weight-bold); overflow-wrap: anywhere; }

.profile-note,
.profile-api-note {
    margin-top: 16px;
    padding: 14px 16px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    color: var(--ui-muted);
    background: var(--ui-surface-soft);
    font-size: 10px;
    line-height: 1.55;
}

@media (max-width: 1100px) {
    .ann-grid,
    .profile-grid { grid-template-columns: 1fr; }

    .permission-admin-page__summary,
    .assessment-page .summary,
    .report-page .cards { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

    .journal-toolbar,
    .permission-admin-page__toolbar,
    .assessment-page .filters,
    .report-page .filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
    .ann-grid,
    .permission-admin-page__summary,
    .assessment-page .summary,
    .report-page .cards,
    .journal-toolbar,
    .permission-admin-page__toolbar,
    .assessment-page .filters,
    .report-page .filters { grid-template-columns: 1fr !important; }

    .permission-admin-page__hero { grid-template-columns: 1fr !important; }
    .permission-admin-page__hero-count { width: 100%; }
    .profile-row { grid-template-columns: 1fr; gap: 4px; }
}


/* ==========================================================
   V3 structural corrections
   ========================================================== */
.assessment-page .summary,
.report-page .cards {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.journal-table-wrap {
    width: 100%;
    overflow-x: auto;
}
.journal-table {
    width: 100% !important;
    min-width: 900px;
    border-collapse: collapse;
    table-layout: auto;
}
.journal-table th,
.journal-table td {
    padding: 14px 16px !important;
    vertical-align: middle;
    border-bottom: 1px solid var(--ui-border);
}
.journal-table th:first-child, .journal-table td:first-child { padding-left: 20px !important; }
.journal-table th:last-child, .journal-table td:last-child { padding-right: 20px !important; }

@media (max-width: 1100px) {
    .assessment-page .summary, .report-page .cards { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width: 720px) {
    .assessment-page .summary, .report-page .cards { grid-template-columns: 1fr !important; }
}


/* ==========================================================
   ABSENSIKU STABLE V4 — FINAL MODULE CORRECTIONS
   ========================================================== */

/* --- STAT ENGINE: Izin / Penilaian / Laporan --- */
.permission-admin-page__summary,
.assessment-page .summary,
.report-page .cards {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0 !important;
    width: 100% !important;
}

.permission-summary-card,
.assessment-page .summary-card,
.report-page .cards > .card {
    min-width: 0 !important;
    min-height: 110px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 7px !important;
    padding: 18px 22px !important;
}

.permission-summary-card span,
.assessment-page .summary-card .muted,
.report-page .cards > .card .muted {
    display: block !important;
    margin: 0 !important;
    color: var(--ui-muted) !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
}

.permission-summary-card strong,
.assessment-page .summary-card strong,
.assessment-page .summary-card b,
.report-page .cards > .card strong,
.report-page .cards > .card b {
    display: block !important;
    margin: 0 !important;
    color: var(--ui-text-strong) !important;
    font-size: 25px !important;
    line-height: 1 !important;
    font-weight: var(--ui-weight-heavy) !important;
}

/* --- Permission: compact empty/data frame --- */
.permission-admin-page__toolbar {
    margin-top: var(--ui-page-gap) !important;
}

.permission-admin-page__table-wrap {
    min-height: 250px !important;
}

.permission-admin-page__empty {
    min-height: 250px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    padding: 34px !important;
    text-align: center !important;
    color: var(--ui-muted) !important;
}

.permission-admin-page__empty strong {
    color: var(--ui-text) !important;
}

/* --- Assessment table: full-width readable rows --- */
.assessment-page .table-wrap {
    width: 100% !important;
    overflow-x: auto !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-lg) !important;
    background: var(--ui-surface) !important;
    box-shadow: var(--ui-shadow-sm) !important;
}

.assessment-page .table {
    width: 100% !important;
    min-width: 980px !important;
    table-layout: auto !important;
}

.assessment-page .table th,
.assessment-page .table td {
    padding: 13px 16px !important;
}

.assessment-page .table td:first-child {
    min-width: 280px !important;
}

.assessment-page .table td:nth-child(2) {
    min-width: 210px !important;
}

/* --- Journal: full card and readable table --- */
.journal-panel {
    width: 100% !important;
    overflow: hidden !important;
}

.journal-toolbar {
    width: 100% !important;
}

.journal-table-wrap {
    width: 100% !important;
    overflow-x: auto !important;
    border-top: 1px solid var(--ui-border) !important;
}

.journal-table {
    width: 100% !important;
    min-width: 980px !important;
    table-layout: auto !important;
}

.journal-table th,
.journal-table td {
    padding: 13px 16px !important;
    white-space: normal !important;
}

.journal-table th:nth-child(1),
.journal-table td:nth-child(1) { min-width: 105px !important; }

.journal-table th:nth-child(2),
.journal-table td:nth-child(2) { min-width: 220px !important; }

.journal-table th:nth-child(3),
.journal-table td:nth-child(3) { min-width: 210px !important; }

.journal-table th:nth-child(4),
.journal-table td:nth-child(4) { min-width: 150px !important; }

/* --- Announcement: clean heading and table proportions --- */
.ann-list-head {
    min-height: 52px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 16px !important;
}

.ann-list-head > div {
    min-width: 0 !important;
}

.ann-btn--top {
    position: static !important;
    align-self: center !important;
    justify-self: end !important;
    white-space: nowrap !important;
}

.ann-table-wrap {
    width: 100% !important;
    overflow-x: auto !important;
}

.ann-table {
    width: 100% !important;
    min-width: 720px !important;
    table-layout: auto !important;
}

.ann-table th,
.ann-table td {
    padding: 12px 13px !important;
}

.ann-table th:nth-child(2),
.ann-table td:nth-child(2) { min-width: 145px !important; }

.ann-table th:nth-child(3),
.ann-table td:nth-child(3) { min-width: 170px !important; }

/* --- Report: same stat and table rhythm --- */
.report-page .table-wrap {
    width: 100% !important;
    overflow-x: auto !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-lg) !important;
    background: var(--ui-surface) !important;
    box-shadow: var(--ui-shadow-sm) !important;
}

.report-page .table {
    width: 100% !important;
    min-width: 1050px !important;
}

/* --- Responsive --- */
@media (max-width: 1100px) {
    .permission-admin-page__summary,
    .assessment-page .summary,
    .report-page .cards {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 720px) {
    .permission-admin-page__summary,
    .assessment-page .summary,
    .report-page .cards {
        grid-template-columns: 1fr !important;
    }

    .permission-summary-card,
    .assessment-page .summary-card,
    .report-page .cards > .card {
        border-right: 0 !important;
        border-bottom: 1px solid var(--ui-border) !important;
    }

    .permission-summary-card:last-child,
    .assessment-page .summary-card:last-child,
    .report-page .cards > .card:last-child {
        border-bottom: 0 !important;
    }

    .ann-list-head {
        grid-template-columns: 1fr !important;
    }

    .ann-btn--top {
        justify-self: start !important;
    }
}


/* === MASTER SISWA GOLDEN REFERENCE START ===
   Master Siswa menjadi acuan visual keluarga Master.
   Fokus blok ini hanya master/student.
   ========================================================== */

:root {
    --student-accent-blue: #2563eb;
    --student-accent-green: #16a36a;
    --student-accent-slate: #64748b;
    --student-accent-teal: #0891b2;

    --student-hero-title-size: clamp(1.8rem, 3.5vw, 2.6rem);
    --student-hero-title-weight: 800;
    --student-hero-title-line: 1.08;
    --student-hero-title-letter: -0.045em;

    --student-eyebrow-size: 0.70rem;
    --student-body-size: 0.96rem;
}

/* ----------------------------------------------------------
   INDEX HERO
   Jangan dibesarkan lagi. Tetap compact seperti index terbaru.
   ---------------------------------------------------------- */
.master-student-page .master-student-hero h1 {
    font-family: var(--ui-font-family) !important;
    font-size: var(--ui-title-page) !important;
    line-height: var(--ui-line-tight) !important;
    font-weight: var(--ui-weight-heavy) !important;
    letter-spacing: -.035em !important;
}

.master-student-page .master-student-eyebrow {
    font-family: var(--ui-font-family) !important;
    font-size: var(--ui-font-xs) !important;
    font-weight: var(--ui-weight-heavy) !important;
}

/* ----------------------------------------------------------
   INDEX SUMMARY
   Variasi warna seperti Master User: aksen tipis di atas.
   Card tetap putih.
   ---------------------------------------------------------- */
.master-student-page .master-student-summary {
    gap: 0 !important;
    overflow: hidden !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-lg) !important;
    background: #fff !important;
    box-shadow: var(--ui-shadow-sm) !important;
}

.master-student-page .master-student-summary > article {
    position: relative !important;
    min-height: 112px !important;
    padding: 20px 26px 18px !important;
    border: 0 !important;
    border-right: 1px solid var(--ui-border) !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
}

.master-student-page .master-student-summary > article:last-child {
    border-right: 0 !important;
}

.master-student-page .master-student-summary > article::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 4px !important;
    background: var(--student-accent-blue) !important;
}

.master-student-page .master-student-summary > article:nth-child(1)::before {
    background: var(--student-accent-blue) !important;
}

.master-student-page .master-student-summary > article:nth-child(2)::before {
    background: var(--student-accent-green) !important;
}

.master-student-page .master-student-summary > article:nth-child(3)::before {
    background: var(--student-accent-slate) !important;
}

.master-student-page .master-student-summary > article:nth-child(4)::before {
    background: var(--student-accent-teal) !important;
}

/* ----------------------------------------------------------
   DETAIL HERO
   Golden reference = Hero Edit Profil Siswa.
   Kembali di atas, avatar + copy di bawah.
   ---------------------------------------------------------- */
.master-student-detail .master-student-reference-hero {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
        "back back"
        "content action" !important;
    align-items: center !important;
    gap: 28px 24px !important;
    padding: 34px 40px !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-lg) !important;
    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f8fafc 100%
        ) !important;
    box-shadow: var(--ui-shadow-sm) !important;
}

.master-student-reference-hero__back {
    grid-area: back !important;
    width: fit-content !important;
    color: #334155 !important;
    font-family: var(--ui-font-family) !important;
    font-size: 0.84rem !important;
    line-height: 1.35 !important;
    font-weight: 760 !important;
    text-decoration: none !important;
}

.master-student-reference-hero__content {
    grid-area: content !important;
    display: flex !important;
    min-width: 0 !important;
    align-items: center !important;
    gap: 24px !important;
}

.master-student-reference-hero__icon {
    display: grid !important;
    width: 64px !important;
    height: 64px !important;
    flex: 0 0 64px !important;
    place-items: center !important;
    border-radius: 20px !important;
    background: #e8efff !important;
    color: #1d4ed8 !important;
    font-family: var(--ui-font-family) !important;
    font-size: 1.15rem !important;
    font-weight: 850 !important;
}

.master-student-reference-hero__copy {
    min-width: 0 !important;
}

.master-student-reference-hero__copy small {
    display: block !important;
    margin: 0 0 7px !important;
    color: #2563eb !important;
    font-family: var(--ui-font-family) !important;
    font-size: var(--student-eyebrow-size) !important;
    line-height: 1.25 !important;
    font-weight: 850 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
}

.master-student-reference-hero__copy h1 {
    margin: 0 !important;
    color: #0f172a !important;
    font-family: var(--ui-font-family) !important;
    font-size: var(--student-hero-title-size) !important;
    line-height: var(--student-hero-title-line) !important;
    font-weight: var(--student-hero-title-weight) !important;
    letter-spacing: var(--student-hero-title-letter) !important;
}

.master-student-reference-hero__copy p {
    max-width: 760px !important;
    margin: 10px 0 0 !important;
    color: #64748b !important;
    font-family: var(--ui-font-family) !important;
    font-size: var(--student-body-size) !important;
    line-height: 1.65 !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
}

.master-student-reference-hero__action {
    grid-area: action !important;
    align-self: center !important;
    min-height: 42px !important;
    padding: 0 16px !important;
    white-space: nowrap !important;
}

/* ----------------------------------------------------------
   DETAIL SUMMARY
   Pakai bahasa warna yang sama dengan ringkasan INDEX.
   ---------------------------------------------------------- */
.master-student-detail .master-student-detail__stats {
    gap: 0 !important;
    overflow: hidden !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-lg) !important;
    background: #fff !important;
    box-shadow: var(--ui-shadow-sm) !important;
}

.master-student-detail .master-student-detail__stats > article {
    position: relative !important;
    min-height: 108px !important;
    padding: 20px 22px 18px !important;
    border: 0 !important;
    border-right: 1px solid var(--ui-border) !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
}

.master-student-detail .master-student-detail__stats > article:last-child {
    border-right: 0 !important;
}

.master-student-detail .master-student-detail__stats > article::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 4px !important;
}

.master-student-detail .master-student-detail__stats > article:nth-child(1)::before {
    background: var(--student-accent-green) !important;
}

.master-student-detail .master-student-detail__stats > article:nth-child(2)::before {
    background: var(--student-accent-blue) !important;
}

.master-student-detail .master-student-detail__stats > article:nth-child(3)::before {
    background: var(--student-accent-teal) !important;
}

.master-student-detail .master-student-detail__stats > article:nth-child(4)::before {
    background: var(--student-accent-slate) !important;
}

.master-student-detail .master-student-detail__stats span {
    color: var(--ui-muted) !important;
    font-family: var(--ui-font-family) !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
}

.master-student-detail .master-student-detail__stats strong {
    display: block !important;
    margin-top: 9px !important;
    color: var(--ui-text-strong) !important;
    font-family: var(--ui-font-family) !important;
    font-size: 25px !important;
    line-height: 1 !important;
    font-weight: var(--ui-weight-heavy) !important;
}

/* ----------------------------------------------------------
   EDIT HERO
   Ini acuan utama. Kunci agar rule global tidak mengubahnya.
   ---------------------------------------------------------- */
body.master-student-page .master-form-page__header {
    padding: 34px 40px !important;
}

body.master-student-page .master-form-page__icon {
    width: 64px !important;
    height: 64px !important;
    flex: 0 0 64px !important;
    border-radius: 20px !important;
    font-family: var(--ui-font-family) !important;
    font-size: 1.15rem !important;
}

body.master-student-page .master-form-page__eyebrow {
    margin-bottom: 7px !important;
    color: #2563eb !important;
    font-family: var(--ui-font-family) !important;
    font-size: var(--student-eyebrow-size) !important;
    line-height: 1.25 !important;
    font-weight: 850 !important;
    letter-spacing: .14em !important;
}

body.master-student-page .master-form-page__title {
    color: #0f172a !important;
    font-family: var(--ui-font-family) !important;
    font-size: var(--student-hero-title-size) !important;
    line-height: var(--student-hero-title-line) !important;
    font-weight: var(--student-hero-title-weight) !important;
    letter-spacing: var(--student-hero-title-letter) !important;
}

body.master-student-page .master-form-page__description {
    margin-top: 10px !important;
    color: #64748b !important;
    font-family: var(--ui-font-family) !important;
    font-size: var(--student-body-size) !important;
    line-height: 1.65 !important;
}

/* ----------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------- */
@media (max-width: 900px) {
    .master-student-detail .master-student-reference-hero {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "back"
            "content"
            "action" !important;
        padding: 28px !important;
    }

    .master-student-reference-hero__action {
        justify-self: start !important;
    }

    .master-student-page .master-student-summary,
    .master-student-detail .master-student-detail__stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .master-student-page .master-student-summary > article:nth-child(2),
    .master-student-detail .master-student-detail__stats > article:nth-child(2) {
        border-right: 0 !important;
    }

    .master-student-page .master-student-summary > article:nth-child(-n+2),
    .master-student-detail .master-student-detail__stats > article:nth-child(-n+2) {
        border-bottom: 1px solid var(--ui-border) !important;
    }
}

@media (max-width: 600px) {
    .master-student-reference-hero__content {
        align-items: flex-start !important;
        gap: 16px !important;
    }

    .master-student-reference-hero__icon {
        width: 54px !important;
        height: 54px !important;
        flex-basis: 54px !important;
        border-radius: 17px !important;
    }

    .master-student-page .master-student-summary,
    .master-student-detail .master-student-detail__stats {
        grid-template-columns: 1fr !important;
    }

    .master-student-page .master-student-summary > article,
    .master-student-detail .master-student-detail__stats > article {
        border-right: 0 !important;
        border-bottom: 1px solid var(--ui-border) !important;
    }

    .master-student-page .master-student-summary > article:last-child,
    .master-student-detail .master-student-detail__stats > article:last-child {
        border-bottom: 0 !important;
    }
}

/* === MASTER SISWA GOLDEN REFERENCE END === */