:root {
  --bg: #f3f7fb;
  --panel: #ffffff;
  --panel-soft: #f8fafc;
  --primary: #0c8ea6;
  --primary-dark: #0a7485;
  --primary-soft: #e7f9fb;
  --nav: #102a43;
  --nav-alt: #143a59;
  --muted: #6b7c93;
  --text: #15263f;
  --border: #e6edf5;
  --shadow: 0 12px 28px rgba(15, 55, 82, 0.08);
  --success: #169063;
  --success-soft: #eafaf3;
  --danger: #dc4a5a;
  --danger-soft: #fff1f2;
  --warning: #d78b29;
  --warning-soft: #fff8ec;
  --violet: #7c5ae4;
  --violet-soft: #f2eeff;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  font-family: Tahoma, Arial, sans-serif;
  color: var(--text);
  background: linear-gradient(180deg, #eef7fb 0%, #f9fbfd 100%);
}
button, input, select {
  font: inherit;
}
button {
  cursor: pointer;
  border: 0;
  transition: 0.2s ease;
}
button:hover { transform: translateY(-1px); }
button:active { transform: translateY(0); }

.auth-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: radial-gradient(circle at top, #eafaff 0%, #edf4fb 50%, #f8fafc 100%);
}
.auth-card {
  width: min(440px, 100%);
  background: rgba(255,255,255,0.96);
  border: 1px solid var(--border);
  border-radius: 26px;
  padding: 38px 32px;
  box-shadow: 0 26px 60px rgba(13, 79, 100, 0.12);
  backdrop-filter: blur(8px);
}
.brand {
  text-align: center;
  font-size: 40px;
  font-weight: 900;
  margin: 0;
  letter-spacing: -2px;
  color: var(--text);
}
.brand span { color: #e93d76; }
.eyebrow {
  text-align: center;
  color: var(--primary);
  font-size: 11px;
  letter-spacing: 1.6px;
  font-weight: 800;
  margin: 0 0 10px;
}
.auth-card h1 {
  text-align: center;
  margin: 14px 0 8px;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
}
.muted { color: var(--muted); }
.auth-card .muted {
  text-align: center;
  margin-bottom: 24px;
  line-height: 1.6;
}
.field {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
  font-weight: 700;
}
.field input, .search, select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  color: var(--text);
  outline: none;
  box-shadow: inset 0 1px 2px rgba(15, 43, 64, 0.04);
}
.field input:focus, .search:focus, select:focus {
  border-color: rgba(12, 142, 166, 0.5);
  box-shadow: 0 0 0 4px rgba(12, 142, 166, 0.08);
}
.primary {
  width: 100%;
  padding: 14px 16px;
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border-radius: 12px;
  font-weight: 800;
  box-shadow: 0 12px 22px rgba(12, 142, 166, 0.22);
}
.primary:hover { opacity: 0.98; }
.primary.compact { width: auto; }
.error {
  color: var(--danger);
  min-height: 24px;
  margin: 8px 0 12px;
  font-size: 0.95rem;
}

.layout {
  min-height: 100vh;
  display: flex;
  background: #f4f8fc;
}

.sidebar {
  width: 280px;
  padding: 22px 16px 18px;
  color: #edf7fb;
  background: linear-gradient(180deg, var(--nav) 0%, var(--nav-alt) 100%);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-left: 1px solid rgba(255,255,255,0.06);
}
.brand-wrap {
  text-align: center;
  margin-bottom: 24px;
  padding: 4px 0 12px;
}
.brand-wrap .brand {
  color: #fff;
  font-size: 34px;
}
.brand-wrap small {
  display: inline-block;
  margin-top: 6px;
  color: #b3dfe7;
  font-size: 10px;
  letter-spacing: 2px;
}
.nav {
  display: grid;
  gap: 8px;
}
.nav button {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  text-align: right;
  color: #dfeaf2;
  background: transparent;
  border-radius: 12px;
  font-weight: 700;
}
.nav button i {
  width: 22px;
  font-style: normal;
  text-align: center;
  font-size: 20px;
  opacity: 0.95;
}
.nav button:hover,
.nav button.active {
  color: #fff;
  background: rgba(255,255,255,0.12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
}
.sidebar-footer {
  margin-top: auto;
  padding-top: 14px;
  color: #cfe8f0;
  font-size: 12px;
}
.online-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-left: 6px;
  border-radius: 50%;
  background: #2ed48b;
  box-shadow: 0 0 0 4px rgba(46, 212, 139, 0.18);
}
.logout {
  width: 100%;
  margin-top: 16px;
  padding: 11px 12px;
  color: #fff;
  background: linear-gradient(135deg, #e85668, #d43a55);
  border-radius: 10px;
  font-weight: 700;
}

.main {
  flex: 1;
  padding: 28px 30px 40px;
  overflow: auto;
}
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 26px;
}
.topbar h1 {
  margin: 0 0 8px;
  font-size: clamp(1.8rem, 2vw, 2.4rem);
}
.top-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.date-chip,
.count,
.tag {
  padding: 8px 12px;
  color: var(--muted);
  background: var(--primary-soft);
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
}
.refresh {
  padding: 10px 14px;
  color: var(--primary-dark);
  background: var(--primary-soft);
  border-radius: 10px;
  font-weight: 800;
}
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(170px, 1fr));
  gap: 18px;
}
.stat,
.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 20px;
  box-shadow: var(--shadow);
}
.stat {
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}
.stat::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--primary);
}
.stat.blue::before { background: var(--primary); }
.stat.purple::before { background: var(--violet); }
.stat.orange::before { background: var(--warning); }
.stat.green::before { background: var(--success); }
.stat-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  color: var(--primary);
  background: var(--primary-soft);
  border-radius: 14px;
  font-size: 22px;
  font-weight: 700;
}
.stat.blue .stat-icon { background: var(--primary-soft); color: var(--primary); }
.stat.purple .stat-icon { background: var(--violet-soft); color: var(--violet); }
.stat.orange .stat-icon { background: var(--warning-soft); color: var(--warning); }
.stat.green .stat-icon { background: var(--success-soft); color: var(--success); }
.stat strong {
  display: block;
  font-size: clamp(1.5rem, 2vw, 2.1rem);
  margin-bottom: 4px;
}
.stat span:last-child {
  color: var(--muted);
  font-size: 13px;
}
.panel {
  margin-top: 20px;
}
.panel h2 {
  margin: 0 0 18px;
  font-size: 18px;
}
.panel-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.quick-grid,
.two-panels {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 20px;
}
.quick-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.quick-actions button {
  padding: 16px 14px;
  text-align: right;
  color: var(--text);
  background: linear-gradient(180deg, #f8fbff 0%, #f2f8ff 100%);
  border: 1px solid var(--border);
  border-radius: 12px;
  font-weight: 700;
  box-shadow: 0 8px 18px rgba(18, 52, 74, 0.04);
}
.quick-actions button b {
  float: left;
  color: var(--primary);
}
.system-status {
  display: grid;
  gap: 12px;
  padding: 16px;
  color: var(--success);
  background: var(--success-soft);
  border-radius: 12px;
}
.system-status small {
  color: var(--muted);
}
.toolbar {
  display: flex;
  gap: 12px;
  margin-bottom: 18px;
}
.toolbar .search {
  max-width: 420px;
}
.toolbar select {
  max-width: 170px;
}
.table-wrap {
  overflow-x: auto;
}
table {
  width: 100%;
  border-collapse: collapse;
  min-width: 740px;
}
th, td {
  padding: 14px 10px;
  text-align: right;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
th {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.status {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 800;
}
.status.success { color: var(--success); background: var(--success-soft); }
.status.danger { color: var(--danger); background: var(--danger-soft); }
.muted-status { color: var(--muted); background: #edf3f8; }
.order-status { color: #8c6400; background: var(--warning-soft); }
.small-btn {
  padding: 6px 8px;
  margin-left: 5px;
  border-radius: 8px;
  background: transparent;
  font-size: 12px;
  font-weight: 700;
}
.danger-text { color: var(--danger); }
.success-text { color: var(--success); }
.neutral-text { color: var(--primary-dark); }
.success-fill { color: #fff; background: var(--success); border-radius: 8px; }
.danger-fill { color: #fff; background: var(--danger); border-radius: 8px; }
.submission-actions { display: flex; align-items: center; gap: 6px; }
.reject-reason { min-width: 125px; padding: 8px; border-radius: 8px; }
.rank {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.rank b { color: var(--primary); }
.rank span { flex: 1; }
.rank strong { color: var(--muted); font-size: 13px; }
.empty { padding: 22px 0; text-align: center; color: var(--muted); }
.loading { padding: 52px; text-align: center; color: var(--muted); }
.error-box { color: var(--danger); }
.error-box p { color: var(--muted); }
@media (max-width: 900px) {
  .sidebar { width: 230px; }
  .main { padding: 24px 18px 28px; }
  .stats { grid-template-columns: repeat(2, minmax(150px, 1fr)); }
  .quick-grid, .two-panels { grid-template-columns: 1fr; }
}
@media (max-width: 650px) {
  .layout { display: block; }
  .sidebar { width: 100%; padding: 14px; }
  .brand-wrap { margin-bottom: 10px; }
  .nav { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
  .nav button { white-space: nowrap; }
  .main { padding: 16px; }
  .topbar { display: block; }
  .top-actions { margin-top: 12px; }
  .toolbar { display: grid; }
  .toolbar .search, .toolbar select { max-width: none; }
  .quick-actions { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; }
}

/* Professional admin dashboard */
.nav { gap: 14px; overflow-y: auto; max-height: calc(100vh - 170px); padding-left: 2px; }
.nav-group-title { display: flex; align-items: center; gap: 9px; padding: 5px 10px; color: #8ed9e8; font-size: 11px; font-weight: 800; }
.nav-group-title i { width: 20px; font-style: normal; text-align: center; color: #56d6ed; }
.nav-group-title b { margin-right: auto; font-size: 14px; color: #6fa7b9; }
.nav-group-items { display: grid; gap: 3px; margin-top: 3px; }
.nav-group-items button { padding: 9px 12px; border-radius: 9px; font-size: 12px; font-weight: 600; }
.nav-group-items button i { font-size: 17px; color: #55cde1; }
.nav-group-items button.active { background: linear-gradient(90deg, #e4fbff, #c8f5fb); color: #087f9a; box-shadow: 0 5px 14px rgba(0,0,0,.08); }
.nav-group-items button.active i { color: #0a9db8; }
.pro-dashboard { display: grid; gap: 18px; }
.dashboard-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.dashboard-search { width: min(440px, 100%); padding: 11px 16px; border: 1px solid #dceaf3; border-radius: 10px; background: #fff; color: var(--primary); box-shadow: 0 7px 18px rgba(31,67,92,.05); font-size: 20px; }
.dashboard-search span { margin-right: 8px; color: #a0afbc; font-size: 12px; }
.toolbar-actions, .profile-chip { display: flex; align-items: center; gap: 11px; }
.toolbar-icon { width: 36px; height: 36px; border-radius: 10px; background: #fff; border: 1px solid var(--border); color: var(--primary); font-size: 18px; }
.toolbar-divider { height: 28px; width: 1px; background: var(--border); }
.profile-chip { padding: 6px 10px; border-radius: 12px; background: #fff; border: 1px solid var(--border); }
.profile-chip b, .profile-chip small { display: block; }
.profile-chip b { font-size: 12px; }.profile-chip small { margin-top: 2px; color: var(--muted); font-size: 10px; }.profile-chip i { color: var(--muted); }
.profile-avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #c9f3fb; color: #078da8; font-weight: 900; }
.welcome-banner { display: flex; justify-content: space-between; align-items: center; min-height: 150px; padding: 24px 30px; overflow: hidden; border-radius: 14px; color: #075477; background: linear-gradient(100deg, #c9f5fb, #a4ecf7 52%, #daf8fc); box-shadow: 0 9px 20px rgba(14,148,181,.1); }
.welcome-banner span { color: #058bab; font-size: 12px; font-weight: 800; }.welcome-banner h2 { margin: 8px 0 7px; font-size: 25px; }.welcome-banner p { margin: 0; color: #4f8194; font-size: 13px; }
.welcome-art { position: relative; width: 220px; height: 110px; }.laptop { position: absolute; top: 22px; left: 35px; width: 130px; height: 76px; display: grid; place-items: center; border: 6px solid #138da9; border-radius: 8px; background: #41cfe2; color: white; font-size: 24px; font-weight: 900; transform: perspective(240px) rotateY(-12deg); box-shadow: 0 10px 8px rgba(1,100,132,.16); }.laptop span { position: absolute; right: -34px; top: -24px; color: #53bfd1; font-size: 22px; }.welcome-art i, .welcome-art b { position: absolute; color: #fff; font-style: normal; font-size: 30px; }.welcome-art i { top: 2px; right: 5px; }.welcome-art b { bottom: 5px; left: 8px; }
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; }.pro-kpi { display: flex; align-items: center; gap: 12px; min-height: 92px; padding: 15px; border: 1px solid #e3edf4; border-top: 3px solid #29b7d4; border-radius: 12px; background: #fff; box-shadow: 0 7px 18px rgba(31,67,92,.05); }.pro-kpi-icon { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px; border-radius: 12px; background: #e9faff; color: #079bbd; font-size: 20px; font-weight: 900; }.pro-kpi span, .pro-kpi small { display: block; color: #70859a; font-size: 11px; }.pro-kpi strong { display: block; margin: 5px 0; color: #1c3358; font-size: 18px; }.pro-kpi small { color: #19ae78; font-weight: 800; }.pro-kpi.purple { border-top-color: #a879ed; }.pro-kpi.purple .pro-kpi-icon { color:#9b69e5;background:#f2edff; }.pro-kpi.blue { border-top-color:#59aeea; }.pro-kpi.orange { border-top-color:#f1ad43; }.pro-kpi.orange .pro-kpi-icon { color:#e99521;background:#fff5df; }.pro-kpi.green { border-top-color:#38bf8f; }.pro-kpi.green .pro-kpi-icon { color:#27ac7a;background:#e8fff5; }.pro-kpi.pink { border-top-color:#ef77a5; }.pro-kpi.pink .pro-kpi-icon { color:#e65c91;background:#fff0f6; }.pro-kpi.red { border-top-color:#ef6c76; }.pro-kpi.red .pro-kpi-icon { color:#e65a64;background:#fff0f1; }
.dashboard-columns { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, .9fr); gap: 16px; }.pro-panel { min-width: 0; padding: 17px; border: 1px solid #e1ebf2; border-radius: 13px; background: #fff; box-shadow: 0 7px 18px rgba(31,67,92,.045); }.pro-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 15px; }.pro-panel-head h3 { margin: 0; color: #20385b; font-size: 15px; }.pro-panel-head small { display: block; margin-top: 5px; color: #90a0af; font-size: 11px; }.period-tabs { display: flex; gap: 4px; }.period-tabs button { padding: 6px 10px; border-radius: 7px; background: #f6fafc; color: #7f93a6; font-size: 10px; }.period-tabs button.active { color: white; background: #13b2d3; }.line-chart { position: relative; height: 265px; padding: 10px 8px 28px 38px; background: repeating-linear-gradient(to bottom, transparent 0, transparent 51px, #edf3f7 52px); }.line-chart svg { width: 100%; height: 220px; }.chart-y { position: absolute; top: 8px; bottom: 36px; left: 0; display: flex; flex-direction: column; justify-content: space-between; color: #8b9aaa; font-size: 9px; }.chart-x { display: flex; justify-content: space-between; color: #8b9aaa; font-size: 9px; }.donut-pro { display: flex; align-items: center; gap: 15px; }.donut-ring.large { display: grid; place-items: center; width: 175px; height: 175px; flex: 0 0 175px; border-radius: 50%; background: conic-gradient(#18b4df 0 32%, #efad43 32% 56%, #37c58d 56% 74%, #a572e7 74% 88%, #70d0e5 88% 100%); }.donut-ring.large > div { display: grid; place-items: center; width: 112px; height: 112px; border-radius: 50%; background: white; text-align: center; }.donut-ring.large strong { color: #20385b; font-size: 20px; }.donut-ring.large span { color: #8a9aaa; font-size: 10px; }.donut-pro ul, .side-list ul, .activity-table ul, .important-panel ul { display: grid; gap: 12px; padding: 0; margin: 0; list-style: none; }.donut-pro li { display: flex; align-items: center; gap: 7px; color: #6e8192; font-size: 11px; white-space: nowrap; }.donut-pro li b { margin-right: auto; color: #4d657a; }.dot { width: 9px; height: 9px; margin: 0; border-radius: 50%; }.cyan-dot { background:#18b4df; }.orange-dot { background:#efad43; }.green-dot { background:#37c58d; }.purple-dot { background:#a572e7; }.blue-dot { background:#70d0e5; }.more-button { color: #8da0b0; background: transparent; font-size: 20px; }.view-all { padding: 5px 0; color: #10a9cd; background: transparent; font-size: 11px; font-weight: 800; }.table-panel-pro table { width: 100%; min-width: 600px; border-collapse: collapse; }.table-panel-pro { overflow: hidden; }.table-panel-pro th, .table-panel-pro td { padding: 11px 7px; border-bottom: 1px solid #edf2f5; color: #62778b; font-size: 11px; text-align: right; }.table-panel-pro th { color: #8395a5; font-weight: 800; }.table-panel-pro td:first-child { color: #148eae; font-weight: 800; }.table-status { display: inline-block; padding: 4px 8px; border-radius: 15px; font-size: 10px; }.table-status.new { color:#139dcc;background:#e7f8fc; }.table-status.progress { color:#8c65d0;background:#f0ebff; }.table-status.done { color:#159a6b;background:#e7fbf2; }.table-status.cancelled { color:#df6872;background:#fff0f1; }.side-list li, .activity-table li, .important-panel li { display: flex; align-items: center; gap: 9px; min-width: 0; padding-bottom: 10px; border-bottom: 1px solid #edf2f5; }.side-list li:last-child, .activity-table li:last-child, .important-panel li:last-child { border-bottom: 0; }.list-avatar { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; color: #058eac; background: #dff7fc; font-weight: 800; }.list-avatar.pink { color:#d95789;background:#ffeaf2; }.side-list li div, .activity-table li div, .important-panel li div { min-width: 0; flex: 1; }.side-list b, .activity-table b, .important-panel b { display: block; overflow: hidden; color: #2c4563; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.side-list small, .activity-table small, .important-panel small { display: block; margin-top: 3px; color: #8da0ae; font-size: 10px; }.side-list time, .activity-table time { color: #9aabba; font-size: 9px; white-space: nowrap; }.activity-icon, .notice-icon { display: grid; place-items: center; width: 31px; height: 31px; flex: 0 0 31px; border-radius: 9px; font-weight: 900; }.activity-icon.cyan, .notice-icon.blue { color:#0aa5c8;background:#e3f8fc; }.activity-icon.pink, .notice-icon.pink { color:#dd6090;background:#fff0f5; }.activity-icon.green, .notice-icon.green { color:#20a977;background:#e8fbf3; }.activity-icon.red, .notice-icon.red { color:#df626b;background:#fff0f1; }.section-placeholder { display: grid; place-items: center; min-height: 400px; padding: 50px 20px; text-align: center; border: 1px dashed #b9e6ef; border-radius: 16px; background: linear-gradient(180deg,#fff,#f7fdff); }.placeholder-icon { display:grid;place-items:center;width:70px;height:70px;border-radius:20px;color:#0ca3c0;background:#e4f9fd;font-size:30px; }.section-placeholder h2 { margin: 18px 0 7px; color:#20385b; }.section-placeholder p { max-width:440px;margin:0;color:#8293a2;line-height:1.8;font-size:13px; }.placeholder-actions { display:flex;gap:10px;margin-top:22px; }
@media (max-width: 1100px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); }.dashboard-columns { grid-template-columns: 1fr; }.donut-pro { justify-content: center; } }
.subadmin-page { display: grid; gap: 18px; }.subadmin-intro { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px; background: linear-gradient(110deg,#e4fbff,#fff); }.subadmin-intro h2 { margin: 5px 0; color: #20385b; }.subadmin-intro p { margin: 0; color: #8293a2; font-size: 13px; }.permission-summary { padding: 6px 10px; border-radius: 20px; color: #148fae; background: #e8f9fc; font-size: 11px; font-weight: 800; }.subadmin-modal { width: min(720px, calc(100% - 30px)); max-height: 90vh; padding: 0; border: 0; border-radius: 16px; background: #f7fbfd; box-shadow: 0 25px 70px rgba(10,53,79,.25); }.subadmin-modal::backdrop { background: rgba(9,42,63,.35); }.subadmin-modal form { padding: 22px; }.subadmin-modal .field { margin-bottom: 12px; }.subadmin-modal h4 { margin: 18px 0 10px; color: #20385b; }.modal-close { padding: 4px 10px; color: #d45d69; background: #fff0f1; border-radius: 8px; font-size: 20px; }.permission-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 18px; }.permission-grid fieldset { min-width: 0; padding: 10px; border: 1px solid #dcecf2; border-radius: 10px; background: #fff; }.permission-grid legend { padding: 0 5px; color: #158ca8; font-size: 11px; font-weight: 800; }.permission-grid label { display: block; margin: 7px 0; color: #61768a; font-size: 11px; }.permission-grid input { accent-color: #0da8c8; }
.section-data-note { display: grid; place-items: center; min-height: 150px; padding: 20px; border: 1px dashed #d6e8ef; border-radius: 10px; color: #8799a8; text-align: center; font-size: 12px; }
.period-label { padding: 6px 10px; border-radius: 7px; color: #168eaa; background: #e9f9fc; font-size: 10px; font-weight: 800; }
@media (max-width: 650px) { .dashboard-toolbar { display: grid; }.toolbar-actions { justify-content: space-between; }.welcome-banner { padding: 20px; }.welcome-banner h2 { font-size: 20px; }.welcome-art { display:none; }.kpi-grid { grid-template-columns: 1fr; }.pro-kpi strong { font-size: 17px; }.donut-pro { flex-direction: column; }.dashboard-columns { gap: 12px; }.pro-panel { overflow-x: auto; }.pro-panel-head { min-width: 280px; } }
@media (max-width: 650px) {
  .layout { display: flex; min-width: 980px; align-items: stretch; }
  .sidebar { width: 215px; min-height: 100vh; padding: 18px 10px; }
  .main { min-width: 765px; padding: 20px; }
  .nav { display: grid; overflow-y: auto; max-height: calc(100vh - 160px); }
  .nav-group-items { display: grid; }
  .nav button { white-space: normal; }
  .topbar { display: flex; }
  .top-actions { margin-top: 0; }
}

.dashboard-shell {
  display: grid;
  gap: 22px;
}

.topbar-lite {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 6px;
}

.search-box {
  flex: 1;
  max-width: 440px;
  padding: 12px 18px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.8);
  color: var(--muted);
  font-size: 14px;
  box-shadow: var(--shadow);
}

.top-tools {
  display: flex;
  align-items: center;
  gap: 12px;
}

.icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: 0 8px 18px rgba(31,52,76,0.06);
}

.user-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 8px 10px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: 0 8px 18px rgba(31,52,76,0.06);
  font-weight: 700;
}

.avatar {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0da4bf, #53d7db);
  color: #fff;
  font-size: 12px;
}

.hero-card {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 20px;
  padding: 22px 22px 18px;
  border-radius: 22px;
  background: linear-gradient(135deg, #dff7fd 0%, #edf9ff 28%, #eaf5ff 100%);
  border: 1px solid rgba(12,142,166,0.12);
  box-shadow: var(--shadow);
}

.hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-sub {
  margin: 0 0 8px;
  color: var(--primary);
  font-size: 12px;
  letter-spacing: 1.2px;
  font-weight: 800;
  text-transform: uppercase;
}

.hero-copy h2 {
  margin: 0 0 10px;
  font-size: clamp(2rem, 3vw, 2.6rem);
}

.hero-copy p {
  margin: 0;
  max-width: 580px;
  color: var(--muted);
  line-height: 1.7;
}

.hero-btn {
  width: fit-content;
  margin-top: 18px;
  padding-inline: 22px;
}

.hero-graphic {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 200px;
}

.screen {
  width: 200px;
  height: 130px;
  border-radius: 16px;
  background: linear-gradient(180deg, #fff 0%, #edf8ff 100%);
  border: 1px solid rgba(93, 160, 183, 0.2);
  box-shadow: 0 22px 30px rgba(16, 52, 85, 0.08);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.screen-header {
  width: 60%;
  height: 16px;
  border-radius: 8px;
  background: linear-gradient(90deg, #0d9ec0, #4ec7bf);
  margin-bottom: 16px;
}

.screen-body {
  width: 70%;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 10px;
}

.screen-body span {
  display: block;
  height: 52px;
  border-radius: 10px;
  background: linear-gradient(180deg, #dcefff, #edf6ff);
}

.floating-card {
  position: absolute;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 12px 18px rgba(23, 58, 81, 0.12);
}

.card-one {
  top: 18px;
  left: 18px;
  background: #fff;
  color: #0a8ea7;
}

.card-two {
  bottom: 16px;
  right: 20px;
  background: linear-gradient(135deg, #39bfd5, #87d2e8);
  color: #fff;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 18px;
}

.metric-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 18px 16px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.metric-card.cyan { border-top: 4px solid #23afcb; }
.metric-card.purple { border-top: 4px solid #a36ced; }
.metric-card.blue { border-top: 4px solid #4caeec; }
.metric-card.green { border-top: 4px solid #31c18d; }

.metric-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  font-size: 24px;
  background: #f2f8ff;
}

.metric-card.purple .metric-icon { background: #f1edff; }
.metric-card.cyan .metric-icon { background: #e8f9ff; }
.metric-card.green .metric-icon { background: #ebfff5; }

.metric-card strong {
  display: block;
  margin-top: 6px;
  font-size: clamp(1.4rem, 2vw, 2rem);
}

.metric-label {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 2px;
}

.trend {
  display: inline-block;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 700;
}

.trend.up { color: var(--success); }

.analytics-grid {
  display: grid;
  grid-template-columns: 1.6fr 0.9fr;
  gap: 20px;
}

.panel-box {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 18px;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.panel-head h3 {
  margin: 0;
  font-size: 18px;
}

.panel-head button {
  padding: 8px 12px;
  border-radius: 10px;
  background: #edf6ff;
  color: var(--primary-dark);
  font-weight: 700;
}

.chart-wrap {
  position: relative;
  height: 240px;
  border-radius: 14px;
  background: linear-gradient(180deg, #fbfdff 0%, #f3faff 100%);
  border: 1px solid #edf4fb;
  overflow: hidden;
}

.chart-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.chart-labels {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 8px;
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 11px;
}

.donut-wrap {
  display: grid;
  place-items: center;
  gap: 22px;
}

.donut-ring {
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: conic-gradient(#ff7aa9 0 35%, #39afd7 35% 72%, #3ec88b 72% 100%);
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 0 10px rgba(255,255,255,0.6);
}

.donut-inner {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
  text-align: center;
}

.donut-inner strong {
  display: block;
  font-size: 1.5rem;
}

.donut-inner span {
  color: var(--muted);
  font-size: 11px;
}

.legend-list {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
}

.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-left: 8px;
  vertical-align: middle;
}

.dot.pink { background: #ff7aa9; }
.dot.blue { background: #39afd7; }
.dot.green { background: #3ec88b; }
.dot.orange { background: #f0b341; }

.bottom-grid {
  display: grid;
  grid-template-columns: 1.6fr 0.9fr;
  gap: 20px;
}

.table-panel table {
  min-width: 100%;
  border-collapse: collapse;
}

.table-panel th,
.table-panel td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--border);
  text-align: right;
  font-size: 13px;
}

.status-badge {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
}

.status-badge.success { background: #ebfff4; color: var(--success); }
.status-badge.processing { background: #edf6ff; color: var(--primary); }
.status-badge.pending { background: #fff6e8; color: #a7700b; }

.activity-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 14px;
}

.activity-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.activity-list li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.activity-list strong {
  display: block;
  margin-bottom: 3px;
  font-size: 13px;
}

.activity-list small {
  color: var(--muted);
}

@media (max-width: 1100px) {
  .stat-grid,
  .analytics-grid,
  .bottom-grid {
    grid-template-columns: 1fr 1fr;
  }
  .hero-card {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .stat-grid,
  .analytics-grid,
  .bottom-grid {
    grid-template-columns: 1fr;
  }
  .topbar-lite {
    flex-direction: column;
    align-items: stretch;
  }
  .search-box {
    max-width: none;
  }
}

@media (max-width: 650px) {
  .sidebar {
    padding: 16px 12px 14px;
  }

  .brand-wrap .brand {
    font-size: 30px;
  }

  .brand-wrap small {
    font-size: 9px;
  }

  .nav button {
    padding: 10px 12px;
    font-size: 14px;
  }

  .nav button i {
    font-size: 17px;
  }

  .sidebar-footer {
    padding-top: 10px;
    font-size: 12px;
  }

  .logout {
    margin-top: 10px;
    padding: 10px 12px;
  }

  .main {
    padding: 20px 14px 28px;
  }

  .topbar {
    margin-bottom: 18px;
  }

  .topbar h1 {
    font-size: 1.75rem;
  }

  .topbar .muted {
    font-size: 13px;
  }

  .top-actions {
    justify-content: flex-start;
  }

  .hero-card {
    padding: 18px;
  }

  .hero-copy h2 {
    font-size: 1.7rem;
  }

  .hero-copy p {
    font-size: 13px;
  }

  .hero-graphic {
    min-height: 150px;
  }

  .screen {
    width: 170px;
    height: 110px;
  }

  .panel-box,
  .metric-card {
    padding: 14px;
  }

  .panel-head h3 {
    font-size: 16px;
  }
}

/* Touch-first layout refinements */
@media (max-width: 650px) {
  body {
    overflow-x: hidden;
  }

  .sidebar {
    position: sticky;
    top: 0;
    z-index: 10;
    max-height: none;
  }

  .nav {
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .nav::-webkit-scrollbar {
    display: none;
  }

  .nav-group {
    flex: 0 0 auto;
  }

  .nav-group-title {
    display: none;
  }

  .nav-group-items {
    display: flex;
    gap: 6px;
  }

  .nav-group-items button,
  .logout {
    min-height: 44px;
  }

  .top-actions {
    flex-wrap: wrap;
  }

  .date-chip,
  .refresh {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
  }

  .panel-title,
  .dashboard-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .panel-title > *,
  .dashboard-toolbar > * {
    max-width: 100%;
  }

  .submission-actions {
    min-width: 290px;
    flex-wrap: wrap;
  }

  .reject-reason {
    flex: 1 1 180px;
    min-height: 42px;
  }

  .success-fill,
  .danger-fill {
    min-height: 42px;
    padding: 10px 14px;
  }

  .table-wrap {
    margin-inline: -4px;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }
}

@media (min-width: 651px) and (max-width: 1100px) {
  .sidebar {
    width: 220px;
  }

  .main {
    padding-inline: 20px;
  }

  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}