/* ==========================================================================
   ZaraLogi — modern UI theme (overrides AdminLTE 3 / Bootstrap 4 / DataTables)
   Applied globally via the role + auth layouts. No markup changes required.
   ========================================================================== */

:root {
    --zl-primary: #4f46e5;      /* indigo-600 */
    --zl-primary-600: #4338ca;
    --zl-primary-050: #eef2ff;
    --zl-ink: #0f172a;          /* slate-900 */
    --zl-body: #334155;         /* slate-700 */
    --zl-muted: #64748b;        /* slate-500 */
    --zl-line: #e2e8f0;         /* slate-200 */
    --zl-bg: #f1f5f9;           /* slate-100 */
    --zl-card: #ffffff;
    --zl-success: #16a34a;
    --zl-danger: #dc2626;
    --zl-warning: #d97706;
    --zl-info: #0891b2;
    --zl-radius: 12px;
    --zl-radius-sm: 9px;
    --zl-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .05);
    --zl-shadow: 0 6px 18px rgba(15, 23, 42, .08);
    --zl-shadow-lg: 0 16px 40px rgba(15, 23, 42, .14);
    --zl-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

/* ---- Base ---------------------------------------------------------------- */
body,
.wrapper {
    font-family: var(--zl-font);
    color: var(--zl-body);
    background: var(--zl-bg) !important;
    -webkit-font-smoothing: antialiased;
    letter-spacing: .1px;
}
.content-wrapper { background: var(--zl-bg) !important; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5 { color: var(--zl-ink); font-weight: 700; }
/* Keep text white inside coloured components (the global ink colour above must
   not bleed into KPI cards / coloured headers). */
.small-box, .small-box .inner h3, .small-box .inner p,
.small-box .small-box-footer, .small-box .small-box-footer a,
.bg-primary, .bg-success, .bg-info, .bg-danger, .bg-gradient-primary,
.card-primary:not(.card-outline) > .card-header,
.card-primary:not(.card-outline) > .card-header .card-title,
.callout, .bg-primary *, .bg-success *, .bg-info *, .bg-danger * { color: #fff !important; }
.bg-warning, .bg-warning * { color: #fff !important; }
a { color: var(--zl-primary); }
a:hover { color: var(--zl-primary-600); }
.text-muted { color: var(--zl-muted) !important; }

/* Content header (page title bar) */
.content-header { padding: 22px .5rem 8px; }
.content-header h1 { font-size: 1.55rem; letter-spacing: -.4px; }

/* ---- Sidebar ------------------------------------------------------------- */
.main-sidebar,
.main-sidebar .sidebar {
    background: #0b1220 !important;
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, .04);
}
.brand-link {
    border-bottom: 1px solid rgba(255, 255, 255, .06) !important;
    padding: 16px 1rem;
    background: transparent !important;
}
.brand-link .brand-text { font-weight: 800; letter-spacing: .3px; color: #fff !important; }
.brand-image { box-shadow: 0 0 0 2px rgba(255, 255, 255, .12); }
.sidebar .user-panel { border-bottom: 1px solid rgba(255, 255, 255, .06); padding: 14px 8px; }
.sidebar .user-panel .info a,
.sidebar .user-panel .info { color: #cbd5e1 !important; font-weight: 600; }

.nav-sidebar .nav-item { margin: 2px 10px; }
.nav-sidebar > .nav-item > .nav-link {
    color: #94a3b8 !important;
    border-radius: 10px;
    padding: 11px 14px;
    font-weight: 600;
    transition: background .15s ease, color .15s ease;
}
.nav-sidebar > .nav-item > .nav-link .nav-icon { color: #64748b; }
.nav-sidebar > .nav-item > .nav-link:hover {
    background: rgba(255, 255, 255, .06) !important;
    color: #fff !important;
}
.nav-sidebar > .nav-item > .nav-link:hover .nav-icon { color: #a5b4fc; }
.nav-sidebar > .nav-item > .nav-link.active,
.nav-sidebar .nav-treeview > .nav-item > .nav-link.active {
    background: linear-gradient(135deg, var(--zl-primary), #6366f1) !important;
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(79, 70, 229, .45);
}
.nav-sidebar > .nav-item > .nav-link.active .nav-icon { color: #fff; }
.nav-sidebar .nav-treeview > .nav-item > .nav-link {
    color: #94a3b8 !important; border-radius: 8px; padding: 8px 12px;
}
.nav-sidebar .nav-treeview > .nav-item > .nav-link:hover { background: rgba(255, 255, 255, .05) !important; color: #fff !important; }

/* ---- Top navbar --------------------------------------------------------- */
.main-header.navbar {
    background: rgba(255, 255, 255, .85) !important;
    backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid var(--zl-line) !important;
    box-shadow: var(--zl-shadow-sm);
}
.main-header .nav-link { color: var(--zl-body) !important; font-weight: 600; }

/* ---- Cards -------------------------------------------------------------- */
.card {
    border: 1px solid var(--zl-line);
    border-radius: var(--zl-radius);
    box-shadow: var(--zl-shadow-sm);
    background: var(--zl-card);
}
.card:hover { box-shadow: var(--zl-shadow); }
.card-header {
    background: transparent;
    border-bottom: 1px solid var(--zl-line);
    padding: 16px 20px;
    border-radius: var(--zl-radius) var(--zl-radius) 0 0;
}
.card-header .card-title { font-weight: 700; color: var(--zl-ink); font-size: 1.02rem; }
.card-body { padding: 20px; }
.card.card-primary.card-outline { border-top: 3px solid var(--zl-primary); }
.card-primary:not(.card-outline) > .card-header { background: var(--zl-primary); }

/* ---- Buttons ------------------------------------------------------------ */
.btn {
    border-radius: var(--zl-radius-sm);
    font-weight: 600;
    padding: .5rem 1rem;
    transition: transform .05s ease, box-shadow .15s ease, background .15s ease;
    box-shadow: var(--zl-shadow-sm);
}
.btn:active { transform: translateY(1px); }
.btn-sm { border-radius: 8px; padding: .3rem .7rem; }
.btn-primary, .btn-app.bg-primary { background: var(--zl-primary); border-color: var(--zl-primary); }
.btn-primary:hover { background: var(--zl-primary-600); border-color: var(--zl-primary-600); }
.btn-secondary { background: #64748b; border-color: #64748b; }
.btn-secondary:hover { background: #475569; border-color: #475569; }
.btn-success { background: var(--zl-success); border-color: var(--zl-success); }
.btn-danger  { background: var(--zl-danger);  border-color: var(--zl-danger); }
.btn-info    { background: var(--zl-info);     border-color: var(--zl-info); }
.btn-warning { background: var(--zl-warning);  border-color: var(--zl-warning); color: #fff; }
.btn-outline-primary { color: var(--zl-primary); border-color: var(--zl-primary); box-shadow: none; }
.btn-outline-primary:hover { background: var(--zl-primary); border-color: var(--zl-primary); }

/* ---- Forms -------------------------------------------------------------- */
label { color: var(--zl-ink); font-weight: 600; margin-bottom: .4rem; }
.form-control, .custom-select, select.form-control, textarea.form-control, .select2-selection {
    border: 1px solid var(--zl-line) !important;
    border-radius: var(--zl-radius-sm) !important;
    padding: .55rem .85rem;
    height: calc(2.5rem + 2px);
    color: var(--zl-ink);
    background-color: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}
textarea.form-control { height: auto; }
.form-control:focus, .custom-select:focus, select:focus, textarea:focus {
    border-color: var(--zl-primary) !important;
    box-shadow: 0 0 0 4px rgba(79, 70, 229, .15) !important;
}
.form-control::placeholder { color: #94a3b8; }
.input-group-text { border-radius: var(--zl-radius-sm); border: 1px solid var(--zl-line); background: #f8fafc; }
.form-group { margin-bottom: 1.1rem; }

/* ---- Tables (plain + DataTables) --------------------------------------- */
.table { color: var(--zl-body); }
.table thead th {
    background: #f8fafc;
    color: var(--zl-muted);
    text-transform: uppercase;
    font-size: .72rem;
    letter-spacing: .06em;
    font-weight: 700;
    border-bottom: 1px solid var(--zl-line) !important;
    border-top: 0 !important;
    padding: .8rem 1rem;
}
.table td, .table th { border-top: 1px solid #eef2f7 !important; padding: .8rem 1rem; vertical-align: middle; }
.table-hover tbody tr { transition: background .12s ease; }
.table-hover tbody tr:hover { background: var(--zl-primary-050) !important; }
.table tfoot th { background: #f8fafc; border-top: 2px solid var(--zl-line) !important; color: var(--zl-ink); }
.table-bordered, .table-bordered td, .table-bordered th { border-color: #eef2f7 !important; }

/* DataTables container + controls */
.dataTables_wrapper { padding-top: 4px; }
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--zl-line);
    border-radius: 8px;
    padding: .35rem .6rem;
    margin-left: .4rem;
}
.dataTables_wrapper .dataTables_filter input:focus { border-color: var(--zl-primary); box-shadow: 0 0 0 4px rgba(79,70,229,.15); outline: none; }
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 8px !important;
    border: 1px solid var(--zl-line) !important;
    margin: 0 2px;
    padding: .35rem .7rem !important;
    color: var(--zl-body) !important;
    background: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--zl-primary) !important;
    border-color: var(--zl-primary) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(79, 70, 229, .4);
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--zl-primary-050) !important; border-color: var(--zl-primary) !important; color: var(--zl-primary) !important;
}
.dataTables_wrapper .dataTables_info { color: var(--zl-muted); }

/* ---- Dashboard KPI (small-box) ----------------------------------------- */
.small-box {
    border-radius: var(--zl-radius);
    box-shadow: var(--zl-shadow);
    overflow: hidden;
    border: 0;
}
.small-box > .inner { padding: 20px; }
.small-box h3 { font-weight: 800; font-size: 2.1rem; letter-spacing: -1px; }
.small-box .icon > i { font-size: 68px; opacity: .18; top: 12px; }
.small-box .small-box-footer { background: rgba(0, 0, 0, .12); font-weight: 600; padding: 8px; }
.small-box.bg-success { background: linear-gradient(135deg, #16a34a, #22c55e) !important; }
.small-box.bg-info    { background: linear-gradient(135deg, #0ea5e9, #38bdf8) !important; }
.small-box.bg-warning { background: linear-gradient(135deg, #d97706, #f59e0b) !important; color: #fff !important; }
.small-box.bg-danger  { background: linear-gradient(135deg, #e11d48, #f43f5e) !important; }
.small-box.bg-primary { background: linear-gradient(135deg, var(--zl-primary), #6366f1) !important; }
.small-box.bg-warning h3, .small-box.bg-warning p { color: #fff; }

/* info-box variant */
.info-box { border-radius: var(--zl-radius); box-shadow: var(--zl-shadow-sm); border: 1px solid var(--zl-line); }
.info-box .info-box-icon { border-radius: var(--zl-radius) 0 0 var(--zl-radius); }

/* ---- Badges / alerts / modals ------------------------------------------ */
.badge { border-radius: 999px; padding: .35em .7em; font-weight: 700; }
.badge-primary { background: var(--zl-primary); }
.alert { border: 0; border-radius: var(--zl-radius-sm); box-shadow: var(--zl-shadow-sm); }
.alert-success { background: #ecfdf5; color: #065f46; }
.alert-danger  { background: #fef2f2; color: #991b1b; }
.alert-warning { background: #fffbeb; color: #92400e; }
.alert-info    { background: #ecfeff; color: #155e75; }
.modal-content { border: 0; border-radius: var(--zl-radius); box-shadow: var(--zl-shadow-lg); overflow: hidden; }
.modal-header { border-bottom: 1px solid var(--zl-line); padding: 16px 20px; }
.modal-header .modal-title { font-weight: 700; color: var(--zl-ink); }
.modal-footer { border-top: 1px solid var(--zl-line); }

/* ---- Footer ------------------------------------------------------------- */
.main-footer { background: transparent; border-top: 1px solid var(--zl-line); color: var(--zl-muted); }
.main-footer strong a { color: var(--zl-primary); }

/* ---- Login / auth page -------------------------------------------------- */
body.login-page, body.hold-transition.login-page { background: linear-gradient(135deg, #eef2ff 0%, #f1f5f9 100%) !important; }
.login-box, .register-box { width: 400px; }
.login-logo a, .register-logo a { color: var(--zl-ink); font-weight: 800; }
.login-card-body, .register-card-body { border-radius: var(--zl-radius); box-shadow: var(--zl-shadow-lg); border: 1px solid var(--zl-line); padding: 30px; }