
/* TechStore Admin | visual refinement 2026-10-17
   Flat product UI; no marketing illustrations, false status or ornamental glow.
   Keep established color-coded row actions unchanged. */
:root{
  --ts-surface:#101922;
  --ts-surface-raised:#141f29;
  --ts-border:#293643;
  --ts-muted:#9aa9b8;
  --ts-accent:#4b95e7;
  --ts-radius:9px;
}
.admin-shell{background:#0d151e;--admin-bg:#0d151e;--admin-panel:var(--ts-surface);--admin-panel-2:var(--ts-surface-raised);--admin-line:var(--ts-border);--admin-blue:#397fcd;color:#e7edf3}
.admin-app{background:#0d151e}
.admin-sidebar{background:#101821;border-color:#26323f}
.admin-sidebar .side-label{letter-spacing:.025em;text-transform:none;font-size:11px;font-weight:650;color:#7e8e9e;padding-top:17px}
.admin-sidebar button:not(.admin-collapse-toggle){font-weight:530;border-radius:6px;font-size:12px}
.admin-sidebar button.on{background:#1c2b3b;border-left:2px solid var(--ts-accent)}
.admin-side-brand{border-color:#273542}
.admin-brand-text small{letter-spacing:.03em;text-transform:none;color:#8898a8}
.admin-side-footer{display:none}
.admin-topbar{background:#0d151e;border-color:#27333f;box-shadow:none}
.admin-topbar-left h1{font-size:22px;font-weight:680;letter-spacing:-.45px}
.admin-topbar-left p{font-size:12px;color:#8fa0b1}
.admin-content>.admin-head{justify-content:flex-end;margin-bottom:14px}
.admin-content>.admin-head>div:first-child{display:none}
.admin-content>.admin-head:has(>div:only-child){display:none}
.admin-content .admin-head h1{font-size:18px;font-weight:680}
.admin-content .admin-head p{font-size:12px}
.admin-user-avatar{background:#274261;color:#d3e7fa}
.admin-shell .panel,.admin-shell .metric,.admin-kpi,.admin-dash-card{
  background:var(--ts-surface)!important;
  border:1px solid var(--ts-border)!important;
  border-radius:var(--ts-radius)!important;
  box-shadow:none!important
}
.admin-shell .panel{padding:16px}
.admin-kpi{min-height:104px;padding:15px}
.admin-kpi:after{display:none}
.admin-kpi-icon{width:34px;height:34px;border-radius:7px;background:#1b2a39}
.admin-kpi-icon svg{width:19px;height:19px;stroke:#78aae0}
.admin-kpi-value{font-size:24px;letter-spacing:-.45px;margin-top:9px}
.admin-kpi-label{font-size:12px;color:#9faec0}
.admin-kpi-note{color:#8495a7;font-size:11px}
.admin-dashboard-grid,.admin-bottom-grid{gap:14px}
.admin-dash-card{padding:18px}
.admin-dash-card-head h3{font-size:14px;font-weight:700}
.admin-dash-card-head span{font-size:11px;color:#8e9eae}
.admin-bars{background-image:repeating-linear-gradient(to top,transparent 0,transparent 42px,rgba(130,154,181,.08) 43px);background-size:auto;border-color:#273442}
.admin-bar{background:#4b95e7;border-radius:3px 3px 0 0}
.admin-quick-btn,.admin-shell .btn,.admin-icon-btn{border-radius:7px;box-shadow:none}
.admin-quick-btn.primary{background:#397fcd;border-color:#397fcd}
.admin-quick-btn:hover{transform:none}
.admin-shell .btn.primary,.admin-shell .primary{background:#397fcd!important;border-color:#397fcd!important}
.admin-shell .btn.primary:hover,.admin-shell .primary:hover{background:#4b8bd3!important}
.admin-shell .metric span{font-size:12px}
.admin-shell .metric strong{font-size:22px;font-weight:720}
.admin-shell .filterbar{background:transparent;gap:9px}
.admin-shell .filterbar input,.admin-shell .filterbar select,.admin-shell .field input,.admin-shell .field select,.admin-shell .field textarea{
  background:#101b26;border:1px solid #304052;border-radius:7px;min-height:38px;font-size:12px;color:#e4ebf2
}
.admin-shell .filterbar input:focus,.admin-shell .filterbar select:focus,
.admin-shell .field input:focus,.admin-shell .field select:focus,.admin-shell .field textarea:focus{
  outline:2px solid rgba(75,149,231,.22);outline-offset:0;border-color:#538abd;box-shadow:none
}
.admin-shell table{background:var(--ts-surface);border:0;border-radius:0}
.admin-shell th,.admin-shell td{padding:12px 13px;border-bottom:1px solid #253442}
.admin-shell th{font-size:11px;text-transform:none;letter-spacing:0;color:#aab9c8;font-weight:650;background:#15212d}
.admin-shell td{font-size:12px;color:#c9d5e0}
.admin-shell td>b,.admin-shell td b{font-weight:650}
.admin-shell tr:hover td{background:#162430}
.admin-shell td .muted{color:#8596a8}
.admin-shell .status-dot{box-shadow:none}
.admin-shell .stock-badge{font-weight:680;border-radius:6px}
.admin-shell .badge{border-radius:6px;font-weight:650}
.admin-shell .alert-box{border-radius:8px;background:#131e28}
.admin-shell .alert-box.warn{background:#211d16;border-color:#574630}
.admin-shell .alert-box.danger{background:#24181c;border-color:#5e373f}
.admin-shell .tag{border-radius:5px}
.admin-shell .notice{border-radius:7px}
.admin-actions .admin-action{font-weight:650!important;font-size:11px!important;border-radius:6px!important}
.admin-shell .category-icon{background:#1b2c3d;border-radius:7px}
.admin-shell .category-icon svg{width:25px;height:25px;stroke:#9bbad7;fill:none;stroke-width:1.6}
.admin-account-popover{border-radius:9px;background:#151f29}
.admin-account-actions button{border-radius:6px}

/* Authentication — genuine business software rather than a marketing poster */
.admin-login-screen{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(390px,460px);
  gap:clamp(36px,6vw,100px);
  align-items:center;
  min-height:100vh;
  height:auto;
  width:100%;
  padding:68px clamp(32px,7vw,112px);
  overflow:visible;
  background:#0e1721;
  color:#eaf0f7;
}
.admin-login-screen::before{display:none!important;background-image:none!important}
.admin-login-screen::after{display:none!important;background:none!important}
.admin-login-left{
  position:relative!important;
  z-index:1;
  left:auto!important;
  top:auto!important;
  width:auto!important;
  min-width:0!important;
  max-width:570px!important;
  transform:none!important
}
.admin-login-brand{gap:12px}
.admin-login-brand svg{width:42px;height:42px;flex:0 0 42px;filter:none}
.admin-login-brand-name{font-size:35px;font-weight:760;letter-spacing:-1.3px}
.admin-login-brand-name span{color:#68a9ec}
.admin-login-brand-sub{margin:9px 0 0 54px;font-size:11px;letter-spacing:.14em;font-weight:620;color:#8fa2b5}
.admin-login-accent{display:none}
.admin-login-hero{font-size:clamp(34px,3.5vw,51px);line-height:1.15;letter-spacing:-1.65px;font-weight:720;margin-top:55px;text-shadow:none!important}
.admin-login-hero span{color:#7db6ed}
.admin-login-copy{margin-top:19px;max-width:470px;font-size:16px;line-height:1.62;color:#aab9c9}
.admin-login-features{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
  margin-top:49px;
  padding-top:23px;
  border-top:1px solid #2a3847
}
.admin-login-feature{width:auto;min-width:0}
.admin-login-feature-icon{height:24px;width:24px;background:transparent;border:0;border-radius:0;box-shadow:none}
.admin-login-feature-icon svg{height:23px;width:23px;stroke:#76aee5;stroke-width:1.5}
.admin-login-feature b{font-size:13px;font-weight:660;margin-top:12px}
.admin-login-feature p{font-size:11px;line-height:1.45;color:#8e9eaf;white-space:normal;margin-top:5px}
.admin-login-tagline{display:none}
.admin-login-card{
  position:relative!important;
  z-index:2;
  top:auto!important;
  right:auto!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  width:100%!important;
  min-width:0!important;
  max-width:460px!important;
  transform:none!important;
  margin:0!important;
  padding:37px 36px 32px!important;
  border-radius:13px!important;
  border:1px solid #324252!important;
  background:#15212d!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  box-shadow:0 12px 30px rgba(0,0,0,.14)!important;
  overflow:visible!important
}
.admin-login-card-brand{gap:9px}
.admin-login-card-brand svg{width:31px!important;height:31px!important}
.admin-login-card-brand strong{font-size:26px!important;letter-spacing:-.7px;font-weight:750}
.admin-login-kicker{margin-top:18px!important;font-size:10px!important;letter-spacing:.1em!important;color:#93a5b7}
.admin-login-title{margin-top:11px!important;font-size:26px!important;letter-spacing:-.7px;font-weight:730}
.admin-login-description{margin-top:7px!important;font-size:13px!important;line-height:1.52!important;color:#9eafc0}
.admin-login-form{margin-top:24px!important}
.admin-login-label{font-size:12px!important;font-weight:640;margin-bottom:7px!important;color:#dae4ed}
.admin-login-field{height:46px!important;background:#0f1a25!important;border:1px solid #334354!important;border-radius:7px!important;box-shadow:none!important}
.admin-login-field+.admin-login-label{margin-top:15px!important}
.admin-login-field svg{left:14px!important;width:18px!important;height:18px!important;stroke:#91a4b7}
.admin-login-field input{font-size:13px!important;padding:0 43px 0 42px!important;border-radius:7px!important}
.admin-login-field:focus-within{border-color:#6ba0dc!important;box-shadow:0 0 0 2px rgba(80,147,223,.14)!important}
.admin-login-eye{width:32px!important;height:32px!important;right:7px!important}
.admin-login-eye svg{left:auto!important}
.admin-login-forgot{margin:10px 0 14px auto!important;font-size:12px!important;text-decoration:none!important;color:#83baf0}
.admin-login-forgot:hover{text-decoration:underline!important}
.admin-login-primary{height:44px!important;border-radius:7px!important;background:#397fcd!important;box-shadow:none!important;font-size:14px!important;font-weight:700!important}
.admin-login-primary:hover{background:#498bd4!important;filter:none!important}
.admin-login-primary svg{height:19px!important;width:19px!important}
.admin-login-error{font-size:12px!important;min-height:16px!important;margin-top:6px!important}
.admin-login-or{margin:6px 0 11px!important;gap:12px;font-size:11px!important;color:#91a3b6!important}
.admin-login-or::before,.admin-login-or::after{background:#334354!important}
.admin-login-google{height:43px!important;border-radius:7px!important;font-size:13px!important;box-shadow:none!important}
.admin-login-store{height:42px!important;border-radius:7px!important;background:transparent!important;border:1px solid #36485a!important;font-size:13px!important;font-weight:640!important}
.admin-login-store svg{height:18px!important;width:18px!important}
.admin-login-theme{position:fixed!important;top:17px!important;right:21px!important;border-radius:8px!important;background:#15212d!important;box-shadow:none!important;border-color:#354556!important}
.admin-login-theme button{height:30px!important;width:36px!important;border-radius:6px!important}
.admin-login-theme button.active{background:#2e638f!important;box-shadow:none!important}
.admin-login-theme svg{height:16px!important;width:16px!important}
.admin-login-screen.login-light{background:#eef2f5!important;color:#1e2b38!important}
.admin-login-screen.login-light .admin-login-left{color:#1d2e3d!important}
.admin-login-screen.login-light .admin-login-brand-name{color:#192a38}
.admin-login-screen.login-light .admin-login-brand-sub{color:#687c8e}
.admin-login-screen.login-light .admin-login-hero span{color:#256bac}
.admin-login-screen.login-light .admin-login-copy,.admin-login-screen.login-light .admin-login-feature p{color:#637689}
.admin-login-screen.login-light .admin-login-features{border-color:#ccd5dd}
.admin-login-screen.login-light .admin-login-feature b{color:#213245}
.admin-login-screen.login-light .admin-login-card{background:#fff!important;color:#1e2d3a!important;border-color:#d0d9e1!important;box-shadow:0 9px 30px rgba(26,43,60,.08)!important}
.admin-login-screen.login-light .admin-login-field{background:#f8fafc!important;border-color:#cbd6df!important}
.admin-login-screen.login-light .admin-login-field input{color:#1b2b39!important}
.admin-login-screen.login-light .admin-login-label{color:#293b4b}
.admin-login-screen.login-light .admin-login-kicker,.admin-login-screen.login-light .admin-login-description{color:#6b7b8b}
.admin-login-screen.login-light .admin-login-or{color:#758595!important}
.admin-login-screen.login-light .admin-login-or::before,.admin-login-screen.login-light .admin-login-or::after{background:#d8e1e9!important}
.admin-login-screen.login-light .admin-login-store{color:#263c50!important;border-color:#cbd6df!important}
.admin-login-screen.login-light .admin-login-store svg{stroke:#354c5f}
.admin-login-screen.login-light .admin-login-theme{background:#fff!important;border-color:#d4dce4!important}
.admin-login-screen.login-light .admin-login-theme button{color:#3b5268}
.admin-login-screen.login-light .admin-login-theme button.active{color:#fff}
@media(max-width:1120px){
 .admin-login-screen{grid-template-columns:minmax(0,1fr) minmax(360px,440px);gap:32px;padding:64px 5vw}
 .admin-login-hero{font-size:36px}
}
@media(max-width:900px){
 .admin-login-screen{display:block;min-height:100vh;padding:70px 20px 32px}
 .admin-login-left{display:none!important}
 .admin-login-card{margin:0 auto!important;max-width:460px!important;padding:32px 26px 26px!important}
}
@media(max-width:440px){
 .admin-login-screen{padding:67px 12px 24px}
 .admin-login-card{padding:27px 20px 23px!important}
 .admin-login-title{font-size:24px!important}
}
@media(max-height:740px) and (min-width:901px){
 .admin-login-screen{padding-top:25px;padding-bottom:25px}
 .admin-login-hero{margin-top:23px}
 .admin-login-features{margin-top:20px}
 .admin-login-card{padding:21px 31px!important}
 .admin-login-form{margin-top:13px!important}
 .admin-login-kicker{margin-top:10px!important}
}

.admin-dash-empty{height:210px;border-top:1px solid #263443;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;background:#111c26}
.admin-dash-empty strong{font-size:13px;font-weight:650;color:#bdccda}
.admin-dash-empty span{max-width:300px;color:#8394a6;font-size:12px;line-height:1.55}

.admin-bottom-grid{align-items:start}
.admin-bottom-grid>.admin-dash-card{align-self:start}
.admin-bottom-grid>div{align-self:start}
@media(max-width:820px){.admin-bottom-grid{grid-template-columns:1fr}}

/* Admin products: purpose-built mobile records, no hidden sideways controls */
.admin-mobile-products{display:none}
@media(max-width:700px){
 .admin-topbar-actions>.btn{display:none}
 .admin-products-table{display:none!important}
 .admin-mobile-products{display:grid;gap:10px}
 .admin-mobile-products-count{color:#96a6b6;font-size:12px;padding:3px 2px 6px}
 .admin-mobile-product-card{background:#101a24;border:1px solid #2b3947;border-radius:9px;padding:14px;min-width:0}
 .admin-mobile-product-top{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:10px}
 .admin-mobile-product-picture{height:44px;width:44px;border-radius:6px;border:1px solid #2c3b4b;background:#172535;display:grid;place-items:center;overflow:hidden}
 .admin-mobile-product-picture img{width:100%;height:100%;object-fit:contain}
 .admin-mobile-product-picture svg{width:23px;height:23px;stroke:#98b8da;fill:none;stroke-width:1.7}
 .admin-mobile-product-name{min-width:0}
 .admin-mobile-product-name strong{display:block;font-size:13px;font-weight:680;line-height:1.3;white-space:normal;overflow-wrap:break-word}
 .admin-mobile-product-name span{display:block;color:#8798aa;font-size:11px;margin-top:4px}
 .admin-mobile-product-state{font-size:11px;color:#aab9c8;white-space:nowrap}
 .admin-mobile-product-state i{margin-right:5px}
 .admin-mobile-product-facts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0 13px;padding-top:12px;border-top:1px solid #253342}
 .admin-mobile-product-facts>div{display:grid;gap:7px;align-content:start}
 .admin-mobile-product-facts>div>span{font-size:11px;color:#8394a6}
 .admin-mobile-product-facts strong{font-weight:690;font-size:14px}
 .admin-mobile-product-actions{min-width:0;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .admin-mobile-product-actions .admin-action{width:100%!important;height:38px!important;min-height:38px!important;padding:0 10px!important;font-size:11px!important;justify-content:center!important}
 .admin-mobile-product-actions .admin-action-text{display:inline!important}
 .admin-shell .filterbar{gap:8px;margin-bottom:12px}
 .admin-shell .admin-head:has(>button){margin-bottom:10px}
}

@media(max-width:820px){
 .admin-user-chip{display:flex!important;width:40px;min-width:40px;min-height:38px;padding:4px!important;justify-content:center}
 .admin-user-chip .admin-user-avatar{height:27px;width:27px;flex:0 0 27px}
 .admin-user-chip .admin-user-copy,.admin-user-chip .admin-user-chevron{display:none!important}
 .admin-topbar-actions{gap:6px}
}
