/* ==========================================================================
   HASTANE İLAÇ REHBERİ – modern, temiz, erişilebilir tek dosya CSS
   - Mobil-önce · Container/size/viewport üniteleri · OKLCH renkler (fallback’lı)
   - Kapsam: Header/Nav, Grid, Kartlar, Formlar, Listeler, Rozet/Chip, Bildirim/Toast
   - A11y: yüksek kontrast, odak halkası, motion reduce, büyük yazı uyumu
   ========================================================================== */

/* -------------------- 0) Yumuşak Reset -------------------- */
*,*::before,*::after{box-sizing:border-box}
html{line-height:1.5;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
img,svg,video,canvas,iframe{display:block;max-inline-size:100%;block-size:auto}
button{cursor:pointer}
a{text-decoration:none;color:inherit}
:focus-visible{outline:2px solid oklch(65% .12 200 / .95);outline-offset:2px}

/* Motion-sensitive kullanıcılar */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* -------------------- 1) Design Tokens -------------------- */
:root{
  color-scheme: light;

  /* Nötr & medikal palet (OKLCH + fallback) */
  --ink:#0f172a;                 /* slate-900 */
  --ink-2:#334155;               /* slate-700 */
  --muted:#64748b;               /* slate-500 */
  --border:#e2e8f0;              /* slate-200 */

  --bg:#f8fafc;                  /* slate-50 */
  --surface:#ffffff;             /* white */

  --brand: oklch(68% .10 190);   /* steril teal */
  --brand-600: oklch(62% .10 190);
  --brand-700: oklch(56% .10 190);

  --accent: oklch(78% .09 250);  /* hafif mavi */
  --success: oklch(83% .10 150); /* yeşil */
  --warning: oklch(85% .12 85);  /* sarı */
  --danger:  oklch(65% .14 25);  /* kırmızı */

  /* Tipografi */
  --fs-12: clamp(11px,.8vw,12px);
  --fs-14: clamp(12px,.9vw,14px);
  --fs-16: clamp(14px,1vw,16px);
  --fs-18: clamp(16px,1.2vw,18px);
  --fs-20: clamp(18px,1.6vw,20px);
  --fs-24: clamp(20px,2vw,24px);
  --fs-28: clamp(22px,2.6vw,28px);

  /* Boyut & boşluk */
  --maxw: 1240px;
  --nav-h: 64px;
  --pad-x: 16px;
  --r-8: 8px; --r-10: 10px; --r-12: 12px; --r-14: 14px; --r-16: 16px;
  --shadow-sm: 0 1px 2px rgba(15,23,42,.05);
  --shadow-md: 0 8px 22px -10px rgba(2,132,199,.18);
  --shadow-lg: 0 16px 42px -16px rgba(2,132,199,.22);
}

/* Karanlık mod - Hem manuel hem sistem tercihine göre */
[data-theme="dark"],
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --bg:#0b1220;
    --surface:#0f172a;
    --ink:#e5e7eb;
    --ink-2:#cbd5e1;
    --muted:#94a3b8;
    --border:#1f2937;
    --shadow-md: 0 10px 24px -12px rgba(2,132,199,.28);
    --shadow-lg: 0 18px 48px -20px rgba(2,132,199,.35);
  }
}

[data-theme="dark"]{
  color-scheme: dark;
  --bg:#0b1220;
  --surface:#0f172a;
  --ink:#e5e7eb;
  --ink-2:#cbd5e1;
  --muted:#94a3b8;
  --border:#1f2937;
  --shadow-md: 0 10px 24px -12px rgba(2,132,199,.28);
  --shadow-lg: 0 18px 48px -20px rgba(2,132,199,.35);
}

/* -------------------- 2) Taban Elemanlar -------------------- */
body{
  background:
    radial-gradient(1200px 380px at 50% -200px, color-mix(in oklab, var(--accent) 22%, transparent) 0%, transparent 60%),
    var(--bg);
  color: var(--ink);
}
.container{inline-size:min(100% - 2*var(--pad-x), var(--maxw));margin-inline:auto}
.view{padding:24px var(--pad-x) 56px}

/* Başlıklar */
h1,h2,h3{margin:0 0 12px;line-height:1.2;letter-spacing:-.01em}
h1{font-size:var(--fs-28);font-weight:800}
h2{font-size:var(--fs-20);font-weight:800}
h3{font-size:var(--fs-18);font-weight:700}
p{margin:0 0 12px;color:var(--ink)}
.muted{color:var(--muted)}

/* -------------------- 3) Header & Navigasyon -------------------- */
.site-header{
  position:sticky;inset-block-start:0;z-index:50;
  background:linear-gradient(180deg, color-mix(in oklab, var(--surface) 70%, transparent), var(--surface));
  border-block-end:1px solid var(--border);
  backdrop-filter:saturate(1.2) blur(6px);
}
.header-inner{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;
  inline-size:min(100% - 2*var(--pad-x), var(--maxw));margin-inline:auto;
  min-block-size:var(--nav-h)
}
.brand{display:flex;align-items:center;gap:10px}
.brand .logo{font-size:22px}
.brand .brand-text{font-weight:800;letter-spacing:.2px}

/* nav – desktop */
.nav-links{display:flex;justify-content:center;align-items:center;gap:clamp(16px,3vw,36px)}
.nav-links a{font-weight:600;color:color-mix(in oklab, var(--ink) 70%, #7dd3fc);opacity:.9}
.nav-links a:hover{opacity:1}

/* sağ aksiyonlar */
.header-right{display:flex;align-items:center;gap:10px}

/* hamburger */
.nav-toggle{display:none;place-items:center;inline-size:42px;block-size:42px;border:1px solid var(--border);border-radius:10px;background:transparent}
.nav-toggle .bar{display:block;inline-size:20px;block-size:2px;background:var(--ink);border-radius:4px}
.nav-toggle .bar+.bar{margin-block-start:5px}
.nav-toggle.is-open .bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.is-open .bar:nth-child(2){opacity:0}
.nav-toggle.is-open .bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* mobile dropdown */
@media (max-width:860px){
  .nav-toggle{display:grid}
  .nav-links{
    position:absolute;inset-inline-end:16px;inset-block-start:calc(var(--nav-h) + 8px);
    display:none;flex-direction:column;gap:8px;min-inline-size:200px;
    padding:10px;border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-lg);
    background:var(--surface)
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:8px 10px;border-radius:10px}
  .nav-links a:hover{background:color-mix(in oklab, var(--accent) 14%, transparent)}
}

/* Skip link */
.skip-link{position:absolute;inset-inline-start:-9999px;inset-block-start:-9999px}
.skip-link:focus{inset-inline-start:8px;inset-block-start:8px;z-index:70;padding:8px 10px;background:var(--surface);border-radius:10px}

/* -------------------- 4) Sayfa Izgarası -------------------- */
.page-grid{
  display:grid;grid-template-columns:1fr;gap:24px;align-items:start;
  inline-size:min(100% - 2*var(--pad-x), var(--maxw));margin-inline:auto
}
@container style(--w: 1){/* no-op: container queries açılımı için kanca */}
@media (min-width:1025px){ .page-grid{ grid-template-columns: 1.6fr 1fr } }

.page-grid>.main-col,.page-grid>aside{display:grid;gap:12px}

/* -------------------- 5) Kartlar & Yüzeyler -------------------- */
.card,.k-card,.side-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-14);box-shadow:var(--shadow-sm)
}
.card-header{padding:12px 16px;font-weight:700;border-block-end:1px solid var(--border)}
.card-body{padding:14px 16px}
.card+.card{margin-block-start:16px}

/* Kayan bölgeler (uzun listeler) */
.scroll-area,.side-card .card-body,.notes-panel,.alarms-panel{
  max-block-size:min(60svh,540px);overflow:auto;overscroll-behavior:contain
}

/* Günün kartı üst satır */
.daily-head{display:flex;gap:8px;align-items:center;justify-content:space-between;min-inline-size:0}
.k-section-title{font-weight:800}

/* -------------------- 6) Formlar -------------------- */
.k-input,input[type=text],input[type=search],input[type=time],textarea,select{
  inline-size:100%;padding:10px 12px;background:#fff;color:var(--ink);
  border:1px solid var(--border);border-radius:12px
}
.k-input:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.inline-form{display:grid;grid-template-columns:1fr auto;gap:10px}
@media (max-width:520px){.inline-form{grid-template-columns:1fr}}

/* Yardımcı küçük input grupları */
.input-row{display:flex;gap:10px;align-items:center}
.input-row>.grow{flex:1}

/* -------------------- 7) Butonlar / Etiketler -------------------- */
.btn,.k-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 14px;border:1px solid var(--brand);border-radius:12px;
  background:var(--brand);color:#fff;font-weight:700;box-shadow:var(--shadow-sm)
}
.k-btn:hover{background:var(--brand-600)}
.k-btn:active{background:var(--brand-700)}
.k-btn.ghost{background:transparent;border-color:transparent;color:var(--brand)}
.k-btn.block{inline-size:100%}

.pill,.badge{
  display:inline-block;padding:4px 10px;font-size:var(--fs-12);
  background:#fff;border:1px solid var(--border);border-radius:999px
}
.chip{
  display:inline-block;padding:6px 10px;border-radius:999px;
  background:color-mix(in oklab, var(--accent) 20%, #fff);border:1px solid var(--border);font-weight:600
}
.tag-success{background:color-mix(in oklab, var(--success) 26%, #fff)}
.tag-warning{background:color-mix(in oklab, var(--warning) 26%, #fff)}
.tag-danger{ background:color-mix(in oklab, var(--danger) 26%, #fff)}
@media (max-width:480px){.chip,.badge{white-space:normal}}

/* -------------------- 8) Listeler -------------------- */
.list{display:grid;gap:8px;padding:0;margin:0;list-style:none}
.list-item{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:#fff
}

/* -------------------- 9) Sayfa Ögeleri – Home -------------------- */
.hero{display:flex;gap:16px;align-items:center}
.hero .emoji{font-size:22px}
.hero-compact h1{font-size:var(--fs-24)}
.search-bar{display:flex;gap:10px;align-items:center}
.search-bar input{flex:1}
.favs-only{display:flex;gap:8px;align-items:center;font-size:var(--fs-14)}
.side-card h2,.card h2{font-size:var(--fs-18)}

/* -------------------- 10) Bildirim / Toast -------------------- */
.toast{
  position:fixed;inset-inline: auto 16px;inset-block-end:16px;z-index:60;
  display:grid;gap:8px;max-inline-size:min(92vw,380px)
}
.toast .item{
  display:flex;gap:10px;align-items:flex-start;
  padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:var(--surface);box-shadow:var(--shadow-md)
}
.toast .item.success{border-color:color-mix(in oklab, var(--success) 50%, var(--border))}
.toast .item.warn{border-color:color-mix(in oklab, var(--warning) 50%, var(--border))}
.toast .item.error{border-color:color-mix(in oklab, var(--danger) 50%, var(--border))}

/* -------------------- 11) Footer -------------------- */
.site-footer{
  padding:14px var(--pad-x);
  background:linear-gradient(0deg, color-mix(in oklab, var(--surface) 80%, transparent), transparent);
  border-block-start:1px solid var(--border)
}
.footer-inner{
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  inline-size:min(100% - 2*var(--pad-x), var(--maxw));margin-inline:auto
}

/* -------------------- 12) Yardımcı Sınıflar -------------------- */
.center{display:grid;place-items:center}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:720px){.grid-2{grid-template-columns:1fr}}
.fill{inline-size:100%}
.hidden{display:none!important}
.text-right{text-align:right}
.mt-2{margin-block-start:8px}.mt-3{margin-block-start:12px}.mt-4{margin-block-start:16px}

/* -------------------- 13) Baskı -------------------- */
@media print{
  .site-header,.site-footer,.nav-toggle,.nav-links{display:none!important}
  .view{padding:0}
  .card,.k-card{box-shadow:none;border-color:#ddd}
}

/* ==================== PATCH: Klinik UX düzeltmeleri ==================== */

/* 1) "Henüz not/alarım yok" taşmasın (uzun kelime/satır) */
.empty,
.empty-state,
.notes-empty,
.alarms-empty,
.side-card .empty,
.card .empty {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: var(--fs-14);
  line-height: 1.45;
  white-space: normal;
  overflow-wrap: anywhere; /* uzun tek kelimeleri de kır */
  word-break: break-word;
}

/* Eğer boş durum mermili listeyse hizalansın */
.side-card .empty ul,
.card .empty ul { margin: 4px 0 0 18px; padding: 0; }

/* 2) İlaç listesi çok uzayınca kart içinde kaydırma */
.drug-list,
#drugList,
[data-role="drug-list"] {
  max-height: min(62svh, 640px);
  overflow: auto;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
}

/* Scrollbar’ı incelt (destekleyen tarayıcılarda) */
.drug-list::-webkit-scrollbar { width: 8px; }
.drug-list::-webkit-scrollbar-thumb {
  background: color-mix(in oklab, var(--accent) 28%, #999);
  border-radius: 8px;
}
.drug-list { scrollbar-color: color-mix(in oklab, var(--accent) 28%, #999) transparent; }

/* 3) Notlar ve Hatırlatıcılar arası mesafe */
.page-grid > aside { gap: 16px; }
.notes-card + .alarms-card,
#notesCard + #alarmsCard,
.side-card + .side-card { margin-top: 8px; }

/* 4) Telefon: ana sayfa içerik hizalaması (ortala, tam genişlik) */
@media (max-width: 480px){
  .page-grid { justify-items: center; }
  .page-grid > * { width: 100%; }
  .hero,
  .daily-card,
  .k-card,
  .card { margin-inline: auto; }
}

/* 5) İletişim sayfası — daha kurumsal ve düzenli görünüm */
.page-contact .contact-card,
.page-contact .card { border-radius: 14px; box-shadow: var(--shadow-sm); }

.page-contact .form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.page-contact .form-grid .full { grid-column: 1 / -1; }
@media (max-width: 820px){
  .page-contact .form-grid { grid-template-columns: 1fr; }
}

.page-contact label {
  display: block;
  margin: 4px 0 6px;
  font-weight: 700;
  color: var(--ink-2, #334155);
}
.page-contact input[type="text"],
.page-contact input[type="email"],
.page-contact textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
}
.page-contact textarea { min-height: 120px; resize: vertical; }

/* bilgilendirme kutuları */
.page-contact .info-list {
  display: grid; gap: 8px;
  padding: 12px 14px; border:1px solid var(--border);
  border-radius: 12px; background: var(--surface);
}
.page-contact .info-list a { color: color-mix(in oklab, var(--brand) 50%, var(--ink)); }

/* 6) Yardım/SSS okunabilirliği artırma */
.page-help article { max-width: 70ch; }
.page-help h1 { margin-bottom: 12px; }
.page-help h2 { margin: 18px 0 8px; }
.page-help p,
.page-help li { line-height: 1.6; }

.page-help .quick-links {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 10px; border:1px solid var(--border);
  border-radius: 12px; background: var(--surface);
  margin: 8px 0 14px;
}

/* details/summary stile */
.page-help details { border:1px solid var(--border); border-radius: 12px; background: var(--surface); margin: 10px 0; }
.page-help summary {
  cursor: pointer; padding: 10px 12px; font-weight: 700;
  list-style: none; border-bottom: 1px solid var(--border);
}
.page-help details[open] summary { border-bottom-color: transparent; }
.page-help details > *:not(summary) { padding: 12px; }

/* küçük rozet/etiketler */
.page-help .badge,
.page-help .chip { font-size: var(--fs-12); }

/* 7) Arama blokları ve filtre buton aralığı */
.search-block,
#searchBlock {
  display: grid; gap: 10px;
}
.search-block .filters { display: flex; gap: 10px; align-items: center; }

/* 8) Kart başlık/kenarlık tutarlılığı */
.card,
.k-card,
.side-card { border: 1px solid var(--border); }
.card-header { border-bottom: 1px solid var(--border); }

/* 9) Güvenli kelime kırma – tüm kart gövdeleri */
.card-body,
.side-card,
.k-card { overflow-wrap: anywhere; word-break: break-word; }


/* ==================== PATCH – form, banner, drugs, cards ==================== */

/* 0) Kartları belirginleştir (hafif gölge + net kenarlık) */
:root{
  --border-strong: color-mix(in oklab, var(--border) 70%, #7dd3fc 8%);
}
.card, .k-card, .side-card {
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-md);            /* önceki shadow-sm'yi güçlendir */
}
.card-header { border-bottom: 1px solid var(--border-strong); }

/* 1) İLETİŞİM: label’lar üstte; inputlar tam genişlik – küçük kalma sorununu çözer */
.page-contact .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 860px){ .page-contact .form-grid { grid-template-columns: 1fr; } }

.page-contact .form-row { display: grid; grid-template-columns: 1fr; }
.page-contact label { display:block; margin: 4px 0 6px; font-weight:700; color: var(--ink-2,#334155); }
.page-contact input[type="text"],
.page-contact input[type="email"],
.page-contact textarea {
  width: 100%;
  padding: 12px 14px;
  font-size: var(--fs-16);            /* okunurluk */
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
}
.page-contact textarea { min-height: 140px; resize: vertical; }
.page-contact .full { grid-column: 1 / -1; }  /* “Mesajınız” gibi geniş alanlar */

/* 2) ÜST BİLDİRİM (banner) – tek satır, butonlar sağda */
.notice-bar, .banner-consent {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: nowrap;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: linear-gradient(180deg,
              color-mix(in oklab, var(--accent) 18%, var(--surface) 82%),
              var(--surface));
  box-shadow: var(--shadow-sm);
}
.notice-bar .text, .banner-consent .text {
  font-weight: 600; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.notice-bar .actions, .banner-consent .actions {
  display: inline-flex; gap: 8px; align-items: center; margin-left: auto;
}
.notice-bar .actions .k-btn,
.banner-consent .actions .k-btn { padding: 8px 12px; border-radius: 999px; }

/* Küçük cihazlarda çok dar kalırsa tek satır yerine 2 satıra izin verelim */
@media (max-width: 420px){
  .notice-bar, .banner-consent { flex-wrap: wrap; row-gap: 8px; }
  .notice-bar .actions, .banner-consent .actions { width: 100%; justify-content: flex-end; }
}

/* 3) İLAÇ LİSTESİ: dolgu + okunurluk */
.drug-list, #drugList, [data-role="drug-list"] {
  padding: 8px 12px;                        /* iç boşluk */
  max-height: min(62svh, 640px);
  overflow: auto; overscroll-behavior: contain;
}
.drug-list .list-item { padding: 14px 18px; border-radius: 12px; }
.drug-list h3, .drug-list h4 { margin: 10px 0 6px; }

/* Scrollbar stilini hafif belirginleştir */
.drug-list::-webkit-scrollbar { width: 10px; }
.drug-list::-webkit-scrollbar-thumb {
  background: color-mix(in oklab, var(--accent) 32%, #8e9fb0);
  border-radius: 10px;
}
.drug-list { scrollbar-color: color-mix(in oklab, var(--accent) 32%, #8e9fb0) transparent; }

/* 4) “Henüz not/alarm yok” satırı taşmasın, küçük ekranda kır */
.empty, .empty-state, .notes-empty, .alarms-empty {
  white-space: normal; overflow-wrap: anywhere; word-break: break-word;
  font-size: var(--fs-14); color: var(--muted);
}
/* CONTACT — e-posta input sıkışmasını düzelt */
.page-contact input[type="email"]{
  grid-column: 1 / -1;   /* tüm sütunları kapla */
  width: 100%;
  min-block-size: 44px;  /* diğer inputlarla aynı yükseklik */
  font-size: var(--fs-16);
  padding: 12px 14px;
}

/* “Mesajınız” satırını da tek satır yap (textarea zaten full genişlik) */
.page-contact textarea{ grid-column: 1 / -1; }

/* Küçük ekranlarda zaten tek sütun; büyükte 2 sütunda kalsın */
@media (min-width: 861px){
  .page-contact .form-grid{ grid-template-columns: 1fr 1fr; }
}
.page-contact .form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.page-contact .form-grid .full { grid-column: 1 / -1; }
@media (max-width: 860px){
  .page-contact .form-grid { grid-template-columns: 1fr; }
}
.page-contact label {
  display: block;
  margin: 4px 0 6px;
  font-weight: 700;
  color: var(--ink-2, #334155);
}
.page-contact input[type="text"],
.page-contact input[type="email"],
.page-contact textarea {
  width: 100%;
  padding: 12px 14px;
  font-size: var(--fs-16);
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
}
/* Banner: metin solda, butonlar sağda yan yana */
.banner-inner{
  display:flex;
  align-items:center;
  gap:clamp(10px,2vw,16px);
}

#notify-text{
  flex:1;            /* metin alanı kalan genişliği kaplasın */
  min-width:0;       /* taşmaları engelle */
  white-space:normal;/* uzun cümle satır kırabilir */
}

.banner-actions{
  display:flex;
  gap:12px;
  margin-left:auto;  /* butonları sağa it */
  flex-wrap:wrap;    /* dar alanda butonlar kendi içinde alt satıra geçebilir */
}
.banner-actions > *{ flex:0 0 auto; white-space:nowrap; }

/* Çok dar ekranlarda gerekirse iki satıra izin ver */
@media (max-width:520px){
  .banner-inner{ flex-wrap:wrap; }
  .banner-actions{ width:100%; justify-content:flex-start; }
}
/* side kartları arasına boşluk */
.side-col .side-card + .side-card { margin-top: 12px; }
/* settings panelini biraz kompakt yap */
.side-card.settings .k-btn { min-height: 34px; }

/* -------------------- YENİ: Profesyonel İyileştirmeler -------------------- */

/* Progress Bar Stilleri */
.progress-wrapper {
  width: 100%;
}

.progress-bar {
  width: 100%;
  height: 10px;
  background: var(--bg);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.1);
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand-600) 100%);
  border-radius: 999px;
  transition: width .6s cubic-bezier(.4, 0, .2, 1);
  position: relative;
  overflow: hidden;
}

.progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(90deg,
    transparent,
    rgba(255,255,255,.3) 50%,
    transparent
  );
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Search Highlight */
.search-highlight, mark {
  background: rgba(251, 191, 36, 0.4);
  color: var(--ink);
  padding: 2px 4px;
  border-radius: 4px;
  font-weight: 600;
}

/* Smooth Transitions */
.k-card {
  transition: transform .2s ease, box-shadow .2s ease;
}

.k-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Loading Skeleton */
.skeleton {
  background: linear-gradient(90deg,
    var(--border) 25%,
    color-mix(in oklab, var(--border) 70%, white) 50%,
    var(--border) 75%
  );
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
  border-radius: var(--r-10);
}

@keyframes loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-text {
  height: 12px;
  margin-bottom: 8px;
}

.skeleton-title {
  height: 20px;
  width: 60%;
  margin-bottom: 12px;
}

/* Toast Notifications - Modern */
.toast-container {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.toast {
  padding: 12px 18px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  max-width: 90vw;
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
  backdrop-filter: blur(10px);
  pointer-events: auto;
  animation: toast-in .3s cubic-bezier(.4, 0, .2, 1);
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(20px) scale(.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.toast.toast-success {
  background: color-mix(in oklab, var(--success) 90%, white);
  border: 1px solid var(--success);
  color: var(--ink);
}

.toast.toast-error {
  background: color-mix(in oklab, var(--danger) 90%, white);
  border: 1px solid var(--danger);
  color: white;
}

.toast.toast-info {
  background: color-mix(in oklab, var(--accent) 90%, white);
  border: 1px solid var(--accent);
  color: var(--ink);
}

/* Empty State */
.empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--muted);
}

.empty-state-icon {
  font-size: 64px;
  margin-bottom: 16px;
  opacity: .5;
}

.empty-state-title {
  font-size: var(--fs-18);
  font-weight: 700;
  color: var(--ink-2);
  margin-bottom: 8px;
}

.empty-state-text {
  font-size: var(--fs-14);
  color: var(--muted);
}

/* Badge & Pills - Enhanced */
.badge-success {
  background: var(--success);
  color: var(--ink);
  border-color: var(--success);
}

.badge-warning {
  background: var(--warning);
  color: var(--ink);
  border-color: var(--warning);
}

.badge-danger {
  background: var(--danger);
  color: white;
  border-color: var(--danger);
}

.badge-info {
  background: var(--accent);
  color: var(--ink);
  border-color: var(--accent);
}

/* Floating Action Button */
.fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--brand);
  color: white;
  border: none;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  cursor: pointer;
  transition: all .2s;
  z-index: 100;
}

.fab:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}

.fab:active {
  transform: scale(.95);
}

/* Accordion/Collapsible */
.accordion-item {
  border: 1px solid var(--border);
  border-radius: var(--r-12);
  margin-bottom: 8px;
  overflow: hidden;
}

.accordion-header {
  padding: 12px 16px;
  background: var(--bg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  transition: background .2s;
}

.accordion-header:hover {
  background: color-mix(in oklab, var(--bg) 95%, var(--brand));
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s cubic-bezier(.4, 0, .2, 1);
}

.accordion-content.open {
  max-height: 1000px;
  padding: 16px;
}

/* Stats Card Enhancements */
.stat-item {
  position: relative;
  overflow: hidden;
}

.stat-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--brand), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}

.stat-item:hover::before {
  transform: scaleX(1);
}

/* Responsive Grid */
@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: 1fr !important;
  }

  .page-grid {
    grid-template-columns: 1fr !important;
  }

  .fab {
    bottom: 16px;
    right: 16px;
    width: 48px;
    height: 48px;
    font-size: 20px;
  }
}

/* Smooth Scroll */
html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Focus Improvements */
button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--r-8);
}

/* Micro Interactions */
.k-btn,
.quick-action-btn,
.item {
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.k-btn:active {
  transform: scale(.98);
}

/* ==================== Admin Panel Table Styles ==================== */

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-14);
  background: var(--surface);
  border-radius: var(--r-12);
  overflow: hidden;
}

.table thead tr {
  background: #f8fafc;
  border-bottom: 2px solid #e2e8f0;
}

.table th {
  padding: 12px 10px;
  text-align: left;
  font-weight: 700;
  color: var(--ink);
  font-size: var(--fs-14);
}

.table tbody tr {
  border-bottom: 1px solid #e2e8f0;
  transition: background 0.2s ease;
}

.table tbody tr:hover {
  background: color-mix(in oklab, var(--accent) 5%, transparent);
}

.table td {
  padding: 12px 10px;
  color: var(--ink);
}

/* Mobile responsive tables */
@media (max-width: 768px) {
  .table {
    font-size: var(--fs-12);
  }

  .table th,
  .table td {
    padding: 8px 6px;
  }

  /* Hide less important columns on mobile */
  .table th:nth-child(3),
  .table td:nth-child(3),
  .table th:nth-child(5),
  .table td:nth-child(5) {
    display: none;
  }
}

/* Admin dashboard specific styles */
.admin-shell {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
}

.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: var(--r-12);
  margin-bottom: 24px;
  box-shadow: var(--shadow-lg);
}

@media (max-width: 640px) {
  .admin-header {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }

  .admin-shell {
    padding: 12px;
  }
}

/* ==================== User Menu & Header Enhancements ==================== */

/* User menu button */
.user-menu-wrapper {
  position: relative;
}

.user-menu-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: var(--fs-14);
  font-weight: 600;
  color: var(--ink);
  transition: all 0.2s ease;
  cursor: pointer;
}

.user-menu-btn:hover {
  background: color-mix(in oklab, var(--accent) 10%, var(--surface));
  border-color: var(--brand);
}

.user-menu-btn .user-icon {
  font-size: 18px;
}

.user-menu-btn .user-email {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-menu-btn .dropdown-arrow {
  font-size: 10px;
  opacity: 0.6;
  transition: transform 0.2s ease;
}

.user-menu-btn[aria-expanded="true"] .dropdown-arrow {
  transform: rotate(180deg);
}

/* User dropdown menu */
.user-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  z-index: 100;
}

.user-dropdown[hidden] {
  display: none;
}

.user-dropdown a,
.user-dropdown button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-radius: 8px;
  font-size: var(--fs-14);
  font-weight: 600;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: background 0.2s ease;
}

.user-dropdown a:hover,
.user-dropdown button:hover {
  background: color-mix(in oklab, var(--accent) 14%, transparent);
}

.user-dropdown button#logoutBtn {
  color: var(--danger);
}

.user-dropdown button#logoutBtn:hover {
  background: color-mix(in oklab, var(--danger) 10%, transparent);
}

/* Quick search button & theme toggle */
.nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.nav-btn:hover {
  background: color-mix(in oklab, var(--accent) 10%, transparent);
  border-color: var(--border);
}

.theme-toggle {
  font-size: 20px;
}

.theme-toggle .theme-icon {
  display: block;
  transition: transform 0.3s ease;
}

.theme-toggle:hover .theme-icon {
  transform: rotate(20deg) scale(1.1);
}

.theme-toggle:active .theme-icon {
  transform: rotate(180deg) scale(0.9);
}

/* Mobile responsive */
@media (max-width:860px) {
  .user-menu-btn .user-email {
    display: none;
  }

  .user-menu-wrapper {
    width: 100%;
  }

  .user-dropdown {
    right: auto;
    left: 0;
    width: 100%;
  }

  .nav-links .user-menu-wrapper {
    order: -1; /* Put user menu at top on mobile */
  }

  .nav-btn {
    width: 100%;
    justify-content: flex-start;
    padding: 8px 10px;
  }
}

@media (max-width:480px) {
  .user-menu-btn {
    padding: 6px 10px;
  }
}

/* Print Styles */
@media print {
  .site-header,
  .site-footer,
  .side-col,
  .quick-actions-card,
  .fab,
  button,
  .user-menu-wrapper,
  .nav-btn {
    display: none !important;
  }

  .page-grid {
    grid-template-columns: 1fr !important;
  }

  .k-card {
    break-inside: avoid;
    box-shadow: none;
    border: 1px solid #ccc;
  }
}