/* BizApp Clean CSS - Following KISS, DRY, SRM principles */

/* ==============================================
   1. CSS VARIABLES & RESET
   ============================================== */
:root {
    /* Colors */
    --primary-color: #6366f1;
    --primary-dark: #4f46e5;
    --secondary-color: #10b981;
    --accent-color: #f59e0b;
    --danger-color: #ef4444;
    --success-color: #22c55e;
    --warning-color: #f97316;
    --info-color: #3b82f6;
    
    /* Backgrounds */
    --bg-primary: #f8fafc;
    --bg-secondary: #ffffff;
    --bg-card: #ffffff;
    
    /* Text */
    --text-primary: #1f2937;
    --text-secondary: #6b7280;
    --text-muted: #9ca3af;
    
    /* Borders & Shadows */
    --border-color: #e5e7eb;
    --border-radius: 8px;
    --border-radius-lg: 12px;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    
    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 4rem;

    /* Typography scale */
    --font-xs: 0.7rem;
    --font-sm: 0.8rem;
    --font-md: 0.9rem;
    --font-base: 1rem;
    --font-lg: 1.25rem;
    --font-xl: 1.5rem;
    --font-2xl: 2rem;

    /* Z-index scale */
    --z-nav: 100;
    --z-overlay: 400;
    --z-modal: 500;
    --z-toast: 600;
}

* {
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    margin: 0;
    padding: 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: var(--text-primary);
    line-height: 1.6;
    font-size: 14px;
    min-height: 100vh;
}

/* ==============================================
   PRINT STYLES (minimal, override-heavy, scoped)
   ============================================== */
@media print {
    body { background: #fff !important; font-size: 12px; }
    .nav-main, .footer, .no-print, .modal, .action-bar, .nav-header, .nav-menu, .nav-logout { display: none !important; }
    .container { box-shadow: none !important; background:#fff !important; width:100% !important; max-width:100% !important; margin:0 !important; padding:0 8px !important; }
    .page-header { border: none !important; margin:0 0 8px !important; padding:0 !important; }
    .page-header h1, .page-header h2 { -webkit-text-fill-color: initial !important; background:none !important; color:#000 !important; font-size:1.4rem !important; }
    .dashboard-card { box-shadow: none !important; border: none !important; padding:0 !important; margin:0 !important; }
    .dashboard-card h3 { background:none !important; -webkit-text-fill-color:initial !important; color:#000 !important; padding-left:0 !important; margin:0 0 4px !important; }
    .dashboard-card h3::before { display:none !important; }
    .data-table { box-shadow:none !important; border:1px solid #000 !important; border-radius:0 !important; }
    .data-table th { background:#000 !important; color:#fff !important; box-shadow:none !important; }
    .data-table td, .data-table th { padding:4px 6px !important; font-size:11px !important; border:1px solid #000 !important; }
    .data-table tbody tr:hover { background:#fff !important; box-shadow:none !important; transform:none !important; }
    .status-badge { background:#eee !important; color:#000 !important; border:1px solid #999 !important; box-shadow:none !important; }
    a[href]:after { content:"" !important; }
    .print-only { display:block !important; }
    .page-section { margin:0 !important; }
    .btn, button { display:none !important; }
}

.print-only { display:none; }

/* ==============================================
    2A. STRUCTURAL LAYOUT HELPERS (NEW)
    ============================================== */
.page-header { display:flex; align-items:center; justify-content:space-between; gap:var(--spacing-md); margin:0 0 var(--spacing-lg); padding:0 0 var(--spacing-md); border-bottom:2px solid var(--border-color); }
.page-header h1, .page-header h2 { margin:0; font-size:var(--font-2xl); font-weight:900; background:linear-gradient(90deg,var(--primary-color) 0%, var(--secondary-color) 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.page-header .actions { display:flex; flex-wrap:wrap; gap:var(--spacing-sm); }

/* Project detail header tweaks */
.project-header h1 {
    font-size: calc(var(--font-2xl) * 1.1);
}

.project-view h3 {
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-sm);
    font-size: var(--font-xl);
    font-weight: 700;
    color: var(--text-primary);
}

.project-view h4 {
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-xs);
    font-size: var(--font-lg);
    font-weight: 600;
    color: var(--text-secondary);
}

.page-section { margin-bottom: var(--spacing-xl); }
.page-section:last-child { margin-bottom:0; }

.action-bar { display:flex; align-items:center; flex-wrap:wrap; gap:var(--spacing-sm); margin-bottom:var(--spacing-md); }

/* Unified grid helpers */
.grid-2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--spacing-md); }
.grid-3 { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:var(--spacing-md); }

/* Deprecated alias (retain backward compatibility) */
.main-header { /* Deprecated: use .page-header */ display:flex; align-items:center; justify-content:space-between; }

/* ==============================================
    2B. SPACING & SIZING UTILITIES (NEW)
    ============================================== */
/* Margin utilities */
/* Placeholder selector group retained for purge safelist (intentionally sets no visual change) */
[class*='m-'],[class*='p-']{ outline: none !important; }
.m-0{margin:0!important;} .mt-0{margin-top:0!important;} .mr-0{margin-right:0!important;} .mb-0{margin-bottom:0!important;} .ml-0{margin-left:0!important;}
.m-xs{margin:var(--spacing-xs)!important;} .mt-xs{margin-top:var(--spacing-xs)!important;} .mr-xs{margin-right:var(--spacing-xs)!important;} .mb-xs{margin-bottom:var(--spacing-xs)!important;} .ml-xs{margin-left:var(--spacing-xs)!important;}
.m-sm{margin:var(--spacing-sm)!important;} .mt-sm{margin-top:var(--spacing-sm)!important;} .mr-sm{margin-right:var(--spacing-sm)!important;} .mb-sm{margin-bottom:var(--spacing-sm)!important;} .ml-sm{margin-left:var(--spacing-sm)!important;}
.m-md{margin:var(--spacing-md)!important;} .mt-md{margin-top:var(--spacing-md)!important;} .mr-md{margin-right:var(--spacing-md)!important;} .mb-md{margin-bottom:var(--spacing-md)!important;} .ml-md{margin-left:var(--spacing-md)!important;}
.m-lg{margin:var(--spacing-lg)!important;} .mt-lg{margin-top:var(--spacing-lg)!important;} .mr-lg{margin-right:var(--spacing-lg)!important;} .mb-lg{margin-bottom:var(--spacing-lg)!important;} .ml-lg{margin-left:var(--spacing-lg)!important;}
.m-xl{margin:var(--spacing-xl)!important;} .mt-xl{margin-top:var(--spacing-xl)!important;} .mb-xl{margin-bottom:var(--spacing-xl)!important;} .ml-xl{margin-left:var(--spacing-xl)!important;}
.m-2xl{margin:var(--spacing-2xl)!important;} .mt-2xl{margin-top:var(--spacing-2xl)!important;} .mb-2xl{margin-bottom:var(--spacing-2xl)!important;}

/* Padding utilities */
.p-0{padding:0!important;} .pt-0{padding-top:0!important;} .pr-0{padding-right:0!important;} .pb-0{padding-bottom:0!important;} .pl-0{padding-left:0!important;}
.p-xs{padding:var(--spacing-xs)!important;} .pt-xs{padding-top:var(--spacing-xs)!important;} .pb-xs{padding-bottom:var(--spacing-xs)!important;}
.p-sm{padding:var(--spacing-sm)!important;} .pt-sm{padding-top:var(--spacing-sm)!important;} .pb-sm{padding-bottom:var(--spacing-sm)!important;}
.p-md{padding:var(--spacing-md)!important;} .pt-md{padding-top:var(--spacing-md)!important;} .pb-md{padding-bottom:var(--spacing-md)!important;}
.p-lg{padding:var(--spacing-lg)!important;} .pt-lg{padding-top:var(--spacing-lg)!important;} .pb-lg{padding-bottom:var(--spacing-lg)!important;}
.p-xl{padding:var(--spacing-xl)!important;} .pt-xl{padding-top:var(--spacing-xl)!important;} .pb-xl{padding-bottom:var(--spacing-xl)!important;}

/* Width helpers */
.w-100{width:100%!important;} .max-w-600{max-width:600px!important;} .max-w-800{max-width:800px!important;}

/* Text size utilities */
.text-xs{font-size:var(--font-xs);} .text-sm{font-size:var(--font-sm);} .text-md{font-size:var(--font-md);} .text-base{font-size:var(--font-base);} .text-lg{font-size:var(--font-lg);} .text-xl{font-size:var(--font-xl);} .text-2xl{font-size:var(--font-2xl);}

/* ==============================================
   2. LAYOUT COMPONENTS
   ============================================== */

.container {
    max-width: 95vw;
    width: 95vw;
    margin: 0 auto;
    background-color: var(--bg-secondary);
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    padding: 24px;
    margin-top: 20px;
    margin-bottom: 20px;
    position: relative;
    overflow: visible;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 40px);
}

.container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color), var(--accent-color));
}

/* Navigation */
.nav-main {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(16, 185, 129, 0.05) 100%);
    border-radius: 12px;
    margin: 16px 0 30px 0;
    padding: 20px 0;
    border-bottom: 2px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

/* Document Header (Quotes / Invoices) */
.document-header .company-block h1 {
    font-size: 1.9rem;
    letter-spacing: 1px;
}
.document-header .customer-block h2 {
    font-size: 0.75rem;
    letter-spacing: 1px;
}

.document-header-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    border-bottom: 2px solid #d1d5db;
    padding-bottom: 12px;
}
.document-header-row .company-block { text-align: left; }
.document-header-row .customer-block { text-align: right; }
.document-header-row p { margin: 0; }
.document-header-row .company-block h1 { margin: 0 0 4px 0; }

/* Smaller action buttons */
.quote-view .inline-flex, .invoice-view .inline-flex { padding: 4px 8px !important; font-size: 12px !important; }
.quote-view svg, .invoice-view svg { width: 12px !important; height: 12px !important; }

/* Compact action buttons in document views */
.bg-white .inline-flex svg { vertical-align: middle; }
.bg-white .inline-flex.btn, .bg-white .inline-flex { font-size: 0.75rem; padding: 0.4rem 0.6rem; }
.bg-white .inline-flex svg { width: 14px; height: 14px; }

.nav-menu {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    width: 100%;
}

/* New stacked navigation layout (brand centered above links) */
.nav-main { width:100%; margin-bottom: var(--spacing-lg); }
.nav-header { width:100%; display:flex; align-items:center; justify-content:center; position:relative; margin-bottom: 6px; }
.nav-brand-center { display:inline-block; text-align:center; width:auto; margin-right:0; font-size:1.4rem; }
.nav-menu-links { justify-content:flex-start; }
.nav-menu-links a:first-of-type { margin-left:0; }
.nav-menu-links { position:relative; }
.nav-menu-links .nav-logout { margin-left:auto; }

.help-trigger {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.help-trigger:hover,
.help-trigger:focus {
    outline: none;
    transform: translateY(-50%) scale(1.03);
    box-shadow: 0 6px 18px rgba(99, 102, 241, 0.25);
}

.help-trigger span {
    pointer-events: none;
}

.help-trigger.is-ready::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid rgba(99, 102, 241, 0.25);
    animation: help-trigger-pulse 2.8s ease infinite;
}

@keyframes help-trigger-pulse {
    0% { opacity: 0; transform: scale(0.9); }
    30% { opacity: 1; transform: scale(1.1); }
    60% { opacity: 0; transform: scale(1.2); }
    100% { opacity: 0; transform: scale(0.9); }
}

.help-modal[hidden] {
    display: none;
}

.help-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: var(--z-modal);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.help-modal.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.help-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(2px);
}

.help-modal__dialog {
    position: relative;
    max-width: 520px;
    width: 100%;
    background: var(--bg-secondary);
    border-radius: var(--border-radius-lg);
    box-shadow: 0 25px 45px rgba(15, 23, 42, 0.25);
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.help-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
}

.help-modal__header h2 {
    margin: 0;
    font-size: var(--font-xl);
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.help-modal__close {
    background: transparent;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    color: var(--text-secondary);
    transition: color 0.2s ease, transform 0.2s ease;
}

.help-modal__close:hover,
.help-modal__close:focus {
    color: var(--primary-color);
    transform: scale(1.1);
    outline: none;
}

.help-modal__body {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    max-height: 60vh;
    overflow-y: auto;
    padding-right: 4px;
}

.help-modal__summary {
    margin: 0;
    color: var(--text-secondary);
}

.help-modal__section {
    background: rgba(99, 102, 241, 0.06);
    border-radius: var(--border-radius);
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid rgba(99, 102, 241, 0.1);
}

.help-modal__section h4 {
    margin-top: 0;
    margin-bottom: var(--spacing-xs);
    font-size: var(--font-md);
    color: var(--primary-dark);
}

.help-modal__list {
    margin: 0;
    padding-left: 1.2rem;
    display: grid;
    gap: var(--spacing-xs);
}

.help-modal__list li {
    color: var(--text-primary);
}

.help-modal__footer {
    display: flex;
    justify-content: flex-end;
}

.help-modal-open {
    overflow: hidden;
}

@media (max-width: 600px) {
    .help-modal__dialog {
        max-width: 100%;
        padding: var(--spacing-md);
    }

    .help-modal__section {
        padding: var(--spacing-sm);
    }
}

@media (max-width: 900px){
    .nav-menu-links { justify-content:center; }
    .nav-menu-links .nav-logout { order: 999; margin-left:0; }
}

.nav-brand {
    font-weight: 700;
    background: linear-gradient(90deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-right: var(--spacing-md);
    font-size: 1.2rem;
    letter-spacing: -0.5px;
}

.nav-main a,
.nav-main button {
    display: inline-flex;
    align-items: center;
    margin-right: 8px;
    text-decoration: none;
    color: #374151;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 8px;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
    min-width: fit-content;
    white-space: nowrap;
    cursor: pointer;
    border: 1px solid transparent;
    background: rgba(255, 255, 255, 0.5);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    font-size: 0.875rem;
}

.nav-main a:hover,
.nav-main a.active {
    color: #1f2937;
    background: rgba(255, 255, 255, 0.8);
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border-color: #e5e7eb;
}

.nav-logout {
    margin-left: auto;
}

.nav-logout button {
    background: linear-gradient(135deg, var(--danger-color), #dc2626);
    color: white;
    border: none;
    font-weight: 600;
    margin: 0;
}

.nav-logout button:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.main-content {
    background: transparent;
    padding: 0;
    margin-bottom: var(--spacing-md);
    flex: 1;
}

.footer {
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.875rem;
    padding: 20px;
    margin-top: auto;
    border-top: 1px solid var(--border-color);
    background: rgba(248, 250, 252, 0.8);
    border-radius: 0 0 16px 16px;
    margin-left: -24px;
    margin-right: -24px;
    margin-bottom: -24px;
    padding-left: 24px;
    padding-right: 24px;
}

.footer p {
    margin: 0;
}

.main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 2px solid var(--border-color);
}

.main-header h1 {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 900;
    background: linear-gradient(90deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* ==============================================
   3. CARD SYSTEM
   ============================================== */

.dashboard-card {
    background: var(--bg-card);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    border: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
}

.dashboard-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color), var(--accent-color));
    border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
}

.dashboard-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.15);
    transition: all 0.3s ease;
}

.dashboard-card h3 {
    margin: 0 0 var(--spacing-md) 0;
    font-size: 1.25rem;
    font-weight: 700;
    background: linear-gradient(90deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
    padding-left: 20px;
}

.dashboard-card h3::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
    box-shadow: 0 2px 4px rgba(99, 102, 241, 0.3);
}

/* ==============================================
    FORM ROW NORMALIZATION
    ============================================== */
.form-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--spacing-md); margin-bottom:var(--spacing-md); }
.form-row:last-child { margin-bottom:0; }
.form-row .form-group { margin:0; }

.card {
    background: var(--bg-card);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
}

.card-header {
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-primary);
}

.card-body {
    padding: var(--spacing-lg);
}

/* ==============================================
     3a. HOME DASHBOARD (team, activity, alerts)
     ============================================== */
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 10px; }
.team-member { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 8px; padding: 12px; transition: all .2s ease; }
.team-member:hover { background: #f1f5f9; border-color: #cbd5e1; transform: translateY(-1px); }
.member-info strong { display:block; font-size:14px; color:#1e293b; margin-bottom:4px; }
.member-role { font-size:12px; color:#64748b; font-weight:500; }
.member-dept { font-size:11px; color:#94a3b8; margin-bottom:6px; }
.member-projects { display:flex; align-items:center; gap:6px; margin-top:6px; }
.project-count { font-size:11px; color:#64748b; }
.activity-list { max-height:300px; overflow-y:auto; }
.activity-item { padding:12px 0; border-bottom:1px solid #e2e8f0; }
.activity-item:last-child { border-bottom:none; }
.activity-info strong { color:#1e293b; font-size:14px; }
.activity-meta { font-size:12px; color:#64748b; margin:4px 0; }
.activity-notes { font-size:12px; color:#475569; font-style:italic; margin-top:4px; background:#f8fafc; padding:6px 8px; border-radius:4px; }
.status-badge { background:#10b981; color:#fff; padding:2px 6px; border-radius:12px; font-size:10px; font-weight:500; }
.status-badge.in-progress { background:#f59e0b; }
.low-stock-alerts { margin-top:15px; }
.alert-item { font-size:12px; }
.alert-item strong { color:#dc2626; }
.alert-item small { display:block; margin-top:2px; }
@media (max-width: 768px) {
    .team-grid { grid-template-columns:1fr; }
}

/* ==============================================
    3b. PDF IMPORT TOOL
    ============================================== */
.summary-card { padding:20px; border-radius:8px; text-align:center; box-shadow:0 2px 4px rgba(0,0,0,0.1); background:var(--bg-secondary); }
.summary-card h4 { margin:0 0 10px 0; font-size:14px; opacity:.9; }
.tab-container { border:1px solid var(--border-color); border-radius:4px; overflow:hidden; }
.tab-buttons { display:flex; background:#f5f5f5; border-bottom:1px solid var(--border-color); }
.tab-btn { flex:1; padding:12px; border:none; background:transparent; cursor:pointer; transition:background .2s; }
.tab-btn:hover { background:#e0e0e0; }
.tab-btn.active { background:var(--bg-secondary); border-bottom:2px solid var(--primary-color); font-weight:600; }
.tab-content { display:none; padding:20px; background:var(--bg-secondary); }
.tab-content.active { display:block; }
.info-row, .cost-item { display:flex; justify-content:space-between; padding:5px 0; border-bottom:1px solid #eee; }
.info-row span:first-child { font-weight:600; color:#666; }
#pdf-upload-form { transition:border-color .3s, background-color .3s; }
#pdf-upload-form.dragover { border-color: var(--primary-color); background-color: rgba(99,102,241,0.08); }

/* ==============================================
    3c. SCHEMATIC EDITOR
    ============================================== */
.tool-btn { padding:8px 12px; border:1px solid #ccc; background:#f8f9fa; border-radius:4px; cursor:pointer; font-size:12px; transition:all .2s; }
.tool-btn:hover { background:#e9ecef; border-color:#aaa; }
.tool-btn.active { background:var(--primary-color); color:#fff; border-color:var(--primary-dark); }
#schematic-canvas { border:1px solid #ddd; }
.canvas-element { position:absolute; border:2px solid #333; background:rgba(200,200,200,0.3); cursor:move; }
.canvas-element.selected { border-color:var(--primary-color); background:rgba(99,102,241,0.2); }
.canvas-element.wall { border-color:#000; background:rgba(100,100,100,0.3); }
.canvas-element.door { border-color:#8B4513; background:rgba(139,69,19,0.3); }
.canvas-element.window { border-color:#0064C8; background:rgba(0,100,200,0.3); }
.canvas-element.room { border-color:#666; background:rgba(150,150,150,0.1); }
.canvas-element.dimension { border-color:#FF0000; background:transparent; }

/* ==============================================
    3d. SCHEMATIC HUB
    ============================================== */
.schematic-tabs { display:flex; gap:.5rem; margin:1rem 0; flex-wrap:wrap; }
.tab-btn { background:#eef2ff; border:1px solid #c7d2fe; padding:.5rem 1rem; border-radius:6px; cursor:pointer; font-weight:500; }
.tab-btn.active { background:var(--primary-color); color:#fff; border-color:var(--primary-dark); }
.tab-panels { position:relative; }
.tab-panel { display:none; animation:fade .25s ease; }
.tab-panel.active { display:block; }
.schematic-embed { width:100%; height:70vh; border:1px solid #e2e8f0; border-radius:8px; background:#fff; }
@keyframes fade { from{opacity:0} to{opacity:1} }
.inline-form { display:flex; gap:.5rem; align-items:center; margin:.75rem 0; }
.inline-form input { flex:1; }
@media (max-width:800px){ .schematic-embed { height:70vh; } }

/* ==============================================
    3e. USER PERMISSIONS
    ============================================== */
.permissions-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px; margin:20px 0; }
.permission-section { border:1px solid var(--border-color); border-radius:5px; padding:15px; background:var(--bg-secondary); }
.permission-section h3 { margin:0 0 10px 0; color:var(--text-primary); }
.permission-checkboxes { display:flex; flex-direction:column; gap:8px; }
.permission-checkboxes label { display:flex; align-items:center; gap:8px; font-size:14px; }
.permission-checkboxes input[type="checkbox"] { margin:0; }

/* ==============================================
    3f. LOGIN PAGE
    ============================================== */
html.login-page, body.login-page { height:100%; margin:0; padding:0; background:linear-gradient(135deg,#667eea 0%,#764ba2 100%); }
.login-container { display:flex; align-items:center; justify-content:center; min-height:100vh; width:95vw; margin:0 auto; padding:2rem; box-sizing:border-box; }
.login-card { background:#fff; border-radius:20px; box-shadow:0 20px 40px rgba(0,0,0,0.2); padding:3rem; width:100%; max-width:400px; text-align:center; animation:slideIn .5s ease-out; }
@keyframes slideIn { from{opacity:0; transform:translateY(-20px);} to{opacity:1; transform:translateY(0);} }
.login-card h1 { color:#333; margin-bottom:2rem; font-size:2.5rem; font-weight:900; background:linear-gradient(90deg,var(--primary-color) 0%, var(--secondary-color) 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.login-card .form-group { margin-bottom:1.5rem; text-align:left; }
.login-card .form-group label { display:block; margin-bottom:.5rem; color:#555; font-weight:600; font-size:1rem; }
.login-card .form-group input { width:100%; padding:1rem; border:2px solid #e1e5e9; border-radius:12px; font-size:1rem; transition:all .3s ease; box-sizing:border-box; }
.login-card .form-group input:focus { outline:none; border-color:var(--primary-color); box-shadow:0 0 0 3px rgba(99,102,241,0.1); transform:translateY(-2px); }
.login-button { width:100%; background:linear-gradient(90deg,var(--primary-color) 0%, var(--secondary-color) 100%); color:#fff; border:none; padding:1rem 2rem; border-radius:12px; font-size:1.1rem; font-weight:700; cursor:pointer; transition:all .3s ease; margin-top:1rem; display:flex; align-items:center; justify-content:center; gap:.5rem; }
.login-button:hover { transform:translateY(-2px); box-shadow:0 10px 20px rgba(99,102,241,0.3); }
.login-button:active { transform:translateY(0); }
.login-button svg { width:20px; height:20px; }
@media (max-width:768px){ .login-container{padding:1rem;width:95vw;} .login-card{padding:2rem; max-width:100%;} .login-card h1{font-size:2rem;} }
@media (max-width:480px){ .login-container{padding:.5rem;} .login-card{padding:1.5rem; border-radius:16px;} .login-card h1{font-size:1.8rem; margin-bottom:1.5rem;} .login-card .form-group input{padding:.8rem;} .login-button{padding:.8rem 1.5rem; font-size:1rem;} }

/* ==============================================
   4. BUTTON SYSTEM
   ============================================== */

/* Utility Flex Classes */
.flex { display:flex; }
.flex-wrap { flex-wrap:wrap; }
.flex-row { display:flex; flex-direction:row; }
.justify-end { justify-content:flex-end; }
.items-center { align-items:center; }
.gap-xs { gap:4px; }
.gap-sm { gap:8px; }
.gap-md { gap:12px; }
.gap-lg { gap:15px; }
.gap-xl { gap:24px; }
.mt-lg { margin-top:2rem; }
.mb-md { margin-bottom:15px; }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25;
    border-radius: var(--border-radius);
    text-decoration: none;
    text-align: center;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.btn:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Button Sizes */
.btn-sm {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: 0.75rem;
}

.btn-lg {
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: 1rem;
}

/* Button Variants */
.btn-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--info-color) 100%);
    color: white;
    border: none;
    box-shadow: 0 4px 6px rgba(99, 102, 241, 0.3);
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--primary-dark) 0%, #2563eb 100%);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 6px 12px rgba(99, 102, 241, 0.4);
}

.btn-secondary {
    background: linear-gradient(135deg, var(--text-secondary) 0%, #4b5563 100%);
    color: white;
    border: none;
    box-shadow: 0 4px 6px rgba(107, 114, 128, 0.3);
}

.btn-secondary:hover {
    background: linear-gradient(135deg, var(--text-primary) 0%, #374151 100%);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 6px 12px rgba(107, 114, 128, 0.4);
}

.btn-success {
    background: linear-gradient(135deg, var(--success-color) 0%, var(--secondary-color) 100%);
    color: white;
    border: none;
    box-shadow: 0 4px 6px rgba(34, 197, 94, 0.3);
}

.btn-success:hover {
    background: linear-gradient(135deg, #16a34a 0%, #047857 100%);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 6px 12px rgba(34, 197, 94, 0.4);
}

.btn-danger {
    background: linear-gradient(135deg, var(--danger-color) 0%, #dc2626 100%);
    color: white;
    border: none;
    box-shadow: 0 4px 6px rgba(239, 68, 68, 0.3);
}

.btn-danger:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 6px 12px rgba(239, 68, 68, 0.4);
}

.btn-warning {
    background: linear-gradient(135deg, var(--warning-color) 0%, var(--accent-color) 100%);
    color: white;
    border: none;
    box-shadow: 0 4px 6px rgba(249, 115, 22, 0.3);
}

.btn-warning:hover {
    background: linear-gradient(135deg, #ea580c 0%, #d97706 100%);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 6px 12px rgba(249, 115, 22, 0.4);
}

.btn-info {
    background: linear-gradient(135deg, var(--info-color) 0%, var(--primary-color) 100%);
    color: white;
    border: none;
    box-shadow: 0 4px 6px rgba(59, 130, 246, 0.3);
}

.btn-info:hover {
    background: linear-gradient(135deg, #2563eb 0%, var(--primary-dark) 100%);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 6px 12px rgba(59, 130, 246, 0.4);
}

/* Light / outline variants used across project views and tools */
.btn-light {
    background-color: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
}

.btn-light:hover {
    background-color: #e5e7eb;
    color: #1f2937;
}

.btn-outline {
    background-color: transparent;
    color: #374151;
    border: 1px solid #d1d5db;
}

.btn-outline:hover {
    background-color: #f3f4f6;
    color: #1f2937;
}

/* ==============================================
    5. MODALS (centralized)
   ============================================== */

.modal { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: flex-start; justify-content: center; padding: 40px 20px; z-index: 1000; overflow-y: auto; }
.modal-content { width: 100%; max-width: 860px; background: #fff; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.15); display:flex; flex-direction: column; max-height: 90vh; overflow: hidden; }
.modal-header { display:flex; align-items:center; justify-content: space-between; padding: 16px 20px; border-bottom:1px solid #e2e8f0; position: sticky; top:0; background:#fff; z-index:2; }
.modal-actions { display:flex; gap:.5rem; justify-content:flex-end; padding: 12px 20px 16px; border-top:1px solid #e2e8f0; background:#fff; position: sticky; bottom:0; z-index:2; }
.modal-close { background:none; border:none; font-size:24px; line-height:1; cursor:pointer; padding:4px 8px; }
.customer-details, .employee-details, .generic-details { padding: 16px 20px 8px; overflow-y:auto; }
.customer-details h4, .employee-details h4, .generic-details h4 { margin:12px 0 4px; font-size:13px; text-transform:uppercase; letter-spacing:.5px; color:#64748b; }
.detail-section p { margin:2px 0 6px; font-size:14px; }
.detail-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }
.modal form { flex:1 1 auto; overflow-y:auto; }
.modal .form-group { margin-bottom:12px; }
@media (max-width: 720px) { .modal { padding: 20px 10px; } .modal-content { max-height: 92vh; } .detail-grid { grid-template-columns: 1fr; } }

/* ==============================================
    6. FORM SYSTEM
    ============================================== */

/* Employee modal refinements (previously inline) */
.modal-scroll { padding:16px 20px 80px; overflow:auto; flex:1 1 auto; min-height:0; -webkit-overflow-scrolling:touch; }
.modal-form .form-row { display:flex; gap:16px; flex-wrap:wrap; }
.modal-form .form-group { flex:1 1 200px; display:flex; flex-direction:column; gap:4px; }
.modal-form input, .modal-form select { width:100%; }
.modal-open { overflow:hidden; }
@media (max-width:780px){ .modal { padding:30px 10px; } .modal-content{ max-height:94vh;} .detail-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .detail-grid{ grid-template-columns:1fr; } }

.form-group {
    margin-bottom: var(--spacing-md);
}

.form-group label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-weight: 500;
    color: var(--text-primary);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: var(--spacing-sm);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: 0.875rem;
    transition: border-color 0.15s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.form-group textarea {
    resize: vertical;
    min-height: 80px;
}

/* Form Grids */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.form-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.form-group.full-width {
    grid-column: 1 / -1;
}

.form-actions {
    display: flex;
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-color);
}

.form-helper {
    margin-top: var(--spacing-xs);
    color: var(--text-secondary);
    font-size: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.form-helper strong {
    color: var(--text-primary);
    font-weight: 600;
}

.form-helper__row {
    display: flex;
    gap: var(--spacing-xs);
    align-items: center;
    flex-wrap: wrap;
}

.form-helper__label {
    font-weight: 600;
    color: var(--text-muted);
    min-width: 76px;
}

.form-helper__value {
    color: var(--text-primary);
    word-break: break-word;
}

.quick-quote-new-customer {
    margin-top: var(--spacing-lg);
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    border: 1px dashed rgba(99, 102, 241, 0.25);
    background: rgba(99, 102, 241, 0.06);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.quick-quote-new-customer h3 {
    margin: 0;
    font-size: var(--font-lg);
    font-weight: 700;
    color: var(--primary-dark);
}

.quick-quote-new-customer .form-actions {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    justify-content: flex-start;
    gap: var(--spacing-sm);
}

/* ==============================================
   6. TABLE SYSTEM
   ============================================== */

.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: var(--spacing-md);
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-card);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.data-table th {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--info-color) 100%);
    color: white;
    padding: var(--spacing-md);
    text-align: left;
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 4px rgba(99, 102, 241, 0.2);
    word-break: normal !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
}

/* ==============================================
    7. QUOTE BUILDER (extracted)
    ============================================== */
.quotes-section h1 { color: var(--primary-color); margin-bottom: 2rem; font-size: 2.5rem; font-weight: 700; text-align: center; background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.quote-wizard { max-width: 1000px; margin: 0 auto; }
.wizard-step { animation: fadeIn 0.5s ease-in-out; }
@keyframes fadeIn { from { opacity:0; transform: translateY(20px);} to { opacity:1; transform: translateY(0);} }
.project-type-description { background: linear-gradient(135deg, rgba(99,102,241,.1), rgba(16,185,129,.1)); border-radius:12px; padding:1rem; margin:1rem 0; border-left:4px solid var(--primary-color); display:none; }
.new-customer-section { background: linear-gradient(135deg, rgba(245,158,11,.1), rgba(251,191,36,.1)); border-radius:12px; padding:1.5rem; margin:1rem 0; border:2px solid var(--accent-color); }
.new-customer-section h4 { color: var(--accent-color); margin-bottom:1rem; }
.ai-loading { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:3rem; text-align:center; }
.loading-spinner { width:60px; height:60px; border:4px solid var(--border-color); border-top:4px solid var(--primary-color); border-radius:50%; animation: spin 1s linear infinite; margin-bottom:1rem; }
@keyframes spin { 0% { transform: rotate(0deg);} 100% { transform: rotate(360deg);} }
.ai-suggestions-header { background: linear-gradient(135deg, rgba(99,102,241,.1), rgba(16,185,129,.1)); border-radius:12px; padding:1.5rem; margin-bottom:2rem; border-left:4px solid var(--primary-color); }
.quote-section { margin-bottom:2rem; }
.quote-section h5 { color: var(--primary-color); font-size:1.25rem; font-weight:700; margin-bottom:1rem; padding-bottom:.5rem; border-bottom:2px solid var(--border-color); }
.items-grid { display:grid; gap:1rem; }
.quote-item { background: var(--bg-secondary); border:2px solid var(--border-color); border-radius:12px; padding:1rem; display:flex; flex-direction:column; gap:.75rem; transition: all .2s ease; }
.quote-item:hover { border-color: var(--primary-color); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.quote-item.selected { border-color: var(--success-color); background: linear-gradient(135deg, rgba(34,197,94,.08), rgba(22,163,74,.08)); }
.item-details { flex:1; }
.item-name { font-weight:600; color: var(--text-primary); margin-bottom:.25rem; }
.item-description { font-size:.875rem; color: var(--text-secondary); }
.item-controls { display:flex; flex-wrap:wrap; align-items:center; gap:1rem; }
.item-quantity { display:flex; align-items:center; gap:.5rem; }
.item-quantity input { width:80px; padding:.5rem; border:1px solid var(--border-color); border-radius:6px; text-align:center; }
.item-price { font-weight:700; color: var(--success-color); font-size:1.1rem; min-width:100px; text-align:right; }
.quote-totals { background: linear-gradient(135deg, rgba(99,102,241,.05), rgba(16,185,129,.05)); border-radius:12px; padding:1.5rem; margin-top:2rem; }
.totals-grid { display:flex; flex-direction:column; gap:.75rem; max-width:300px; margin-left:auto; }
.total-line { display:flex; justify-content:space-between; align-items:center; font-size:1.1rem; }
.total-final { font-weight:700; font-size:1.25rem; color: var(--primary-color); border-top:2px solid var(--border-color); padding-top:.75rem; }
.ai-missing-components { background: linear-gradient(135deg, rgba(245,158,11,.1), rgba(251,191,36,.1)); border-radius:12px; padding:1.5rem; margin-bottom:2rem; border-left:4px solid var(--warning-color); }
.missing-component-item { background: var(--bg-secondary); border:1px solid var(--warning-color); border-radius:8px; padding:1rem; margin:.5rem 0; display:flex; justify-content:space-between; align-items:center; }
.missing-component-item .suggestion { flex:1; }
.missing-component-item .add-btn { background: var(--warning-color); color:#fff; border:none; padding:.5rem 1rem; border-radius:6px; cursor:pointer; font-weight:600; }
.missing-component-item .add-btn:hover { background: var(--accent-color); transform:translateY(-1px); }
.add-item-btn { margin-top:1rem; background: var(--primary-color); color:#fff; border:none; padding:.5rem 1rem; border-radius:6px; cursor:pointer; font-size:.9rem; transition: all .3s ease; }
.add-item-btn:hover { background: var(--secondary-color); transform: translateY(-1px); }
.employee-assignment { background: rgba(99,102,241,.1); border-radius:8px; padding:1rem; margin:.5rem 0; border-left:4px solid var(--primary-color); }
.employee-row { margin-bottom:.75rem; }
.labor-details { display:grid; grid-template-columns:1fr 1fr 1fr; gap:1rem; align-items:center; }
.labor-field { display:flex; flex-direction:column; gap:.25rem; }
.employee-assignment label { font-weight:600; color: var(--primary-color); font-size:.9rem; }
.employee-assignment select, .employee-assignment input { padding:.5rem; border:1px solid var(--border-color); border-radius:4px; font-size:.9rem; }
.labor-total { font-weight:700; color: var(--success-color); font-size:1.1rem; padding:.5rem; background: rgba(16,185,129,.1); border-radius:4px; text-align:center; }
.editable-item { border:2px dashed transparent; transition: all .3s ease; }
.editable-item:hover { border-color: var(--primary-color); background: rgba(99,102,241,.05); }
.editable[contenteditable="true"] { background: rgba(255,255,255,.9); border-radius:4px; padding:.25rem; min-height:1.5rem; outline:2px solid var(--primary-color); }
@media (max-width: 768px) { .item-controls { flex-direction:column; gap:.5rem; } .totals-grid { max-width:100%; } .employee-assignment { padding:.75rem; } .labor-details { grid-template-columns:1fr; gap:.75rem; } .labor-field { flex-direction:row; justify-content:space-between; align-items:center; } .employee-assignment select, .employee-assignment input { width:60%; } }

.data-table td {
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
    font-size: 0.875rem;
    word-break: normal;
    overflow-wrap: break-word;
}

.data-table tbody tr:hover {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(16, 185, 129, 0.05) 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(99, 102, 241, 0.1);
}

.data-table tbody tr:last-child td {
    border-bottom: none;
}

/* Table modifiers */
.data-table--compact th, .data-table--compact td { padding: 6px 8px; font-size: var(--font-sm); }
.data-table--borderless td, .data-table--borderless th { border: none !important; }
.data-table--striped tbody tr:nth-child(odd) { background: #f8fafc; }
.data-table--tight td { white-space: nowrap; }

/* Action bar (shared toolbar) */
.action-bar { display:flex; flex-wrap:wrap; gap:var(--spacing-sm); align-items:center; }
.action-bar .spacer { flex:1; }

/* Table Column Types */
.col-name {
    font-weight: 500;
    color: var(--text-primary);
}

.col-email {
    color: var(--text-secondary);
}

.col-budget,
.col-cost {
    text-align: right;
    font-weight: 500;
}

.col-actions {
    white-space: nowrap;
    width: 200px;
    min-width: 200px;
}

/* Action Buttons */
.action-buttons {
    display: flex;
    gap: var(--spacing-xs);
    align-items: center;
    flex-wrap: wrap;
}

/* Quotes table specific (reuse customer look) */
.quotes-table td, .quotes-table th { vertical-align: top; }

/* ==============================================
   7. STATUS BADGES
   ============================================== */

.status-badge {
    display: inline-block;
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 9999px;
    text-align: center;
}

.status-active {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(16, 185, 129, 0.2) 100%);
    color: #065f46;
    border: 1px solid rgba(34, 197, 94, 0.3);
    box-shadow: 0 2px 4px rgba(34, 197, 94, 0.2);
}

.status-inactive {
    background: linear-gradient(135deg, rgba(107, 114, 128, 0.2) 0%, rgba(75, 85, 99, 0.2) 100%);
    color: #374151;
    border: 1px solid rgba(107, 114, 128, 0.3);
    box-shadow: 0 2px 4px rgba(107, 114, 128, 0.2);
}

.status-pending {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.2) 0%, rgba(245, 158, 11, 0.2) 100%);
    color: #92400e;
    border: 1px solid rgba(249, 115, 22, 0.3);
    box-shadow: 0 2px 4px rgba(249, 115, 22, 0.2);
}

.status-complete {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(16, 185, 129, 0.2) 100%);
    color: #065f46;
    border: 1px solid rgba(34, 197, 94, 0.3);
    box-shadow: 0 2px 4px rgba(34, 197, 94, 0.2);
}

/* Phase Badges */
.phase-badge {
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.phase-initial-contact {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #92400e;
    border: 1px solid #f59e0b;
    box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3);
}

.phase-planning {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #1e40af;
    border: 1px solid #3b82f6;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
}

.phase-demo {
    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
    color: #5b21b6;
    border: 1px solid #8b5cf6;
    box-shadow: 0 2px 4px rgba(139, 92, 246, 0.3);
}

.phase-foundation {
    background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%);
    color: #7c2d12;
    border: 1px solid #a855f7;
    box-shadow: 0 2px 4px rgba(168, 85, 247, 0.3);
}

.phase-framing {
    background: linear-gradient(135deg, #fef2f2 0%, #fecaca 100%);
    color: #991b1b;
    border: 1px solid #ef4444;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
}

.phase-finishing {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    color: #065f46;
    border: 1px solid #10b981;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
}

.phase-complete {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    color: #166534;
    border: 1px solid #22c55e;
    box-shadow: 0 2px 4px rgba(34, 197, 94, 0.3);
}

/* ==============================================
   8. MODAL SYSTEM
   ============================================== */

.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
    background-color: var(--bg-card);
    margin: 5% auto;
    padding: var(--spacing-xl);
    border-radius: var(--border-radius-lg);
    width: 90%;
    max-width: 600px;
    box-shadow: var(--shadow-lg);
}

.modal-content.large {
    max-width: 800px;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 0;
    line-height: 1;
}

.modal-close:hover {
    color: var(--danger-color);
}

.modal-actions {
    display: flex;
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-color);
}

/* ==============================================
   9. ALERT SYSTEM
   ============================================== */

.alert {
    padding: 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-weight: 500;
    border-left: 4px solid;
}

.alert-success {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(16, 185, 129, 0.1) 100%);
    border-left-color: var(--success-color);
    color: #065f46;
}

.alert-error {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(220, 38, 38, 0.1) 100%);
    border-left-color: var(--danger-color);
    color: #991b1b;
}

.alert-warning {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(251, 191, 36, 0.1));
    border: 2px solid var(--warning-color);
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    position: relative;
    overflow: hidden;
}

.alert-warning::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--warning-color), var(--accent-color));
}

.alert-warning h3 {
    color: var(--warning-color);
    margin-bottom: 1rem;
    font-size: 1.5rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.alert-info {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(37, 99, 235, 0.1) 100%);
    border-left-color: var(--info-color);
    color: #1e40af;
}

/* ==============================================
   10. DASHBOARD SPECIFIC STYLES
   ============================================== */

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
    margin-top: 24px;
}

.quick-stats {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(16, 185, 129, 0.05) 100%);
    border-radius: 12px;
    border-left: 4px solid var(--primary-color);
    transition: all 0.2s ease;
}

.stat-item:hover {
    transform: translateX(4px);
    border-left-color: var(--secondary-color);
}

.stat-number {
    font-size: 2rem;
    font-weight: 800;
    color: var(--primary-color);
}

.stat-label {
    color: var(--text-secondary);
    font-weight: 500;
}

/* ==============================================
   11. MATERIAL SPECIFIC STYLES
   ============================================== */

.low-stock-row {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.05), rgba(251, 191, 36, 0.05)) !important;
    border-left: 4px solid var(--warning-color);
    animation: pulse-warning 2s infinite;
}

@keyframes pulse-warning {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.3);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(245, 158, 11, 0.1);
    }
}

.unit-display {
    background: linear-gradient(135deg, var(--info-color) 0%, var(--primary-color) 100%);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-block;
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* ==============================================
   12. CUSTOMER TABLE SPECIFIC STYLES
   ============================================== */

.customers-table {
    table-layout: auto !important;
    width: 100% !important;
}

.customers-table .col-name {
    width: 25%;
    min-width: 180px;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    white-space: normal !important;
}

.customers-table .col-contact {
    width: 30%;
    min-width: 220px;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    white-space: normal !important;
}

.customers-table .col-location {
    width: 30%;
    min-width: 200px;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    white-space: normal !important;
}

.customers-table .col-actions {
    width: 15%;
    min-width: 160px;
    white-space: nowrap !important;
}

/* Additional specificity for nested elements */
.customers-table td.col-name,
.customers-table td.col-contact,
.customers-table td.col-location {
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    white-space: normal !important;
    hyphens: none !important;
}

.customers-table .customer-name strong {
    word-break: normal !important;
    overflow-wrap: anywhere !important;
}

.customer-name strong {
    font-size: 0.875rem; /* Same as other table text */
    color: var(--text-primary); /* Normal text color instead of gradient */
    display: inline !important;
    margin-bottom: 0.25rem;
    font-weight: 500; /* Same as other column names */
    word-break: normal !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
}

.customer-name {
    word-break: normal !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.contact-email,
.contact-phone {
    font-size: 0.85em;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.location-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.address-line {
    font-size: 0.85em;
    color: var(--text-secondary);
    line-height: 1.3;
}

/* Detail Sections */
.detail-section {
    margin-bottom: var(--spacing-lg);
}

.detail-section h4 {
    color: var(--primary-color);
    margin-bottom: var(--spacing-sm);
    border-bottom: 2px solid var(--border-color);
    padding-bottom: var(--spacing-xs);
}

.detail-section p {
    margin: var(--spacing-sm) 0;
}

/* ==============================================
   13. SVG ICONS
   ============================================== */

.btn svg,
.action-buttons svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.btn-sm svg {
    width: 0.875rem;
    height: 0.875rem;
}

/* ==============================================
   14. UTILITY CLASSES
   ============================================== */

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

.text-primary { color: var(--primary-color); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.text-success { color: var(--success-color); }
.text-danger { color: var(--danger-color); }
.text-warning { color: var(--warning-color); }

.d-flex { display: flex; }
.d-inline-flex { display: inline-flex; }
.d-block { display: block; }
.d-none { display: none; }

.gap-xs { gap: var(--spacing-xs); }
.gap-sm { gap: var(--spacing-sm); }
.gap-md { gap: var(--spacing-md); }
.gap-lg { gap: var(--spacing-lg); }

/* ==============================================
   15. RESPONSIVE DESIGN (SINGLE SOURCE OF TRUTH)
   ============================================== */

/* Tablet Styles */
@media (max-width: 1024px) {
    .container {
        padding: 16px;
        max-width: 100vw;
        width: 100vw;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    
    .form-grid-3 {
        grid-template-columns: 1fr 1fr;
    }
    
    .customers-table .col-name {
        width: 20%;
    }
    
    .customers-table .col-contact {
        width: 35%;
    }
    
    .customers-table .col-location {
        width: 30%;
    }
    
    .customers-table .col-actions {
        width: 15%;
    }
    
    .data-table .col-actions {
        width: 150px;
        min-width: 150px;
    }
    
    .btn-sm {
        padding: 0.2rem 0.4rem;
        font-size: 0.7rem;
        min-width: 45px;
    }
}

/* Mobile Styles */
@media (max-width: 768px) {
    .container {
        padding: 12px;
        border-radius: 8px;
    }
    
    .table-responsive {
        margin-left: -12px;
        margin-right: -12px;
        padding-bottom: var(--spacing-sm);
    }
    
    /* Navigation mobile layout */
    .nav-menu {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-xs);
    }
    
    .nav-main a,
    .nav-main button {
        font-size: 0.8rem;
        padding: var(--spacing-sm);
        margin-right: 0;
        text-align: center;
    }
    
    .nav-logout {
        margin-left: 0;
        margin-top: var(--spacing-xs);
    }
    
    .main-content {
        padding: var(--spacing-sm);
    }
    
    .main-header {
        flex-direction: column;
        gap: var(--spacing-md);
        align-items: stretch;
    }
    
    .main-header h1 {
        font-size: 1.5rem;
        text-align: center;
    }
    
    /* Form responsive layout */
    .form-grid,
    .form-grid-2,
    .form-grid-3 {
        grid-template-columns: 1fr;
    }
    
    .form-actions {
        flex-direction: column;
    }
    
    /* Mobile table layout - card style */
    .data-table,
    .data-table thead,
    .data-table tbody,
    .data-table th,
    .data-table td,
    .data-table tr {
        display: block;
    }
    
    .data-table thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    
    .data-table tr {
        border: 1px solid var(--border-color);
        border-radius: var(--border-radius);
        margin-bottom: var(--spacing-md);
        padding: var(--spacing-md);
        background: var(--bg-card);
        box-shadow: var(--shadow-sm);
    }
    
    .data-table td {
        border: none;
        position: relative;
        padding: var(--spacing-sm) 0;
        padding-left: 30%;
        margin-bottom: var(--spacing-sm);
        word-wrap: break-word;
        word-break: break-word;
        overflow-wrap: break-word;
        white-space: normal;
    }
    
    .data-table td:before {
        content: attr(data-label) ": ";
        position: absolute;
        left: 0;
        width: 25%;
        text-align: left;
        font-weight: bold;
        color: var(--primary-color);
        font-size: 0.85em;
    }
    
    .data-table td:last-child {
        padding-left: 0;
    }
    
    .data-table td:last-child:before {
        content: "Actions: ";
        position: static;
        width: auto;
        margin-bottom: var(--spacing-xs);
        display: block;
    }
    
    /* Mobile action buttons */
    .action-buttons {
        flex-direction: column;
        gap: var(--spacing-xs);
    }
    
    .action-buttons .btn {
        width: 100%;
        justify-content: center;
    }
    
    /* Contact and location info mobile layout */
    .contact-info,
    .location-info {
        flex-direction: column;
    }
    
    /* Dashboard mobile */
    .dashboard-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .dashboard-card {
        padding: var(--spacing-md);
    }
}

/* Small mobile styles */
@media (max-width: 480px) {
    .container {
        padding: 8px;
        margin-top: 5px;
        margin-bottom: 5px;
    }
    
    .table-responsive {
        margin-left: -8px;
        margin-right: -8px;
    }
    
    .nav-main {
        margin: 8px 0 16px 0;
        padding: 12px 0;
    }
    
    .nav-main a,
    .nav-main button {
        padding: 6px 12px;
        font-size: 0.75rem;
    }
    
    .main-header h1 {
        font-size: 1.25rem;
    }
    
    .btn {
        padding: 6px 12px;
        font-size: 0.75rem;
    }
    
    .btn-sm {
        padding: 4px 8px;
        font-size: 0.7rem;
    }
    
    .data-table td {
        padding-left: 0;
    }
    
    .data-table td:before {
        position: static;
        width: auto;
        margin-bottom: 4px;
        display: block;
    }
}

/* ==============================================
   16. ANIMATIONS & TRANSITIONS
   ============================================== */

.btn,
.form-group input,
.form-group select,
.form-group textarea,
.data-table tbody tr,
.dashboard-card,
.nav-main a,
.status-badge,
.phase-badge {
    transition: all 0.3s ease;
}

.dashboard-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.15);
}

.btn:hover {
    transform: translateY(-2px);
}

.btn:active {
    transform: translateY(0);
}

.status-badge:hover,
.phase-badge:hover {
    transform: scale(1.05);
}

.unit-display:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.nav-main a:hover {
    transform: translateY(-1px);
}

/* Subtle pulse animation for important elements */
@keyframes subtle-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

.low-stock-row {
    animation: subtle-pulse 3s infinite;
}

/* Loading shimmer effect */
@keyframes shimmer {
    0% { background-position: -468px 0; }
    100% { background-position: 468px 0; }
}

.loading-shimmer {
    animation: shimmer 1.2s ease-in-out infinite;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 468px 100%;
}

.modal {
    transition: opacity 0.3s ease-in-out;
}

.modal-content {
    transform: translateY(-20px);
    transition: transform 0.3s ease-in-out;
}

.modal[style*="display: block"] .modal-content {
    transform: translateY(0);
}