/* =====================================================================
   ISK TECHNOLOGIES — Admin Web App styles
   Loaded only on admin.html, alongside isk-style.css (shares the same
   color tokens / fonts already defined there).
===================================================================== */
body.admin-body{background:var(--navy-900); min-height:100vh;}

/* ---------- login screen ---------- */
.admin-login-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;
  background:
    radial-gradient(900px 400px at 85% -10%, rgba(245,130,32,.2), transparent 60%),
    radial-gradient(700px 380px at 10% 110%, rgba(11,85,99,.35), transparent 60%),
    linear-gradient(180deg, var(--navy-900) 0%, var(--navy) 100%);
}
.admin-login-card{
  background:#fff; border-radius:14px; padding:36px; width:380px; max-width:100%;
  box-shadow:0 30px 80px rgba(0,0,0,.35);
}
.admin-login-card .brand-row{display:flex; align-items:center; gap:10px; margin-bottom:22px;}
.admin-login-card .brand-row img{width:38px; height:38px; object-fit:contain; border-radius:8px;}
.admin-login-card .brand-row .fallback-mark{
  width:38px; height:38px; border-radius:8px; background:linear-gradient(135deg,var(--orange),var(--orange-dark));
  display:none; align-items:center; justify-content:center; font-family:'Space Grotesk'; font-weight:700; color:#fff;
}
.admin-login-card h2{font-size:19px; margin-bottom:4px;}
.admin-login-card p.sub{font-size:13px; color:var(--muted); margin-bottom:22px;}
.admin-error{background:#FDECEC; color:#B3261E; font-size:12.5px; padding:10px 12px; border-radius:8px; margin-bottom:14px; display:none;}

/* ---------- dashboard shell ---------- */
.admin-shell{display:none; min-height:100vh; grid-template-columns:230px 1fr;}
.admin-shell.active{display:grid;}
.admin-sidebar{background:var(--navy-900); color:#CBD8E6; padding:22px 16px; position:sticky; top:0; height:100vh;}
.admin-sidebar .brand-row{display:flex; align-items:center; gap:10px; margin-bottom:26px; padding:0 6px;}
.admin-sidebar .brand-row img{width:34px; height:34px; object-fit:contain; border-radius:7px;}
.admin-sidebar .brand-row .fallback-mark{
  width:34px; height:34px; border-radius:7px; background:linear-gradient(135deg,var(--orange),var(--orange-dark));
  display:none; align-items:center; justify-content:center; font-family:'Space Grotesk'; font-weight:700; color:#fff; font-size:13px;
}
.admin-sidebar .brand-row b{color:#fff; font-family:'Space Grotesk'; font-size:14px; display:block;}
.admin-sidebar .brand-row small{color:#8CA0B6; font-size:9.5px; text-transform:uppercase; letter-spacing:.1em;}
.admin-nav{display:flex; flex-direction:column; gap:4px;}
.admin-nav button{
  text-align:left; background:none; border:none; color:#B9C8D8; padding:11px 14px; border-radius:8px; font-size:13.5px;
  font-weight:500; display:flex; align-items:center; gap:10px; width:100%;
}
.admin-nav button:hover{background:rgba(255,255,255,.06); color:#fff;}
.admin-nav button.active{background:var(--orange); color:#fff;}
.admin-sidebar .logout-btn{
  margin-top:26px; width:100%; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.15); color:#fff;
  padding:10px 14px; border-radius:8px; font-size:13px;
}
.admin-sidebar .logout-btn:hover{background:rgba(255,255,255,.12);}

.admin-main{background:var(--paper); padding:26px 32px; overflow-x:hidden;}
.admin-topbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; flex-wrap:wrap; gap:10px;}
.admin-topbar h1{font-size:22px;}
.admin-topbar .meta{font-size:12.5px; color:var(--muted);}

.admin-tab{display:none;}
.admin-tab.active{display:block;}

/* ---------- KPI cards ---------- */
.kpi-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:26px;}
.kpi-card{background:#fff; border:1px solid var(--line); border-radius:12px; padding:18px;}
.kpi-card .n{font-family:'Space Grotesk'; font-size:26px; font-weight:700; color:var(--navy);}
.kpi-card .l{font-size:11.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin-top:4px;}
.kpi-card.accent-orange{border-top:3px solid var(--orange);}
.kpi-card.accent-teal{border-top:3px solid var(--teal);}
.kpi-card.accent-navy{border-top:3px solid var(--navy);}
.kpi-card.accent-purple{border-top:3px solid var(--purple);}

/* ---------- simple CSS bar charts ---------- */
.chart-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:26px;}
.chart-card{background:#fff; border:1px solid var(--line); border-radius:12px; padding:20px;}
.chart-card h4{font-size:14px; margin-bottom:14px;}
.bar-row{display:flex; align-items:center; gap:10px; margin-bottom:10px; font-size:12.5px;}
.bar-row .label{width:150px; flex:0 0 auto; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.bar-row .track{flex:1; background:var(--paper); border-radius:6px; height:16px; overflow:hidden;}
.bar-row .fill{height:100%; background:linear-gradient(90deg,var(--orange),var(--orange-dark)); border-radius:6px; transition:width .8s ease;}
.bar-row .val{width:30px; flex:0 0 auto; text-align:right; font-family:'JetBrains Mono'; color:var(--navy); font-weight:600;}

/* ---------- data tables ---------- */
.table-toolbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; gap:10px; flex-wrap:wrap;}
.table-toolbar input{border:1px solid var(--line); border-radius:8px; padding:9px 13px; font-size:13px; width:260px; font-family:inherit;}
.table-wrap{background:#fff; border:1px solid var(--line); border-radius:12px; overflow:auto; max-height:64vh;}
table.admin-table{width:100%; border-collapse:collapse; font-size:12.5px;}
table.admin-table thead th{
  position:sticky; top:0; background:var(--navy); color:#fff; text-align:left; padding:11px 14px; font-weight:600;
  white-space:nowrap; font-size:11.5px; text-transform:uppercase; letter-spacing:.03em;
}
table.admin-table tbody td{padding:10px 14px; border-bottom:1px solid var(--line); color:var(--ink); white-space:nowrap; max-width:260px; overflow:hidden; text-overflow:ellipsis;}
table.admin-table tbody tr:hover{background:var(--paper);}
.status-tag{display:inline-block; padding:3px 9px; border-radius:10px; font-size:10.5px; font-weight:600;}
.status-tag.pending, .status-tag.new{background:#FFF2CC; color:#8A6100;}
.status-tag.confirmed, .status-tag.fulfilled, .status-tag.won, .status-tag.converted{background:#E3F5E9; color:#1E8E3E;}
.status-tag.cancelled, .status-tag.lost, .status-tag.closed{background:#FDECEC; color:#B3261E;}
.status-tag.contacted, .status-tag.quoted{background:#E8EEFB; color:#2A4B9B;}

.spinner{width:26px; height:26px; border:3px solid var(--line); border-top-color:var(--orange); border-radius:50%; animation:spin .8s linear infinite; margin:40px auto;}
@keyframes spin{to{transform:rotate(360deg);}}

@media (max-width:900px){
  .admin-shell.active{grid-template-columns:1fr;}
  .admin-sidebar{position:static; height:auto;}
  .kpi-grid, .chart-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:560px){
  .kpi-grid, .chart-grid{grid-template-columns:1fr;}
}