@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --primary: #0284c7; --primary-dark: #0369a1; --primary-light: #e0f2fe;
  --success: #10b981; --warning: #f59e0b; --danger: #ef4444;
  --gray-50: #f9fafb; --gray-100: #f3f4f6; --gray-200: #e5e7eb;
  --gray-300: #d1d5db; --gray-400: #9ca3af; --gray-500: #6b7280;
  --gray-600: #4b5563; --gray-700: #374151; --gray-800: #1f2937; --gray-900: #111827;
  --bg: #fff; --bg-page: #f0f9ff;
  --radius: 10px; --radius-sm: 6px;
  --shadow: 0 1px 4px rgba(0,0,0,.07);
  --shadow-md: 0 4px 20px rgba(2,132,199,.1),0 2px 6px rgba(0,0,0,.06);
  --border-color: var(--gray-200);
}

body { font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color:var(--gray-800); background:var(--bg-page); line-height:1.5; min-height:100vh; -webkit-font-smoothing:antialiased; }
@media(max-width:767px){input,select,textarea{font-size:16px}}

/* Layout */
.app-layout { display:grid; grid-template-columns:auto 1fr; min-height:100vh; }
.main-col { display:flex; flex-direction:column; min-height:100vh; overflow:hidden; }

/* Sidebar */
.sidebar { width:220px; background:linear-gradient(180deg,#0c1a2e 0%,#0f2233 45%,#0d2b42 100%); color:#fff; display:flex; flex-direction:column; transition:width .2s ease; overflow:hidden; position:sticky; top:0; height:100vh; z-index:200; box-shadow:2px 0 20px rgba(0,0,0,.25); }
.sidebar.collapsed { width:60px; }
.sidebar-header { display:flex; align-items:center; gap:.75rem; padding:.75rem 1rem; height:56px; font-weight:700; font-size:1.05rem; white-space:nowrap; border-bottom:1px solid rgba(176,171,255,.15); background:rgba(0,0,0,.15); }
.sidebar-nav { flex:1; display:flex; flex-direction:column; gap:.2rem; padding:.75rem .625rem; }
.sidebar-section-label { font-size:.65rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:rgba(176,171,255,.45); padding:.625rem .75rem .25rem; white-space:nowrap; overflow:hidden; }
.sidebar-footer { border-top:1px solid rgba(176,171,255,.12); padding:.625rem; }
.sidebar-link { display:flex; align-items:center; gap:.75rem; padding:.6rem .75rem; border-radius:var(--radius); color:rgba(176,171,255,.75); text-decoration:none; font-size:.875rem; font-weight:500; white-space:nowrap; background:none; border:none; border-left:3px solid transparent; cursor:pointer; width:100%; font-family:inherit; transition:background .15s,color .15s; }
.sidebar-link:hover { background:rgba(176,171,255,.1); color:rgba(255,255,255,.95); }
.sidebar-link.active { background:rgba(176,171,255,.14); color:#fff; border-left-color:#38bdf8; font-weight:600; }
.sidebar-icon { flex-shrink:0; width:20px; height:20px; display:flex; align-items:center; justify-content:center; }
.sidebar-label { transition:opacity .2s ease; }
.sidebar.collapsed .sidebar-label { opacity:0; width:0; overflow:hidden; }
.sidebar-collapsed-only { display:none; }
.sidebar.collapsed .sidebar-collapsed-only { display:block; }

/* Header */
.header { display:flex; align-items:center; height:56px; padding:0 1.25rem; background:var(--bg); border-bottom:1px solid var(--gray-200); position:sticky; top:0; z-index:100; flex-shrink:0; gap:.5rem; }
.header-spacer { flex:1; }
.header-username { font-size:.85rem; color:var(--gray-600); font-weight:500; }
.page-content { flex:1; padding:1.5rem; }

.sidebar-toggle { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border:none; background:transparent; color:var(--gray-600); cursor:pointer; border-radius:var(--radius-sm); }
.sidebar-toggle:hover { background:var(--gray-100); color:var(--gray-800); }

.sidebar-user { display:flex; align-items:center; gap:.75rem; padding:.5rem .75rem; font-size:.8rem; font-weight:500; color:rgba(176,171,255,.55); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Login */
.login-page { min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),url('/assets/procure_bg.jpg') center/cover no-repeat; }
.login-panel { width:100%; max-width:420px; padding:1rem; }
.login-logo { text-align:center; margin-bottom:1.5rem; }
.login-logo-img { max-width:280px; height:auto; }
.login-card { background:#fff; border-radius:var(--radius); padding:2.5rem; box-shadow:0 20px 60px rgba(0,0,0,.4); }
.login-error { background:#fef2f2; border:1px solid #fecaca; border-radius:var(--radius-sm); padding:.625rem .875rem; color:#dc2626; font-size:.85rem; margin-bottom:1rem; }
.login-remember { margin-bottom:.75rem; }
.login-remember-label { display:flex; align-items:center; gap:.5rem; font-size:.85rem; color:var(--gray-600); cursor:pointer; user-select:none; }
.login-btn { width:100%; padding:.75rem; font-size:.95rem; margin-top:.5rem; }

/* Forms */
.form-group { margin-bottom:1rem; }
.form-label { display:block; font-size:.8rem; font-weight:600; color:var(--gray-700); margin-bottom:.375rem; text-transform:uppercase; letter-spacing:.04em; }
.form-input,.form-select,.form-textarea { width:100%; padding:.625rem .75rem; border:1.5px solid var(--gray-300); border-radius:var(--radius-sm); font-size:.9rem; font-family:inherit; color:var(--gray-800); background:var(--bg); transition:border-color .15s,box-shadow .15s; }
.form-input:focus,.form-select:focus,.form-textarea:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(2,132,199,.1); }
.form-textarea { resize:vertical; min-height:80px; }

/* Buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.375rem; padding:.625rem 1.25rem; border:none; border-radius:var(--radius-sm); font-size:.875rem; font-weight:600; cursor:pointer; transition:all .15s; font-family:inherit; }
.btn:disabled { opacity:.6; cursor:not-allowed; }
.btn-primary { background:var(--primary); color:#fff; }
.btn-primary:hover:not(:disabled) { background:var(--primary-dark); }
.btn-success { background:var(--success); color:#fff; }
.btn-success:hover:not(:disabled) { background:#059669; }
.btn-danger { background:var(--danger); color:#fff; }
.btn-danger:hover:not(:disabled) { background:#dc2626; }
.btn-warning { background:var(--warning); color:#fff; }
.btn-warning:hover:not(:disabled) { background:#d97706; }
.btn-ghost { background:var(--gray-100); color:var(--gray-700); border:1px solid var(--gray-300); }
.btn-ghost:hover:not(:disabled) { background:var(--gray-200); }
.btn-sm { padding:.375rem .75rem; font-size:.8rem; }

/* Tabs */
.tab-bar { display:flex; gap:.25rem; border-bottom:2px solid var(--gray-200); padding-bottom:0; }
.tab-btn { padding:.5rem 1rem; font-size:.875rem; font-weight:500; background:none; border:none;
    border-bottom:2px solid transparent; margin-bottom:-2px; color:var(--gray-500); cursor:pointer;
    transition:color .15s,border-color .15s; }
.tab-btn:hover { color:var(--gray-700); }
.tab-btn.active { color:var(--primary); border-bottom-color:var(--primary); }

/* Admin page */
.admin-panel { background:var(--gray-50); border:1px solid var(--gray-200); border-radius:var(--radius);
    padding:1.25rem 1.5rem; margin-bottom:1.5rem; }
.admin-panel-title { font-size:.9375rem; font-weight:600; color:var(--gray-700); margin-bottom:1rem; }
.admin-form-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:.875rem 1rem;
    margin-bottom:.75rem; }
.admin-checkbox { display:flex; align-items:center; gap:.4rem; font-size:.875rem; cursor:pointer;
    user-select:none; }
.row-muted td { opacity:.45; }

/* Cards */
.card { background:var(--bg); border-radius:var(--radius); border:1px solid var(--gray-200); box-shadow:var(--shadow); }
.card-header { display:flex; align-items:center; justify-content:space-between; padding:.875rem 1.25rem; border-bottom:1px solid var(--gray-200); }
.card-title { font-size:.9rem; font-weight:600; color:var(--gray-800); }
.card-body { padding:1.25rem; }

/* Page header */
.page-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.25rem; flex-wrap:wrap; gap:.75rem; }
.page-heading { font-size:1.35rem; font-weight:700; color:var(--gray-900); }

/* Filters */
.filters-bar { display:flex; gap:.75rem; margin-bottom:1rem; flex-wrap:wrap; align-items:center; }
.filter-select { padding:.5rem .75rem; border:1.5px solid var(--gray-300); border-radius:var(--radius-sm); font-size:.85rem; color:var(--gray-700); background:var(--bg); cursor:pointer; }

/* Table */
.table-wrap { background:var(--bg); border-radius:var(--radius); border:1px solid var(--gray-200); overflow:hidden; }
table { width:100%; border-collapse:collapse; font-size:.875rem; }
thead tr { background:var(--gray-50); border-bottom:1px solid var(--gray-200); }
th { padding:.625rem 1rem; text-align:left; font-size:.72rem; font-weight:700; color:var(--gray-500); text-transform:uppercase; letter-spacing:.06em; white-space:nowrap; }
td { padding:.75rem 1rem; border-bottom:1px solid var(--gray-100); color:var(--gray-700); }
tbody tr:last-child td { border-bottom:none; }
tbody tr:hover { background:var(--gray-50); }
.table-empty { padding:2.5rem; text-align:center; color:var(--gray-400); font-size:.9rem; }

/* Badges */
.badge { display:inline-flex; align-items:center; padding:.2rem .625rem; border-radius:999px; font-size:.72rem; font-weight:600; }
.badge-draft        { background:#f1f5f9; color:#475569; }           /* slate  — not yet submitted */
.badge-pending      { background:#fef9c3; color:#854d0e; }           /* yellow — waiting/assigned  */
.badge-hold         { background:#ffedd5; color:#c2410c; }           /* orange — on hold           */
.badge-approved     { background:#dcfce7; color:#15803d; }           /* green  — intermediate OK   */
.badge-declined     { background:#fee2e2; color:#dc2626; }           /* red    — declined          */
.badge-rejected     { background:#fce7f3; color:#be185d; }           /* rose   — rejected          */
.badge-ready        { background:#d1fae5; color:#065f46; }           /* emerald — ready for payment */
.badge-posted       { background:#dbeafe; color:#1e40af; }           /* blue   — posted to ERP     */
.badge-cancelled    { background:#e2e8f0; color:#64748b; }

/* Pagination */
.pagination { display:flex; align-items:center; justify-content:center; gap:.5rem; margin-top:1rem; }
.page-info { font-size:.8rem; color:var(--gray-500); padding:0 .5rem; }

/* Detail grid */
.detail-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:1rem; }
.detail-field label { font-size:.72rem; font-weight:700; color:var(--gray-500); text-transform:uppercase; letter-spacing:.05em; display:block; margin-bottom:.25rem; }
.detail-field span { font-size:.9rem; color:var(--gray-800); }

/* Actions */
.actions-bar { display:flex; gap:.625rem; flex-wrap:wrap; }

/* Doc list */
.doc-list { display:flex; flex-direction:column; gap:.5rem; }
.doc-item { display:flex; align-items:center; justify-content:space-between; padding:.625rem .875rem; background:var(--gray-50); border-radius:var(--radius-sm); font-size:.85rem; }
.doc-name { color:var(--gray-700); font-weight:500; }
.doc-date { color:var(--gray-500); font-size:.78rem; }

/* Upload zone */
.upload-zone { border:2px dashed var(--gray-300); border-radius:var(--radius); padding:2rem; text-align:center; cursor:pointer; transition:border-color .15s,background .15s; }
.upload-zone:hover { border-color:var(--primary); background:var(--primary-light); }
.upload-zone p { color:var(--gray-500); font-size:.875rem; margin-top:.375rem; }

/* History */
.history-list { display:flex; flex-direction:column; gap:.5rem; }
.history-item { display:flex; gap:1rem; font-size:.85rem; padding:.5rem 0; border-bottom:1px solid var(--gray-100); flex-wrap:wrap; }
.history-date { color:var(--gray-500); white-space:nowrap; }
.history-action { font-weight:600; color:var(--gray-800); }
.history-note { color:var(--gray-600); }

/* Lines table */
.lines-table th,.lines-table td { padding:.5rem .625rem; }
.lines-table input,.lines-table select { padding:.375rem .5rem; border:1px solid var(--gray-300); border-radius:4px; font-size:.85rem; font-family:inherit; }
.lines-table input:focus,.lines-table select:focus { outline:none; border-color:var(--primary); }
.line-remove { color:var(--danger); background:none; border:none; cursor:pointer; font-size:1.2rem; padding:.125rem .375rem; line-height:1; }

/* Typeahead combobox */
.typeahead-dropdown { position:fixed; z-index:9999; background:#fff; border:1.5px solid var(--gray-300); border-radius:var(--radius-sm); box-shadow:var(--shadow-md); min-width:260px; max-height:200px; overflow-y:auto; }
.typeahead-item { display:flex; gap:.5rem; padding:.375rem .75rem; cursor:pointer; font-size:.8rem; align-items:baseline; }
.typeahead-item:hover { background:var(--primary-light); }
.typeahead-code { font-weight:600; color:var(--gray-800); min-width:80px; flex-shrink:0; font-family:'Consolas','Menlo',monospace; }
.typeahead-desc { color:var(--gray-500); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Debug page */
.debug-layout { display:flex; flex-direction:column; gap:1rem; height:100%; }
.debug-query-panel { flex-shrink:0; }
.debug-sql-area { font-family:'Consolas','Menlo','Monaco',monospace; font-size:.85rem; resize:vertical; min-height:120px; }
.debug-results-panel { flex:1; display:flex; flex-direction:column; min-height:200px; }
.debug-results-body { flex:1; overflow:auto; }
.debug-table-wrap { overflow:auto; max-height:calc(100vh - 420px); min-height:120px; }
.debug-table-wrap table { white-space:nowrap; }
.debug-cell { font-family:'Consolas','Menlo','Monaco',monospace; font-size:.8rem; max-width:320px; overflow:hidden; text-overflow:ellipsis; }

/* Sync progress bar */
.sync-progress { height:4px; background:var(--gray-200); border-radius:2px; overflow:hidden; margin-bottom:.5rem; }
.sync-progress-bar { height:100%; width:40%; background:var(--primary); border-radius:2px; animation:sync-slide 1.4s ease-in-out infinite; }
@keyframes sync-slide { 0%{margin-left:-40%} 100%{margin-left:100%} }

/* Spinner */
.spinner { width:16px; height:16px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.loading-state { padding:3rem; text-align:center; color:var(--gray-400); }

/* Alerts */
.alert { padding:.75rem 1rem; border-radius:var(--radius-sm); font-size:.875rem; margin-bottom:1rem; }
.alert-success { background:#f0fdf4; border:1px solid #bbf7d0; color:#166534; }
.alert-error { background:#fef2f2; border:1px solid #fecaca; color:#dc2626; }
.alert-info { background:var(--primary-light); border:1px solid #bae6fd; color:var(--primary-dark); }
.alert-warning { background:#fffbeb; border:1px solid #fde68a; color:#92400e; }

/* Azure analysis */
.analysis-panel { background:var(--primary-light); border:1px solid #bae6fd; border-radius:var(--radius); padding:1.25rem; margin-top:1rem; }
.analysis-panel h4 { font-size:.85rem; font-weight:700; color:var(--primary-dark); margin-bottom:.75rem; display:flex; align-items:center; gap:.375rem; }
.analysis-field { display:flex; gap:.5rem; font-size:.85rem; margin-bottom:.375rem; }
.analysis-field label { color:var(--gray-500); min-width:120px; font-weight:500; }
.analysis-field span { color:var(--gray-800); font-weight:600; }

/* Back button */
.back-btn { display:inline-flex; align-items:center; gap:.375rem; background:none; border:none; color:var(--gray-500); font-size:.875rem; cursor:pointer; padding:.25rem 0; margin-bottom:1rem; font-family:inherit; }
.back-btn:hover { color:var(--gray-800); }

/* Note input */
.note-input-wrap { margin-bottom:.75rem; }

/* Invoice detail two-column layout
   Base rules MUST come before the media-query overrides so the media query wins. */
.invoice-layout { display:flex; gap:0; align-items:stretch; }
.invoice-main { flex:1; min-width:0; }

/* Hidden by default on narrow screens */
.doc-resize-handle {
  display:none;
  width:6px;
  background:var(--gray-200);
  cursor:col-resize;
  flex-shrink:0;
  transition:background .15s;
  user-select:none;
}
.doc-resize-handle:hover, .doc-resize-handle.dragging { background:var(--primary); }

.doc-panel {
  display:none;
  flex-direction:column;
  flex-shrink:0;
  background:var(--bg);
  border-left:1px solid var(--gray-200);
  overflow:hidden;
}

/* Wide screen: activate the panel — must come AFTER the display:none base rules */
@media (min-width:1024px) {
  .invoice-docs-card { display:none; }
  /* Push invoice content left of the fixed panel */
  .invoice-main { padding-right:var(--doc-panel-width, 40vw); }
  /* Resize grip — fixed, butts up against the panel's left edge */
  .doc-resize-handle {
    display:block;
    position:fixed;
    top:56px;
    right:var(--doc-panel-width, 40vw);
    height:calc(100vh - 56px);
    z-index:91;
  }
  /* Panel — fixed to the right side of the viewport */
  .doc-panel {
    display:flex;
    position:fixed;
    top:56px;
    right:0;
    height:calc(100vh - 56px);
    width:var(--doc-panel-width, 40vw);
    z-index:90;
    box-shadow:-2px 0 12px rgba(0,0,0,.06);
  }
}

.doc-panel-thumbs {
  display:flex;
  align-items:center;
  gap:.375rem;
  padding:.5rem .625rem;
  border-bottom:1px solid var(--gray-200);
  background:var(--gray-50);
  flex-shrink:0;
  overflow-x:auto;
  min-height:60px;
}

.doc-thumb {
  width:42px; height:52px;
  border-radius:var(--radius-sm);
  border:2px solid transparent;
  background:var(--gray-100);
  padding:0; font:inherit; appearance:none; -webkit-appearance:none;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  cursor:pointer; gap:2px;
  transition:border-color .15s, background .15s;
  flex-shrink:0;
}
.doc-thumb:hover { background:var(--primary-light); border-color:var(--primary); }
.doc-thumb.selected { border-color:var(--primary); background:var(--primary-light); }
.doc-thumb-label {
  font-size:.52rem; color:var(--gray-500); line-height:1.1;
  max-width:38px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  text-align:center; padding:0 2px;
}

.doc-panel-preview {
  flex:1;
  min-height:0;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--gray-100);
}
.doc-panel-preview img { max-width:100%; max-height:100%; object-fit:contain; display:block; }
.doc-panel-preview iframe { width:100%; height:100%; border:none; display:block; min-height:0; }

.doc-panel-toolbar {
  flex-shrink:0;
  display:flex;
  align-items:center;
  gap:.375rem;
  padding:.375rem .625rem;
  border-top:1px solid var(--gray-200);
  background:var(--gray-50);
  min-height:44px;
}

/* Highlight legend strip */
.highlight-legend {
  display:flex;
  flex-wrap:wrap;
  gap:.25rem .5rem;
  padding:.3rem .625rem;
  background:var(--gray-50);
  border-top:1px solid var(--gray-200);
  flex-shrink:0;
}
.highlight-legend-item {
  display:inline-flex;
  align-items:center;
  gap:.25rem;
  font-size:.65rem;
  color:var(--gray-600);
  white-space:nowrap;
}

/* AI Extracted Fields panel */
.doc-panel-analysis {
  flex-shrink:0;
  border-top:1px solid var(--gray-200);
  background:var(--bg);
}
.doc-panel-analysis-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  padding:.3rem .625rem;
  background:none;
  border:none;
  cursor:pointer;
  font:inherit;
  font-size:.7rem;
  font-weight:600;
  color:var(--gray-500);
  text-transform:uppercase;
  letter-spacing:.04em;
  text-align:left;
  background:var(--gray-50);
}
.doc-panel-analysis-header:hover { background:var(--gray-100); }
.doc-panel-analysis-body {
  max-height:210px;
  overflow-y:auto;
  padding:.25rem .625rem .5rem;
}
.analysis-row {
  display:flex;
  gap:.5rem;
  align-items:baseline;
  padding:.18rem 0;
  font-size:.78rem;
  border-bottom:1px solid var(--gray-100);
}
.analysis-row:last-child { border-bottom:none; }
.analysis-label {
  flex-shrink:0;
  width:66px;
  font-size:.7rem;
  color:var(--gray-500);
}
.analysis-value {
  color:var(--gray-800);
  font-size:.78rem;
  word-break:break-word;
  min-width:0;
}
.analysis-items {
  padding:.2rem 0 0;
}
.analysis-item-row {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:.5rem;
  padding:.18rem .3rem;
  font-size:.75rem;
  color:var(--gray-700);
  background:var(--gray-50);
  border-radius:3px;
  margin-bottom:.15rem;
}
.analysis-item-row span:last-child { font-weight:600; flex-shrink:0; }

/* Upload modal */
.modal-backdrop {
  position:fixed; inset:0;
  background:rgba(0,0,0,.5);
  z-index:8000;
  display:flex; align-items:center; justify-content:center;
}
.modal-panel {
  background:var(--bg);
  border-radius:var(--radius);
  box-shadow:0 20px 60px rgba(0,0,0,.3);
  width:90%; max-width:480px;
  overflow:hidden;
}
.modal-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:.875rem 1.25rem;
  border-bottom:1px solid var(--gray-200);
  font-weight:600; font-size:.95rem;
}
.modal-body { padding:1.25rem; }
.modal-close {
  background:none; border:none; cursor:pointer;
  font-size:1.25rem; color:var(--gray-400); line-height:1; padding:.25rem;
}
.modal-close:hover { color:var(--gray-700); }

.drop-zone {
  border:2px dashed var(--gray-300);
  border-radius:var(--radius);
  padding:2.5rem 1.5rem;
  text-align:center;
  transition:border-color .15s, background .15s;
  min-height:160px;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:.375rem;
}
.drop-zone.drag-over { border-color:var(--primary); background:var(--primary-light); }
.drop-zone-text { color:var(--gray-500); font-size:.875rem; }

/* Fullscreen overlay */
.doc-fullscreen {
  position:fixed; inset:0;
  background:rgba(0,0,0,.92);
  z-index:9000;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
}
.doc-fullscreen-close {
  position:absolute; top:1rem; right:1rem;
  background:rgba(255,255,255,.15); border:none; border-radius:50%;
  width:40px; height:40px; font-size:1.2rem; color:#fff;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .15s;
}
.doc-fullscreen-close:hover { background:rgba(255,255,255,.3); }

/* Mobile top bar (hamburger header) */
.mobile-topbar {
  display:none;
}
.mobile-topbar-btn {
  background:none; border:none; cursor:pointer; padding:.5rem;
  display:flex; align-items:center; border-radius:var(--radius-sm);
  color:rgba(176,171,255,.85);
}
.mobile-topbar-btn:hover { background:rgba(176,171,255,.12); }

/* Sidebar close button — hidden on desktop */
.sidebar-close-btn {
  display:none; align-items:center; justify-content:center;
  background:none; border:none; cursor:pointer; padding:.375rem;
  color:rgba(176,171,255,.7); border-radius:var(--radius-sm); flex-shrink:0;
}
.sidebar-close-btn:hover { background:rgba(176,171,255,.15); color:#fff; }

/* Backdrop when mobile drawer is open */
.sidebar-backdrop {
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:199;
}

/* Responsive */
@media(max-width:768px) {
  .mobile-topbar {
    display:flex; align-items:center; justify-content:space-between;
    height:56px; padding:0 1rem; flex-shrink:0;
    background:linear-gradient(90deg,#0c1a2e,#0f2233);
    position:sticky; top:0; z-index:150;
    box-shadow:0 2px 8px rgba(0,0,0,.25);
  }
  .sidebar {
    position:fixed; left:0; top:0; height:100vh; width:280px;
    transform:translateX(-100%); transition:transform .25s ease;
    z-index:200;
  }
  .sidebar.open { transform:translateX(0); }
  /* When open on mobile, always show full labels regardless of collapsed state */
  .sidebar.open .sidebar-label { opacity:1 !important; width:auto !important; overflow:visible !important; }
  .sidebar.open .sidebar-collapsed-only { display:none !important; }
  .sidebar-close-btn { display:flex; }
  .sidebar-backdrop { display:block; }
  .header .sidebar-toggle { display:none; }
  .header { display:none; }
  .app-layout { grid-template-columns:1fr; }
  .page-content { padding:1rem; }
}

/* Lines table wrapper */
.lines-table-wrap { overflow-x:auto; }

/* Mobile: responsive lines table — stack rows as cards */
@media (max-width:640px) {
  .lines-table-wrap { overflow-x:visible; }
  .lines-table-responsive { width:100%; }
  .lines-table-responsive thead { display:none; }
  .lines-table-responsive tbody tr {
    display:block;
    border:1px solid var(--gray-200);
    border-radius:var(--radius-sm);
    margin-bottom:.5rem;
    padding:.375rem .5rem;
    background:var(--bg);
  }
  .lines-table-responsive tbody td {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:.2rem .25rem;
    border:none;
    font-size:.85rem;
  }
  .lines-table-responsive tbody td[data-label]:not([data-label=""]):before {
    content: attr(data-label);
    font-size:.7rem;
    font-weight:700;
    color:var(--gray-500);
    text-transform:uppercase;
    letter-spacing:.04em;
    flex-shrink:0;
    margin-right:.5rem;
    min-width:72px;
  }
  .lines-table-responsive tbody td[data-label=""] { display:inline-flex; width:auto; }
  .lines-table-responsive input, .lines-table-responsive select {
    max-width:150px;
  }
  .invoice-main { padding-right:0 !important; }
}

/* Edit form detail-field inputs */
.detail-field input.form-input,
.detail-field select.form-select {
  font-size:.875rem;
}

/* Invoice list table — mobile card layout */
@media (max-width:640px) {
  /* Filter panel: taller allowance + single column on narrow screens */
  .filter-panel-inner {
    grid-template-columns:1fr !important;
  }

  .invoice-table { width:100%; }
  .invoice-table thead { display:none; }
  .invoice-table tbody { display:flex; flex-direction:column; gap:.5rem; padding:.5rem; }
  .invoice-table tbody tr {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:.2rem .75rem;
    padding:.75rem 1rem;
    border:1px solid var(--gray-200);
    border-radius:var(--radius);
    background:var(--bg);
    box-shadow:0 1px 3px rgba(0,0,0,.06);
  }
  .invoice-table tbody td {
    padding:0;
    border:none;
    display:flex;
    flex-direction:column;
    font-size:.875rem;
  }
  .invoice-table tbody td[data-label]:not([data-label=""]):before {
    content:attr(data-label);
    font-size:.65rem;
    font-weight:700;
    color:var(--gray-400);
    text-transform:uppercase;
    letter-spacing:.05em;
    margin-bottom:2px;
  }
  .invoice-table tbody td[data-label=""] { flex-direction:row; align-items:center; }
  .invoice-table tbody td:last-child { grid-column:1/-1; margin-top:.25rem; }
  /* Status spans full row */
  .invoice-table tbody td[data-label="Status"] { grid-column:1/-1; flex-direction:row; gap:.5rem; align-items:center; }

  /* Strip table-wrap border/clip on mobile so cards show properly */
  .table-wrap { background:transparent; border:none; border-radius:0; overflow:visible; }

  /* Detail view — page header stacks cleanly */
  .page-header { flex-direction:column; align-items:stretch; gap:.625rem; }

  /* Detail form — single column so labels/inputs aren't cramped */
  .detail-grid { grid-template-columns:1fr !important; }
  .card { margin-bottom:.75rem; }
}