@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/11.2.0/sweetalert2.min.css');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css");

/* ============================================================
   palette — LOCKED. hues never change. structure rides on these.
   ============================================================ */
:root {
    --zh-bg:        whitesmoke;
    --zh-surface:   #ffffff;
    --zh-surface-2: #f7f8fa;
    --zh-dark:      #343a40;
    --zh-dark-2:    #2c313a;
    --zh-dark-3:    #495057;
    --zh-text:      #212529;
    --zh-muted:     #6c757d;
    --zh-border:    #dee2e6;
    --zh-border-2:  #e9ecef;
    --zh-blue:      #1b6ec2;
    --zh-blue-2:    dodgerblue;
    --zh-accent:    #2196F3;
    --zh-danger:    #ef4444;
    --zh-success:   #22c55e;
    --zh-warning:   #f59e0b;
    --zh-info:      #0dcaf0;

    --zh-radius:    12px;
    --zh-radius-sm: 8px;
    --zh-shadow:    0 4px 20px -8px rgba(33,37,41,.18);
    --zh-shadow-lg: 0 12px 40px -12px rgba(33,37,41,.28);
    --zh-trans:     .22s cubic-bezier(.4,0,.2,1);
}

/* ============================================================
   base
   ============================================================ */
* { outline: none; }

body {
    background-color: var(--zh-bg);
    font-family: 'Poppins', sans-serif !important;
    color: var(--zh-text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a { transition: color var(--zh-trans); }

::selection { background: var(--zh-accent); color: #fff; }

/* wider rhythm — old 1140 was cramped on desktop */
.container { max-width: 1200px; }

/* sticky-ish footer handled by Starter flex shell, this just clears the bar */
#content { min-height: 60vh; }

/* ============================================================
   cards — the workhorse. every view leans on these.
   ============================================================ */
.card {
    background-color: var(--zh-surface);
    border: 1px solid var(--zh-border-2);
    border-radius: var(--zh-radius);
    box-shadow: var(--zh-shadow);
    transition: box-shadow var(--zh-trans), transform var(--zh-trans);
    overflow: hidden;
}
.card:hover { box-shadow: var(--zh-shadow-lg); }

.card-header {
    background-color: var(--zh-dark);
    color: #fff;
    border-bottom: 3px solid var(--zh-blue);
    border-radius: 0 !important;
    font-weight: 600;
    letter-spacing: .2px;
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}
.card-header.bg-dark { background-color: var(--zh-dark) !important; }
.card-header.bg-dark.text-white,
.card-header.text-white.bg-dark { color: #fff !important; }

.card-body { padding: 1.5rem; }

/* keep the legacy h5/h6 header sizing the views hardcode */
.card-header.h5, .card-header.h6,
.card-header.h5.p-3, .card-header.h6.p-3 { font-size: 1.05rem; }

/* ============================================================
   tables
   ============================================================ */
.table { margin-bottom: 0; vertical-align: middle; }
.table > :not(caption) > * > * {
    padding: .7rem .85rem;
    background-color: transparent;
    border-color: var(--zh-border-2);
}
.table thead th {
    background-color: var(--zh-surface-2);
    color: var(--zh-muted);
    text-transform: uppercase;
    font-size: .72rem;
    letter-spacing: .6px;
    font-weight: 600;
    border-bottom: 2px solid var(--zh-border);
    white-space: nowrap;
}
.table-bordered { border: 1px solid var(--zh-border-2); }
.table-bordered > :not(caption) > * > * { border: 1px solid var(--zh-border-2); }

.table-hover > tbody > tr {
    transition: background-color var(--zh-trans);
}
.table-hover > tbody > tr:hover > * { background-color: var(--zh-surface-2); }

.table > :not(caption) > * > * a,
.table > :not(caption) > * > * .btn { white-space: nowrap; }

.table-responsive { border-radius: var(--zh-radius-sm); }

/* ============================================================
   buttons — keep btn-default (blue), polish btn-outline-dark
   ============================================================ */
.btn { border-radius: var(--zh-radius-sm); font-weight: 500; transition: all var(--zh-trans); }
.btn-sm { border-radius: 6px; }

.btn-default {
    background-color: var(--zh-blue);
    color: #fff;
    border: 1px solid var(--zh-blue);
}
.btn-default:hover {
    background-color: var(--zh-blue-2);
    color: var(--zh-bg);
    border-color: var(--zh-blue-2);
    transform: translateY(-1px);
}

.btn-dark, .card-header .btn-dark { background-color: var(--zh-dark); border-color: var(--zh-dark); }
.btn-dark:hover { background-color: var(--zh-dark-2); border-color: var(--zh-dark-2); transform: translateY(-1px); }

.btn-outline-dark {
    border-color: var(--zh-dark);
    color: var(--zh-dark);
    background: transparent;
}
.btn-outline-dark:hover {
    background-color: var(--zh-dark);
    color: #fff;
    transform: translateY(-1px);
}

.btn-outline-light:hover { transform: translateY(-1px); }
.btn-outline-secondary,
.btn-outline-primary { transition: all var(--zh-trans); }
.btn-outline-secondary:hover,
.btn-outline-primary:hover { transform: translateY(-1px); }

/* ============================================================
   forms
   ============================================================ */
.form-control, .form-select {
    border-radius: var(--zh-radius-sm);
    border-color: var(--zh-border);
    background-color: var(--zh-surface);
    transition: border-color var(--zh-trans), box-shadow var(--zh-trans);
}
.form-control:focus, .form-select:focus {
    border-color: var(--zh-accent);
    box-shadow: 0 0 0 .2rem rgba(33,150,243,.18);
    background-color: var(--zh-surface);
}
.form-floating > label { color: var(--zh-muted); }
.form-floating > .form-control:focus + label,
.form-floating > .form-control:not(:placeholder-shown) + label { color: var(--zh-accent); }

.input-group-text {
    background-color: var(--zh-surface-2);
    border-color: var(--zh-border);
    color: var(--zh-muted);
    border-radius: var(--zh-radius-sm);
}
.input-group .form-control,
.input-group .form-select { border-radius: var(--zh-radius-sm); }

.form-check-input:checked { background-color: var(--zh-accent); border-color: var(--zh-accent); }
.form-check-input:focus { border-color: var(--zh-accent); box-shadow: 0 0 0 .2rem rgba(33,150,243,.18); }

/* ============================================================
   alerts (msgStatus)
   ============================================================ */
.alert {
    border-radius: var(--zh-radius);
    border: 1px solid transparent;
    padding: .9rem 1.1rem;
    box-shadow: var(--zh-shadow);
}
.alert-dismissible .btn-close { padding: 1rem; }

/* ============================================================
   badges + list groups
   ============================================================ */
.badge { font-weight: 600; letter-spacing: .3px; border-radius: 6px; }
.list-group-item { border-color: var(--zh-border-2); }
.list-group-item-action { transition: background-color var(--zh-trans); }
.list-group-item-action:hover { background-color: var(--zh-surface-2); }

/* ============================================================
   slider / switch toggle — moved out of Starter inline <style>.
   class names PRESERVED (Server.php depends on these).
   palette preserved: unchecked #ccc, checked #2196F3, knob #fff.
   ============================================================ */
.hacks {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 20px;
    margin: .35rem 0;
}
.switch {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 22px;
    flex-shrink: 0;
    margin-left: .75rem;
}
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: #ccc;
    transition: .3s;
    border-radius: 22px;
}
.slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 3px;
    bottom: 3px;
    background-color: #fff;
    transition: .3s;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
input:checked + .slider { background-color: var(--zh-accent); }
input:focus + .slider { box-shadow: 0 0 1px var(--zh-accent); }
input:checked + .slider:before { transform: translateX(20px); }
.slider.round { border-radius: 22px; }
.slider.round:before { border-radius: 50%; }

/* ============================================================
   navbar (Header.php) + side-menu drawer
   ============================================================ */
.navbar-dark.bg-dark,
.navbar.bg-dark.shadow-sm { background-color: var(--zh-dark) !important; box-shadow: 0 2px 12px -6px rgba(0,0,0,.4) !important; }
.navbar .navbar-brand { display: flex; align-items: center; gap: .55rem; font-weight: 600; }
.navbar-brand img { width: 30px; height: auto; border-radius: 6px; }
.navbar .nav-link { border-radius: var(--zh-radius-sm); padding: .4rem .8rem !important; transition: background-color var(--zh-trans), color var(--zh-trans); }
.navbar .nav-link:hover { background-color: rgba(255,255,255,.08); }
.navbar .btn-outline-light { border-radius: var(--zh-radius-sm); }

/* side-menu + backdrop live in Header.php inline style (original behavior).
   Kept out of here so the drawer reverts to its original open/close. */

/* ============================================================
   footer — no longer fixed-bottom (was overlapping content).
   now flows at end of the flex shell in Starter.
   ============================================================ */
footer {
    background-color: var(--zh-surface);
    border-top: 1px solid var(--zh-border-2);
    padding: 1.1rem 0;
    color: var(--zh-muted);
}
footer .text-muted { color: var(--zh-muted) !important; }

/* ============================================================
   misc / utilities
   ============================================================ */
.key-sensi { filter: blur(3px); transition: filter var(--zh-trans); }

.shadow-sm { box-shadow: var(--zh-shadow) !important; }

/* responsive spacing tighten on mobile */
@media (max-width: 575.98px) {
    .card-body { padding: 1.1rem; }
    .card-header { padding: .85rem 1rem; }
}

/* modern scrollbar */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: var(--zh-surface-2); }
::-webkit-scrollbar-thumb { background: #c4c9d2; border-radius: 8px; border: 2px solid var(--zh-surface-2); }
::-webkit-scrollbar-thumb:hover { background: var(--zh-accent); }