/* DGTechQA admin — home-page theme (light, red/blue) + mobile app layout. Loaded last on admin pages. */
:root{--bg:#f5f7fa;--surface:#fff;--surface2:#f5f7fa;--surface-2:#f5f7fa;--border:#dfe3ea;--text:#202124;--muted:#5f6368;--green:#e42527;--blue:#226db4;--violet:#e42527;--amber:#d97706;--red:#e42527;--ad-shadow:0 2px 14px rgba(32,33,36,.07)}
html,body{background:var(--bg)!important;color:var(--text);font-family:'Mulish',system-ui,sans-serif}
body{background-image:radial-gradient(circle at 1px 1px,rgba(34,109,180,.07) 1px,transparent 0);background-size:22px 22px}
::selection{background:rgba(228,37,39,.2)}

/* ── Login card (terminal header like home forms) ── */
#loginScreen{background:radial-gradient(ellipse at 50% 0,rgba(228,37,39,.08),transparent 60%)!important;padding:20px}
.login-card{border-radius:16px!important;padding:0!important;max-width:420px!important;overflow:hidden;box-shadow:0 10px 40px rgba(32,33,36,.12)!important;border:1px solid var(--border)!important}
.login-card::before{content:"● ● ●";display:block;padding:10px 16px;background:var(--surface2);border-bottom:1px solid var(--border);font-size:11px;letter-spacing:4px;color:#e42527;text-shadow:14px 0 #d97706,28px 0 #2e9d5b;font-family:'Source Code Pro',monospace}
.login-card>*:not(.login-logo):not(h2){margin-left:36px;margin-right:36px}
.login-logo{margin:30px 0 8px!important}.login-logo span{color:var(--blue)!important}.login-logo .br{color:var(--green)!important}
.login-card h2{margin-bottom:22px!important;color:var(--muted)!important}
.login-card .login-btn{width:calc(100% - 72px)}.login-card .login-error{margin-bottom:28px}.login-card .form-group:nth-of-type(2){margin-bottom:6px}
.login-card>.login-btn{margin-bottom:34px}
.form-group input,.search-input,.filter-select,.toolbar input[type=text]{background:#fff!important;border:1.5px solid var(--border)!important;border-radius:10px!important}
.form-group input:focus,.search-input:focus,.filter-select:focus,.toolbar input:focus{border-color:var(--blue)!important;box-shadow:0 0 0 3px rgba(34,109,180,.14)!important}
.login-btn{background:linear-gradient(135deg,#e42527,#c81e20)!important;box-shadow:0 6px 18px rgba(228,37,39,.28)}

/* ── Header / tabs ── */
.admin-header{background:rgba(255,255,255,.96)!important;border-bottom:1px solid var(--border)!important;box-shadow:0 1px 8px rgba(32,33,36,.05)}
.admin-header .logo{color:var(--blue)!important;font-family:'Source Code Pro',monospace}
.admin-badge{background:rgba(228,37,39,.1)!important;border-color:rgba(228,37,39,.25)!important;color:var(--green)!important}
.logout-btn{background:#fff!important;border:1px solid rgba(228,37,39,.35)!important;color:var(--red)!important}
.admin-tabs{background:#fff}
.tab-btn.active{color:var(--green)!important;border-bottom-color:var(--green)!important}
.stat-chip{border-radius:14px!important;box-shadow:var(--ad-shadow);border-top:3px solid var(--blue)!important;flex:1 1 140px}
.stat-chip:nth-child(even){border-top-color:var(--green)!important}
.stat-chip .sc-num{color:var(--text)!important}
.table-wrap,.table-shell{background:#fff!important;border:1px solid var(--border)!important;border-radius:14px!important;box-shadow:var(--ad-shadow);overflow:auto}
table thead th{background:var(--surface2)!important;color:var(--muted)!important;text-transform:uppercase;font-size:.72rem;letter-spacing:.05em}
table tbody tr:hover{background:rgba(34,109,180,.04)!important}
.refresh-btn,.export-btn,.admin-btn{border-radius:10px!important;font-weight:700}
.admin-btn:hover,.refresh-btn:hover{border-color:var(--blue)!important;color:var(--blue)!important}
.admin-btn.danger{color:var(--red)!important}
.admin-top h1{font-size:1.5rem;color:var(--text)}

/* ── Mobile app layout ── */
@media (max-width:820px){
  body{background-image:none}
  .admin-header{padding:0 14px!important;height:54px!important}
  .admin-header .logo{font-size:1rem!important}
  .admin-badge{display:none}
  .admin-content{padding:14px 12px 96px!important}
  /* tabs → fixed bottom nav */
  .admin-tabs{position:fixed;bottom:0;left:0;right:0;z-index:150;padding:0 0 env(safe-area-inset-bottom,0)!important;border-top:1px solid var(--border);border-bottom:0!important;box-shadow:0 -2px 14px rgba(32,33,36,.08)}
  .tab-btn{flex:1;flex-direction:column;gap:2px!important;padding:9px 4px!important;font-size:.72rem!important;font-weight:700!important;border-bottom:0!important;border-top:3px solid transparent;text-align:center;line-height:1.2}
  .tab-btn.active{border-top-color:var(--green)!important}
  .stats-bar{display:grid!important;grid-template-columns:1fr 1fr;gap:10px!important}
  .stat-chip{min-width:0!important;padding:12px 14px!important}.stat-chip .sc-num{font-size:1.4rem!important}
  .toolbar{display:grid!important;grid-template-columns:1fr 1fr;gap:8px!important}
  .toolbar .search-input,.toolbar input[type=text]{grid-column:1/-1;min-width:0!important;width:100%}
  .toolbar .filter-select{grid-column:1/-1;width:100%}
  .toolbar button{padding:10px!important}
  .admin-wrap{padding:12px!important}
  .admin-top{flex-direction:column;align-items:stretch!important;gap:10px}
  .admin-actions{display:flex;flex-wrap:wrap;gap:8px}.admin-actions>*{flex:1 1 auto;text-align:center}
  .admin-top h1{font-size:1.2rem}
  .tabs{display:flex;overflow-x:auto;gap:8px;padding-bottom:4px;-webkit-overflow-scrolling:touch}.tabs>*{flex:0 0 auto;border-radius:20px!important}
  /* tables → cards */
  .table-wrap,.table-shell{background:transparent!important;border:0!important;box-shadow:none!important;overflow:visible!important}
  table,tbody{display:block;width:100%}table thead{display:none}
  table tbody tr{display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);border-left:4px solid var(--blue);border-radius:14px;margin-bottom:12px;padding:6px 14px;box-shadow:var(--ad-shadow)}
  table tbody td{display:flex!important;justify-content:space-between;align-items:center;gap:14px;padding:8px 0!important;border:0!important;border-bottom:1px dashed var(--border)!important;text-align:right;max-width:none!important;white-space:normal!important;word-break:break-word}
  table tbody td:last-child{border-bottom:0!important;justify-content:flex-end}
  table tbody td[data-label]::before{content:attr(data-label);flex:0 0 auto;font-size:.68rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);text-align:left}
  table tbody td[colspan]{display:block!important;text-align:center}
  table tbody td[colspan]::before{content:none}
  .pagination{flex-wrap:wrap;justify-content:center;gap:6px}
  /* modals → bottom sheet */
  .modal-overlay{align-items:flex-end!important;padding:0!important}
  .modal-box{width:100%!important;max-width:none!important;border-radius:20px 20px 0 0!important;max-height:88vh;overflow:auto}
  .detail-grid{grid-template-columns:1fr!important}
  .toast-fixed{bottom:80px!important}
}