/* ==========================================================================
   Dojikets Admin — skeuomorphic design system
   First shared stylesheet in the repo. Loaded by templates/admin/base.html
   before any page-local <style> block (page rules still win on collision).

   No external fonts / no @import / no remote URLs — CSP- and egress-safe.
   Everything is system-font + CSS gradients + one inline SVG-data-uri noise.
   ========================================================================== */

:root {
  --skeuo-primary:      #ff5722;
  --skeuo-primary-dark: #e64a19;
  --skeuo-primary-lo:   #ffccbc;

  /* felt / metal / screen surfaces */
  --felt:        #2f3237;
  --felt-hi:     #3a3e44;
  --felt-lo:     #24272b;
  --metal-hi:    #f4f5f7;
  --metal:       #d8dadf;
  --metal-lo:    #b7bac1;
  --screen-bg:   #10231c;
  --screen-fg:   #7dffb0;
  --screen-dim:  #3f7d5c;

  --panel:        #ececee;
  --panel-edge:   #ffffff;
  --panel-shadow: #b9bbc2;
  --ink:          #1d1d1f;
  --ink-soft:     #5c5f66;
  --hairline:     #c9cbd2;

  --led-green:  #35d07f;
  --led-amber:  #ffb400;
  --led-red:    #ff4d4d;
  --led-off:    #4a4d52;

  --radius:   10px;
  --radius-s: 6px;

  --noise: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }

body.admin-shell {
  margin: 0;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background:
    var(--noise),
    radial-gradient(1200px 800px at 15% -10%, #4a4e55, #2b2e33 60%, #202225);
  background-attachment: fixed;
  display: flex;
}

/* ---------- sidebar (brushed metal) ---------------------------------------- */

.admin-shell .sidebar {
  flex: 0 0 232px;
  width: 232px;
  min-height: 100vh;
  position: sticky;
  top: 0;
  align-self: flex-start;
  padding: 18px 14px 24px;
  color: #eef0f3;
  background:
    var(--noise),
    linear-gradient(180deg, #43474e 0%, #34383e 12%, #2c2f34 100%);
  border-right: 1px solid #1c1e21;
  box-shadow:
    inset -1px 0 0 rgba(255,255,255,0.04),
    inset 1px 0 0 rgba(255,255,255,0.10),
    2px 0 14px rgba(0,0,0,0.45);
}

.admin-shell .sidebar .brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.2px;
  padding: 6px 8px 16px;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0,0,0,0.6), 0 -1px 0 rgba(255,255,255,0.06);
}

.admin-shell .sidebar nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.admin-shell .sidebar nav a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  border-radius: var(--radius-s);
  color: #c7cad0;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
  border: 1px solid transparent;
  transition: background .12s, color .12s;
}

.admin-shell .sidebar nav a:hover {
  color: #fff;
  background: rgba(255,255,255,0.05);
}

.admin-shell .sidebar nav a.is-active {
  color: #fff;
  background: linear-gradient(180deg, var(--skeuo-primary), var(--skeuo-primary-dark));
  border-color: rgba(0,0,0,0.35);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    0 1px 2px rgba(0,0,0,0.4);
  text-shadow: 0 -1px 0 rgba(0,0,0,0.35);
}

.admin-shell .sidebar nav .nav-sep {
  height: 1px;
  margin: 8px 6px;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,0.5), transparent);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06);
}

.admin-shell .sidebar-toggle {
  display: none;
}

/* ---------- main column -------------------------------------------------- */

.admin-shell .admin-main {
  flex: 1 1 auto;
  min-width: 0;
  padding: 24px clamp(16px, 3vw, 40px) 56px;
}

.admin-shell .page-head {
  margin: 0 0 20px;
}
.admin-shell .page-head:empty { display: none; }

.admin-shell .page-head h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 800;
  color: #f4f5f7;
  text-shadow: 0 1px 0 rgba(0,0,0,0.6);
}
.admin-shell .page-head p {
  margin: 4px 0 0;
  color: #b9bcc3;
  font-size: 13.5px;
}

/* ---------- felt panels ------------------------------------------------- */

.admin-shell .panel,
.admin-shell .card {
  position: relative;
  background:
    var(--noise),
    linear-gradient(180deg, #f6f6f8, #e7e8ec);
  border: 1px solid var(--panel-shadow);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 18px;
  box-shadow:
    inset 0 1px 0 var(--panel-edge),
    0 1px 2px rgba(0,0,0,0.25),
    0 12px 26px rgba(0,0,0,0.28);
}

.admin-shell .panel > h2,
.admin-shell .panel > h3,
.admin-shell .panel-title {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #6b6e75;
  text-shadow: 0 1px 0 #fff;
}

.admin-shell .panel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px;
}

/* ---------- inset "screen" area for logs / tables ---------------------- */

.admin-shell .screen {
  background:
    var(--noise),
    linear-gradient(180deg, #0c1c17, #10231c 40%, #0b1a14);
  color: var(--screen-fg);
  font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.5;
  border-radius: var(--radius-s);
  padding: 12px 14px;
  border: 1px solid #05100c;
  box-shadow:
    inset 0 2px 10px rgba(0,0,0,0.75),
    inset 0 0 0 1px rgba(125,255,176,0.06),
    0 1px 0 #fff;
  overflow: auto;
}
.admin-shell .screen::selection { background: rgba(125,255,176,0.3); }
.admin-shell .screen .dim { color: var(--screen-dim); }
.admin-shell .screen .warn { color: var(--led-amber); }
.admin-shell .screen .bad  { color: var(--led-red); }

/* ---------- LED status dots ------------------------------------------- */

.admin-shell .led {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #9aa0a6, var(--led-off) 70%);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.6), 0 1px 0 #fff;
  vertical-align: middle;
}
.admin-shell .led.on-green {
  background: radial-gradient(circle at 32% 30%, #d6ffe7, var(--led-green) 65%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.7), 0 0 8px 1px rgba(53,208,127,0.7);
}
.admin-shell .led.on-amber {
  background: radial-gradient(circle at 32% 30%, #fff0cc, var(--led-amber) 65%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.7), 0 0 8px 1px rgba(255,180,0,0.7);
}
.admin-shell .led.on-red {
  background: radial-gradient(circle at 32% 30%, #ffd6d6, var(--led-red) 65%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.7), 0 0 8px 1px rgba(255,77,77,0.7);
}

/* ---------- physical toggle switch --------------------------------------
   Markup: <label class="toggle"><input type="checkbox" disabled><span></span></label>
*/

.admin-shell .toggle {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 26px;
  flex: 0 0 auto;
}
.admin-shell .toggle input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}
.admin-shell .toggle span {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #c2c4ca, #dfe1e5);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.35), 0 1px 0 #fff;
  transition: background .15s;
}
.admin-shell .toggle span::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffffff, #d5d7db);
  box-shadow: 0 2px 3px rgba(0,0,0,0.4), inset 0 1px 0 #fff;
  transition: transform .15s;
}
.admin-shell .toggle input:checked + span {
  background: linear-gradient(180deg, var(--skeuo-primary-dark), var(--skeuo-primary));
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.4), 0 0 6px rgba(255,87,34,0.5);
}
.admin-shell .toggle input:checked + span::before {
  transform: translateX(20px);
}

/* ---------- analog-style meter ----------------------------------------
   Markup: <div class="meter"><i style="width:NN%"></i></div>
*/

.admin-shell .meter {
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, #cdcfd4, #e6e7ea);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.35), 0 1px 0 #fff;
  overflow: hidden;
}
.admin-shell .meter > i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(180deg, #6fe3a1, #35b978);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
  transition: width .4s ease;
}
.admin-shell .meter.warn > i { background: linear-gradient(180deg, #ffd27a, #f5a623); }
.admin-shell .meter.bad  > i { background: linear-gradient(180deg, #ff9a9a, #e94b4b); }

/* odometer / numeric readout */
.admin-shell .odometer {
  display: inline-block;
  font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  font-weight: 700;
  letter-spacing: 1px;
  color: #d7dbe0;
  background: linear-gradient(180deg, #23252a, #16181c);
  border: 1px solid #0c0d10;
  border-radius: 4px;
  padding: 3px 8px;
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.7), 0 1px 0 #fff;
}

/* ---------- convex glossy buttons ------------------------------------- */

.admin-shell button,
.admin-shell .btn,
.admin-shell input[type="submit"],
.admin-shell input[type="button"] {
  font: inherit;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  padding: 9px 16px;
  border-radius: var(--radius-s);
  border: 1px solid var(--skeuo-primary-dark);
  background: linear-gradient(180deg, #ff7a4d, var(--skeuo-primary) 55%, var(--skeuo-primary-dark));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    0 1px 2px rgba(0,0,0,0.35);
  text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
  transition: transform .05s, box-shadow .1s, filter .1s;
}
.admin-shell button:hover,
.admin-shell .btn:hover { filter: brightness(1.04); }
.admin-shell button:active,
.admin-shell .btn:active,
.admin-shell input[type="submit"]:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.4);
}
.admin-shell button.secondary,
.admin-shell .btn.secondary {
  color: var(--ink);
  border-color: var(--metal-lo);
  background: linear-gradient(180deg, #ffffff, #dfe1e5);
  text-shadow: 0 1px 0 #fff;
}
.admin-shell button:disabled,
.admin-shell .btn:disabled {
  filter: grayscale(0.6) brightness(0.95);
  cursor: not-allowed;
}

/* ---------- inputs (inset) ------------------------------------------- */

.admin-shell input[type="text"],
.admin-shell input[type="password"],
.admin-shell input[type="email"],
.admin-shell input[type="number"],
.admin-shell input[type="search"],
.admin-shell input[type="tel"],
.admin-shell input[type="url"],
.admin-shell select,
.admin-shell textarea {
  font: inherit;
  color: var(--ink);
  width: 100%;
  padding: 9px 12px;
  border-radius: var(--radius-s);
  border: 1px solid var(--metal-lo);
  background: linear-gradient(180deg, #f3f4f6, #ffffff);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.14), 0 1px 0 #fff;
}
.admin-shell input:focus,
.admin-shell select:focus,
.admin-shell textarea:focus {
  outline: none;
  border-color: var(--skeuo-primary);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.14), 0 0 0 3px var(--skeuo-primary-lo);
}

/* ---------- tables (framed screen) --------------------------------- */

.admin-shell table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border: 1px solid var(--panel-shadow);
  border-radius: var(--radius-s);
  overflow: hidden;
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(0,0,0,0.2);
}
.admin-shell th,
.admin-shell td {
  padding: 10px 13px;
  text-align: left;
  border-bottom: 1px solid var(--hairline);
  font-size: 13px;
}
.admin-shell thead th {
  background: linear-gradient(180deg, #eff0f3, #dcdee3);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.4px;
  color: #6b6e75;
  text-shadow: 0 1px 0 #fff;
}
.admin-shell tbody tr:last-child td { border-bottom: none; }
.admin-shell tbody tr:nth-child(even) td { background: #f7f8fa; }

/* ---------- badges / status pills --------------------------------- */

.admin-shell .badge,
.admin-shell .status {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  border: 1px solid rgba(0,0,0,0.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
  background: linear-gradient(180deg, #ffffff, #e7e8ec);
  color: var(--ink-soft);
}
.admin-shell .badge.ok,   .admin-shell .status.ok   { background: linear-gradient(180deg,#d7f5e3,#a7e6c4); color:#1c6b42; }
.admin-shell .badge.warn, .admin-shell .status.warn { background: linear-gradient(180deg,#fff0cf,#ffdd99); color:#8a5a00; }
.admin-shell .badge.bad,  .admin-shell .status.bad  { background: linear-gradient(180deg,#ffd9d9,#ffadad); color:#992020; }

/* stat readout tile */
.admin-shell .stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px;
  border-radius: var(--radius-s);
  background: linear-gradient(180deg, #ffffff, #eceef1);
  border: 1px solid var(--panel-shadow);
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(0,0,0,0.18);
}
.admin-shell .stat .k {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--ink-soft);
}
.admin-shell .stat .v {
  font-size: 22px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.admin-shell .stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
}

/* ---------- login card (pre-auth, no sidebar) --------------------- */

body.admin-login {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
body.admin-login .login-card {
  width: 100%;
  max-width: 380px;
  text-align: center;
}
body.admin-login .login-card .brand {
  font-size: 26px;
  font-weight: 800;
  color: #f4f5f7;
  text-shadow: 0 1px 0 rgba(0,0,0,0.6);
  margin-bottom: 4px;
}
body.admin-login .login-card .sub {
  color: #b9bcc3;
  font-size: 13.5px;
  margin-bottom: 18px;
}
body.admin-login .field { text-align: left; margin-bottom: 14px; }
body.admin-login label {
  display: block;
  font-weight: 700;
  font-size: 12.5px;
  margin-bottom: 6px;
  color: var(--ink-soft);
}
body.admin-login .err {
  background: linear-gradient(180deg,#ffd9d9,#ffadad);
  color: #992020;
  border-radius: var(--radius-s);
  padding: 10px 12px;
  font-size: 13px;
  margin-bottom: 14px;
  border: 1px solid rgba(0,0,0,0.12);
}

/* ---------- responsive: collapse sidebar -------------------------- */

@media (max-width: 860px) {
  body.admin-shell { display: block; }
  .admin-shell .sidebar {
    position: fixed;
    z-index: 1000;
    height: 100vh;
    transform: translateX(-100%);
    transition: transform .2s ease;
  }
  .admin-shell .sidebar.open { transform: translateX(0); }
  .admin-shell .sidebar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 1001;
    width: 40px;
    height: 40px;
    padding: 0;
    font-size: 18px;
  }
  .admin-shell .admin-main { padding-top: 64px; }
}