/* ============================================================
   Xplorerkids Admin — Redesign Theme (indigo + amber)
   Drop-in override for the Datta Able admin template.
   Load this AFTER the template's style.css in header-script.php.
   ============================================================ */
:root{
  --xk-side:#1e2235; --xk-side-2:#171a29; --xk-side-ink:#9aa0bd;
  --xk-accent:#f0a830; --xk-accent-d:#d98e1c; --xk-accent-soft:#fdf3e2;
  --xk-sky:#3d7bd6; --xk-sky-soft:#eaf2fc;
  --xk-bg:#f5f6fa; --xk-card:#fff; --xk-ink:#2b2f42; --xk-muted:#8b90a6; --xk-line:#ebedf3;
  --xk-ok:#27ae8b; --xk-ok-s:#e4f7f1; --xk-warn:#e8a33d; --xk-warn-s:#fcf3e3;
  --xk-danger:#e05a52; --xk-danger-s:#fdeceb; --xk-violet:#7b6ef0; --xk-violet-s:#f0eefe;
  --xk-radius:10px; --xk-shadow:0 1px 3px rgba(30,34,53,.06),0 8px 24px rgba(30,34,53,.05);
}

/* ---- base ---- */
body{background:var(--xk-bg)!important;color:var(--xk-ink)!important;font-family:'Open Sans',system-ui,sans-serif!important}

/* ---- top navbar ---- */
.navbar.header-navbar{background:var(--xk-card)!important;box-shadow:0 1px 3px rgba(30,34,53,.06)!important}
.header-navbar .navbar-wrapper .navbar-logo{background:var(--xk-side-2)!important}
.header-navbar .navbar-container{background:var(--xk-card)!important}
.header-navbar .nav-left>li>a,.header-navbar .nav-right>li>a{color:var(--xk-ink)!important}
.header-navbar .nav-right>li>a:hover{color:var(--xk-accent-d)!important}
.header-navbar .navbar-container .nav-right .user-profile span{color:var(--xk-ink)!important}

/* ---- sidebar ---- */
.main-menu{background:var(--xk-side)!important}
.main-menu .main-menu-header{background:var(--xk-side-2)!important}
.main-menu-content .main-navigation li>a{color:var(--xk-side-ink)!important;font-weight:600!important;border-left:3px solid transparent!important;transition:.15s}
.main-menu-content .main-navigation li>a:hover{background:rgba(255,255,255,.04)!important;color:#fff!important}
.main-menu-content .main-navigation li.active>a,
.main-menu-content .main-navigation li.has-class>a{background:rgba(240,168,48,.13)!important;color:#fff!important;border-left-color:var(--xk-accent)!important}
.main-navigation .tree-1{background:rgba(0,0,0,.18)!important}
.main-navigation .tree-1 li a{color:var(--xk-side-ink)!important;font-size:12.8px!important}
.main-navigation .tree-1 li a:hover{color:var(--xk-accent)!important;background:rgba(0,0,0,.2)!important}
.nav-left-new a:hover{color:var(--xk-accent)!important}

/* ---- page header / breadcrumb ---- */
.page-header-title h4{font-weight:800!important;color:var(--xk-ink)!important;letter-spacing:-.3px}
.breadcrumb-title .breadcrumb-item a{color:var(--xk-muted)!important}
.breadcrumb-title .breadcrumb-item:last-child a{color:var(--xk-accent-d)!important}

/* ---- cards ---- */
.card{background:var(--xk-card)!important;border:0!important;border-radius:var(--xk-radius)!important;box-shadow:var(--xk-shadow)!important}
.card .card-header{border-bottom:1px solid var(--xk-line)!important;padding:17px 22px!important}
.card .card-header h5{font-weight:800!important;font-size:15px!important;color:var(--xk-ink)!important}
.card .card-block,.card .card-body{padding:22px!important}

/* ---- buttons ---- */
.btn-primary{background:var(--xk-accent)!important;border-color:var(--xk-accent)!important;color:#5a3c08!important;font-weight:700!important;border-radius:9px!important;transition:.15s}
.btn-primary:hover{background:var(--xk-accent-d)!important;border-color:var(--xk-accent-d)!important;color:#fff!important}
.btn{border-radius:9px!important;font-weight:700!important}

/* ---- forms ---- */
.form-control{border:1px solid var(--xk-line)!important;border-radius:9px!important;background:#fafbfc!important;color:var(--xk-ink)!important;transition:.15s;font-size:13.5px!important}
.form-control:focus{border-color:var(--xk-accent)!important;box-shadow:0 0 0 3px var(--xk-accent-soft)!important;background:#fff!important}
.col-form-label{font-weight:700!important;font-size:12.5px!important;color:var(--xk-ink)!important}
select.form-control{cursor:pointer}

/* section divider used in the student form */
.xk-sec{display:flex;align-items:center;gap:10px;margin:22px 0 16px}
.xk-sec .xk-sn{width:24px;height:24px;border-radius:7px;background:var(--xk-accent-soft);color:var(--xk-accent-d);display:grid;place-items:center;font-size:11px;font-weight:800;flex-shrink:0}
.xk-sec .xk-st{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--xk-accent-d);white-space:nowrap}
.xk-sec .xk-sl{flex:1;height:1px;background:var(--xk-line)}

/* live access camera checkboxes */
#liveAccessCameras{display:flex;flex-wrap:wrap;gap:10px}
#liveAccessCameras label{display:flex!important;align-items:center;gap:8px;padding:9px 14px;border:1px solid var(--xk-line);border-radius:9px;cursor:pointer;font-size:13px;font-weight:600;transition:.15s;background:#fafbfc;margin:0}
#liveAccessCameras label:hover{border-color:var(--xk-accent)}
#liveAccessCameras input{accent-color:var(--xk-accent-d);width:15px;height:15px}
#liveAccessCameras .helper{display:none}

/* ---- tables ---- */
.table thead th{text-transform:uppercase;font-size:11px!important;letter-spacing:.4px;color:var(--xk-muted)!important;font-weight:800!important;border-bottom:2px solid var(--xk-line)!important;background:transparent!important}
.table td{font-size:13.5px!important;color:var(--xk-ink)!important;vertical-align:middle!important;border-color:var(--xk-line)!important}
.table-striped tbody tr:nth-of-type(odd){background:#fbfaf6!important}
.table tbody tr:hover{background:#fbf6ea!important}

/* status / action pills (reusing template label classes) */
.label{border-radius:999px!important;padding:5px 11px!important;font-size:11.5px!important;font-weight:700!important;display:inline-block;margin:2px}
.label-inverse-primary{background:var(--xk-ok-s)!important;color:var(--xk-ok)!important}
.label-inverse-warning{background:var(--xk-warn-s)!important;color:var(--xk-warn)!important}
.label-inverse-danger{background:var(--xk-danger-s)!important;color:var(--xk-danger)!important}
.label-inverse-info{background:var(--xk-sky-soft)!important;color:var(--xk-sky)!important}

/* branch / class chips */
.xk-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;font-size:11.5px;font-weight:700}
.xk-chip-branch{background:var(--xk-sky-soft);color:var(--xk-sky)}
.xk-chip-cls{background:var(--xk-violet-s);color:var(--xk-violet)}

/* toolbar (search + filters above tables) */
.xk-toolbar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:18px}
.xk-toolbar .xk-search{flex:1;min-width:200px}
.xk-toolbar .form-control{margin:0}

/* primary-contact radio toggle */
.xk-radio-row{display:flex;gap:10px}
.xk-radio{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:10px;border:1px solid var(--xk-line);border-radius:9px;cursor:pointer;font-weight:700;font-size:13px;transition:.15s;background:#fafbfc}
.xk-radio input{margin:0}
.xk-radio.xk-on{background:var(--xk-sky-soft);border-color:var(--xk-sky);color:var(--xk-sky)}

/* alerts */
.alert{border-radius:var(--xk-radius)!important;border:0!important}
.alert-success{background:var(--xk-ok-s)!important;color:var(--xk-ok)!important}
.alert-danger{background:var(--xk-danger-s)!important;color:var(--xk-danger)!important}
.alert-warning{background:var(--xk-warn-s)!important;color:var(--xk-warn)!important}

/* ---- dashboard stat cards ---- */
.xk-stat .card-block{padding:20px!important}
.xk-stat-row{display:flex;align-items:center;gap:15px}
.xk-stat-icon{width:54px;height:54px;border-radius:14px;display:grid;place-items:center;color:#fff;font-size:24px;flex-shrink:0}
.xk-stat-num{font-size:28px;font-weight:800;margin:0;line-height:1;color:var(--xk-ink)}
.xk-stat-lbl{font-size:12.5px;color:var(--xk-muted);font-weight:700}

/* ============================================================
   Preview-matched form system (used by add-student / edit-student)
   Scoped under .xk-form so it matches the v3 preview exactly.
   ============================================================ */
.xk-form .grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px}
.xk-form .field{display:flex;flex-direction:column;gap:7px}
.xk-form .field.full{grid-column:1/-1}
.xk-form .field label{font-size:12.5px;font-weight:700;color:var(--xk-ink)}
.xk-form .req{color:var(--xk-danger)}
.xk-form .field input,.xk-form .field select,.xk-form .field textarea{padding:10px 12px;border:1px solid var(--xk-line);border-radius:9px;font-size:13.5px;outline:none;transition:.15s;background:#fafbfc;width:100%;font-family:inherit}
.xk-form .field input:focus,.xk-form .field select:focus,.xk-form .field textarea:focus{border-color:var(--xk-accent);box-shadow:0 0 0 3px var(--xk-accent-soft);background:#fff}
.xk-form .field textarea{resize:vertical;min-height:70px}
.xk-form .hint{font-size:11.5px;color:var(--xk-muted)}
.xk-form .sec{grid-column:1/-1;display:flex;align-items:center;gap:10px;margin-top:8px}
.xk-form .sec:first-child{margin-top:0}
.xk-form .sec .st{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--xk-accent-d);white-space:nowrap}
.xk-form .sec .sl{flex:1;height:1px;background:var(--xk-line)}
.xk-form .sec .sn{width:22px;height:22px;border-radius:7px;background:var(--xk-accent-soft);color:var(--xk-accent-d);display:grid;place-items:center;font-size:11px;font-weight:800;flex-shrink:0}
.xk-form .switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer}
.xk-form .switch input{display:none}
.xk-form .track{width:44px;height:24px;border-radius:999px;background:#cdd2e0;position:relative;transition:.2s}
.xk-form .knob{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.xk-form .switch input:checked + .track{background:var(--xk-ok)}
.xk-form .switch input:checked + .track .knob{left:23px}
.xk-form .camchk{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border:1px solid var(--xk-line);border-radius:9px;cursor:pointer;font-size:13px;font-weight:600;transition:.15s;user-select:none;background:#fafbfc;margin:0 8px 8px 0}
.xk-form .camchk:hover{border-color:var(--xk-accent)}
.xk-form .camchk input{accent-color:var(--xk-accent-d);width:15px;height:15px}
.xk-form .camchk.on{background:var(--xk-accent-soft);border-color:var(--xk-accent);color:var(--xk-accent-d)}
.xk-form .cams{display:flex;flex-wrap:wrap;gap:0}
.xk-form .form-foot{grid-column:1/-1;display:flex;justify-content:flex-end;gap:10px;margin-top:8px;padding-top:18px;border-top:1px solid var(--xk-line)}
.xk-form .radio-row{display:flex;gap:10px}
.xk-form .radio{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:11px;border:1px solid var(--xk-line);border-radius:9px;cursor:pointer;font-weight:700;font-size:13px;transition:.15s;background:#fafbfc;margin:0}
.xk-form .radio input{display:none}
.xk-form .radio.xk-on{background:var(--xk-sky-soft);border-color:var(--xk-sky);color:var(--xk-sky)}
@media(max-width:980px){.xk-form .grid{grid-template-columns:1fr 1fr}}
@media(max-width:680px){.xk-form .grid{grid-template-columns:1fr}}