/* ===== 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 {
    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 { 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;
  }

  /* 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:80 !important;
  }
  #projectDrawerBackdrop,
  #contractorDrawerBackdrop {
    z-index:75 !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; }
}