:root {
  --bg: #111827; --bg-2: #1a2333; --panel: #ffffff; --panel-alt: #f6f7fb; --border: #e5e7eb; --border-light: #f0f1f4;
  --text: #1f2430; --muted: #6b7280; --primary: #4f46e5; --primary-dark: #4338ca; --primary-light: #eef2ff;
  --danger: #dc2626; --success: #059669; --warn: #d97706;
  --sidebar-w: 198px;
  --shadow-sm: 0 1px 2px rgba(16,24,40,.06);
  --shadow-md: 0 4px 12px rgba(16,24,40,.08);
  --shadow-lg: 0 16px 40px rgba(16,24,40,.16);
  --radius: 10px;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--text); background: var(--panel-alt); font-size: 14px; -webkit-font-smoothing: antialiased; }

/* ---------- Scrollbars — the default OS/Chromium scrollbar (thick, grey,
   square) looks out of place against this UI, especially in the standalone
   desktop app where it's the only "system chrome" visible. Slim it down
   and theme it to match instead. ---------- */
* { scrollbar-width: thin; scrollbar-color: #c7cbd4 transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c7cbd4; border-radius: 20px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: #a6acb9; background-clip: padding-box; }
.sidebar ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); }
.sidebar ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.3); }
.sidebar { scrollbar-color: rgba(255,255,255,.18) transparent; }
h1, h2, h3 { margin: 0 0 8px 0; letter-spacing: -.01em; }
button { cursor: pointer; font-family: inherit; }
input, select, textarea { font-family: inherit; font-size: 14px; }
a { color: var(--primary); }
::selection { background: var(--primary-light); }

/* ---------- Login ---------- */
.login-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 20% 20%, #2a3560 0%, #111827 55%, #0b0f19 100%); }
.login-box { background: white; padding: 44px 40px; border-radius: 16px; width: 360px; box-shadow: var(--shadow-lg); border: 1px solid rgba(255,255,255,.06); }
.login-box h1 { font-size: 23px; font-weight: 800; color: var(--text); display: flex; align-items: center; gap: 8px; }
.login-box .muted { color: var(--muted); margin-top: 2px; margin-bottom: 22px; font-size: 13.5px; }
.login-box label { display: block; font-size: 12px; color: var(--muted); margin: 14px 0 5px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.login-box input { width: 100%; padding: 11px 12px; border: 1.5px solid var(--border); border-radius: 8px; transition: border-color .15s, box-shadow .15s; }
.login-box input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }
.login-box button { width: 100%; margin-top: 22px; padding: 12px; background: var(--primary); color: white; border: none; border-radius: 8px; font-weight: 700; font-size: 14px; box-shadow: var(--shadow-sm); transition: background .15s, transform .1s; }
.login-box button:hover { background: var(--primary-dark); }
.login-box button:active { transform: scale(.99); }
.login-box .hint { text-align: center; color: var(--muted); font-size: 12px; margin-top: 16px; }
.error-msg { background: #fef2f2; color: var(--danger); padding: 9px 12px; border-radius: 8px; font-size: 13px; margin-bottom: 10px; border: 1px solid #fecaca; }

/* ---------- App shell ---------- */
.app { display: flex; min-height: 100vh; }
.sidebar { width: var(--sidebar-w); background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%); color: #cbd5e1; flex-shrink: 0; display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; box-shadow: var(--shadow-md); z-index: 10; }
.sidebar .brand { padding: 16px 18px; font-weight: 800; font-size: 15px; color: white; letter-spacing: -.01em; display: flex; align-items: center; gap: 7px; border-bottom: 1px solid rgba(255,255,255,.06); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 10px 8px; }
.nav-group { padding: 12px 10px 4px; font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: #64748b; font-weight: 700; }
.nav-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; color: #b6bfd1; text-decoration: none; cursor: pointer; font-size: 13px; border-radius: 6px; margin: 1px 0; transition: background .12s, color .12s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-item:hover { background: rgba(255,255,255,.06); color: white; }
.nav-item.active { background: var(--primary); color: white; font-weight: 600; box-shadow: var(--shadow-sm); }
.sidebar-footer { padding: 10px 14px; border-top: 1px solid rgba(255,255,255,.06); }
#user-chip { font-size: 13px; margin-bottom: 8px; color: white; font-weight: 600; }
.link-btn { background: none; border: none; color: #94a3b8; padding: 0; font-size: 12.5px; }
.link-btn:hover { color: white; text-decoration: underline; }

.content { margin-left: var(--sidebar-w); flex: 1; display: flex; flex-direction: column; min-height: 100vh; min-width: 0; max-width: 100vw; overflow-x: hidden; }
.topbar { background: rgba(255,255,255,.85); backdrop-filter: saturate(180%) blur(8px); border-bottom: 1px solid var(--border); padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 5; gap: 10px; flex-wrap: wrap; }
.topbar #page-title { font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.view { padding: 20px 24px; flex: 1; width: 100%; min-width: 0; box-sizing: border-box; }

/* Any flex/grid container can be forced wider than its parent by an
   oversized child (this was the actual cause of the whole app needing a
   horizontal scrollbar — a wide Kanban board or table would blow out its
   .panel/.view ancestors instead of scrolling within itself). min-width: 0
   lets flex/grid children actually shrink and respect their container. */
.panel, .form-grid, .stat-grid, .toolbar { min-width: 0; }

/* ---------- Buttons ---------- */
.btn { background: white; border: 1px solid var(--border); padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--text); transition: background .12s, border-color .12s, box-shadow .12s; box-shadow: var(--shadow-sm); }
.btn:hover { background: var(--panel-alt); border-color: #d1d5db; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: white; }
.btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.btn-danger { background: white; border-color: var(--danger); color: var(--danger); }
.btn-danger:hover { background: #fef2f2; }
.btn-sm { padding: 5px 10px; font-size: 12px; box-shadow: none; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Cards / stats ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin-bottom: 24px; }
.stat-card { background: white; border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow-sm); transition: box-shadow .15s, transform .15s; }
.stat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.stat-card .label { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.stat-card .value { font-size: 25px; font-weight: 800; margin-top: 6px; letter-spacing: -.01em; }
.stat-card.warn .value { color: var(--warn); }
.stat-card.danger .value { color: var(--danger); }

.panel { background: white; border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; margin-bottom: 20px; box-shadow: var(--shadow-sm); }
.panel h3 { font-size: 15px; font-weight: 700; }

/* ---------- Toolbar / search ---------- */
.toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; gap: 10px; flex-wrap: wrap; }
.search-box { padding: 9px 13px; border: 1.5px solid var(--border); border-radius: 8px; min-width: 240px; transition: border-color .15s, box-shadow .15s; }
.search-box:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }

/* ---------- Table ---------- */
table { width: 100%; border-collapse: collapse; background: white; }
table.data-table { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--border-light); font-size: 13px; }
th { background: var(--panel-alt); font-weight: 700; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: #fafbfe; }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: white; box-shadow: var(--shadow-sm); }
.table-wrap table { border: none; }
.badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; letter-spacing: .01em; }
.badge-green { background: #dcfce7; color: #166534; }
.badge-red { background: #fee2e2; color: #991b1b; }
.badge-amber { background: #fef3c7; color: #92400e; }
.badge-gray { background: #f1f5f9; color: #475569; }
.badge-blue { background: #dbeafe; color: #1e40af; }
.muted { color: var(--muted); }
.right { text-align: right; }
.empty-row td { text-align: center; color: var(--muted); padding: 40px; font-size: 13.5px; }

/* ---------- Modal ---------- */
.modal-overlay { position: fixed; inset: 0; background: rgba(17,24,39,.55); display: flex; align-items: flex-start; justify-content: center; z-index: 100; overflow-y: auto; padding: 40px 16px; backdrop-filter: blur(2px); }
.modal { background: white; border-radius: 14px; width: 100%; max-width: 640px; box-shadow: var(--shadow-lg); }
.modal.modal-wide { max-width: 920px; }
.modal-header { padding: 18px 24px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.modal-header h3 { margin: 0; font-weight: 700; }
.modal-body { padding: 22px 24px; max-height: 70vh; overflow-y: auto; }
.modal-footer { padding: 16px 24px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; }
.close-x { border: none; background: none; font-size: 20px; color: var(--muted); border-radius: 6px; padding: 2px 6px; }
.close-x:hover { background: var(--panel-alt); color: var(--text); }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid.single { grid-template-columns: 1fr; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field.span2 { grid-column: 1 / -1; }
.field label { font-size: 12px; font-weight: 600; color: var(--muted); }
.field input, .field select, .field textarea { padding: 9px 11px; border: 1.5px solid var(--border); border-radius: 7px; width: 100%; transition: border-color .15s, box-shadow .15s; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }
.field textarea { min-height: 60px; resize: vertical; }
.checkbox-field { flex-direction: row; align-items: center; gap: 8px; }
.checkbox-field input { width: auto; }

/* ---------- Line item editor ---------- */
.line-items { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; margin-top: 6px; }
.line-items table { width: 100%; }
.line-items input, .line-items select { padding: 6px 8px; border: 1px solid var(--border); border-radius: 5px; width: 100%; font-size: 12.5px; }
.totals-box { margin-top: 10px; text-align: right; font-size: 13px; }
.totals-box .grand { font-size: 17px; font-weight: 700; }

/* ---------- Bulk (Excel-style) item grid ---------- */
.bulk-grid { min-width: 700px; }
.bulk-grid th { padding: 6px 8px; text-align: left; font-size: 12px; white-space: nowrap; background: var(--bg-subtle, #f7f7f8); }
.bulk-grid td { padding: 2px; }
.bulk-grid input, .bulk-grid select { padding: 6px 8px; border: 1px solid var(--border); border-radius: 5px; width: 100%; font-size: 12.5px; }
.bulk-grid input.bg-qty, .bulk-grid input.bg-price, .bulk-grid input.bg-disc, .bulk-grid input.bg-gst { text-align: right; }
.bulk-grid td.bg-total { white-space: nowrap; padding: 2px 8px; }

/* ---------- Toast ---------- */
#toast-root { position: fixed; bottom: 20px; right: 20px; z-index: 200; display: flex; flex-direction: column; gap: 8px; }
.toast { background: #1e293b; color: white; padding: 10px 16px; border-radius: 8px; font-size: 13px; box-shadow: 0 6px 20px rgba(0,0,0,.25); max-width: 320px; }
.toast.error { background: var(--danger); }
.toast.success { background: var(--success); }

/* ---------- Tabs ---------- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.tab { padding: 9px 16px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; }
.tab.active { color: var(--primary); border-bottom-color: var(--primary); }

.attach-list { list-style: none; padding: 0; margin: 0; }
.attach-list li { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.attach-list li:last-child { border-bottom: none; }
.drop-zone { border: 2px dashed var(--border); border-radius: 8px; padding: 20px; text-align: center; color: var(--muted); font-size: 13px; margin-top: 10px; }

.sidebar-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, .45);
  z-index: 40;
}
.sidebar-backdrop.open { display: block; }

/* ---------- File viewer (right-side slide-in panel) ---------- */
.file-viewer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 45%; min-width: 340px; max-width: 720px;
  background: white;
  box-shadow: -8px 0 24px rgba(0,0,0,.2);
  z-index: 200;
  display: none;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .2s ease;
}
.file-viewer.open { display: flex; transform: translateX(0); }
.file-viewer-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
}
.file-viewer-header .fv-title { font-weight: 600; font-size: 13px; word-break: break-all; }
.file-viewer-body { flex: 1; overflow: auto; background: #525659; display: flex; align-items: center; justify-content: center; }
.file-viewer-body iframe, .file-viewer-body img { width: 100%; height: 100%; border: none; object-fit: contain; }
.file-viewer-body .fv-fallback { color: white; text-align: center; padding: 30px; font-size: 13px; }

@media (max-width: 820px) {
  .file-viewer { width: 100%; min-width: 0; max-width: none; }
}

/* ---------- Attachments panel ---------- */
.attachments-panel { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 12px; }
.attachments-panel h4 { margin: 0 0 8px 0; font-size: 13px; }
.attach-row { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 12.5px; gap: 8px; }
.comments-panel { margin-top: 14px; }
.comments-panel h4 { margin-bottom: 8px; }
.cm-body { font-size: 13px; line-height: 1.5; }
.cm-body img { max-width: 100%; max-height: 320px; border-radius: 6px; margin: 4px 0; }
.cm-body p { margin: 0 0 4px; }
.ql-editor { min-height: 70px; font-size: 13px; }
.attach-row .af-name { flex: 1; word-break: break-all; }
.attach-row .af-actions { display: flex; gap: 4px; flex-shrink: 0; }
.attach-upload-row { display: flex; gap: 6px; margin-top: 10px; align-items: center; flex-wrap: wrap; }
.attach-upload-row input[type="file"] { font-size: 12px; }
.attach-upload-row input[type="text"] { flex: 1; min-width: 120px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 5px; font-size: 12px; }

/* ---------- Bottom nav (mobile only — thumb-reachable primary nav,
   replaces relying on the drawer sidebar for everyday navigation) ---------- */
.bottom-nav { display: none; }

@media (max-width: 820px) {
  .sidebar {
    position: fixed; top: 0; bottom: 0; left: 0;
    transform: translateX(-100%);
    transition: transform .22s ease;
    z-index: 50;
    width: 82vw; max-width: 300px;
    box-shadow: 4px 0 24px rgba(0,0,0,.25);
  }
  .sidebar.open { transform: translateX(0); }
  .content { margin-left: 0; padding-bottom: 64px; } /* room for bottom nav */
  .form-grid { grid-template-columns: 1fr; }

  /* Bigger touch targets */
  .btn, .nav-item, .tab { min-height: 40px; display: inline-flex; align-items: center; }
  .nav-item { padding: 11px 18px; font-size: 14px; }
  th, td { padding: 12px 10px; font-size: 13px; }
  input, select, textarea, .field input, .field select, .field textarea { font-size: 16px; padding: 10px; } /* 16px avoids iOS/Android zoom-on-focus */
  .modal-content, .panel { padding: 14px; }
  #mobile-nav-btn { display: none !important; } /* replaced by the bottom nav's "More" button */
  .topbar { padding: 12px 16px; }
  .view { padding: 14px; }

  .bottom-nav {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0;
    background: white; border-top: 1px solid var(--border);
    z-index: 45;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .bn-item {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; padding: 7px 2px 8px; text-decoration: none; color: var(--muted);
    font-size: 10.5px; font-weight: 600; border: none; background: none; font-family: inherit;
  }
  .bn-icon { font-size: 19px; line-height: 1; }
  .bn-item.active { color: var(--primary); }

  /* Responsive tables: stacked cards instead of horizontal scrolling,
     like the ERPNext mobile list view. Applies to any .table-wrap table
     whose rows have been labeled by responsivizeTables() in app.js. */
  .table-wrap { overflow-x: visible; border: none; background: none; }
  .table-wrap table.rtable-cards { border: none; }
  .table-wrap table.rtable-cards thead { display: none; }
  .table-wrap table.rtable-cards, .table-wrap table.rtable-cards tbody { display: block; width: 100%; }
  .table-wrap table.rtable-cards tr {
    display: block; background: white; border: 1px solid var(--border);
    border-radius: 10px; margin-bottom: 10px; padding: 10px 12px;
  }
  .table-wrap table.rtable-cards tr:hover { background: white; }
  .table-wrap table.rtable-cards td {
    display: flex; justify-content: space-between; align-items: center;
    gap: 10px; padding: 6px 0; border: none; text-align: right;
    border-bottom: 1px solid var(--border-light, #f0f1f3);
  }
  .table-wrap table.rtable-cards td:last-child { border-bottom: none; }
  .table-wrap table.rtable-cards td::before {
    content: attr(data-label); font-weight: 600; color: var(--muted);
    text-align: left; font-size: 12px; flex-shrink: 0;
  }
  /* Only hide cells that are truly empty (no content at all) — NOT cells
     that merely have no column header text. The row-actions column (View /
     Edit / Open buttons) has an empty <th></th> by design, which gave it an
     empty data-label and made it match the old, broader selector below —
     silently deleting every action button from every list on mobile. That
     was the real cause of "can't tap anything" on phones/tablets across the
     whole app, not a one-off Opportunities bug. */
  .table-wrap table.rtable-cards td:empty { display: none; }
  /* Checkbox / bulk-select column: show inline instead of as a labeled row */
  .table-wrap table.rtable-cards td.bulk-col {
    justify-content: flex-start; border-bottom: 1px solid var(--border);
    margin-bottom: 4px; padding-bottom: 8px;
  }
  .table-wrap table.rtable-cards td.bulk-col::before { display: none; }
}

@media (min-width: 821px) {
  .bottom-nav { display: none !important; }
}

/* NOTE: a previous change here forced the mobile drawer layout at all times
   inside the Android app, including landscape/rotated orientation. That was
   a misread of the original request — rotating to landscape showing the
   full desktop-style layout (sidebar always visible, no hamburger needed)
   was the behavior that worked correctly. Reverted: layout now goes back to
   switching purely on viewport width via the max-width: 820px media queries
   above, so landscape (wide viewport) shows the full layout again, and
   portrait (narrow viewport) shows the hamburger/drawer, exactly as before. */

/* ---------- Kanban ---------- */
.kanban-board { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 10px; }
.kanban-col { background: var(--panel-alt); border-radius: var(--radius); min-width: 260px; max-width: 260px; padding: 10px; flex-shrink: 0; }
.kanban-col-header { font-weight: 700; font-size: 13px; margin-bottom: 8px; display: flex; justify-content: space-between; }
.kanban-card { background: white; border: 1px solid var(--border); border-radius: 8px; padding: 10px; margin-bottom: 8px; font-size: 12.5px; cursor: pointer; box-shadow: var(--shadow-sm); transition: box-shadow .15s, border-color .15s; }
.kanban-card:hover { border-color: var(--primary); box-shadow: var(--shadow-md); }
.kanban-card .kc-title { font-weight: 600; margin-bottom: 4px; }
.kanban-card .kc-meta { color: var(--muted); font-size: 11px; }

/* ---------- Connect screen tweaks ---------- */
.login-box .hint a { color: var(--primary); }

/* ---------- misc ---------- */
.pill-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.json-block { background: #0f172a; color: #cbd5e1; padding: 12px; border-radius: 8px; font-size: 12px; overflow-x: auto; white-space: pre-wrap; word-break: break-all; }