/* ==========================================================================
   SIN compatibility layer
   --------------------------------------------------------------------------
   Maps the legacy module stylesheets (pai-home, portal-layout, admin-document-
   layout, dokumen-public, dosen-*) onto the SIN design tokens defined in
   sin-app.css. Nothing here introduces new markup; it only harmonises classes
   that existing pages still use. Rules can be removed module by module as each
   page is migrated to the sin-* components (Tahap F/G).
   Load order: legacy CSS → sin-compat.css → sin-app.css.
   ========================================================================== */

/* Legacy variable names → SIN tokens ------------------------------------- */
:root, .admin-document-portal, .dosen-portal {
    --primary: var(--sin-primary); --primary-dark: var(--sin-navy); --primary-light: var(--sin-primary-50);
    --accent: var(--sin-accent); --background: var(--sin-bg); --surface: var(--sin-surface);
    --text-primary: var(--sin-text); --text-secondary: var(--sin-muted); --border: var(--sin-border);
    --success: var(--sin-success); --warning: var(--sin-warning); --danger: var(--sin-danger); --info: var(--sin-info);
    --radius: var(--sin-radius-lg);
    --sin-blue: var(--sin-primary); --sin-royal: var(--sin-primary-hover); --sin-ink: var(--sin-text);
    --sin-yellow: var(--sin-accent); --sin-soft: var(--sin-primary-50);
    --green: var(--sin-primary); --green-dark: var(--sin-navy); --gold: var(--sin-accent); --gold-soft: #fff4cc;
    --bg: var(--sin-bg); --card: var(--sin-surface); --text: var(--sin-text);
    --muted: var(--sin-muted); --line: var(--sin-border); --shadow: var(--sin-shadow-xs);
}
body, .admin-body, .login-body, .login-form-panel, .dokumen-catalog { background: var(--bg); }

/* Public website ---------------------------------------------------------- */
.site-header { background: rgba(255, 255, 255, .97); border-color: var(--line); box-shadow: 0 5px 24px #062c6510; }
.site-header::before { background: linear-gradient(90deg, var(--sin-royal), var(--sin-blue) 78%, var(--sin-yellow)); height: 2px; }
.brand strong, .footer-brand strong, .hero-card strong, .home-hero-copy h1,
.home-hero-copy h2, .home-news-body h3 a, .home-teacher-card h3,
.table-card-head h2, .form-card-head h2, .form-section-title, .name-cell strong,
.mk-name, .dosen-activity-empty strong { color: var(--sin-navy); }
.brand small, .home-hero-copy p, .news-date, .news-card small { color: var(--muted); }
.brand-mark { background: var(--sin-navy); outline-color: #0755b530; box-shadow: 0 8px 22px #062c651a; }
.site-nav-links a { color: var(--sin-ink); font-size: 13px; }
.site-nav-links a:hover, .lang-menu a:hover, .lang-menu a.is-active { background: var(--sin-soft); color: var(--sin-royal); }
.home-btn-gold, .home-badge { background: var(--sin-yellow); color: var(--sin-navy); box-shadow: 0 6px 18px #f4cf4526; }
.hero { background: var(--sin-royal); }
.hero-scrim { background: linear-gradient(115deg, rgba(4, 49, 120, .94), rgba(5, 72, 159, .78) 55%, rgba(4, 37, 88, .65)); }
.hero h1 { color: #fff; text-shadow: 0 3px 20px #062c6550; font-size: clamp(34px, 4vw, 54px); letter-spacing: -.045em; line-height: 1.1; }
.hero-tagline { color: #fff0b5; }
.hero-arrow, .hero-counter { background: #062c6599; }
.hero-arrow:hover { color: var(--sin-navy); }
.hero-card { border: 1px solid #e5ebf4; border-top: 4px solid var(--sin-yellow); box-shadow: none; border-radius: 14px; }
.hero-card li, .soft-bg, .table-search, .table-card tbody tr:hover, .mk-code-chip, .badge-sks, .chip,
.table-thumb, .thumb-placeholder, .table-avatar, .avatar-placeholder { background: var(--sin-soft); }
.hero-card li { background: #f5f8fd; }
.mk-code-chip, .chip { color: var(--sin-royal); }
.page-hero, .home-hero, .dokumen-catalog-hero { background: linear-gradient(120deg, #e5efff, #f6f9ff); }
.home-hero-visual::after { background: linear-gradient(180deg, transparent, #062c65ee); }
.teacher-sinta, .quick-icon, .contact-info-list .icon, .stat-icon,
.home-highlight-icon, .dokumen-hero-icon, .dokumen-catalog .dokumen-stat-icon { color: var(--sin-blue); background: var(--sin-soft); }
.news-badge, .badge-semester { background: var(--sin-royal); }
.site-footer { background: #102d50; color: #eaf2ff; }
.site-footer .footer-brand strong { color: #fff; font-size: 14px; white-space: normal; }
.site-footer .footer-brand p, .footer-bottom { color: #c4d8f5; }
.site-footer h4 { font-size: 14px; }
.social-icon:hover { background: var(--sin-blue); color: #fff; }
.site-header .nav-shell { padding: 16px 0; }
.site-header .brand strong { font-size: 15px; }
.site-header .brand small { font-size: 11px; }
.site-header .brand-mark { width: 44px; height: 44px; border-radius: 12px; border: 0; outline: 0; box-shadow: none; }
.section { padding: 56px 0; }
.page-hero { background: #f1f5fb; padding: 42px 0; border-bottom: 1px solid var(--border); }
.page-hero h1 { font-size: 32px; line-height: 1.25; }
.page-hero .eyebrow { background: transparent; padding: 0; color: var(--primary); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; }
.home-panel::after { display: none; }
.home-highlight-card p, .home-mini-card strong { font-size: 14px; }
.home-highlight-card p, .home-stat-card span, .home-panel p { color: var(--muted); }
.home-panel, .home-highlight-card { box-shadow: none; }
.home-panel { padding: 28px; }
.home-stat-card { background: #f7f9fc; }
.home-stat-panel { background: #fff; }
.home-section-grid, .home-highlights-grid { gap: 24px; }
.hero-overlay { min-height: 620px; }
.hero-subtitle, .hero-tagline { font-size: 15px; }
.teacher-card { padding: 22px; }
.teacher-card img { aspect-ratio: 1; object-fit: cover; border-radius: 12px; }
.teacher-card h3 { font-size: 17px; }
.teacher-card p { font-size: 14px; }
.mini-icon, .highlight-icon, .dosen-academic-links dt > span, .dosen-resource-icon { color: var(--sin-blue); background: var(--sin-soft); }
.highlight-icon { background: linear-gradient(135deg, #e1ecff, #eef4ff); }

/* Public document catalogue ---------------------------------------------- */
.dokumen-catalog .dokumen-search label { background: #fbfdff; border-color: #cbd9ec; box-shadow: 0 2px 8px #062c6509; }
.dokumen-catalog .dokumen-search label:focus-within { border-color: var(--sin-blue); box-shadow: 0 0 0 3px #0755b517; }
.dokumen-catalog-hero::after { background: linear-gradient(100deg, #eaf2ff 12%, #eef5fff0 39%, #d6e7fa40 76%, #d3e4fa80); }
.dokumen-catalog-hero h1, .dokumen-catalog .dokumen-card h2,
.dokumen-catalog .dokumen-stat strong, .dokumen-catalog .dokumen-search-heading h2 { color: var(--sin-navy); }
.dokumen-hero-art > span, .dokumen-catalog .dokumen-summary strong,
.dokumen-catalog .dokumen-protected { color: var(--sin-royal); }
.dokumen-catalog .dokumen-levels a[aria-current=page] { background: var(--sin-blue); }
.dokumen-catalog .dokumen-level-universitas, .dokumen-protection-note,
.dokumen-catalog .dokumen-empty-icon, .dokumen-help-icon { color: var(--sin-royal); background: var(--sin-soft); }
.dokumen-catalog .dokumen-stat div > span, .dokumen-protection-note small { color: var(--muted); }
.dokumen-help-row blockquote { color: var(--muted); border-color: #8cafe0; }
.dokumen-catalog .dokumen-empty { border-color: #cbd9ec; }
.dokumen-catalog .dokumen-criteria-block .dokumen-badge { background: var(--sin-soft); border-color: var(--line); }
.dokumen-catalog .btn-primary .icon { color: inherit; }

/* Admin document module --------------------------------------------------- */
.dosen-portal .admin-topbar-toggle, .admin-document-portal .admin-topbar-toggle,
.admin-document-portal .admin-website-link, .document-breadcrumb > a { color: var(--sin-royal); }
.document-list-page .document-hero { background: #fff; border: 1px solid var(--border); border-radius: 14px; }
.document-hero::before, .document-hero::after { display: none; }
.document-hero h1 { font-size: 28px; }
.document-hero p { font-size: 14px; }
.document-hero-icon { color: var(--sin-blue); background: var(--primary-light); border-radius: 12px; }
.document-summary-card { --summary-color: #0755b5; --summary-bg: #e7f0ff; border-color: var(--border); padding: 22px; gap: 16px; }
.document-summary-aktif { --summary-color: #08739a; --summary-bg: #e1f3ff; }
.document-summary-arsip { --summary-color: #8a6500; --summary-bg: #fff3c6; }
.document-summary-kategori { --summary-color: #354a88; --summary-bg: #e9edff; }
.document-summary-icon { width: 42px; height: 42px; flex-basis: 42px; border-radius: 10px; }
.document-summary-decoration { display: none; }
.document-summary-total .document-summary-icon, .document-summary-aktif .document-summary-icon { color: var(--primary); background: var(--primary-light); }
.document-summary-kategori .document-summary-icon { color: var(--primary-dark); background: #edf1f8; }
.document-summary-arrow { color: var(--sin-royal); }
.document-summary-copy strong { font-size: 28px; }
.document-summary-copy > span { font-size: 13px; }
.document-filter-card { padding: 24px; grid-template-columns: minmax(0, 1fr); }
.document-filter-row select, .document-advanced select { min-width: 0; max-width: 100%; }
.document-action { width: 38px; height: 38px; }
.document-file-icon, .document-action-view { color: var(--sin-blue); background: var(--sin-soft); }
.document-category-chip { color: var(--sin-royal); background: var(--sin-soft); }
.document-category-3 { color: #8a6500; background: #fff3c6; }
.document-pagination-controls .pagination-links .active { background: var(--primary); }
.document-table tbody tr:hover { background: #f5f8ff; }

/* Legacy typography & controls ------------------------------------------- */
body { font: 400 15px/1.6 var(--sin-font); color: var(--text-primary); }
h1, h2, h3, h4, .hero h1, .page-hero h1,
.dokumen-catalog .dokumen-search-heading h2, .dokumen-hero-art > span { font-family: var(--sin-font); letter-spacing: -.025em; }
h1 { font-size: clamp(26px, 2.4vw, 32px); line-height: 1.2; }
h2 { font-size: 22px; line-height: 1.35; }
h3 { font-size: 17px; line-height: 1.4; }
a, button { -webkit-tap-highlight-color: transparent; }
button, summary, a, input, select, textarea { touch-action: manipulation; }
button { cursor: pointer; font: inherit; }
.btn, .login-submit, .nav-cta, .document-list-page .btn, .dokumen-catalog .btn {
    border-radius: var(--sin-radius-md); min-height: 42px; padding: 9px 16px; font-size: 14px; line-height: 1.4;
    font-weight: 600; box-shadow: none; transition: background var(--sin-t), border-color var(--sin-t), color var(--sin-t);
}
.btn-primary, .login-submit, .nav-cta, .document-list-page .btn-primary, .dokumen-catalog .btn-primary { background: var(--sin-primary); color: #fff; box-shadow: none; }
.btn-primary:hover, .login-submit:hover, .nav-cta:hover, .dokumen-catalog .btn-primary:hover { background: var(--sin-primary-hover); color: #fff; box-shadow: none; transform: none; }
.btn-outline-muted, .btn-light { background: #fff; color: var(--text-primary); border: 1px solid var(--sin-border-strong); }
.btn-outline-muted:hover, .btn-light:hover { background: var(--sin-surface-2); border-color: #c4cddb; }
.btn-danger { background: var(--sin-danger-50); color: var(--sin-danger-700); border: 1px solid #fbd0cc; }
.btn-danger:hover { background: var(--sin-danger); border-color: var(--sin-danger); color: #fff; }
.btn-sm { font-size: 13px; min-height: 36px; padding: 7px 12px; }
input, select, textarea, .field input {
    min-height: 44px; height: auto; border-radius: var(--sin-radius-md); border: 1px solid var(--sin-border-strong);
    background: #fff; color: var(--text-primary); padding: 10px 13px; font: inherit; font-size: 14px; max-width: 100%;
}
input:focus, textarea:focus, select:focus, .field input:focus { outline: none; border-color: var(--sin-primary); box-shadow: var(--sin-ring); }
input[type=checkbox], input[type=radio] { width: 18px; min-height: 18px; height: 18px; flex: 0 0 18px; padding: 0; accent-color: var(--sin-primary); }
input[type=file] { padding: 8px; font-size: 14px; }
input[type=file]::file-selector-button { border: 0; border-radius: 6px; padding: 8px 12px; margin-right: 10px; color: var(--primary); background: var(--primary-light); font-weight: 600; }
label, .field label, .dosen-fields label { font-size: 14px; font-weight: 600; color: var(--sin-text-2); }
.form-error, .field-error { color: var(--sin-danger-700); font-size: 13px; display: block; margin-top: 6px; }
input[aria-invalid=true], textarea[aria-invalid=true], select[aria-invalid=true] { border-color: #f1a39c; }
.pagination-links a:hover { background: var(--sin-soft); }

/* Legacy cards, tables and forms ----------------------------------------- */
.admin-card, .form-card, .table-card, .table-wrap, .document-filter-card, .document-table-card,
.hero-card, .content-box, .home-panel, .home-mini-card, .home-highlight-card, .info-card, .teacher-card, .news-card, .semester-block {
    border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); background: var(--surface);
}
.admin-body .form-card { max-width: 1080px; margin: 0 auto 24px; padding: 0; overflow: hidden; }
.form-card-head, .table-card-head { padding: 22px 24px; }
.form-card-head h2, .table-card-head h2 { font-size: 20px; margin: 0; }
.form-card-head p, .table-card-head p { font-size: 14px; color: var(--muted); margin: 4px 0 0; }
.form-card-head { border-bottom: 1px solid var(--border); }
.form-card-body { padding: 24px; }
.admin-form-grid, .form-grid { gap: 20px; }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; padding-top: 20px; }
.form-section-title { font-size: 15px; margin-top: 8px; padding-top: 24px; color: var(--primary-dark); }
.admin-body .table-card { padding: 0; overflow: hidden; }
.table-card-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.table-toolbar { padding: 0 24px 20px; gap: 12px; flex-wrap: wrap; }
.table-search { border-radius: var(--sin-radius-md); background: #fff; min-height: 44px; padding: 8px 12px; border: 1px solid var(--sin-border-strong); }
.table-search input { min-height: 28px; border: 0; box-shadow: none; padding: 0; }
.table-scroll, .table-wrap { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
.table-card .table-scroll { padding: 0; margin: 0; }
table { font-size: 14px; }
.table-card th, .admin-document-portal .document-table thead th, th {
    background: var(--sin-surface-2); color: var(--sin-muted); font-size: 12px; font-weight: 600; text-transform: none;
    letter-spacing: 0; padding: 12px 20px; border-bottom: 1px solid var(--border);
}
.table-card td, .document-table td, td { padding: 14px 20px; border-bottom: 1px solid #eef1f5; font-size: 14px; }
.table-card tbody tr:hover { background: #fafbfd; }
.table-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 38px 20px; gap: 8px; }
.table-empty p { margin: 0; color: var(--muted); max-width: 390px; }
.pill-status, .document-status, .badge { font-size: 12px; line-height: 1.4; padding: 3px 9px; border-radius: 999px; font-weight: 600; }
.pill-status-aktif, .pill-status-publish { background: var(--sin-success-50); color: var(--sin-success-700); }
.pill-status-nonaktif { background: var(--sin-danger-50); color: var(--sin-danger-700); }
.pill-status-draft { background: #f2f4f7; color: #475467; }
.alert-success { border-radius: var(--sin-radius-md); }

/* Native dialogs used by the document module ----------------------------- */
dialog { border: 1px solid var(--border); border-radius: var(--sin-radius-xl); padding: 28px; max-width: 460px; width: calc(100% - 32px); max-height: calc(100dvh - 32px); overflow: auto; color: var(--text-primary); box-shadow: var(--sin-shadow-lg); }
dialog[open] { animation: sin-pop var(--sin-t-slow) both; }
dialog::backdrop { background: #10182866; backdrop-filter: blur(3px); }
dialog h2 { font-size: 20px; margin: 0 32px 12px 0; }
dialog p { color: var(--muted); }

@media (max-width: 767px) {
    .admin-form-grid, .form-grid { grid-template-columns: minmax(0, 1fr); }
    .form-card-head, .form-card-body, .table-card-head { padding: 18px; }
    .table-card-head { flex-direction: column; align-items: stretch; gap: 14px; }
    .table-toolbar { padding: 0 18px 18px; flex-direction: column; align-items: stretch; }
    .table-toolbar > * { width: 100%; min-width: 0; }
    .form-actions .btn { flex: 1; }
    .document-filter-card { padding: 18px; }
    .document-search-row, .document-filter-row { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 12px; }
    .document-search { max-width: none; flex-basis: auto; }
    .document-filter-actions { flex-wrap: wrap; }
    .document-hero { flex-wrap: wrap; }
    .document-hero > .btn { margin-left: 0; }
    .document-hero h1 { font-size: 24px; }
    .document-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .document-summary-card { padding: 16px; gap: 12px; }
    .document-summary-copy strong { font-size: 24px; }
    /* Keep the scrollable document table readable instead of squeezing the title column. */
    .admin-document-portal .document-table { min-width: 860px; }
    .document-title-cell { min-width: 240px; }
    .section { padding: 36px 0; }
    .page-hero { padding: 32px 0; }
    .page-hero h1 { font-size: 28px; }
    .hero-overlay { min-height: 520px; }
    .hero h1 { font-size: 36px; }
    .hero-grid { gap: 28px; }
    .home-panel { padding: 22px; }
    .site-header .brand { flex: 1; min-width: 0; }
    .site-header .brand strong { white-space: normal; font-size: 13px; }
    .site-header .brand small { white-space: normal; }
    .site-header .menu-toggle { flex: 0 0 40px; }
}
@media (max-width: 479px) {
    .document-summary { grid-template-columns: 1fr; }
}