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

/* ── Root variables ── */
:root {
    --valex-primary:     #0162E8;
    --valex-primary-dim: rgba(1,98,232,0.1);
    --valex-primary-soft:#D9E8FE;
    --valex-success:     #22C03C;
    --valex-danger:      #EE335E;
    --valex-warning:     #FBBC0B;
    --valex-info:        #00B9FF;
    --valex-dark:        #364261;

    --bg:          #ECF0FA;
    --bg-card:     #FFFFFF;
    --bg-hover:    #ECF0FA;
    --border:      #DEEAFD;
    --border-input:#E1E5EF;
    --border-table:#DDE2EF;

    --text:        #031B4E;
    --text-sub:    #4D5875;
    --text-muted:  #7987A1;
    --text-card:   #242F48;
    --text-nav:    #6D7790;
    --text-cat:    #2C364C;

    --shadow-card: -8px 12px 18px 0px rgb(218,222,232);
    --shadow-topbar: 5px 7px 26px -5px rgb(205,212,231);
    --sidebar-w:   240px;
    --topbar-h:    64px;

    /* legacy vars used by existing inline styles */
    --accent:      #0162E8;
    --accent-dim:  rgba(1,98,232,0.1);
    --error:       #EE335E;
    --error-dim:   rgba(238,51,94,0.1);
    --success:     #22C03C;
    --success-dim: rgba(34,192,60,0.1);
    --warning:     #FBBC0B;
    --warning-dim: rgba(251,188,11,0.1);
}

/* ── Base ── */
body {
    background: var(--bg) !important;
    color: var(--text) !important;
    font-family: 'Roboto', sans-serif !important;
}

/* ══════════════════════════════════════════════════════════
   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;
    width: var(--sidebar-w) !important;
}

/* Brand / logo area */
.sb-brand {
    height: var(--topbar-h) !important;
    border-bottom: 1px solid #EAE8F1 !important;
    padding: 0 1.25rem !important;
    display: flex !important;
    align-items: center !important;
    margin-bottom: 0 !important;
}
.sb-brand h2 {
    color: var(--valex-dark) !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
}
.sb-brand .badge {
    background: var(--valex-primary-soft) !important;
    color: var(--valex-primary) !important;
    font-size: 0.62rem !important;
    border-radius: 3px !important;
}

.brand-icon {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    box-shadow: none !important;
    border-radius: 7px !important;
}

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

/* Nav items */
.sb-nav { padding: 0.25rem 0 !important; }

.nav-item {
    color: var(--text-nav) !important;
    border-radius: 0 !important;
    padding: 10px 20px 10px 22px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    height: 42px !important;
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    border-left: 3px solid transparent !important;
    transition: color 0.15s, background 0.15s !important;
    position: relative !important;
}
.nav-item svg {
    width: 22px !important;
    height: 22px !important;
    flex-shrink: 0 !important;
    color: #9eabc0 !important;
}
.nav-item:hover:not(.disabled) {
    background: rgba(1,98,232,0.04) !important;
    color: var(--valex-primary) !important;
}
.nav-item:hover:not(.disabled) svg { color: var(--valex-primary) !important; }

.nav-item.active {
    background: rgba(1,98,232,0.06) !important;
    color: var(--valex-primary) !important;
    border-left-color: #005EE9 !important;
    font-weight: 600 !important;
}
.nav-item.active svg { color: var(--valex-primary) !important; }
.nav-item.active::before { display: none !important; }

.nav-divider {
    background: #EAE8F1 !important;
    margin: 8px 0 !important;
    height: 1px !important;
}

/* Sidebar footer */
.sb-footer {
    border-top: 1px solid #EAE8F1 !important;
    background: #FAFBFE !important;
}
.sb-user-name { color: var(--text) !important; font-size: 0.85rem !important; font-weight: 600 !important; }
.sb-user-role { color: var(--text-muted) !important; font-size: 0.72rem !important; }
.avatar {
    background: var(--valex-primary-soft) !important;
    color: var(--valex-primary) !important;
    border: none !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
}
.btn-logout {
    border-color: #E1E5EF !important;
    color: var(--text-muted) !important;
    font-size: 0.7rem !important;
    border-radius: 3px !important;
}
.btn-logout:hover { border-color: var(--valex-danger) !important; color: var(--valex-danger) !important; }

/* ══════════════════════════════════════════════════════════
   TOPBAR — white with Valex shadow
   ══════════════════════════════════════════════════════════ */
.topbar {
    background: #FFFFFF !important;
    border-bottom: 1px solid #DCE7F5 !important;
    box-shadow: var(--shadow-topbar) !important;
    height: var(--topbar-h) !important;
    padding: 0 1.5rem !important;
}
.topbar h1 {
    color: var(--text) !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
}
.topbar .back-btn {
    color: var(--text-muted) !important;
    border-color: #E1E5EF !important;
    background: #f8fafc !important;
    border-radius: 3px !important;
    font-size: 0.78rem !important;
}
.topbar .back-btn:hover {
    color: var(--valex-primary) !important;
    border-color: var(--valex-primary) !important;
    background: var(--valex-primary-soft) !important;
}

/* ══════════════════════════════════════════════════════════
   STAT CARDS — Valex style
   ══════════════════════════════════════════════════════════ */
.stats-grid { gap: 1.25rem !important; }

.stat-card {
    background: #FFFFFF !important;
    border: 1px solid #DEEAFD !important;
    border-top: none !important;
    border-radius: 7px !important;
    box-shadow: var(--shadow-card) !important;
    padding: 20px !important;
    position: relative !important;
    overflow: hidden !important;
}
.stat-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0; left: 0; right: 0 !important;
    height: 3px !important;
    background: #0162E8 !important;
    border-radius: 7px 7px 0 0 !important;
}
.stat-card.green::before  { background: #22C03C !important; }
.stat-card.accent::before { background: #00B9FF !important; }
.stat-card.red::before    { background: #EE335E !important; }

.stat-card .label {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: var(--text-muted) !important;
    margin-bottom: 10px !important;
}
.stat-card .value {
    font-size: 2rem !important;
    font-weight: 700 !important;
    color: #0162E8 !important;
    line-height: 1 !important;
    margin-bottom: 4px !important;
}
.stat-card.green  .value { color: #22C03C !important; }
.stat-card.accent .value { color: #00B9FF !important; }
.stat-card.red    .value { color: #EE335E !important; }
.stat-card .sub {
    font-size: 12px !important;
    color: var(--text-muted) !important;
}

/* ══════════════════════════════════════════════════════════
   TABLE — Valex style
   ══════════════════════════════════════════════════════════ */
.table-wrap {
    background: #FFFFFF !important;
    border: 1px solid #DEEAFD !important;
    border-radius: 7px !important;
    box-shadow: var(--shadow-card) !important;
    overflow: hidden !important;
}
thead { background: #FFFFFF !important; border-bottom: 1px solid #DDE2EF !important; }
th {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #37374E !important;
    padding: 12px 15px 10px !important;
    border-bottom: 1px solid #DDE2EF !important;
    white-space: nowrap !important;
}
td {
    font-size: 14px !important;
    color: #22252F !important;
    padding: 12px 15px !important;
    border-bottom: 1px solid #DDE2EF !important;
    vertical-align: middle !important;
}
tr:last-child td { border-bottom: none !important; }
tr:hover td { background: #ECF0FA !important; }
tr:nth-child(odd) td { background: #FAFBFE !important; }
tr:nth-child(odd):hover td { background: #ECF0FA !important; }

.backup-table th {
    font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important;
    color: #37374E !important; background: #FAFBFE !important; border-bottom: 1px solid #DDE2EF !important;
    padding: 10px 12px !important; letter-spacing: 0.5px !important;
}
.backup-table td { font-size: 13px !important; color: #22252F !important; border-bottom: 1px solid #DDE2EF !important; padding: 10px 12px !important; }

/* ══════════════════════════════════════════════════════════
   TOOLBAR
   ══════════════════════════════════════════════════════════ */
.toolbar input, .toolbar select {
    background: #FFFFFF !important;
    border: 1px solid #E1E5EF !important;
    color: #4D5875 !important;
    border-radius: 3px !important;
    height: 36px !important;
    font-size: 13px !important;
}
.toolbar input::placeholder { color: #7987A1 !important; }
.toolbar input:focus, .toolbar select:focus {
    border-color: var(--valex-primary) !important;
    box-shadow: 0 0 0 3px rgba(1,98,232,0.1) !important;
}

/* ══════════════════════════════════════════════════════════
   BADGES
   ══════════════════════════════════════════════════════════ */
.badge {
    font-size: 10px !important;
    border-radius: 3px !important;
    font-weight: 500 !important;
    padding: 3px 6px 4px !important;
    letter-spacing: 0.3px !important;
}
.badge.green  { background: rgba(34,192,60,0.12)   !important; color: #1a9630 !important; }
.badge.red    { background: rgba(238,51,94,0.1)    !important; color: #c4183c !important; }
.badge.yellow { background: rgba(251,188,11,0.15)  !important; color: #b8860b !important; }
.badge.blue   { background: #D9E8FE                !important; color: #0162E8 !important; }
.badge.grey   { background: rgba(115,127,158,0.12) !important; color: #737F9E !important; }

.role-super_admin { background: rgba(103,58,183,0.1) !important; color: #673AB7 !important; border-radius: 3px !important; }
.role-admin       { background: #D9E8FE              !important; color: #0162E8 !important; border-radius: 3px !important; }
.role-user        { background: rgba(115,127,158,0.1)!important; color: #737F9E !important; border-radius: 3px !important; }
.role-vendor      { background: rgba(34,192,60,0.1) !important; color: #1a9630 !important; border-radius: 3px !important; }

.trigger-manual  { background: rgba(103,58,183,0.1) !important; color: #673AB7 !important; border-radius: 3px !important; }
.trigger-daily   { background: rgba(34,192,60,0.1)  !important; color: #1a9630 !important; border-radius: 3px !important; }
.trigger-weekly  { background: rgba(251,188,11,0.15)!important; color: #b8860b !important; border-radius: 3px !important; }
.trigger-monthly { background: #D9E8FE              !important; color: #0162E8 !important; border-radius: 3px !important; }
.trigger-unknown { background: rgba(115,127,158,0.1)!important; color: #737F9E !important; border-radius: 3px !important; }

/* ══════════════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════════════ */
.btn-sm {
    border-radius: 3px !important;
    font-size: 12px !important;
    padding: 5px 12px !important;
    font-weight: 500 !important;
    border: 1px solid #E1E5EF !important;
    color: #4D5875 !important;
    background: #FFFFFF !important;
    transition: all 0.15s !important;
}
.btn-sm:hover { background: #ECF0FA !important; color: var(--text) !important; border-color: #c8d0e0 !important; }
.btn-sm.primary {
    background: var(--valex-primary) !important;
    color: #fff !important;
    border-color: var(--valex-primary) !important;
}
.btn-sm.primary:hover { background: #0052c5 !important; border-color: #0052c5 !important; }
.btn-sm.danger  { color: var(--valex-danger) !important; border-color: rgba(238,51,94,0.35) !important; background: transparent !important; }
.btn-sm.danger:hover  { background: rgba(238,51,94,0.08) !important; }
.btn-sm.success { color: var(--valex-success) !important; border-color: rgba(34,192,60,0.35) !important; background: transparent !important; }
.btn-sm.success:hover { background: rgba(34,192,60,0.08) !important; }

/* ══════════════════════════════════════════════════════════
   MODAL — Valex style
   ══════════════════════════════════════════════════════════ */
.modal {
    background: #FFFFFF !important;
    border: 1px solid #E3E8F7 !important;
    border-radius: 7px !important;
    box-shadow: 0 20px 60px rgba(54,66,97,0.2) !important;
}
.modal-header {
    border-bottom: 1px solid #E3E8F7 !important;
    padding: 16px 20px !important;
}
.modal-header h3 { color: #242F48 !important; font-size: 1rem !important; font-weight: 700 !important; }
.modal-close { color: #7987A1 !important; }
.modal-close:hover { color: var(--text) !important; }
.modal-body { padding: 25px 20px !important; }
.modal-footer { border-top: 1px solid #E3E8F7 !important; padding: 14px 20px !important; }
.modal-overlay { background: rgba(3,27,78,0.35) !important; }

/* Form fields */
.form-row label { color: #4D5875 !important; font-size: 13px !important; font-weight: 500 !important; margin-bottom: 5px !important; }
.form-row input, .form-row select, .form-row textarea {
    background: #FFFFFF !important;
    border: 1px solid #E1E5EF !important;
    border-radius: 3px !important;
    color: #4D5875 !important;
    font-size: 14px !important;
    height: 40px !important;
    padding: 6px 12px !important;
}
.form-row textarea { height: auto !important; min-height: 80px !important; }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
    border-color: var(--valex-primary) !important;
    box-shadow: 0 0 0 3px rgba(1,98,232,0.1) !important;
    outline: none !important;
}
.form-row input::placeholder, .form-row textarea::placeholder { color: #7987A1 !important; }
.form-row select option { background: #fff !important; }
.form-row .hint { font-size: 11px !important; color: #7987A1 !important; }
.pw-eye { color: #7987A1 !important; }
.pw-eye:hover { color: var(--valex-primary) !important; }

/* ══════════════════════════════════════════════════════════
   SECTION HEADER & PANELS
   ══════════════════════════════════════════════════════════ */
.section-header h2 {
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #242F48 !important;
}

/* Activity feed panel */
[style*="background:var(--bg-card)"],
[style*="background: var(--bg-card)"] {
    background: #FFFFFF !important;
    border: 1px solid #DEEAFD !important;
    border-radius: 7px !important;
    box-shadow: var(--shadow-card) !important;
}

/* ══════════════════════════════════════════════════════════
   ACTIVITY FEED
   ══════════════════════════════════════════════════════════ */
.activity-item { border-bottom: 1px solid #EAE8F1 !important; padding: 10px 0 !important; }
.activity-item:last-child { border-bottom: none !important; }
.activity-dot { background: var(--valex-primary) !important; }
.activity-action { color: var(--text) !important; font-size: 13px !important; font-weight: 500 !important; }
.activity-meta { color: #7987A1 !important; font-size: 11px !important; }

/* ══════════════════════════════════════════════════════════
   BANNERS
   ══════════════════════════════════════════════════════════ */
.banner.error   { background: rgba(238,51,94,0.08) !important; color: #c4183c !important; border: 1px solid rgba(238,51,94,0.2) !important; border-radius: 3px !important; }
.banner.success { background: rgba(34,192,60,0.08) !important; color: #1a9630 !important; border: 1px solid rgba(34,192,60,0.2) !important; border-radius: 3px !important; }

/* ══════════════════════════════════════════════════════════
   AUDIT LOG
   ══════════════════════════════════════════════════════════ */
.audit-detail { background: #ECF0FA !important; color: #4D5875 !important; border-radius: 3px !important; }
td.expandable:hover { color: var(--valex-primary) !important; }

/* ══════════════════════════════════════════════════════════
   SCHEDULE / BACKUP
   ══════════════════════════════════════════════════════════ */
.schedule-row { border-bottom: 1px solid #DDE2EF !important; }
.schedule-row select, .schedule-row input[type=time], .schedule-row input[type=number] {
    background: #FFFFFF !important; border: 1px solid #E1E5EF !important;
    color: #4D5875 !important; border-radius: 3px !important; font-size: 13px !important;
}
.schedule-label { color: var(--text) !important; font-size: 13px !important; }
.backup-section-title { color: #7987A1 !important; font-size: 11px !important; }

/* ══════════════════════════════════════════════════════════
   PAGINATION
   ══════════════════════════════════════════════════════════ */
.pagination { color: #7987A1 !important; }
.pagination button {
    background: #FFFFFF !important; border: 1px solid #E1E5EF !important;
    color: #4D5875 !important; border-radius: 3px !important; font-size: 12px !important;
}
.pagination button:not(:disabled):hover { border-color: var(--valex-primary) !important; color: var(--valex-primary) !important; }

/* ══════════════════════════════════════════════════════════
   MISC
   ══════════════════════════════════════════════════════════ */
.empty-state { color: #7987A1 !important; font-size: 13px !important; }
.toggle-track { background: #DDE2EF !important; border: none !important; }
.toggle input:checked + .toggle-track { background: var(--valex-success) !important; }
.spinner-sm { border-color: #DDE2EF !important; border-top-color: var(--valex-primary) !important; }
.sa-pw-divider { border-top: 1px solid #E3E8F7 !important; }
.sa-pw-label { color: #7987A1 !important; font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; }
#settings-panel a { color: var(--valex-primary) !important; }
#settings-panel a:hover { color: #0052c5 !important; }
.text-muted { color: #7987A1 !important; }