* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: system-ui, 'Segoe UI', Roboto, sans-serif; display: flex; height: 100vh; background: #2b2d31; color: #b5bac1; }

/* Sidebar */
.sidebar { width: 220px; background: #1e1f22; display: flex; flex-direction: column; padding: 20px 0; flex-shrink: 0; border-right: 1px solid #2a2b2f; }
.sidebar-brand { padding: 0 20px 24px; font-size: 18px; font-weight: 700; line-height: 1.3; letter-spacing: 0.3px; border-bottom: 1px solid rgba(255,255,255,0.06); margin-bottom: 16px; color: #c9a227; }
.sidebar-brand span { display: block; font-size: 12px; font-weight: 500; color: rgba(255,255,255,0.45); margin-top: 2px; letter-spacing: 0.2px; }

nav { display: flex; flex-direction: column; gap: 2px; padding: 0 10px; }
.nav-item { padding: 10px 10px; font-size: 14px; cursor: pointer; border-radius: 6px; border: none; background: none; color: rgba(255,255,255,0.55); display: flex; align-items: center; gap: 10px; transition: background 0.15s; text-align: left; font-family: inherit; }
.nav-item:hover { background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.8); }
.nav-item.active { background: rgba(201,162,39,0.12); color: #c9a227; }
.nav-icon { width: 18px; height: 18px; opacity: 0.5; flex-shrink: 0; }
.nav-item.active .nav-icon { opacity: 1; }

/* Main */
.main { flex: 1; display: flex; flex-direction: column; overflow: auto; }
.topbar { padding: 16px 32px; background: #1e1f22; border-bottom: 1px solid #2a2b2f; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.breadcrumb { font-size: 12px; color: #6b6d72; text-transform: uppercase; letter-spacing: 0.5px; }
.breadcrumb strong { color: #c9a227; }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: #c9a227; color: #1e1f22; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; cursor: pointer; user-select: none; transition: background 0.15s; }
.avatar:hover { background: #d4af37; }
.content { padding: 32px; flex: 1; }
.content h1 { font-size: 22px; font-weight: 600; margin: 0 0 4px; color: #f2f3f5; }
.page-subtitle { font-size: 14px; color: #6b6d72; margin-bottom: 24px; }
.card { background: #313338; border: 1px solid #3a3b40; border-radius: 10px; padding: 24px; min-height: 300px; }

/* Table */
.table-controls { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.search-input { background: #1e1f22; color: #b5bac1; border: 1px solid #3a3b40; border-radius: 6px; padding: 8px 12px; font-size: 13px; font-family: inherit; width: 220px; }
.search-input::placeholder { color: #4e5058; }
.search-input:focus { outline: 1px solid #c9a227; border-color: #c9a227; }

.table-scroll { overflow-x: auto; }

.customer-table { width: 100%; border-collapse: collapse; }
.customer-table th { text-align: left; padding: 10px 12px; font-size: 11px; font-weight: 600; color: #6b6d72; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid #3a3b40; cursor: pointer; user-select: none; white-space: nowrap; }
.customer-table th:hover { color: #c9a227; }
.customer-table td { padding: 12px 12px; font-size: 14px; color: #b5bac1; border-bottom: 1px solid rgba(58,59,64,0.5); white-space: nowrap; }
.customer-table tr:hover td { background: rgba(255,255,255,0.02); }
.empty-row td { text-align: center; color: #4e5058; padding: 48px 12px !important; }

.notes-cell { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }

.actions-cell { white-space: nowrap; }
.btn-icon { background: none; border: none; color: #6b6d72; cursor: pointer; padding: 4px 6px; border-radius: 4px; transition: all 0.15s; }
.btn-icon:hover { color: #c9a227; background: rgba(201,162,39,0.1); }
.btn-delete:hover { color: #e74c3c; background: rgba(231,76,60,0.1); }

.add-customer-bar { margin-top: 16px; display: flex; justify-content: flex-end; }
.btn-add { background: #c9a227; color: #1e1f22; border: none; border-radius: 6px; padding: 10px 20px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; transition: background 0.15s; }
.btn-add:hover { background: #d4af37; }

/* Modal */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 100; }
.modal { background: #313338; border: 1px solid #3a3b40; border-radius: 10px; padding: 28px; width: 480px; max-width: 90vw; max-height: 85vh; overflow-y: auto; }
.modal h2 { font-size: 18px; font-weight: 600; color: #f2f3f5; margin: 0 0 20px; }
.modal-field { margin-bottom: 14px; }
.modal-field label { display: block; font-size: 12px; font-weight: 600; color: #6b6d72; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 6px; }
.modal-field input, .modal-field textarea, .modal-field select { width: 100%; background: #1e1f22; color: #b5bac1; border: 1px solid #3a3b40; border-radius: 6px; padding: 8px 12px; font-size: 14px; font-family: inherit; }
.modal-field input:focus, .modal-field textarea:focus, .modal-field select:focus { outline: 1px solid #c9a227; border-color: #c9a227; }
.modal-field textarea { resize: vertical; min-height: 60px; }
.modal-field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%236b6d72' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; cursor: pointer; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.btn-cancel { background: none; border: 1px solid #3a3b40; color: #b5bac1; border-radius: 6px; padding: 10px 20px; font-size: 14px; cursor: pointer; font-family: inherit; }
.btn-cancel:hover { background: rgba(255,255,255,0.04); }

/* Sidebar overlay for mobile — dims the rest of the page */
.sidebar-overlay { display: none; }

/* Status Badges */
.status-badge { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; }
.status-draft { background: rgba(107,109,114,0.2); color: #6b6d72; }
.status-quoting { background: rgba(59,130,246,0.15); color: #60a5fa; }
.status-quoted { background: rgba(201,162,39,0.15); color: #c9a227; }
.status-sent { background: rgba(139,92,246,0.15); color: #a78bfa; }
.status-accepted { background: rgba(34,197,94,0.15); color: #4ade80; }
.status-declined { background: rgba(239,68,68,0.15); color: #f87171; }

/* Quote Detail */
.btn-back { background: none; border: none; color: #6b6d72; cursor: pointer; font-size: 14px; font-family: inherit; display: flex; align-items: center; gap: 6px; padding: 0; margin-bottom: 16px; }
.btn-back:hover { color: #c9a227; }
.quote-header { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-bottom: 24px; }
.quote-header-item .label { font-size: 11px; font-weight: 600; color: #6b6d72; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 4px; }
.quote-header-item .value { font-size: 15px; color: #f2f3f5; }
.quote-header-item select { background: #1e1f22; color: #b5bac1; border: 1px solid #3a3b40; border-radius: 6px; padding: 6px 10px; font-size: 13px; font-family: inherit; }

/* Estimator Modal — wider */
.modal-wide { width: 720px; }

/* Estimator sections */
.est-section { margin-bottom: 20px; }
.est-section-title { font-size: 13px; font-weight: 700; color: #c9a227; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid rgba(201,162,39,0.2); }
.est-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.est-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px 16px; }
.est-calc { background: #1e1f22; border: 1px solid #3a3b40; border-radius: 8px; padding: 16px; margin-top: 16px; }
.est-calc-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 14px; }
.est-calc-row.total { border-top: 1px solid #3a3b40; margin-top: 8px; padding-top: 12px; font-weight: 700; color: #c9a227; font-size: 16px; }

/* Sidebar Control Widget */
.sidebar-control { margin-top: auto; padding: 16px; border-top: 1px solid rgba(255,255,255,0.06); }
.sidebar-control-label { font-size: 11px; font-weight: 600; color: #6b6d72; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 8px; }
.sidebar-mode { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; font-size: 13px; color: rgba(255,255,255,0.5); background: none; border: none; border-radius: 4px; cursor: pointer; font-family: inherit; text-align: left; transition: color 0.15s; }
.sidebar-mode:hover { color: rgba(255,255,255,0.8); }
.sidebar-mode.active { color: #c9a227; }
.sidebar-mode-dot { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid currentColor; flex-shrink: 0; }
.sidebar-mode.active .sidebar-mode-dot { background: currentColor; }

/* Sidebar Collapsed Mode */
.sidebar.mode-collapsed { width: 0; padding: 0; overflow: hidden; border-right: none; }
.sidebar.mode-collapsed .sidebar-brand,
.sidebar.mode-collapsed nav,
.sidebar.mode-collapsed .sidebar-control { display: none; }

/* Sidebar Hover Mode */
.sidebar.mode-hover { width: 52px; overflow: hidden; transition: width 0.2s ease; }
.sidebar.mode-hover .sidebar-brand,
.sidebar.mode-hover .sidebar-control { display: none; }
.sidebar.mode-hover nav { padding: 0 7px; }
.sidebar.mode-hover .nav-item { padding: 10px 10px; justify-content: center; overflow: hidden; white-space: nowrap; }
.sidebar.mode-hover:hover { width: 220px; overflow: visible; }
.sidebar.mode-hover:hover .sidebar-brand,
.sidebar.mode-hover:hover .sidebar-control { display: block; }
.sidebar.mode-hover:hover nav { padding: 0 10px; }
.sidebar.mode-hover:hover .nav-item { justify-content: flex-start; }

/* Hamburger button — only visible on mobile */
.hamburger { display: none; }

/* ==========================================
   MOBILE RESPONSIVE (screens under 768px)
   ========================================== */
@media (max-width: 768px) {
  /* Sidebar stays full width — permanent on all screens */

  /* Shrink topbar padding */
  .topbar { padding: 12px 16px; }

  /* Breadcrumb */
  .breadcrumb { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Content padding */
  .content { padding: 20px 16px; }

  /* Search input full width */
  .search-input { width: 100%; }

  /* Card padding */
  .card { padding: 16px; }

  /* Stack quote header on mobile */
  .quote-header { grid-template-columns: 1fr; }

  /* Estimator grids stack on mobile */
  .est-grid, .est-grid-3 { grid-template-columns: 1fr; }
  .modal-wide { width: 90vw; }
}