/* ===== IT Asset Management — Theme ===== */
:root {
  --c-primary: #1a73e8;
  --c-primary-dark: #155ab6;
  --c-bg: #f4f7fb;
  --c-card: #ffffff;
  --c-border: #e4e9f2;
  --c-text: #1f2d3d;
  --c-muted: #6b7280;
  --c-success: #10b981;
  --c-warn: #f59e0b;
  --c-danger: #ef4444;
  --c-info: #0ea5e9;
  --radius: 14px;
  --shadow-sm: 0 2px 4px rgba(20,30,60,.06);
  --shadow: 0 6px 20px rgba(20,30,60,.08);
  --font-scale: 1;
}

/* Role accent colors */
.theme-company  { --c-accent:#2563eb; --c-accent-soft:#dbeafe; --c-accent-2:#1e40af; }
.theme-district { --c-accent:#10b981; --c-accent-soft:#d1fae5; --c-accent-2:#047857; }
.theme-school   { --c-accent:#f97316; --c-accent-soft:#ffedd5; --c-accent-2:#c2410c; }
.theme-admin    { --c-accent:#7c3aed; --c-accent-soft:#ede9fe; --c-accent-2:#5b21b6; }

html { font-size: calc(15px * var(--font-scale)); }
body {
  font-family: 'Sarabun','Prompt','Segoe UI',Tahoma,sans-serif;
  background: var(--c-bg);
  color: var(--c-text);
  min-height: 100vh;
}

/* === Topbar === */
.topbar {
  background: linear-gradient(135deg, var(--c-accent,#1a73e8), var(--c-accent-2,#155ab6));
  color: #fff;
  padding: 10px 18px;
  box-shadow: var(--shadow);
  position: sticky; top:0; z-index: 1030;
}
.topbar .brand {
  display:flex; align-items:center; gap:12px;
}
.topbar .brand img { height:46px; width:auto; background:#fff; border-radius:8px; padding:3px; }
.topbar .brand-text {
  line-height:1.15;
}
.topbar .brand-text .t1 { font-weight:700; font-size:1.05rem; }
.topbar .brand-text .t2 { font-size:.78rem; opacity:.92; }
.topbar .user-chip {
  background: rgba(255,255,255,.18);
  border-radius: 999px;
  padding: 5px 14px;
  display:inline-flex; gap:8px; align-items:center;
  font-size:.88rem;
}
.font-toggle button {
  background: rgba(255,255,255,.18);
  border: 0; color:#fff;
  width: 32px; height:32px; border-radius:8px;
  font-weight:700;
}
.font-toggle button:hover { background: rgba(255,255,255,.32); }

/* === Layout === */
.layout {
  display:grid; grid-template-columns: 260px 1fr; gap:0; min-height:calc(100vh - 76px);
}
@media (max-width: 992px){ .layout { grid-template-columns: 1fr; } .sidebar{ position:fixed; left:-280px; top:76px; bottom:0; transition:left .25s; z-index:1020; } .sidebar.show{ left:0; } }

.sidebar {
  background:#fff;
  border-right: 1px solid var(--c-border);
  padding: 18px 12px;
}
.sidebar .role-badge {
  background: var(--c-accent-soft);
  color: var(--c-accent-2);
  font-weight:700; font-size:.8rem;
  border-radius:8px; padding:6px 10px; text-align:center;
  margin-bottom: 14px;
  display:block;
}
.sidebar a.nav-link {
  display:flex; align-items:center; gap:10px;
  padding: 10px 14px;
  border-radius: 10px;
  color:#374151;
  font-weight:500;
  margin-bottom: 4px;
}
.sidebar a.nav-link:hover { background: var(--c-accent-soft); color: var(--c-accent-2); }
.sidebar a.nav-link.active { background: var(--c-accent); color:#fff; box-shadow: var(--shadow-sm); }
.sidebar a.nav-link i { width:20px; text-align:center; }

.content { padding: 22px clamp(16px, 3vw, 30px); }

/* === Cards === */
.card-app {
  background: var(--c-card);
  border:1px solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 18px;
}
.card-app .card-title { font-weight:700; color:#111827; }
.stat-card {
  background: var(--c-card);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow-sm);
  border-left: 5px solid var(--c-accent);
  display:flex; gap:14px; align-items:center;
}
.stat-card .icon {
  width:54px; height:54px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background: var(--c-accent-soft); color: var(--c-accent-2);
  font-size: 1.6rem;
}
.stat-card .v { font-size:1.6rem; font-weight:800; line-height:1; }
.stat-card .l { color: var(--c-muted); font-size:.86rem; }

/* Brand card with logo */
.brand-card {
  background: #fff; border:1px solid var(--c-border); border-radius: var(--radius);
  padding:14px; display:flex; align-items:center; gap:14px;
  box-shadow: var(--shadow-sm);
}
.brand-card img { height:48px; }
.brand-card .b-count { font-size:1.5rem; font-weight:800; color: var(--c-accent-2); }

/* === Buttons === */
.btn-primary, .btn-accent {
  background: var(--c-accent) !important;
  border-color: var(--c-accent) !important;
  color: #fff !important;
}
.btn-primary:hover, .btn-accent:hover,
.btn-primary:focus, .btn-accent:focus,
.btn-primary:active, .btn-accent:active {
  background: var(--c-accent-2) !important;
  border-color: var(--c-accent-2) !important;
  color: #fff !important;
}
.btn-primary:disabled, .btn-accent:disabled {
  background: var(--c-accent) !important;
  border-color: var(--c-accent) !important;
  color: #fff !important;
  opacity: .55;
}
.btn-outline-accent {
  border:1px solid var(--c-accent); color: var(--c-accent);
  background:transparent;
}
.btn-outline-accent:hover { background: var(--c-accent); color:#fff; }

/* checked state สำหรับ btn-check radio cards — เห็นพื้นหลังชัด */
.btn-check:checked + .btn-outline-accent,
.btn-check:active + .btn-outline-accent,
.btn-outline-accent.active {
  background: var(--c-accent-soft) !important;
  color: var(--c-accent-2) !important;
  border-color: var(--c-accent) !important;
  box-shadow: inset 0 0 0 2px var(--c-accent), 0 4px 12px rgba(0,0,0,.06) !important;
  font-weight: 600;
}
.btn-check:checked + .btn-outline-accent small,
.btn-check:checked + .btn-outline-accent .muted {
  color: var(--c-accent-2) !important;
  opacity: .85;
}

/* === Login page === */
.login-wrap {
  min-height:100vh;
  display:flex; align-items:stretch;
}
.login-left {
  flex:1.1;
  background: linear-gradient(135deg, #1d4ed8, #0ea5e9 60%, #06b6d4);
  color:#fff; padding: 40px;
  display:flex; flex-direction:column; justify-content:space-between;
  position:relative; overflow:hidden;
}
.login-left::after {
  content:''; position:absolute; right:-80px; bottom:-80px;
  width:320px; height:320px; border-radius:50%;
  background: rgba(255,255,255,.08);
}
.login-left::before {
  content:''; position:absolute; left:-100px; top:-100px;
  width:280px; height:280px; border-radius:50%;
  background: rgba(255,255,255,.08);
}
.login-left .ll-brand { display:flex; gap:14px; align-items:center; position:relative; z-index:1; }
.login-left .ll-brand img { height:64px; background:#fff; border-radius:10px; padding:5px; }
.login-left .ll-title { font-size:1.05rem; font-weight:700; line-height:1.3; }
.login-left .ll-sub { font-size:.85rem; opacity:.95; }
.login-left h1 { font-size: 2rem; font-weight:800; margin-top: 14px; line-height:1.25; position:relative; z-index:1; }
.login-left p.lead-text { opacity:.96; max-width: 540px; position:relative; z-index:1; }
.login-left .ll-foot { font-size:.85rem; opacity:.9; position:relative; z-index:1; }

.login-right {
  flex:1;
  background:#fff;
  display:flex; align-items:center; justify-content:center;
  padding: 30px;
}
.login-box { max-width: 420px; width:100%; }
.login-box h2 { font-weight:800; color:#0f172a; }
.login-box .form-control { padding: .8rem 1rem; border-radius: 10px; }
.login-box .btn-login {
  background: linear-gradient(135deg, #1d4ed8, #06b6d4);
  border:0; color:#fff; padding: .8rem 1rem; border-radius: 10px;
  font-weight:700; width:100%;
}
@media (max-width: 900px){
  .login-wrap{ flex-direction:column; }
  .login-left{ padding:24px; }
}

/* === Tables === */
table.app-table thead th {
  background: var(--c-accent-soft);
  color: var(--c-accent-2);
  font-weight:700; border-bottom:0;
  white-space: nowrap;
}
table.app-table tbody tr:hover { background: #f9fafc; }
.table-responsive { border-radius: var(--radius); overflow:auto; box-shadow: var(--shadow-sm); background:#fff; }
.pill {
  display:inline-block; padding: 2px 10px; border-radius: 999px; font-size:.78rem; font-weight:600;
}
.pill-ok { background:#d1fae5; color:#047857; }
.pill-helpdesk{ background:#e6fbff; color:#0e5d92; }
.pill-onsite{ background:#ecdd9f; color:#92640e; }
.pill-bad{ background:#fee2e2; color:#b91c1c; }
.pill-info{ background:#dbeafe; color:#1d4ed8; }
.pill-warn{ background:#fef3c7; color:#92400e; }

/* mini logos in tables */
.brand-logo-sm { height:22px; vertical-align:middle; margin-right:6px; }

/* utility */
.muted { color: var(--c-muted); }
.scroll-x { overflow-x:auto; }
hr.soft { border-top:1px dashed #d1d5db; opacity:.9; }
.kbd { background:#f3f4f6; padding:1px 6px; border-radius:5px; font-size:.85rem; }

/* notice block */
.notice-line {
  background: linear-gradient(135deg, #fff7ed, #fef3c7);
  border:1px solid #fcd34d; color:#7c2d12;
  border-radius: 12px; padding: 14px 16px;
}