/* =============================================
   HASTA TAKİP SİSTEMİ
   Premium Medical UI — "Apple sadeliği + Kurumsal güven"
   ============================================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ══════════════════════════════════════════
   DESIGN TOKENS
══════════════════════════════════════════ */
:root {
  /* Brand */
  --primary:        #2D8CFF;
  --primary-dark:   #1A75E8;
  --primary-light:  #EBF4FF;
  --primary-rgb:    45,140,255;
  --teal:           #14B8A6;
  --teal-light:     #E6FBF8;

  /* Semantic */
  --success:        #10B981;
  --success-light:  #D1FAE5;
  --warning:        #F59E0B;
  --warning-light:  #FEF3C7;
  --danger:         #EF4444;
  --danger-light:   #FEE2E2;
  --info:           #2D8CFF;
  --info-light:     #EBF4FF;
  --purple:         #8B5CF6;
  --purple-light:   #EDE9FE;

  /* Surfaces */
  --bg:             #F5F7FA;
  --surface:        #FFFFFF;
  --surface-2:      #FAFBFC;
  --border:         #DADDE2;
  --border-light:   #ECEEF2;

  /* Sidebar */
  --sidebar-bg:     #1F2937;
  --sidebar-hover:  #374151;
  --sidebar-active: rgba(45,140,255,.18);
  --sidebar-text:   rgba(255,255,255,.72);
  --sidebar-muted:  rgba(255,255,255,.38);
  --sidebar-border: rgba(255,255,255,.07);

  /* Text */
  --text:           #111827;
  --text-2:         #374151;
  --text-muted:     #6B7280;
  --text-light:     #9CA3AF;

  /* Layout */
  --sidebar-w:      272px;
  --header-h:       66px;
  --radius-sm:      8px;
  --radius:         12px;
  --radius-lg:      16px;
  --radius-xl:      20px;

  /* Shadows */
  --shadow-xs:  0 1px 2px rgba(17,24,39,.05);
  --shadow-sm:  0 1px 3px rgba(17,24,39,.08), 0 4px 12px rgba(17,24,39,.04);
  --shadow:     0 2px 8px rgba(17,24,39,.08), 0 8px 24px rgba(17,24,39,.05);
  --shadow-md:  0 4px 16px rgba(17,24,39,.1),  0 16px 40px rgba(17,24,39,.06);
  --shadow-lg:  0 8px 32px rgba(17,24,39,.14), 0 24px 64px rgba(17,24,39,.08);

  /* Transitions */
  --t-fast:     .14s ease;
  --t:          .2s ease;
  --t-slow:     .3s ease;

  /* Deprecated aliases (backward compat) */
  --accent:     var(--teal);
  --accent2:    var(--primary);
  --transition: var(--t);
}

/* ══════════════════════════════════════════
   RESET & BASE
══════════════════════════════════════════ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }

html {
  font-size:15px;
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body {
  font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  display:flex;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a { color:inherit; text-decoration:none }
img { max-width:100%; display:block }
button,input,select,textarea { font-family:inherit }

/* ══════════════════════════════════════════
   SCROLLBAR
══════════════════════════════════════════ */
::-webkit-scrollbar { width:6px; height:6px }
::-webkit-scrollbar-track { background:transparent }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:4px }
::-webkit-scrollbar-thumb:hover { background:var(--text-light) }

/* ══════════════════════════════════════════
   SIDEBAR BACKDROP
══════════════════════════════════════════ */
.sidebar-backdrop {
  display:none;
  position:fixed; inset:0;
  background:rgba(17,24,39,.6);
  z-index:998;
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}
.sidebar-backdrop.show { display:block; animation:fadeIn .2s ease }

/* ══════════════════════════════════════════
   SIDEBAR
══════════════════════════════════════════ */
.sidebar {
  width:var(--sidebar-w);
  height:100vh;
  position:fixed;
  top:0; left:0;
  background:var(--sidebar-bg);
  display:flex;
  flex-direction:column;
  z-index:1000;
  transition:width var(--t), transform var(--t-slow);
  overflow:hidden;
}
.sidebar.collapsed { width:68px }

/* Brand */
.sidebar-brand {
  height:var(--header-h);
  display:flex;
  align-items:center;
  gap:13px;
  padding:0 20px;
  border-bottom:1px solid var(--sidebar-border);
  color:#FFFFFF;
  font-weight:800;
  font-size:1.05rem;
  white-space:nowrap;
  overflow:hidden;
  text-decoration:none;
  letter-spacing:-.02em;
  flex-shrink:0;
}
.sidebar-brand-icon {
  width:34px; height:34px;
  background:var(--primary);
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size:.95rem;
  flex-shrink:0;
  box-shadow:0 4px 12px rgba(45,140,255,.4);
}
.sidebar-brand span { opacity:1; transition:opacity var(--t); white-space:nowrap; overflow:hidden }
.sidebar.collapsed .sidebar-brand span { opacity:0; width:0 }

/* Nav */
.sidebar-nav { flex:1; overflow-y:auto; padding:12px 10px; scrollbar-width:thin; scrollbar-color:var(--sidebar-border) transparent }
.sidebar-nav::-webkit-scrollbar { width:3px }
.sidebar-nav::-webkit-scrollbar-thumb { background:var(--sidebar-border); border-radius:2px }

.nav-group { margin-bottom:4px }
.nav-group-label {
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.1em;
  color:var(--sidebar-muted);
  padding:12px 14px 5px;
  text-transform:uppercase;
  white-space:nowrap;
  overflow:hidden;
  transition:opacity var(--t), height var(--t), padding var(--t);
}
.sidebar.collapsed .nav-group-label { opacity:0; height:0; padding:0; overflow:hidden }

.nav-link {
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  color:var(--sidebar-text);
  text-decoration:none;
  border-radius:10px;
  transition:all var(--t-fast);
  white-space:nowrap;
  overflow:hidden;
  font-size:.93rem;
  font-weight:500;
  margin-bottom:2px;
  position:relative;
}
.nav-link:hover {
  background:var(--sidebar-hover);
  color:#fff;
}
.nav-link.active {
  background:var(--sidebar-active);
  color:var(--primary);
  font-weight:600;
}
.nav-link.active i { color:var(--primary) }
.nav-link i {
  font-size:1.05rem;
  flex-shrink:0;
  width:20px;
  text-align:center;
  color:var(--sidebar-muted);
  transition:color var(--t-fast);
}
.nav-link:hover i { color:rgba(255,255,255,.9) }
.nav-link span { transition:opacity var(--t); white-space:nowrap; overflow:hidden }
.sidebar.collapsed .nav-link span { opacity:0; width:0 }
.nav-link .badge-nav {
  margin-left:auto;
  background:var(--primary);
  color:#fff;
  border-radius:20px;
  padding:2px 8px;
  font-size:.65rem;
  font-weight:700;
  flex-shrink:0;
}
.sidebar.collapsed .badge-nav { display:none }

/* Sidebar footer */
.sidebar-footer {
  padding:14px 16px;
  border-top:1px solid var(--sidebar-border);
  color:var(--sidebar-muted);
  font-size:.7rem;
  white-space:nowrap;
  overflow:hidden;
  display:flex;
  align-items:center;
  gap:8px;
}
.sidebar-footer-dot {
  width:6px; height:6px; border-radius:50%;
  background:var(--success);
  flex-shrink:0;
  box-shadow:0 0 6px var(--success);
}
.sidebar.collapsed .sidebar-footer span { display:none }

/* ══════════════════════════════════════════
   MAIN WRAPPER
══════════════════════════════════════════ */
.main-wrapper {
  margin-left:var(--sidebar-w);
  flex:1;
  display:flex;
  flex-direction:column;
  transition:margin-left var(--t);
  min-height:100vh;
  min-width:0;
}
.sidebar.collapsed ~ .main-wrapper { margin-left:68px }

/* ══════════════════════════════════════════
   TOPBAR
══════════════════════════════════════════ */
.topbar {
  height:var(--header-h);
  background:var(--surface);
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  padding:0 28px;
  gap:14px;
  position:sticky;
  top:0;
  z-index:900;
  box-shadow:var(--shadow-xs);
}
.topbar-toggle {
  background:none; border:none; cursor:pointer;
  font-size:1.15rem; color:var(--text-muted);
  padding:9px; border-radius:var(--radius-sm);
  transition:all var(--t-fast);
  flex-shrink:0;
  line-height:1;
}
.topbar-toggle:hover { background:var(--bg); color:var(--text) }

/* Mobile search btn */
.topbar-search-btn {
  display:none;
  background:none; border:none; cursor:pointer;
  font-size:1.05rem; color:var(--text-muted);
  padding:9px; border-radius:var(--radius-sm);
  transition:all var(--t-fast); flex-shrink:0;
}
.topbar-search-btn:hover { background:var(--bg); color:var(--text) }

/* Mobile search overlay */
.topbar-search-overlay {
  display:none;
  position:fixed;
  top:var(--header-h); left:0; right:0;
  background:var(--surface);
  z-index:901;
  border-bottom:1.5px solid var(--border);
  padding:12px 16px;
  box-shadow:var(--shadow-md);
  animation:slideDown .15s ease;
}
.topbar-search-overlay.show { display:flex; align-items:center; gap:10px }
.topbar-search-overlay input {
  flex:1; border:1.5px solid var(--border); border-radius:var(--radius-sm);
  padding:10px 14px; font-size:.95rem; outline:none;
  font-family:inherit; color:var(--text); background:var(--bg);
}
.topbar-search-overlay input:focus { border-color:var(--primary); background:#fff }
.topbar-search-overlay-close {
  background:none; border:none; cursor:pointer;
  color:var(--text-muted); font-size:1.1rem; padding:6px; border-radius:6px;
  transition:all var(--t-fast);
}
.topbar-search-overlay-close:hover { background:var(--bg) }
@keyframes slideDown { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }

/* Desktop search */
.topbar-search {
  flex:1; max-width:440px;
  display:flex; align-items:center;
  background:var(--bg);
  border:1.5px solid var(--border);
  border-radius:10px;
  padding:0 14px; gap:10px;
  height:40px;
  transition:all var(--t-fast);
  position:relative;
}
.topbar-search:focus-within {
  border-color:var(--primary);
  background:var(--surface);
  box-shadow:0 0 0 3px rgba(var(--primary-rgb),.1);
}
.topbar-search input {
  border:none; background:none; outline:none;
  width:100%; font-size:.93rem; color:var(--text);
  font-family:inherit;
}
.topbar-search input::placeholder { color:var(--text-light) }
.topbar-search i { color:var(--text-light); font-size:.9rem; flex-shrink:0 }

.topbar-right { margin-left:auto; display:flex; align-items:center; gap:4px }
.topbar-btn {
  position:relative; background:none; border:none; cursor:pointer;
  font-size:1.1rem; color:var(--text-muted); padding:9px; border-radius:var(--radius-sm);
  transition:all var(--t-fast); flex-shrink:0; line-height:1;
}
.topbar-btn:hover { background:var(--bg); color:var(--text) }
.topbar-btn .badge-dot {
  position:absolute; top:7px; right:7px;
  width:8px; height:8px; border-radius:50%;
  background:var(--danger); border:2px solid var(--surface);
}

.online-count-wrap {
  font-size:.78rem; color:var(--text-muted); padding:0 8px;
  display:flex; align-items:center; gap:5px; flex-shrink:0;
}

.topbar-user {
  display:flex; align-items:center; gap:10px; padding:6px 10px;
  border-radius:var(--radius-sm); cursor:pointer;
  transition:background var(--t-fast);
  text-decoration:none; color:var(--text);
}
.topbar-user:hover { background:var(--bg) }
.topbar-avatar {
  width:36px; height:36px; border-radius:50%;
  background:linear-gradient(135deg, var(--primary), var(--primary-dark));
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:700; font-size:.88rem; flex-shrink:0;
}
.topbar-user-info { line-height:1.35 }
.topbar-user-name { font-size:.9rem; font-weight:600; color:var(--text) }
.topbar-user-role { font-size:.74rem; color:var(--text-muted) }

/* ══════════════════════════════════════════
   PAGE CONTENT
══════════════════════════════════════════ */
.page-content {
  flex:1;
  padding:32px 36px;
  overflow-x:hidden;
  max-width:1680px;
  width:100%;
}

.page-header {
  margin-bottom:32px;
  display:flex; align-items:flex-start;
  justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.page-header-left { min-width:0 }
.page-title {
  font-size:1.65rem;
  font-weight:800;
  color:var(--text);
  letter-spacing:-.03em;
  line-height:1.2;
}
.page-subtitle { font-size:.9rem; color:var(--text-muted); margin-top:4px }
.breadcrumb {
  display:flex; align-items:center; gap:7px;
  font-size:.82rem; color:var(--text-muted); margin-top:6px;
}
.breadcrumb a { color:var(--primary); text-decoration:none; font-weight:500 }
.breadcrumb a:hover { text-decoration:underline }
.breadcrumb-sep { color:var(--border); font-size:.7rem }

/* ══════════════════════════════════════════
   CARDS
══════════════════════════════════════════ */
.card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}
.card + .card { margin-top:20px }
.card-header {
  padding:20px 24px;
  border-bottom:1px solid var(--border-light);
  display:flex; align-items:center;
  justify-content:space-between; gap:14px; flex-wrap:wrap;
  background:var(--surface-2);
}
.card-title {
  font-size:1.05rem; font-weight:700;
  color:var(--text); display:flex; align-items:center; gap:9px;
}
.card-title i { color:var(--primary); font-size:1rem }
.card-body { padding:24px }
.card-footer {
  padding:16px 24px;
  border-top:1px solid var(--border-light);
  background:var(--surface-2);
}

/* ══════════════════════════════════════════
   STAT CARDS
══════════════════════════════════════════ */
.stat-grid,
.stats-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:20px;
  margin-bottom:32px;
}
.stat-card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:24px;
  display:flex;
  align-items:center;
  gap:18px;
  box-shadow:var(--shadow-sm);
  transition:transform var(--t), box-shadow var(--t);
  overflow:hidden;
  position:relative;
}
.stat-card::before {
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:3px;
  background:var(--stat-color, var(--primary));
  opacity:0;
  transition:opacity var(--t);
}
.stat-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md) }
.stat-card:hover::before { opacity:1 }

.stat-icon {
  width:58px; height:58px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.55rem; flex-shrink:0;
}
.stat-icon.blue   { background:rgba(45,140,255,.1); color:var(--primary) }
.stat-icon.green  { background:rgba(16,185,129,.1); color:var(--success) }
.stat-icon.orange { background:rgba(245,158,11,.1); color:var(--warning) }
.stat-icon.red    { background:rgba(239,68,68,.1); color:var(--danger) }
.stat-icon.purple { background:rgba(139,92,246,.1); color:var(--purple) }
.stat-icon.teal   { background:rgba(20,184,166,.1); color:var(--teal) }

.stat-body { min-width:0; flex:1 }
.stat-val,
.stat-value {
  font-size:1.9rem;
  font-weight:800;
  line-height:1;
  letter-spacing:-.03em;
  color:var(--text);
}
.stat-label { font-size:.85rem; color:var(--text-muted); margin-top:5px; font-weight:500 }
.stat-sub,
.stat-change { font-size:.78rem; margin-top:7px; color:var(--text-muted) }
.stat-change.up { color:var(--success) }
.stat-change.down { color:var(--danger) }

/* ══════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════ */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 20px;
  border-radius:var(--radius-sm); border:none; cursor:pointer;
  font-size:.93rem; font-weight:600;
  transition:all var(--t-fast); text-decoration:none;
  font-family:inherit; white-space:nowrap; letter-spacing:.01em;
  line-height:1.4;
  touch-action:manipulation;
  user-select:none;
}
.btn-sm  { padding:7px 14px; font-size:.84rem; border-radius:7px }
.btn-lg  { padding:13px 28px; font-size:1.02rem; border-radius:10px }
.btn-xl  { padding:15px 36px; font-size:1.08rem; border-radius:12px }

.btn-primary {
  background:var(--primary); color:#fff;
  box-shadow:0 2px 8px rgba(var(--primary-rgb),.3);
}
.btn-primary:hover {
  background:var(--primary-dark); color:#fff;
  box-shadow:0 4px 16px rgba(var(--primary-rgb),.4);
  transform:translateY(-1px);
}
.btn-primary:active { transform:translateY(0) }

.btn-teal { background:var(--teal); color:#fff; box-shadow:0 2px 8px rgba(20,184,166,.3) }
.btn-teal:hover { background:#0EA5A0; color:#fff; box-shadow:0 4px 16px rgba(20,184,166,.4); transform:translateY(-1px) }

.btn-success { background:var(--success); color:#fff; box-shadow:0 2px 8px rgba(16,185,129,.25) }
.btn-success:hover { background:#059669; color:#fff; transform:translateY(-1px) }

.btn-danger { background:var(--danger); color:#fff; box-shadow:0 2px 8px rgba(239,68,68,.25) }
.btn-danger:hover { background:#DC2626; color:#fff; transform:translateY(-1px) }

.btn-warning { background:var(--warning); color:#fff; box-shadow:0 2px 8px rgba(245,158,11,.25) }
.btn-warning:hover { background:#D97706; color:#fff; transform:translateY(-1px) }

.btn-info { background:var(--info); color:#fff }
.btn-info:hover { background:var(--primary-dark); color:#fff; transform:translateY(-1px) }

.btn-secondary {
  background:var(--surface); color:var(--text-2);
  border:1.5px solid var(--border);
  box-shadow:var(--shadow-xs);
}
.btn-secondary:hover { background:var(--bg); border-color:var(--text-light) }

.btn-ghost { background:transparent; color:var(--text-muted); border:none }
.btn-ghost:hover { background:var(--bg); color:var(--text) }

.btn-outline { background:transparent; border:2px solid var(--primary); color:var(--primary) }
.btn-outline:hover { background:var(--primary); color:#fff; transform:translateY(-1px) }

.btn-icon { padding:9px; border-radius:var(--radius-sm); aspect-ratio:1 }
.btn-icon.btn-sm { padding:7px }

.btn-group { display:flex; gap:8px; flex-wrap:wrap; align-items:center }
.btn:disabled { opacity:.5; cursor:not-allowed; transform:none !important; box-shadow:none !important }

/* ══════════════════════════════════════════
   FORMS
══════════════════════════════════════════ */
.form-group { margin-bottom:20px }
.form-label {
  display:block; font-size:.88rem; font-weight:600;
  color:var(--text-2); margin-bottom:7px;
}
.form-label.required::after { content:' *'; color:var(--danger) }

.form-control {
  width:100%; padding:11px 15px;
  border:1.5px solid var(--border); border-radius:var(--radius-sm);
  font-size:.95rem; color:var(--text); background:var(--surface); outline:none;
  transition:border-color var(--t-fast), box-shadow var(--t-fast);
  font-family:inherit;
  -webkit-appearance:none; appearance:none;
}
.form-control:focus {
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(var(--primary-rgb),.12);
}
.form-control::placeholder { color:var(--text-light) }
.form-control:disabled { background:var(--bg); color:var(--text-muted); cursor:not-allowed }
textarea.form-control { resize:vertical; min-height:96px; line-height:1.6 }

.form-select {
  width:100%; padding:11px 38px 11px 15px;
  border:1.5px solid var(--border); border-radius:var(--radius-sm);
  font-size:.95rem; color:var(--text); background:var(--surface);
  outline:none; cursor:pointer; appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-repeat:no-repeat; background-position:right 11px center; background-size:17px;
  transition:border-color var(--t-fast), box-shadow var(--t-fast); font-family:inherit;
}
.form-select:focus {
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(var(--primary-rgb),.12);
  outline:none;
}

.form-row { display:grid; gap:18px; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)) }
.form-check { display:flex; align-items:center; gap:10px; cursor:pointer; user-select:none }
.form-check input { width:17px; height:17px; cursor:pointer; accent-color:var(--primary) }

.input-group { display:flex }
.input-group .form-control { border-radius:var(--radius-sm) 0 0 var(--radius-sm); border-right:none }
.input-group .btn { border-radius:0 var(--radius-sm) var(--radius-sm) 0; flex-shrink:0 }

.input-icon { position:relative }
.input-icon i {
  position:absolute; left:13px; top:50%; transform:translateY(-50%);
  color:var(--text-light); font-size:.9rem; pointer-events:none;
}
.input-icon .form-control { padding-left:38px }

.form-hint  { font-size:.78rem; color:var(--text-muted); margin-top:6px }
.form-error { font-size:.78rem; color:var(--danger); margin-top:6px; display:flex; align-items:center; gap:4px }

/* Form sections */
.form-section {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:24px;
  margin-bottom:20px;
}
.form-section-title {
  font-size:1rem; font-weight:700; color:var(--text);
  margin-bottom:20px; padding-bottom:14px;
  border-bottom:1px solid var(--border-light);
  display:flex; align-items:center; gap:8px;
}
.form-section-title i { color:var(--primary) }

/* ══════════════════════════════════════════
   TABLES
══════════════════════════════════════════ */
.table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch }

table { width:100%; border-collapse:collapse; font-size:.92rem }

thead tr {
  background:var(--surface-2);
  border-bottom:2px solid var(--border);
}
thead th {
  padding:13px 18px; text-align:left; font-weight:700;
  color:var(--text-muted); white-space:nowrap;
  font-size:.75rem; text-transform:uppercase; letter-spacing:.07em;
}

tbody tr {
  border-bottom:1px solid var(--border-light);
  transition:background var(--t-fast);
}
tbody tr:hover { background:#F8FAFD }
tbody td {
  padding:14px 18px;
  vertical-align:middle;
  font-size:.92rem;
  color:var(--text-2);
}
tbody tr:last-child { border-bottom:none }
tfoot tr { border-top:2px solid var(--border) }
tfoot td { padding:13px 18px; font-weight:700 }

.table-actions { display:flex; gap:5px; flex-wrap:nowrap }
.table-actions .btn-icon { padding:7px; font-size:.85rem }

/* ══════════════════════════════════════════
   BADGES
══════════════════════════════════════════ */
.badge {
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 11px;
  border-radius:20px; font-size:.75rem; font-weight:600;
  letter-spacing:.02em; white-space:nowrap;
}
.badge i { font-size:.65rem }

.badge-primary   { background:rgba(var(--primary-rgb),.1); color:var(--primary) }
.badge-success   { background:var(--success-light); color:#047857 }
.badge-warning   { background:var(--warning-light); color:#92400E }
.badge-danger    { background:var(--danger-light); color:#B91C1C }
.badge-info      { background:var(--info-light); color:var(--primary) }
.badge-teal      { background:var(--teal-light); color:#0F766E }
.badge-purple    { background:var(--purple-light); color:#6D28D9 }
.badge-secondary { background:var(--bg); color:var(--text-muted); border:1px solid var(--border) }
.badge-dark      { background:var(--sidebar-bg); color:#fff }

/* Durum badge'leri */
.badge-acil      { background:#FEE2E2; color:#B91C1C; border:1px solid #FECACA }
.badge-bekliyor  { background:#FEF3C7; color:#92400E; border:1px solid #FDE68A }
.badge-tamamlandi { background:var(--success-light); color:#047857; border:1px solid #A7F3D0 }
.badge-kontrol   { background:rgba(var(--primary-rgb),.1); color:var(--primary); border:1px solid rgba(var(--primary-rgb),.2) }

/* ══════════════════════════════════════════
   TABS
══════════════════════════════════════════ */
.tabs {
  border-bottom:2px solid var(--border);
  display:flex; gap:0; overflow-x:auto; flex-wrap:nowrap;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.tabs::-webkit-scrollbar { display:none }
.tab-btn {
  padding:13px 22px; background:none; border:none; cursor:pointer;
  font-size:.92rem; font-weight:500; color:var(--text-muted);
  border-bottom:2px solid transparent; margin-bottom:-2px;
  transition:all var(--t-fast);
  white-space:nowrap; display:flex; align-items:center; gap:7px;
  font-family:inherit; letter-spacing:.01em;
  touch-action:manipulation;
}
.tab-btn:hover { color:var(--text); background:var(--bg) }
.tab-btn.active { color:var(--primary); border-bottom-color:var(--primary); font-weight:700 }
.tab-content { display:none; padding-top:24px }
.tab-content.active { display:block }

/* ══════════════════════════════════════════
   MODAL
══════════════════════════════════════════ */
.modal-overlay {
  position:fixed; inset:0; background:rgba(17,24,39,.5);
  z-index:2000; display:none; align-items:center;
  justify-content:center; padding:20px; backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.modal-overlay.open { display:flex }
.modal {
  background:var(--surface); border-radius:var(--radius-xl); width:100%; max-width:640px;
  box-shadow:var(--shadow-lg); animation:modalIn .22s cubic-bezier(.34,1.56,.64,1);
  max-height:92vh; display:flex; flex-direction:column;
  border:1px solid var(--border);
}
@keyframes modalIn {
  from { opacity:0; transform:scale(.92) translateY(12px) }
  to   { opacity:1; transform:scale(1) translateY(0) }
}
.modal-header {
  padding:22px 28px; border-bottom:1px solid var(--border-light);
  display:flex; align-items:center; justify-content:space-between;
  background:var(--surface-2);
  border-radius:var(--radius-xl) var(--radius-xl) 0 0;
}
.modal-title  { font-size:1.1rem; font-weight:700; color:var(--text) }
.modal-close  {
  background:none; border:none; cursor:pointer;
  font-size:1.2rem; color:var(--text-muted); padding:6px; border-radius:7px;
  transition:all var(--t-fast); line-height:1;
}
.modal-close:hover { background:var(--bg); color:var(--text) }
.modal-body   { padding:28px; overflow-y:auto; flex:1 }
.modal-footer {
  padding:18px 28px; border-top:1px solid var(--border-light);
  display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap;
  background:var(--surface-2);
  border-radius:0 0 var(--radius-xl) var(--radius-xl);
}

/* ══════════════════════════════════════════
   ALERTS
══════════════════════════════════════════ */
.alert {
  padding:14px 18px; border-radius:var(--radius-sm); font-size:.92rem;
  display:flex; align-items:flex-start; gap:12px; margin-bottom:16px;
  border:1px solid transparent; line-height:1.6;
}
.alert i { margin-top:2px; flex-shrink:0; font-size:1rem }
.alert-success { background:var(--success-light); color:#047857; border-color:#A7F3D0 }
.alert-danger  { background:var(--danger-light); color:#B91C1C; border-color:#FECACA }
.alert-warning { background:var(--warning-light); color:#92400E; border-color:#FDE68A }
.alert-info    { background:var(--info-light); color:#1E40AF; border-color:#BFDBFE }

/* ══════════════════════════════════════════
   PAGINATION
══════════════════════════════════════════ */
.pagination { display:flex; gap:5px; align-items:center; flex-wrap:wrap }
.page-btn {
  min-width:36px; height:36px; padding:0 10px;
  border:1.5px solid var(--border); border-radius:var(--radius-sm);
  background:var(--surface); color:var(--text-2); cursor:pointer;
  font-size:.86rem; text-decoration:none; display:inline-flex; align-items:center; justify-content:center;
  font-weight:500; transition:all var(--t-fast); touch-action:manipulation;
}
.page-btn:hover { background:var(--bg); border-color:var(--text-light) }
.page-btn.active {
  background:var(--primary); color:#fff; border-color:var(--primary);
  box-shadow:0 2px 8px rgba(var(--primary-rgb),.3);
}
.page-btn:disabled { opacity:.45; cursor:not-allowed }

/* ══════════════════════════════════════════
   DROPDOWN
══════════════════════════════════════════ */
.dropdown { position:relative; display:inline-block }
.dropdown-menu {
  position:absolute; top:calc(100% + 8px); right:0; min-width:200px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-md); z-index:1500; display:none; overflow:hidden;
}
.dropdown-menu.open { display:block; animation:fadeInDown .15s ease }
@keyframes fadeInDown {
  from { opacity:0; transform:translateY(-8px) }
  to   { opacity:1; transform:translateY(0) }
}
@keyframes fadeIn {
  from { opacity:0 } to { opacity:1 }
}
.dropdown-item {
  display:flex; align-items:center; gap:10px; padding:11px 16px;
  color:var(--text-2); text-decoration:none; font-size:.92rem;
  transition:background var(--t-fast); cursor:pointer;
  border:none; background:none; width:100%; font-family:inherit; font-weight:500;
  touch-action:manipulation;
}
.dropdown-item:hover { background:var(--bg) }
.dropdown-item i { color:var(--text-muted); width:16px; text-align:center; font-size:.9rem; flex-shrink:0 }
.dropdown-item:hover i { color:var(--primary) }
.dropdown-item.danger { color:var(--danger) }
.dropdown-item.danger i { color:var(--danger) }
.dropdown-divider { height:1px; background:var(--border-light); margin:4px 0 }

/* ══════════════════════════════════════════
   QUICK ACCESS BAR
══════════════════════════════════════════ */
.quick-bar {
  display:flex; gap:8px; padding:11px 24px;
  background:var(--surface); border-bottom:1px solid var(--border);
  overflow-x:auto; flex-wrap:nowrap;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.quick-bar::-webkit-scrollbar { display:none }
.quick-btn {
  display:flex; align-items:center; gap:7px; padding:8px 16px;
  background:var(--bg); border:1.5px solid var(--border); border-radius:var(--radius-sm);
  color:var(--text-2); text-decoration:none; font-size:.86rem; font-weight:600;
  transition:all var(--t-fast); cursor:pointer; white-space:nowrap; flex-shrink:0;
  touch-action:manipulation;
}
.quick-btn:hover {
  background:var(--primary); color:#fff; border-color:var(--primary);
  box-shadow:0 2px 10px rgba(var(--primary-rgb),.25);
  transform:translateY(-1px);
}
.quick-btn i { font-size:.95rem }
.quick-btn-dim { opacity:.4; cursor:not-allowed }
.quick-btn-dim:hover {
  background:var(--bg) !important; color:var(--text-2) !important;
  border-color:var(--border) !important; transform:none !important; box-shadow:none !important;
}
.quick-btn-enabiz {
  padding:5px 10px;
  border-color:#003F8A33;
  background:#fff;
}
.quick-btn-enabiz:hover {
  background:#f0f4ff !important;
  border-color:#003F8A !important;
  box-shadow:0 2px 10px rgba(0,63,138,.2);
  transform:translateY(-1px);
}
.quick-btn-enabiz img {
  height:28px;
  width:auto;
  display:block;
}
@media(max-width:480px) {
  .quick-btn-enabiz img { height:24px; }
}

/* ══════════════════════════════════════════
   NOTIFICATION PANEL
══════════════════════════════════════════ */
.notif-panel {
  position:fixed; top:var(--header-h); right:0;
  width:380px; height:calc(100vh - var(--header-h));
  background:var(--surface); border-left:1px solid var(--border);
  z-index:1800; transform:translateX(100%); transition:transform .28s ease;
  display:flex; flex-direction:column;
  box-shadow:var(--shadow-lg);
}
.notif-panel.open { transform:translateX(0) }
.notif-header {
  padding:18px 20px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  background:var(--surface-2);
}
.notif-list { flex:1; overflow-y:auto; padding:12px }
.notif-item {
  padding:14px; border-radius:10px; margin-bottom:6px;
  cursor:pointer; transition:background var(--t-fast); border-left:3px solid transparent;
}
.notif-item:hover { background:var(--bg) }
.notif-item.unread { background:var(--primary-light); border-left-color:var(--primary) }
.notif-item-title { font-size:.9rem; font-weight:600; color:var(--text) }
.notif-item-body  { font-size:.82rem; color:var(--text-muted); margin-top:4px; line-height:1.5 }
.notif-item-time  { font-size:.74rem; color:var(--text-light); margin-top:6px }

/* ══════════════════════════════════════════
   DASHBOARD WIDGETS
══════════════════════════════════════════ */
.widget-list { display:flex; flex-direction:column; gap:0 }
.widget-item {
  display:flex; align-items:center; gap:14px;
  padding:14px 0; border-bottom:1px solid var(--border-light);
}
.widget-item:last-child { border-bottom:none; padding-bottom:0 }
.widget-item:first-child { padding-top:0 }
.widget-avatar {
  width:40px; height:40px; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:.9rem;
}
.widget-body { flex:1; min-width:0 }
.widget-title { font-size:.9rem; font-weight:600; color:var(--text) }
.widget-sub   { font-size:.78rem; color:var(--text-muted); margin-top:2px }
.widget-right { text-align:right; flex-shrink:0 }

/* ══════════════════════════════════════════
   EMPTY STATE
══════════════════════════════════════════ */
.empty-state {
  text-align:center; padding:56px 24px;
  color:var(--text-muted);
}
.empty-state i {
  font-size:3rem; opacity:.25; display:block;
  margin-bottom:16px; color:var(--text-muted);
}
.empty-state h3 { font-size:1rem; font-weight:600; color:var(--text-2); margin-bottom:6px }
.empty-state p { font-size:.88rem; max-width:320px; margin:0 auto 20px; line-height:1.6 }

/* ══════════════════════════════════════════
   PROGRESS
══════════════════════════════════════════ */
.progress { background:var(--border); border-radius:20px; overflow:hidden; height:8px }
.progress-bar {
  height:100%; border-radius:20px;
  background:linear-gradient(90deg, var(--primary), var(--teal));
  transition:width .4s ease;
}

/* ══════════════════════════════════════════
   UTILS
══════════════════════════════════════════ */
.d-flex  { display:flex }
.d-grid  { display:grid }
.d-none  { display:none }
.d-block { display:block }
.align-center    { align-items:center }
.align-start     { align-items:flex-start }
.align-end       { align-items:flex-end }
.justify-between { justify-content:space-between }
.justify-center  { justify-content:center }
.justify-end     { justify-content:flex-end }
.flex-wrap    { flex-wrap:wrap }
.flex-nowrap  { flex-wrap:nowrap }
.flex-col     { flex-direction:column }
.flex-1       { flex:1 }
.gap-1 { gap:4px }
.gap-2 { gap:8px }
.gap-3 { gap:12px }
.gap-4 { gap:16px }
.gap-5 { gap:20px }
.gap-6 { gap:24px }
.mt-1{margin-top:4px} .mt-2{margin-top:8px} .mt-3{margin-top:16px} .mt-4{margin-top:24px} .mt-5{margin-top:32px}
.mb-1{margin-bottom:4px} .mb-2{margin-bottom:8px} .mb-3{margin-bottom:16px} .mb-4{margin-bottom:24px}
.p-0{padding:0}
.text-muted  { color:var(--text-muted) }
.text-light  { color:var(--text-light) }
.text-primary{ color:var(--primary) }
.text-success{ color:var(--success) }
.text-danger { color:var(--danger) }
.text-warning{ color:var(--warning) }
.text-center { text-align:center }
.text-right  { text-align:right }
.text-left   { text-align:left }
.fw-400 { font-weight:400 }
.fw-500 { font-weight:500 }
.fw-600 { font-weight:600 }
.fw-700 { font-weight:700 }
.fw-800 { font-weight:800 }
.fs-xs  { font-size:.76rem }
.fs-sm  { font-size:.84rem }
.fs-md  { font-size:.94rem }
.fs-lg  { font-size:1.05rem }
.w-100  { width:100% }
.h-100  { height:100% }
.rounded     { border-radius:var(--radius) }
.rounded-lg  { border-radius:var(--radius-lg) }
.rounded-full{ border-radius:9999px }
.overflow-hidden { overflow:hidden }
.overflow-auto   { overflow:auto }
.cursor-pointer  { cursor:pointer }
.select-none     { user-select:none }
.separator { height:1px; background:var(--border-light); margin:20px 0 }
.no-print  {}

/* ══════════════════════════════════════════
   SKELETON LOADER
══════════════════════════════════════════ */
.skeleton {
  background:linear-gradient(90deg, var(--bg) 25%, var(--border) 50%, var(--bg) 75%);
  background-size:200%; animation:shimmer 1.6s infinite; border-radius:8px;
}
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ══════════════════════════════════════════
   CHART AREA
══════════════════════════════════════════ */
.chart-container { position:relative; height:240px; width:100% }

/* ══════════════════════════════════════════
   RESPONSIVE — TABLET ≤ 1280px
══════════════════════════════════════════ */
@media(max-width:1280px) {
  .page-content { padding:26px 28px }
  .stat-grid,
  .stats-grid { grid-template-columns:repeat(2, 1fr) !important }
}

@media(max-width:1024px) {
  :root { --sidebar-w:250px }
  .page-content { padding:22px 20px }
}

/* ══════════════════════════════════════════
   KASA MINI STATS GRID (dashboard)
══════════════════════════════════════════ */
.kasa-mini-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-bottom:20px;
}

/* ══════════════════════════════════════════
   HASTA DETAY — sidebar + main grid
══════════════════════════════════════════ */
.hasta-detay-grid {
  display:grid;
  grid-template-columns:320px 1fr;
  gap:20px;
  align-items:start;
}

/* ══════════════════════════════════════════
   GENERIC SIDEBAR+CONTENT GRIDS
   (sidebar-content-grid, muayene-detay grid, etc.)
══════════════════════════════════════════ */
.sidebar-content-grid {
  display:grid;
  grid-template-columns:340px 1fr;
  gap:20px;
  align-items:start;
}
.sidebar-content-grid-sm {
  display:grid;
  grid-template-columns:280px 1fr;
  gap:20px;
  align-items:start;
}
.sidebar-content-grid-lg {
  display:grid;
  grid-template-columns:380px 1fr;
  gap:14px;
  align-items:start;
}

/* ══════════════════════════════════════════
   DARK MODE
══════════════════════════════════════════ */
[data-theme=dark] {
  --bg:           #0F1117;
  --surface:      #1A1F2E;
  --surface-2:    #232938;
  --border:       #2D3448;
  --border-light: #232938;
  --text:         #F1F5F9;
  --text-2:       #CBD5E1;
  --text-muted:   #94A3B8;
  --text-light:   #64748B;
}
[data-theme=dark] body { background:var(--bg) }
[data-theme=dark] .topbar,
[data-theme=dark] .quick-bar       { background:var(--surface); border-color:var(--border) }
[data-theme=dark] .topbar-search   { background:var(--surface-2); border-color:var(--border) }
[data-theme=dark] .topbar-search input { color:var(--text) }
[data-theme=dark] .topbar-user:hover,
[data-theme=dark] .topbar-btn:hover { background:var(--surface-2) }
[data-theme=dark] .card            { background:var(--surface); border-color:var(--border) }
[data-theme=dark] .card-header,
[data-theme=dark] .card-footer     { background:var(--surface-2); border-color:var(--border) }
[data-theme=dark] .stat-card       { background:var(--surface); border-color:var(--border) }
[data-theme=dark] .form-control,
[data-theme=dark] .form-select     { background:var(--surface); border-color:var(--border); color:var(--text) }
[data-theme=dark] .form-section    { background:var(--surface); border-color:var(--border) }
[data-theme=dark] thead tr         { background:var(--surface-2); border-color:var(--border) }
[data-theme=dark] tbody tr         { border-color:var(--border) }
[data-theme=dark] tbody tr:hover   { background:var(--surface-2) }
[data-theme=dark] .dropdown-menu   { background:var(--surface); border-color:var(--border) }
[data-theme=dark] .dropdown-item:hover { background:var(--surface-2) }
[data-theme=dark] .modal           { background:var(--surface); border-color:var(--border) }
[data-theme=dark] .modal-header,
[data-theme=dark] .modal-footer    { background:var(--surface-2); border-color:var(--border) }
[data-theme=dark] .modal-overlay   { background:rgba(0,0,0,.75) }
[data-theme=dark] .btn-secondary   { background:var(--surface-2); border-color:var(--border); color:var(--text-2) }
[data-theme=dark] .btn-secondary:hover { background:var(--border) }
[data-theme=dark] .btn-ghost:hover { background:var(--surface-2) }
[data-theme=dark] .badge-secondary { background:var(--surface-2); border-color:var(--border); color:var(--text-muted) }
[data-theme=dark] .page-btn        { background:var(--surface); border-color:var(--border); color:var(--text-2) }
[data-theme=dark] .page-btn:hover  { background:var(--surface-2) }
[data-theme=dark] .tab-btn:hover   { background:var(--surface-2) }
[data-theme=dark] .quick-btn       { background:var(--surface-2); border-color:var(--border); color:var(--text-2) }
[data-theme=dark] .notif-panel     { background:var(--surface); border-color:var(--border) }
[data-theme=dark] .notif-header    { background:var(--surface-2); border-color:var(--border) }
[data-theme=dark] .notif-item:hover { background:var(--surface-2) }
[data-theme=dark] .alert-success   { background:rgba(16,185,129,.12); color:#6EE7B7; border-color:rgba(16,185,129,.25) }
[data-theme=dark] .alert-danger    { background:rgba(239,68,68,.12); color:#FCA5A5; border-color:rgba(239,68,68,.25) }
[data-theme=dark] .alert-warning   { background:rgba(245,158,11,.12); color:#FCD34D; border-color:rgba(245,158,11,.25) }
[data-theme=dark] .alert-info      { background:rgba(45,140,255,.12); color:#93C5FD; border-color:rgba(45,140,255,.25) }
[data-theme=dark] .progress        { background:var(--border) }
[data-theme=dark] .separator       { background:var(--border) }
[data-theme=dark] .topbar-search-overlay { background:var(--surface); border-color:var(--border) }
[data-theme=dark] .topbar-search-overlay input { background:var(--surface-2); border-color:var(--border); color:var(--text) }
[data-theme=dark] tfoot tr         { border-color:var(--border) }

/* ══════════════════════════════════════════
   RESPONSIVE — MOBILE ≤ 768px
══════════════════════════════════════════ */
@media(max-width:768px) {
  /* Update header height variable */
  :root { --header-h:60px }

  /* Sidebar slide-over */
  .sidebar {
    transform:translateX(-100%);
    width:var(--sidebar-w) !important;
    box-shadow:var(--shadow-lg);
  }
  .sidebar.mobile-open  { transform:translateX(0) }
  .sidebar.collapsed    { transform:translateX(-100%) }
  .main-wrapper         { margin-left:0 !important }

  /* Topbar */
  .topbar               { padding:0 14px; gap:8px; height:60px }
  .topbar-search        { display:none }
  .topbar-search-btn    { display:flex }
  .topbar-user-info     { display:none }
  .online-count-wrap    { display:none }
  .topbar-right         { gap:1px }
  .topbar-btn           { padding:8px; font-size:1rem }
  .topbar-avatar        { width:34px; height:34px; font-size:.84rem }

  /* Quick bar */
  .quick-bar            { padding:8px 14px; gap:6px }
  .quick-btn            { padding:8px 13px; font-size:.8rem }

  /* Page */
  .page-content         { padding:16px 14px }
  .page-header          { flex-direction:column; gap:12px; margin-bottom:18px }
  .page-header .btn-group { width:100% }
  .page-header .btn-group .btn { flex:1; justify-content:center }
  .page-title           { font-size:1.3rem }

  /* Stats — !important overrides inline style="grid-template-columns:..." */
  .stat-grid,
  .stats-grid           { grid-template-columns:1fr 1fr !important; gap:12px; margin-bottom:18px }
  .stat-card            { padding:16px 14px; gap:12px }
  .stat-icon            { width:46px; height:46px; font-size:1.2rem; border-radius:12px }
  .stat-val, .stat-value{ font-size:1.5rem }
  .stat-label           { font-size:.78rem }

  /* Kasa mini grid */
  .kasa-mini-grid       { grid-template-columns:1fr; gap:10px }

  /* Sidebar+content grids — stack on mobile */
  .hasta-detay-grid,
  .sidebar-content-grid,
  .sidebar-content-grid-sm,
  .sidebar-content-grid-lg { grid-template-columns:1fr }

  /* Cards */
  .card                 { border-radius:12px }
  .card-header          { padding:14px 16px }
  .card-body            { padding:16px }
  .card-footer          { padding:12px 16px }
  .card-title           { font-size:.95rem }

  /* Table */
  .table-wrap           { overflow-x:auto; -webkit-overflow-scrolling:touch }
  table                 { min-width:560px }
  thead th              { padding:11px 12px; font-size:.7rem }
  tbody td              { padding:11px 12px; font-size:.87rem }

  /* Forms — !important overrides inline style="grid-template-columns:repeat(N,1fr)" */
  .form-row             { grid-template-columns:1fr !important }
  .form-control,
  .form-select          { font-size:.92rem; padding:10px 13px }
  .form-section         { padding:16px }

  /* Buttons */
  .btn                  { padding:10px 16px; font-size:.88rem }
  .btn-sm               { padding:7px 12px; font-size:.81rem }
  .btn-group            { gap:6px }

  /* Modal — bottom sheet */
  .modal-overlay        { padding:0; align-items:flex-end }
  .modal {
    border-radius:20px 20px 0 0;
    max-width:100%; max-height:92vh;
    animation:modalSlideUp .24s ease;
  }
  @keyframes modalSlideUp { from{transform:translateY(100%)} to{transform:translateY(0)} }
  .modal-header { border-radius:20px 20px 0 0 }
  .modal-footer { border-radius:0; gap:8px }
  .modal-footer .btn { flex:1; justify-content:center }
  .modal-body   { padding:20px }

  /* Notif panel */
  .notif-panel          { width:100% }

  /* Tabs */
  .tab-btn              { padding:11px 14px; font-size:.84rem }

  /* Pagination */
  .page-btn             { min-width:32px; height:32px; font-size:.8rem }
}

/* ══════════════════════════════════════════
   RESPONSIVE — SMALL ≤ 480px
══════════════════════════════════════════ */
@media(max-width:480px) {
  .stat-grid,
  .stats-grid           { grid-template-columns:1fr !important }
  .page-content         { padding:12px 10px }
  .topbar               { padding:0 10px; gap:4px }
  .topbar-avatar        { width:32px; height:32px }
  .page-title           { font-size:1.1rem }

  /* Quick bar: ikon only */
  .quick-btn span       { display:none }
  .quick-btn            { padding:9px; border-radius:9px }
  .quick-btn i          { font-size:1.05rem; margin:0 }

  .card-header          { flex-direction:column; align-items:flex-start }
  .card-header .btn-group { width:100% }
  .card-header .btn-group .btn { flex:1; justify-content:center; font-size:.81rem }

  table                 { min-width:480px }
  tbody td              { padding:10px; font-size:.84rem }

  .kasa-mini-grid       { gap:8px }
}

/* ══════════════════════════════════════════
   PRINT
══════════════════════════════════════════ */
@media print {
  .sidebar, .topbar, .quick-bar, .no-print,
  .sidebar-backdrop, .topbar-search-overlay,
  .notif-panel, .modal-overlay { display:none !important }
  .main-wrapper { margin-left:0 !important }
  .page-content { padding:0 }
  .card { box-shadow:none !important; border:1px solid #CCC !important; border-radius:4px !important }
  body { background:#fff }
  a { color:inherit }
}