/* Mula Tide CRM v1.0 - Shared Styles
   Design System: Orchid Glass UI (Mula Tide Edition)
   Brand Accent: #B8956A (Gold/Tan — matches invoice headers)
*/

/* ============================================
   CSS VARIABLES - DESIGN TOKENS
   ============================================ */
:root {
  --nightshade: #0a1628;
  --sage-leaf: #6B7C5C;
  --honeyed-amber: #B8956A;
  --crimson-clay: #1a2a3a;
  --herbal-ice: #C0C6CB;

  --bg-primary: var(--nightshade);
  --bg-card: var(--crimson-clay);
  --text-primary: var(--herbal-ice);
  --text-muted: rgba(192, 198, 203, 0.6);
  --text-label: rgba(192, 198, 203, 0.4);
  --accent-primary: var(--honeyed-amber);
  --accent: var(--honeyed-amber);        /* alias for --accent-primary */
  --accent-secondary: var(--sage-leaf);
  --border-subtle: rgba(192, 198, 203, 0.1);
  --border-hover: rgba(192, 198, 203, 0.2);

  --success: #10b981;
  --success-bg: rgba(16, 185, 129, 0.1);
  --success-border: rgba(16, 185, 129, 0.2);
  --warning: #f59e0b;
  --warning-bg: rgba(245, 158, 11, 0.1);
  --warning-border: rgba(245, 158, 11, 0.2);
  --danger: #ef4444;
  --danger-bg: rgba(239, 68, 68, 0.1);
  --danger-border: rgba(239, 68, 68, 0.2);
  --info: #3b82f6;
  --info-bg: rgba(59, 130, 246, 0.1);
  --info-border: rgba(59, 130, 246, 0.2);

  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-full: 9999px;

  --shadow-glass: 0 8px 32px rgba(0,0,0,0.37), inset 0 0 0 1px rgba(192,198,203,0.05);
  --shadow-glow-amber: 0 0 15px rgba(184,149,106,0.4);
  --shadow-glow-sage: 0 0 15px rgba(107,124,92,0.4);
  --shadow-button: 0 4px 14px rgba(0,0,0,0.25);

  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;
}

/* ============================================
   RESET & BASE
   ============================================ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html { font-size:16px; -webkit-font-smoothing:antialiased; }

body {
  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background: linear-gradient(135deg,var(--nightshade) 0%,var(--crimson-clay) 100%);
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 100vh;
  font-size: 0.9375rem;
}

a { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; border:none; background:none; }
input,select,textarea { font-family:inherit; font-size:inherit; }
table { border-collapse:collapse; width:100%; }

/* ============================================
   LAYOUT
   ============================================ */
.app-container { min-height:100vh; display:flex; flex-direction:column; overflow-x:clip; }

.main-content {
  flex:1; padding:var(--space-xl);
  max-width:1600px; margin:0 auto; width:100%;
}

.page-grid { display:grid; gap:var(--space-xl); }
.page-grid.two-column { grid-template-columns: 1fr 380px; }
.page-grid.three-column { grid-template-columns: repeat(3,1fr); }

@media (max-width:1200px) {
  .page-grid.two-column { grid-template-columns:1fr; }
}
@media (max-width:768px) {
  .main-content { padding:var(--space-md); }
  .page-grid.three-column { grid-template-columns:1fr; }
  .glass-header { padding:var(--space-sm) var(--space-md); }
}

/* ============================================
   GLASS HEADER
   ============================================ */
.glass-header {
  background: rgba(13,35,64,0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-subtle);
  position: sticky; top:0; z-index:100;
  padding: var(--space-md) var(--space-xl);
}

.header-inner {
  max-width:1600px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-lg);
}

.brand { display:flex; flex-direction:column; gap:2px; }
.brand-logo { height:36px; width:auto; object-fit:contain; }
.brand-title { font-size:1.1rem; font-weight:700; letter-spacing:-0.02em; color:var(--text-primary); display:flex; align-items:center; gap:var(--space-sm); }
.brand-version { color:var(--accent-primary); font-family:'SF Mono','Fira Code',monospace; font-size:0.75rem; margin-left:var(--space-sm); }
.brand-subtitle { font-size:10px; text-transform:uppercase; letter-spacing:0.2em; color:var(--text-label); font-weight:500; }

/* ============================================
   NAVIGATION - PILL TABS
   ============================================ */
.nav-pills {
  display:flex; align-items:center; gap:4px;
  background:rgba(13,35,64,0.4); padding:4px;
  border-radius:var(--radius-full);
  border:1px solid rgba(192,198,203,0.05);
}

.nav-pill {
  padding:0.5rem 1rem; border-radius:var(--radius-full);
  font-size:0.875rem; font-weight:500;
  color:var(--text-muted); transition:all var(--transition-slow); white-space:nowrap;
}
button.nav-pill { background:transparent; border:none; cursor:pointer; font:inherit; }
button.nav-pill:disabled { opacity:0.6; cursor:not-allowed; }
.nav-pill:hover { color:var(--text-primary); background:rgba(192,198,203,0.05); }
.nav-pill.active { background:var(--accent-primary); color:var(--crimson-clay); box-shadow:var(--shadow-glow-amber); }

.nav-mobile-toggle { display:none; padding:var(--space-sm); color:var(--text-primary); }
.nav-mobile-toggle svg { width:24px; height:24px; }

@media (max-width:1024px) {
  .nav-pills { display:none; }
  .nav-pills.show {
    display:flex; flex-direction:column;
    position:absolute; top:100%; left:0; right:0;
    background:rgba(13,35,64,0.95); backdrop-filter:blur(16px);
    padding:var(--space-md); border-radius:0; border:none;
    border-bottom:1px solid var(--border-subtle);
  }
  .nav-mobile-toggle { display:flex; }
}

.header-actions { display:flex; align-items:center; gap:var(--space-md); }

/* ============================================
   GLASS CARD
   ============================================ */
.glass-card {
  background:rgba(14,12,12,0.4);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-2xl);
  box-shadow:var(--shadow-glass);
}
.glass-card-sm { border-radius:var(--radius-xl); }
.glass-card-md { border-radius:var(--radius-lg); }

.card-header {
  padding:var(--space-xl); border-bottom:1px solid var(--border-subtle);
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-md);
}
.card-title { font-size:1.125rem; font-weight:700; display:flex; align-items:center; gap:var(--space-sm); }
.card-title svg { color:var(--accent-primary); }
.card-subtitle { font-size:10px; text-transform:uppercase; letter-spacing:0.2em; color:var(--text-label); font-weight:700; margin-top:4px; }
.card-body { padding:var(--space-xl); }
.card-footer { padding:var(--space-xl); border-top:1px solid var(--border-subtle); background:rgba(13,35,64,0.4); border-radius:0 0 var(--radius-2xl) var(--radius-2xl); }

/* ============================================
   KPI CARDS — 7 cards (4+3 layout)
   ============================================ */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
}

@media (max-width:1400px) { .kpi-grid { grid-template-columns:repeat(4,1fr); } }
@media (max-width:1100px) { .kpi-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:768px)  { .kpi-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px)  { .kpi-grid { grid-template-columns:1fr; } }

.kpi-card {
  padding:var(--space-xl); display:flex; flex-direction:column; gap:var(--space-md);
  transition:all var(--transition-slow);
}
.kpi-card.clickable { cursor:pointer; }
.kpi-card.clickable:hover { transform:translateY(-4px); border-color:rgba(184,149,106,0.3); }
.kpi-header { display:flex; align-items:center; justify-content:space-between; }
.kpi-label { font-size:10px; text-transform:uppercase; letter-spacing:0.2em; color:var(--text-label); font-weight:700; }
.kpi-icon {
  width:40px; height:40px; border-radius:var(--radius-lg);
  background:rgba(13,35,64,0.4); border:1px solid rgba(192,198,203,0.05);
  display:flex; align-items:center; justify-content:center; transition:transform var(--transition-base);
}
.kpi-card:hover .kpi-icon { transform:scale(1.1); }
.kpi-icon svg { width:20px; height:20px; }
.kpi-icon.amber svg { color:var(--accent-primary); }
.kpi-icon.sage svg  { color:var(--accent-secondary); }
.kpi-icon.success svg { color:var(--success); }
.kpi-icon.danger svg  { color:var(--danger); }
.kpi-icon.info svg    { color:var(--info); }
.kpi-icon.warning svg { color:var(--warning); }
.kpi-value { font-size:2.25rem; font-weight:700; letter-spacing:-0.02em; line-height:1; font-family:'Courier New',monospace; }
.kpi-trend { display:flex; align-items:center; gap:var(--space-xs); font-size:0.75rem; color:var(--accent-secondary); opacity:0; transition:opacity var(--transition-base); }
.kpi-card:hover .kpi-trend { opacity:1; }

/* ============================================
   ANALYTICS TABS
   ============================================ */
.analytics-tabs {
  display:flex; align-items:center; gap:4px;
  background:rgba(13,35,64,0.4); padding:4px;
  border-radius:var(--radius-full);
  border:1px solid rgba(192,198,203,0.05);
  width:fit-content;
}
.analytics-tab {
  padding:0.5rem 1.25rem; border-radius:var(--radius-full);
  font-size:0.875rem; font-weight:500;
  color:var(--text-muted); transition:all var(--transition-slow);
}
.analytics-tab:hover { color:var(--text-primary); }
.analytics-tab.active { background:var(--accent-primary); color:var(--crimson-clay); box-shadow:var(--shadow-glow-amber); }

.period-toggle { display:flex; align-items:center; gap:var(--space-xs); }
.period-btn { padding:0.5rem 1rem; border-radius:var(--radius-full); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.15em; color:var(--text-label); transition:all var(--transition-base); }
.period-btn:hover { color:var(--text-muted); }
.period-btn.active { color:var(--accent-secondary); }

.analytics-controls { display:flex; flex-direction:column; align-items:flex-end; gap:var(--space-xs); }
.month-picker { display:flex; align-items:center; gap:var(--space-xs); }
.month-select {
  appearance:none; -webkit-appearance:none;
  background:rgba(13,35,64,0.4); border:1px solid var(--border-subtle);
  border-radius:var(--radius-full); color:var(--text-primary);
  padding:0.45rem 1rem; font-size:0.75rem; min-width:140px;
}
.month-select:focus { outline:none; border-color:var(--border-hover); }
.month-nav-btn { padding:0.5rem 0.75rem; line-height:1; }

/* ============================================
   CHARTS
   ============================================ */
.chart-container {
  background:rgba(13,35,64,0.4); border-radius:var(--radius-lg);
  border:1px solid rgba(192,198,203,0.05);
  padding:var(--space-lg); min-height:300px; position:relative;
}
.chart-empty {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:var(--text-label); font-size:0.875rem;
}

/* ============================================
   BUTTONS
   ============================================ */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-sm);
  padding:0.75rem 1.5rem; border-radius:var(--radius-md);
  font-size:0.875rem; font-weight:600; transition:all var(--transition-base); white-space:nowrap;
}
.btn svg { width:18px; height:18px; }

.btn-primary { background:var(--accent-primary); color:var(--crimson-clay); box-shadow:0 4px 14px rgba(184,149,106,0.3); }
.btn-primary:hover { background:#c9a87a; transform:translateY(-2px); box-shadow:0 6px 20px rgba(184,149,106,0.4); }

.btn-secondary, .btn-accent { background:var(--accent-secondary); color:white; box-shadow:0 4px 14px rgba(107,124,92,0.3); }
.btn-secondary:hover, .btn-accent:hover { background:#7a8f6a; transform:translateY(-2px); }

.btn-ghost { background:transparent; color:var(--text-muted); border:1px solid var(--border-subtle); }
.btn-ghost:hover { color:var(--text-primary); background:rgba(192,198,203,0.05); border-color:var(--border-hover); }

.btn-danger { background:transparent; color:var(--danger); border:1px solid rgba(239,68,68,0.3); }
.btn-danger:hover { background:var(--danger-bg); }

.btn-info { background:var(--info); color:white; }
.btn-info:hover { background:#2563eb; transform:translateY(-2px); }

.btn-sm { padding:0.5rem 1rem; font-size:0.75rem; }
.btn-lg { padding:1rem 2rem; font-size:1rem; border-radius:var(--radius-lg); }
.btn-xl { padding:1rem 1.5rem; font-size:0.875rem; border-radius:var(--radius-lg); height:56px; }
.btn-block { width:100%; }
.btn:disabled { opacity:0.5; cursor:not-allowed; transform:none !important; }

.btn-icon {
  padding:var(--space-sm); background:transparent;
  border:1px solid var(--border-subtle); border-radius:var(--radius-sm);
  cursor:pointer; transition:all 0.2s ease;
  display:flex; align-items:center; justify-content:center;
}
.btn-icon:hover { background:rgba(255,255,255,0.05); border-color:var(--border-hover); transform:translateY(-1px); }
.btn-icon.btn-danger:hover { background:var(--danger-bg); border-color:var(--danger); }
.btn-icon svg { width:16px; height:16px; color:var(--text-muted); }
.btn-icon.btn-danger svg { color:var(--danger); }

/* ============================================
   FORM INPUTS
   ============================================ */
.form-group { display:flex; flex-direction:column; gap:var(--space-sm); }
.form-label { font-size:10px; text-transform:uppercase; letter-spacing:0.15em; color:var(--text-label); font-weight:700; display:flex; align-items:center; gap:var(--space-xs); }
.form-label svg { width:12px; height:12px; }

.form-input {
  width:100%; height:48px;
  background:rgba(13,35,64,0.6); border:1px solid var(--border-subtle);
  border-radius:var(--radius-md); padding:0 var(--space-md);
  font-size:0.875rem; color:var(--text-primary); transition:all var(--transition-base);
}
.form-input::placeholder { color:var(--text-label); }
.form-input:focus { outline:none; border-color:rgba(184,149,106,0.5); background:rgba(13,35,64,0.8); }
.form-input:disabled { opacity:0.5; cursor:not-allowed; }
.form-input.readonly { opacity:0.7; cursor:default; background:rgba(13,35,64,0.3); }

select.form-input {
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='rgba(192,198,203,0.4)'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center; background-size:1rem;
  padding-right:2.5rem;
}
textarea.form-input { height:auto; min-height:80px; padding:var(--space-md); resize:vertical; }

/* .form-control is an alias for .form-input — both work */
.form-control { width:100%; height:48px; background:rgba(13,35,64,0.6); border:1px solid var(--border-subtle); border-radius:var(--radius-md); padding:0 var(--space-md); font-size:0.875rem; color:var(--text-primary); transition:all var(--transition-base); }
.form-control::placeholder { color:var(--text-label); }
.form-control:focus { outline:none; border-color:rgba(184,149,106,0.5); background:rgba(13,35,64,0.8); }
.form-control:disabled { opacity:0.5; cursor:not-allowed; }
select.form-control { appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='rgba(192,198,203,0.4)'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1rem center; background-size:1rem; padding-right:2.5rem; }
textarea.form-control { height:auto; min-height:80px; padding:var(--space-md); resize:vertical; }

.input-with-icon { position:relative; }
.input-with-icon .form-input { padding-left:2.75rem; }
.input-with-icon svg { position:absolute; left:var(--space-md); top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--text-label); }

.form-grid { display:grid; gap:var(--space-lg); }
.form-grid.two-col { grid-template-columns:repeat(2,1fr); }
.form-grid.three-col { grid-template-columns:repeat(3,1fr); }
@media (max-width:600px) { .form-grid.two-col,.form-grid.three-col { grid-template-columns:1fr; } }

/* ============================================
   BADGES & STATUS
   ============================================ */
.badge {
  display:inline-flex; align-items:center; gap:4px;
  padding:4px 10px; border-radius:var(--radius-full);
  font-size:9px; font-weight:700; text-transform:uppercase;
  letter-spacing:0.1em; border:1px solid transparent;
}
.badge svg { width:10px; height:10px; }

.badge-success { background:var(--success-bg); color:var(--success); border-color:var(--success-border); }
.badge-warning { background:var(--warning-bg); color:var(--warning); border-color:var(--warning-border); }
.badge-danger  { background:var(--danger-bg);  color:var(--danger);  border-color:var(--danger-border); }
.badge-amber   { background:rgba(184,149,106,0.1); color:var(--accent-primary); border-color:rgba(184,149,106,0.2); }
.badge-sage    { background:rgba(107,124,92,0.1);  color:var(--accent-secondary); border-color:rgba(107,124,92,0.2); }
.badge-info    { background:var(--info-bg); color:var(--info); border-color:var(--info-border); }
.badge-muted   { background:rgba(192,198,203,0.08); color:var(--text-muted); border-color:rgba(192,198,203,0.15); }

/* Mula Tide order status badges */
.status-quote-sent    { background:rgba(59,130,246,0.12); color:#60a5fa; border-color:rgba(59,130,246,0.25); }
.status-invoice-sent  { background:rgba(249,115,22,0.12); color:#fb923c; border-color:rgba(249,115,22,0.25); }
.status-partial       { background:rgba(245,158,11,0.12); color:#fbbf24; border-color:rgba(245,158,11,0.25); }
.status-paid          { background:rgba(16,185,129,0.12); color:#34d399; border-color:rgba(16,185,129,0.25); }
.status-cancelled     { background:rgba(192,198,203,0.08); color:var(--text-muted); border-color:rgba(192,198,203,0.15); }

/* ============================================
   STATUS ROW
   ============================================ */
.status-row { display:flex; align-items:center; justify-content:space-between; padding:var(--space-sm) 0; }
.status-row-label { font-size:0.75rem; color:var(--text-muted); }
.status-row-right { display:flex; align-items:center; gap:var(--space-sm); }
.status-row-date { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:var(--text-label); }

/* ============================================
   TABLES
   ============================================ */
.table-container { overflow-x:auto; border-radius:var(--radius-lg); border:1px solid var(--border-subtle); }
.data-table { width:100%; font-size:0.875rem; }
.data-table thead { background:rgba(13,35,64,0.4); border-bottom:1px solid var(--border-subtle); }
.data-table th { padding:var(--space-md) var(--space-lg); text-align:left; font-size:10px; text-transform:uppercase; letter-spacing:0.15em; font-weight:700; color:var(--text-label); white-space:nowrap; }
.data-table td { padding:var(--space-md) var(--space-lg); border-bottom:1px solid var(--border-subtle); vertical-align:middle; }
.data-table tbody tr:last-child td { border-bottom:none; }
.data-table tbody tr:hover { background:rgba(192,198,203,0.03); }
.data-table tbody tr.cancelled-row td { opacity:0.45; text-decoration:line-through; }
.data-table tbody tr.cancelled-row { background:rgba(192,198,203,0.02); }
.table-empty { padding:var(--space-2xl); text-align:center; color:var(--text-label); font-style:italic; }

/* ============================================
   MODALS
   ============================================ */
.modal-backdrop {
  position:fixed; inset:0;
  background:rgba(13,35,64,0.8); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  z-index:200; display:flex; align-items:center; justify-content:center; padding:var(--space-lg);
  opacity:0; visibility:hidden; transition:all var(--transition-slow);
}
.modal-backdrop.show { opacity:1; visibility:visible; }
.modal {
  background:rgba(14,12,12,0.95); backdrop-filter:blur(16px);
  border:1px solid var(--border-subtle); border-radius:var(--radius-2xl);
  box-shadow:var(--shadow-glass); width:100%; max-width:500px;
  max-height:90vh; overflow:hidden; display:flex; flex-direction:column;
  transform:scale(0.95); transition:transform var(--transition-slow);
}
.modal-backdrop.show .modal { transform:scale(1); }
.modal-lg  { max-width:720px; }
.modal-xl  { max-width:960px; }
.modal-full{ max-width:1200px; }

.modal-header { padding:var(--space-xl); border-bottom:1px solid var(--border-subtle); display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-md); }
.modal-title { font-size:1.25rem; font-weight:700; display:flex; align-items:center; gap:var(--space-sm); }
.modal-title svg { color:var(--accent-primary); }
.modal-close { padding:var(--space-sm); color:var(--text-label); transition:color var(--transition-fast); }
.modal-close:hover { color:var(--text-primary); }
.modal-close svg { width:24px; height:24px; }
.modal-body { padding:var(--space-xl); overflow-y:auto; flex:1; }
.modal-footer { padding:var(--space-xl); border-top:1px solid var(--border-subtle); background:rgba(13,35,64,0.4); display:flex; justify-content:flex-end; gap:var(--space-sm); }

/* ============================================
   DIVIDERS
   ============================================ */
.divider { height:1px; background:var(--border-subtle); margin:var(--space-lg) 0; }
.divider-label { display:flex; align-items:center; gap:var(--space-md); margin:var(--space-xl) 0; }
.divider-label::before,.divider-label::after { content:''; flex:1; height:1px; background:var(--border-subtle); }
.divider-label span { font-size:10px; text-transform:uppercase; letter-spacing:0.15em; color:var(--text-label); font-weight:700; }

/* ============================================
   SECTION HEADERS
   ============================================ */
.section-header { display:flex; align-items:center; justify-content:space-between; gap:var(--space-md); margin-bottom:var(--space-lg); flex-wrap:wrap; }
.section-title { font-size:10px; text-transform:uppercase; letter-spacing:0.15em; color:var(--text-label); font-weight:700; }

/* ============================================
   SERVICE SECTION BUILDER
   ============================================ */
.service-section {
  background:rgba(13,35,64,0.3); border:1px solid rgba(192,198,203,0.1);
  border-radius:var(--radius-lg); margin-bottom:var(--space-lg); overflow:hidden;
}
.service-section-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--space-md) var(--space-lg);
  background:rgba(184,149,106,0.12); border-bottom:1px solid rgba(184,149,106,0.2);
  gap:var(--space-md);
}
.service-section-name-input {
  background:transparent; border:none; color:var(--text-primary);
  font-size:0.9rem; font-weight:700; text-transform:uppercase;
  letter-spacing:0.08em; width:100%; outline:none;
}
.service-section-name-input::placeholder { color:rgba(192,198,203,0.4); }
.service-section-actions { display:flex; gap:var(--space-sm); flex-shrink:0; }
.service-section-body { padding:var(--space-lg); }
.service-section-footer {
  display:flex; justify-content:flex-end; align-items:center;
  padding:var(--space-md) var(--space-lg);
  border-top:1px solid var(--border-subtle); gap:var(--space-md);
}
.section-subtotal-label { font-size:0.75rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--text-label); font-weight:700; }
.section-subtotal-value { font-family:'Courier New',monospace; font-weight:700; color:var(--accent-primary); font-size:1rem; }

/* Service Line (each line item within a section) */
.service-line {
  background:rgba(13,35,64,0.25); border:1px solid transparent;
  border-radius:var(--radius-md); padding:var(--space-md);
  margin-bottom:var(--space-md); transition:all var(--transition-base);
}
.service-line:hover { background:rgba(13,35,64,0.45); border-color:var(--border-subtle); }
.service-line.has-data { background:rgba(184,149,106,0.05); border-color:rgba(184,149,106,0.15); }

.service-line-row-1 { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-md); margin-bottom:var(--space-sm); }
.service-line-row-2 { display:grid; grid-template-columns:80px 1fr 1fr 1fr auto; gap:var(--space-md); align-items:end; margin-bottom:var(--space-sm); }
.service-line-row-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:var(--space-md); }

.markup-group { display:flex; align-items:end; gap:var(--space-sm); }
.markup-type-select { width:130px; flex-shrink:0; }
.markup-value-input { flex:1; }

.line-calc-display {
  display:flex; flex-direction:column; align-items:flex-end; justify-content:flex-end;
  padding-bottom:4px;
}
.line-unit-price { font-size:0.75rem; color:var(--text-muted); }
.line-amount { font-size:1rem; font-weight:700; color:var(--success); font-family:'Courier New',monospace; }

.additional-costs { margin-top:var(--space-sm); }
.additional-costs-toggle { font-size:0.75rem; color:var(--text-label); cursor:pointer; display:flex; align-items:center; gap:4px; }
.additional-costs-toggle:hover { color:var(--text-muted); }
.additional-cost-row { display:grid; grid-template-columns:130px 1fr 100px auto; gap:var(--space-sm); align-items:center; margin-top:var(--space-sm); }

.service-line-remove { align-self:flex-start; }

@media (max-width:900px) {
  .service-line-row-2 { grid-template-columns:1fr 1fr 1fr; }
  .service-line-row-3 { grid-template-columns:1fr 1fr; }
}
@media (max-width:600px) {
  .service-line-row-1,.service-line-row-2,.service-line-row-3 { grid-template-columns:1fr; }
  .additional-cost-row { grid-template-columns:1fr 1fr; }
}

/* Sub-supplier header (for materials) */
.sub-supplier-header {
  display:grid; grid-template-columns:1fr 1fr 1fr auto; gap:var(--space-md);
  align-items:center; padding:var(--space-sm) var(--space-md);
  background:rgba(13,35,64,0.3); border-radius:var(--radius-sm);
  margin-bottom:var(--space-md); border:1px solid var(--border-subtle);
  font-size:0.8rem;
}

/* ============================================
   ORDER SUMMARY SIDEBAR (new-order.html)
   ============================================ */
.order-summary-panel { position:sticky; top:80px; }
.summary-section-row { display:flex; justify-content:space-between; align-items:center; padding:var(--space-sm) 0; border-bottom:1px solid rgba(192,198,203,0.05); }
.summary-section-label { font-size:0.8rem; color:var(--text-muted); }
.summary-section-value { font-family:'Courier New',monospace; font-size:0.9rem; font-weight:700; color:var(--text-primary); }
.summary-grand-total { display:flex; justify-content:space-between; align-items:center; padding:var(--space-md) 0; border-top:2px solid rgba(184,149,106,0.3); margin-top:var(--space-sm); }
.summary-grand-label { font-size:1rem; font-weight:700; color:var(--text-primary); }
.summary-grand-value { font-family:'Courier New',monospace; font-size:1.5rem; font-weight:700; color:var(--accent-primary); }
.profit-panel { margin-top:var(--space-lg); padding:var(--space-md); background:rgba(13,35,64,0.4); border-radius:var(--radius-md); border:1px solid rgba(192,198,203,0.06); }
.profit-row { display:flex; justify-content:space-between; align-items:center; padding:4px 0; font-size:0.8rem; }
.profit-row .label { color:var(--text-label); }
.profit-row .value { font-family:'Courier New',monospace; font-weight:700; }
.profit-row .value.positive { color:var(--success); }
.profit-row .value.pct { color:var(--accent-secondary); }

/* Admin fee panel */
.admin-fee-panel { background:rgba(184,149,106,0.08); border:1px solid rgba(184,149,106,0.2); border-radius:var(--radius-md); padding:var(--space-md); margin-top:var(--space-lg); }
.admin-fee-row { display:flex; align-items:center; gap:var(--space-md); flex-wrap:wrap; }
.admin-fee-toggle-label { display:flex; align-items:center; gap:var(--space-sm); font-size:0.875rem; font-weight:600; cursor:pointer; }
.admin-fee-toggle-label input[type=checkbox] { width:18px; height:18px; cursor:pointer; accent-color:var(--accent-primary); }
.admin-fee-fields { display:flex; gap:var(--space-md); flex-wrap:wrap; align-items:center; flex:1; }
.admin-fee-fields .form-input { height:40px; font-size:0.8rem; }
.admin-fee-result { font-family:'Courier New',monospace; font-weight:700; color:var(--accent-primary); white-space:nowrap; }

/* ============================================
   ORDER TOTALS
   ============================================ */
.order-totals { background:rgba(13,35,64,0.4); border-radius:var(--radius-lg); padding:var(--space-lg); }
.total-row { display:flex; justify-content:space-between; align-items:center; padding:var(--space-sm) 0; }
.total-row-final { border-top:2px solid var(--border-subtle); margin-top:var(--space-md); padding-top:var(--space-md); }
.total-label { font-size:1rem; color:var(--text-muted); font-weight:500; }
.total-value { font-size:1.25rem; font-weight:700; color:var(--text-primary); font-family:'Courier New',monospace; }
.total-value-final { font-size:1.75rem; color:var(--accent-primary); }

/* ============================================
   CUSTOMER / SUPPLIER SEARCH
   ============================================ */
.search-box { position:relative; margin-bottom:var(--space-lg); }
.search-box svg { position:absolute; left:var(--space-md); top:50%; transform:translateY(-50%); color:var(--text-muted); pointer-events:none; }
.search-input {
  width:100%; padding:var(--space-md) var(--space-md) var(--space-md) 3rem;
  background:rgba(13,35,64,0.4); border:1px solid var(--border-subtle);
  border-radius:var(--radius-md); color:var(--text-primary); font-size:1rem; transition:all 0.2s ease;
}
.search-input:focus { outline:none; border-color:var(--accent-primary); background:rgba(13,35,64,0.6); }

.customer-results,.supplier-results { max-height:400px; overflow-y:auto; }
.customer-result-item,.supplier-result-item {
  padding:var(--space-lg); background:rgba(13,35,64,0.3);
  border:1px solid var(--border-subtle); border-radius:var(--radius-md);
  margin-bottom:var(--space-sm); cursor:pointer; transition:all 0.2s ease;
}
.customer-result-item:hover,.supplier-result-item:hover { background:rgba(107,124,92,0.1); border-color:var(--accent-secondary); transform:translateX(4px); }
.customer-name,.supplier-name { font-size:1.125rem; font-weight:600; color:var(--text-primary); margin-bottom:0.25rem; }
.customer-id,.supplier-id { font-size:0.875rem; color:var(--text-muted); font-family:'Courier New',monospace; }
.customer-details,.supplier-details { display:flex; flex-wrap:wrap; gap:var(--space-md); font-size:0.875rem; color:var(--text-muted); }

.empty-state { text-align:center; padding:var(--space-2xl); color:var(--text-muted); font-size:0.9375rem; }

/* ============================================
   ALERTS
   ============================================ */
.alert {
  padding:var(--space-lg); border-radius:var(--radius-md); margin-top:var(--space-xl);
  display:flex; align-items:center; gap:var(--space-md);
  font-size:0.9375rem; line-height:1.6; border:1px solid;
  animation:slideIn 0.3s ease;
}
@keyframes slideIn { from { opacity:0; transform:translateY(-10px); } to { opacity:1; transform:translateY(0); } }
.alert-success { background:var(--success-bg); border-color:var(--success-border); color:var(--success); }
.alert-error   { background:var(--danger-bg);  border-color:var(--danger-border);  color:var(--danger); }
.alert-warning { background:var(--warning-bg); border-color:var(--warning-border); color:var(--warning); }
.alert-info    { background:var(--info-bg);    border-color:var(--info-border);    color:var(--info); }

/* ============================================
   PAYMENT SUMMARY BAR
   ============================================ */
.payment-summary-bar {
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-md);
  padding:var(--space-lg); background:rgba(13,35,64,0.4);
  border-radius:var(--radius-md); margin-bottom:var(--space-lg);
}
.payment-summary-item { display:flex; flex-direction:column; gap:4px; }
.payment-summary-label { font-size:9px; text-transform:uppercase; letter-spacing:0.15em; color:var(--text-label); font-weight:700; }
.payment-summary-value { font-size:1.1rem; font-weight:700; font-family:'Courier New',monospace; }

/* ============================================
   SCROLLBAR
   ============================================ */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:rgba(13,35,64,0.2); border-radius:10px; }
::-webkit-scrollbar-thumb { background:rgba(192,198,203,0.1); border-radius:10px; }
::-webkit-scrollbar-thumb:hover { background:rgba(192,198,203,0.2); }

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes fadeIn  { from { opacity:0; } to { opacity:1; } }
@keyframes slideUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
@keyframes scaleIn { from { opacity:0; transform:scale(0.95); } to { opacity:1; transform:scale(1); } }
@keyframes spin    { to { transform:rotate(360deg); } }

.animate-fade-in  { animation:fadeIn  var(--transition-slow) ease forwards; }
.animate-slide-up { animation:slideUp var(--transition-slow) ease forwards; }
.animate-scale-in { animation:scaleIn var(--transition-slow) ease forwards; }

/* ============================================
   UTILITIES
   ============================================ */
.text-amber   { color:var(--accent-primary); }
.text-sage    { color:var(--accent-secondary); }
.text-success { color:var(--success); }
.text-warning { color:var(--warning) !important; }
.text-danger  { color:var(--danger); }
.text-muted   { color:var(--text-muted); font-size:0.875rem; }
.text-label   { color:var(--text-label); }
.text-info    { color:var(--info); }

.font-mono { font-family:'SF Mono','Fira Code',Consolas,monospace; }
.font-bold { font-weight:700; }

.text-xs { font-size:0.75rem; }
.text-sm { font-size:0.875rem; }
.text-lg { font-size:1.125rem; }
.text-xl { font-size:1.25rem; }
.text-2xl{ font-size:1.5rem; }
.text-3xl{ font-size:2rem; }

.text-center { text-align:center; }
.text-right  { text-align:right; }

.flex { display:flex; }
.flex-col { flex-direction:column; }
.items-center { align-items:center; }
.justify-between { justify-content:space-between; }
.justify-end { justify-content:flex-end; }
.gap-sm { gap:var(--space-sm); }
.gap-md { gap:var(--space-md); }
.gap-lg { gap:var(--space-lg); }

.hidden { display:none !important; }
.truncate { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.w-full { width:100%; }
.h-full { height:100%; }

.mt-md { margin-top:var(--space-md); }
.mt-lg { margin-top:var(--space-lg); }
.mb-md { margin-bottom:var(--space-md); }
.mb-lg { margin-bottom:var(--space-lg); }
.p-md  { padding:var(--space-md); }
.p-lg  { padding:var(--space-lg); }
.p-xl  { padding:var(--space-xl); }

.border-left-success { border-left:4px solid var(--success); }
.border-left-warning { border-left:4px solid var(--warning); }
.border-left-danger  { border-left:4px solid var(--danger); }

/* ============================================
   CONFIRM MODAL (custom)
   ============================================ */
.confirm-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,0.65);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  z-index:10000; animation:fadeIn 150ms ease;
}
.confirm-dialog {
  background:var(--crimson-clay,#1a2a3a);
  border:1px solid rgba(192,198,203,0.12);
  border-radius:16px; padding:2rem; max-width:440px; width:90%;
  box-shadow:0 24px 64px rgba(0,0,0,0.5); animation:slideUp 150ms ease;
}
.confirm-title { color:var(--honeyed-amber,#B8956A); font-size:1.05rem; font-weight:600; margin:0 0 0.75rem; letter-spacing:0.3px; }
.confirm-message { color:var(--herbal-ice,#C0C6CB); font-size:0.9rem; line-height:1.65; margin:0 0 1.5rem; }
.confirm-buttons { display:flex; gap:0.75rem; justify-content:flex-end; }
.btn-confirm-cancel { height:44px; padding:0 1.2rem; background:transparent; border:1px solid rgba(192,198,203,0.2); border-radius:10px; color:rgba(192,198,203,0.7); font-size:0.9rem; cursor:pointer; transition:all 200ms ease; }
.btn-confirm-cancel:hover { border-color:#6B7C5C; color:#6B7C5C; }
.btn-confirm-ok { height:44px; padding:0 1.2rem; background:linear-gradient(135deg,#B8956A,#9a7448); border:none; border-radius:10px; color:white; font-size:0.9rem; font-weight:600; cursor:pointer; transition:all 200ms ease; }
.btn-confirm-ok:hover { box-shadow:0 0 16px rgba(184,149,106,0.4); }
.btn-confirm-ok.danger { background:linear-gradient(135deg,#ef4444,#dc2626); }
.btn-confirm-ok.danger:hover { box-shadow:0 0 20px rgba(239,68,68,0.35); }

/* ============================================
   LOADING OVERLAY
   ============================================ */
.loading-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,0.6);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  z-index:9999; animation:fadeIn 150ms ease;
}
.loading-card {
  background:var(--crimson-clay,#1a2a3a);
  border:1px solid rgba(192,198,203,0.12);
  border-radius:16px; padding:2rem 2.5rem; text-align:center;
  box-shadow:0 24px 64px rgba(0,0,0,0.5); animation:slideUp 150ms ease;
}
.loading-spinner {
  width:40px; height:40px;
  border:3px solid rgba(184,149,106,0.2); border-top-color:#B8956A;
  border-radius:50%; animation:spin 0.8s linear infinite; margin:0 auto 1rem;
}
.loading-message { color:var(--herbal-ice,#C0C6CB); font-size:0.9rem; margin:0; }

/* ============================================
   INACTIVITY WARNING
   ============================================ */
.inactivity-warning {
  position:fixed; bottom:var(--space-xl); right:var(--space-xl);
  background:rgba(245,158,11,0.15); border:1px solid rgba(245,158,11,0.4);
  border-radius:var(--radius-lg); padding:var(--space-lg);
  z-index:5000; max-width:320px; animation:slideUp 300ms ease;
  box-shadow:0 8px 32px rgba(0,0,0,0.3);
}
.inactivity-warning-title { color:var(--warning); font-weight:700; font-size:0.9rem; margin-bottom:var(--space-sm); }
.inactivity-warning-text  { color:var(--text-muted); font-size:0.8rem; margin-bottom:var(--space-md); }

/* ============================================
   TOAST NOTIFICATIONS
   ============================================ */
.toast-container { position:fixed; top:var(--space-xl); right:var(--space-xl); z-index:9000; display:flex; flex-direction:column; gap:var(--space-sm); }
.toast {
  background:rgba(26,42,58,0.98); border:1px solid rgba(192,198,203,0.15);
  border-radius:var(--radius-md); padding:var(--space-md) var(--space-lg);
  font-size:0.875rem; max-width:320px; animation:slideUp 200ms ease;
  box-shadow:0 8px 32px rgba(0,0,0,0.3); display:flex; align-items:center; gap:var(--space-sm);
}
.toast-success { border-left:3px solid var(--success); }
.toast-error   { border-left:3px solid var(--danger); }
.toast-info    { border-left:3px solid var(--info); }
.toast-warning { border-left:3px solid var(--warning); }

/* ============================================
   FORM ACTIONS
   ============================================ */
.form-actions { display:flex; gap:var(--space-md); margin-top:var(--space-xl); flex-wrap:wrap; }
.section-label { display:flex; align-items:center; gap:var(--space-sm); font-size:1rem; font-weight:600; color:var(--text-primary); margin-bottom:var(--space-md); }
.section-label svg { color:var(--accent-primary); }

/* ============================================
   SUPPLIERS TABLE / ANALYTICS
   ============================================ */
.supplier-stat-card { padding:var(--space-lg); display:flex; flex-direction:column; gap:var(--space-sm); }
.supplier-stat-label { font-size:10px; text-transform:uppercase; letter-spacing:0.15em; color:var(--text-label); font-weight:700; }
.supplier-stat-value { font-size:1.5rem; font-weight:700; font-family:'Courier New',monospace; color:var(--text-primary); }

/* ============================================
   STATEMENT DATE RANGE
   ============================================ */
.date-range-row { display:flex; align-items:center; gap:var(--space-md); flex-wrap:wrap; }
.date-range-row .form-input { flex:1; min-width:140px; }

/* ============================================
   TYPOGRAPHY SYSTEM
   ============================================ */
h1, .page-title { font-size:1.75rem; font-weight:600; color:var(--text-primary); }
h2, .section-title { font-size:0.875rem; font-weight:600; color:var(--text-primary); text-transform:uppercase; letter-spacing:0.05em; }
h3, .subsection-title { font-size:1rem; font-weight:600; color:var(--text-primary); }
.label, label span { font-size:0.75rem; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.05em; }
button { font-size:0.875rem; }
.stat-value, .kpi-value { font-family:'Courier New',monospace; font-weight:700; }

/* ============================================
   MOBILE RESPONSIVE — Global fixes (768px and below)
   ============================================ */
@media (max-width:768px) {

  /* Two-column page layouts stack on mobile */
  .page-grid.two-column { grid-template-columns:1fr !important; }

  /* Sticky summary sidebar loses sticky on mobile (full-width below form) */
  .order-summary-panel { position:static; top:auto; }

  /* Tables: horizontal scroll on small screens */
  .table-container, .data-table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  table { min-width:600px; }

  /* Minimum 44px touch targets on all interactive elements */
  .btn, button, .nav-pill, .analytics-tab,
  input[type="button"], input[type="submit"] { min-height:44px; }
  .btn-sm { min-height:36px; font-size:0.8rem; }

  /* Modals: full-width with side padding */
  .modal-content { width:calc(100vw - 2rem) !important; max-width:100% !important; margin:1rem; border-radius:var(--radius-lg); }
  .modal-body { padding:var(--space-lg); }

  /* Analytics chart containers: fixed height on mobile */
  #revenueChart, #salesChart { height:260px !important; }

  /* Analytics tabs: wrap */
  .analytics-tabs { flex-wrap:wrap; gap:var(--space-sm); }
  .analytics-tab { flex:1; min-width:80px; text-align:center; font-size:0.8rem; }

  /* KPI grid: 2 columns on mobile */
  .kpi-grid { grid-template-columns:repeat(2,1fr); }

  /* Page title font size */
  h1, .page-title { font-size:1.25rem; }

  /* Form grids: always single column on mobile */
  .form-grid, .form-grid.two-col, .form-grid.three-col { grid-template-columns:1fr; }

  /* Section header actions wrap */
  .section-header { flex-wrap:wrap; gap:var(--space-sm); }

  /* Orders table: hide less important columns */
  .orders-table .col-reference,
  .orders-table .col-date { display:none; }

  /* Download submenu: full width on mobile */
  .download-menu { right:auto; left:0; min-width:200px; }

  /* Backup panel buttons: full width */
  .backup-panel .btn { width:100%; justify-content:center; }

  /* Nav pills dropdown: ensure full width on mobile */
  .nav-pills.show {
    left:0; right:0; border-radius:0;
    z-index:200;
  }
}

@media (max-width:480px) {
  /* Single column KPI on very small screens */
  .kpi-grid { grid-template-columns:1fr; }

  /* Smaller main content padding */
  .main-content { padding:var(--space-sm); }

  /* Chart height reduced on very small screens */
  #revenueChart, #salesChart { height:200px !important; }

  /* Stat cards: smaller font */
  .stat-value, .kpi-value { font-size:1.25rem; }

  /* Sub-supplier grid: stack */
  .sub-supplier-header { grid-template-columns:1fr 1fr; }
  .additional-cost-row { grid-template-columns:1fr; }

  /* Modal: full viewport height scroll */
  .modal-content { max-height:95vh; overflow-y:auto; }
}

/* ============================================
   PRINT STYLES — Invoice/Quote document
   ============================================ */
@media print {
  @page { size:A4; margin:0; }
  body { margin:0; padding:0; background:white; }
  .invoice-wrapper { width:210mm; min-height:297mm; margin:0; padding:0; box-shadow:none; }
  /* Prevent page breaks inside table rows */
  tr { page-break-inside:avoid; }
  /* Keep section headers with their first row */
  .section-bar { page-break-after:avoid; }
}