/* ===== Thành An Mobile Optimization V1 ===== */
@media (max-width: 768px) {
  html, body { width:100%; max-width:100%; overflow-x:hidden !important; }
  body { min-width:0 !important; }

  /* App shell */
  body > .flex.h-screen,
  body > .h-screen.flex,
  #app,
  .app-shell {
    min-width:0 !important;
    width:100% !important;
  }

  /* Sidebar -> off-canvas */
  body > aside:first-of-type {
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    bottom:0 !important;
    z-index:60 !important;
    width:min(82vw, 290px) !important;
    min-width:0 !important;
    transform:translateX(-105%);
    transition:transform .22s ease;
    box-shadow:0 18px 50px rgba(15,23,42,.22);
  }
  body.ta-mobile-menu-open > aside:first-of-type { transform:translateX(0); }

  #taMobileBackdrop {
    position:fixed; inset:0; z-index:55;
    background:rgba(15,23,42,.42);
    display:none;
  }
  body.ta-mobile-menu-open #taMobileBackdrop { display:block; }

  #taMobileMenuBtn {
    display:flex !important;
    position:fixed;
    left:12px; top:10px;
    z-index:50;
    width:36px; height:36px;
    align-items:center; justify-content:center;
    border:1px solid #cbd5e1;
    border-radius:10px;
    background:#fff;
    box-shadow:0 2px 10px rgba(15,23,42,.12);
    color:#0f2947;
  }

  /* Interaction-only fix: navigation must stay clickable; closed drawers must not intercept taps. */
  #mainSidebar,
  body > aside:first-of-type { pointer-events:auto !important; }
  #mainSidebar a,
  body > aside:first-of-type a { pointer-events:auto !important; touch-action:manipulation; }
  #projectDrawer.translate-x-full,
  #projectEditDrawer.translate-x-full,
  #contractorDrawer.translate-x-full,
  #detailDrawer.translate-x-full { pointer-events:none !important; }
  #projectDrawer:not(.translate-x-full),
  #projectEditDrawer:not(.translate-x-full),
  #contractorDrawer:not(.translate-x-full),
  #detailDrawer:not(.translate-x-full) { pointer-events:auto !important; }
  #projectDrawerBackdrop.hidden,
  #contractorDrawerBackdrop.hidden { pointer-events:none !important; }

  /* Main/content shell */
  aside + div,
  body > .flex > .flex-1,
  .flex-1.flex.flex-col.min-w-0 {
    min-width:0 !important;
    width:100% !important;
  }

  /* Header */
  header {
    min-height:56px !important;
    height:auto !important;
    padding:8px 12px 8px 58px !important;
    gap:8px !important;
    flex-wrap:wrap !important;
  }
  header > div { min-width:0 !important; }
  header .w-96, header .w-80, header .w-72 { width:100% !important; max-width:none !important; }
  header input[type="text"], header input[type="search"] { width:100% !important; }

  /* Hide decorative/secondary header labels when cramped */
  header .tracking-widest,
  header .tracking-wide {
    max-width:44vw;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  /* Main padding */
  main {
    padding:14px 12px !important;
    overflow-x:hidden !important;
  }

  /* Grid/cards */
  main .grid {
    grid-template-columns:1fr !important;
  }
  main .md\:grid-cols-2,
  main .md\:grid-cols-3,
  main .md\:grid-cols-4,
  main .lg\:grid-cols-2,
  main .lg\:grid-cols-3,
  main .lg\:grid-cols-4 {
    grid-template-columns:1fr !important;
  }

  /* Desktop fixed widths -> responsive */
  .w-\[420px\], .w-\[480px\], .w-\[520px\], .w-\[560px\],
  .w-\[600px\], .w-\[640px\], .w-\[720px\], .w-\[760px\],
  .max-w-2xl, .max-w-3xl, .max-w-4xl, .max-w-5xl, .max-w-6xl {
    width:100% !important;
    max-width:100% !important;
  }

  /* Buttons/filters */
  .flex.items-center.gap-2,
  .flex.items-center.gap-3,
  .flex.items-center.gap-4 {
    min-width:0;
  }
  main select, main input, main button, main textarea {
    max-width:100%;
  }

  /* Tables: always preserve columns and allow horizontal swipe */
  .overflow-x-auto,
  .table-scroll,
  .table-wrap,
  div:has(> table) {
    max-width:100% !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
  }
  table {
    width:max-content !important;
    min-width:900px !important;
  }
  th, td { white-space:nowrap; }
  td .whitespace-normal, th .whitespace-normal { white-space:normal !important; }


  /* Detail drawers are NOT the navigation sidebar */
  #projectDrawer,
  #projectEditDrawer,
  #contractorDrawer,
  #detailDrawer {
    position:fixed !important;
    top:0 !important;
    right:0 !important;
    bottom:0 !important;
    left:auto !important;
    width:100vw !important;
    max-width:100vw !important;
    height:100dvh !important;
    z-index:10000 !important;
  }
  #projectDrawerBackdrop,
  #contractorDrawerBackdrop {
    z-index:9999 !important;
  }

  /* Drawers/modals */
  [class*="fixed"][class*="right-0"],
  .drawer,
  #projectDrawer,
  #contractorDrawer,
  #detailDrawer {
    width:100vw !important;
    max-width:100vw !important;
  }
  [role="dialog"],
  .modal,
  .fixed.inset-0 > div {
    max-width:calc(100vw - 20px) !important;
    max-height:calc(100vh - 20px) !important;
    overflow:auto !important;
  }

  /* Headings */
  h1 { font-size:1.35rem !important; line-height:1.25 !important; }
  h2 { line-height:1.25 !important; }

  /* Prevent long strings from forcing overflow */
  p, span, div, a { overflow-wrap:anywhere; }

  /* Sticky/fixed bottom bars */
  .sticky.bottom-0, .fixed.bottom-0 { max-width:100vw !important; }

  /* Forms */
  form .grid { grid-template-columns:1fr !important; }
}

@media (min-width: 769px) {
  #taMobileMenuBtn, #taMobileBackdrop { display:none !important; }
}

/* ===== Thành An Laptop Compact 769–1366 ===== */
@media (min-width:769px) and (max-width:1366px) {
  body > .flex > aside:first-child { width:210px !important; min-width:210px !important; }
  main { padding:14px !important; }
  header { padding-left:16px !important; padding-right:16px !important; }
  .sales-sticky-3 { width:240px !important; min-width:240px !important; }
  #todayTableScroll table { min-width:1380px !important; }
  #salesTableScroll table { min-width:1360px !important; }
  #todayTableScroll th, #todayTableScroll td,
  #salesTableScroll th, #salesTableScroll td { padding-left:8px !important; padding-right:8px !important; }
  #todayTableScroll .sales-sticky-3,
  #salesTableScroll .sales-sticky-3 { white-space:normal !important; overflow-wrap:normal !important; word-break:normal !important; }
  #todayTableScroll .sales-sticky-3 button,
  #salesTableScroll .sales-sticky-3 button { word-break:normal !important; overflow-wrap:normal !important; }
  #orderTableBody td:first-child, #orderTableBody td:nth-child(2) { min-width:230px; word-break:normal !important; overflow-wrap:normal !important; }
  #orderTableBody td { vertical-align:top; }
}