/* ══════════════════════════════════════════════════════════
   Toolbox App — Valex-Inspired Theme
   Source: https://codeigniter.spruko.com/valex/ltr/public/pages/index
   ══════════════════════════════════════════════════════════ */

:root {
    --bg-darker:          #ECF0FA;
    --bg-dark:            #FFFFFF;
    --bg-card:            #FFFFFF;
    --bg-card-hover:      #ECF0FA;
    --border-color:       #DEEAFD;
    --accent-primary:     #0162E8;
    --accent-primary-hover:#0052c5;
    --accent-primary-dim: rgba(1,98,232,0.1);
    --success:            #22C03C;
    --success-dim:        rgba(34,192,60,0.1);
    --error:              #EE335E;
    --error-dim:          rgba(238,51,94,0.1);
    --text-primary:       #031B4E;
    --text-secondary:     #4D5875;
    --text-muted:         #7987A1;
    --header-height:      64px;
    --sidebar-width:      280px;
    --radius-md:          7px;
    --radius-lg:          7px;
    --radius-xl:          7px;
    --shadow-card:        -8px 12px 18px 0px rgb(218,222,232);
    --shadow-topbar:      5px 7px 26px -5px rgb(205,212,231);
}

/* ── Base ── */
body {
    background: #ECF0FA !important;
    color: #031B4E !important;
    font-family: 'Roboto', sans-serif !important;
}
a { color: #0162E8; }

/* ══════════════════════════════════════════════════════════
   SIDEBAR — white, Valex style
   ══════════════════════════════════════════════════════════ */
.sidebar {
    background: #FFFFFF !important;
    border-right: 1px solid #E3E3E3 !important;
    box-shadow: 0 8px 14.72px 1.28px rgba(229,228,230,0.5) !important;
}

/* Brand area */
.brand {
    height: 64px !important;
    padding: 0 1.25rem !important;
    margin-bottom: 0 !important;
    border-bottom: 1px solid #EAE8F1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.65rem !important;
}
.brand h2 {
    color: #364261 !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
}
.logo-icon {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    box-shadow: none !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 7px !important;
}
.logo-icon svg { width: 18px !important; height: 18px !important; stroke: #fff !important; }

/* Nav category label */
.nav-label {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #2C364C !important;
    padding: 12px 20px 5px 22px !important;
    margin-bottom: 0 !important;
}

/* Nav section */
.nav-section { gap: 0 !important; }
.nav-menu { gap: 0 !important; }

/* Nav items */
.nav-item {
    color: #6D7790 !important;
    border-radius: 0 !important;
    padding: 10px 20px 10px 22px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    height: 42px !important;
    gap: 7px !important;
    border-left: 3px solid transparent !important;
    transition: color 0.15s, background 0.15s !important;
    text-decoration: none !important;
}
.nav-item svg {
    width: 22px !important;
    height: 22px !important;
    flex-shrink: 0 !important;
    color: #9eabc0 !important;
    stroke-width: 1.8px !important;
}
.nav-item:hover:not(.disabled) {
    background: rgba(1,98,232,0.04) !important;
    color: #0162E8 !important;
}
.nav-item:hover:not(.disabled) svg { color: #0162E8 !important; }
.nav-item.active {
    background: rgba(1,98,232,0.06) !important;
    color: #0162E8 !important;
    border-left-color: #005EE9 !important;
    font-weight: 600 !important;
}
.nav-item.active svg { color: #0162E8 !important; }
.nav-item.active::before { display: none !important; }
.nav-item.disabled { opacity: 0.45 !important; }

/* SOON badge inside nav */
.nav-item span[style*="f59e0b"] {
    background: rgba(251,188,11,0.15) !important;
    color: #b8860b !important;
    border-radius: 3px !important;
    font-size: 10px !important;
}

/* ══════════════════════════════════════════════════════════
   TOPBAR — white, Valex style
   ══════════════════════════════════════════════════════════ */
.topbar {
    background: #FFFFFF !important;
    border-bottom: 1px solid #DCE7F5 !important;
    box-shadow: 5px 7px 26px -5px rgb(205,212,231) !important;
    backdrop-filter: none !important;
    height: 64px !important;
    padding: 0 1.5rem !important;
}

/* Breadcrumb */
.breadcrumb { color: #7987A1 !important; font-size: 13px !important; }
.separator { color: #C0C9D8 !important; }
.current-page { color: #031B4E !important; font-weight: 600 !important; font-size: 13px !important; }
.text-muted { color: #7987A1 !important; }

/* Settings gear button */
#global-settings-btn {
    border: 1px solid #E1E5EF !important;
    color: #7987A1 !important;
    background: #FAFBFE !important;
    border-radius: 3px !important;
    transition: all 0.15s !important;
}
#global-settings-btn:hover {
    color: #0162E8 !important;
    border-color: #0162E8 !important;
    background: #D9E8FE !important;
}

/* Admin Panel button */
#topbar-admin-btn {
    background: #D9E8FE !important;
    color: #0162E8 !important;
    border: 1px solid rgba(1,98,232,0.3) !important;
    border-radius: 3px !important;
    font-size: 0.78rem !important;
    font-weight: 500 !important;
}
#topbar-admin-btn:hover { background: #0162E8 !important; color: #fff !important; }

/* User area */
.user-profile { padding: 0.35rem 0.5rem !important; border-radius: 3px !important; }
.user-profile:hover { background: #ECF0FA !important; }
.avatar {
    background: #D9E8FE !important;
    color: #0162E8 !important;
    border: none !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
}
.user-name { color: #031B4E !important; font-size: 0.85rem !important; font-weight: 600 !important; }
.user-role { color: #7987A1 !important; font-size: 0.72rem !important; }

/* Logout button */
#topbar-logout-btn {
    border: 1px solid #E1E5EF !important;
    color: #7987A1 !important;
    background: #FAFBFE !important;
    border-radius: 3px !important;
    font-size: 0.78rem !important;
}
#topbar-logout-btn:hover { border-color: #EE335E !important; color: #EE335E !important; background: rgba(238,51,94,0.05) !important; }

/* ══════════════════════════════════════════════════════════
   CONTENT AREA
   ══════════════════════════════════════════════════════════ */
.content-area { background: #ECF0FA !important; padding: 1.75rem 2rem !important; }

/* Page titles */
.module-header h1 { color: #031B4E !important; font-size: 1.3rem !important; font-weight: 600 !important; }
.subtitle { color: #7987A1 !important; font-size: 14px !important; margin-bottom: 1.5rem !important; }

/* ══════════════════════════════════════════════════════════
   MODULE CARDS (Home dashboard)
   ══════════════════════════════════════════════════════════ */
.dashboard-grid { gap: 1.25rem !important; }

.module-card {
    background: #FFFFFF !important;
    border: 1px solid #DEEAFD !important;
    border-radius: 7px !important;
    box-shadow: -8px 12px 18px 0px rgb(218,222,232) !important;
    padding: 1.5rem !important;
    transition: box-shadow 0.2s, transform 0.2s !important;
}
.module-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: -8px 16px 24px 0px rgb(200,210,228) !important;
    border-color: #0162E8 !important;
}

/* Card icon */
.card-icon {
    width: 48px !important;
    height: 48px !important;
    background: #D9E8FE !important;
    color: #0162E8 !important;
    border-radius: 7px !important;
}
.card-icon svg { width: 22px !important; height: 22px !important; }

/* Card text */
.module-card h3 { color: #242F48 !important; font-size: 15px !important; font-weight: 600 !important; }
.module-card p { color: #7987A1 !important; font-size: 13px !important; line-height: 1.55 !important; }

/* ══════════════════════════════════════════════════════════
   UPLOAD / DROP ZONE
   ══════════════════════════════════════════════════════════ */
.card {
    background: #FFFFFF !important;
    border: 1px solid #DEEAFD !important;
    border-radius: 7px !important;
    box-shadow: -8px 12px 18px 0px rgb(218,222,232) !important;
}
.drop-zone {
    border: 2px dashed #DDE2EF !important;
    background: #FAFBFE !important;
    border-radius: 7px !important;
}
.drop-zone:hover, .drop-zone.dragover {
    border-color: #0162E8 !important;
    background: rgba(1,98,232,0.04) !important;
}
.upload-icon-container {
    background: #ECF0FA !important;
    color: #0162E8 !important;
    box-shadow: 0 0 0 8px rgba(1,98,232,0.08) !important;
}
.drop-zone:hover .upload-icon-container { box-shadow: 0 0 0 12px rgba(1,98,232,0.1) !important; }

/* ══════════════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════════════ */
.btn-primary {
    background: #0162E8 !important;
    color: #fff !important;
    border-radius: 3px !important;
    padding: 9px 20px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border: none !important;
}
.btn-primary:hover {
    background: #0052c5 !important;
    box-shadow: 0 4px 12px rgba(1,98,232,0.3) !important;
    transform: translateY(-1px) !important;
}
.btn-outline {
    background: #FFFFFF !important;
    border: 1px solid #E1E5EF !important;
    color: #4D5875 !important;
    border-radius: 3px !important;
}
.btn-outline:hover { background: #ECF0FA !important; border-color: #c8d0e0 !important; color: #031B4E !important; }
.btn-success {
    background: #22C03C !important;
    border-radius: 3px !important;
    color: #fff !important;
}
.btn-success:hover { background: #1aab30 !important; }

/* ══════════════════════════════════════════════════════════
   FORM CONTROLS
   ══════════════════════════════════════════════════════════ */
.form-control {
    background: #FFFFFF !important;
    border: 1px solid #E1E5EF !important;
    border-radius: 3px !important;
    color: #4D5875 !important;
    font-size: 14px !important;
    height: 40px !important;
}
.form-control:focus {
    border-color: #0162E8 !important;
    box-shadow: 0 0 0 3px rgba(1,98,232,0.1) !important;
}
.form-control::placeholder { color: #7987A1 !important; }

/* ══════════════════════════════════════════════════════════
   WORKSHEET / TABLES (CCS module)
   ══════════════════════════════════════════════════════════ */
.worksheet-display {
    background: #FAFBFE !important;
    border: 1px solid #DDE2EF !important;
    border-radius: 7px !important;
}
.worksheet-table th { border-bottom: 1px solid #DDE2EF !important; color: #37374E !important; font-size: 11px !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; }
.worksheet-table td { border-bottom: 1px solid #DDE2EF !important; color: #22252F !important; font-size: 13px !important; }
.worksheet-section-header { background: #ECF0FA !important; color: #0162E8 !important; border-radius: 3px !important; }

/* ══════════════════════════════════════════════════════════
   SETTINGS PANEL (slide-in)
   ══════════════════════════════════════════════════════════ */
#settings-panel {
    background: #FFFFFF !important;
    border-left: 1px solid #DCE7F5 !important;
    box-shadow: -5px 7px 26px -5px rgb(205,212,231) !important;
}
#settings-panel h3, #settings-panel h4 { color: #242F48 !important; }
#settings-panel p { color: #4D5875 !important; font-size: 13px !important; }
#settings-panel a { color: #0162E8 !important; }
#settings-panel hr { border-top: 1px solid #EAE8F1 !important; }
#settings-panel input {
    background: #FAFBFE !important; border: 1px solid #E1E5EF !important;
    color: #4D5875 !important; border-radius: 3px !important; font-size: 13px !important;
}
#settings-panel input:focus { border-color: #0162E8 !important; }
#settings-panel input::placeholder { color: #7987A1 !important; }
#settings-panel .btn-outline {
    border: 1px solid #E1E5EF !important; background: #fff !important;
    color: #4D5875 !important; border-radius: 3px !important;
}
#settings-panel .btn-outline:hover { border-color: #0162E8 !important; color: #0162E8 !important; }
#settings-close-btn { color: #7987A1 !important; }
#settings-close-btn:hover { color: #031B4E !important; }
#pkg-api-key-toggle { color: #7987A1 !important; font-size: 0.72rem !important; }

/* ══════════════════════════════════════════════════════════
   AI TOGGLE
   ══════════════════════════════════════════════════════════ */
.ai-toggle-track { background: #DDE2EF !important; border-color: #DDE2EF !important; }
.ai-toggle input:checked + .ai-toggle-track { background: #22C03C !important; border-color: #22C03C !important; }

/* ══════════════════════════════════════════════════════════
   SUCCESS / ERROR STATES
   ══════════════════════════════════════════════════════════ */
.success-icon-container {
    background: rgba(34,192,60,0.1) !important; color: #22C03C !important;
    box-shadow: 0 0 0 8px rgba(34,192,60,0.06) !important;
}
.error-icon-container {
    background: rgba(238,51,94,0.1) !important; color: #EE335E !important;
    box-shadow: 0 0 0 8px rgba(238,51,94,0.06) !important;
}
.state-container h2 { color: #031B4E !important; }
.state-container p { color: #7987A1 !important; }
.error-text { color: #EE335E !important; }
.spinner { border-color: #DDE2EF !important; border-top-color: #0162E8 !important; }
.progress-bar { background: #0162E8 !important; }
.progress-bar-container { background: #DDE2EF !important; }

/* ══════════════════════════════════════════════════════════
   PACKAGES MODULE
   ══════════════════════════════════════════════════════════ */
.pkg-sidebar .card { background: #FFFFFF !important; border: 1px solid #DEEAFD !important; border-radius: 7px !important; box-shadow: var(--shadow-card) !important; }
.pkg-drop-zone { background: #FAFBFE !important; border: 2px dashed #DDE2EF !important; border-radius: 5px !important; }
.pkg-drop-zone:hover, .pkg-drop-zone.dragover { border-color: #0162E8 !important; background: rgba(1,98,232,0.04) !important; }
.pkg-doc-item { background: #ECF0FA !important; color: #4D5875 !important; border-radius: 4px !important; font-size: 12px !important; }
.pkg-spec-card { background: #FAFBFE !important; border: 1px solid #DDE2EF !important; border-radius: 5px !important; }
.pkg-spec-card-header { color: #4D5875 !important; }
.pkg-spec-card-header svg { color: #0162E8 !important; }
.pkg-spec-excerpt { color: #7987A1 !important; }
.pkg-spec-excerpt mark { background: #D9E8FE !important; color: #0162E8 !important; border-radius: 2px !important; }
.pkg-results-header { border-bottom: 1px solid #DDE2EF !important; color: #031B4E !important; font-weight: 600 !important; }
.pkg-results-header:hover { color: #0162E8 !important; }
.pkg-badge { background: #D9E8FE !important; color: #0162E8 !important; border-radius: 50px !important; font-size: 10px !important; font-weight: 600 !important; }
.pkg-drawing-row { background: #FAFBFE !important; border: 1px solid #DDE2EF !important; border-radius: 5px !important; }
.pkg-drawing-title { color: #031B4E !important; }
.pkg-drawing-meta { color: #7987A1 !important; }
.pkg-drawing-keywords span { background: #D9E8FE !important; color: #0162E8 !important; border-radius: 3px !important; }
.pkg-saved-item { background: #FAFBFE !important; color: #4D5875 !important; border-radius: 4px !important; }
.pkg-saved-item:hover { background: #ECF0FA !important; color: #0162E8 !important; }
.pkg-boq-table th { background: #ECF0FA !important; color: #37374E !important; border-bottom: 2px solid #0162E8 !important; font-size: 11px !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; }
.pkg-boq-table td { border-bottom: 1px solid #DDE2EF !important; color: #22252F !important; }
.pkg-boq-row-heading td { background: rgba(1,98,232,0.06) !important; color: #0162E8 !important; font-weight: 700 !important; }
.pkg-boq-row-subheading td { background: rgba(1,98,232,0.03) !important; color: #4D5875 !important; }
.pkg-boq-row-item:hover td { background: #ECF0FA !important; }
.pkg-radio-label { color: #4D5875 !important; font-size: 13px !important; }
.pkg-ai-status { background: #ECF0FA !important; color: #7987A1 !important; border: 1px solid #DDE2EF !important; border-radius: 3px !important; }
.pkg-ai-status.active { background: rgba(34,192,60,0.1) !important; color: #1a9630 !important; border-color: rgba(34,192,60,0.25) !important; }
.pkg-ai-badge-inline { background: #D9E8FE !important; color: #0162E8 !important; border-radius: 3px !important; }
.pkg-ai-reason { color: #7987A1 !important; }

/* Quotes module */
#quotes-success-list .quote-item { border-bottom: 1px solid #DDE2EF !important; }
#quotes-success-list .quote-item:hover { background: #ECF0FA !important; }
.trade-header { color: #0162E8 !important; border-bottom: 1px dashed #DDE2EF !important; font-size: 11px !important; font-weight: 700 !important; }

.production-card { background: #FAFBFE !important; border: 1px solid #DDE2EF !important; border-radius: 7px !important; }
.production-label { color: #7987A1 !important; font-size: 11px !important; text-transform: uppercase !important; }
.production-value { color: #0162E8 !important; font-weight: 700 !important; }