/* ==========================================================================
   Ofis Portali - Ortak Tasarim Sistemi
   Referans: Zimmet Sistemi (zimmet-sistemi/static/css/style.css)
   Tema: Acik zeminli, yumusak indigo-mavi kurumsal yonetim paneli.

   Bu dosya, portale eklenecek her modulun (Zimmet, Gorev Takibi, IK,
   Aylik Takip, Dokumantasyon) ayni tasarim dilini paylasmasi icin tek
   kaynaktir. Renk/boyut degerleri CSS degiskeni oldugu icin tema
   (acik/koyu) degisikligi tum sayfalara otomatik yansir.
   ========================================================================== */

:root {
    --brand-primary: #5b7cfa;
    --brand-primary-dark: #3f5fe0;
    --brand-primary-light: #eef2fe;
    --brand-secondary: #8b9dfb;
    --brand-accent: #eaa94e;

    --sidebar-bg: #ffffff;
    --sidebar-text: #6b7a90;
    --sidebar-text-strong: #2d3748;
    --sidebar-active-bg: #eef2fe;
    --sidebar-active-text: #4a6cf7;
    --sidebar-hover-bg: #f5f6f9;

    --success: #2fa373;
    --success-bg: #e8f7ef;
    --info: #4a6cf7;
    --info-bg: #eef2fe;
    --warning: #c08a3e;
    --warning-bg: #fdf3e3;
    --danger: #d9636b;
    --danger-bg: #fdeeef;
    --muted-bg: #f5f6f9;

    --sidebar-width: 268px;
    --sidebar-width-collapsed: 84px;
    --navbar-height: 68px;
    --body-bg: #f7f8fa;
    --card-bg: #ffffff;
    --text-primary: #2d3748;
    --text-muted: #8a94a6;
    --border-color: #eef0f4;

    --tint-blue: #eaf3fe;
    --tone-blue: #5b9df5;
    --tint-green: #e8f7ef;
    --tone-green: #3ec48f;
    --tint-teal: #e6f6f6;
    --tone-teal: #45bdbd;
    --tint-purple: #f1eefe;
    --tone-purple: #9b8afd;
    --tint-amber: #fdf3e3;
    --tone-amber: #eaa94e;
    --tint-red: #fdeeef;
    --tone-red: #ef7f88;
    --tint-pink: #fdeef4;
    --tone-pink: #ef7fa8;
    --tint-slate: #f2f4f7;
    --tone-slate: #8a94a6;

    --avatar-bg: #5b9df5;

    --bs-primary: #5b7cfa;
    --bs-primary-rgb: 91, 124, 250;
    --bs-link-color: #5b7cfa;
    --bs-link-color-rgb: 91, 124, 250;
    --bs-link-hover-color: #3f5fe0;
    --bs-link-hover-color-rgb: 63, 95, 224;
    --bs-focus-ring-color: rgba(91, 124, 250, 0.2);
    --bs-success: #2fa373;
    --bs-success-rgb: 47, 163, 115;
    --bs-danger: #d9636b;
    --bs-danger-rgb: 217, 99, 107;
    --bs-warning: #eaa94e;
    --bs-warning-rgb: 234, 169, 78;
    --bs-info: #6b8afd;
    --bs-info-rgb: 107, 138, 253;
}

[data-theme="dark"] {
    --body-bg: #14171f;
    --card-bg: #1c2029;
    --text-primary: #e5e8ee;
    --text-muted: #98a2b3;
    --border-color: #2a2f3a;
    --muted-bg: #232833;

    --sidebar-bg: #1c2029;
    --sidebar-text: #98a2b3;
    --sidebar-text-strong: #e5e8ee;
    --sidebar-active-bg: #26314d;
    --sidebar-active-text: #8fa8ff;
    --sidebar-hover-bg: #232833;

    --success: #4fc08d;
    --success-bg: #162d24;
    --info: #8fa8ff;
    --info-bg: #1e2740;
    --warning: #e0a75c;
    --warning-bg: #2e2515;
    --danger: #e08088;
    --danger-bg: #2f1d1f;

    --tint-blue: #17293f;
    --tone-blue: #7ab5f8;
    --tint-green: #162d24;
    --tone-green: #4fc08d;
    --tint-teal: #142c2c;
    --tone-teal: #52c4c4;
    --tint-purple: #262240;
    --tone-purple: #a898ff;
    --tint-amber: #2e2515;
    --tone-amber: #e0a75c;
    --tint-red: #2f1d1f;
    --tone-red: #e08088;
    --tint-pink: #2f1e26;
    --tone-pink: #ef8fb2;
    --tint-slate: #232833;
    --tone-slate: #98a2b3;

    --bs-link-color: #8fa8ff;
    --bs-link-color-rgb: 143, 168, 255;
    --bs-link-hover-color: #b3c4ff;
    --bs-link-hover-color-rgb: 179, 196, 255;
}

* {
    box-sizing: border-box;
}

body {
    background-color: var(--body-bg);
    color: var(--text-primary);
    font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    transition: background-color 0.2s ease, color 0.2s ease;
}

a {
    color: var(--brand-primary);
}

/* ---------- Layout ---------- */
.app-wrapper {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    background-color: var(--sidebar-bg);
    border-right: 1px solid var(--border-color);
    color: var(--sidebar-text);
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    transition: margin-left 0.25s ease;
}

.sidebar::-webkit-scrollbar {
    width: 6px;
}

.sidebar::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

.sidebar-brand {
    padding: 1.5rem 1.35rem 1.15rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.sidebar-brand .brand-icon {
    width: 42px;
    height: 42px;
    border-radius: 0.75rem;
    background-color: var(--tint-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    color: var(--tone-blue);
    flex-shrink: 0;
}

.sidebar-brand .brand-title {
    font-weight: 700;
    font-size: 1.02rem;
    color: var(--sidebar-text-strong);
    line-height: 1.15;
    letter-spacing: 0.02em;
}

.sidebar-brand .brand-subtitle {
    font-size: 0.72rem;
    color: var(--text-muted);
}

.sidebar-nav {
    flex: 1;
    padding: 0.25rem 0.9rem 1rem;
}

.sidebar .nav-link {
    color: var(--sidebar-text);
    padding: 0.65rem 0.9rem;
    margin-bottom: 0.2rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-radius: 0.7rem;
    font-size: 0.9rem;
    font-weight: 500;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.sidebar .nav-link i {
    font-size: 1.05rem;
    width: 20px;
    text-align: center;
}

.sidebar .nav-link:hover {
    background-color: var(--sidebar-hover-bg);
    color: var(--sidebar-text-strong);
}

.sidebar .nav-link.active {
    background-color: var(--sidebar-active-bg);
    color: var(--sidebar-active-text);
    font-weight: 600;
}

.sidebar .nav-link .badge {
    margin-left: auto;
}

.sidebar .nav-section-title {
    text-transform: uppercase;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    font-weight: 600;
    color: var(--text-muted);
    padding: 1.1rem 0.9rem 0.4rem;
}

/* ---------- Sidebar accordion (modul alt menuleri) ---------- */
.nav-link-toggle {
    cursor: pointer;
}

.nav-toggle-caret {
    font-size: 0.8rem;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.nav-link-toggle[aria-expanded="true"] .nav-toggle-caret {
    transform: rotate(180deg);
}

.nav-submenu {
    padding: 0.15rem 0 0.4rem 0.6rem;
    margin-left: 0.65rem;
    border-left: 2px solid var(--border-color);
}

.sidebar .nav-sublink {
    font-size: 0.84rem;
    padding: 0.5rem 0.8rem;
}

.sidebar .nav-sublink i {
    font-size: 0.92rem;
}

.app-wrapper.sidebar-collapsed .nav-submenu,
.app-wrapper.sidebar-collapsed .nav-toggle-caret {
    display: none !important;
}

.sidebar-user {
    margin: 0.75rem;
    padding: 0.75rem;
    border-radius: 0.85rem;
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.sidebar-user .avatar-circle {
    background-color: var(--brand-primary);
    color: #fff;
}

.sidebar-user .user-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--sidebar-text-strong);
    margin-bottom: 0.1rem;
}

.sidebar-user .user-role {
    font-size: 0.72rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.sidebar-user .user-role .status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--tone-green);
    display: inline-block;
}

.main-content {
    flex: 1;
    min-width: 0;
}

.topbar {
    height: var(--navbar-height);
    background: var(--card-bg);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
    position: sticky;
    top: 0;
    z-index: 1020;
    gap: 1rem;
}

.topbar-search {
    flex: 1;
    max-width: 380px;
}

.topbar-search .input-group-text {
    background-color: var(--muted-bg);
    border: 1px solid var(--border-color);
    border-right: none;
    color: var(--text-muted);
    border-radius: 2rem 0 0 2rem;
    padding-left: 1rem;
}

.topbar-search input {
    background-color: var(--muted-bg);
    border: 1px solid var(--border-color);
    border-left: none;
    border-radius: 0 2rem 2rem 0;
}

.topbar-search input:focus {
    box-shadow: none;
    border-color: var(--border-color);
    background-color: var(--card-bg);
}

.page-content {
    padding: 1.75rem;
}

@media (min-width: 1921px) {
    .page-content {
        max-width: 1800px;
        margin: 0 auto;
    }
}

/* ---------- Kartlar ---------- */
.card {
    border: none;
    border-radius: 1rem;
    box-shadow: 0 1px 3px rgba(45, 55, 72, 0.04), 0 6px 20px rgba(45, 55, 72, 0.04);
}

.card-header {
    background-color: var(--card-bg);
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
    border-radius: 1rem 1rem 0 0 !important;
}

.card {
    background-color: var(--card-bg);
    color: var(--text-primary);
}

/* Tum .card-body varyantlari (genel .card, .module-card, .hero-stat-card
   icindekiler dahil) TEK bu kuraldan gelir — border-radius: 1rem, Bootstrap
   "rounded-4" ile ayni. Alt secicilerde (orn. .module-card .card-body,
   .hero-stat-card .card-body) yalniz padding degisir, radius HER YERDE
   aynidir, ayrica tekrar tanimlanmaz. */
.card-body {
    background-color: var(--card-bg);
    color: var(--text-primary);
    border-radius: 1rem;
}

/* Şablonlarda kullanılan Bootstrap .bg-white / .text-dark / .bg-light
   sabitleri koyu temada değişmediği için kart altlıklarını ve linkleri
   tema degiskenlerine baglar. */
.card-footer.bg-white,
.card-footer {
    background-color: var(--card-bg) !important;
    color: var(--text-primary);
    border-top: 1px solid var(--border-color);
}

.auth-card.bg-white {
    background-color: var(--card-bg) !important;
}

.bg-light-subtle {
    background-color: var(--muted-bg) !important;
    color: var(--text-primary);
}

.bg-light {
    background-color: var(--muted-bg) !important;
    color: var(--text-primary) !important;
}

.text-dark {
    color: var(--text-primary) !important;
}

/* ---------- Modul kartlari (Dashboard) ---------- */
.module-card {
    /* Kenarda ince bir "katman" (cerceve) — kartin border-radius'unu otomatik
       takip eder, bu yuzden kose kesinlikle sivri/kesin durmaz, kartin kendisi
       kadar yumusak kalir. */
    border: 1px solid rgba(45, 55, 72, 0.07);
    border-radius: 2.5rem; /* ~40px — sadece dis kapsayici; ic ikon kutusu (.module-icon) ayri kuraldan gelir, degismez */
    box-shadow: 0 1px 3px rgba(45, 55, 72, 0.04), 0 6px 20px rgba(45, 55, 72, 0.04);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    text-decoration: none;
    display: block;
    height: 100%;
}

.module-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(45, 55, 72, 0.06), 0 12px 28px rgba(45, 55, 72, 0.08);
}

.module-card .card-body {
    padding: 1.4rem;
}

.module-card .module-icon {
    width: 48px;
    height: 48px;
    border-radius: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.module-card .module-name {
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.15rem;
}

.module-card .module-description {
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.45;
}

/* ---------- Istatistik kartlari (hero) ---------- */
/*
 * Kok neden (koyu ust golge/seritin nedeni), kalici olarak duzeltildi:
 * 1) templates/zimmet/dashboard.html'de .card-body'ye Bootstrap'in "rounded-5"
 *    (2rem) yardimci sinifi uygulanmisti — bu, dis kutunun KENDI
 *    border-radius'undan (eskiden 1rem) cok daha agresifti. Ic icerik disariya
 *    gore daha keskin kirpildigi icin dis kutunun box-shadow'u ust koselerde
 *    "sizarak" koyu bir hale/golge izlenimi yaratiyordu. rounded-5 tamamen
 *    kaldirildi; tek dogruluk kaynagi artik bu dosyadaki border-radius.
 * 2) Her kartta hicbir CSS kurali olmayan (tanimsiz) dekoratif
 *    <svg class="stat-spark">...</svg> cizgileri vardi. Boyut/konum icin
 *    hicbir stil tanimlanmadigindan tarayici varsayilan degistirilebilir
 *    eleman boyutlandirmasini uyguluyor, stroke="currentColor" da koyu metin
 *    rengini kullaniyordu — sonuc beklenmedik koyu bir sekildi. Bu SVG'ler
 *    islevsizdi (hicbir gercek veriyi temsil etmiyordu) ve template'den
 *    TAMAMEN silindi.
 */
.hero-stat-card {
    background-color: #ffffff !important;
    border: none;
    border-radius: 1.375rem; /* ~22px — yumusak/modern kose */
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    transition: box-shadow 0.15s ease;
}

.hero-stat-card:hover {
    box-shadow: 0 2px 6px rgba(16, 24, 40, 0.08);
}

.hero-stat-card .card-body {
    padding: 0.85rem 0.9rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hero-stat-card .card-body > .d-flex {
    gap: 0.55rem;
}

.hero-stat-card .stat-icon {
    width: 34px;
    height: 34px;
    border-radius: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.hero-stat-card .stat-value {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.hero-stat-card .stat-label {
    font-size: 0.7rem;
    line-height: 1.2;
    color: var(--text-muted);
    font-weight: 500;
}

/* Ikon rozetleri: pastel tint zemin + ayni ailenin doygun tonu */
.icon-bg-purple { background-color: var(--tint-purple); color: var(--tone-purple); }
.icon-bg-blue { background-color: var(--tint-blue); color: var(--tone-blue); }
.icon-bg-green { background-color: var(--tint-green); color: var(--tone-green); }
.icon-bg-orange, .icon-bg-amber { background-color: var(--tint-amber); color: var(--tone-amber); }
.icon-bg-red { background-color: var(--tint-red); color: var(--tone-red); }
.icon-bg-teal { background-color: var(--tint-teal); color: var(--tone-teal); }
.icon-bg-pink { background-color: var(--tint-pink); color: var(--tone-pink); }
.icon-bg-slate { background-color: var(--tint-slate); color: var(--tone-slate); }

/* ---------- Tablolar ---------- */
.table-modern {
    color: var(--text-primary);
}

.table-modern thead {
    background-color: var(--muted-bg);
}

.table-modern thead th {
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    border-bottom: none;
    font-weight: 700;
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
}

.table-modern tbody tr {
    border-color: var(--border-color);
    font-size: 11px;
}

.table-modern tbody tr:hover {
    background-color: var(--muted-bg);
}

.table-modern td {
    vertical-align: middle;
}

[data-theme="dark"] .list-group-item {
    background-color: var(--card-bg);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.avatar-circle {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    background-color: var(--avatar-bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.85rem;
    color: #fff;
    flex-shrink: 0;
}

/* ---------- Sifre kurallari kutusu ----------
   Django'nun sifre dogrulayici yardim metni <ul> olarak gelir; sade bir
   bilgilendirme kutusuna donusturulur. */
.password-rules {
    background-color: var(--muted-bg);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    padding: 0.85rem 1rem;
}

.password-rules-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.35rem;
}

.password-rules ul {
    margin: 0;
    padding-left: 1.1rem;
}

.password-rules li {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.5;
}

/* Bildirim listesindeki "okunmadi" noktasi. */
.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 0.55rem;
}

/* ---------- Pill Badge ---------- */
.pill-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.32em 0.85em;
    border-radius: 2rem;
    font-size: 0.76rem;
    font-weight: 600;
}

.pill-success { background-color: var(--success-bg); color: var(--success); }
.pill-info { background-color: var(--info-bg); color: var(--info); }
.pill-warning { background-color: var(--warning-bg); color: var(--warning); }
.pill-danger { background-color: var(--danger-bg); color: var(--danger); }
.pill-muted { background-color: var(--muted-bg); color: var(--text-muted); }

/* ---------- Yemek Sistemi: yemek etiketleri ---------- */
.meal-dish-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.meal-dish-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4em 0.9em;
    border-radius: 0.9rem;
    background-color: var(--muted-bg);
    font-size: 0.65rem;
    font-weight: 500;
}

/* ---------- Sayfalama ---------- */
.pagination .page-link {
    border: none;
    border-radius: 50% !important;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 3px;
    color: var(--text-muted);
    background-color: var(--card-bg);
    box-shadow: 0 1px 3px rgba(45, 55, 72, 0.06);
}

.pagination .page-item.active .page-link {
    background-color: var(--brand-primary);
    color: #fff;
    box-shadow: 0 4px 10px rgba(91, 124, 250, 0.3);
}

.pagination .page-item.disabled .page-link {
    opacity: 0.4;
    box-shadow: none;
}

/* ---------- Butonlar ---------- */
.btn-primary {
    --bs-btn-bg: var(--brand-primary);
    --bs-btn-border-color: var(--brand-primary);
    --bs-btn-hover-bg: var(--brand-primary-dark);
    --bs-btn-hover-border-color: var(--brand-primary-dark);
    --bs-btn-active-bg: var(--brand-primary-dark);
    --bs-btn-active-border-color: var(--brand-primary-dark);
    --bs-btn-disabled-bg: var(--brand-primary);
    --bs-btn-disabled-border-color: var(--brand-primary);
}

.btn-outline-primary {
    --bs-btn-color: var(--brand-primary);
    --bs-btn-border-color: var(--brand-primary);
    --bs-btn-hover-bg: var(--brand-primary);
    --bs-btn-hover-border-color: var(--brand-primary);
    --bs-btn-active-bg: var(--brand-primary-dark);
    --bs-btn-active-border-color: var(--brand-primary-dark);
    --bs-btn-disabled-color: var(--brand-primary);
    --bs-btn-disabled-border-color: var(--brand-primary);
}

.alert-success {
    --bs-alert-bg: var(--success-bg);
    --bs-alert-color: var(--success);
    --bs-alert-border-color: rgba(47, 163, 115, 0.2);
}

.alert-info {
    --bs-alert-bg: var(--info-bg);
    --bs-alert-color: var(--info);
    --bs-alert-border-color: rgba(91, 124, 250, 0.2);
}

.alert-warning {
    --bs-alert-bg: var(--warning-bg);
    --bs-alert-color: var(--warning);
    --bs-alert-border-color: rgba(234, 169, 78, 0.25);
}

.alert-danger {
    --bs-alert-bg: var(--danger-bg);
    --bs-alert-color: var(--danger);
    --bs-alert-border-color: rgba(217, 99, 107, 0.2);
}

/* ---------- Giris sayfasi ---------- */
.auth-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
    padding: 1.5rem;
}

.auth-card {
    max-width: 420px;
    width: 100%;
    border-radius: 1.1rem;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(45, 55, 72, 0.2);
}

.auth-card .auth-header {
    background-color: var(--brand-primary);
    color: #fff;
    padding: 2rem 2rem 1.5rem;
    text-align: center;
}

.auth-card .auth-body {
    padding: 2rem;
    background-color: var(--card-bg);
}

/* ---------- Yardimci siniflar ---------- */
.text-brand {
    color: var(--brand-primary);
}

.bg-brand {
    background-color: var(--brand-primary) !important;
}

.section-title {
    font-weight: 700;
    color: var(--text-primary);
}

/* ---------- Sidebar daraltma (masaustu) ---------- */
.app-wrapper.sidebar-collapsed .sidebar {
    width: var(--sidebar-width-collapsed);
    min-width: var(--sidebar-width-collapsed);
}

.app-wrapper.sidebar-collapsed .sidebar-brand .brand-title,
.app-wrapper.sidebar-collapsed .sidebar-brand .brand-subtitle,
.app-wrapper.sidebar-collapsed .nav-link .nav-label,
.app-wrapper.sidebar-collapsed .nav-section-title,
.app-wrapper.sidebar-collapsed .sidebar-user .user-name,
.app-wrapper.sidebar-collapsed .sidebar-user .user-role,
.app-wrapper.sidebar-collapsed .nav-link .badge {
    display: none !important;
}

.app-wrapper.sidebar-collapsed .sidebar-brand {
    justify-content: center;
    padding: 1.5rem 0.5rem;
}

.app-wrapper.sidebar-collapsed .nav-link {
    justify-content: center;
    padding: 0.7rem 0.5rem;
}

.app-wrapper.sidebar-collapsed .sidebar-user {
    justify-content: center;
}

/* ---------- Hafif giris animasyonu ---------- */
.fade-in-content {
    animation: fadeInUp 0.35s ease both;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---------- Dark mode: form ve dropdown uyumu ---------- */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] .input-group-text {
    background-color: var(--muted-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background-color: var(--muted-bg);
    color: var(--text-primary);
}

[data-theme="dark"] .dropdown-menu {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .dropdown-item {
    color: var(--text-primary);
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
    background-color: var(--muted-bg);
    color: var(--text-primary);
}

[data-theme="dark"] .table {
    color: var(--text-primary);
    --bs-table-bg: var(--card-bg);
    --bs-table-color: var(--text-primary);
    --bs-table-striped-bg: var(--muted-bg);
    --bs-table-striped-color: var(--text-primary);
    --bs-table-hover-bg: var(--muted-bg);
    --bs-table-hover-color: var(--text-primary);
    --bs-table-border-color: var(--border-color);
}

/* type="file" input'unun OS-native "Dosya Sec" butonu arka plani CSS
   background-color ile boyanamaz (tarayici kisiti); metin/cerceve rengi
   webkit pseudo-element'i ile ayarlanir ki koyu temada okunabilsin. */
[data-theme="dark"] input[type="file"].form-control::file-selector-button,
[data-theme="dark"] input[type="file"].form-control::-webkit-file-upload-button {
    background-color: var(--card-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .btn-light {
    background-color: var(--muted-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
}

@media (max-width: 991.98px) {
    .sidebar {
        position: fixed;
        z-index: 1030;
        margin-left: calc(-1 * var(--sidebar-width));
    }

    .sidebar.show {
        margin-left: 0;
    }

    .page-content {
        padding: 1rem;
    }

    .topbar-search {
        display: none;
    }
}