/* Navy theme - loaded after the panel's own styles; delete this file (or run
   install_theme.sh --remove) and every page is exactly as before. */
:root{--navy:#14213d;--navy2:#0f1a33;--navy3:#1f3160;--gold:#f5b301;--blue:#2c62f6;--green:#12a150;--red:#e5484d;
      --bg:#eef1f6;--line:#dfe4ee;--line2:#eef1f6;--ink:#1b2540;--mute:#6b7797}

/* ---- page ---------------------------------------------------------------- */
body{background:var(--bg);color:var(--ink)}

/* wide screens: use the width, instead of stopping at 1180px */
@media (min-width:1300px){ body .wrap{max-width:1680px} }

/* ---- side menu ----------------------------------------------------------- */
body .sidebar{background:linear-gradient(180deg,var(--navy),var(--navy2));color:#c3cde4}
body .sidebar .brand{background:var(--navy);border-bottom:1px solid rgba(255,255,255,.07);color:#fff}
body .sidebar .grp{color:#6f80a8}
body .sidebar a.item{color:#c3cde4;border-inline-start:3px solid transparent;transition:background .12s,color .12s}
body .sidebar a.item:hover{background:rgba(255,255,255,.06);color:#fff}
body .sidebar a.item.active{background:rgba(245,179,1,.13);color:#fff;border-inline-start-color:var(--gold)}
body .sidebar a.item.active .ico{color:var(--gold);opacity:1}
body .sidebar .foot{color:#6f80a8}

/* ---- top bar: white, with the page's name in navy ------------------------- */
body .topbar{background:#fff;color:var(--ink);border-bottom:1px solid var(--line);box-shadow:0 1px 0 rgba(20,33,61,.03)}
body .topbar a{color:var(--ink)}
body .topbar strong{color:var(--navy);font-size:17px}
body .burger{background:var(--navy);color:#fff}
body .lang-switch a{color:var(--mute)}
body .lang-switch a.active{background:var(--navy);color:#fff}

/* ---- cards --------------------------------------------------------------- */
body .card,body .panel,body .stat{background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 1px 2px rgba(20,33,61,.04)}
body .panel h3,body .card>h2:first-child,body .card>h3:first-child{
  width:fit-content;padding-bottom:8px;border-bottom:2px solid var(--gold);color:var(--navy)}
/* the dashboard's panels and the number tiles get a coloured top edge */
body .dash-grid>.panel,body .stat{border-top:4px solid var(--navy)}
body .dash-grid>.panel:nth-child(5n+1),body .stat:nth-child(4n+1){border-top-color:var(--blue)}
body .dash-grid>.panel:nth-child(5n+2),body .stat:nth-child(4n+2){border-top-color:var(--green)}
body .dash-grid>.panel:nth-child(5n+3),body .stat:nth-child(4n+3){border-top-color:var(--gold)}
body .dash-grid>.panel:nth-child(5n+4),body .stat:nth-child(4n+4){border-top-color:var(--red)}
body .stat .num{color:var(--navy)}
body .stat .lbl,body .kv .k{color:var(--mute)}
body .panel .kv{border-bottom:1px dashed #e3e7f0}

/* ---- chart: past hours navy, the last six blue ---------------------------- */
body .chart .barfill{background:var(--navy);border-radius:4px 4px 0 0}
body .chart .col:nth-last-child(-n+6) .barfill{background:var(--blue)}

/* ---- tables -------------------------------------------------------------- */
body th{background:#f5f7fb;color:#7d89a6;font-size:12px;border-bottom:1px solid var(--line)}
html[lang="en"] body th{text-transform:uppercase;letter-spacing:.05em}
body td{border-bottom:1px solid var(--line2)}
body tr:hover>td{background:#f8fafd}

/* ---- buttons ------------------------------------------------------------- */
body .btn{background:var(--navy);color:#fff;border:1px solid var(--navy);border-radius:7px;transition:background .12s}
body .btn:hover{background:var(--navy3)}
body .btn.secondary{background:#fff;color:var(--navy);border-color:#cfd6e4}
body .btn.secondary:hover{background:#f3f5fa;border-color:var(--navy)}
body .btn.danger{background:var(--red);border-color:var(--red);color:#fff}
body .btn.danger:hover{background:#c93a3f}

/* ---- forms --------------------------------------------------------------- */
body input,body select,body textarea{border:1px solid #d3d9e6;border-radius:7px}
body input:focus,body select:focus,body textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(44,98,246,.13)}

/* ---- messages ------------------------------------------------------------ */
body .msg{border-inline-start:4px solid currentColor;border-radius:7px}

/* ---- Arabic: letters must join, so no letter spacing ----------------------- */
html[lang="ar"] body .sidebar .grp{letter-spacing:0}

/* ---- sign-in page -------------------------------------------------------- */
body.login-page{background:linear-gradient(135deg,var(--navy2) 0%,var(--navy) 50%,var(--navy3) 120%)}
body.login-page .box{border-top:4px solid var(--gold);border-radius:12px}
body.login-page .brand .mark:not(.logo){background:linear-gradient(135deg,var(--gold),#d99a00);color:var(--navy)}
body.login-page .brand h1{color:var(--navy)}
body.login-page button{background:var(--navy)}
body.login-page button:hover{background:var(--navy3)}
body.login-page .field input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(245,179,1,.18)}

/* ---- phones: nothing may be wider than the screen ----------------------------
   A wide table used to stretch the whole page, the phone then zoomed out and
   the hidden side menu slid into view. Tables now scroll sideways inside their
   own card, and anything poking past the edge is cut off. */
@media (max-width:950px){
  html,body{overflow-x:clip;max-width:100%}
  body .card,body .panel{overflow-x:auto;-webkit-overflow-scrolling:touch}
  body .card table{min-width:560px}
  body .wrap{max-width:100%}
  body .topbar{flex-wrap:wrap}
}