/* ============================================================
   DARK SLATE PRO — 2026 Modern Admin Theme
   Option A: Dark navy sidebar, neon blue/purple gradients
   ============================================================ */

:root {
    --bg-base:      #0f172a;
    --bg-card:      #1e293b;
    --bg-card2:     #263347;
    --bg-hover:     #2d3f57;
    --sidebar-bg:   #0b1120;
    --sidebar-w:    255px;
    --accent:       #3b82f6;
    --accent2:      #8b5cf6;
    --accent-grad:  linear-gradient(135deg, #3b82f6, #8b5cf6);
    --glow:         0 0 18px rgba(59,130,246,.45);
    --text-primary: #f1f5f9;
    --text-muted:   #94a3b8;
    --border:       rgba(255,255,255,.07);
    --radius:       12px;
    --radius-sm:    8px;
}

/* ── Global ── */
*, *::before, *::after { box-sizing: border-box; }

body {
    background: var(--bg-base) !important;
    color: var(--text-primary) !important;
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif !important;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-base); }
::-webkit-scrollbar-thumb { background: #334155; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ══════════════════════════════════════════
   SIDEBAR
══════════════════════════════════════════ */
.side-bar {
    background: var(--sidebar-bg) !important;
    border-right: 1px solid var(--border) !important;
    box-shadow: 4px 0 24px rgba(0,0,0,.4) !important;
}

.side-bar-logo {
    background: var(--sidebar-bg) !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 20px 18px !important;
}

.side-bar-logo img { filter: brightness(1.1); }

/* Nav items */
.side-bar-manu li a {
    color: var(--text-muted) !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    padding: 10px 18px !important;
    border-radius: var(--radius-sm) !important;
    margin: 2px 10px !important;
    transition: all .2s ease !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.side-bar-manu li a:hover {
    background: rgba(59,130,246,.1) !important;
    color: var(--text-primary) !important;
}

/* Active / selected item */
.side-bar-manu li:hover > a,
.side-bar-manu li.active > a {
    background: var(--accent-grad) !important;
    color: #fff !important;
    box-shadow: var(--glow) !important;
}

/* Remove the old left bar indicator */
.side-bar-manu li:hover::before,
.side-bar-manu li.active::before { display: none !important; }

/* Dropdown sub-menu */
.side-bar-manu li .dropdown-menu {
    background: rgba(30,41,59,.6) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    margin: 2px 10px 2px 30px !important;
    padding: 4px 0 !important;
}

.side-bar-manu li .dropdown-menu li a {
    color: var(--text-muted) !important;
    font-size: 13px !important;
    padding: 7px 14px !important;
    margin: 1px 4px !important;
    border-radius: 6px !important;
}

.side-bar-manu li .dropdown-menu li a:hover,
.side-bar-manu li .dropdown-menu li a.active {
    background: rgba(59,130,246,.15) !important;
    color: var(--accent) !important;
    box-shadow: none !important;
}

/* ── Custom dropdown arrow (replaces old FA ::before) ── */
.side-bar-manu li.dropdown > a::after {
    content: '' !important;
    display: inline-block !important;
    width: 6px !important;
    height: 6px !important;
    border-right: 1.5px solid #475569 !important;
    border-bottom: 1.5px solid #475569 !important;
    transform: rotate(-45deg) !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
    transition: transform .25s, border-color .2s !important;
}
.side-bar-manu li.dropdown.active > a::after {
    transform: rotate(45deg) !important;
    border-color: rgba(255,255,255,.6) !important;
}

/* Sidebar icons */
.sidebar-icon, .sidebar-icon img { opacity: .85; }
.side-bar-manu li.active > a .sidebar-icon,
.side-bar-manu li:hover > a .sidebar-icon { opacity: 1; }

/* ══════════════════════════════════════════
   SIDEBAR COLLAPSED STATE (60px icon-only)
══════════════════════════════════════════ */

/* Hide text but keep icon visible when collapsed */
.side-bar.active .side-bar-manu > ul > li > a > span:last-of-type {
    display: none !important;
}
.side-bar.active .side-bar-manu li.dropdown > a::after { display: none !important; }

/* Section label rows hidden when collapsed */
.side-bar.active .side-bar-manu li[style*="pointer-events:none"],
.side-bar.active .side-bar-manu li[style*="pointer-events: none"] {
    display: none !important;
}

/* Center icon in collapsed state */
.side-bar.active .side-bar-manu li > a {
    justify-content: center !important;
    padding: 11px !important;
    margin: 3px 6px !important;
}

/* Tooltip on hover when collapsed */
.side-bar.active .side-bar-manu li > a .sidebar-icon {
    margin: 0 !important;
}

/* Hide sub-menus in collapsed state */
.side-bar.active .side-bar-manu li .dropdown-menu {
    display: none !important;
}

/* Hide logo text when collapsed */
.side-bar.active .side-bar-logo span {
    display: none !important;
}

/* Icon colors using FA */
.side-bar-manu li a i {
    color: var(--text-muted) !important;
    font-size: 16px !important;
    width: 20px !important;
    text-align: center !important;
    transition: color .2s !important;
}
.side-bar-manu li.active > a i,
.side-bar-manu li:hover > a i { color: #fff !important; }

/* ── Hide the old FA chevron ::before on dropdown items ─ */
/* They look broken when sidebar is collapsed (show as lone `>`) */
.side-bar-manu .dropdown::before,
.side-bar-manu .inner-dropdown::before {
    display: none !important;
}

/* ══════════════════════════════════════════
   TOP HEADER
══════════════════════════════════════════ */
.main-header-section {
    background: rgba(15,23,42,.85) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-bottom: 1px solid var(--border) !important;
    box-shadow: 0 1px 20px rgba(0,0,0,.3) !important;
}

.sidebar-opner i { color: var(--text-primary) !important; }

/* Profile avatar in header */
.main-header-section .profile-info img {
    border: 2px solid var(--accent) !important;
    border-radius: 50% !important;
}

.main-header-section .profile-info .dropdown-menu,
.main-header-section .dropdown-menu {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.4) !important;
    padding: 8px !important;
}

.main-header-section .profile-info .dropdown-menu li a {
    color: var(--text-primary) !important;
    border-radius: var(--radius-sm) !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
    transition: background .15s !important;
}

.main-header-section .profile-info .dropdown-menu li a:hover {
    background: rgba(59,130,246,.15) !important;
    color: var(--accent) !important;
}

/* Notification badge */
.main-header-section .notifications span.bg-red {
    background: linear-gradient(135deg,#ef4444,#f97316) !important;
    border-radius: 99px !important;
}

/* ══════════════════════════════════════════
   MAIN CONTENT AREA
══════════════════════════════════════════ */
.section-container {
    background: var(--bg-base) !important;
}

.erp-state-overview-section {
    padding: 24px 28px !important;
}

/* ══════════════════════════════════════════
   STAT / KPI CARDS
══════════════════════════════════════════ */
.erp-state-overview-wrapper,
.dashboard-card-body,
.erp-state-card,
.state-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,.25) !important;
    transition: transform .2s, box-shadow .2s !important;
}

.erp-state-overview-wrapper:hover,
.dashboard-card-body:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.35) !important;
}

.dashboard-card-body strong {
    color: var(--text-muted) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: .5px !important;
}

/* Stat card icon circles */
.state-icon,
.erp-state-icon {
    background: var(--accent-grad) !important;
    border-radius: 12px !important;
    box-shadow: var(--glow) !important;
}

/* ══════════════════════════════════════════
   SECTION / PAGE TITLES
══════════════════════════════════════════ */
.table-title,
.table-title-two,
.table-title-three {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) var(--radius) 0 0 !important;
    padding: 16px 20px !important;
}

.table-title h3,
.table-title h4,
.table-title h5,
.table-title-two h3,
.table-title-two h4,
.table-title-three h3,
.table-title-three h4,
.table-title-three h5 {
    color: var(--text-primary) !important;
    font-weight: 700 !important;
    margin: 0 !important;
}

/* Create/Add button */
.create-new-btn,
a.create-new-btn {
    background: var(--accent-grad) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--radius-sm) !important;
    font-weight: 600 !important;
    padding: 9px 20px !important;
    font-size: 13px !important;
    box-shadow: var(--glow) !important;
    transition: opacity .2s, transform .15s !important;
}
.create-new-btn:hover { opacity: .9 !important; transform: translateY(-1px) !important; color:#fff !important; }

/* ══════════════════════════════════════════
   TABLES
══════════════════════════════════════════ */
.table-wrapper,
.responsive-table {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 0 0 var(--radius) var(--radius) !important;
    overflow: hidden !important;
}

table.table {
    color: var(--text-primary) !important;
    margin-bottom: 0 !important;
}

table.table thead tr,
table.table thead th,
table.table thead td {
    background: var(--bg-card2) !important;
    color: var(--text-muted) !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .5px !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 12px 16px !important;
}

table.table tbody tr {
    border-bottom: 1px solid var(--border) !important;
    transition: background .15s !important;
}

table.table tbody tr:hover {
    background: var(--bg-hover) !important;
}

table.table tbody td {
    color: var(--text-primary) !important;
    padding: 12px 16px !important;
    vertical-align: middle !important;
    font-size: 13.5px !important;
    border: none !important;
    border-bottom: 1px solid var(--border) !important;
}

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

/* ══════════════════════════════════════════
   FORMS & INPUTS
══════════════════════════════════════════ */
.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="date"],
textarea,
select {
    background: var(--bg-base) !important;
    border: 1.5px solid rgba(255,255,255,.1) !important;
    color: var(--text-primary) !important;
    border-radius: var(--radius-sm) !important;
    font-size: 13.5px !important;
    transition: border-color .2s, box-shadow .2s !important;
}

.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus,
select:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,.2) !important;
    background: var(--bg-base) !important;
    color: var(--text-primary) !important;
    outline: none !important;
}

.form-control::placeholder,
textarea::placeholder { color: #4b6280 !important; }

label,
.form-label { color: var(--text-muted) !important; font-weight: 500 !important; font-size: 13px !important; }

/* Nice Select */
.nice-select {
    background: var(--bg-base) !important;
    border: 1.5px solid rgba(255,255,255,.1) !important;
    color: var(--text-primary) !important;
    border-radius: var(--radius-sm) !important;
}
.nice-select .list {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
}
.nice-select .option:hover,
.nice-select .option.selected { background: rgba(59,130,246,.15) !important; color: var(--accent) !important; }
.nice-select .option { color: var(--text-primary) !important; }

/* ══════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════ */
.btn-primary,
.btn-custom-warning,
button[type="submit"].btn {
    background: var(--accent-grad) !important;
    border: none !important;
    color: #fff !important;
    border-radius: var(--radius-sm) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    padding: 9px 20px !important;
    box-shadow: 0 4px 14px rgba(59,130,246,.3) !important;
    transition: opacity .2s, transform .15s !important;
}
.btn-primary:hover,
.btn-custom-warning:hover { opacity: .9 !important; transform: translateY(-1px) !important; color:#fff !important; }

.btn-secondary, .btn-light {
    background: var(--bg-card2) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-primary) !important;
    border-radius: var(--radius-sm) !important;
    font-size: 13px !important;
}
.btn-secondary:hover, .btn-light:hover {
    background: var(--bg-hover) !important;
    color: #fff !important;
}

.btn-danger {
    background: linear-gradient(135deg,#ef4444,#dc2626) !important;
    border: none !important;
    border-radius: var(--radius-sm) !important;
    font-size: 13px !important;
}

.btn-success {
    background: linear-gradient(135deg,#22c55e,#16a34a) !important;
    border: none !important;
    border-radius: var(--radius-sm) !important;
    font-size: 13px !important;
}

.btn-warning {
    background: linear-gradient(135deg,#f59e0b,#d97706) !important;
    border: none !important;
    color: #fff !important;
    border-radius: var(--radius-sm) !important;
    font-size: 13px !important;
}

.btn-info {
    background: linear-gradient(135deg,#06b6d4,#0891b2) !important;
    border: none !important;
    color: #fff !important;
    border-radius: var(--radius-sm) !important;
    font-size: 13px !important;
}

.btn-sm { padding: 5px 12px !important; font-size: 12px !important; }

/* ══════════════════════════════════════════
   CARDS / PANELS
══════════════════════════════════════════ */
.card, .panel, .cards {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,.2) !important;
}
.card-header {
    background: var(--bg-card2) !important;
    border-bottom: 1px solid var(--border) !important;
    color: var(--text-primary) !important;
    font-weight: 700 !important;
}
.card-body {
    color: var(--text-primary) !important;
    background: var(--bg-card) !important;
}

/* ══════════════════════════════════════════
   MODALS
══════════════════════════════════════════ */
.modal-content {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    box-shadow: 0 20px 60px rgba(0,0,0,.6) !important;
    color: var(--text-primary) !important;
}
.modal-header {
    background: var(--bg-card2) !important;
    border-bottom: 1px solid var(--border) !important;
}
.modal-title { color: var(--text-primary) !important; font-weight: 700 !important; }
.modal-footer { border-top: 1px solid var(--border) !important; background: var(--bg-card) !important; }
.btn-close { filter: invert(1) !important; opacity: .7 !important; }

/* Backdrop */
.modal-backdrop { background: rgba(0,0,0,.7) !important; }

/* ══════════════════════════════════════════
   BADGES / PILLS
══════════════════════════════════════════ */
.badge.bg-success { background: linear-gradient(135deg,#22c55e,#16a34a) !important; }
.badge.bg-danger  { background: linear-gradient(135deg,#ef4444,#dc2626) !important; }
.badge.bg-warning { background: linear-gradient(135deg,#f59e0b,#d97706) !important; color:#fff !important; }
.badge.bg-info    { background: linear-gradient(135deg,#06b6d4,#0891b2) !important; }
.badge.bg-primary { background: var(--accent-grad) !important; }
.badge.bg-secondary { background: var(--bg-card2) !important; color: var(--text-muted) !important; }

/* ══════════════════════════════════════════
   BREADCRUMB
══════════════════════════════════════════ */
.breadcrumb-item { color: var(--text-muted) !important; font-size: 13px !important; }
.breadcrumb-item a { color: var(--accent) !important; }
.breadcrumb-item.active { color: var(--text-primary) !important; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--text-muted) !important; }

/* ══════════════════════════════════════════
   PAGINATION
══════════════════════════════════════════ */
.pagination .page-link {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-primary) !important;
    border-radius: var(--radius-sm) !important;
    margin: 0 2px !important;
    font-size: 13px !important;
}
.pagination .page-link:hover { background: rgba(59,130,246,.15) !important; color: var(--accent) !important; }
.pagination .page-item.active .page-link { background: var(--accent-grad) !important; border-color: transparent !important; color:#fff !important; }
.pagination .page-item.disabled .page-link { opacity: .4 !important; }

/* ══════════════════════════════════════════
   ALERTS
══════════════════════════════════════════ */
.alert {
    border-radius: var(--radius-sm) !important;
    border: none !important;
    font-size: 13.5px !important;
}
.alert-success { background: rgba(34,197,94,.15) !important; color: #86efac !important; border-left: 3px solid #22c55e !important; }
.alert-danger   { background: rgba(239,68,68,.15)  !important; color: #fca5a5 !important; border-left: 3px solid #ef4444 !important; }
.alert-warning  { background: rgba(245,158,11,.15) !important; color: #fde68a !important; border-left: 3px solid #f59e0b !important; }
.alert-info     { background: rgba(6,182,212,.15)  !important; color: #67e8f9 !important; border-left: 3px solid #06b6d4 !important; }

/* ══════════════════════════════════════════
   TABLE TOP FILTER FORM (search bars above tables)
══════════════════════════════════════════ */
.table-top-form {
    background: var(--bg-card2) !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 14px 20px !important;
}

/* ══════════════════════════════════════════
   STATUS BADGES in tables
══════════════════════════════════════════ */
.text-success { color: #4ade80 !important; }
.text-danger  { color: #f87171 !important; }
.text-warning { color: #fbbf24 !important; }
.text-info    { color: #38bdf8 !important; }
.text-muted   { color: var(--text-muted) !important; }
.text-primary { color: var(--accent) !important; }
.text-white   { color: #fff !important; }

/* ══════════════════════════════════════════
   ACTION DROPDOWN in tables (Edit/Delete menus)
══════════════════════════════════════════ */
.dropdown-menu {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.4) !important;
    padding: 6px !important;
    min-width: 140px !important;
}
.dropdown-item {
    color: var(--text-primary) !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    padding: 7px 12px !important;
    transition: background .15s !important;
}
.dropdown-item:hover { background: rgba(59,130,246,.15) !important; color: var(--accent) !important; }
.dropdown-item.text-danger:hover { background: rgba(239,68,68,.15) !important; color: #f87171 !important; }
.dropdown-divider { border-color: var(--border) !important; }

/* ══════════════════════════════════════════
   TAB NAVIGATION
══════════════════════════════════════════ */
.nav-tabs {
    border-bottom: 1px solid var(--border) !important;
}
.nav-tabs .nav-link {
    color: var(--text-muted) !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 10px 16px !important;
    transition: all .2s !important;
}
.nav-tabs .nav-link:hover { color: var(--text-primary) !important; background: transparent !important; }
.nav-tabs .nav-link.active {
    background: transparent !important;
    color: var(--accent) !important;
    border-bottom-color: var(--accent) !important;
}

.nav-pills .nav-link {
    color: var(--text-muted) !important;
    border-radius: var(--radius-sm) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background: var(--accent-grad) !important;
    color: #fff !important;
}

/* ══════════════════════════════════════════
   PAGE HEADER (breadcrumb area)
══════════════════════════════════════════ */
.erp-page-header,
.page-header {
    background: transparent !important;
    margin-bottom: 20px !important;
}

/* ══════════════════════════════════════════
   TOASTR NOTIFICATIONS
   Positioned bottom-right (set in script.blade.php).
   Fallback: if top-right, push below the 60px header.
══════════════════════════════════════════ */
#toast-container {
    /* Safety offset so toasts never overlap the 60px topbar */
}
#toast-container.toast-top-right {
    top: 70px !important;   /* below the 60px header */
    right: 16px !important;
}
#toast-container.toast-bottom-right {
    bottom: 20px !important;
    right: 16px !important;
}
#toast-container .toast {
    border-radius: var(--radius-sm) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.5) !important;
    opacity: 1 !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    min-width: 280px !important;
    padding: 14px 16px 14px 50px !important;
    border: none !important;
}
#toast-container .toast-success { background: linear-gradient(135deg,#16a34a,#15803d) !important; }
#toast-container .toast-error   { background: linear-gradient(135deg,#dc2626,#b91c1c) !important; }
#toast-container .toast-warning { background: linear-gradient(135deg,#d97706,#b45309) !important; }
#toast-container .toast-info    { background: linear-gradient(135deg,#0891b2,#0e7490) !important; }
#toast-container .toast-title   { font-size: 14px !important; font-weight: 700 !important; }
#toast-container .toast-message { font-size: 13px !important; opacity: .92 !important; }
#toast-container .toast-progress { background: rgba(255,255,255,.35) !important; height: 3px !important; }
#toast-container .toast-close-button { color: rgba(255,255,255,.7) !important; font-size: 16px !important; }

/* ══════════════════════════════════════════
   CLOSE BUTTON (sidebar mobile)
══════════════════════════════════════════ */
.close-btn { color: var(--text-muted) !important; }
.close-btn:hover { color: #fff !important; }

/* ══════════════════════════════════════════
   HR DIVIDERS
══════════════════════════════════════════ */
hr { border-color: var(--border) !important; }

/* ══════════════════════════════════════════
   MISC OVERRIDES
══════════════════════════════════════════ */
/* Remove harsh white backgrounds anywhere */
.bg-white, .bg-light { background: var(--bg-card) !important; }
.border { border-color: var(--border) !important; }
.shadow, .shadow-sm { box-shadow: 0 4px 20px rgba(0,0,0,.25) !important; }

/* Input group text */
.input-group-text {
    background: var(--bg-card2) !important;
    border: 1.5px solid rgba(255,255,255,.1) !important;
    color: var(--text-muted) !important;
}

/* Checkbox & radio */
.form-check-input {
    background-color: var(--bg-base) !important;
    border-color: rgba(255,255,255,.2) !important;
}
.form-check-input:checked {
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
}

/* Toggle switch */
.form-switch .form-check-input:checked { background-color: var(--accent) !important; }

/* ══════════════════════════════════════════
   REMOVE BOOTSTRAP VALIDATION TICK/CHECKMARK
   ICONS from form inputs.
   jQuery Validate triggers .was-validated which
   renders green SVG check marks on every valid
   input — remove them entirely in dark theme.
══════════════════════════════════════════ */
.was-validated .form-control:valid,
.was-validated .form-select:valid,
.was-validated .form-check-input:valid,
.form-control.is-valid,
.form-select.is-valid,
.form-check-input.is-valid {
    background-image: none !important;
    border-color: rgba(255,255,255,.1) !important;
    padding-right: 0.75rem !important;
}
.was-validated .form-control:valid:focus,
.form-control.is-valid:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,.2) !important;
}
/* Also hide the green valid-feedback text */
.valid-feedback { display: none !important; }
/* Keep invalid (error) feedback visible */
.invalid-feedback,
label.error { color: #f87171 !important; font-size: 12px !important; margin-top: 4px !important; }

/* ══════════════════════════════════════════
   FIX: FLOATING BORDER LABELS → PROPER STACKED LABELS
   The old theme uses position:relative + top:11px + background:#fff
   to float labels ON the input border (material design style).
   Override that entirely for a clean dark UI.
══════════════════════════════════════════ */

/* Every label inside forms — reset floating-label trick */
.order-form-section label,
.order-form-section .col-lg-4 > label,
.order-form-section .col-lg-12 > label,
.order-form-section .col-md-4 > label,
.order-form-section .col-md-6 > label,
.erp-table-section label,
.table-form-section label,
.form-wrapper label,
label {
    position: static !important;
    left: auto !important;
    top: auto !important;
    background: transparent !important;
    padding: 0 !important;
    z-index: auto !important;
    display: block !important;
    margin-bottom: 6px !important;
    margin-top: 0 !important;
    color: #94a3b8 !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    text-align: left !important;
    letter-spacing: .2px !important;
}

/* Each field group — add top spacing so fields breathe */
.order-form-section .col-lg-4,
.order-form-section .col-lg-6,
.order-form-section .col-lg-8,
.order-form-section .col-lg-12,
.order-form-section .col-md-4,
.order-form-section .col-md-6,
.order-form-section .col-sm-6 {
    margin-top: 18px !important;
}

/* Input / select inside order-form-section */
.order-form-section .form-control,
.order-form-section .form-select,
.order-form-section select,
.order-form-section .table-select {
    background: #0f172a !important;
    border: 1.5px solid rgba(255,255,255,.1) !important;
    color: #f1f5f9 !important;
    border-radius: 10px !important;
    padding: 11px 14px !important;
    font-size: 13.5px !important;
    width: 100% !important;
    box-shadow: none !important;
    transition: border-color .2s, box-shadow .2s !important;
}
.order-form-section .form-control:focus,
.order-form-section .form-select:focus,
.order-form-section select:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,.2) !important;
    outline: none !important;
}
.order-form-section .form-control::placeholder { color: #334155 !important; }

/* File input */
.order-form-section input[type="file"].form-control {
    padding: 8px 14px !important;
    color: #94a3b8 !important;
    cursor: pointer !important;
}
.order-form-section input[type="file"]::file-selector-button {
    background: #1e293b !important;
    color: #94a3b8 !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    border-radius: 6px !important;
    padding: 5px 12px !important;
    margin-right: 10px !important;
    cursor: pointer !important;
    font-size: 12px !important;
}
.order-form-section input[type="file"]::file-selector-button:hover {
    background: #263347 !important;
    color: #f1f5f9 !important;
}

/* Section wrapper itself */
.order-form-section {
    background: #1e293b !important;
    border: 1px solid rgba(255,255,255,.07) !important;
    border-radius: 0 0 14px 14px !important;
    padding: 24px !important;
}

/* Page/section header row */
.table-header,
.erp-table-section .table-header {
    background: #263347 !important;
    border: 1px solid rgba(255,255,255,.07) !important;
    border-bottom: none !important;
    border-radius: 14px 14px 0 0 !important;
    padding: 16px 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}
.table-header h4,
.table-header h5 {
    color: #f1f5f9 !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    margin: 0 !important;
}
/* CRITICAL: print-inner-page must stay hidden on screen
   even when it also has .table-header (which has display:flex !important above).
   This rule loads after .table-header so it wins. */
.print-inner-page {
    display: none !important;
}
@media print {
    .print-inner-page {
        display: flex !important;
    }
}

/* "Add Employee" back link button in page header */
.add-order-btn,
a.add-order-btn {
    background: linear-gradient(135deg,#3b82f6,#8b5cf6) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 8px 18px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    box-shadow: 0 0 14px rgba(59,130,246,.35) !important;
    transition: opacity .2s !important;
}
.add-order-btn:hover { opacity: .9 !important; color: #fff !important; }

/* Reset/Save button pair */
.theme-btn {
    background: linear-gradient(135deg,#3b82f6,#8b5cf6) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 11px 32px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: opacity .2s, transform .15s !important;
    box-shadow: 0 4px 16px rgba(59,130,246,.35) !important;
}
.theme-btn:hover { opacity: .9 !important; transform: translateY(-1px) !important; }
.theme-btn.border-btn {
    background: transparent !important;
    border: 1.5px solid rgba(255,255,255,.15) !important;
    color: #94a3b8 !important;
    box-shadow: none !important;
}
.theme-btn.border-btn:hover {
    background: rgba(255,255,255,.05) !important;
    color: #f1f5f9 !important;
}

/* ── Bootstrap .form-group labels (system-settings, etc.) ── */
.form-group {
    margin-bottom: 18px !important;
}
.form-group label {
    position: static !important;
    left: auto !important;
    top: auto !important;
    background: transparent !important;
    padding: 0 !important;
    z-index: auto !important;
    display: block !important;
    margin-bottom: 6px !important;
    color: #94a3b8 !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .5px !important;
}
.form-group .form-control,
.form-group select {
    background: #0f172a !important;
    border: 1.5px solid rgba(255,255,255,.08) !important;
    color: #f1f5f9 !important;
    border-radius: 10px !important;
    padding: 11px 14px !important;
    font-size: 13.5px !important;
}
.form-group .form-control:focus,
.form-group select:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,.18) !important;
}

/* required asterisk */
label.required::after {
    content: ' *';
    color: #f87171 !important;
}

/* ══════════════════════════════════════════
   GLOBAL TEXT — force white/light on dark bg
   Catch-all for any black text the original
   theme sets that becomes invisible on dark.
══════════════════════════════════════════ */

/* Any element with hardcoded black/dark color */
body, p, span, div, td, th, li, a, h1, h2, h3, h4, h5, h6,
strong, b, small, em, i:not(.fal):not(.fas):not(.far):not(.fab):not(.fad) {
    color: inherit;
}

/* Default text color for the page */
body { color: var(--text-primary) !important; }

/* Headings */
h1, h2, h3, h4, h5, h6 { color: var(--text-primary) !important; }

/* Paragraphs and general text inside content */
.erp-table-section p,
.erp-table-section span,
.erp-table-section div,
.order-form-section p,
.order-form-section span,
.card-body p,
.card-body span,
.card-body div { color: var(--text-primary); }

/* Explicit black color overrides from old theme */
[style*="color: #000"],
[style*="color:#000"],
[style*="color: black"],
[style*="color:black"],
[style*="color: #191919"],
[style*="color:#191919"],
[style*="color: #333"],
[style*="color:#333"],
[style*="color: #444"],
[style*="color:#444"],
[style*="color: #555"],
[style*="color:#555"] {
    color: var(--text-primary) !important;
}

/* Table cell text */
table td, table th { color: var(--text-primary) !important; }

/* Code tags */
code {
    background: rgba(59,130,246,.12) !important;
    color: #93c5fd !important;
    border-radius: 4px !important;
    padding: 2px 6px !important;
    font-size: 12.5px !important;
}

/* Select option text (browser native) */
select option { background: #1e293b !important; color: #f1f5f9 !important; }

/* Nice select current text */
.nice-select .current { color: var(--text-primary) !important; }

/* Placeholder */
::placeholder { color: #475569 !important; }

/* Any inline style white background elements in content */
.erp-table-section [style*="background:#fff"],
.erp-table-section [style*="background: #fff"],
.erp-table-section [style*="background:white"],
.erp-table-section [style*="background: white"],
.order-form-section [style*="background:#fff"],
.order-form-section [style*="background: #fff"] {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

/* erp-table-header */
.erp-table-header {
    background: #263347 !important;
    border: 1px solid rgba(255,255,255,.07) !important;
    border-bottom: none !important;
    border-radius: 14px 14px 0 0 !important;
    padding: 16px 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}
.erp-table-header h4,
.erp-table-header h5,
.erp-table-header h3 {
    color: var(--text-primary) !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    margin: 0 !important;
}

/* erp-table-content (table wrapper) */
.erp-table-content {
    background: var(--bg-card) !important;
    border: 1px solid rgba(255,255,255,.07) !important;
}

/* erp-table-wrapper */
.erp-table-wrapper {
    background: var(--bg-card) !important;
    border: 1px solid rgba(255,255,255,.07) !important;
    border-radius: 14px !important;
    overflow: hidden !important;
}

/* Filter row above tables */
.erp-table-wrapper .p-3,
.erp-table-wrapper .border-bottom {
    background: #263347 !important;
    border-color: rgba(255,255,255,.07) !important;
}

/* Table light header (Bootstrap table-light) */
.table-light th, .table-light td,
.table thead.table-light th {
    background: #263347 !important;
    color: #64748b !important;
}

/* table-hover row hover */
.table-hover tbody tr:hover td,
.table-hover tbody tr:hover { background: #2d3f57 !important; }

/* Bootstrap text colors reset for dark */
.text-dark { color: var(--text-primary) !important; }
.text-body { color: var(--text-primary) !important; }
.text-black { color: var(--text-primary) !important; }
.text-reset { color: var(--text-primary) !important; }

/* Bootstrap bg classes */
.bg-white  { background: var(--bg-card)  !important; color: var(--text-primary) !important; }
.bg-light  { background: var(--bg-card2) !important; color: var(--text-primary) !important; }
.bg-dark   { background: var(--bg-base)  !important; }
.bg-body   { background: var(--bg-base)  !important; }

/* Bootstrap border */
.border, .border-bottom, .border-top, .border-start, .border-end {
    border-color: rgba(255,255,255,.07) !important;
}

/* Container-fluid / row inside dark pages */
.container-fluid, .row { color: var(--text-primary); }

/* Main content wrapper — ensure no white bleeds through */
.section-container,
.erp-table-section,
.erp-table-section .container-fluid,
.order-summary-tab,
.tab-content {
    background: var(--bg-base) !important;
}
/* The inner cards keep their card color */
.erp-table-section .card,
.erp-table-section .card-body,
.erp-table-section .cards,
.order-form-section {
    background: var(--bg-card) !important;
}

/* ══════════════════════════════════════════
   ACTION BUTTONS IN TABLE ROWS
   (Edit / Delete / View icon buttons)
══════════════════════════════════════════ */
/* Make all btn variants in table cells visible */
td .btn,
td a.btn,
td .btn-group .btn,
td .btn-group .dropdown-toggle,
.btn-group .btn-sm,
.action-buttons .btn,
.table-action .btn,
[class*="action"] .btn {
    color: var(--text-primary) !important;
}
td .btn:hover, td a.btn:hover { opacity: .85 !important; }

/* Outline buttons in tables */
td .btn-outline-primary { border-color: var(--accent) !important; color: var(--accent) !important; }
td .btn-outline-success { border-color: #22c55e !important; color: #4ade80 !important; }
td .btn-outline-danger  { border-color: #ef4444 !important; color: #f87171 !important; }
td .btn-outline-warning { border-color: #f59e0b !important; color: #fbbf24 !important; }
td .btn-outline-info    { border-color: #06b6d4 !important; color: #38bdf8 !important; }

td .btn-outline-primary:hover { background: rgba(59,130,246,.15) !important; }
td .btn-outline-success:hover { background: rgba(34,197,94,.15) !important; }
td .btn-outline-danger:hover  { background: rgba(239,68,68,.15) !important; }
td .btn-outline-warning:hover { background: rgba(245,158,11,.15) !important; }
td .btn-outline-info:hover    { background: rgba(6,182,212,.15) !important; }

/* Icon-only action buttons (no text, just icons) */
td .btn i, td a.btn i { color: inherit !important; }

/* ══════════════════════════════════════════
   HEADER — z-index above sidebar (sidebar=10)
   Dropdowns must also clear the sidebar.
══════════════════════════════════════════ */
.main-header-section {
    position: relative !important;
    z-index: 200 !important;   /* above sidebar z-index:10 */
}
.main-header-section .dropdown-menu,
header .dropdown-menu,
.profile-info .dropdown-menu,
.profile-info ul.dropdown-menu {
    z-index: 99999 !important;
    position: absolute !important;
}
/* Section container must not clip the header dropdown */
.section-container {
    position: relative;
    z-index: auto;
    overflow: visible !important;
}

/* List group */
.list-group-item {
    background: var(--bg-card) !important;
    border-color: rgba(255,255,255,.07) !important;
    color: var(--text-primary) !important;
}
.list-group-item:hover { background: var(--bg-hover) !important; }
.list-group-item.active {
    background: var(--accent-grad) !important;
    border-color: transparent !important;
}

/* Nav pills / tabs text */
.nav-link { color: var(--text-muted) !important; }

/* Progress bar track */
.progress {
    background: var(--bg-card2) !important;
    border-radius: 99px !important;
}

/* Spinner */
.spinner-border { color: var(--accent) !important; }

/* Custom warning color from old theme */
.custom-warning { color: #fbbf24 !important; }

/* ══════════════════════════════════════════
   PRINT — keep white background
══════════════════════════════════════════ */
@media print {
    body, .section-container, .erp-state-overview-section { background: #fff !important; color: #000 !important; }
    .side-bar, .main-header-section { display: none !important; }
}