/* =====================================================================
   Mobile responsive overrides for the Adriatic project portal.
   Breakpoints:
     * <= 1100px : drawer-mode sidebar
     * <=  720px : phone layout (full mobile pass)
   ===================================================================== */

/* ----- Hamburger toggle (only shown on small screens) ------------- */
.mobile-nav-toggle { display: none; }
@media (max-width: 1100px) {
  .mobile-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--radius);
    color: var(--ink);
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
    margin-right: 6px;
  }
  .mobile-nav-toggle:hover { background: var(--surface-2); }
  .mobile-nav-toggle:active { background: var(--surface); }
}

/* =====================================================================
   <= 1100px — sidebar becomes a slide-out drawer.
   Override the existing rule that hides the sidebar entirely.
   ===================================================================== */
@media (max-width: 1100px) {
  .app {
    grid-template-columns: 1fr;
  }

  /* Bring the sidebar back as a fixed drawer that slides in from the
     left. It's positioned offscreen by default and translated on by
     the .app.mobile-nav-open modifier. */
  .sidebar {
    display: flex !important;
    position: fixed;
    inset: 0 auto 0 0;
    width: min(86vw, 320px);
    z-index: 80;
    transform: translateX(-100%);
    transition: transform 0.24s cubic-bezier(.2, .8, .2, 1);
    box-shadow: 4px 0 24px -8px rgba(0, 0, 0, 0.18);
    border-right: 1px solid var(--border);
    overflow-y: auto;
  }
  .app.mobile-nav-open .sidebar {
    transform: translateX(0);
  }

  /* Backdrop dims the rest of the app when drawer is open. */
  .mobile-nav-bd {
    position: fixed;
    inset: 0;
    background: rgba(20, 16, 8, 0.32);
    z-index: 70;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    animation: mobileNavFade 0.18s ease-out;
  }
  @keyframes mobileNavFade {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
}

/* =====================================================================
   <= 720px — phone layout.
   ===================================================================== */
@media (max-width: 720px) {
  :root {
    --pad: 16px;
    --gap: 14px;
  }
  body { font-size: 14px; }

  /* ---- Topbar ---- */
  .topbar {
    padding: 10px 14px !important;
    gap: 10px;
  }
  .topbar .breadcrumb {
    font-size: 14px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Hide breadcrumb leading parts on mobile — only show current page. */
  .topbar .breadcrumb > span:not(.current) { display: none; }
  .topbar .breadcrumb > .crumb-link { display: none; }
  .topbar .breadcrumb > .sep { display: none; }

  /* Hide all but the absolute essentials in the topbar actions. */
  .topbar .actions { gap: 2px; }
  .topbar .actions > .sync-bar { display: none; }
  .topbar .actions > .icon-btn { width: 36px; height: 36px; }
  /* Compact user chip — hide the name/role labels. */
  .topbar .actions > div:last-child > div { display: none; }
  .topbar .actions > div:last-child {
    padding: 4px !important;
    gap: 0 !important;
  }
  .topbar .actions > div[style*="width: 1px"] { display: none; }

  /* ---- Main canvas padding ---- */
  .canvas {
    padding: 16px 12px 96px !important;
  }
  .canvas-inner { padding: 0 !important; }

  /* ---- Page headers ---- */
  .documents-head,
  .tasks-head {
    flex-direction: column;
    align-items: stretch;
  }
  .documents-head .page-title,
  .tasks-head .page-title {
    font-size: 26px;
  }
  .documents-head .page-sub,
  .tasks-head .page-sub {
    font-size: 13px;
  }
  .tasks-head-actions { justify-content: stretch; }
  .tasks-head-actions .btn { flex: 1; justify-content: center; }

  /* ---- Sidebar (when open as drawer) ---- */
  .sidebar { padding: 18px 14px !important; }
  .brand { margin-bottom: 16px !important; }

  /* ---- Buttons ---- */
  .btn {
    padding: 10px 16px !important;
    min-height: 40px;
    font-size: 13.5px;
  }
  .icon-btn { width: 36px; height: 36px; }

  /* ---- Tasks list ---- */
  .task-row {
    grid-template-columns: auto 1fr !important;
    grid-template-areas: "check main"
                          "check side"
                          "check actions" !important;
    gap: 6px 12px !important;
    padding: 14px 4px !important;
  }
  .task-check { grid-area: check; }
  .task-main { grid-area: main; }
  .task-side {
    grid-area: side;
    flex-wrap: wrap;
    gap: 6px !important;
  }
  .task-actions {
    grid-area: actions;
    opacity: 1 !important;
    justify-content: flex-start !important;
    margin-top: 2px;
  }
  .task-row:hover { background: transparent !important; }
  .task-desc { max-width: 100% !important; white-space: normal !important; }
  .task-filters { gap: 8px !important; }
  .task-search { min-width: 0 !important; max-width: none !important; flex: 1 1 100% !important; }
  .task-filter-group { font-size: 11px !important; }

  /* ---- Tasks form ---- */
  .task-form,
  .uc-form,
  .uc-confirm,
  .contact-modal {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    inset: 0 !important;
    position: fixed !important;
    overflow-y: auto !important;
    transform: none !important;
    padding: 18px 16px 28px !important;
  }
  .task-form-grid { grid-template-columns: 1fr !important; }
  .task-form-grid .fld-wide { grid-column: span 1 !important; }
  .drawer { width: 100% !important; max-width: 100% !important; }

  /* ---- Settings ---- */
  .settings-section { padding: 16px !important; }
  .uc-head { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; }
  .uc-actions { flex-wrap: wrap; }
  .uc-search { flex: 1 1 100% !important; }
  .uc-search input { width: 100% !important; }
  .uc-add { flex: 1; justify-content: center; }
  /* Row layout: name + chip on row 1, contact on row 2, actions on row 3.
     The status chip sits at the right edge of the name row, on the same
     line as the name (above the project-count sub-line). */
  .uc-row {
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
      "id      status"
      "contact contact"
      "actions actions" !important;
    gap: 10px 12px !important;
    padding: 16px 6px !important;
    align-items: start !important;
  }
  .uc-row-id { grid-area: id; }
  .uc-row-contact { grid-area: contact; }
  .uc-row-status { grid-area: status; justify-self: end; align-self: start; padding-top: 6px; }
  .uc-row-actions { grid-area: actions; justify-content: flex-start !important; }

  /* ---- Documents grid stays single column ---- */
  .doc-grid { grid-template-columns: 1fr !important; }
  .doc-section-head { flex-direction: column; align-items: stretch !important; gap: 10px !important; }

  /* ---- Schedule view ---- */
  /* Convert the table into a vertical card list on mobile. */
  .sch-table-wrap {
    border: 0 !important;
    background: transparent !important;
    overflow: visible !important;
    border-radius: 0 !important;
  }
  .sch-table { table-layout: auto !important; width: 100% !important; min-width: 0 !important; }
  .sch-table thead { display: none !important; }
  .sch-table, .sch-table tbody { display: block !important; }
  .sch-table tbody .sch-row {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    grid-template-areas:
      "status name"
      "status dates" !important;
    gap: 4px 12px !important;
    padding: 14px 14px !important;
    margin-bottom: 10px;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
  }
  .sch-table tbody .sch-row:hover,
  .sch-table tbody .sch-row.is-highlighted { background: var(--surface) !important; }
  .sch-table tbody .sch-row > td { border: 0 !important; padding: 0 !important; vertical-align: top; }
  .sch-table tbody .sch-cell-status {
    grid-area: status;
    width: 32px !important;
    padding-top: 2px !important;
  }
  .sch-table tbody .sch-cell-name {
    grid-area: name;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
  }
  .sch-table tbody .sch-cell-name .sch-name {
    font-size: 15px !important;
    font-family: var(--serif);
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  /* Date cells become inline pills with a label prefix. */
  .sch-table tbody .sch-cell-date {
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    width: auto !important;
    grid-area: dates;
    font-size: 12px !important;
    color: var(--ink-3);
    padding: 4px 8px !important;
    background: var(--surface-2);
    border: 1px solid var(--border-soft);
    border-radius: 4px;
    margin: 6px 6px 0 0;
    font-family: var(--mono);
  }
  .sch-table tbody .sch-cell-date::before {
    content: attr(data-label);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 9.5px;
    color: var(--ink-4);
    font-family: var(--sans);
  }
  /* When multiple date cells exist, ensure they wrap nicely as siblings
     under "dates" grid area. Wrap them via a flex container by promoting
     the cells to inline-flex chips. */
  .sch-table tbody .sch-cell-date.editing {
    background: var(--surface) !important;
    padding: 2px 6px !important;
  }
  .sch-table tbody .sch-cell-date.editing::before { display: none; }
  .sch-table tbody .sch-cell-date.editing input { font-size: 12px; border: 0; background: transparent; }
  .sch-table tbody .sch-cell-date.overdue { color: var(--danger); background: var(--danger-soft); border-color: oklch(from var(--danger) l c h / 0.2); }
  .sch-table tbody .sch-cell-date.duesoon { color: var(--warning); }
  /* The expanded panel slots in below the card. */
  .sch-table tbody .sch-row-expanded {
    display: block !important;
    margin-top: -8px;
    margin-bottom: 10px;
    background: var(--surface-2);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    padding: 14px;
  }
  .sch-table tbody .sch-row-expanded > td { display: block !important; padding: 0 !important; border: 0 !important; }
  .sch-col-actions, .sch-cell-actions { display: none !important; }
  /* Toolbar above schedule */
  .sch-toolbar, .sch-controls {
    flex-wrap: wrap;
    gap: 6px !important;
  }
  .sch-gantt-wrap, .sch-gantt {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* ---- Login screen ---- */
  .gate { padding: 16px; }
  .gate-card { padding: 22px 18px !important; border-radius: 12px !important; }
  .gate-card h1 { font-size: 28px !important; }
  .role-tabs { grid-template-columns: 1fr 1fr !important; }

  /* ---- Selections list — show name + status + bid summary + due date.
       Hide subtitle (room/product) and approved-bid/assigned details. ---- */
  .sel-card-live .room,
  .sel-card-live .approved-bid,
  .sel-card-live .assigned { display: none !important; }
  .sel-card-live .bid-summary { display: flex !important; flex-wrap: wrap; }
  .sel-card-live .card-bottom { display: block !important; padding-top: 6px !important; }
  .sel-card-live .footrow { display: flex !important; justify-content: flex-start !important; }
  .sel-card-live { padding: 12px 14px !important; min-height: 0 !important; }
  .sel-card-live .top {
    gap: 8px !important;
    align-items: center !important;
  }
  .sel-card-live .name {
    font-size: 15.5px !important;
    font-weight: 500;
    line-height: 1.25 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word;
  }
  /* Status chip becomes a small colored dot on mobile — frees up
     horizontal space so the name can breathe. Green = approved,
     yellow = anything in-progress, red = declined/removed, gray = not sent. */
  .sel-card-live .top .chip {
    flex-shrink: 0;
    width: 12px !important;
    height: 12px !important;
    min-width: 12px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    font-size: 0 !important;
    color: transparent !important;
    background: var(--warning) !important;
    border: 0 !important;
    align-self: flex-start;
    margin-top: 6px;
  }
  .sel-card-live .top .chip::before,
  .sel-card-live .top .chip::after { display: none !important; }
  .sel-card-live .top .chip.approved,
  .sel-card-live .top .chip.complete { background: var(--success) !important; }
  .sel-card-live .top .chip.pending,
  .sel-card-live .top .chip.upcoming { background: var(--warning) !important; }
  .sel-card-live .top .chip.declined { background: var(--danger) !important; }
  .sel-card-live .top .chip.notsent { background: var(--ink-4) !important; }
  .sel-grid-live {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  /* ---- Allowances panel (Selections → Allowances tab) ---- */
  /* Top stats card: 2×2 grid spanning the full width of the page. */
  .allow-wrap > .allow-summary {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    width: 100%;
    gap: 16px !important;
    padding: 18px 16px !important;
    justify-items: center;
  }
  .allow-wrap > .allow-summary .allow-stat {
    align-items: center !important;
    text-align: center;
    min-width: 0 !important;
    width: 100%;
  }
  .allow-wrap > .allow-summary .allow-stat .upper,
  .allow-wrap > .allow-summary .allow-stat .val { text-align: center; }

  /* Hide the inline spacer div that exists for desktop flex layout. */
  .allow-wrap > .allow-summary > div[style*="flex"] { display: none !important; }

  /* "Group by" bar spans both columns of the grid (= full card width). */
  .allow-wrap > .allow-summary > .allow-group-toggle {
    grid-column: 1 / -1 !important;
    width: 100%;
    box-sizing: border-box;
    display: flex !important;
    justify-content: center !important;
  }
  .allow-wrap > .allow-summary > .allow-group-toggle button { flex: 1; }

  /* Header row — keep "Item" and "Status" labels only. */
  .allow-row-head {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-areas: "item status" !important;
    padding: 8px 14px !important;
  }
  .allow-row-head > span:nth-child(1) { grid-area: item; }
  .allow-row-head > span:nth-child(2),
  .allow-row-head > span:nth-child(3),
  .allow-row-head > span:nth-child(5) { display: none !important; }
  .allow-row-head > span:nth-child(4) { grid-area: status; }

  /* Data row: item + dot on top, "Allowance $X  Selection $Y" left-aligned below.
     IMPORTANT: scope to data rows only, not the header (.allow-row-head). */
  .allow-row:not(.allow-row-head) {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 4px 12px !important;
    padding: 12px 14px !important;
  }
  .allow-row:not(.allow-row-head) > span:nth-child(1) {
    flex: 1 1 calc(100% - 28px);
    min-width: 0;
    order: 1;
  }
  .allow-row:not(.allow-row-head) > span:nth-child(4) {
    order: 2;
    flex: 0 0 auto;
  }
  .allow-row:not(.allow-row-head) > span:nth-child(2) {
    order: 3;
    flex: 0 0 auto;
    text-align: left !important;
  }
  .allow-row:not(.allow-row-head) > span:nth-child(3) {
    order: 4;
    flex: 0 0 auto;
    text-align: left !important;
  }
  .allow-row:not(.allow-row-head) > span:nth-child(5) { display: none !important; }

  /* Prefix labels for the two numbers — left-aligned. */
  .allow-row:not(.allow-row-head) > span:nth-child(2)::before {
    content: "Allowance ";
    font-family: var(--sans);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-4);
    margin-right: 4px;
    font-weight: 400;
  }
  .allow-row:not(.allow-row-head) > span:nth-child(3)::before {
    content: "Selection ";
    font-family: var(--sans);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-4);
    margin-right: 4px;
    font-weight: 400;
  }

  /* Item name takes priority — bigger, wraps freely. */
  .allow-row .iname {
    font-size: 14.5px !important;
    font-weight: 500;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.3;
  }
  .allow-row .ihint { font-size: 10.5px !important; color: var(--ink-4) !important; }
  .allow-row .mono { font-size: 13px !important; }

  /* Status chip → small colored dot. */
  .allow-row .allow-chip {
    width: 12px !important;
    height: 12px !important;
    min-width: 12px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    font-size: 0 !important;
    color: transparent !important;
    border: 0 !important;
    background: var(--warning) !important;
  }
  .allow-row .allow-chip.ok { background: var(--success) !important; }
  .allow-row .allow-chip.warn,
  .allow-row .allow-chip.info { background: var(--warning) !important; }
  .allow-row .allow-chip.muted { background: var(--ink-4) !important; }

  /* ---- Budget — convert progress bars into thin underline strip ---- */
  /* Section headers (Pre-Construction, etc.): title row on top,
     2px underline bar below — indented so it starts where the title text
     starts (after the chevron). Same treatment as line items. */
  .scs-head {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
  }
  .scs-title {
    display: flex !important;
    align-items: center;
    gap: 10px !important;
    min-width: 0;
  }
  .scs-title h3 {
    font-size: 16px !important;
    line-height: 1.25;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    min-width: 0;
  }
  .scs-title .scs-count { font-size: 10.5px !important; flex-shrink: 0; }
  .scs-bar {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 10px !important;
    padding-left: 24px !important;   /* aligns with title text after chevron */
  }
  .scs-bar .bar {
    height: 2px !important;
    border-radius: 0 !important;
    flex: 1;
  }
  .scs-bar .bar .fill { border-radius: 0 !important; }
  .scs-nums { font-size: 11px !important; flex-shrink: 0; }
  .line-row {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-areas: "name nums"
                        "bar  bar"
                        "rem  rem" !important;
    gap: 4px 12px !important;
    padding: 12px 8px !important;
  }
  .line-row .lr-name { grid-area: name; min-width: 0; }
  .line-row .lr-nums { grid-area: nums; }
  .line-row .lr-bar { grid-area: bar; }
  .line-row .lr-bar .bar { height: 2px !important; border-radius: 0 !important; }
  .line-row .lr-rem { grid-area: rem; font-size: 11.5px !important; }

  /* Whole-project loan bar — keep it but shrink. */
  .budget-bar-card { padding: 14px !important; }
  .legend-row { flex-wrap: wrap; gap: 8px !important; font-size: 11px !important; }
  .stat-strip { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .stat-card { padding: 12px !important; }
  .stat-card .val { font-size: 18px !important; }

  /* ---- Draws list — collapse to vertical card per row ---- */
  .list-row.lr-draw {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 4px 12px !important;
    padding: 12px !important;
  }
  .list-row.lr-draw.head { display: none !important; }

  /* ---- Selection detail — bids become a horizontal swipe carousel ---- */
  .bids-list {
    display: flex !important;
    flex-direction: row !important;
    gap: 12px;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 4px;
    padding: 4px 4px 12px;
    margin: 0 -12px;       /* bleed past canvas padding for full-width feel */
    padding-left: 12px;
    padding-right: 12px;
  }
  .bids-list::-webkit-scrollbar { display: none; }
  .bids-list .bid-row {
    flex: 0 0 calc(100% - 24px);
    max-width: calc(100% - 24px);
    scroll-snap-align: start;
    scroll-snap-stop: always;
    width: auto !important;
  }
  /* When there's only one bid, no need for snap behavior */
  .bids-list .bid-row:only-child {
    flex: 1 1 100%;
    max-width: 100%;
  }
  /* Legacy fallbacks for any other naming */
  .bid-grid,
  .bids-row {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .bid-card { width: 100% !important; }

  /* ---- Tweaks panel — always docked bottom ---- */
  .tweaks-panel {
    inset: auto 0 0 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 70vh !important;
    border-radius: 14px 14px 0 0 !important;
  }

  /* ---- Hide builder-only chrome that wastes space ---- */
  .proj-switcher .proj-addr { display: none; }

  /* ---- Schedule TasksPanel ---- */
  .sch-tasks-add { flex-wrap: wrap; }
  .sch-tasks-add-due { width: 100%; }
  .sch-tasks-add .btn { flex: 1; }

  /* ---- Overview hero ---- */
  .grid-4 { grid-template-columns: 1fr 1fr !important; }
  .hero, .hero-grid {
    grid-template-columns: 1fr !important;
  }

  /* ---- Generic tables that aren't schedule ---- */
  table.responsive-stack { display: block; }

  /* ---- iOS safe-area padding ---- */
  .topbar { padding-top: calc(10px + env(safe-area-inset-top)) !important; }
  .canvas { padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important; }
  .sidebar { padding-top: calc(18px + env(safe-area-inset-top)) !important; }
}

/* =====================================================================
   <= 480px — extra-tight phones (iPhone SE etc.)
   ===================================================================== */
@media (max-width: 480px) {
  .topbar { padding: 8px 12px !important; }
  .topbar .breadcrumb { font-size: 13px; }
  .canvas { padding: 12px 10px 96px !important; }
  .documents-head .page-title,
  .tasks-head .page-title { font-size: 22px; }
  .grid-4 { grid-template-columns: 1fr 1fr !important; }
  .task-form-actions,
  .uc-form-actions {
    flex-direction: column-reverse;
    gap: 8px !important;
  }
  .task-form-actions .btn,
  .uc-form-actions .btn { width: 100%; justify-content: center; }
}

/* =====================================================================
   Landscape phones — keep mobile rules but allow Gantt to breathe.
   ===================================================================== */
@media (max-width: 900px) and (orientation: landscape) {
  .sch-gantt-wrap, .sch-gantt {
    overflow-x: auto !important;
    max-height: calc(100vh - 120px);
  }
}