/*
 * Fondasi responsif ATLAS.
 * File ini dimuat paling akhir agar aturan ukuran layar konsisten di seluruh modul
 * tanpa mengubah warna, animasi, maupun alur aplikasi yang telah ada.
 */
:root { --atlas-page-gutter: clamp(12px, 2.5vw, 48px); }

*, *::before, *::after { box-sizing: border-box; }
html { max-width: 100%; -webkit-text-size-adjust: 100%; }
body { max-width: 100%; overflow-x: hidden; }
.app-shell, .main, .content-card, .page-transition, .portal-inner-grid,
.earsip-page, .service-page, .academic-page, .dashboard-main { min-width: 0; }
img, svg, video, canvas, iframe, embed, object { max-width: 100%; }
input, select, textarea, button { max-width: 100%; }
textarea { resize: vertical; }

/* Tabel lebar hanya dapat digeser di wadah tabel, bukan seluruh halaman. */
.table-wrap, .table-scroll, .portal-table-wrap, .earsip-admin-table-wrap, .atlas-dash-table-wrap,
.service-table-wrap { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.table-wrap table, .table-scroll table, .portal-table-wrap table,
.earsip-admin-table-wrap table, .atlas-dash-table-wrap table, .service-table-wrap table { margin: 0; }

/* Header desktop: elemen tetap dalam lebar layar dan boleh membentuk dua baris. */
@media (min-width: 1101px) and (max-width: 1500px) {
  .topbar {
    display: grid;
    grid-template-columns: minmax(190px, .9fr) minmax(0, 1.75fr) auto;
    grid-template-rows: auto auto;
    align-items: center;
    height: auto;
    min-height: 76px;
    gap: 7px 14px;
    padding: 9px var(--atlas-page-gutter);
  }
  .top-brand { grid-column: 1; grid-row: 1 / span 2; min-width: 0; }
  .top-menu {
    position: static;
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .global-search { grid-column: 2; grid-row: 2; width: 100%; max-width: none; min-width: 0; }
  .hero-user { grid-column: 3; grid-row: 1 / span 2; min-width: 0; gap: 7px; }
  .hero-user > div:not(.user-avatar):not(.date-pills), .hero-user .admin-inbox-link { display: none; }
  .top-menu > a, .top-menu-group > summary { font-size: 12px; padding-inline: 9px; }
  .top-submenu { z-index: 120; }
}

/* Laptop/tablet: status dan pencarian turun ke baris sendiri, tidak menumpuk. */
@media (min-width: 769px) and (max-width: 1100px) {
  .portal-strip { padding-inline: var(--atlas-page-gutter); }
  .topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "brand user" "menu menu" "search search";
    height: auto;
    min-height: 0;
    gap: 9px 12px;
    padding: 10px var(--atlas-page-gutter);
  }
  .top-brand { grid-area: brand; min-width: 0; }
  .top-menu {
    position: static;
    grid-area: menu;
    width: 100%;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    justify-content: flex-start;
    flex-wrap: wrap;
    overflow: visible;
  }
  .global-search { grid-area: search; width: min(100%, 620px); max-width: none; min-width: 0; }
  .hero-user { grid-area: user; min-width: 0; }
  .hero-user > div:not(.user-avatar):not(.date-pills), .hero-user .admin-inbox-link { display: none; }
  .top-menu > a, .top-menu-group > summary { font-size: 12px; padding-inline: 10px; }
  .content-card { padding-inline: var(--atlas-page-gutter); }
  .dashboard-layout, .book-layout, .portal-inner-grid, .earsip-layout { grid-template-columns: 1fr; }
  .portal-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portal-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portal-toolbar > :first-child { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
  .portal-strip { min-height: 34px; padding: 7px 12px; }
  .portal-strip-right { display: none; }
  .topbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "toggle brand user" "menu menu menu" "search search search";
    height: auto;
    min-height: 0;
    gap: 9px;
    padding: 10px 12px;
  }
  .topbar .icon-btn { display: inline-grid !important; grid-area: toggle; }
  .top-brand { grid-area: brand; min-width: 0; }
  .top-brand span { min-width: 0; }
  .top-brand small { line-height: 1.25; }
  .hero-user { grid-area: user; min-width: 0; }
  .hero-user > :not(.date-pills):not(.btn) { display: none; }
  .hero-user .date-pills { display: none; }
  .hero-user .btn { padding: 9px 11px; font-size: 12px; white-space: nowrap; }
  .top-menu {
    display: none;
    position: static;
    grid-area: menu;
    width: 100%;
    max-width: 100%;
    padding: 8px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 16px;
    background: rgba(6, 47, 83, .96);
    box-shadow: 0 14px 30px rgba(0, 25, 50, .22);
    overflow: visible;
    flex-direction: column;
    align-items: stretch;
  }
  body.mobile-menu-open .top-menu { display: flex; }
  .top-menu > a, .top-menu-group { width: 100%; }
  .top-menu > a, .top-menu-group > summary { display: flex; width: 100%; justify-content: space-between; padding: 11px 12px; }
  .top-menu-group { position: static; }
  .top-submenu { position: static; width: 100%; max-height: min(48vh, 330px); margin: 2px 0 6px; overflow-y: auto; box-shadow: none; transform: none; }
  .top-menu-group[open] .top-submenu { display: grid; opacity: 1; visibility: visible; pointer-events: auto; }
  .global-search { grid-area: search; width: 100%; min-width: 0; }
  .main { width: 100%; margin-left: 0; }
  .content-card { padding: 14px 10px 24px; }
  .portal-module-hero, .inner-page .page-head:not(.portal-module-hero) { margin-inline: 0; padding: 22px 18px; border-radius: 18px; }
  .portal-module-hero h1, .inner-page .portal-module-hero h1 { font-size: clamp(26px, 8vw, 34px); }
  .portal-stat-row, .stats-grid, .premium-stats, .portal-side { grid-template-columns: 1fr; }
  .portal-card, .inner-page .panel { padding: 14px; border-radius: 18px; }
  .portal-toolbar, .filters form, .academic-upload form, .earsip-form-grid, .info-grid, .wizard fieldset { grid-template-columns: 1fr !important; }
  .filters input, .global-search { min-width: 0; }
  .form-actions, .earsip-actions, .toolbar { align-items: stretch; flex-direction: column; }
  .form-actions .btn, .earsip-actions .earsip-button, .toolbar .btn { width: 100%; justify-content: center; }
  .earsip-file-item { align-items: flex-start; }
  .earsip-file-item > div:last-child { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 8px; }
  .earsip-detail-grid { grid-template-columns: 1fr; }
  .earsip-inline-preview-frame { height: 58vh; }
}

@media (max-width: 480px) {
  body { font-size: 14px; }
  .top-brand img { width: 38px; height: 38px; }
  .top-brand strong { font-size: 14px; }
  .top-brand small { font-size: 9px; }
  .hero-user .btn { font-size: 11px; padding-inline: 9px; }
  .page-head, .portal-module-hero, .earsip-hero, .earsip-list-header { padding: 18px 14px; border-radius: 16px; }
  .page-title h1, .portal-module-hero h1, .earsip-list-header h1 { font-size: 26px; }
  .earsip-brand { align-items: flex-start; }
  .earsip-brand img { width: 48px; height: 48px; }
  .earsip-search, .earsip-mini-search { flex-direction: column; }
  .earsip-search button, .earsip-mini-search button { width: 100%; }
  .earsip-nav > div { padding-bottom: 8px; }
  .earsip-nav a { font-size: 12px; padding: 9px 11px; }
  .earsip-inline-preview-head { padding: 10px; gap: 8px; }
  .earsip-inline-preview-head strong { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
  .earsip-inline-preview-frame { height: 52vh; }
  .modal-actions { flex-direction: column-reverse; }
  .modal-actions button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}