/* ===== RESPONSIVE ===== */
@media(max-width:900px) {
  #hamburger {
    display: flex !important
  }

  #sb {
    width: var(--sidebar-w);
    position: fixed;
    height: 100vh;
    left: calc(-1 * var(--sidebar-w));
    transition: .3s ease
  }

  #sb.open {
    left: 0
  }

  #main {
    margin-left: 0;
    padding: 16px;
    padding-top: 72px;
    max-width: 100vw;
    overflow-x: hidden
  }
}

@media(max-width:768px) {
  /* Dashboard Grid System */
  .dash-grid {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }

  .dash-quick-actions {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
  }

  .dash-quick-actions .btn {
    padding: 12px;
    min-height: 70px;
    font-size: 12px;
  }

  .sc .val {
    font-size: 22px !important;
  }

  /* Table responsive wrap hint */
  .tw {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
  }


  .dash-trips-card .tw::after {
    display: block;
  }

  /* Hide scroll hint when not needed */
  .tw:not(:has(table))::after { display: none; }

  /* Layanan cards → stack vertically */
  .lv-card {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 12px;
    padding: 16px 20px;
    margin-bottom: 12px;
  }

  .lv-card>div:last-child {
    align-items: flex-start !important;
    flex-direction: row !important;
    justify-content: space-between;
    width: 100%;
    gap: 8px;
    flex-wrap: wrap;
  }

  /* Trip cards toolbar */
  .tc-hd {
    flex-direction: column;
    gap: 10px
  }

  .tc-hd>div:last-child {
    flex-wrap: wrap
  }

  /* Tbar stacking */
  .tbar {
    flex-direction: column;
    align-items: stretch
  }

  .tbar .srch {
    min-width: unset
  }

  .tbar select,
  .tbar button {
    width: 100%
  }

  /* Card padding */
  .card {
    padding: 16px;
    border-radius: 14px
  }

  /* Table scroll hint */
  .tw {
    -webkit-overflow-scrolling: touch
  }

  /* ph */
  .ph h1 {
    font-size: 24px
  }

  /* Calc grid */
  #page-calculator>div[style*="grid-template-columns:1fr 1fr"] {
    display: flex !important;
    flex-direction: column !important
  }

  /* Operational Expenses grid → stack vertically */
  .opex-grid {
    grid-template-columns: 1fr !important
  }

  /* Operational Expenses toolbar → full width */
  #page-operational .opex-toolbar select,
  #page-operational .opex-toolbar button {
    flex: 1;
    min-width: auto
  }

  /* Finance tab bar → responsive */
  .fin-tab-bar {
    width: 100%;
    justify-content: stretch
  }

  .fin-tab-btn {
    padding: 8px 14px;
    font-size: 12px;
    flex: 1;
    white-space: normal;
    text-align: center
  }

  /* Finance/Invoice selectors → responsive */
  #fin-trip,
  #inv-sel {
    min-width: auto !important;
    flex: 1;
    max-width: 100%
  }

  /* Finance/Report stats */
  #fin-stats.sg,
  #rep-stats.sg {
    grid-template-columns: 1fr 1fr
  }

  /* Booking modal fgrid */
  .fgrid {
    grid-template-columns: 1fr
  }

  .td-item-time {
    width: 70px
  }

  .td-day-hd {
    gap: 6px
  }
}

@media(max-width:480px) {
  .sc {
    padding: 16px 14px
  }

  .sc .val {
    font-size: 18px !important
  }

  #main {
    padding: 12px;
    padding-top: 72px;
  }

  .ph h1 {
    font-size: 20px
  }

  /* Operational Expenses toolbar → stack vertically */
  #page-operational .opex-toolbar {
    flex-direction: column;
    align-items: stretch
  }

  #page-operational .opex-toolbar select,
  #page-operational .opex-toolbar button {
    width: 100%
  }

  /* Finance tab buttons → tighter on small screens */
  .fin-tab-btn {
    padding: 7px 10px;
    font-size: 11px;
  }

  /* Layanan cards → reduce gap on small screens */
  .lv-card {
    gap: 8px;
  }

  .lv-card>div:last-child {
    gap: 6px;
  }

  /* Further reduce booking table */
  #bk-tbl th:nth-child(1),
  #bk-tbl td:nth-child(1) {
    display: none
  }

  /* No */
  #bk-tbl th:nth-child(5),
  #bk-tbl td:nth-child(5) {
    display: none
  }

  /* Layanan */
}

@media(max-width:380px) {
  .sc {
    padding: 12px 10px;
    margin-bottom: 10px;
  }

  .sc .val {
    font-size: 16px !important;
  }

  .sc h3 {
    font-size: 9px;
  }

  /* Main content → tighter padding */
  #main {
    padding: 10px;
    padding-top: 72px;
  }

  .ph {
    margin-bottom: 20px;
  }

  .ph h1 {
    font-size: 18px;
  }

  .ph p {
    font-size: 11px;
  }

  /* Card padding tighter */
  .card {
    padding: 12px;
    margin-bottom: 12px;
  }

  .card-hd {
    padding-bottom: 8px;
    margin-bottom: 10px;
  }

  .card-hd h3 {
    font-size: 12px;
  }

  /* Modal padding aggressive */
  .mdl-hd {
    padding: 14px 16px;
  }

  .mdl-hd h2 {
    font-size: 18px;
  }

  .mdl-body {
    padding: 14px;
  }

  .mdl-ft {
    padding: 10px 14px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0));
  }

  /* Layanan cards → even tighter */
  .lv-card {
    padding: 12px 14px;
    gap: 8px;
  }

  /* Toolbar → compact */
  .tbar {
    gap: 8px;
    margin-bottom: 12px;
  }

  .tbar .btn,
  .tbar select {
    padding: 8px 12px;
    font-size: 11px;
  }
}

@media(max-width:640px) {

  /* Modal → bottom sheet */
  .mo {
    padding: 0;
    align-items: flex-end
  }

  .mdl {
    max-width: 100%;
    border-radius: 20px 20px 0 0;
    max-height: 92vh;
    display: flex;
    flex-direction: column
  }

  .mdl-hd {
    border-radius: 20px 20px 0 0;
    flex-shrink: 0;
    padding: 18px 20px
  }

  .mdl-body {
    overflow-y: auto;
    flex: 1;
    padding: 20px;
    -webkit-overflow-scrolling: touch
  }

  .mdl-ft {
    flex-shrink: 0;
    padding: 12px 20px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0))
  }

  /* Booking table – hide low-priority columns on mobile */
  #bk-tbl th:nth-child(4),
  #bk-tbl td:nth-child(4),
  #bk-tbl th:nth-child(7),
  #bk-tbl td:nth-child(7),
  #bk-tbl th:nth-child(8),
  #bk-tbl td:nth-child(8),
  #bk-tbl th:nth-child(9),
  #bk-tbl td:nth-child(9),
  #bk-tbl th:nth-child(11),
  #bk-tbl td:nth-child(11),
  #bk-tbl th:nth-child(12),
  #bk-tbl td:nth-child(12) {
    display: none
  }

  /* Crew table – hide Kontak and Catatan on mobile */
  #crew-tbl th:nth-child(3),
  #crew-tbl td:nth-child(3),
  #crew-tbl th:nth-child(4),
  #crew-tbl td:nth-child(4) {
    display: none
  }

  /* Report table – hide less critical columns */
  #rep-tbl th:nth-child(2),
  #rep-tbl td:nth-child(2),
  #rep-tbl th:nth-child(6),
  #rep-tbl td:nth-child(6) {
    display: none
  }

  /* Finance/Invoice select full-width */
  #inv-sel,
  #fin-trip {
    min-width: unset !important;
    width: 100%
  }

  /* Trip card action buttons wrap */
  .tc-hd>div:last-child {
    flex-wrap: wrap;
    gap: 7px
  }
}