/* ============================================================
   SIMRU-FST - MOBILE COMPACT (SAFE)
   Hanya aktif pada viewport <= 768px. Desktop tidak disentuh.
   ============================================================ */
@media screen and (max-width: 768px) {
  :root {
    --m-control-h: 40px;
    --m-radius: 8px;
    --m-gap: 6px;
    --m-pad: 10px;
  }

  html, body { margin:0 !important; padding:0 !important; overflow-x:hidden !important; }
  body { width:100% !important; }

  .page,
  .page.tv-page,
  .page.jadwal-page,
  .page.dashboard-page,
  .page.ruangan-page,
  .page.pengguna-page {
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 auto !important;
    padding:8px !important;
    box-sizing:border-box !important;
  }

  .container {
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 auto !important;
    box-sizing:border-box !important;
  }

  /* ---------- GLOBAL COMPACT ---------- */
  .card {
    padding:10px !important;
    margin-bottom:8px !important;
    border-radius:10px !important;
  }
  .section-heading { font-size:15px !important; line-height:1.3 !important; margin:0 0 6px !important; }
  .section-subheading, .small-text { font-size:11px !important; }
  label, .filter-field-head > span { font-size:11px !important; line-height:1.3 !important; }
  input, select, textarea {
    width:100% !important;
    height:40px !important;
    min-height:40px !important;
    padding:8px 10px !important;
    font-size:12px !important;
    border-radius:8px !important;
  }
  button, .button, .button-outlined {
    height:40px !important;
    min-height:40px !important;
    padding:8px 10px !important;
    font-size:12px !important;
    border-radius:8px !important;
  }

  /* ---------- HEADER ---------- */
  .app-header { margin-bottom:8px !important; border-radius:10px !important; }
  .app-header-top { padding:8px 10px !important; gap:6px !important; }
  .app-name { font-size:17px !important; }
  .status-pill { font-size:9px !important; padding:3px 6px !important; }
  .app-user { font-size:11px !important; max-width:110px !important; }
  .app-logout-btn { height:32px !important; min-height:32px !important; font-size:11px !important; padding:6px 8px !important; }
  .topbar-time { height:28px !important; font-size:11px !important; padding:5px 8px !important; }
  .nav { padding:4px !important; }
  .nav-inner { gap:4px !important; }
  .nav-button { height:36px !important; min-height:36px !important; font-size:11px !important; padding:6px !important; }
  .nav-icon { width:12px !important; height:12px !important; }

  /* ---------- JADWAL FILTER ---------- */
  .jadwal-filter-section { margin-top:6px !important; }
  .jadwal-filter-section .card { padding:8px !important; }
  .jadwal-filter-section .filter-card-header { display:block !important; }
  #jadwalFilterForm.time-filter-form,
  .jadwal-filter-section #jadwalFilterForm {
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:5px !important;
    width:100% !important;
  }
  #jadwalFilterForm .time-filter-field,
  .jadwal-filter-section .time-filter-field {
    display:flex !important;
    flex-direction:column !important;
    width:100% !important;
    min-width:0 !important;
    gap:3px !important;
  }
  #jadwalFilterForm .time-filter-field,
  #jadwalFilterForm .time-filter-field-search { grid-column:auto !important; }
  .jadwal-filter-section .time-filter-field > span { font-size:11px !important; }
  .jadwal-filter-section .date-day-chip { font-size:10px !important; padding:4px 6px !important; min-height:22px !important; }
  .jadwal-filter-section .time-filter-form input,
  .jadwal-filter-section .time-filter-form select {
    height:40px !important;
    min-height:40px !important;
    font-size:12px !important;
  }
  #jadwalFilterForm .time-filter-actions,
  .jadwal-filter-section .time-filter-actions {
    grid-column:1 / -1 !important;
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:6px !important;
    margin-top:2px !important;
  }
  .jadwal-filter-section .time-filter-actions .button { width:100% !important; height:40px !important; min-height:40px !important; font-size:11px !important; }
  .jadwal-filter-section .schedule-admin-actions { margin-top:6px !important; }
  .jadwal-filter-section .schedule-view-switcher {
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:5px !important;
    width:100% !important;
  }
  .jadwal-filter-section .view-tab-btn { height:38px !important; min-height:38px !important; padding:5px 6px !important; font-size:11px !important; }
  .jadwal-filter-section .view-tab-icon { width:11px !important; height:11px !important; }

  /* ---------- MATRIX ---------- */
  .matrix-banner-card { margin-top:6px !important; padding:8px !important; }
  .matrix-header-box { padding:8px !important; margin-bottom:6px !important; }
  .matrix-header-title { font-size:12px !important; line-height:1.2 !important; }
  .matrix-legend-bar { font-size:10px !important; padding:4px 6px !important; margin-bottom:6px !important; }
  .matrix-table { width:max-content !important; min-width:480px !important; font-size:10px !important; }
  .matrix-table th { height:30px !important; padding:4px !important; font-size:11px !important; }
  .matrix-table td { height:30px !important; min-height:30px !important; padding:4px !important; font-size:10px !important; }
  .matrix-table tr { height:30px !important; }
  .matrix-course-name { font-size:10px !important; }
  .matrix-class-tag, .matrix-lecturer-name { font-size:9px !important; }
  .matrix-time-range, .matrix-status-note { font-size:8px !important; }

  /* ---------- DASHBOARD ---------- */
  .dashboard-stats-section .card { padding:10px !important; }
  .dashboard-stats-section .stats-filter { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:5px !important; }
  .dashboard-stats-section .stats,
  .dashboard-stats-section .stats-cols-3,
  .dashboard-stats-section .stats-cols-4 { display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:5px !important; }
  .dashboard-stats-section .stat-card { height:72px !important; min-height:72px !important; padding:8px 6px !important; }
  .dashboard-stats-section .stat-card .label { font-size:9px !important; }
  .dashboard-stats-section .stat-card span { font-size:15px !important; }

  /* ---------- ROOM ---------- */
  .card-row { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:6px !important; }
  .room-card { min-height:120px !important; padding:10px !important; }
  .room-card h3 { font-size:12px !important; }
  .room-card p, .room-card .small-text, .room-time-label, .room-course-label,
  .room-meta-value, .room-status-ready, .room-maint-info, .room-capacity-label { font-size:10px !important; }
  .room-code, .room-card .pill { font-size:9px !important; }

  /* ---------- TABLES ---------- */
  .table-wrapper, .table-container { width:100% !important; overflow-x:auto !important; }
  .table-wrapper table { width:max-content !important; min-width:420px !important; }
  .table-wrapper th, .table-wrapper td { padding:6px !important; font-size:10px !important; }

  /* ---------- AUTH ---------- */
  .formal-login-wrapper { padding:10px 6px !important; }
  .formal-login-card { width:100% !important; max-width:430px !important; padding:20px 16px !important; }
  .formal-logo { font-size:22px !important; }
  .formal-title { font-size:18px !important; }
  .formal-desc, .formal-switch, .formal-hint, .formal-footer { font-size:11px !important; }
  .formal-input, .formal-btn { height:40px !important; min-height:40px !important; font-size:12px !important; }
}

/* ============================================================
   FINAL MOBILE OVERRIDE - JADWAL
   High-specificity selectors override older responsive rules.
   Desktop is untouched.
   ============================================================ */
@media screen and (max-width: 768px) {
  #jadwalFilterForm {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 5px !important;
    width: 100% !important;
    margin: 0 !important;
  }

  #jadwalFilterForm > .time-filter-field {
    grid-column: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  #jadwalFilterForm > .time-filter-field.time-filter-field-search {
    grid-column: auto !important;
  }

  #jadwalFilterForm > .time-filter-actions {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 4px !important;
    width: 100% !important;
  }

  #jadwalFilterForm > .time-filter-actions > .button,
  #jadwalFilterForm > .time-filter-actions > a.button {
    width: 100% !important;
    min-width: 0 !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 6px 8px !important;
    font-size: 11px !important;
  }

  #jadwalFilterForm input,
  #jadwalFilterForm select {
    width: 100% !important;
    min-width: 0 !important;
    height: 40px !important;
    min-height: 40px !important;
    box-sizing: border-box !important;
    padding: 8px 10px !important;
    font-size: 12px !important;
  }

  #jadwalFilterForm .filter-field-head {
    width: 100% !important;
    min-width: 0 !important;
  }

  #jadwalFilterForm .schedule-admin-actions {
    width: 100% !important;
    margin-top: 4px !important;
  }

  #jadwalFilterForm + .schedule-admin-actions,
  .jadwal-filter-section .schedule-admin-actions {
    width: 100% !important;
  }

  .jadwal-filter-section .schedule-view-switcher {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px !important;
    width: 100% !important;
  }

  .jadwal-filter-section .view-tab-btn {
    width: 100% !important;
    height: 29px !important;
    min-height: 29px !important;
    padding: 3px 4px !important;
    font-size: 7px !important;
  }
}

/* ============================================================
   FINAL MOBILE CONSISTENCY - SIMRU FST
   Tujuan:
   - Semua komponen yang sejenis mempunyai ukuran konsisten.
   - Header pengguna + aksi tetap satu baris.
   - Kartu statistik seragam.
   - Kartu ruangan seragam.
   - Filter/form/action box seragam.
   - Tidak mengubah tampilan desktop.
   ============================================================ */
@media screen and (max-width: 768px) {
  :root {
    --m-page-max: 420px;
    --m-container-max: 420px;
    --m-card-pad: 8px;
    --m-gap: 5px;
    --m-radius: 9px;
    --m-control-h: 29px;
  }

  *, *::before, *::after { box-sizing: border-box !important; }

  html, body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .page,
  .page.tv-page,
  .page.jadwal-page,
  .page.dashboard-page,
  .page.ruangan-page,
  .page.pengguna-page {
    width: 100% !important;
    max-width: var(--m-page-max) !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 6px !important;
  }

  .page.tv-page {
    padding: 8px !important;
  }

  .container {
    width: 100% !important;
    max-width: var(--m-container-max) !important;
    min-width: 0 !important;
    margin: 0 auto !important;
  }

  /* ==================== HEADER ==================== */
  .app-header {
    width: 100% !important;
    margin: 0 0 6px !important;
    border-radius: var(--m-radius) !important;
    overflow: hidden !important;
  }

  .app-header-top {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "brand meta"
      "time time" !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 7px 8px !important;
  }

  .app-header-brand {
    grid-area: brand !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    min-width: 0 !important;
  }

  .status-pill {
    flex: 0 0 auto !important;
    font-size: 6px !important;
    line-height: 1 !important;
    padding: 3px 5px !important;
  }

  .app-name {
    min-width: 0 !important;
    font-size: 14px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .app-header-meta {
    grid-area: meta !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 4px !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  .app-user {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 2px !important;
    width: auto !important;
    max-width: 68px !important;
    min-width: 0 !important;
    margin: 0 !important;
    font-size: 6.5px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .app-user .user-icon {
    width: 10px !important;
    height: 10px !important;
    flex: 0 0 auto !important;
  }

  .app-user > span {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .app-header-meta .inline-form {
    display: inline-flex !important;
    width: auto !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
  }

  .app-logout-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 0 !important;
    height: 23px !important;
    min-height: 23px !important;
    margin: 0 !important;
    padding: 2px 5px !important;
    font-size: 6.5px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    background: #f0f0f0 !important;
    border: 1px solid #ddd !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
  }

  .app-logout-btn:hover {
    background: #e5e5e5 !important;
  }

  .topbar-time {
    grid-area: time !important;
    width: 100% !important;
    height: 21px !important;
    min-height: 21px !important;
    margin: 0 !important;
    padding: 3px 5px !important;
    font-size: 6.5px !important;
    line-height: 1 !important;
    text-align: center !important;
  }

  .tv-page .tv-header {
    padding: 10px 12px !important;
    gap: 7px !important;
    margin-bottom: 8px !important;
    border-radius: 10px !important;
  }

  .tv-page .tv-header-left { gap: 6px !important; }
  .tv-page .tv-header-icon { width: 23px !important; height: 23px !important; }
  .tv-page .tv-title { font-size: 16px !important; }
  .tv-page .tv-subtitle { font-size: 9px !important; gap: 4px !important; }

  .tv-overview {
    gap: 8px !important;
    margin: 2px 0 8px !important;
  }

  .tv-overview h1 { font-size: 18px !important; }
  .tv-overview-stats { gap: 6px !important; }
  .tv-overview-stat {
    min-width: 0 !important;
    flex: 1 !important;
    padding: 7px 6px !important;
  }
  .tv-overview-stat strong { font-size: 15px !important; }
  .tv-overview-stat span { font-size: 7px !important; }
  .tv-slide .tv-card-row { gap: 6px !important; }
  .tv-slide .tv-card { padding: 8px !important; }
  .tv-slide .tv-card h3 { font-size: 11px !important; }
  .tv-slide .tv-card .room-time-label,
  .tv-slide .tv-card .room-course-label,
  .tv-slide .tv-card .room-meta-value,
  .tv-slide .tv-card .room-status-ready,
  .tv-slide .tv-card .room-maint-info,
  .tv-slide .tv-card .room-capacity-label {
    font-size: 7.5px !important;
  }

  /* ==================== NAVIGATION ==================== */
  .nav {
    padding: 3px !important;
  }

  .nav-inner {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 3px !important;
  }

  .nav-button {
    width: 100% !important;
    min-width: 0 !important;
    height: 28px !important;
    min-height: 28px !important;
    padding: 3px 4px !important;
    gap: 3px !important;
    font-size: 7px !important;
    border-radius: 6px !important;
  }

  .nav-icon {
    width: 10px !important;
    height: 10px !important;
  }

  /* ==================== STANDARD CARD SYSTEM ==================== */
  .card {
    width: 100% !important;
    min-width: 0 !important;
    padding: var(--m-card-pad) !important;
    margin: 0 0 7px !important;
    border-radius: var(--m-radius) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    background: #fff !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  }

  .card-flex,
  .dashboard-stats-section .card,
  .jadwal-filter-section .card {
    width: 100% !important;
    min-width: 0 !important;
  }

  .section-heading,
  .dashboard-section-title,
  .stats-head-title h2 {
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    margin: 0 0 5px !important;
    color: #0f172a !important;
    letter-spacing: -0.3px !important;
  }

  .section-subheading,
  .small-text {
    font-size: 7px !important;
    line-height: 1.35 !important;
    color: #64748b !important;
  }

  /* ==================== CONTROLS ==================== */
  input, select, textarea,
  .time-filter-form input,
  .time-filter-form select,
  .room-filter input,
  .room-filter select,
  .table-search input {
    width: 100% !important;
    height: var(--m-control-h) !important;
    min-height: var(--m-control-h) !important;
    padding: 5px 7px !important;
    font-size: 7.5px !important;
    line-height: 1.3 !important;
    border-radius: 7px !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    background: #ffffff !important;
    transition: all 0.2s ease !important;
  }

  input:focus, select:focus, textarea:focus {
    border-color: #4f46e5 !important;
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1) !important;
  }

  button, .button, .button-outlined {
    height: var(--m-control-h) !important;
    min-height: var(--m-control-h) !important;
    min-width: 0 !important;
    padding: 4px 8px !important;
    font-size: 7.5px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    border-radius: 7px !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    border: none !important;
  }

  button:active, .button:active {
    transform: scale(0.98) !important;
  }

  .button-outlined {
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    background: #f5f5f5 !important;
  }

  .button-outlined:hover {
    background: #e8e8e8 !important;
  }

  label, .filter-field-head > span,
  .time-filter-field > span {
    font-size: 7px !important;
    line-height: 1.1 !important;
  }

  /* ==================== DASHBOARD HEADER/FILTER ==================== */
  .stats-head {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 5px !important;
    width: 100% !important;
  }

  .stats-head-title { min-width: 0 !important; }

  .stats-filter {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 4px !important;
    width: 100% !important;
  }

  .stats-filter .time-filter-field {
    width: 100% !important;
    min-width: 0 !important;
  }

  .stats-filter .time-filter-actions {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px !important;
    width: 100% !important;
  }

  .stats-filter .time-filter-actions .button {
    width: 100% !important;
  }

  /* ==================== STAT CARDS ==================== */
  .dashboard-stats-section .stats,
  .dashboard-stats-section .stats-cols-3,
  .dashboard-stats-section .stats-cols-4,
  .stats,
  .stats-cols-3,
  .stats-cols-4 {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 4px !important;
    width: 100% !important;
  }

  .dashboard-stats-section .stat-card,
  .stats .stat-card,
  .stats-cols-3 .stat-card,
  .stats-cols-4 .stat-card {
    width: 100% !important;
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    padding: 5px 4px !important;
    margin: 0 !important;
    border-radius: 8px !important;
    aspect-ratio: auto !important;
    gap: 2px !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
  }

  .stats .stat-card .label,
  .stats-cols-3 .stat-card .label,
  .stats-cols-4 .stat-card .label {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 5.5px !important;
    line-height: 1.1 !important;
    letter-spacing: 0 !important;
  }

  .stats .stat-card span,
  .stats-cols-3 .stat-card span,
  .stats-cols-4 .stat-card span {
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1 !important;
  }

  /* ==================== ROOM CARDS ==================== */
  .card-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
    width: 100% !important;
    margin-top: 7px !important;
  }

  .room-card {
    width: 100% !important;
    min-width: 0 !important;
    height: 110px !important;
    min-height: 110px !important;
    max-height: 110px !important;
    padding: 8px !important;
    margin: 0 !important;
    border-radius: 9px !important;
    overflow: hidden !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    background: #fff !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.25s ease !important;
  }

  .room-card:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
    transform: translateY(-1px) !important;
  }

  .room-card-top {
    gap: 4px !important;
  }

  .room-code,
  .room-card .pill {
    font-size: 5.5px !important;
    line-height: 1 !important;
  }

  .room-card .pill {
    padding: 3px 5px !important;
  }

  .room-card h3 {
    margin: 6px 0 2px !important;
    font-size: 8px !important;
    line-height: 1.15 !important;
  }

  .room-location {
    margin: 0 0 4px !important;
    font-size: 5.5px !important;
    line-height: 1.15 !important;
  }

  .room-card-status {
    margin: 3px 0 4px !important;
  }

  .room-card-status > .room-status-item + .room-status-item {
    padding-top: 3px !important;
    margin-top: 3px !important;
  }

  .room-status-item {
    gap: 4px !important;
    min-height: 13px !important;
  }

  .room-info-icon {
    width: 9px !important;
    height: 9px !important;
  }

  .room-time-label,
  .room-course-label,
  .room-meta-value,
  .room-status-ready,
  .room-maint-info,
  .room-capacity-label,
  .room-card p,
  .room-card .small-text {
    font-size: 5.5px !important;
    line-height: 1.15 !important;
  }

  .room-card > .room-use-button,
  .room-card > .inline-form {
    margin-top: auto !important;
  }

  .room-card .room-use-button,
  .room-card > .inline-form .button {
    width: 100% !important;
    height: 22px !important;
    min-height: 22px !important;
    padding: 2px 4px !important;
    font-size: 5.5px !important;
  }

  /* ==================== ROOM FILTER / PAGE HEADER ==================== */
  .room-filter,
  .room-page-header,
  .schedule-content-toolbar,
  .table-toolbar {
    width: 100% !important;
    min-width: 0 !important;
  }

  .room-filter {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 4px !important;
    margin: 0 0 6px !important;
  }

  .room-filter input,
  .room-filter select {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* ==================== JADWAL FILTER ==================== */
  .jadwal-filter-section {
    margin-top: 5px !important;
  }

  .jadwal-filter-section .filter-card-header {
    display: block !important;
    margin-bottom: 5px !important;
  }

  #jadwalFilterForm,
  #jadwalFilterForm.time-filter-form,
  .jadwal-filter-section #jadwalFilterForm {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px !important;
    width: 100% !important;
    margin: 0 !important;
  }

  #jadwalFilterForm > .time-filter-field {
    width: 100% !important;
    min-width: 0 !important;
    grid-column: auto !important;
  }

  #jadwalFilterForm .time-filter-actions {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 4px !important;
    width: 100% !important;
  }

  #jadwalFilterForm .time-filter-actions .button,
  #jadwalFilterForm .time-filter-actions a.button {
    width: 100% !important;
    height: 27px !important;
    min-height: 27px !important;
    padding: 2px 3px !important;
    font-size: 6.5px !important;
  }

  .schedule-admin-actions,
  .jadwal-filter-section .schedule-admin-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px !important;
    width: 100% !important;
    margin-top: 4px !important;
  }

  .schedule-admin-actions .button {
    width: 100% !important;
  }

  .jadwal-filter-section .schedule-view-switcher {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px !important;
    width: 100% !important;
  }

  .jadwal-filter-section .view-tab-btn {
    width: 100% !important;
    height: 27px !important;
    min-height: 27px !important;
    padding: 2px 4px !important;
    font-size: 6.5px !important;
  }

  .jadwal-filter-section .view-tab-icon {
    width: 8px !important;
    height: 8px !important;
  }

  /* ==================== MATRIX / TABLE ==================== */
  .matrix-banner-card {
    width: 100% !important;
    margin-top: 5px !important;
    padding: 5px !important;
  }

  .matrix-header-box {
    padding: 5px !important;
    margin-bottom: 4px !important;
  }

  .matrix-header-title { font-size: 7px !important; }
  .matrix-legend-bar { font-size: 5.5px !important; padding: 3px 4px !important; }

  .table-wrapper,
  .table-container {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    border-radius: 8px !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
  }

  .table-wrapper table {
    min-width: 380px !important;
    border-collapse: collapse !important;
  }

  .table-wrapper th {
    background: #f5f7fa !important;
    padding: 5px 6px !important;
    font-size: 6.5px !important;
    font-weight: 700 !important;
    color: #5d6b7b !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    line-height: 1.15 !important;
  }

  .table-wrapper td {
    padding: 5px 6px !important;
    font-size: 6.5px !important;
    line-height: 1.15 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
  }

  .table-wrapper tbody tr:hover {
    background: #f9fafb !important;
  }

  /* ==================== AUTH ==================== */
  .formal-login-wrapper {
    width: 100% !important;
    padding: 10px 4px !important;
  }

  .formal-login-card {
    width: 100% !important;
    max-width: 290px !important;
    margin: 0 auto !important;
    padding: 12px 10px !important;
    border-radius: 9px !important;
  }

  .formal-logo { font-size: 16px !important; }
  .formal-title { font-size: 11px !important; }
  .formal-desc, .formal-switch, .formal-hint, .formal-footer { font-size: 7px !important; }
  .formal-input, .formal-btn { height: 30px !important; min-height: 30px !important; font-size: 8px !important; }

  /* ==================== ADMIN TABLE ACTIONS ==================== */
  .table-actions,
  .user-table-actions,
  .schedule-row-actions {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 3px !important;
  }

  .table-actions .button,
  .user-table-actions .button,
  .schedule-row-actions .button,
  .schedule-row-actions .action-button {
    height: 25px !important;
    min-height: 25px !important;
    padding: 2px 4px !important;
    font-size: 6px !important;
    white-space: nowrap !important;
  }
}

/* ============================================================
   FINAL MOBILE — FILTER JADWAL 3 KOLOM
   Tanggal | Jam | Cari berada dalam satu baris.
   Program Studi berada di baris berikutnya.
   ============================================================ */
@media screen and (max-width: 768px) {
  #jadwalFilterForm,
  #jadwalFilterForm.time-filter-form,
  .jadwal-filter-section #jadwalFilterForm {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 5px !important;
    align-items: end !important;
  }

  #jadwalFilterForm > .time-filter-field,
  #jadwalFilterForm .time-filter-field-search,
  #jadwalFilterForm .date-day-mobile-box {
    width: 100% !important;
    min-width: 0 !important;
    grid-column: auto !important;
    box-sizing: border-box !important;
  }

  /* Hari dipindahkan menjadi kotak tersendiri setelah Tanggal.
     Semua kotak pada baris pertama memiliki lebar yang sama. */
  #jadwalFilterForm .date-day-chip-desktop {
    display: none !important;
  }

  #jadwalFilterForm .date-day-mobile-box {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    align-self: end !important;
  }

  #jadwalFilterForm .date-day-mobile-box > span:first-child {
    display: block !important;
    font-size: 6px !important;
    line-height: 1 !important;
    font-weight: 600 !important;
    color: #5d6b7b !important;
    white-space: nowrap !important;
  }

  #jadwalFilterForm .date-day-chip-mobile {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 30px !important;
    min-height: 30px !important;
    box-sizing: border-box !important;
    padding: 4px 5px !important;
    border: 1px solid #dfe5ec !important;
    border-radius: 7px !important;
    background: #f3f6fa !important;
    color: #536173 !important;
    font-size: 7px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #jadwalFilterForm .time-filter-field > span,
  #jadwalFilterForm .filter-field-head {
    width: 100% !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }

  #jadwalFilterForm .time-filter-field > span > span:first-child,
  #jadwalFilterForm .filter-field-head > span:first-child {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #jadwalFilterForm .time-filter-field input,
  #jadwalFilterForm .time-filter-field select {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 4px 7px !important;
    font-size: 7.5px !important;
  }

  #jadwalFilterForm .time-filter-field input::placeholder {
    font-size: 7px !important;
  }

  #jadwalFilterForm .date-day-chip {
    max-width: 58px !important;
    padding: 2px 4px !important;
    font-size: 5.5px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* Program Studi menjadi baris ke-2 */
  #jadwalFilterForm > .time-filter-field:nth-of-type(5) {
    grid-column: 1 / 2 !important;
  }

  #jadwalFilterForm .time-filter-actions {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px !important;
    width: 100% !important;
    margin-top: 1px !important;
  }

  #jadwalFilterForm .time-filter-actions .button,
  #jadwalFilterForm .time-filter-actions a.button {
    width: 100% !important;
    min-width: 0 !important;
    height: 27px !important;
    min-height: 27px !important;
    padding: 3px 4px !important;
    font-size: 6.5px !important;
    white-space: nowrap !important;
  }
}

/* ============================================================
   FINAL RAPih — FILTER JADWAL TANPA RUANG KOSONG
   HP: Tanggal | Hari | Jam
       Prodi    | Cari
       Terapkan | Waktu Sekarang | Reset
   ============================================================ */
@media screen and (max-width: 768px) {
  #jadwalFilterForm,
  #jadwalFilterForm.time-filter-form,
  .jadwal-filter-section #jadwalFilterForm {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 5px !important;
    width: 100% !important;
    align-items: end !important;
  }

  /* Tanggal, Hari, Jam = 3 kotak sama besar */
  #jadwalFilterForm > .time-filter-field:nth-of-type(1) {
    grid-column: 1 / span 2 !important;
  }

  #jadwalFilterForm > .date-day-mobile-box {
    grid-column: 3 / span 2 !important;
  }

  #jadwalFilterForm > .time-filter-field:nth-of-type(2) {
    grid-column: 5 / span 2 !important;
  }

  /* Baris kedua: Prodi dan Cari sama-sama memenuhi setengah lebar */
  #jadwalFilterForm > .time-filter-field.time-filter-field-prodi {
    grid-column: 1 / span 3 !important;
  }

  #jadwalFilterForm > .time-filter-field.time-filter-field-search {
    grid-column: 4 / span 3 !important;
  }

  #jadwalFilterForm > .time-filter-field,
  #jadwalFilterForm > .date-day-mobile-box {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  #jadwalFilterForm .time-filter-field input,
  #jadwalFilterForm .time-filter-field select,
  #jadwalFilterForm .date-day-chip-mobile {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Tombol tetap memenuhi seluruh lebar kartu */
  #jadwalFilterForm .time-filter-actions {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px !important;
    width: 100% !important;
  }
}

/* ============================================================
   FINAL DESKTOP + MOBILE — FILTER JADWAL BENAR-BENAR KONSISTEN
   Struktur:
   Baris 1 : Tanggal | Hari | Jam
   Baris 2 : Program Studi | Cari
   Baris 3 : Terapkan | Waktu Sekarang | Reset
   ============================================================ */

@media screen and (min-width: 769px) {
  .jadwal-filter-section .card {
    padding: 24px 26px !important;
  }

  .jadwal-filter-section .filter-card-header {
    display: block !important;
  }

  .jadwal-filter-section .filter-card-header > .flex-1-min300 {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  .jadwal-filter-section #jadwalFilterForm {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    grid-template-rows: auto auto auto !important;
    gap: 12px !important;
    width: 100% !important;
    margin: 0 !important;
    align-items: end !important;
  }

  /* Reset positioning dari aturan lama */
  .jadwal-filter-section #jadwalFilterForm > * {
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Tanggal */
  .jadwal-filter-section #jadwalFilterForm > .time-filter-field:nth-child(3) {
    grid-column: 1 / span 2 !important;
    grid-row: 1 !important;
  }

  /* Hari */
  .jadwal-filter-section #jadwalFilterForm > .date-day-mobile-box {
    display: flex !important;
    grid-column: 3 / span 2 !important;
    grid-row: 1 !important;
    flex-direction: column !important;
    gap: 6px !important;
    width: 100% !important;
    align-self: end !important;
    margin: 0 !important;
  }

  /* Jam */
  .jadwal-filter-section #jadwalFilterForm > .time-filter-field:nth-child(5) {
    grid-column: 5 / span 2 !important;
    grid-row: 1 !important;
  }

  /* Hilangkan chip Hari yang masih menempel pada label Tanggal */
  .jadwal-filter-section #jadwalFilterForm .date-day-chip-desktop {
    display: none !important;
  }

  /* Baris 2: Prodi | Cari */
  .jadwal-filter-section #jadwalFilterForm > .time-filter-field-prodi {
    grid-column: 1 / span 3 !important;
    grid-row: 2 !important;
  }

  .jadwal-filter-section #jadwalFilterForm > .time-filter-field-search {
    grid-column: 4 / span 3 !important;
    grid-row: 2 !important;
  }

  /* Semua label dan input mempunyai ukuran visual yang sama */
  .jadwal-filter-section #jadwalFilterForm .time-filter-field,
  .jadwal-filter-section #jadwalFilterForm .date-day-mobile-box {
    width: 100% !important;
    max-width: none !important;
  }

  .jadwal-filter-section #jadwalFilterForm .time-filter-field > span,
  .jadwal-filter-section #jadwalFilterForm .date-day-mobile-box > span:first-child {
    display: block !important;
    width: 100% !important;
    height: 14px !important;
    margin: 0 !important;
    font-size: 11px !important;
    line-height: 14px !important;
    font-weight: 700 !important;
    color: var(--text-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: .4px !important;
    white-space: nowrap !important;
  }

  .jadwal-filter-section #jadwalFilterForm .time-filter-field input,
  .jadwal-filter-section #jadwalFilterForm .time-filter-field select,
  .jadwal-filter-section #jadwalFilterForm .date-day-chip-mobile {
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  .jadwal-filter-section #jadwalFilterForm .date-day-chip-mobile {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 14px !important;
    border: 1px solid var(--card-border) !important;
    border-radius: var(--radius-sm) !important;
    background: var(--bg-accent) !important;
    color: var(--text-muted) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
  }

  /* Tombol */
  .jadwal-filter-section #jadwalFilterForm > .time-filter-actions {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .jadwal-filter-section #jadwalFilterForm > .time-filter-actions > .button,
  .jadwal-filter-section #jadwalFilterForm > .time-filter-actions > a.button {
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    min-width: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  .jadwal-filter-section .schedule-admin-actions {
    display: flex !important;
    width: 100% !important;
    margin-top: 10px !important;
    padding: 0 !important;
  }

  .jadwal-filter-section .schedule-view-switcher {
    display: inline-flex !important;
    gap: 4px !important;
  }
}

/* Tablet: tetap rapi, tidak ada elemen yang bertumpuk aneh */
@media screen and (min-width: 769px) and (max-width: 1100px) {
  .jadwal-filter-section #jadwalFilterForm {
    gap: 9px !important;
  }

  .jadwal-filter-section #jadwalFilterForm .time-filter-field > span,
  .jadwal-filter-section #jadwalFilterForm .date-day-mobile-box > span:first-child {
    font-size: 9px !important;
  }

  .jadwal-filter-section #jadwalFilterForm .time-filter-field input,
  .jadwal-filter-section #jadwalFilterForm .time-filter-field select,
  .jadwal-filter-section #jadwalFilterForm .date-day-chip-mobile,
  .jadwal-filter-section #jadwalFilterForm > .time-filter-actions > .button {
    height: 40px !important;
    min-height: 40px !important;
  }
}

/* ============================================================
   FINAL — DAFTAR JADWAL SUPER COMPACT
   Mengecilkan tinggi baris tabel tanpa mengubah struktur/data.
   ============================================================ */
@media screen and (max-width: 768px) {
  .jadwal-table-section .table-wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .jadwal-table-section .table-wrapper table {
    min-width: 500px !important;
    width: 100% !important;
    border-collapse: collapse !important;
    table-layout: auto !important;
  }

  .jadwal-table-section .table-wrapper thead th {
    height: 20px !important;
    min-height: 20px !important;
    padding: 2px 4px !important;
    font-size: 5.5px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .jadwal-table-section .table-wrapper tbody tr {
    height: 22px !important;
    min-height: 22px !important;
  }

  .jadwal-table-section .table-wrapper tbody td {
    height: 22px !important;
    min-height: 22px !important;
    padding: 1px 4px !important;
    font-size: 6px !important;
    line-height: 1.05 !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
  }

  .jadwal-table-section .table-wrapper tbody td strong {
    font-size: 6px !important;
    line-height: 1 !important;
  }

  .jadwal-table-section .table-wrapper .badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 16px !important;
    min-height: 16px !important;
    padding: 1px 5px !important;
    margin: 0 !important;
    border-radius: 4px !important;
    font-size: 5.5px !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
  }

  .jadwal-table-section .table-wrapper .pill {
    height: 14px !important;
    min-height: 14px !important;
    padding: 1px 4px !important;
    border-radius: 4px !important;
    font-size: 5px !important;
    line-height: 1 !important;
    gap: 2px !important;
  }

  .jadwal-table-section .table-wrapper .pill::before {
    width: 3px !important;
    height: 3px !important;
  }

  .jadwal-table-section .table-wrapper .cancel-reason,
  .jadwal-table-section .table-wrapper .override-label,
  .jadwal-table-section .table-wrapper .action-note {
    font-size: 5px !important;
    line-height: 1 !important;
    margin: 1px 0 0 !important;
  }

  .jadwal-table-section .table-wrapper .schedule-action-cell {
    min-width: 80px !important;
  }

  .jadwal-table-section .table-wrapper .schedule-row-actions {
    gap: 2px !important;
    margin: 0 !important;
  }

  .jadwal-table-section .table-wrapper .schedule-row-actions .action-button {
    height: 17px !important;
    min-height: 17px !important;
    padding: 1px 3px !important;
    margin: 0 !important;
    font-size: 5px !important;
    border-radius: 4px !important;
    line-height: 1 !important;
  }

  .jadwal-table-section .table-wrapper .schedule-row-actions .button-icon {
    width: 7px !important;
    height: 7px !important;
  }
}

/* ============================================================
   FINAL MOBILE — MATRIKS JADWAL EXTRA COMPACT
   Mengecilkan grid matriks khusus HP agar lebih padat dan rapi.
   Desktop tidak disentuh.
   ============================================================ */
@media screen and (max-width: 768px) {
  .matrix-table-container {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    border-radius: 4px !important;
  }

  .matrix-table {
    min-width: 430px !important;
    width: max-content !important;
    font-size: 5.5px !important;
    table-layout: fixed !important;
  }

  .matrix-table th,
  .matrix-table td {
    padding: 1px 2px !important;
    line-height: 1 !important;
  }

  .matrix-table th {
    height: 20px !important;
    min-height: 20px !important;
    font-size: 6px !important;
    line-height: 1 !important;
  }

  .matrix-table th.col-hari,
  .matrix-table td.cell-hari {
    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
  }

  .matrix-table th.col-jam,
  .matrix-table td.cell-jam {
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
  }

  .matrix-table th:not(.col-hari):not(.col-jam),
  .matrix-table td:not(.cell-hari):not(.cell-jam) {
    width: 78px !important;
    min-width: 78px !important;
    max-width: 78px !important;
  }

  .matrix-table tbody tr:not(.isoma-row),
  .matrix-table tbody tr:not(.isoma-row) > td {
    height: 20px !important;
    min-height: 20px !important;
  }

  .matrix-table tr.isoma-row td {
    height: 14px !important;
    min-height: 14px !important;
    padding: 1px 2px !important;
    font-size: 5.5px !important;
    letter-spacing: 1px !important;
  }

  .matrix-table td.cell-hari {
    font-size: 6px !important;
    line-height: 1 !important;
  }

  .matrix-table td.cell-jam {
    font-size: 5.5px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .matrix-course-block {
    min-height: 0 !important;
    height: 100% !important;
    padding: 1px !important;
    border-radius: 2px !important;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.08) !important;
    overflow: hidden !important;
  }

  .matrix-course-block + .matrix-course-block {
    margin-top: 1px !important;
  }

  .matrix-time-range,
  .matrix-status-note {
    font-size: 4px !important;
    line-height: 1 !important;
    margin: 0 0 1px !important;
  }

  .matrix-class-tag,
  .matrix-lecturer-name {
    font-size: 4.5px !important;
    line-height: 1 !important;
    margin: 0 0 1px !important;
  }

  .matrix-course-name {
    font-size: 5px !important;
    line-height: 1 !important;
    margin: 0 !important;
  }
}

/* ============================================================
   FINAL MOBILE — LOGIN DOSEN/ADMIN LEBIH RAPI
   Fokus pada proporsi, jarak, dan konsistensi komponen login.
   Desktop tidak disentuh.
   ============================================================ */
@media screen and (max-width: 768px) {
  .formal-login-wrapper {
    min-height: calc(100vh - 20px) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 14px 8px 10px !important;
    justify-content: center !important;
  }

  .formal-login-card {
    width: min(100%, 292px) !important;
    max-width: 292px !important;
    box-sizing: border-box !important;
    margin: 0 auto !important;
    padding: 14px 10px 13px !important;
    border-radius: 9px !important;
    text-align: center !important;
  }

  .formal-logo {
    font-size: 17px !important;
    line-height: 1.05 !important;
    margin: 0 0 2px !important;
    letter-spacing: -.25px !important;
  }

  .formal-faculty {
    font-size: 6px !important;
    line-height: 1.1 !important;
    letter-spacing: 1.15px !important;
    margin: 0 0 12px !important;
  }

  .formal-title {
    font-size: 11px !important;
    line-height: 1.15 !important;
    margin: 0 0 4px !important;
  }

  .formal-desc {
    font-size: 6.5px !important;
    line-height: 1.35 !important;
    margin: 0 0 11px !important;
  }

  .formal-form-group {
    margin: 0 0 8px !important;
    text-align: left !important;
  }

  .formal-field-head {
    margin: 0 0 3px !important;
    min-height: 9px !important;
    align-items: center !important;
  }

  .formal-form-group label {
    font-size: 6px !important;
    line-height: 1 !important;
    margin: 0 0 3px !important;
    letter-spacing: .25px !important;
  }

  .formal-field-head label { margin: 0 !important; }

  .formal-field-link {
    font-size: 6px !important;
    line-height: 1 !important;
  }

  .formal-input-wrap {
    width: 100% !important;
  }

  .formal-input {
    width: 100% !important;
    height: 30px !important;
    min-height: 30px !important;
    box-sizing: border-box !important;
    padding: 4px 7px 4px 28px !important;
    font-size: 7px !important;
    line-height: 1 !important;
    border-radius: 6px !important;
  }

  .formal-input-icon {
    left: 9px !important;
    width: 12px !important;
    height: 12px !important;
  }

  .formal-btn {
    width: 100% !important;
    height: 30px !important;
    min-height: 30px !important;
    margin: 2px 0 0 !important;
    padding: 3px 8px !important;
    font-size: 7px !important;
    line-height: 1 !important;
    border-radius: 6px !important;
  }

  .formal-divider {
    gap: 8px !important;
    margin: 10px 0 7px !important;
  }

  .formal-divider span {
    font-size: 7px !important;
    line-height: 1 !important;
    letter-spacing: 1px !important;
  }

  .formal-switch {
    margin: 0 !important;
    font-size: 6px !important;
    line-height: 1.25 !important;
  }

  .formal-footer {
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 9px auto 0 !important;
    padding: 0 8px !important;
    font-size: 5.5px !important;
    line-height: 1.35 !important;
    text-align: center !important;
  }

  .alert {
    margin: 0 0 8px !important;
    padding: 5px 7px !important;
    font-size: 6px !important;
    line-height: 1.25 !important;
  }

  .alert-icon {
    width: 10px !important;
    height: 10px !important;
  }
}

/* ============================================================
   ROOM CARD MOBILE — FULL CONTENT / TIDAK TERPOTONG
   ============================================================ */
@media screen and (max-width: 768px) {
  .card-row {
    align-items: stretch !important;
    grid-auto-rows: auto !important;
  }

  .room-card {
    height: auto !important;
    min-height: 118px !important;
    max-height: none !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    align-self: stretch !important;
  }

  .room-card-status {
    overflow: visible !important;
  }

  .room-status-item,
  .room-status-item span {
    overflow: visible !important;
  }

  .room-card > .room-use-button,
  .room-card > .inline-form {
    margin-top: 5px !important;
  }
}

/* ============================================================
   FINAL MOBILE ROOM CARDS — SERAGAM, FULL, DAN RAPI
   Semua card ruang dibuat memiliki tinggi yang konsisten.
   Isi tidak dipotong; ruang kosong pada card tersedia tetap
   digunakan agar tombol selalu berada di bagian bawah.
   ============================================================ */
@media screen and (max-width: 768px) {
  .dashboard-grid .card-row,
  .floor-section .card-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 6px !important;
    margin-top: 5px !important;
  }

  .dashboard-grid .room-card,
  .floor-section .room-card {
    width: 100% !important;
    height: 180px !important;
    min-height: 180px !important;
    max-height: 180px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    padding: 8px !important;
    border-radius: 8px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-self: stretch !important;
  }

  .dashboard-grid .room-card-top,
  .floor-section .room-card-top {
    flex: 0 0 auto !important;
    min-height: 14px !important;
    gap: 5px !important;
  }

  .dashboard-grid .room-code,
  .floor-section .room-code {
    font-size: 6px !important;
    line-height: 1 !important;
    letter-spacing: .8px !important;
  }

  .dashboard-grid .room-card .pill,
  .floor-section .room-card .pill {
    font-size: 5.5px !important;
    line-height: 1 !important;
    min-height: 13px !important;
    padding: 2px 4px !important;
    gap: 3px !important;
    border-radius: 5px !important;
  }

  .dashboard-grid .room-card .pill::before,
  .floor-section .room-card .pill::before {
    width: 4px !important;
    height: 4px !important;
  }

  .dashboard-grid .room-card h3,
  .floor-section .room-card h3 {
    flex: 0 0 auto !important;
    font-size: 9px !important;
    line-height: 1.15 !important;
    margin: 4px 0 2px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .dashboard-grid .room-card .room-location,
  .floor-section .room-card .room-location {
    flex: 0 0 auto !important;
    font-size: 6px !important;
    line-height: 1.2 !important;
    margin: 0 0 6px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .dashboard-grid .room-card-status,
  .floor-section .room-card-status {
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .dashboard-grid .room-card-status > .room-status-item,
  .floor-section .room-card-status > .room-status-item {
    min-height: 15px !important;
    height: 15px !important;
    gap: 4px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-top: 0 !important;
    white-space: nowrap !important;
  }

  .dashboard-grid .room-card-status > .room-status-item + .room-status-item,
  .floor-section .room-card-status > .room-status-item + .room-status-item {
    border-top: 1px dashed var(--card-border) !important;
    padding-top: 3px !important;
    margin-top: 3px !important;
    height: 18px !important;
  }

  .dashboard-grid .room-info-icon,
  .floor-section .room-info-icon {
    width: 9px !important;
    height: 9px !important;
    flex: 0 0 9px !important;
  }

  .dashboard-grid .room-time-label,
  .dashboard-grid .room-course-label,
  .dashboard-grid .room-meta-value,
  .dashboard-grid .room-status-ready,
  .dashboard-grid .room-maint-info,
  .dashboard-grid .room-capacity-label,
  .floor-section .room-time-label,
  .floor-section .room-course-label,
  .floor-section .room-meta-value,
  .floor-section .room-status-ready,
  .floor-section .room-maint-info,
  .floor-section .room-capacity-label {
    min-width: 0 !important;
    max-width: 100% !important;
    font-size: 6px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .dashboard-grid .room-card > .room-use-button,
  .dashboard-grid .room-card > .inline-form,
  .floor-section .room-card > .room-use-button,
  .floor-section .room-card > .inline-form {
    flex: 0 0 auto !important;
    width: 100% !important;
    margin-top: auto !important;
    padding: 0 5px !important;
  }

  .dashboard-grid .room-use-button,
  .floor-section .room-use-button {
    width: 100% !important;
    height: 25px !important;
    min-height: 25px !important;
    padding: 2px 5px !important;
    font-size: 6px !important;
    line-height: 1 !important;
    border-radius: 6px !important;
  }
}

@media screen and (max-width: 380px) {
  .dashboard-grid .card-row,
  .floor-section .card-row { gap: 5px !important; }
  .dashboard-grid .room-card,
  .floor-section .room-card {
    height: 174px !important;
    min-height: 174px !important;
    max-height: 174px !important;
    padding: 7px !important;
  }
}

/* ============================================================
   ROOM CARDS - FINAL MOBILE: FULL CONTENT / NO CLIPPING
   ============================================================ */
@media screen and (max-width: 768px) {
  .card-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    align-items: stretch !important;
  }

  .room-card {
    display: flex !important;
    flex-direction: column !important;
    align-self: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 118px !important;
    max-height: none !important;
    box-sizing: border-box !important;
    padding: 8px !important;
    margin: 0 !important;
    overflow: visible !important;
    border-radius: 8px !important;
  }

  .room-card-top {
    flex: 0 0 auto !important;
    min-height: 12px !important;
    align-items: center !important;
  }

  .room-card h3 {
    flex: 0 0 auto !important;
    margin: 6px 0 3px !important;
    font-size: 8px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .room-location {
    flex: 0 0 auto !important;
    margin: 0 0 5px !important;
    font-size: 5.5px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .room-card-status {
    flex: 0 0 auto !important;
    margin: 2px 0 4px !important;
    min-width: 0 !important;
  }

  .room-status-item {
    display: flex !important;
    align-items: flex-start !important;
    min-width: 0 !important;
    min-height: 14px !important;
    gap: 4px !important;
  }

  .room-status-item span {
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  .room-course-label,
  .room-meta-value,
  .room-maint-info,
  .room-time-label,
  .room-status-ready,
  .room-capacity-label {
    display: block !important;
    font-size: 5.5px !important;
    line-height: 1.25 !important;
  }

  .room-card-status > .room-status-item + .room-status-item {
    padding-top: 3px !important;
    margin-top: 3px !important;
  }

  .previous-cancel-reason {
    flex: 0 0 auto !important;
    margin-top: 3px !important;
    font-size: 5px !important;
    line-height: 1.2 !important;
    overflow-wrap: anywhere !important;
  }

  .room-card > .room-use-button,
  .room-card > .inline-form {
    flex: 0 0 auto !important;
    width: 100% !important;
    margin-top: auto !important;
    padding-top: 4px !important;
  }

  .room-card .room-use-button,
  .room-card > .inline-form .button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 23px !important;
    min-height: 23px !important;
    max-height: 23px !important;
    box-sizing: border-box !important;
    padding: 2px 4px !important;
    font-size: 5.5px !important;
    line-height: 1 !important;
  }

  .room-card .room-use-button .button-icon {
    width: 10px !important;
    height: 10px !important;
    flex: 0 0 auto !important;
  }
}

@media screen and (max-width: 380px) {
  .card-row { gap: 5px !important; }
  .room-card { min-height: 114px !important; padding: 7px !important; }
  .room-card h3 { font-size: 7.5px !important; }
  .room-course-label,
  .room-meta-value,
  .room-maint-info,
  .room-time-label,
  .room-status-ready,
  .room-capacity-label { font-size: 5.2px !important; }
}

/* ============================================================
   ROOM CARD MOBILE - FINAL FIX: BATalkan/GUNAKAN TIDAK TERPOTONG
   Override aturan lama yang memakai tinggi maksimum 180px.
   ============================================================ */
@media screen and (max-width: 768px) {
  .floor-section .card-row,
  .dashboard-grid .card-row {
    grid-auto-rows: auto !important;
    align-items: stretch !important;
    overflow: visible !important;
  }

  .floor-section .room-card,
  .dashboard-grid .room-card {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    align-self: stretch !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .floor-section .room-card-status,
  .dashboard-grid .room-card-status {
    overflow: visible !important;
    flex: 0 0 auto !important;
  }

  .floor-section .room-status-item,
  .dashboard-grid .room-status-item {
    overflow: visible !important;
  }

  .floor-section .room-card > .inline-form,
  .dashboard-grid .room-card > .inline-form,
  .floor-section .room-card > .room-use-button,
  .dashboard-grid .room-card > .room-use-button {
    flex: 0 0 auto !important;
    width: 100% !important;
    margin-top: auto !important;
    padding-top: 6px !important;
    box-sizing: border-box !important;
  }

  .floor-section .room-card > .inline-form .room-use-button,
  .dashboard-grid .room-card > .inline-form .room-use-button,
  .floor-section .room-card > .room-use-button,
  .dashboard-grid .room-card > .room-use-button {
    width: 100% !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 2px 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .floor-section .previous-cancel-reason,
  .dashboard-grid .previous-cancel-reason {
    flex: 0 0 auto !important;
    overflow: visible !important;
    max-height: none !important;
  }
}

@media screen and (max-width: 380px) {
  .floor-section .room-card,
  .dashboard-grid .room-card {
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
  }
}

/* ============================================================
   FINAL MOBILE ROOM CARD - ACTION BUTTON ALWAYS AT BOTTOM
   ============================================================ */
@media screen and (max-width: 768px) {
  .floor-section .card-row,
  .dashboard-grid .card-row {
    align-items: stretch !important;
  }

  .floor-section .room-card,
  .dashboard-grid .room-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .floor-section .room-card > .room-card-status,
  .dashboard-grid .room-card > .room-card-status {
    flex: 0 0 auto !important;
  }

  .floor-section .room-card > .room-use-button,
  .dashboard-grid .room-card > .room-use-button,
  .floor-section .room-card > .inline-form,
  .dashboard-grid .room-card > .inline-form {
    margin-top: auto !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .floor-section .room-card > .inline-form .room-use-button,
  .dashboard-grid .room-card > .inline-form .room-use-button {
    width: 100% !important;
    margin-top: 0 !important;
    box-sizing: border-box !important;
  }
}

/* ============================================================
   ROOM LIST MOBILE — FINAL RAPIH
   ============================================================ */
@media screen and (max-width: 768px) {
  .ruang-table-section {
    width: 100% !important;
    min-width: 0 !important;
  }

  .ruang-table-section .table-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 6px !important;
    padding: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border-radius: 8px !important;
  }

  .ruang-table-section .table-toolbar {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 5px !important;
    padding: 8px 8px 6px !important;
    margin: 0 !important;
  }

  .ruang-table-section .table-toolbar-title {
    font-size: 9px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    margin: 0 !important;
  }

  .ruang-table-section .table-search {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    position: relative !important;
  }

  .ruang-table-section .table-search input {
    width: 100% !important;
    height: 28px !important;
    min-height: 28px !important;
    box-sizing: border-box !important;
    padding: 5px 8px 5px 25px !important;
    font-size: 7px !important;
    border-radius: 6px !important;
  }

  .ruang-table-section .table-search-icon {
    width: 11px !important;
    height: 11px !important;
    left: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }

  .ruang-table-section .room-data-table {
    width: 620px !important;
    min-width: 620px !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
    margin: 0 !important;
  }

  .ruang-table-section .room-data-table th,
  .ruang-table-section .room-data-table td {
    box-sizing: border-box !important;
    padding: 5px 6px !important;
    height: 31px !important;
    min-height: 31px !important;
    font-size: 6.5px !important;
    line-height: 1.15 !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .ruang-table-section .room-data-table th {
    height: 25px !important;
    min-height: 25px !important;
    padding: 4px 6px !important;
    font-size: 6px !important;
    font-weight: 700 !important;
  }

  .ruang-table-section .room-data-table th:nth-child(1),
  .ruang-table-section .room-data-table td:nth-child(1) { width: 65px !important; }
  .ruang-table-section .room-data-table th:nth-child(2),
  .ruang-table-section .room-data-table td:nth-child(2) { width: 120px !important; }
  .ruang-table-section .room-data-table th:nth-child(3),
  .ruang-table-section .room-data-table td:nth-child(3) { width: 110px !important; }
  .ruang-table-section .room-data-table th:nth-child(4),
  .ruang-table-section .room-data-table td:nth-child(4) { width: 65px !important; text-align:center !important; }
  .ruang-table-section .room-data-table th:nth-child(5),
  .ruang-table-section .room-data-table td:nth-child(5) { width: 90px !important; }
  .ruang-table-section .room-data-table th:nth-child(6),
  .ruang-table-section .room-data-table td:nth-child(6) { width: 95px !important; }
  .ruang-table-section .room-data-table th:nth-child(7),
  .ruang-table-section .room-data-table td:nth-child(7) { width: 75px !important; }

  .ruang-table-section .room-data-table td:nth-child(1) strong {
    font-size: 6.5px !important;
  }

  .ruang-table-section .room-data-table .badge {
    display: inline-flex !important;
    width: 25px !important;
    height: 25px !important;
    min-height: 25px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    font-size: 8px !important;
    border-radius: 6px !important;
  }

  .ruang-table-section .room-data-table .pill {
    font-size: 6px !important;
    padding: 3px 5px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .ruang-table-section .room-data-table .table-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    flex-wrap: nowrap !important;
  }

  .ruang-table-section .room-data-table .table-actions .button {
    height: 24px !important;
    min-height: 24px !important;
    padding: 3px 5px !important;
    font-size: 6px !important;
    border-radius: 5px !important;
  }
}

@media screen and (max-width: 380px) {
  .ruang-table-section .room-data-table {
    width: 590px !important;
    min-width: 590px !important;
  }

  .ruang-table-section .room-data-table th,
  .ruang-table-section .room-data-table td {
    height: 29px !important;
    min-height: 29px !important;
    padding: 4px 5px !important;
    font-size: 6.2px !important;
  }
}

/* ============================================================
   FINAL MOBILE - HALAMAN PENGGUNA LEBIH RAPI
   ============================================================ */
@media screen and (max-width: 768px) {
  .page.pengguna-page {
    max-width: 390px !important;
    padding: 5px 7px 12px !important;
  }

  .pengguna-page .pengguna-header-section .card {
    padding: 9px !important;
    margin: 0 0 7px !important;
  }

  .pengguna-page .room-page-header {
    display: block !important;
  }

  .pengguna-page .room-page-header .section-heading {
    font-size: 11px !important;
    margin-bottom: 6px !important;
  }

  .pengguna-page .status-summary {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 3px !important;
    margin: 0 !important;
  }

  .pengguna-page .status-chip {
    width: 100% !important;
    height: 22px !important;
    min-height: 22px !important;
    box-sizing: border-box !important;
    padding: 3px 7px !important;
    font-size: 6.5px !important;
    border-radius: 11px !important;
    justify-content: flex-start !important;
  }

  .pengguna-page .status-chip .chip-icon {
    width: 11px !important;
    height: 11px !important;
    margin-right: 5px !important;
  }

  .pengguna-page .room-page-header > .button {
    display: flex !important;
    width: 100% !important;
    height: 29px !important;
    min-height: 29px !important;
    margin-top: 5px !important;
    justify-content: center !important;
    align-items: center !important;
    font-size: 7px !important;
  }

  .pengguna-page .pengguna-table-section .card {
    padding: 0 !important;
    margin-top: 0 !important;
    overflow: hidden !important;
  }

  .pengguna-page .table-toolbar {
    display: block !important;
    padding: 9px 9px 7px !important;
    box-sizing: border-box !important;
  }

  .pengguna-page .table-toolbar-title {
    font-size: 9px !important;
    line-height: 1.2 !important;
    margin-bottom: 5px !important;
  }

  .pengguna-page .table-search {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    position: relative !important;
  }

  .pengguna-page .table-search input {
    width: 100% !important;
    height: 29px !important;
    min-height: 29px !important;
    box-sizing: border-box !important;
    padding: 5px 8px 5px 25px !important;
    font-size: 7px !important;
    border-radius: 6px !important;
  }

  .pengguna-page .table-search-icon {
    left: 8px !important;
    right: auto !important;
    top: 50% !important;
    width: 11px !important;
    height: 11px !important;
    transform: translateY(-50%) !important;
  }

  .pengguna-page .user-data-table {
    width: 540px !important;
    min-width: 540px !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
  }

  .pengguna-page .user-data-table th,
  .pengguna-page .user-data-table td {
    height: 32px !important;
    min-height: 32px !important;
    padding: 5px 7px !important;
    font-size: 6.5px !important;
    line-height: 1.15 !important;
    vertical-align: middle !important;
  }

  .pengguna-page .user-data-table th {
    font-size: 6px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
  }

  .pengguna-page .user-data-table th:nth-child(1),
  .pengguna-page .user-data-table td:nth-child(1) { width: 145px !important; }
  .pengguna-page .user-data-table th:nth-child(2),
  .pengguna-page .user-data-table td:nth-child(2) { width: 125px !important; }
  .pengguna-page .user-data-table th:nth-child(3),
  .pengguna-page .user-data-table td:nth-child(3) { width: 75px !important; }
  .pengguna-page .user-data-table th:nth-child(4),
  .pengguna-page .user-data-table td:nth-child(4) { width: 75px !important; }
  .pengguna-page .user-data-table th:nth-child(5),
  .pengguna-page .user-data-table td:nth-child(5) { width: 120px !important; }

  .pengguna-page .user-data-table td strong {
    font-size: 6.5px !important;
  }

  .pengguna-page .user-data-table .badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 24px !important;
    min-height: 24px !important;
    padding: 2px 7px !important;
    font-size: 7px !important;
    border-radius: 6px !important;
    white-space: nowrap !important;
  }

  .pengguna-page .user-data-table .pill {
    font-size: 6px !important;
    padding: 3px 6px !important;
    white-space: nowrap !important;
  }

  .pengguna-page .user-table-actions {
    justify-content: flex-start !important;
    gap: 3px !important;
    flex-wrap: nowrap !important;
  }

  .pengguna-page .user-table-actions .button {
    height: 23px !important;
    min-height: 23px !important;
    padding: 2px 5px !important;
    font-size: 6px !important;
  }
}

@media screen and (max-width: 380px) {
  .pengguna-page .user-data-table {
    width: 520px !important;
    min-width: 520px !important;
  }
  .pengguna-page .user-data-table th:nth-child(1),
  .pengguna-page .user-data-table td:nth-child(1) { width: 138px !important; }
  .pengguna-page .user-data-table th:nth-child(2),
  .pengguna-page .user-data-table td:nth-child(2) { width: 118px !important; }
  .pengguna-page .user-data-table th:nth-child(3),
  .pengguna-page .user-data-table td:nth-child(3) { width: 72px !important; }
  .pengguna-page .user-data-table th:nth-child(4),
  .pengguna-page .user-data-table td:nth-child(4) { width: 72px !important; }
  .pengguna-page .user-data-table th:nth-child(5),
  .pengguna-page .user-data-table td:nth-child(5) { width: 120px !important; }
}

/* ============================================================
   POPUP / MODAL - FINAL CONSISTENT
   Semua popup memiliki ukuran, jarak, input, dan tombol yang konsisten.
   Tidak mengubah fungsi PHP.
   ============================================================ */
.modal-backdrop,
.room-modal-overlay {
  box-sizing: border-box !important;
  padding: 10px !important;
  align-items: center !important;
  justify-content: center !important;
}

.modal-backdrop .modal,
.room-modal-overlay .room-modal {
  box-sizing: border-box !important;
  width: min(100%, 520px) !important;
  max-width: 520px !important;
  max-height: calc(100dvh - 20px) !important;
  margin: 0 auto !important;
  padding: 16px !important;
  border-radius: 12px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

.modal-backdrop .modal h2,
.room-modal-overlay .room-modal h2 {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  margin: 0 0 12px !important;
  padding: 0 0 9px !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
}

.modal-backdrop .modal h2 .ui-icon,
.room-modal-overlay .room-modal h2 .ui-icon {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  padding: 5px !important;
  box-sizing: border-box !important;
  border-radius: 8px !important;
}

.modal-backdrop .modal .mt-6,
.modal-backdrop .modal form > .mt-6 {
  margin-top: 0 !important;
}

.modal-backdrop .modal .mt-6 + .mt-6 {
  margin-top: 12px !important;
}

.modal-backdrop .modal .section-subheading {
  margin: 0 0 7px !important;
  font-size: 9px !important;
  line-height: 1.2 !important;
}

.modal-backdrop .modal .form-grid,
.modal-backdrop .modal .room-modal .modal-grid {
  grid-template-columns: 1fr !important;
  gap: 9px !important;
}

.modal-backdrop .modal .field {
  gap: 4px !important;
  margin: 0 !important;
}

.modal-backdrop .modal .field > span {
  font-size: 8px !important;
  line-height: 1.25 !important;
  margin: 0 !important;
}

.modal-backdrop .modal .field input,
.modal-backdrop .modal .field select,
.modal-backdrop .modal .field textarea {
  width: 100% !important;
  min-width: 0 !important;
  height: 34px !important;
  min-height: 34px !important;
  box-sizing: border-box !important;
  padding: 7px 9px !important;
  border-radius: 7px !important;
  font-size: 8px !important;
  line-height: 1.2 !important;
}

.modal-backdrop .modal .field input[type="file"] {
  height: 34px !important;
  padding: 5px 7px !important;
  font-size: 7.5px !important;
}

.modal-backdrop .modal .field-desc {
  margin: 0 !important;
  font-size: 8px !important;
  line-height: 1.45 !important;
}

.modal-backdrop .modal .modal-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
  width: 100% !important;
  margin: 12px 0 0 !important;
  padding: 9px 0 0 !important;
  box-sizing: border-box !important;
  position: sticky !important;
  bottom: -16px !important;
  background: var(--card-bg, #fff) !important;
  z-index: 3 !important;
}

.modal-backdrop .modal .modal-actions .button,
.modal-backdrop .modal .modal-actions a.button {
  width: 100% !important;
  min-width: 0 !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 5px 7px !important;
  box-sizing: border-box !important;
  font-size: 7px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* Popup upload yang berisi penjelasan panjang tetap rapi dan dapat discroll. */
.modal-backdrop .modal .grid-full {
  grid-column: 1 / -1 !important;
}

/* Error tidak boleh menutupi isi popup. */
.modal-backdrop .modal .alert {
  position: static !important;
  width: auto !important;
  height: auto !important;
  min-height: 28px !important;
  margin: 0 0 9px !important;
  padding: 6px 8px !important;
  font-size: 7px !important;
  line-height: 1.35 !important;
}

@media screen and (max-width: 380px) {
  .modal-backdrop,
  .room-modal-overlay { padding: 7px !important; }

  .modal-backdrop .modal,
  .room-modal-overlay .room-modal {
    width: 100% !important;
    max-height: calc(100dvh - 14px) !important;
    padding: 13px !important;
    border-radius: 10px !important;
  }

  .modal-backdrop .modal h2,
  .room-modal-overlay .room-modal h2 {
    font-size: 14px !important;
    margin-bottom: 10px !important;
  }

  .modal-backdrop .modal .form-grid,
  .modal-backdrop .modal .room-modal .modal-grid { gap: 7px !important; }

  .modal-backdrop .modal .field input,
  .modal-backdrop .modal .field select,
  .modal-backdrop .modal .field textarea {
    height: 32px !important;
    min-height: 32px !important;
    font-size: 7.5px !important;
  }
}

/* ============================================================
   POPUP - LEBIH KOMPAK
   Lebar popup diperkecil lagi agar tidak terlalu melebar di HP.
   Semua jenis popup tetap konsisten.
   ============================================================ */
@media screen and (max-width: 768px) {
  .modal-backdrop .modal,
  .room-modal-overlay .room-modal {
    width: min(100%, 320px) !important;
    max-width: 320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media screen and (max-width: 380px) {
  .modal-backdrop .modal,
  .room-modal-overlay .room-modal {
    width: min(100%, 310px) !important;
    max-width: 310px !important;
    padding: 12px !important;
  }
}

@media screen and (min-width: 769px) {
  .modal-backdrop .modal,
  .room-modal-overlay .room-modal {
    width: min(100%, 460px) !important;
    max-width: 460px !important;
  }
}

/* ============================================================
   iOS SAFARI COMPATIBILITY PATCH
   Menyamakan ukuran layout mobile dengan Chrome Android tanpa
   mengubah layout desktop dan tanpa mengubah struktur PHP.
   ============================================================ */
@supports (-webkit-touch-callout: none) {
  html,
  body {
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
    overflow-x: hidden !important;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box !important;
  }

  .page,
  .page.tv-page,
  .page.jadwal-page,
  .page.dashboard-page,
  .page.ruangan-page,
  .page.pengguna-page,
  .page.landing-page {
    width: 100% !important;
    max-width: 420px !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow-x: clip !important;
  }

  .page > .container,
  .page .container,
  .container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .app-header,
  .app-header-top,
  .app-header-brand,
  .app-header-meta,
  .stats-head,
  .stats-head-title,
  .stats-filter,
  .dashboard-stats-section,
  .dashboard-stats-section .card,
  .dashboard-room-section,
  .dashboard-section,
  .room-filter,
  .floor-section,
  .card-row {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* Safari kadang memberi intrinsic width lebih besar pada control form. */
  input,
  select,
  textarea,
  button,
  .button,
  .button-outlined {
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: 100% !important;
    font-family: inherit !important;
    -webkit-text-size-adjust: 100% !important;
  }

  .stats-filter .time-filter-field,
  .stats-filter .time-filter-field input,
  .stats-filter .time-filter-field select {
    min-width: 0 !important;
    width: 100% !important;
  }

  .stats-filter .time-filter-actions {
    min-width: 0 !important;
    width: 100% !important;
  }

  .stats-filter .time-filter-actions .button,
  .stats-filter .time-filter-actions a.button {
    min-width: 0 !important;
    width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Menormalkan date/time Safari agar tidak mengambil lebar intrinsic sendiri. */
  .stats-filter input[type="date"],
  .stats-filter input[type="time"] {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: var(--m-control-h, 29px) !important;
    min-height: var(--m-control-h, 29px) !important;
    padding-left: 7px !important;
    padding-right: 7px !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
  }

  .room-filter {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }

  .room-filter input,
  .room-filter select {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .floor-section .card-row,
  .dashboard-grid .card-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 6px !important;
  }

  .floor-section .room-card,
  .dashboard-grid .room-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .floor-section .room-card-top,
  .floor-section .room-card-status,
  .floor-section .room-status-item,
  .floor-section .room-status-item span,
  .floor-section .room-location,
  .floor-section .room-card h3,
  .floor-section .room-code,
  .floor-section .room-card .pill,
  .dashboard-grid .room-card-top,
  .dashboard-grid .room-card-status,
  .dashboard-grid .room-status-item,
  .dashboard-grid .room-status-item span,
  .dashboard-grid .room-location,
  .dashboard-grid .room-card h3,
  .dashboard-grid .room-code,
  .dashboard-grid .room-card .pill {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .floor-section .room-card h3,
  .dashboard-grid .room-card h3,
  .floor-section .room-location,
  .dashboard-grid .room-location,
  .floor-section .room-time-label,
  .floor-section .room-course-label,
  .floor-section .room-meta-value,
  .floor-section .room-status-ready,
  .floor-section .room-maint-info,
  .floor-section .room-capacity-label,
  .dashboard-grid .room-time-label,
  .dashboard-grid .room-course-label,
  .dashboard-grid .room-meta-value,
  .dashboard-grid .room-status-ready,
  .dashboard-grid .room-maint-info,
  .dashboard-grid .room-capacity-label {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .lantai-title {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* iPhone kecil: pertahankan dua kolom kartu tanpa membuat halaman melebar. */
@supports (-webkit-touch-callout: none) {
  @media screen and (max-width: 380px) {
    .page,
    .page.tv-page,
    .page.jadwal-page,
    .page.dashboard-page,
    .page.ruangan-page,
    .page.pengguna-page,
    .page.landing-page {
      padding-left: 8px !important;
      padding-right: 8px !important;
    }

    .stats-filter,
    .room-filter,
    .floor-section .card-row,
    .dashboard-grid .card-row {
      gap: 5px !important;
    }
  }
}

/* ============================================================
   TOPBAR-TIME FINAL - MOBILE
   Mengikuti referensi: jam kecil, hanya membungkus teks jam,
   berada satu baris dengan brand dan meta. Tidak ada baris/kotak
   tambahan di bawah jam.
   ============================================================ */
@media screen and (max-width: 768px) {
  .app-header-top {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 7px 8px !important;
  }

  .app-header-brand {
    width: auto !important;
    min-width: 0 !important;
    justify-self: start !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 5px !important;
  }

  .app-header-brand .status-pill {
    padding: 2px 4px !important;
    font-size: 6.5px !important;
    letter-spacing: .15px !important;
  }

  .app-header-brand .app-name {
    font-size: 12px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .app-header-top > .topbar-time {
    grid-column: 2 !important;
    grid-row: 1 !important;
    order: initial !important;
    width: max-content !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    justify-self: center !important;
    align-self: center !important;
    margin: 0 !important;
    padding: 3px 7px !important;
    font-size: 9px !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    border-radius: 999px !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }

  .app-header-top > .topbar-time #clock {
    display: inline-block !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
  }

  .app-header-meta {
    grid-column: 3 !important;
    grid-row: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    justify-self: end !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
  }

  .app-user {
    width: auto !important;
    max-width: 75px !important;
    min-width: 0 !important;
    font-size: 8px !important;
    gap: 3px !important;
  }

  .app-user .user-icon {
    width: 11px !important;
    height: 11px !important;
  }

  .app-logout-btn {
    width: auto !important;
    min-width: 0 !important;
    height: 25px !important;
    min-height: 25px !important;
    padding: 3px 6px !important;
    font-size: 8px !important;
    border-radius: 6px !important;
    white-space: nowrap !important;
  }
}

@media screen and (max-width: 360px) {
  .app-header-top {
    gap: 3px !important;
    padding: 6px !important;
  }

  .app-header-brand { gap: 4px !important; }
  .app-header-brand .status-pill { font-size: 5.5px !important; padding: 2px 3px !important; }
  .app-header-brand .app-name { font-size: 11px !important; }

  .app-header-top > .topbar-time {
    padding: 3px 6px !important;
    font-size: 8px !important;
  }

  .app-user { max-width: 60px !important; font-size: 7px !important; }
  .app-user .user-icon { width: 10px !important; height: 10px !important; }
  .app-logout-btn { height: 23px !important; min-height: 23px !important; padding: 3px 5px !important; font-size: 7px !important; }
}

/* ============================================================
   FINAL MOBILE - AKSI RUANG KELAS RAPI
   Tombol Ubah/Hapus dibuat seragam, tidak berhimpitan,
   dan tetap berada di dalam kolom Aksi.
   Desktop tidak disentuh.
   ============================================================ */
@media screen and (max-width: 768px) {
  .ruang-table-section .room-data-table th:nth-child(7),
  .ruang-table-section .room-data-table td:nth-child(7) {
    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
    text-align: left !important;
    overflow: visible !important;
  }

  .ruang-table-section .room-data-table .table-actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 5px !important;
    width: 100% !important;
    min-width: 0 !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
  }

  .ruang-table-section .room-data-table .table-actions .inline-form {
    display: flex !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
  }

  .ruang-table-section .room-data-table .table-actions .button,
  .ruang-table-section .room-data-table .table-actions .inline-form .button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
    height: 24px !important;
    min-height: 24px !important;
    padding: 3px 5px !important;
    margin: 0 !important;
    border-radius: 6px !important;
    font-size: 7.5px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
  }

  .ruang-table-section .room-data-table .table-actions .button-icon {
    width: 9px !important;
    height: 9px !important;
    min-width: 9px !important;
    flex: 0 0 9px !important;
    margin: 0 !important;
  }

  .ruang-table-section .room-data-table .table-actions .badge-delete {
    width: 54px !important;
    min-width: 54px !important;
  }
}

@media screen and (max-width: 380px) {
  .ruang-table-section .room-data-table th:nth-child(7),
  .ruang-table-section .room-data-table td:nth-child(7) {
    width: 116px !important;
    min-width: 116px !important;
    max-width: 116px !important;
  }

  .ruang-table-section .room-data-table .table-actions {
    gap: 4px !important;
  }

  .ruang-table-section .room-data-table .table-actions .button,
  .ruang-table-section .room-data-table .table-actions .inline-form .button {
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    height: 23px !important;
    min-height: 23px !important;
    padding: 3px 4px !important;
    font-size: 7px !important;
  }

  .ruang-table-section .room-data-table .table-actions .button-icon {
    width: 8px !important;
    height: 8px !important;
    min-width: 8px !important;
    flex-basis: 8px !important;
  }
}

/* ============================================================
   FINAL MOBILE - PENGGUNA / DAFTAR PENGGUNA
   Rapikan seluruh tampilan halaman pengguna pada HP.
   Desktop tidak disentuh.
   ============================================================ */
@media screen and (max-width: 768px) {
  .page.pengguna-page {
    width: 100% !important;
    max-width: 420px !important;
    padding: 5px 6px 14px !important;
    overflow-x: hidden !important;
  }

  .pengguna-page .pengguna-header-section .card,
  .pengguna-page .pengguna-table-section .card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    border-radius: 8px !important;
  }

  .pengguna-page .pengguna-header-section .card {
    padding: 8px !important;
    margin-bottom: 6px !important;
  }

  .pengguna-page .room-page-header {
    width: 100% !important;
  }

  .pengguna-page .room-page-header .section-heading {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 9px !important;
    line-height: 1.1 !important;
    margin: 0 0 5px !important;
  }

  .pengguna-page .room-page-header .section-heading .ui-icon {
    width: 12px !important;
    height: 12px !important;
  }

  .pengguna-page .status-summary {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 3px !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .pengguna-page .status-chip {
    width: 100% !important;
    height: 19px !important;
    min-height: 19px !important;
    padding: 2px 4px !important;
    border-radius: 10px !important;
    font-size: 5.5px !important;
    line-height: 1 !important;
    justify-content: flex-start !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }

  .pengguna-page .status-chip .chip-icon {
    width: 8px !important;
    height: 8px !important;
    margin-right: 3px !important;
    flex: 0 0 auto !important;
  }

  .pengguna-page .room-page-header > .button {
    width: 100% !important;
    height: 25px !important;
    min-height: 25px !important;
    margin-top: 4px !important;
    padding: 3px 6px !important;
    font-size: 6px !important;
    border-radius: 6px !important;
    justify-content: center !important;
  }

  .pengguna-page .room-page-header > .button .button-icon {
    width: 9px !important;
    height: 9px !important;
  }

  .pengguna-page .pengguna-table-section .card {
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .pengguna-page .table-toolbar {
    padding: 7px !important;
  }

  .pengguna-page .table-toolbar-title {
    font-size: 7px !important;
    line-height: 1.1 !important;
    margin-bottom: 4px !important;
    font-weight: 700 !important;
  }

  .pengguna-page .table-search,
  .pengguna-page .table-search input {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .pengguna-page .table-search input {
    height: 24px !important;
    min-height: 24px !important;
    padding: 4px 6px 4px 20px !important;
    font-size: 5.5px !important;
    border-radius: 5px !important;
  }

  .pengguna-page .table-search-icon {
    width: 9px !important;
    height: 9px !important;
    left: 6px !important;
  }

  /* Semua kolom tetap berada di dalam layar HP. Teks panjang dipotong rapi. */
  .pengguna-page .user-data-table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
  }

  .pengguna-page .user-data-table th,
  .pengguna-page .user-data-table td {
    box-sizing: border-box !important;
    height: 27px !important;
    min-height: 27px !important;
    padding: 3px 4px !important;
    font-size: 5.2px !important;
    line-height: 1.1 !important;
    vertical-align: middle !important;
    overflow: hidden !important;
  }

  .pengguna-page .user-data-table th {
    font-size: 5px !important;
    white-space: nowrap !important;
  }

  .pengguna-page .user-data-table th:nth-child(1),
  .pengguna-page .user-data-table td:nth-child(1) { width: 28% !important; }
  .pengguna-page .user-data-table th:nth-child(2),
  .pengguna-page .user-data-table td:nth-child(2) { width: 20% !important; }
  .pengguna-page .user-data-table th:nth-child(3),
  .pengguna-page .user-data-table td:nth-child(3) { width: 14% !important; }
  .pengguna-page .user-data-table th:nth-child(4),
  .pengguna-page .user-data-table td:nth-child(4) { width: 14% !important; }
  .pengguna-page .user-data-table th:nth-child(5),
  .pengguna-page .user-data-table td:nth-child(5) { width: 24% !important; }

  .pengguna-page .user-data-table td strong,
  .pengguna-page .user-data-table td:not(.user-actions-cell) {
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  .pengguna-page .user-data-table .badge {
    height: 18px !important;
    min-height: 18px !important;
    max-width: 100% !important;
    padding: 2px 4px !important;
    font-size: 5px !important;
    border-radius: 5px !important;
  }

  .pengguna-page .user-data-table .pill {
    display: inline-flex !important;
    align-items: center !important;
    max-width: 100% !important;
    height: 17px !important;
    padding: 2px 4px !important;
    font-size: 4.8px !important;
    border-radius: 9px !important;
    white-space: nowrap !important;
  }

  /* Aksi dibuat konsisten, rapat, dan tidak keluar dari kolom. */
  .pengguna-page .user-actions-cell {
    padding-left: 2px !important;
    padding-right: 3px !important;
    white-space: nowrap !important;
  }

  .pengguna-page .user-table-actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 2px !important;
    width: 100% !important;
    min-width: 0 !important;
    flex-wrap: nowrap !important;
  }

  .pengguna-page .user-table-actions .button,
  .pengguna-page .user-table-actions form,
  .pengguna-page .user-table-actions .inline-form {
    flex: 0 0 auto !important;
    min-width: 0 !important;
  }

  .pengguna-page .user-table-actions .button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    width: auto !important;
    min-width: 32px !important;
    max-width: 42px !important;
    height: 18px !important;
    min-height: 18px !important;
    padding: 2px 4px !important;
    font-size: 4.8px !important;
    line-height: 1 !important;
    border-radius: 4px !important;
    white-space: nowrap !important;
  }

  .pengguna-page .user-table-actions .button .button-icon {
    width: 7px !important;
    height: 7px !important;
    flex: 0 0 auto !important;
  }

  .pengguna-page .user-table-actions .badge-delete {
    margin: 0 !important;
  }
}

@media screen and (max-width: 380px) {
  .pengguna-page .status-chip { font-size: 5px !important; }
  .pengguna-page .user-data-table th,
  .pengguna-page .user-data-table td { font-size: 4.9px !important; padding-left: 3px !important; padding-right: 3px !important; }
  .pengguna-page .user-data-table th:nth-child(1),
  .pengguna-page .user-data-table td:nth-child(1) { width: 27% !important; }
  .pengguna-page .user-data-table th:nth-child(2),
  .pengguna-page .user-data-table td:nth-child(2) { width: 19% !important; }
  .pengguna-page .user-data-table th:nth-child(3),
  .pengguna-page .user-data-table td:nth-child(3) { width: 14% !important; }
  .pengguna-page .user-data-table th:nth-child(4),
  .pengguna-page .user-data-table td:nth-child(4) { width: 14% !important; }
  .pengguna-page .user-data-table th:nth-child(5),
  .pengguna-page .user-data-table td:nth-child(5) { width: 26% !important; }
  .pengguna-page .user-table-actions .button { min-width: 30px !important; max-width: 39px !important; font-size: 4.5px !important; padding: 2px 3px !important; }
}