:root {
  --bg-primary: #0a0a0f;
  --bg-secondary: #12121a;
  --bg-card: #1a1a26;
  --bg-input: #22222e;
  --bg-hover: #2a2a3a;
  --text-primary: #f0f0f5;
  --text-secondary: #9898a8;
  --text-muted: #5a5a6e;
  --accent: #7c6cf0;
  --accent-hover: #9489f5;
  --accent-glow: rgba(124,108,240,0.15);
  --danger: #e74c5e;
  --success: #2ed573;
  --warning: #ffa502;
  --border: #2a2a3a;
  --border-light: #33334a;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 4px 24px rgba(0,0,0,0.3);
  --font: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  --transition: all 0.2s ease;
}
[data-theme="light"] {
  --bg-primary: #f5f5fa;
  --bg-secondary: #ffffff;
  --bg-card: #ffffff;
  --bg-input: #f0f0f5;
  --bg-hover: #e8e8f0;
  --text-primary: #1a1a2e;
  --text-secondary: #5a5a70;
  --text-muted: #9898a8;
  --border: #e0e0ea;
  --border-light: #d0d0da;
  --shadow: 0 4px 24px rgba(0,0,0,0.08);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; scroll-behavior: smooth; }
body { font-family: var(--font); background: var(--bg-primary); color: var(--text-primary); line-height: 1.6; min-height: 100vh; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
img { max-width: 100%; }

/* LANDING PAGE */
.landing-container {
  flex:1; display: flex; align-items: center; justify-content: center;
  padding: 2rem 1rem;
  background: var(--bg-primary);
  background-image: radial-gradient(ellipse at 20% 50%, rgba(124,108,240,0.08) 0%, transparent 50%),
                    radial-gradient(ellipse at 80% 20%, rgba(253,121,168,0.06) 0%, transparent 50%);
}
.landing-box {
  width: 100%; max-width: 440px; background: var(--bg-card);
  border: 1px solid var(--border); border-radius: 20px;
  padding: 3rem 2.5rem; box-shadow: var(--shadow); position: relative; overflow: hidden;
}
.landing-box::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--accent), #fd79a8, var(--accent));
}
.landing-logo { text-align: center; margin-bottom: 2rem; }
.landing-logo img { height: 56px; margin-bottom: 0.75rem; display: block; margin-inline: auto; }
.landing-logo h1 { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.5px; background: linear-gradient(135deg, var(--accent), #fd79a8); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.landing-logo p { color: var(--text-muted); font-size: 0.85rem; margin-top: 0.25rem; }

.tab-bar { display: flex; gap: 4px; background: var(--bg-input); border-radius: 10px; padding: 4px; margin-bottom: 1.5rem; }
.tab-bar button {
  flex: 1; padding: 0.6rem; border: none; border-radius: 8px; background: transparent;
  color: var(--text-secondary); font-weight: 600; font-size: 0.85rem; cursor: pointer; transition: var(--transition);
}
.tab-bar button.active { background: var(--accent); color: #fff; box-shadow: 0 2px 8px rgba(124,108,240,0.3); }

.form-group { margin-bottom: 1rem; }
.form-group label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 0.4rem; text-transform: uppercase; letter-spacing: 0.5px; }
.form-group input, .form-group select, .form-group textarea {
  width: 100%; padding: 0.75rem 1rem; background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-primary); font-size: 0.95rem; font-family: var(--font);
  transition: var(--transition); outline: none;
  max-width: 100%; /* Prevent overflow on narrow screens (iframes, embedded webviews) */
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow);
}
.form-group textarea { resize: vertical; min-height: 80px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.75rem 1.5rem; border: none; border-radius: var(--radius-sm);
  font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: var(--transition);
  font-family: var(--font);
}
.btn-primary { background: linear-gradient(135deg, var(--accent), #9489f5); color: #fff; width: 100%; }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(124,108,240,0.35); }
.btn-secondary { background: var(--bg-input); color: var(--text-primary); border: 1px solid var(--border); }
.btn-secondary:hover { background: var(--bg-hover); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-sm { padding: 0.4rem 0.8rem; font-size: 0.8rem; }
.btn-icon { padding: 0.5rem; border-radius: var(--radius-sm); background: var(--bg-input); border: 1px solid var(--border); color: var(--text-secondary); cursor: pointer; transition: var(--transition); }
.btn-icon:hover { color: var(--accent); border-color: var(--accent); }

.alert { padding: 0.75rem 1rem; border-radius: var(--radius-sm); font-size: 0.85rem; margin-bottom: 1rem; }
.alert-success { background: rgba(46,213,115,0.1); border: 1px solid rgba(46,213,115,0.3); color: var(--success); }
.alert-error { background: rgba(231,76,94,0.1); border: 1px solid rgba(231,76,94,0.3); color: var(--danger); }
.alert-warning { background: rgba(255,165,2,0.1); border: 1px solid rgba(255,165,2,0.3); color: var(--warning); }

.link-btn { background: none; border: none; color: var(--accent); cursor: pointer; font-size: 0.85rem; font-family: var(--font); padding: 0; }
.link-btn:hover { text-decoration: underline; }

/* DASHBOARD LAYOUT */
.app-layout { display: flex; min-height: 100vh; }
.sidebar {
  width: 260px; background: var(--bg-secondary); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 100;
  transition: transform 0.3s ease;
}
.sidebar-header { padding: 1.5rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 0.75rem; }
.sidebar-header img { height: 36px; border-radius: 8px; }
.sidebar-header h2 { font-size: 1.1rem; font-weight: 700; background: linear-gradient(135deg, var(--accent), #fd79a8); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.sidebar-nav { flex: 1; padding: 1rem 0.75rem; overflow-y: auto; }
.sidebar-nav .nav-section { font-size: 0.7rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; padding: 1rem 0.75rem 0.4rem; }
.nav-item {
  display: flex; align-items: center; gap: 0.75rem; padding: 0.65rem 0.75rem; border-radius: var(--radius-sm);
  color: var(--text-secondary); font-size: 0.9rem; font-weight: 500; cursor: pointer; transition: var(--transition);
  margin-bottom: 2px;
}
.nav-item:hover { background: var(--bg-hover); color: var(--text-primary); }
.nav-item.active { background: var(--accent-glow); color: var(--accent); font-weight: 600; }
.nav-item .icon { width: 20px; text-align: center; font-size: 1.05rem; }
.sidebar-footer { padding: 1rem 1.25rem; border-top: 1px solid var(--border); }
.sidebar-footer .user-info { display: flex; align-items: center; gap: 0.75rem; }
.sidebar-footer .user-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem; }
.sidebar-footer .user-name { font-weight: 600; font-size: 0.85rem; }
.sidebar-footer .user-role { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; }

.main-content { flex: 1; margin-left: 260px; display: flex; flex-direction: column; min-height: 100vh; }
.topbar {
  height: 60px; background: var(--bg-secondary); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; padding: 0 1.5rem;
  position: sticky; top: 0; z-index: 50;
}
.topbar-left { display: flex; align-items: center; gap: 1rem; }
.topbar-left h1 { font-size: 1.15rem; font-weight: 700; }
.topbar-right { display: flex; align-items: center; gap: 0.75rem; }
.menu-toggle { display: none; background: none; border: none; color: var(--text-primary); font-size: 1.4rem; cursor: pointer; }

.page-content { flex: 1; padding: 1.5rem; }
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem; }
.page-header h2 { font-size: 1.3rem; font-weight: 700; }

.app-footer {
  background: var(--bg-secondary); border-top: 1px solid var(--border);
  padding: 1.25rem 1.5rem; text-align: center; font-size: 0.75rem; color: var(--text-muted); line-height: 1.8;
}
.app-footer strong { color: var(--text-secondary); }

/* CARDS & TABLES */
.card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; margin-bottom: 1rem; }
.card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.card-title { font-size: 1rem; font-weight: 700; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.stat-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; }
.stat-card .stat-icon { font-size: 1.5rem; margin-bottom: 0.5rem; }
.stat-card .stat-value { font-size: 1.8rem; font-weight: 800; letter-spacing: -1px; }
.stat-card .stat-label { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.25rem; }

.data-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.data-table th { text-align: left; padding: 0.75rem; background: var(--bg-input); color: var(--text-muted); font-weight: 600; text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.5px; border-bottom: 1px solid var(--border); }
.data-table td { padding: 0.75rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.data-table tr:hover td { background: var(--bg-hover); }
.data-table .actions { display: flex; gap: 0.4rem; }

.badge { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 20px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; }
.badge-success { background: rgba(46,213,115,0.15); color: var(--success); }
.badge-warning { background: rgba(255,165,2,0.15); color: var(--warning); }
.badge-danger { background: rgba(231,76,94,0.15); color: var(--danger); }
.badge-info { background: var(--accent-glow); color: var(--accent); }
.badge-secondary { background: rgba(160,160,160,0.15); color: var(--text-secondary); }
.badge-purple { background: rgba(162,155,254,0.15); color: #a29bfe; }

/* MODAL */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 1rem;
}
.modal-overlay.hidden { display: none; }
.modal {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px;
  width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto;
  display: flex; flex-direction: column; /* Allows footer to sit at bottom even on tall content */
}
.modal-header { padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.modal-header h3 { font-size: 1.1rem; font-weight: 700; }
.modal-close { background: none; border: none; color: var(--text-muted); font-size: 1.3rem; cursor: pointer; padding: 0.25rem 0.5rem; }
.modal-body { padding: 1.5rem; flex: 1; overflow-y: auto; }
.modal-footer { padding: 1rem 1.5rem; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 0.5rem; flex-shrink: 0; flex-wrap: wrap; }

/* Inputs and dropdowns inside modals must never burst out of their container */
.modal-body .form-group input,
.modal-body .form-group select,
.modal-body .form-group textarea { width: 100%; max-width: 100%; box-sizing: border-box; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.empty-state { text-align: center; padding: 3rem 1rem; color: var(--text-muted); }
.empty-state .empty-icon { font-size: 3rem; margin-bottom: 1rem; opacity: 0.5; }
.empty-state p { font-size: 0.9rem; }

.search-bar { display: flex; gap: 0.5rem; }
.search-bar input { flex: 1; padding: 0.6rem 1rem; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-primary); font-size: 0.9rem; outline: none; }
.search-bar input:focus { border-color: var(--accent); }

.toast-container { position: fixed; top: 1rem; right: 1rem; z-index: 2000; display: flex; flex-direction: column; gap: 0.5rem; max-width: calc(100vw - 2rem); }
.toast { padding: 0.75rem 1.25rem; border-radius: var(--radius-sm); font-size: 0.85rem; font-weight: 500; animation: slideIn 0.3s ease; box-shadow: 0 4px 16px rgba(0,0,0,0.3); word-wrap: break-word; }
.toast-success { background: var(--success); color: #fff; }
.toast-error { background: var(--danger); color: #fff; }
@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* ─────────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────────── */

/* Tablet */
@media (max-width: 768px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); }
  .main-content { margin-left: 0; }
  .menu-toggle { display: block; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .form-row { grid-template-columns: 1fr; }
  .data-table { font-size: 0.75rem; }
  .data-table th, .data-table td { padding: 0.5rem; }
  .page-content { padding: 1rem; }

  /* CRUD form rows stack on tablet+ — works for both .field-row (1fr 1fr) and .field-row-3 (1fr 1fr 1fr).
     The inline rules in dashboard.html already collapse these at 768px, but we add the
     same rule here so it also applies to ANY HTML page that uses these classes
     (quote.html, future Electron/Capacitor wrappers etc.). */
  .field-row, .field-row-3 { grid-template-columns: 1fr !important; }

  /* Modals: take more of the viewport, snap header/footer, ensure inputs don't overflow */
  .modal-overlay { padding: 0.5rem; align-items: flex-start; padding-top: 1rem; }
  .modal { max-width: 100%; max-height: calc(100vh - 2rem); border-radius: 12px; }
  .modal-header { padding: 1rem 1rem; }
  .modal-header h3 { font-size: 1rem; }
  .modal-body { padding: 1rem; }
  .modal-footer { padding: 0.75rem 1rem; }
  .modal-footer .btn { flex: 1; min-width: 0; } /* Buttons share the row instead of overflowing */

  /* Toast: take most of the screen width on small viewports */
  .toast-container { left: 1rem; right: 1rem; top: 0.5rem; align-items: stretch; }
  .toast { text-align: center; }

  /* Topbar tighter on tablet */
  .topbar { padding: 0 1rem; }
  .topbar-left h1 { font-size: 1rem; }
}

/* Phone */
@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr; }
  .landing-box { padding: 2rem 1.5rem; }

  /* Modals go full-screen on phones — easier to read and to type into */
  .modal-overlay { padding: 0; align-items: stretch; }
  .modal {
    max-width: 100%; max-height: 100vh; height: 100vh;
    border-radius: 0; border-left: none; border-right: none;
  }
  .modal-body { padding: 0.875rem; }

  /* All form inputs get 16px font to suppress iOS Safari & Android WebView autozoom on focus.
     Keeps Windows .exe (Electron) and Android .apk wrappers usable too. */
  input, select, textarea { font-size: 16px !important; }

  /* Cards have less padding so content gets more horizontal room */
  .card { padding: 1rem; }
}