/* ══════════════════════════════════════════════════════════════════════════
   odak-theme.css — Merkezi Aydınlık / Karanlık Tema & Mobil Uyumluluk
   Bu dosya admin/header.php ve isletme-panel/header.php tarafından
   paylaşılan ortak tema kurallarını içerir.
   ══════════════════════════════════════════════════════════════════════════ */

/* Spinner animation */
@keyframes odak-spin { to { transform: rotate(360deg); } }
.animate-spin { animation: odak-spin 1s linear infinite; }

/* ── Scrollbar (Global) ───────────────────────────────────────────────── */
html,
body {
    overflow-y: auto;
}
* {
    scrollbar-width: thin;
    scrollbar-color: #4b5563 rgba(0,0,0,.06);
}
html.dark *,
body.dark *,
.dark * {
    scrollbar-color: #6b7280 rgba(255,255,255,.06);
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: rgba(0,0,0,.06); }
::-webkit-scrollbar-thumb { background: #4b5563; border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: #374151; }

html.dark ::-webkit-scrollbar-thumb,
body.dark ::-webkit-scrollbar-thumb,
.dark ::-webkit-scrollbar-thumb { background: #6b7280; }
html.dark ::-webkit-scrollbar-track,
body.dark ::-webkit-scrollbar-track,
.dark ::-webkit-scrollbar-track { background: rgba(255,255,255,.06); }
html.dark ::-webkit-scrollbar-thumb:hover,
body.dark ::-webkit-scrollbar-thumb:hover,
.dark ::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* ── Sidebar — yavaş, cubic-bezier animasyon ───────────────────── */
#admin-sidebar {
    transition: width .4s cubic-bezier(.4,0,.2,1),
                min-width .4s cubic-bezier(.4,0,.2,1),
                opacity .35s ease;
    min-width: 260px;
    width: 260px;
}
#admin-sidebar.collapsed {
    width: 0 !important;
    min-width: 0 !important;
    opacity: 0;
    overflow: hidden;
    border-right: none;
    pointer-events: none;
}

/* ── Mini sidebar strip (kapalıyken sol şerit) ──────────────── */
#sidebar-mini-strip {
    width: 0;
    min-width: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transition: width .4s cubic-bezier(.4,0,.2,1),
                min-width .4s cubic-bezier(.4,0,.2,1),
                opacity .35s ease;
}
#sidebar-mini-strip.visible {
    width: 48px;
    min-width: 48px;
    opacity: 1;
    pointer-events: auto;
}

/* ── Sidebar toggle ikonu — tasarım diline uygun ───────────────── */
#sidebar-toggle-icon {
    transition: transform .4s cubic-bezier(.4,0,.2,1), opacity .3s ease;
}

/* ── Mobil dropdown ────────────────────────────────────────────── */
#mobile-admin-menu {
    overflow-y: auto;
    transition: max-height .4s cubic-bezier(.4,0,.2,1), opacity .35s ease;
    max-height: 0;
    opacity: 0;
}
#mobile-admin-menu.open { max-height: 85vh; opacity: 1; }
@media (min-width: 768px) {
    body:has(#admin-sidebar) {
        height: 100dvh !important;
        overflow: hidden !important;
    }

    body:has(#admin-sidebar) > .block.min-h-screen,
    body:has(#admin-sidebar) .min-h-screen.min-w-0 {
        height: 100dvh !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    body:has(#admin-sidebar) main {
        min-height: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior-y: contain;
    }

    body:has(.settings-page) main {
        padding-bottom: 32px !important;
        scroll-padding-bottom: 32px;
    }

    .settings-page {
        min-height: 0;
        overflow-anchor: none;
    }

    #admin-sidebar {
        position: fixed !important;
        left: 0;
        top: 0;
        bottom: 0;
        height: 100dvh !important;
        z-index: 45;
    }
    #admin-sidebar:not(.collapsed) + .sidebar-fixed-spacer {
        width: 260px;
        min-width: 260px;
    }
    #admin-sidebar.collapsed + .sidebar-fixed-spacer {
        width: 0;
        min-width: 0;
    }
}
@media (max-width: 767px) {
    main {
        padding-top: 78px !important;
    }
    #mobile-admin-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 70 !important;
    }
    #mobile-admin-menu {
        position: fixed;
        left: 0;
        right: 0;
        top: 64px;
        z-index: 65;
        max-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        box-shadow: 0 18px 35px rgba(0,0,0,.18);
    }
    #mobile-admin-menu.open {
        max-height: calc(100dvh - 64px);
    }
}

/* ── Modal overlaylar ──────────────────────────────────────────── */
.modal-overlay {
    position: fixed;
    inset: -10px;
    background: #000; /* Solid fallback */
    background: rgba(0,0,0,.75);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    z-index: 100; display: none;
    align-items: center; justify-content: center;
}
.modal-overlay.active { display: flex; }

.modal-box {
    background: #fff;
    border: 1px solid rgba(0,0,0,.1);
    border-radius: 22px;
    max-width: 580px; width: 92%;
    max-height: 92vh; overflow-y: auto;
    padding: 2rem; position: relative;
    animation: modalIn .22s cubic-bezier(.34,1.3,.64,1);
    outline: none !important;
}
.dark .modal-box {
    background: rgba(8,8,8,.98);
    border: 1px solid rgba(255,255,255,.12);
}
@keyframes modalIn {
    from { opacity: 0; transform: translateY(16px) scale(.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Onay (confirm) popup — browser alert yerini alır ─────────── */
#confirm-overlay {
    position: fixed; 
    inset: -10px;
    background: rgba(0,0,0,.8);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 999; display: none;
    align-items: center; justify-content: center;
}
#confirm-overlay.active { display: flex; }
#confirm-box {
    background: #fff;
    border: 1px solid rgba(0,0,0,.1);
    border-radius: 22px;
    max-width: 400px; width: 90%;
    padding: 2rem;
    animation: modalIn .22s cubic-bezier(.34,1.3,.64,1);
    text-align: center;
}
.dark #confirm-box {
    background: #000;
    border: 1px solid rgba(255,255,255,.12);
}

/* ── Bileşen sınıfları ─────────────────────────────────────────── */
.admin-input {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 10px 16px;
    color: #000000; font-size: 14px;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color .2s;
}
input.admin-input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select.admin-input {
    height: 46px;
    min-height: 46px;
}
input.admin-input.user-search-input {
    height: 28px !important;
    min-height: 28px !important;
    line-height: 16px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}
input.admin-input[type="date"],
input.admin-input[type="time"],
input.admin-input[type="month"],
input.admin-input[type="datetime-local"],
input.admin-input[data-odak-mobile-input="1"] {
    line-height: 24px;
    -webkit-appearance: none;
    appearance: none;
}
input.admin-input[type="date"]::-webkit-date-and-time-value,
input.admin-input[type="time"]::-webkit-date-and-time-value,
input.admin-input[type="month"]::-webkit-date-and-time-value,
input.admin-input[type="datetime-local"]::-webkit-date-and-time-value {
    min-height: 24px;
    line-height: 24px;
    text-align: left;
}
.dark .admin-input { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); color: #fff; -webkit-text-fill-color: #fff; }
.admin-input::placeholder { color: #9ca3af; }
.dark .admin-input::placeholder { color: #374151; -webkit-text-fill-color: #374151; }
.admin-input:focus { border-color: #d1d5db; }
.dark .admin-input:focus { border-color: rgba(255,255,255,.3); }
/* iOS Safari autofill/autocomplete fix — prevent white text on white bg */
.admin-input:-webkit-autofill,
.admin-input:-webkit-autofill:hover,
.admin-input:-webkit-autofill:focus {
    -webkit-text-fill-color: #000000;
    -webkit-box-shadow: 0 0 0px 1000px #f9fafb inset;
    transition: background-color 5000s ease-in-out 0s;
}
.dark .admin-input:-webkit-autofill,
.dark .admin-input:-webkit-autofill:hover,
.dark .admin-input:-webkit-autofill:focus {
    -webkit-text-fill-color: #fff;
    -webkit-box-shadow: 0 0 0px 1000px rgba(255,255,255,.04) inset;
    transition: background-color 5000s ease-in-out 0s;
}
body.light .admin-input:-webkit-autofill,
body.light .admin-input:-webkit-autofill:hover,
body.light .admin-input:-webkit-autofill:focus {
    -webkit-text-fill-color: #1d1d1f;
    -webkit-box-shadow: 0 0 0px 1000px #ffffff inset;
    transition: background-color 5000s ease-in-out 0s;
}
/* ── Modern Select Dropdown ─────────────────────────── */
select.admin-input {
    min-height: 46px;
    padding: 10px 46px 10px 16px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: #f9fafb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center / 16px 16px;
    font-weight: 500;
    transition: border-color .2s, background .2s;
}
select.admin-input:hover { border-color: #9ca3af; background-color: #ffffff; }
select.admin-input:focus { border-color: #9ca3af; }
.dark select.admin-input {
    background: rgba(255,255,255,.05) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%23d1d5db' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center / 16px 16px;
    border-color: rgba(255,255,255,.12);
}
.dark select.admin-input:hover { border-color: rgba(255,255,255,.28); background-color: rgba(255,255,255,.08); }
.dark select.admin-input:focus { border-color: rgba(255,255,255,.32); }
select.admin-input::-ms-expand { display: none; }
select.admin-input,
select.admin-input option,
select.admin-input optgroup {
    color-scheme: light;
}
select.admin-input option,
select.admin-input optgroup {
    background: #ffffff !important;
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    font-weight: 500;
    opacity: 1 !important;
}
.dark select.admin-input,
.dark select.admin-input option,
.dark select.admin-input optgroup {
    color-scheme: dark;
}
.dark select.admin-input option,
.dark select.admin-input optgroup {
    background: #0d0d0d !important;
    color: #f9fafb !important;
    -webkit-text-fill-color: #f9fafb !important;
}
html.dark .admin-input,
body.dark .admin-input,
.dark .admin-input {
    background-color: rgba(255,255,255,.04) !important;
    border-color: rgba(255,255,255,.12) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
html.dark select.admin-input,
body.dark select.admin-input,
.dark select.admin-input {
    background-color: rgba(255,255,255,.05) !important;
    border-color: rgba(255,255,255,.12) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    color-scheme: dark;
}
html.dark select.admin-input option,
html.dark select.admin-input optgroup,
body.dark select.admin-input option,
body.dark select.admin-input optgroup,
.dark select.admin-input option,
.dark select.admin-input optgroup {
    background-color: #0d0d0d !important;
    color: #f9fafb !important;
    -webkit-text-fill-color: #f9fafb !important;
}
html.dark select option,
html.dark select optgroup,
body.dark select option,
body.dark select optgroup,
.dark select option,
.dark select optgroup {
    background-color: #111113 !important;
    color: #f9fafb !important;
    -webkit-text-fill-color: #f9fafb !important;
    opacity: 1 !important;
}
html.dark select option:checked,
body.dark select option:checked,
.dark select option:checked {
    background-color: #ffffff !important;
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}
html.dark select option:disabled,
body.dark select option:disabled,
.dark select option:disabled {
    background-color: #111113 !important;
    color: #6b7280 !important;
    -webkit-text-fill-color: #6b7280 !important;
}
html.dark input.admin-input[type="date"],
html.dark input.admin-input[type="time"],
html.dark input.admin-input[type="month"],
html.dark input.admin-input[type="datetime-local"],
body.dark input.admin-input[type="date"],
body.dark input.admin-input[type="time"],
body.dark input.admin-input[type="month"],
body.dark input.admin-input[type="datetime-local"],
.dark input.admin-input[type="date"],
.dark input.admin-input[type="time"],
.dark input.admin-input[type="month"],
.dark input.admin-input[type="datetime-local"] {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    color-scheme: dark;
}
html.dark input.admin-input[type="date"]::-webkit-calendar-picker-indicator,
html.dark input.admin-input[type="time"]::-webkit-calendar-picker-indicator,
html.dark input.admin-input[type="month"]::-webkit-calendar-picker-indicator,
html.dark input.admin-input[type="datetime-local"]::-webkit-calendar-picker-indicator,
body.dark input.admin-input[type="date"]::-webkit-calendar-picker-indicator,
body.dark input.admin-input[type="time"]::-webkit-calendar-picker-indicator,
body.dark input.admin-input[type="month"]::-webkit-calendar-picker-indicator,
body.dark input.admin-input[type="datetime-local"]::-webkit-calendar-picker-indicator,
.dark input.admin-input[type="date"]::-webkit-calendar-picker-indicator,
.dark input.admin-input[type="time"]::-webkit-calendar-picker-indicator,
.dark input.admin-input[type="month"]::-webkit-calendar-picker-indicator,
.dark input.admin-input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: .86;
}

.admin-card {
    border-radius: 18px;
    border: 1px solid #e5e7eb;
    background: #fff;
    padding: 1.25rem;
    box-shadow: none;
}
.dark .admin-card {
    border-color: rgba(255,255,255,.08);
    background: rgba(255,255,255,.02);
    box-shadow: none;
}

/* index.php ikincil CTA */
.admin-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    border-radius: 9999px;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    padding: 8px 18px; font-size: 12px;
    font-weight: 600; color: #4b5563;
    text-transform: uppercase; letter-spacing: .1em;
    transition: all .2s; cursor: pointer;
}
.admin-btn:hover { border-color: #d1d5db; background: #e5e7eb; color: #000000; }
.dark .admin-btn { border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.04); color: #e5e7eb; }
.dark .admin-btn:hover { border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.08); color: #fff; }

/* index.php "Teklif Al" butonu */
.admin-btn-primary {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    border-radius: 9999px; background: #000000;
    padding: 10px 20px; font-size: 12px;
    font-weight: 700; text-transform: uppercase;
    letter-spacing: .2em; color: #fff;
    transition: background .2s, transform .15s; cursor: pointer;
}
.admin-btn-primary:hover { background: #3a3a3c; transform: scale(1.02); }
.dark .admin-btn-primary { background: #fff; color: #000; }
.dark .admin-btn-primary:hover { background: #e5e7eb; }
.admin-icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; min-width: 38px; border-radius: 9999px;
    border: 1px solid #e5e7eb; background: #f9fafb; color: #4b5563;
    transition: border-color .2s, background .2s, color .2s, transform .15s;
}
.admin-icon-btn:hover { border-color: #d1d5db; background: #e5e7eb; color: #000000; transform: scale(1.03); }
.admin-icon-btn.danger { color: #ef4444; border-color: rgba(239,68,68,.25); background: rgba(239,68,68,.08); }
.admin-icon-btn.danger:hover { background: rgba(239,68,68,.14); border-color: rgba(239,68,68,.45); }
.dark .admin-icon-btn { border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.04); color: #e5e7eb; }
.dark .admin-icon-btn:hover { border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.08); color: #fff; }
.customer-card-actions .customer-card-delete-form {
    display: flex;
}
.customer-card-actions .customer-card-icon {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    padding: 0 !important;
    border-radius: 9999px !important;
    flex-shrink: 0;
}
.customer-history-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
}
.customer-history-tabs button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    border-radius: 9999px;
    padding: 8px 12px;
    color: #6b7280;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    transition: background .2s, color .2s;
}
.customer-history-tabs button span {
    display: inline-flex;
    min-width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: rgba(0,0,0,.06);
    padding: 0 6px;
    font-size: 10px;
}
.customer-history-tabs button.active {
    background: #000000;
    color: #ffffff;
}
.customer-history-tabs button.active span {
    background: rgba(255,255,255,.18);
    color: #ffffff;
}
.dark .customer-history-tabs button {
    color: #9ca3af;
}
.dark .customer-history-tabs button span {
    background: rgba(255,255,255,.08);
}
.dark .customer-history-tabs button.active {
    background: #ffffff;
    color: #000000;
}
.dark .customer-history-tabs button.active span {
    background: rgba(0,0,0,.1);
    color: #000000;
}
.grid > :is(.admin-btn, .admin-btn-primary, input.admin-input, select.admin-input) {
    width: 100%;
}
.grid > :is(.admin-btn, .admin-btn-primary) {
    min-height: 46px;
}

/* Özel dosya seç butonu */
.file-input-wrapper { position: relative; }
.file-input-wrapper input[type="file"] {
    position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: 0; cursor: pointer; z-index: 2;
}
.file-input-btn {
    display: flex; align-items: center; gap: 8px;
    width: 100%; min-width: 0; overflow: hidden; padding: 11px 16px;
    background: rgba(255,255,255,.03);
    border: 1px dashed rgba(255,255,255,.15);
    border-radius: 12px; color: #6b7280;
    font-size: 13px; transition: all .2s; cursor: pointer;
}
.file-input-btn i { flex-shrink: 0; }
.file-input-btn .file-name {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.file-input-btn:hover { border-color: rgba(255,255,255,.4); color: #d1d5db; }

/* Modern multi-select */
.user-checkbox-list { display: flex; flex-direction: column; gap: 5px; max-height: 160px; overflow-y: auto; }
.user-checkbox-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; border-radius: 10px;
    border: 1px solid rgba(255,255,255,.07);
    background: rgba(255,255,255,.02);
    cursor: pointer; transition: all .15s; user-select: none;
}
.user-checkbox-item:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); }
.user-checkbox-item.selected { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.25); }
.user-checkbox-item input[type="checkbox"] { display: none; }
.user-check-dot {
    width: 18px; height: 18px; border-radius: 5px;
    border: 1.5px solid rgba(255,255,255,.2);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; transition: all .15s;
}
.user-checkbox-item.selected .user-check-dot { background: #fff; border-color: #fff; }
.user-check-dot i { font-size: 10px; color: #000; display: none; }
.user-checkbox-item.selected .user-check-dot i { display: block; }
input[type="checkbox"]:not(.hidden):not(.sr-only) { accent-color: #fff; }
.peer:checked ~ .peer-checked\:bg-green-500,
.peer:checked ~ .peer-checked\:bg-green-600 { background: #fff !important; }
.peer:checked ~ .peer-checked\:text-green-400,
.peer:checked ~ .peer-checked\:text-green-500 { color: #fff !important; }

/* ── Light Mode — Temel Yüzeyler ─────────────────────────────────────── */
body.light { background: #f5f5f7 !important; color: #000000 !important; }
body.light main { background: #f5f5f7; }
body.light header { background: rgba(255,255,255,.92) !important; border-color: rgba(0,0,0,.08) !important; }

/* Sidebar & menü */
body.light #admin-sidebar,
body.light #sidebar-mini-strip { background: #fff !important; border-color: rgba(0,0,0,.08) !important; }
body.light #admin-sidebar a,
body.light #admin-sidebar p,
body.light #admin-sidebar span { color: #6e6e73; }
body.light #admin-sidebar .panel-avatar-initial,
body.light #mobile-admin-menu .panel-avatar-initial {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}
body.dark #admin-sidebar .panel-avatar-initial,
body.dark #mobile-admin-menu .panel-avatar-initial,
.dark #admin-sidebar .panel-avatar-initial,
.dark #mobile-admin-menu .panel-avatar-initial {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
body.light #admin-sidebar a:hover { color: #1d1d1f; background: rgba(0,0,0,.04); }
body.light #admin-sidebar a.bg-white,
body.light #mobile-admin-menu a.bg-white {
    background: #ffffff !important;
    color: #1d1d1f !important;
}
body.light #mobile-admin-menu { background: #ffffff !important; border-color: rgba(0,0,0,.08) !important; }

/* Dinamik Menü Aktif */
body.light .menu-active { background-color: #1d1d1f !important; color: #ffffff !important; }
body.light .menu-active * { color: #ffffff !important; }

/* ── Light Mode — Kartlar ─────────────────────────────────────────────── */
body.light .admin-card {
    background-color: #ffffff !important;
    border-color: rgba(0,0,0,.10) !important;
}
body.light .admin-card .bg-gray-50,
body.light .admin-card .bg-white,
body.light .admin-card [class*="bg-white/"],
body.light .modal-box .bg-gray-50,
body.light .modal-box .bg-white,
body.light .modal-box [class*="bg-white/"],
body.light .rounded-2xl.bg-gray-50,
body.light .rounded-xl.bg-gray-50 {
    background-color: #f5f5f7 !important;
}
body.light .admin-card .border-gray-200,
body.light .modal-box .border-gray-200,
body.light .rounded-2xl.border-gray-200,
body.light .rounded-xl.border-gray-200 {
    border-color: rgba(0,0,0,.14) !important;
}
body.light main > .rounded-2xl.bg-gray-50,
body.light main > .rounded-xl.bg-gray-50,
body.light main .grid > .rounded-2xl.bg-gray-50,
body.light main .grid > .rounded-xl.bg-gray-50 {
    background-color: #ffffff !important;
    border-color: rgba(0,0,0,.14) !important;
}

/* ── Light Mode — Inputlar ─────────────────────────────────────────── */
body.light .admin-input {
    background: #ffffff !important;
    border-color: rgba(0,0,0,.14) !important;
    color: #1d1d1f !important;
    -webkit-text-fill-color: #1d1d1f !important;
    color-scheme: light;
}
body.light .admin-input:focus {
    border-color: rgba(0,0,0,.34) !important;
}
body.light .admin-input::placeholder {
    color: #aeaeb2 !important;
    -webkit-text-fill-color: #aeaeb2 !important;
}
body.light select.admin-input {
    background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%231d1d1f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center / 16px 16px !important;
    border-color: rgba(0,0,0,.16) !important;
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    color-scheme: light;
}
body.light select.admin-input:hover,
body.light select.admin-input:focus {
    background-color: #ffffff !important;
    border-color: rgba(0,0,0,.34) !important;
}
body.light select.admin-input option {
    background: #ffffff !important;
    color: #1d1d1f !important;
    -webkit-text-fill-color: #1d1d1f !important;
    opacity: 1 !important;
}
/* Date/time inputs — iOS'ta zoom engelleme */
body.light input.admin-input[type="date"],
body.light input.admin-input[type="time"],
body.light input.admin-input[type="month"],
body.light input.admin-input[type="datetime-local"] {
    color: #1d1d1f !important;
    -webkit-text-fill-color: #1d1d1f !important;
    color-scheme: light;
}

/* ── Light Mode — Butonlar ─────────────────────────────────────────── */
body.light .admin-btn {
    background: #ffffff !important;
    border-color: rgba(0,0,0,.16) !important;
    color: #1d1d1f !important;
}
body.light .admin-btn:hover {
    background: #f5f5f7 !important;
    border-color: rgba(0,0,0,.32) !important;
    color: #1d1d1f !important;
}
body.light .admin-btn-primary {
    background: #000000 !important;
    color: #ffffff !important;
}
body.light .admin-btn-primary:hover {
    background: #4b5563 !important;
    color: #ffffff !important;
}

/* ── Language & Theme Switcher Button overrides ─────────────────── */
/* Light Mode */
body.light .theme-switcher-active,
body.light .theme-switcher-active *,
body.light .theme-switcher-active i {
    background-color: #000000 !important;
    color: #ffffff !important;
}
body.light .theme-switcher-active:hover,
body.light .theme-switcher-active:hover *,
body.light .theme-switcher-active:hover i {
    background-color: #000000 !important;
    color: #ffffff !important;
}
body.light .theme-switcher-inactive,
body.light .theme-switcher-inactive *,
body.light .theme-switcher-inactive i {
    color: #6b7280 !important;
    background: transparent !important;
}
body.light .theme-switcher-inactive:hover,
body.light .theme-switcher-inactive:hover *,
body.light .theme-switcher-inactive:hover i {
    color: #000000 !important;
    background: transparent !important;
}

/* Dark Mode */
body.dark .theme-switcher-active,
body.dark .theme-switcher-active *,
body.dark .theme-switcher-active i,
.dark .theme-switcher-active,
.dark .theme-switcher-active *,
.dark .theme-switcher-active i {
    background-color: #ffffff !important;
    color: #000000 !important;
}
body.dark .theme-switcher-active:hover,
body.dark .theme-switcher-active:hover *,
body.dark .theme-switcher-active:hover i,
.dark .theme-switcher-active:hover,
.dark .theme-switcher-active:hover *,
.dark .theme-switcher-active:hover i {
    background-color: #ffffff !important;
    color: #000000 !important;
}
body.dark .theme-switcher-inactive,
body.dark .theme-switcher-inactive *,
body.dark .theme-switcher-inactive i,
.dark .theme-switcher-inactive,
.dark .theme-switcher-inactive *,
.dark .theme-switcher-inactive i {
    color: #9ca3af !important;
    background: transparent !important;
}
body.dark .theme-switcher-inactive:hover,
body.dark .theme-switcher-inactive:hover *,
body.dark .theme-switcher-inactive:hover i,
.dark .theme-switcher-inactive:hover,
.dark .theme-switcher-inactive:hover *,
.dark .theme-switcher-inactive:hover i {
    color: #ffffff !important;
    background: transparent !important;
}
body.light .admin-btn-primary *,
body.light .admin-btn-primary i {
    color: #ffffff !important;
}
body.light .admin-btn-primary .text-gray-400,
body.light .admin-btn-primary .text-gray-500 {
    color: rgba(255,255,255,.8) !important;
}
body.light .admin-icon-btn {
    background: #ffffff !important;
    border-color: rgba(0,0,0,.16) !important;
    color: #1d1d1f !important;
}
body.light .admin-icon-btn:hover {
    background: #f5f5f7 !important;
    border-color: rgba(0,0,0,.32) !important;
    color: #1d1d1f !important;
}
body.light .admin-icon-btn.danger {
    background: rgba(239,68,68,.10) !important;
    border-color: rgba(239,68,68,.34) !important;
    color: #ef4444 !important;
}
body.light .admin-icon-btn.danger:hover {
    background: rgba(239,68,68,.16) !important;
    border-color: rgba(239,68,68,.52) !important;
    color: #dc2626 !important;
}

/* ── Light Mode — Modal & Confirm ──────────────────────────────────── */
body.light .modal-box { background: #fff !important; border-color: rgba(0,0,0,.1) !important; }
body.light #confirm-box { background: #fff !important; border-color: rgba(0,0,0,.1) !important; }
body.light .modal-box h3, body.light .modal-box p, body.light .modal-box label,
body.light #confirm-box p { color: #1d1d1f; }
body.light #confirm-ok { color: #fff !important; }
body.light .modal-overlay { background: rgba(0,0,0,.4) !important; }

/* ── Light Mode — Tailwind Renk Override'ları ─────────────────────── */
body.light .text-white { color: #000000 !important; }
body.light .text-gray-900 { color: #000000 !important; }
body.light .text-gray-800 { color: #000000 !important; }
body.light .text-gray-700 { color: #000000 !important; }
body.light .text-gray-500,
body.light .text-gray-400 { color: #6e6e73 !important; }
body.light .text-gray-600 { color: #8e8e93 !important; }
body.light .text-gray-300 { color: #4b5563 !important; }
body.light .text-gray-200 { color: #6e6e73 !important; }
body.light .text-white\/20,
body.light .text-white\/30,
body.light .text-white\/40 { color: rgba(0,0,0,.4) !important; }

/* Border overrides */
body.light .border-white\/10,
body.light .border-white\/\[0\.07\],
body.light .border-white\/\[0\.04\] { border-color: rgba(0,0,0,.08) !important; }
body.light .border-white\/\[0\.08\],
body.light .border-white\/\[\.06\],
body.light .border-white\/\[\.07\] { border-color: rgba(0,0,0,.12) !important; }
body.light .border-white\/15 { border-color: rgba(0,0,0,.15) !important; }
body.light .border-white\/20 { border-color: rgba(0,0,0,.18) !important; }
body.light .border-slate-200 { border-color: rgba(0, 0, 0, 0.12) !important; }
body.light .border-slate-300 { border-color: rgba(0, 0, 0, 0.18) !important; }
body.light .border-slate-200\/50 { border-color: rgba(0, 0, 0, 0.06) !important; }
body.light .border-slate-300\/50 { border-color: rgba(0, 0, 0, 0.09) !important; }
body.light .hover\:border-slate-350:hover { border-color: rgba(0, 0, 0, 0.22) !important; }


/* Background overrides */
body.light .bg-white\/5,
body.light .bg-white\/\[0\.02\],
body.light .bg-white\/\[0\.015\] { background: rgba(0,0,0,.02) !important; }
body.light .bg-white\/\[0\.04\],
body.light .bg-white\/\[0\.03\],
body.light .bg-white\/\[\.03\] { background: rgba(0,0,0,.04) !important; }
body.light .bg-white\/10 { background: rgba(0,0,0,.08) !important; }
body.light .bg-black { background: #fff !important; }
body.light .bg-black\/50 { background: rgba(0,0,0,.05) !important; }
body.light .bg-black\/30 { background: rgba(0,0,0,.03) !important; }

/* Hover overrides */
body.light .hover\:text-white:hover { color: #000000 !important; }
body.light .hover\:bg-white\/5:hover { background: rgba(0,0,0,.04) !important; }
body.light .hover\:bg-white\/10:hover { background: rgba(0,0,0,.06) !important; }
body.light .hover\:border-white\/30:hover { border-color: rgba(0,0,0,.3) !important; }
body.light .group:hover .group-hover\:text-white { color: #000000 !important; }

/* Aktif siyah yüzeyler — bilinçli siyah kullanım korunsun */
body.light .bg-black.text-white,
body.light .bg-gray-950.text-white,
body.light .bg-gray-900.text-white {
    background-color: #1d1d1f !important;
    color: #ffffff !important;
}
body.light .bg-black.text-white *,
body.light .bg-gray-950.text-white *,
body.light .bg-gray-900.text-white * {
    color: #ffffff !important;
}
body.light .bg-white.text-black,
body.light .dark\:bg-white.text-black {
    background-color: #ffffff !important;
    color: #1d1d1f !important;
}

/* ── Light Mode — Renk Ailesi Korumaları ──────────────────────────── */
/* Yeşil */
body.light .text-green-400,
body.light .text-green-500 { color: #16a34a !important; }
body.light .text-emerald-400,
body.light .text-emerald-500,
body.light .text-emerald-600 { color: #059669 !important; }
body.light .bg-green-500\/10,
body.light .bg-emerald-500\/10 { background: rgba(22,163,74,.1) !important; }
body.light .border-green-500\/20,
body.light .border-emerald-500\/20 { border-color: rgba(22,163,74,.2) !important; }

/* Kırmızı */
body.light .text-red-400,
body.light .text-red-500 { color: #dc2626 !important; }
body.light .text-red-400\/70 { color: rgba(220,38,38,.7) !important; }
body.light .hover\:text-red-400:hover { color: #dc2626 !important; }
body.light .bg-red-500\/10 { background: rgba(239,68,68,.1) !important; }
body.light .border-red-500\/20 { border-color: rgba(239,68,68,.2) !important; }

/* Mavi */
body.light .text-blue-400,
body.light .text-blue-500 { color: #2563eb !important; }
body.light .text-blue-400\/70 { color: rgba(37,99,235,.7) !important; }
body.light .hover\:text-blue-400:hover { color: #2563eb !important; }
body.light .bg-blue-500\/10 { background: rgba(37,99,235,.1) !important; }
body.light .border-blue-500\/20 { border-color: rgba(37,99,235,.2) !important; }

/* Sarı — ikonlarda korunsun */
body.light .text-yellow-400,
body.light .text-yellow-500 { color: #d97706 !important; }
body.light .bg-yellow-500\/10 { background: rgba(234,179,8,.1) !important; }
body.light .border-yellow-500\/20 { border-color: rgba(234,179,8,.2) !important; }

/* Mor */
body.light .text-purple-400,
body.light .text-purple-500 { color: #7c3aed !important; }

/* Turuncu */
body.light .text-orange-400,
body.light .text-orange-500 { color: #ea580c !important; }

/* Pembe — doğum günü ikonu */
body.light .text-pink-400,
body.light .text-pink-500 { color: #db2777 !important; }

/* ── Light Mode — Toggle / Checkbox / Radio ───────────────────────── */
body.light input[type="checkbox"]:not(.hidden):not(.sr-only) { accent-color: #1d1d1f; }
body.light .peer\:checked ~ .peer-checked\:bg-white,
body.light .peer:checked ~ .peer-checked\:bg-white { background: #1d1d1f !important; }
body.light .peer\:checked ~ .peer-checked\:bg-black,
body.light .peer:checked ~ .peer-checked\:bg-black { background: #fff !important; }
body.light .peer:checked ~ .peer-checked\:bg-green-500,
body.light .peer:checked ~ .peer-checked\:bg-green-600 { background: #1d1d1f !important; }
body.light .peer:checked ~ .peer-checked\:text-green-400,
body.light .peer:checked ~ .peer-checked\:text-green-500 { color: #1d1d1f !important; }
body.light .user-checkbox-item { border-color: rgba(0,0,0,.07); background: rgba(0,0,0,.02); }
body.light .user-checkbox-item:hover { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.14); }
body.light .user-checkbox-item.selected { background: rgba(0,0,0,.06); border-color: rgba(0,0,0,.2); }
body.light .user-checkbox-item.selected .user-check-dot { background: #1d1d1f; border-color: #1d1d1f; }
body.light .user-check-dot { border-color: rgba(0,0,0,.2); }
body.light .user-check-dot i { color: #fff; }

/* ── Light Mode — Tablo ──────────────────────────────────────────── */
body.light table th { color: #6e6e73 !important; }
body.light table td { color: #1d1d1f; }
body.light .tabular-nums { color: #1d1d1f !important; }
body.light table tbody tr:hover { background: rgba(0,0,0,.02); }

/* ── Light Mode — Tab & Sekme ────────────────────────────────────── */
body.light .admin-tab { color: #6e6e73 !important; border-color: transparent !important; }
body.light .admin-tab.active { color: #1d1d1f !important; background: rgba(0,0,0,.06) !important; border-color: rgba(0,0,0,.15) !important; }
body.light .settings-tab { color: #6e6e73 !important; }
body.light .settings-tab:hover { color: #1d1d1f !important; }
body.light .settings-tab.active { color: #1d1d1f !important; }
body.light .profile-tab-btn { color: #6e6e73 !important; }
body.light .profile-tab-btn:hover { color: #1d1d1f !important; }
body.light .profile-tab-btn.active {
    color: #1d1d1f !important;
    border-color: transparent !important;
}

.panel-tab-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    align-items: flex-end;
}

.panel-tab-scroll::-webkit-scrollbar {
    width: 0;
    height: 0;
}

/* ── Light Mode — Dosya Yükleme ──────────────────────────────────── */
body.light .file-input-btn {
    border-color: rgba(0,0,0,.2) !important;
    background: rgba(0,0,0,.03) !important;
    color: #1d1d1f !important;
}
body.light .file-input-btn:hover {
    border-color: rgba(0,0,0,.36) !important;
    background: rgba(0,0,0,.06) !important;
}
body.light .brand-logo-preview { background: #1d1d1f !important; border-color: rgba(0,0,0,.08) !important; }

body.light.panel-login-page {
    background: #f5f5f7 !important;
    color: #000000 !important;
}

body.light.panel-login-page .panel-login-card {
    background: #ffffff !important;
    border-color: #e5e7eb !important;
}

body.light.panel-login-page input[type="text"],
body.light.panel-login-page input[type="email"],
body.light.panel-login-page input[type="password"] {
    background: #ffffff !important;
    border-color: #e5e7eb !important;
    color: #000000 !important;
}

body.light.panel-login-page input::placeholder {
    color: #9ca3af !important;
}

body.light.panel-login-page input[type="checkbox"] {
    background: #ffffff !important;
    border-color: #d1d5db !important;
}

body.light.panel-login-page input[type="checkbox"]:checked {
    background: #000000 !important;
    border-color: #000000 !important;
}

body.light.panel-login-page input[type="checkbox"]:checked::before {
    color: #ffffff !important;
}

body.light.panel-login-page button[type="submit"] {
    background: #000000 !important;
    color: #ffffff !important;
}

body.light.panel-login-page button[type="submit"]:hover {
    background: #3a3a3c !important;
}

body.light.panel-login-page .panel-login-switch {
    background: #ffffff !important;
    border-color: #e5e7eb !important;
}

body.light.panel-login-page .panel-login-switch a.theme-switcher-active,
body.light.panel-login-page .panel-login-switch a.theme-switcher-active i {
    background-color: #000000 !important;
    color: #ffffff !important;
}

body.light.panel-login-page .panel-login-switch a.theme-switcher-inactive,
body.light.panel-login-page .panel-login-switch a.theme-switcher-inactive i {
    background-color: transparent !important;
    color: #6b7280 !important;
}

body.light.panel-login-page .panel-login-switch a.theme-switcher-inactive:hover,
body.light.panel-login-page .panel-login-switch a.theme-switcher-inactive:hover i {
    color: #000000 !important;
}

/* Dark Mode switcher overrides inside panel-login-page */
body.dark.panel-login-page .panel-login-switch a.theme-switcher-active,
body.dark.panel-login-page .panel-login-switch a.theme-switcher-active i {
    background-color: #ffffff !important;
    color: #000000 !important;
}

body.dark.panel-login-page .panel-login-switch a.theme-switcher-inactive,
body.dark.panel-login-page .panel-login-switch a.theme-switcher-inactive i {
    background-color: transparent !important;
    color: #9ca3af !important;
}

body.dark.panel-login-page .panel-login-switch a.theme-switcher-inactive:hover,
body.dark.panel-login-page .panel-login-switch a.theme-switcher-inactive:hover i {
    color: #ffffff !important;
}

/* ── Light Mode — Resim Silme Butonu ─────────────────────────────── */
body.light .odak-remove-image-btn {
    background-color: #000000;
    color: #ffffff;
    border-color: #ffffff;
}
body.light .odak-remove-image-btn:hover { background-color: #1f2937; }

/* ── Light Mode — Lookup / Arama Listeleri ────────────────────────── */
body.light #lookupList > button,
body.light #staffLookupList > button,
body.light #panelCustomerLookupList > button {
    background-color: #ffffff !important;
    border-color: rgba(0,0,0,.14) !important;
}
body.light #lookupList > button:hover,
body.light #staffLookupList > button:hover,
body.light #panelCustomerLookupList > button:hover {
    background-color: #f5f5f7 !important;
    border-color: rgba(0,0,0,.32) !important;
}
body.light #staffLookupList > button.bg-gray-950,
body.light #staffLookupList > button.bg-black,
body.light #staffLookupList > button.text-white {
    background-color: #1d1d1f !important;
    border-color: #1d1d1f !important;
    color: #ffffff !important;
}
body.light #staffLookupList > button.bg-gray-950 *,
body.light #staffLookupList > button.bg-black *,
body.light #staffLookupList > button.text-white * {
    color: #ffffff !important;
}

/* ── Light Mode — Adisyon / Randevu Kartları ──────────────────────── */
body.light #checkItems .check-item,
body.light #checkPreviewItems > div,
body.light #checkDetailItems > div,
body.light #checkDetailPayoutList > div,
body.light #closeCheckPayoutList > div,
body.light .appointment-card {
    background-color: #ffffff !important;
    border-color: rgba(0,0,0,.16) !important;
}

/* ── Light Mode — Unread Badge ────────────────────────────────────── */
body.light .unread-badge {
    background: rgba(0,0,0,.08) !important;
    color: #1d1d1f !important;
}
body.light .menu-active .unread-badge {
    background: rgba(255,255,255,.2) !important;
    color: #ffffff !important;
}

/* ── Light Mode — Takvim Etkinlik Pilleri ─────────────────────────── */
body.light .calendar-event-pill {
    background-color: #e5e5ea !important;
    border-color: rgba(0,0,0,.08) !important;
}

/* ── Light Mode — Bildirim Noktaları / Renkli Dot'lar ────────────── */
body.light .bg-green-500 { background-color: #16a34a !important; }
body.light .bg-red-500 { background-color: #dc2626 !important; }
body.light .bg-blue-500 { background-color: #2563eb !important; }
body.light .bg-yellow-500 { background-color: #d97706 !important; }
body.light .bg-purple-500 { background-color: #7c3aed !important; }
body.light .bg-orange-500 { background-color: #ea580c !important; }
body.light .bg-pink-500 { background-color: #db2777 !important; }

/* ── Light Mode — Giriş renk paletleri & seçici düzeltmeleri ──────── */
body.light .text-green-600 { color: #16a34a !important; }
body.light .text-red-600 { color: #dc2626 !important; }
body.light .text-blue-600 { color: #2563eb !important; }
body.light .bg-gray-100 { background-color: #f3f4f6 !important; }
body.light .bg-gray-50 { background-color: #f9fafb !important; }
body.light .border-gray-100 { border-color: rgba(0,0,0,.06) !important; }
body.light .border-gray-300 { border-color: rgba(0,0,0,.18) !important; }

/* ── Light Mode — Dil/Tema switcher butonları ─────────────────────── */
body.light .bg-white.text-black {
    background-color: #1d1d1f !important;
    color: #ffffff !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBİL UYUMLULUK — PWA kalitesinde deneyim
   ══════════════════════════════════════════════════════════════════════════ */

/* iOS zoom engelleme — input odaklanınca sayfa büyümesin */
@media (max-width: 767px) {
    html, body {
        width: 100%;
        min-height: 100%;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        -webkit-text-size-adjust: 100%;
    }

    /* PWA-safe body */
    body {
        -webkit-tap-highlight-color: transparent;
        overscroll-behavior-y: none;
    }

    /* Input zoom engelleme */
    input.admin-input,
    select.admin-input,
    textarea.admin-input {
        font-size: 16px !important;
        min-height: 48px;
    }

    /* Touch hedef — Apple HIG min 44px */
    .admin-btn,
    .admin-btn-primary {
        min-height: 44px;
        justify-content: center;
        padding-left: 16px;
        padding-right: 16px;
    }
    .admin-icon-btn {
        width: 44px;
        height: 44px;
        min-width: 44px;
    }
    .customer-card-actions .customer-card-icon {
        width: 100% !important;
        height: 44px !important;
        min-width: 0 !important;
        gap: 8px;
    }
    .customer-card-actions .customer-card-delete-form {
        width: 100%;
    }
    .customer-history-tabs {
        border-radius: 16px !important;
    }
    .customer-history-tabs button {
        min-height: 40px;
        border-radius: 12px;
        font-size: 10px;
        letter-spacing: .04em;
        padding: 8px;
    }

    /* Kartlar */
    .admin-card {
        border-radius: 18px !important;
        padding: 16px !important;
    }

    /* Modal — tam ortada (mobil) */
    .modal-overlay {
        align-items: center !important;
        justify-content: center !important;
        padding: 16px !important;
    }
    .modal-box {
        width: 100% !important;
        max-width: none !important;
        max-height: 90dvh !important;
        padding: 1.25rem !important;
        border-radius: 22px !important;
        margin: auto !important;
    }
    #confirm-box {
        width: 92% !important;
        padding: 1.5rem !important;
    }

    /* Tablo horizontal scroll */
    .table-responsive,
    [class*="overflow-x"] {
        -webkit-overflow-scrolling: touch;
    }

    /* Appointment kartlar */
    .appointment-card {
        border-radius: 18px !important;
        padding: 14px !important;
    }

    /* Genel gap ve spacing */
    .space-y-6 > * + * { margin-top: 1.25rem; }

    /* Uzun kelime kırılması */
    .admin-card, .modal-box, td, th {
        word-break: break-word;
        overflow-wrap: break-word;
    }

    /* Grid — mobilde tek kolon */
    .grid-cols-2:not(.grid-cols-force) { grid-template-columns: 1fr !important; }
    .sm\:grid-cols-2 { grid-template-columns: 1fr !important; }
}

/* ── Küçük Telefonlar (SE vb.) ──────────────────────────────────────── */
@media (max-width: 374px) {
    .admin-card { padding: 12px !important; }
    .modal-box { padding: 1rem !important; }
    .admin-btn, .admin-btn-primary {
        font-size: 11px !important;
        letter-spacing: .06em !important;
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* ── Tablet ──────────────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1024px) {
    .modal-box {
        max-width: 520px !important;
        width: 90% !important;
    }
}

/* ── Modal — Masaüstü tam ortada ─────────────────────────────────────── */
@media (min-width: 768px) {
    .modal-overlay {
        align-items: center !important;
        justify-content: center !important;
    }
    .modal-box {
        margin: auto !important;
    }
}

/* ── PWA standalone — iOS status bar alanı ─────────────────────────── */
@media (display-mode: standalone) {
    body {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   TOGGLE / SWITCH — Tüm sayfalarda aynı stil
   ══════════════════════════════════════════════════════════════════════════ */

/* Peer-based toggle (w-11 h-6 yapısı) */
.odak-toggle,
.qr-logo-switch,
input.peer[type="checkbox"] + div {
    position: relative;
    width: 2.75rem; /* w-11 */
    height: 1.5rem; /* h-6 */
    background-color: #d1d5db; /* bg-gray-300 */
    border-radius: 9999px;
    transition: background-color .2s;
    cursor: pointer;
}
.odak-toggle::after,
.qr-logo-switch::after,
input.peer[type="checkbox"] + div::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 1.25rem; /* w-5 */
    height: 1.25rem; /* h-5 */
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 9999px;
    transition: transform .2s;
}
input.peer[type="checkbox"]:checked + div,
input.peer[type="checkbox"]:checked + .odak-toggle,
.peer:checked + .qr-logo-switch {
    background-color: #000000 !important; /* peer-checked:bg-gray-950 */
}
input.peer[type="checkbox"]:checked + div::after,
input.peer[type="checkbox"]:checked + .odak-toggle::after,
.peer:checked + .qr-logo-switch::after {
    transform: translateX(100%);
    border-color: #fff;
}

/* Dark mode toggle */
.dark .odak-toggle,
.dark .qr-logo-switch,
.dark input.peer[type="checkbox"] + div,
body.dark input.peer[type="checkbox"] + div {
    background-color: rgba(255,255,255,.10) !important;
    border-color: transparent !important;
}
.dark .odak-toggle::after,
.dark .qr-logo-switch::after,
.dark input.peer[type="checkbox"] + div::after,
body.dark input.peer[type="checkbox"] + div::after {
    background: #fff !important;
    border-color: transparent !important;
}
.dark input.peer[type="checkbox"]:checked + div,
.dark .peer:checked + .qr-logo-switch,
body.dark input.peer[type="checkbox"]:checked + div {
    background-color: #fff !important;
}
.dark input.peer[type="checkbox"]:checked + div::after,
.dark .peer:checked + .qr-logo-switch::after,
body.dark input.peer[type="checkbox"]:checked + div::after {
    background: #000 !important;
    border-color: transparent !important;
}

/* Light mode toggle */
body.light input.peer[type="checkbox"] + div {
    background: #d1d5db !important;
    border: 1px solid rgba(0,0,0,.18) !important;
}
body.light input.peer[type="checkbox"] + div::after {
    background: #fff !important;
    border-color: rgba(0,0,0,.1) !important;
}
body.light input.peer[type="checkbox"]:checked + div {
    background: #1d1d1f !important;
    border-color: #1d1d1f !important;
}
body.light input.peer[type="checkbox"]:checked + div::after {
    background: #fff !important;
    border-color: #fff !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   SAYFA BAZLI PAYLAŞILAN STILLER
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Settings — gizli alanlar margin sıfırlama ───────────────────────── */
[data-settings-section][style*="display: none"] {
    margin: 0 !important;
}

/* ── Employees / Services — scrollbar ─────────────────────────────────── */
[data-service-access] .employee-service-list {
    scrollbar-width: thin;
    scrollbar-color: #4b5563 rgba(0,0,0,.06);
}
.dark [data-service-access] .employee-service-list,
html.dark [data-service-access] .employee-service-list,
body.dark [data-service-access] .employee-service-list {
    scrollbar-color: #6b7280 rgba(255,255,255,.06);
}
[data-service-access] .employee-service-list::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
[data-service-access] .employee-service-list::-webkit-scrollbar-track {
    background: rgba(0,0,0,.06);
}
[data-service-access] .employee-service-list::-webkit-scrollbar-thumb {
    background: #4b5563;
    border-radius: 9999px;
}
.dark [data-service-access] .employee-service-list::-webkit-scrollbar-track,
html.dark [data-service-access] .employee-service-list::-webkit-scrollbar-track,
body.dark [data-service-access] .employee-service-list::-webkit-scrollbar-track {
    background: rgba(255,255,255,.06);
}
.dark [data-service-access] .employee-service-list::-webkit-scrollbar-thumb,
html.dark [data-service-access] .employee-service-list::-webkit-scrollbar-thumb,
body.dark [data-service-access] .employee-service-list::-webkit-scrollbar-thumb {
    background: #6b7280;
}

/* ── Admin Tabs — brands/calendar ortak ──────────────────────────────── */
.admin-tab {
    padding: 8px 16px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    border-radius: 999px;
    transition: all .2s;
    color: #9ca3af;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
}
.admin-tab.active {
    color: #fff;
    background: rgba(255,255,255,.1);
    border-color: rgba(255,255,255,.2);
}
body.light .admin-tab { color: #6e6e73 !important; }
body.light .admin-tab.active {
    color: #1d1d1f !important;
    background: rgba(0,0,0,.06) !important;
    border-color: rgba(0,0,0,.15) !important;
}

/* ── QR — logo switch & preview ───────────────────────────────────────── */
.qr-preview-card {
    min-height: 560px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.qr-preview-card > .qr-preview-inner {
    width: 100%;
    margin: auto;
}

/* ── Calendar — light mode ────────────────────────────────────────── */
body.light .cal-header { background: #fff !important; border-color: rgba(0,0,0,.08) !important; }
body.light .cal-day-header { background: rgba(0,0,0,.02); border-color: rgba(0,0,0,.08); }
body.light .cal-day-header > div { color: #aeaeb2; }
body.light .cal-cell { border-color: rgba(0,0,0,.06); }
body.light .cal-cell:hover { background: rgba(0,0,0,.02); }
body.light .cal-cell.today { background: rgba(0,0,0,.04); }
body.light .cal-cell.empty { background: rgba(0,0,0,.015); }
body.light .cal-day-num span { color: #6e6e73; }
body.light .cal-day-num .today-badge { background: #1d1d1f; color: #fff; }
body.light .cal-event-tag { background: rgba(0,0,0,.05); border-color: rgba(0,0,0,.1); }
body.light .cal-event-tag .et-title { color: #1d1d1f; }
body.light .cal-event-tag:hover { background: rgba(0,0,0,.1); }
body.light .cal-event-tag.google-event { background: rgba(66,133,244,.08); border-color: rgba(66,133,244,.2); }

/* ── Calendar — user checkbox list scrollbar ──────────────────────────── */
body.light .user-checkbox-list
body.light .user-checkbox-list
body.light .user-checkbox-list

/* ── Mail — light mode fixes ──────────────────────────────────────────── */
html.light .mail-topbar, body.light .mail-topbar { background: #fff !important; border-color: rgba(0,0,0,.08) !important; }
body.light .mail-sidebar { background: #fafafa !important; border-color: rgba(0,0,0,.07) !important; }
body.light .mail-list-col { border-color: rgba(0,0,0,.07) !important; }
body.light .mail-nav-btn { color: #6e6e73; }
body.light .mail-nav-btn:hover { background: rgba(0,0,0,.04); color: #1d1d1f; }
body.light .mail-nav-btn.active { background: rgba(0,0,0,.07); color: #1d1d1f; }
body.light .mail-item { border-color: rgba(0,0,0,.05); }
body.light .mail-item:hover { background: rgba(0,0,0,.03); }
body.light .mail-item.active { background: rgba(0,0,0,.06); border-left-color: #1d1d1f; }
body.light .mail-item.unread { background: rgba(0,0,0,.04); }
body.light .mail-item .avatar-letter { background: rgba(0,0,0,.08); color: #374151; }
body.light .mail-from { color: #1d1d1f; font-weight: 500; }
body.light .mail-subject { color: #6b7280; }
body.light .mail-item.unread .mail-from { color: #000; font-weight: 800; }
body.light .mail-item.unread .mail-subject { color: #000000; font-weight: 600; }
body.light .mail-mobile-nav { background: #fff !important; border-top-color: rgba(0,0,0,.08) !important; }
body.light .mail-mobile-nav a.active { color: #1d1d1f !important; }
body.light .to-wrap { border-color: rgba(0,0,0,.1); background: rgba(0,0,0,.03); }
body.light .to-wrap input { color: #1d1d1f; }
body.light .to-tag { background: rgba(0,0,0,.07); border-color: rgba(0,0,0,.12); color: #1d1d1f; }
body.light .ac-list { background: #fff; border-color: rgba(0,0,0,.1); }
body.light .ac-item:hover { background: rgba(0,0,0,.04); }
body.light .ac-avatar-letter { background: rgba(0,0,0,.08); color: #374151; }

/* Mail scrollbars — light mode */
body.light .mail-wrap *
body.light .mail-wrap *

/* Mail — WYSIWYG (Quill) editor light mode */
body.light .ql-toolbar.ql-snow { border-color: rgba(0,0,0,.1); background: rgba(0,0,0,.02); }
body.light .ql-container.ql-snow { border-color: rgba(0,0,0,.1); background: rgba(0,0,0,.01); }
body.light .ql-editor { color: #1d1d1f; }
body.light .ql-snow .ql-stroke { stroke: #4b5563; }
body.light .ql-snow .ql-fill, body.light .ql-snow .ql-stroke.ql-fill { fill: #4b5563; }
body.light .ql-snow .ql-picker { color: #4b5563; }

/* ── Profile — remove avatar button ───────────────────────────────────── */
#remove-avatar-btn { background-color: #ffffff; color: #000000; border: 2px solid #000000; }
#remove-avatar-btn:hover { background-color: #f3f4f6; }
body.light #remove-avatar-btn { background-color: #000000; color: #ffffff; border-color: #ffffff; }
body.light #remove-avatar-btn:hover { background-color: #1f2937; }

.calendar-day-cell, .calendar-day-empty {
    border-right: 1px solid rgba(0,0,0,.08);
    border-bottom: 1px solid rgba(0,0,0,.08);
}

.calendar-day-selected .calendar-day-number {
    background: #050505 !important;
    color: #ffffff !important;
}

html.dark .calendar-day-selected .calendar-day-number,
body.dark .calendar-day-selected .calendar-day-number {
    background: #ffffff !important;
    color: #050505 !important;
}
html.dark .calendar-day-cell, html.dark .calendar-day-empty,
body.dark .calendar-day-cell, body.dark .calendar-day-empty {
    border-color: rgba(255,255,255,.07);
}

/* ── Panel Calendar — Event Pills ─────────────────────────────────────── */
.calendar-day-cell .calendar-event-pill,
.calendar-day-cell .calendar-more-pill {
    background: #d1d5db !important;
    border-color: rgba(0,0,0,.2) !important;
    color: #000000 !important;
}
.calendar-day-cell .calendar-event-pill span,
.calendar-day-cell .calendar-event-pill i {
    color: #000000 !important;
}
html.dark .calendar-day-cell .calendar-event-pill,
html.dark .calendar-day-cell .calendar-more-pill,
body.dark .calendar-day-cell .calendar-event-pill,
body.dark .calendar-day-cell .calendar-more-pill {
    background: rgba(255,255,255,.05) !important;
    border-color: rgba(255,255,255,.10) !important;
    color: #ffffff !important;
}
.dark .calendar-more-pill {
    color: #ffffff !important;
}
html.dark .calendar-day-cell .calendar-event-pill span,
html.dark .calendar-day-cell .calendar-event-pill i,
body.dark .calendar-day-cell .calendar-event-pill span,
body.dark .calendar-day-cell .calendar-event-pill i {
    color: #d1d5db !important;
}

/* extracted from admin\mail.php */

/* ── Mail Tam Sayfa (Takvim gibi) ──────────────────────────────────────── */
/* Parent main padding'ini iptal et ki tam ekran olabilsin */
main:has(.mail-wrap) { padding: 0 !important; overflow: hidden !important; }
@media (max-width: 767px) {
    main:has(.mail-wrap) {
        height: calc(100dvh - 64px) !important;
        margin-top: 64px !important;
        padding: 0 !important;
    }
}

.mail-wrap {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

/* ── Üst Bar ────────────────────────────────────────────────────────────── */
.mail-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.25rem;
    height: 56px;
    border-bottom: 1px solid rgba(255,255,255,.07);
    background: #000;
    flex-shrink: 0;
    gap: 12px;
}
/* Compose (Yeni Mail) butonu - her iki temada da okunabilir */
.compose-btn {
    background: #000;
    color: #fff;
}
.compose-btn:hover { background: #1f2937; }
html.dark .compose-btn, body.dark .compose-btn {
    background: #fff;
    color: #000;
}
html.dark .compose-btn:hover, body.dark .compose-btn:hover {
    background: #ffffff !important;
    color: #000000 !important;
}
html.light .compose-btn, body.light .compose-btn {
    background: #000000;
    color: #fff;
}
html.light .compose-btn:hover, body.light .compose-btn:hover {
    background: #000000 !important;
    color: #ffffff !important;
}

/* ── 3 Kolon (desktop) ─────────────────────────────────────────────────── */
.mail-body {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* Sidebar */
.mail-sidebar {
    width: 200px;
    flex-shrink: 0;
    border-right: 1px solid rgba(255,255,255,.07);
    display: flex;
    flex-direction: column;
    padding: 12px 8px;
    gap: 2px;
    overflow-y: auto;
    background: #000;
}


/* Mail List */
.mail-list-col {
    width: 300px;
    flex-shrink: 0;
    border-right: 1px solid rgba(255,255,255,.07);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}


/* Mail Detail */
.mail-detail-col {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
}

/* ── Nav Buttons ─────────────────────────────────────────────────────────── */
.mail-nav-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    transition: all .15s;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
}
.mail-nav-btn:hover { background: rgba(255,255,255,.05); color: #d1d5db; }
.mail-nav-btn.active { background: rgba(255,255,255,.08); color: #fff; font-weight: 700; }


.unread-badge {
    margin-left: auto;
    background: white;
    color: #000;
    font-size: 9px;
    font-weight: 800;
    border-radius: 100px;
    padding: 1px 6px;
    min-width: 18px;
    text-align: center;
}


/* ── Mail Items ──────────────────────────────────────────────────────────── */
.mail-item {
    padding: 13px 14px;
    border-bottom: 1px solid rgba(255,255,255,.05);
    cursor: pointer;
    transition: background .12s;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    flex-shrink: 0;
}
.mail-item:hover { background: rgba(255,255,255,.04); }
.mail-item.active { background: rgba(255,255,255,.07); border-left: 2px solid #fff; }
.mail-item.unread { background: rgba(255,255,255,.02); }


.mail-item .avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.mail-item .avatar-letter {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700;
    color: #d1d5db;
    flex-shrink: 0;
}


.mail-item-meta { flex: 1; min-width: 0; }
.mail-from { font-size: 12.5px; font-weight: 600; color: #e5e7eb; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-subject { font-size: 11.5px; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.mail-preview { font-size: 10.5px; color: #4b5563; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.mail-item.unread .mail-from { color: #fff; font-weight: 700; }
.mail-item.unread .mail-subject { color: #d1d5db; font-weight: 600; }


.mail-date { font-size: 10px; color: #374151; flex-shrink: 0; margin-top: 2px; }

/* ── Mobile: 3 panel → gezilebilir ────────────────────────────────────── */
@media (max-width: 767px) {
    .mail-topbar { height: 50px; padding: 0 1rem; }
    .mail-sidebar { display: none; } /* mobilde gizle — alt tab ile değiştir */
    .mail-list-col { width: 100%; border-right: none; }
    .mail-detail-col { display: none; padding: 1rem; }
    .mail-detail-col.mobile-show { display: flex; }
    .mail-list-col.mobile-hide { display: none; }

    /* Alt Navigasyon (mobil sidebar yerine) */
    .mail-mobile-nav {
        display: flex;
        border-top: 1px solid rgba(255,255,255,.08);
        background: #000;
        flex-shrink: 0;
    }

    .mail-mobile-nav a {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 8px 0 6px;
        font-size: 10px;
        font-weight: 500;
        color: #6b7280;
        gap: 3px;
        cursor: pointer;
        transition: color .15s;
        border: none;
        background: transparent;
        text-decoration: none;
    }
    .mail-mobile-nav a.active { color: #fff; }
    .mail-mobile-nav a i { font-size: 18px; }


    /* Back button on detail */
    body.viewing-mail .mail-back-btn { display: flex !important; }
}
@media (min-width: 768px) {
    .mail-mobile-nav { display: none; }
    .mail-back-btn { display: none !important; }
}

/* ── Compose ─────────────────────────────────────────────────────────────── */
#compose-modal .modal-box { max-width: 680px; }

#checkModal .modal-box {
    max-width: min(1180px, calc(100vw - 32px)) !important;
    overscroll-behavior: contain;
}

#checkModal #checkForm,
#checkModal #checkItems,
#checkModal .check-item {
    min-height: 0;
}

#checkModal #checkItems .check-item {
    align-items: end;
}

#checkModal #checkItems .check-item > div,
#checkModal #checkItems .check-item .admin-input {
    min-width: 0;
}

@media (min-width: 768px) and (max-width: 1279px) {
    #checkModal #checkItems .check-item {
        grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    }
    #checkModal #checkItems .check-field-service,
    #checkModal #checkItems .check-field-employee,
    #checkModal #checkItems .check-field-name {
        grid-column: span 4 / span 4 !important;
    }
    #checkModal #checkItems .check-field-quantity,
    #checkModal #checkItems .check-field-duration,
    #checkModal #checkItems .check-field-price {
        grid-column: span 2 / span 2 !important;
    }
    #checkModal #checkItems .check-field-action {
        grid-column: span 5 / span 5 !important;
    }
    #checkModal #checkItems .check-field-remove {
        grid-column: span 1 / span 1 !important;
        justify-self: end !important;
    }
}

@media (max-width: 767px) {
    #checkModal.modal-overlay {
        align-items: flex-start !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
    }

    #checkModal .modal-box {
        height: auto !important;
        max-height: calc(100dvh - 32px) !important;
        overflow-x: hidden;
        overflow-y: auto !important;
        margin: 0 auto !important;
        -webkit-overflow-scrolling: touch;
    }

    #checkModal #checkItems,
    #checkModal #checkPreviewItems {
        max-height: none !important;
        overflow: visible !important;
    }

    #checkModal #checkItems .check-item {
        grid-template-columns: 1fr !important;
    }

    #checkModal #checkItems .check-field-remove {
        justify-self: start !important;
    }
}
.to-wrap {
    display: flex; flex-wrap: wrap; gap: 5px; align-items: center;
    min-height: 42px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 12px;
    padding: 6px 12px;
    background: rgba(255,255,255,.04);
    cursor: text;
}

.to-wrap input { background: transparent; border: none; outline: none; color: #fff; font-size: 13px; min-width: 120px; flex: 1; }

.to-tag { display: inline-flex; align-items: center; gap: 4px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15); border-radius: 6px; padding: 2px 7px; font-size: 11.5px; color: #e5e7eb; }
.to-tag .rm { cursor: pointer; color: #9ca3af; font-size: 10px; transition: color .1s; }
.to-tag .rm:hover { color: #f87171; }

.ac-list { position: absolute; top: 100%; left: 0; right: 0; background: #000000; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; z-index: 999; max-height: 200px; overflow-y: auto; display: none; margin-top: 4px; }

.ac-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer; transition: background .1s; }
.ac-item:hover { background: rgba(255,255,255,.06); }

.ac-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.ac-avatar-letter { width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #d1d5db; flex-shrink: 0; }


/* ── not verified gate ───────────────────────────────────────────────────── */
.mail-gate {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 2rem;
    text-align: center;
}

/* ── WYSIWYG Editor overrides ────────────────────────────────────────────── */
.ql-toolbar.ql-snow {
    border: 1px solid rgba(255,255,255,.1);
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    background: rgba(255,255,255,.02);
    padding: 8px;
}
.ql-container.ql-snow {
    border: 1px solid rgba(255,255,255,.1);
    border-top: none;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    background: rgba(255,255,255,.04);
    min-height: 150px;
    font-family: inherit;
    font-size: 13px;
}
.ql-editor { color: #d1d5db; min-height: 150px; }
.ql-snow .ql-stroke { stroke: #9ca3af; }
.ql-snow .ql-fill, .ql-snow .ql-stroke.ql-fill { fill: #9ca3af; }
.ql-snow .ql-picker { color: #9ca3af; }
/* Light mode Quill kuralları odak-theme.css'de */

/* ── Scrollbars ─────────────────────────────────────────────────────────── */
.mail-wrap *
.mail-wrap *
.mail-wrap *

/* Light mode scrollbar kuralları odak-theme.css'de */

/* extracted from admin\calendar.php */

/* ── Takvim - tam ekran tasarımı ────────────────────────────────── */
/* main'in kendi padding ve overflow'unu kapat */
main:has(.cal-wrap) {
    padding: 0 !important;
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
}

.cal-wrap {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    margin: 0;
}

/* Üst başlık çubuğu */
.cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.25rem;
    height: 60px;
    border-bottom: 1px solid rgba(255,255,255,.07);
    background: #000;
    flex-shrink: 0;
    gap: 1rem;
}
@media (max-width: 767px) {
    .cal-header {
        height: auto;
        min-height: 60px;
        padding: 8px 12px;
        gap: 8px;
    }
    .cal-header > div {
        min-width: 0;
    }
    .cal-header-nav,
    .cal-header-actions {
        gap: 8px !important;
    }
    .cal-header-actions {
        flex-shrink: 0;
    }
    .cal-header :is(a, button),
    .cal-header form {
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        padding: 0 !important;
        border-radius: 9999px !important;
    }
    .cal-header form {
        display: flex;
        flex-shrink: 0;
    }
    .cal-header form button {
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
    }
    .cal-header :is(a, button) {
        justify-content: center !important;
    }
    .cal-header .admin-btn-primary {
        flex-shrink: 0;
    }
}

/* Gün başlıkları */
.cal-day-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border-bottom: 1px solid rgba(255,255,255,.07);
    background: rgba(255,255,255,.02);
    flex-shrink: 0;
}
.cal-day-header > div {
    text-align: center;
    padding: 10px 0 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #374151;
}
.cal-day-header > div:nth-child(6),
.cal-day-header > div:nth-child(7) { color: #4b5563; }

/* Grid */
.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    /* flex: 1 1 0 + height: 0 = grid'e flex'ten kesin yükseklik verir
       böylece fr birimleri doğru çalışır ve scroll olmaz */
    flex: 1 1 0;
    height: 0;
    overflow: hidden;
}
/* inline style yoksa fallback */
.cal-grid:not([style]) {
    grid-auto-rows: minmax(0, 1fr);
}

/* Hücre */
.cal-cell {
    border-right: 1px solid rgba(255,255,255,.05);
    border-bottom: 1px solid rgba(255,255,255,.05);
    padding: 6px 5px 4px;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: background .15s;
    overflow: hidden;
    min-height: 0;
}
.cal-cell:hover { background: rgba(255,255,255,.025); }
.cal-cell.today  { background: rgba(255,255,255,.04); }
.cal-cell.empty  { cursor: default; background: rgba(0,0,0,.3); }

/* Gün numarası */
.cal-day-num {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 3px;
    flex-shrink: 0;
}
.cal-day-num span {
    font-size: 11px;
    color: #4b5563;
    transition: color .15s;
}
.cal-cell:hover .cal-day-num span { color: #9ca3af; }
.cal-day-num .today-badge {
    width: 22px; height: 22px;
    background: #fff; color: #000;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700;
}

/* Etkinlik tag'i */
.cal-event-tag {
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 5px;
    padding: 2px 5px;
    font-size: 9px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 2px;
    flex-shrink: 0;
    transition: background .15s;
}
.cal-event-tag:hover { background: rgba(255,255,255,.14); }
.cal-event-tag .et-time { color: #60a5fa; font-weight: 700; margin-right: 3px; }
.cal-event-tag .et-title { color: #f9fafb; }
.cal-event-tag.completed { opacity: .5; text-decoration: line-through; }
.cal-event-tag.google-event {
    background: rgba(66,133,244,.12);
    border-color: rgba(66,133,244,.25);
    display: flex;
    align-items: center;
}
.cal-event-tag.google-event:hover { background: rgba(66,133,244,.22); }

/* Artı badge */
.cal-more {
    font-size: 9px; color: #4b5563;
    padding: 1px 0; text-align: right;
    flex-shrink: 0;
}

/* Light-mode + scrollbar kuralları odak-theme.css'de */

/* User Search Scrollbar (dark default) */
.user-checkbox-list
.user-checkbox-list
.user-checkbox-list
.user-checkbox-list

.calendar-modal-field-label {
    min-height: 34px !important;
    height: 34px !important;
    display: flex !important;
    align-content: flex-end;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 2px 4px;
    line-height: 1.15;
    overflow: hidden !important;
    text-overflow: clip !important;
    white-space: normal !important;
}
.calendar-modal-field-label span {
    flex-shrink: 0;
    letter-spacing: 0;
    margin-left: 0 !important;
    white-space: nowrap;
}

/* extracted from isletme-panel\builder.php */

/* GrapesJS UI Theme overrides to match our admin panel */
.gjs-one-bg {
    background-color: #000000;
}
.gjs-two-color {
    color: #e5e7eb;
}
.gjs-three-bg {
    background-color: #1f2937;
    color: white;
}
.gjs-four-color,
.gjs-four-color-h:hover {
    color: #3b82f6;
}
.gjs-radio-item-label {
    color: #9ca3af;
}

/* Light mode adjustments */
.light .gjs-one-bg { background-color: #f9fafb; color: #000000; border-color: #e5e7eb; }
.light .gjs-two-color { color: #4b5563; }
.light .gjs-three-bg { background-color: #f3f4f6; color: #000000; }

/* Make builder take full height minus header */
.builder-container {
    height: calc(100vh - 180px);
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.1);
}
.dark .builder-container {
    border: 1px solid rgba(255,255,255,0.1);
}
html:not(.dark) .builder-container {
    border: 1px solid rgba(0,0,0,0.1);
}

#gjs {
    border: none;
}


/* extracted from \error.php */

        html {
            scroll-behavior: smooth;
            overflow-x: hidden;
        }

        body {
            font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            overflow-x: hidden;
        }

        /* Mobil menü animasyonu */
        #mobile-menu {
            overflow: hidden;
            transition: max-height 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
        }

        #mobile-menu.closed {
            max-height: 0;
            opacity: 0;
            pointer-events: none;
            transform: translateY(-0.25rem);
        }

        #mobile-menu.open {
            max-height: 450px;
            opacity: 1;
            pointer-events: auto;
            transform: translateY(0);
        }

        :root {
            --sb-track: #000000;
            --sb-thumb: #4b5563;
            --sb-thumb-hover: #9ca3af;
        }

        @media (prefers-color-scheme: light) {
            :root {
                --sb-track: #f9fafb;
                --sb-thumb: #d1d5db;
                --sb-thumb-hover: #9ca3af;
            }
        }

        html.light, body.light {
            --sb-track: #f9fafb;
            --sb-thumb: #d1d5db;
            --sb-thumb-hover: #9ca3af;
        }

        * {
            scrollbar-width: thin;
            scrollbar-color: var(--sb-thumb) var(--sb-track);
        }
    
/* extracted from \index.php */

        html { scroll-behavior: smooth; overflow-x: hidden; }
        body { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; overflow-x: hidden; }

        /* Mobil menü animasyonu */
        #mobile-menu {
            overflow: hidden;
            transition: max-height 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
        }

        #mobile-menu.closed {
            max-height: 0;
            opacity: 0;
            pointer-events: none;
            transform: translateY(-0.25rem);
        }

        #mobile-menu.open {
            max-height: 450px;
            opacity: 1;
            pointer-events: auto;
            transform: translateY(0);
        }

        :root {
            --sb-track: #000000;
            --sb-thumb: #4b5563;
            --sb-thumb-hover: #9ca3af;
        }

        @media (prefers-color-scheme: light) {
            :root {
                --sb-track: #f9fafb;
                --sb-thumb: #d1d5db;
                --sb-thumb-hover: #9ca3af;
            }
        }

        html.light, body.light {
            --sb-track: #f9fafb;
            --sb-thumb: #d1d5db;
            --sb-thumb-hover: #9ca3af;
        }

        * {
            scrollbar-width: thin;
            scrollbar-color: var(--sb-thumb) var(--sb-track);
        }
    
/* extracted from \admin\forgot-password.php */

        html { scroll-behavior: smooth; }
        body { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
        * { scrollbar-width: thin; scrollbar-color: #4b5563 #000000; }

        body.light { background: #f5f5f7; color: #1d1d1f; }
        body.light .bg-black { background: #ffffff !important; }
        body.light .border-white\/10 { border-color: rgba(0,0,0,0.1) !important; }
        body.light .border-white\/20 { border-color: rgba(0,0,0,0.15) !important; }
        body.light .text-white { color: #1d1d1f !important; }
        body.light .text-gray-500 { color: #6e6e73 !important; }
        body.light .text-gray-600 { color: #aeaeb2 !important; }
        body.light .text-gray-400 { color: #6e6e73 !important; }
        body.light .bg-white { background: #1d1d1f !important; }
        body.light .text-black { color: #ffffff !important; }
        body.light .hover\:bg-gray-200:hover { background: #3a3a3c !important; }
        body.light .hover\:text-white:hover { color: #1d1d1f !important; }
        body.light .bg-white\/\[0\.03\] { background: rgba(0,0,0,0.04) !important; }
        body.light input { background: #f5f5f7 !important; border-color: rgba(0,0,0,0.1) !important; color: #1d1d1f !important; }
        body.light input::placeholder { color: #aeaeb2 !important; }
        body.light input:focus { border-color: rgba(0,0,0,0.3) !important; }
        *, *::before, *::after { box-shadow: none !important; text-shadow: none !important; }
        [class*="drop-shadow"] { filter: none !important; }

        .step-panel { display: none; opacity: 0; transition: opacity 0.3s ease; }
        .step-panel.active { display: block; opacity: 1; }
    
/* extracted from \admin\login.php */

        html { scroll-behavior: smooth; }
        body { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
        * { scrollbar-width: thin; scrollbar-color: #4b5563 #000000; }
        
        body.light { background: #f5f5f7; color: #1d1d1f; }
        body.light .bg-black { background: #ffffff !important; }
        body.light .border-white\/10 { border-color: rgba(0,0,0,0.1) !important; }
        body.light .border-white\/20 { border-color: rgba(0,0,0,0.15) !important; }
        body.light .text-white { color: #1d1d1f !important; }
        body.light .text-gray-500 { color: #6e6e73 !important; }
        body.light .text-gray-600 { color: #aeaeb2 !important; }
        body.light .text-gray-400 { color: #6e6e73 !important; }
        body.light .bg-white { background: #1d1d1f !important; }
        body.light .text-black { color: #ffffff !important; }
        body.light .hover\:bg-gray-200:hover { background: #3a3a3c !important; }
        body.light .hover\:text-white:hover { color: #1d1d1f !important; }
        body.light .bg-white\/\[0\.03\] { background: rgba(0,0,0,0.04) !important; }
        body.light input { background: #f5f5f7 !important; border-color: rgba(0,0,0,0.1) !important; color: #1d1d1f !important; }
        body.light input::placeholder { color: #aeaeb2 !important; }
        body.light input:focus { border-color: rgba(0,0,0,0.3) !important; }
        body.light input[type="checkbox"] { background: #ffffff !important; border-color: rgba(0,0,0,0.2) !important; }
        body.light input[type="checkbox"]:checked { background: #1d1d1f !important; border-color: #1d1d1f !important; }
        body.light input[type="checkbox"]:checked::before { color: #ffffff !important; }
        *, *::before, *::after { box-shadow: none !important; text-shadow: none !important; }
        [class*="drop-shadow"] { filter: none !important; }
    
/* extracted from \admin\privacy-policy.php */

        :root {
            color-scheme: dark;
            --bg: #000000;
            --fg: #ffffff;
            --muted: #a1a1aa;
            --soft: #d4d4d8;
            --faint: #71717a;
            --border: rgba(255,255,255,.12);
            --border-strong: rgba(255,255,255,.2);
            --card: rgba(255,255,255,.03);
            --control-bg: rgba(0,0,0,.4);
            --control-active-bg: #ffffff;
            --control-active-fg: #000000;
            --control-fg: #d1d5db;
        }
        html.light {
            color-scheme: light;
            --bg: #f5f5f7;
            --fg: #1d1d1f;
            --muted: #6e6e73;
            --soft: #374151;
            --faint: #6b7280;
            --border: rgba(0,0,0,.1);
            --border-strong: rgba(0,0,0,.18);
            --card: #ffffff;
            --control-bg: rgba(255,255,255,.8);
            --control-active-bg: #1d1d1f;
            --control-active-fg: #ffffff;
            --control-fg: #4b5563;
        }
        @media (prefers-color-scheme: light) {
            html:not(.dark):not(.light) {
                color-scheme: light;
                --bg: #f5f5f7;
                --fg: #1d1d1f;
                --muted: #6e6e73;
                --soft: #374151;
                --faint: #6b7280;
                --border: rgba(0,0,0,.1);
                --border-strong: rgba(0,0,0,.18);
                --card: #ffffff;
                --control-bg: rgba(255,255,255,.8);
                --control-active-bg: #1d1d1f;
                --control-active-fg: #ffffff;
                --control-fg: #4b5563;
            }
        }
        * { box-sizing: border-box; }
        body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--fg); font-family: "Open Sauce One", system-ui, -apple-system, sans-serif; transition: background .2s ease, color .2s ease; }
        a { color: inherit; }
        .wrap { width: min(980px, calc(100% - 32px)); margin: 0 auto; padding: 32px 0 56px; }
        .top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 28px; border-bottom: 1px solid var(--border); }
        .brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
        .brand img { width: 44px; height: 44px; object-fit: contain; }
        .brand .logo-light { display: none; }
        html.light .brand .logo-dark { display: none; }
        html.light .brand .logo-light { display: block; }
        @media (prefers-color-scheme: light) {
            html:not(.dark):not(.light) .brand .logo-dark { display: none; }
            html:not(.dark):not(.light) .brand .logo-light { display: block; }
        }
        .brand span { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: lowercase; }
        .controls { display: flex; align-items: center; gap: 10px; }
        .langs { display: flex; height: 32px; align-items: center; gap: 4px; border: 1px solid var(--border-strong); background: var(--control-bg); border-radius: 999px; padding: 0 6px; font-size: 11px; }
        .langs a { min-width: 30px; padding: 6px 8px; border-radius: 999px; text-align: center; text-decoration: none; color: var(--control-fg); font-weight: 700; line-height: 1; transition: background .2s ease, color .2s ease; }
        .langs a.active { background: var(--control-active-bg); color: var(--control-active-fg); }
        .theme-btn { display: inline-flex; height: 32px; min-width: 32px; align-items: center; justify-content: center; border: 1px solid var(--border-strong); background: var(--control-bg); color: var(--control-fg); border-radius: 999px; text-decoration: none; transition: border-color .2s ease, color .2s ease; }
        .theme-btn:hover { border-color: var(--fg); color: var(--fg); }
        h1 { margin: 40px 0 12px; font-size: clamp(32px, 5vw, 54px); line-height: 1; letter-spacing: -0.04em; }
        .lead { margin: 0 0 28px; max-width: 760px; color: var(--muted); line-height: 1.7; }
        .card { border: 1px solid var(--border); border-radius: 24px; padding: 28px; background: var(--card); }
        section + section { margin-top: 24px; }
        h2 { margin: 0 0 12px; font-size: 18px; letter-spacing: -0.02em; }
        p, li { color: var(--soft); line-height: 1.75; font-size: 14px; }
        ul { margin: 0; padding-left: 20px; }
        .meta { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0; color: var(--faint); font-size: 12px; }
        .pill { border: 1px solid var(--border); border-radius: 999px; padding: 8px 12px; }
        .footer { margin-top: 32px; color: var(--faint); font-size: 12px; text-transform: lowercase; }
        @media (max-width: 640px) { .top { align-items: flex-start; flex-direction: column; } .card { padding: 20px; border-radius: 18px; } }
    
/* extracted from \admin\terms.php */

        :root {
            color-scheme: dark;
            --bg: #000000;
            --fg: #ffffff;
            --muted: #a1a1aa;
            --soft: #d4d4d8;
            --faint: #71717a;
            --border: rgba(255,255,255,.12);
            --border-strong: rgba(255,255,255,.2);
            --card: rgba(255,255,255,.03);
            --control-bg: rgba(0,0,0,.4);
            --control-active-bg: #ffffff;
            --control-active-fg: #000000;
            --control-fg: #d1d5db;
        }
        html.light {
            color-scheme: light;
            --bg: #f5f5f7;
            --fg: #1d1d1f;
            --muted: #6e6e73;
            --soft: #374151;
            --faint: #6b7280;
            --border: rgba(0,0,0,.1);
            --border-strong: rgba(0,0,0,.18);
            --card: #ffffff;
            --control-bg: rgba(255,255,255,.8);
            --control-active-bg: #1d1d1f;
            --control-active-fg: #ffffff;
            --control-fg: #4b5563;
        }
        @media (prefers-color-scheme: light) {
            html:not(.dark):not(.light) {
                color-scheme: light;
                --bg: #f5f5f7;
                --fg: #1d1d1f;
                --muted: #6e6e73;
                --soft: #374151;
                --faint: #6b7280;
                --border: rgba(0,0,0,.1);
                --border-strong: rgba(0,0,0,.18);
                --card: #ffffff;
                --control-bg: rgba(255,255,255,.8);
                --control-active-bg: #1d1d1f;
                --control-active-fg: #ffffff;
                --control-fg: #4b5563;
            }
        }
        * { box-sizing: border-box; }
        body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--fg); font-family: "Open Sauce One", system-ui, -apple-system, sans-serif; transition: background .2s ease, color .2s ease; }
        a { color: inherit; }
        .wrap { width: min(980px, calc(100% - 32px)); margin: 0 auto; padding: 32px 0 56px; }
        .top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 28px; border-bottom: 1px solid var(--border); }
        .brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
        .brand img { width: 44px; height: 44px; object-fit: contain; }
        .brand .logo-light { display: none; }
        html.light .brand .logo-dark { display: none; }
        html.light .brand .logo-light { display: block; }
        @media (prefers-color-scheme: light) {
            html:not(.dark):not(.light) .brand .logo-dark { display: none; }
            html:not(.dark):not(.light) .brand .logo-light { display: block; }
        }
        .brand span { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: lowercase; }
        .controls { display: flex; align-items: center; gap: 10px; }
        .langs { display: flex; height: 32px; align-items: center; gap: 4px; border: 1px solid var(--border-strong); background: var(--control-bg); border-radius: 999px; padding: 0 6px; font-size: 11px; }
        .langs a { min-width: 30px; padding: 6px 8px; border-radius: 999px; text-align: center; text-decoration: none; color: var(--control-fg); font-weight: 700; line-height: 1; transition: background .2s ease, color .2s ease; }
        .langs a.active { background: var(--control-active-bg); color: var(--control-active-fg); }
        .theme-btn { display: inline-flex; height: 32px; min-width: 32px; align-items: center; justify-content: center; border: 1px solid var(--border-strong); background: var(--control-bg); color: var(--control-fg); border-radius: 999px; text-decoration: none; transition: border-color .2s ease, color .2s ease; }
        .theme-btn:hover { border-color: var(--fg); color: var(--fg); }
        h1 { margin: 40px 0 12px; font-size: clamp(32px, 5vw, 54px); line-height: 1; letter-spacing: -0.04em; }
        .lead { margin: 0 0 28px; max-width: 760px; color: var(--muted); line-height: 1.7; }
        .card { border: 1px solid var(--border); border-radius: 24px; padding: 28px; background: var(--card); }
        section + section { margin-top: 24px; }
        h2 { margin: 0 0 12px; font-size: 18px; letter-spacing: -0.02em; }
        p, li { color: var(--soft); line-height: 1.75; font-size: 14px; }
        ul { margin: 0; padding-left: 20px; }
        .meta { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0; color: var(--faint); font-size: 12px; }
        .pill { border: 1px solid var(--border); border-radius: 999px; padding: 8px 12px; }
        .footer { margin-top: 32px; color: var(--faint); font-size: 12px; text-transform: lowercase; }
        @media (max-width: 640px) { .top { align-items: flex-start; flex-direction: column; } .card { padding: 20px; border-radius: 18px; } }
    
/* extracted from \isletme\cancel.php */

        body { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
        *, *::before, *::after { box-shadow: none !important; text-shadow: none !important; }
        @keyframes scaleIn { from { opacity: 0; transform: scale(0.9) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } }
        .animate-in { animation: scaleIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
    
/* extracted from \isletme\forgot-password.php */

        :root { --brand: <?= $themeColor ?>; }
        .dark { --brand: #ffffff; }
        body { font-family: "Open Sauce One", system-ui, -apple-system, sans-serif; }
        *, *::before, *::after { box-shadow: none !important; text-shadow: none !important; }
        [class*="drop-shadow"] { filter: none !important; }
        .step-panel { display: none; opacity: 0; transition: opacity 0.3s ease; }
        .step-panel.active { display: block; opacity: 1; }
    
/* extracted from \isletme\index.php */

        :root { --brand: #000000; }
        .dark { --brand: #ffffff; }
        body { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
        html {
            scrollbar-width: thin;
            scrollbar-color: #9ca3af #f5f5f7;
        }
        html.light {
            scrollbar-color: #9ca3af #f5f5f7;
        }
        html.dark {
            scrollbar-color: #4b5563 #000000;
        }
        * {
            scrollbar-width: thin;
            scrollbar-color: inherit;
        }
        html.light
        html.light
        html.light
        html.dark
        html.dark
        html.dark
        *, *::before, *::after { box-shadow: none !important; text-shadow: none !important; }
        [class*="drop-shadow"] { filter: none !important; }
        * {
            -webkit-tap-highlight-color: rgba(17, 24, 39, .12);
            accent-color: #000000;
        }
        .dark * {
            -webkit-tap-highlight-color: rgba(255, 255, 255, .16);
            accent-color: #ffffff;
        }
        ::selection {
            background: #000000;
            color: #ffffff;
        }
        .dark ::selection {
            background: #ffffff;
            color: #000000;
        }
        a:focus-visible,
        button:focus-visible,
        input:focus-visible,
        select:focus-visible,
        textarea:focus-visible {
            outline: 2px solid #000000;
            outline-offset: 2px;
        }
        .dark a:focus-visible,
        .dark button:focus-visible,
        .dark input:focus-visible,
        .dark select:focus-visible,
        .dark textarea:focus-visible {
            outline-color: #ffffff;
        }
        input:focus,
        select:focus,
        textarea:focus {
            border-color: #000000 !important;
            --tw-ring-color: transparent !important;
        }
        .dark input:focus,
        .dark select:focus,
        .dark textarea:focus {
            border-color: rgba(255,255,255,.45) !important;
            --tw-ring-color: transparent !important;
        }
        .time-slot.selected,
        .time-slot:focus-visible {
            border-color: #000000 !important;
            background: #000000 !important;
            color: #ffffff !important;
        }
        .dark .time-slot.selected,
        .dark .time-slot:focus-visible {
            border-color: #ffffff !important;
            background: #ffffff !important;
            color: #000000 !important;
        }
        .surface-card {
            border: 1px solid #e5e7eb;
            background: #ffffff;
        }
        .dark .surface-card {
            border-color: rgba(255,255,255,.08);
            background: rgba(255,255,255,.02);
        }
        
        .tab-btn {
            position: relative;
            flex: 1;
            border-radius: 9999px;
            padding: .75rem 1rem;
            transition: all .2s;
            background: #ffffff;
            color: #6b7280;
        }
        .tab-btn.active {
            background: #000000;
            color: #fff;
        }
        .tab-btn:not(.active):hover { color: #000000; }
        .dark .tab-btn.active {
            background: #fff;
            color: #000;
        }
        .dark .tab-btn {
            background: rgba(255,255,255,0.05);
            color: #9ca3af;
        }
        .dark .tab-btn:not(.active):hover { color: #fff; }

        .step-content { display: none; animation: fadeIn 0.3s ease; }
        .step-content.active { display: block; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

        .select-card { cursor: pointer; transition: transform .18s, border-color .18s, background .18s; margin: 2px; }
        .select-card:hover { transform: translateY(-1px); }
        .select-card.selected {
            border-color: #000000 !important;
            background-color: #000000 !important;
            color: #fff !important;
        }
        .dark .select-card.selected {
            border-color: #fff !important;
            background-color: #fff !important;
            color: #000 !important;
        }
        .select-card.selected p, .select-card.selected i, .select-card.selected span { color: #fff !important; }
        .dark .select-card.selected p, .dark .select-card.selected i, .dark .select-card.selected span { color: #000 !important; }
        .select-card.selected .choice-fallback {
            border-color: rgba(255,255,255,.45) !important;
            background: rgba(255,255,255,.12) !important;
        }
        .select-card.selected .choice-fallback i,
        .select-card.selected .choice-fallback span {
            color: #fff !important;
        }
        .dark .select-card.selected .choice-fallback {
            border-color: rgba(0,0,0,.25) !important;
            background: rgba(0,0,0,.08) !important;
        }
        .dark .select-card.selected .choice-fallback i,
        .dark .select-card.selected .choice-fallback span {
            color: #000 !important;
        }

        .time-slot { cursor: pointer; transition: all 0.2s; }
        .time-slot.selected { background-color: #000000 !important; color: #fff !important; border-color: #000000 !important; font-weight: 600; }
        .dark .time-slot.selected { background-color: #fff !important; color: #000 !important; border-color: #fff !important; }
        .time-slot.disabled { opacity: 0.3; pointer-events: none; text-decoration: line-through; }

        .input-field {
            width: 100%;
            border-width: 1px;
            border-radius: 14px;
            padding: .85rem 1rem;
            transition: border 0.2s, background .2s;
            outline: none;
            appearance: none;
            -webkit-appearance: none;
        }
        .input-field:focus { border-color: #000000; }
        .dark .input-field:focus { border-color: rgba(255,255,255,.3); }
        .input-field:focus { box-shadow: none; }
        .dark input[type="date"] { color-scheme: dark; }
        html.dark .input-field,
        body.dark .input-field,
        .dark .input-field {
            color: #ffffff !important;
            -webkit-text-fill-color: #ffffff !important;
            border-color: rgba(255,255,255,.12) !important;
        }
        html.dark .input-field::placeholder,
        body.dark .input-field::placeholder,
        .dark .input-field::placeholder {
            color: #9ca3af !important;
            -webkit-text-fill-color: #9ca3af !important;
        }
        html.dark input.input-field[type="date"],
        html.dark input.input-field[type="time"],
        html.dark input.input-field[type="month"],
        html.dark input.input-field[type="datetime-local"],
        body.dark input.input-field[type="date"],
        body.dark input.input-field[type="time"],
        body.dark input.input-field[type="month"],
        body.dark input.input-field[type="datetime-local"],
        .dark input.input-field[type="date"],
        .dark input.input-field[type="time"],
        .dark input.input-field[type="month"],
        .dark input.input-field[type="datetime-local"] {
            color: #ffffff !important;
            -webkit-text-fill-color: #ffffff !important;
            color-scheme: dark;
        }
        html.dark input.input-field[type="date"]::-webkit-calendar-picker-indicator,
        html.dark input.input-field[type="time"]::-webkit-calendar-picker-indicator,
        html.dark input.input-field[type="month"]::-webkit-calendar-picker-indicator,
        html.dark input.input-field[type="datetime-local"]::-webkit-calendar-picker-indicator,
        body.dark input.input-field[type="date"]::-webkit-calendar-picker-indicator,
        body.dark input.input-field[type="time"]::-webkit-calendar-picker-indicator,
        body.dark input.input-field[type="month"]::-webkit-calendar-picker-indicator,
        body.dark input.input-field[type="datetime-local"]::-webkit-calendar-picker-indicator,
        .dark input.input-field[type="date"]::-webkit-calendar-picker-indicator,
        .dark input.input-field[type="time"]::-webkit-calendar-picker-indicator,
        .dark input.input-field[type="month"]::-webkit-calendar-picker-indicator,
        .dark input.input-field[type="datetime-local"]::-webkit-calendar-picker-indicator {
            filter: invert(1);
            opacity: .86;
        }

        @media (max-width: 1023px) {
            #randevu-al {
                gap: 0 !important;
            }
            #randevu-al > aside > .surface-card {
                margin-bottom: 16px !important;
            }
            #randevu-al > aside > .surface-card:last-child {
                margin-bottom: 0 !important;
            }
            #randevu-al > #booking-panel {
                margin-bottom: 16px !important;
            }
        }

        @media (max-width: 640px) {
            body {
                overflow-x: hidden;
                -webkit-overflow-scrolling: touch;
            }
            #randevu-al {
                padding: 12px 12px 96px !important;
                gap: 0 !important;
            }
            .surface-card {
                border-radius: 20px !important;
            }
            #randevu-al > .surface-card,
            #booking-panel .surface-card {
                padding: 18px !important;
            }
            #booking-panel {
                min-width: 0;
            }
            #booking-panel > .surface-card:first-child {
                position: sticky;
                top: 8px;
                z-index: 20;
                margin-bottom: 12px !important;
                border-radius: 999px !important;
                padding: 6px !important;
                backdrop-filter: blur(16px);
            }
            .tab-btn {
                min-height: 44px;
                padding: .65rem .75rem;
                font-size: 11px !important;
                letter-spacing: .06em !important;
                white-space: nowrap;
            }
            .input-field {
                min-height: 48px;
                border-radius: 14px;
                font-size: 16px;
            }
            #serviceList,
            #step2 .space-y-3.max-h-96,
            #slotsContainer {
                max-height: none !important;
                overflow: visible !important;
                padding-right: 0 !important;
            }
            #slotsContainer {
                grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
                gap: 10px !important;
            }
            .select-card {
                border-radius: 16px !important;
                padding: 14px !important;
            }
            .select-card .choice-fallback,
            .select-card img {
                width: 44px !important;
                height: 44px !important;
            }
            .service-name-text,
            .select-card p {
                white-space: normal;
                overflow-wrap: anywhere;
            }
            .step-content h2 {
                font-size: 1.05rem !important;
                line-height: 1.3;
            }
            #btnNext1,
            #btnNext2,
            #btnNext3,
            #btnFinalSubmit {
                min-height: 48px;
                border-radius: 999px;
                font-size: 12px !important;
                letter-spacing: .08em !important;
            }
            .time-slot {
                min-height: 46px;
                border-radius: 14px !important;
                font-size: 15px;
            }
        }
    
/* extracted from \isletme\login.php */

        :root { --brand: <?= $themeColor ?>; }
        .dark { --brand: #ffffff; }
        body { font-family: "Open Sauce One", system-ui, -apple-system, sans-serif; }
        *, *::before, *::after { box-shadow: none !important; text-shadow: none !important; }
        [class*="drop-shadow"] { filter: none !important; }
    
/* extracted from \isletme\profile.php */

        :root { --brand: <?= $themeColor ?>; }
        .dark { --brand: #ffffff; }
        body { font-family: system-ui, -apple-system, sans-serif; }
        *, *::before, *::after { box-shadow: none !important; text-shadow: none !important; }
        [class*="drop-shadow"] { filter: none !important; }
        .tab-btn { position: relative; transition: color 0.3s; }
        .tab-btn::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background: var(--brand); transition: width 0.3s; }
        .tab-btn.active::after { width: 100%; }
        .tab-content { display: none; animation: fadeIn 0.3s ease; }
        .tab-content.active { display: block; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        .star-label { cursor: pointer; color: #d1d5db; transition: color 0.2s; font-size: 1.5rem; }
        .star-label.hover, .star-label.active { color: #eab308; }
        .settings-tab { position: relative; }
        .settings-tab::after { content: ''; position: absolute; bottom: -1px; left: 50%; transform: translateX(-50%); width: 0; height: 2px; background: #000000; transition: width 0.3s; }
        .dark .settings-tab::after { background: #fff; }
        .settings-tab.active { color: #000000 !important; }
        .dark .settings-tab.active { color: #fff !important; }
        .settings-tab.active::after { width: 60%; }
        .odak-remove-image-btn {
            background-color: #000000;
            color: #ffffff;
            border: 2px solid #ffffff;
            font-size: 10px;
        }
        .odak-remove-image-btn:hover { background-color: #1f2937; }
        .dark .odak-remove-image-btn {
            background-color: #ffffff;
            color: #000000;
            border-color: #000000;
        }
        .dark .odak-remove-image-btn:hover { background-color: #f3f4f6; }
    
/* extracted from \isletme\register.php */

        :root { --brand: <?= $themeColor ?>; }
        .dark { --brand: #ffffff; }
        body { font-family: "Open Sauce One", system-ui, -apple-system, sans-serif; }
        *, *::before, *::after { box-shadow: none !important; text-shadow: none !important; }
        [class*="drop-shadow"] { filter: none !important; }
    
/* extracted from \isletme\verify.php */

        body { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
        *, *::before, *::after { box-shadow: none !important; text-shadow: none !important; }
        @keyframes scaleIn { from { opacity: 0; transform: scale(0.9) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } }
        .animate-in { animation: scaleIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
        @keyframes checkmark { from { stroke-dashoffset: 50; } to { stroke-dashoffset: 0; } }
    
/* extracted from \isletme-panel\calendar.php */

/* Event pill stilleri odak-theme.css'de */
.calendar-day-panel {
    min-height: 0;
}
.calendar-appointments-scroll {
    max-height: clamp(260px, calc(100dvh - 300px), 620px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 4px;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
}
@media (max-width: 767px) {
    .calendar-page-head {
        margin-bottom: 16px !important;
    }
    .calendar-page-head h1 {
        font-size: 1.45rem !important;
        line-height: 1.2 !important;
    }
    .calendar-page-actions {
        display: grid !important;
        grid-template-columns: 1fr 44px 44px;
        gap: 8px !important;
        width: 100%;
    }
    .calendar-page-actions .calendar-add-action {
        grid-column: 1 / -1;
        width: 100%;
    }
    .calendar-page-actions .calendar-today-action {
        width: 100%;
    }
    .calendar-filter-card {
        margin-bottom: 14px !important;
    }
    .calendar-layout {
        gap: 14px !important;
    }
    .calendar-month-panel .calendar-month-head {
        padding: 14px !important;
    }
    .calendar-day-panel {
        position: relative;
    }
    .calendar-day-panel > div:first-child {
        align-items: flex-start;
    }
    #cancelDayBtn {
        min-height: 38px;
        padding-inline: 10px;
        font-size: 10px;
    }
    #appointmentsList {
        margin-top: 14px !important;
        max-height: clamp(280px, 70dvh, 560px);
    }
    #appointmentsList .appointment-card {
        box-shadow: 0 10px 24px rgba(15, 23, 42, .04);
    }
    #appointmentsList .appointment-card .admin-btn {
        min-height: 42px;
    }
    .calendar-live-toast,
    .fixed.right-5.top-20 {
        left: 12px !important;
        right: 12px !important;
        top: 76px !important;
        max-width: none !important;
    }
}

/* extracted from \isletme-panel\forgot-password.php */

        html { scroll-behavior: smooth; }
        body { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
        * { scrollbar-width: thin; scrollbar-color: #4b5563 #000000; }

        body.light { background: #f5f5f7; color: #1d1d1f; }
        body.light .bg-black { background: #ffffff !important; }
        body.light .border-white\/10 { border-color: rgba(0,0,0,0.1) !important; }
        body.light .border-white\/20 { border-color: rgba(0,0,0,0.15) !important; }
        body.light .text-white { color: #1d1d1f !important; }
        body.light .text-gray-500 { color: #6e6e73 !important; }
        body.light .text-gray-600 { color: #aeaeb2 !important; }
        body.light .text-gray-400 { color: #6e6e73 !important; }
        body.light .bg-white { background: #1d1d1f !important; }
        body.light .text-black { color: #ffffff !important; }
        body.light .hover\:bg-gray-200:hover { background: #3a3a3c !important; }
        body.light .hover\:text-white:hover { color: #1d1d1f !important; }
        body.light .bg-white\/\[0\.03\] { background: rgba(0,0,0,0.04) !important; }
        body.light input { background: #f5f5f7 !important; border-color: rgba(0,0,0,0.1) !important; color: #1d1d1f !important; }
        body.light input::placeholder { color: #aeaeb2 !important; }
        body.light input:focus { border-color: rgba(0,0,0,0.3) !important; }

        .step-panel { display: none; opacity: 0; transition: opacity 0.3s ease; }
        .step-panel.active { display: block; opacity: 1; }
    
/* extracted from \isletme-panel\login.php */

        html { scroll-behavior: smooth; }
        body { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
        * { scrollbar-width: thin; scrollbar-color: #4b5563 #000000; }
        
        body.light { background: #f5f5f7; color: #1d1d1f; }
        body.light .bg-black { background: #ffffff !important; }
        body.light .border-white\/10 { border-color: rgba(0,0,0,0.1) !important; }
        body.light .border-white\/20 { border-color: rgba(0,0,0,0.15) !important; }
        body.light .text-white { color: #1d1d1f !important; }
        body.light .text-gray-500 { color: #6e6e73 !important; }
        body.light .text-gray-600 { color: #aeaeb2 !important; }
        body.light .text-gray-400 { color: #6e6e73 !important; }
        body.light .bg-white { background: #1d1d1f !important; }
        body.light .text-black { color: #ffffff !important; }
        body.light .hover\:bg-gray-200:hover { background: #3a3a3c !important; }
        body.light .hover\:text-white:hover { color: #1d1d1f !important; }
        body.light .bg-white\/\[0\.03\] { background: rgba(0,0,0,0.04) !important; }
        body.light input { background: #f5f5f7 !important; border-color: rgba(0,0,0,0.1) !important; color: #1d1d1f !important; }
        body.light input::placeholder { color: #aeaeb2 !important; }
        body.light input:focus { border-color: rgba(0,0,0,0.3) !important; }
        body.light input[type="checkbox"] { background: #ffffff !important; border-color: rgba(0,0,0,0.2) !important; }
        body.light input[type="checkbox"]:checked { background: #1d1d1f !important; border-color: #1d1d1f !important; }
        body.light input[type="checkbox"]:checked::before { color: #ffffff !important; }
    
/* extracted from \portfolio\index.php */

        .reels-wrap,.reels-wrap *,.reels-wrap *::before,.reels-wrap *::after{box-sizing:border-box;margin:0;padding:0}
        body:has(.reels-wrap){height:100%;overflow:hidden;background:#000;color:#fff;font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased}

        :root {
            --sb-track: #000000;
            --sb-thumb: rgba(255, 255, 255, 0.2);
            --sb-thumb-hover: rgba(255, 255, 255, 0.3);
        }

        @media (prefers-color-scheme: light) {
            :root {
                --sb-track: #f9fafb;
                --sb-thumb: rgba(0, 0, 0, 0.1);
                --sb-thumb-hover: rgba(0, 0, 0, 0.2);
            }
        }

        html.light, body.light {
            --sb-track: #f9fafb;
            --sb-thumb: rgba(0, 0, 0, 0.1);
            --sb-thumb-hover: rgba(0, 0, 0, 0.2);
        }

        .reels-wrap {
            scrollbar-width: none; /* Hide standard scrollbars for reels */
            -ms-overflow-style: none;
        }

        /* Container */
        .reels-wrap{position:fixed;inset:0;overflow-y:scroll;scroll-snap-type:y mandatory;-webkit-overflow-scrolling:touch}
        .reel{position:relative;width:100%;height:100dvh;scroll-snap-align:start;scroll-snap-stop:always;display:flex;align-items:center;justify-content:center;background:#000;overflow:hidden}

        /* Desktop blur bg */
        .reel-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
        .reel-bg video{width:100%;height:100%;object-fit:cover;filter:blur(40px) brightness(.35) saturate(1.3);transform:scale(1.2);pointer-events:none}

        /* Video wrapper */
        .reel-vw{position:relative;z-index:1;width:100%;height:100%;display:flex;align-items:center;justify-content:center;user-select:none;-webkit-user-select:none}
        .reel-vw video.mv{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
        @media(min-width:769px){
            .reel-vw{max-width:calc(100dvh*9/16);box-shadow:0 0 80px rgba(0,0,0,.7)}
        }

        /* Progress bar */
        .r-prog-wrap{position:absolute;bottom:0;left:0;right:0;height:24px;z-index:25;display:flex;align-items:flex-end;cursor:pointer;background:transparent;touch-action:none;}
        .r-prog{width:100%;height:3px;background:rgba(255,255,255,.3);transition:height .2s,background .2s;position:relative}
        .r-prog-wrap.dragging .r-prog, .r-prog-wrap:hover .r-prog{height:6px;background:rgba(255,255,255,.4)}
        .r-prog-bar{height:100%;background:rgba(255,255,255,.9);width:0;transition:none}

        /* Play/Pause indicator */
        .pp-ind{position:absolute;z-index:20;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);width:80px;height:80px;border-radius:50%;background:rgba(255,255,255,.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;transition:opacity .15s,transform .15s}
        .pp-ind.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
        .pp-ind i{font-size:32px;color:#fff}

        /* Speed indicator */
        .speed-ind{position:absolute;z-index:15;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(255,255,255,.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:6px 16px;border-radius:20px;font-size:14px;font-weight:700;color:#fff;pointer-events:none;opacity:0;transition:opacity .2s;display:flex;align-items:center;gap:6px;border:1px solid rgba(255,255,255,.15)}
        .speed-ind.show{opacity:1}
        .speed-ind i{font-size:16px}

        /* Right-side actions */
        .r-actions{position:absolute;z-index:15;right:12px;bottom:max(20px,env(safe-area-inset-bottom,20px));display:flex;flex-direction:column;align-items:center;gap:16px}
        @media(min-width:769px){.r-actions{right:-60px}}
        .a-btn{display:flex;flex-direction:column;align-items:center;gap:4px;background:none;border:none;cursor:pointer;color:#fff;transition:transform .2s;-webkit-tap-highlight-color:transparent}
        .a-btn:active{transform:scale(.9)}
        .a-btn i{font-size:28px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));transition:color .2s,transform .3s,filter .3s}
        .a-btn span{font-size:11px;font-weight:600;text-shadow:0 1px 4px rgba(0,0,0,.7)}
        .a-btn.liked i{color:#ff2d55;transform:scale(1.2);filter:drop-shadow(0 2px 8px rgba(255,45,85,.5))}
        .a-btn:not(.liked) i{color:#fff;transform:scale(1);filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}
        .a-prof{width:42px;height:42px;aspect-ratio:1/1;flex-shrink:0;border-radius:50%;border:1.5px solid rgba(255,255,255,.4);padding:2px;box-shadow:0 2px 8px rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center}
        .a-prof img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}

        /* Partner Profil */
        .r-info-user.collab{gap:8px; align-items:center;}
        .collab-avs{position:relative;width:64px;height:40px;margin-right:2px;flex-shrink:0;}
        .collab-avs img{position:absolute;top:0;width:40px;height:40px;aspect-ratio:1/1;border-radius:50%;object-fit:cover;cursor:pointer;border:1.5px solid rgba(255,255,255,.4);padding:2px;background:rgba(0,0,0,0.8);box-shadow:0 2px 8px rgba(0,0,0,.5);}
        /* odakagency (left, foreground) */
        .collab-avs img:nth-child(1){left:0;z-index:2;}
        /* partner (right, background) */
        .collab-avs img:nth-child(2){left:24px;z-index:1;}
        .r-info-user.collab .uname{font-size:14px;font-weight:700;cursor:pointer;text-shadow:0 1px 4px rgba(0,0,0,.7);}


        /* Info bar */
        .r-info{position:absolute;z-index:10;bottom:0;left:0;right:0;padding:20px 16px;padding-bottom:max(20px,env(safe-area-inset-bottom,20px));padding-right:80px;background:linear-gradient(to top,rgba(0,0,0,.7),rgba(0,0,0,.3) 60%,transparent);pointer-events:none}
        @media(min-width:769px){.r-info{padding-right:16px}}
        .r-info>*{pointer-events:auto}
        .r-info-user{display:flex;align-items:center;gap:10px;margin-bottom:8px}
        .r-info-user img{width:40px;height:40px;aspect-ratio:1/1;flex-shrink:0;border-radius:50%;border:1.5px solid rgba(255,255,255,.4);padding:2px;object-fit:cover}
        .r-info-user .uname{font-size:14px;font-weight:700;text-shadow:0 1px 4px rgba(0,0,0,.7)}
        .r-desc{font-size:13px;line-height:1.5;color:rgba(255,255,255,.9);text-shadow:0 1px 4px rgba(0,0,0,.7);overflow:hidden;cursor:pointer;white-space:pre-line}
        .r-desc:not(.exp){max-height:22px}
        .r-desc.exp{max-height:500px;overflow-y:auto}
        .r-dt{display:inline-block;color:rgba(255,255,255,.6);font-weight:600;font-size:12px;margin-top:4px;cursor:pointer;white-space:nowrap;-webkit-tap-highlight-color:transparent}

        /* Header */
        .r-header{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:12px 16px;padding-top:max(12px,env(safe-area-inset-top,12px));background:linear-gradient(to bottom,rgba(0,0,0,.5),transparent);pointer-events:none}
        .r-header>*{pointer-events:auto}
        .r-header .htitle{font-size:18px;font-weight:800;letter-spacing:.03em;text-shadow:0 2px 8px rgba(0,0,0,.5)}
        .hbtn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,255,255,.1);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.15);transition:background .2s;cursor:pointer;color:#fff;text-decoration:none}
        .hbtn:hover{background:rgba(255,255,255,.2)}
        .hbtn i{font-size:18px}
        .hbtn span{font-size:11px;font-weight:700}
        
        .htitle-wrap{position:relative;display:inline-flex;flex-direction:column;align-items:center;cursor:pointer;background:rgba(255,255,255,.1);padding:4px 12px;border-radius:20px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.15);transition:background .2s;}
        .htitle-wrap:hover{background:rgba(255,255,255,.15);}
        .htitle-top{display:flex;align-items:center;gap:6px;}
        .htitle{font-size:13px;font-weight:700;color:#fff;text-shadow:0 0 4px rgba(0,0,0,.5)}
        .htitle-top i{font-size:11px;color:#fff;transition:transform .2s;}
        #partnerFilterBtn.open .htitle-top i{transform:rotate(180deg);}
        
        .h-sel-info{display:none;align-items:center;gap:4px;margin-top:2px;}
        .h-sel-info.show{display:flex;}
        .h-sel-info img{width:16px;height:16px;aspect-ratio:1/1;flex-shrink:0;border-radius:50%;object-fit:cover;border:1px solid rgba(255,255,255,0.4);}
        .h-sel-info span{font-size:10px;color:rgba(255,255,255,.8);font-weight:600;}

        .v-loader{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10;display:none;pointer-events:none;}
        .v-loader.show{display:block;}

        .p-dropdown{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(-10px);background:rgba(255,255,255,.15);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,0.15);border-radius:16px;width:max-content;min-width:200px;max-width:90vw;max-height:45vh;overflow-y:auto;padding:8px;opacity:0;pointer-events:none;transition:all .2s cubic-bezier(0.16,1,0.3,1);box-shadow:0 10px 40px rgba(0,0,0,0.5);z-index:101;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent;}
        #partnerFilterBtn.open .p-dropdown{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0);}
        .p-dropdown.p-dropdown.p-dropdown
        
        .p-drop-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 10px;color:#fff;text-decoration:none;border-radius:10px;transition:background .2s;cursor:pointer;}
        .p-drop-item:hover{background:rgba(255,255,255,0.1);}
        .p-drop-item.active{background:rgba(255,255,255,0.15);}
        .p-drop-left{display:flex;align-items:center;gap:8px;}
        .p-drop-left img{width:28px;height:28px;aspect-ratio:1/1;flex-shrink:0;border-radius:50%;object-fit:cover;border:1px solid rgba(255,255,255,0.15);}
        .p-drop-name{font-size:13px;font-weight:500;}
        .p-drop-item.active .p-drop-name{font-weight:700;}
        .p-drop-count{background:rgba(255,255,255,0.15);font-size:11px;padding:2px 6px;border-radius:10px;font-weight:600;}

        .hright{display:flex;align-items:center;gap:8px}

        /* Mute button in actions */
        .a-mute{display:flex;flex-direction:column;align-items:center;gap:4px;background:none;border:none;cursor:pointer;color:#fff;-webkit-tap-highlight-color:transparent}
        .a-mute i{font-size:22px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,255,255,.12);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.12);filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));transition:background .2s}
        .a-mute:active i{background:rgba(255,255,255,.25)}

        /* Overlays - Share */
        .s-overlay,.c-overlay{position:fixed;inset:0;z-index:500;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);display:none;align-items:flex-end;justify-content:center;opacity:0;transition:opacity .3s}
        .s-overlay.on,.c-overlay.on{display:flex;opacity:1}
        .s-popup{background:#1c1c1e;border-radius:20px 20px 0 0;width:100%;max-width:500px;padding:20px 16px;padding-bottom:max(20px,env(safe-area-inset-bottom,20px));transform:translateY(100%);transition:transform .35s cubic-bezier(.32,.72,0,1)}
        .s-overlay.on .s-popup{transform:translateY(0)}
        .s-handle{width:36px;height:4px;border-radius:2px;background:rgba(255,255,255,.3);margin:0 auto 16px}
        .s-popup h3{font-size:16px;font-weight:700;text-align:center;margin-bottom:20px}
        .s-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px;justify-items:center}
        .s-item{display:flex;flex-direction:column;align-items:center;gap:8px;background:none;border:none;color:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent}
        .s-icon{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;transition:transform .2s}
        .s-item:active .s-icon{transform:scale(.9)}
        .s-icon.cl{background:linear-gradient(135deg,#3a3a3c,#636366)}
        .s-icon.wa{background:#25D366}.s-icon.tw{background:#000}
        .s-icon.fb{background:#1877F2}.s-icon.tg{background:#0088cc}
        .s-icon.li{background:#0A66C2}
        .s-icon.em{background:linear-gradient(135deg,#ff6b6b,#ee5a24)}
        .s-icon.mo{background:linear-gradient(135deg,#636366,#8e8e93)}

        /* Toast */
        .toast{position:fixed;bottom:100px;left:50%;transform:translateX(-50%) translateY(20px);background:rgba(255,255,255,.15);backdrop-filter:blur(20px);padding:10px 24px;border-radius:12px;font-size:13px;font-weight:600;z-index:600;opacity:0;transition:opacity .3s,transform .3s;pointer-events:none;border:1px solid rgba(255,255,255,.1)}
        .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

        /* Comments overlay */
        .c-overlay{z-index:400}
        .c-panel{background:#1c1c1e;border-radius:20px 20px 0 0;width:100%;max-width:500px;max-height:60vh;display:flex;flex-direction:column;transform:translateY(100%);transition:transform .35s cubic-bezier(.32,.72,0,1)}
        .c-overlay.on .c-panel{transform:translateY(0)}
        .c-head{padding:12px 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.1);flex-shrink:0}
        .c-head h3{font-size:15px;font-weight:700}
        .c-close{background:none;border:none;color:#fff;font-size:20px;cursor:pointer;padding:4px}
        .c-list{flex:1;overflow-y:auto;padding:12px 16px;display:flex;flex-direction:column;gap:16px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent}
        .c-list.c-list.c-list
        .c-item{display:flex;gap:10px;animation:fadeUp .3s ease}
        @keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
        .c-item .c-av{width:32px;height:32px;border-radius:50%;object-fit:cover;flex-shrink:0}
        .c-item .c-body{flex:1}
        .c-item .c-name{font-size:12px;font-weight:700;color:rgba(255,255,255,.7)}
        .c-item .c-text{font-size:13px;line-height:1.45;color:rgba(255,255,255,.9);margin-top:2px;word-break:break-word}
        .c-item .c-time{font-size:11px;color:rgba(255,255,255,.4);margin-top:4px;display:flex;align-items:center;gap:8px}
        .c-item .c-acts{display:inline-flex;gap:6px}
        .c-item .c-acts button{background:none;border:none;color:rgba(255,255,255,.4);font-size:11px;cursor:pointer;padding:0;font-family:inherit;transition:color .2s}
        .c-item .c-acts button:hover{color:rgba(255,255,255,.7)}
        .c-item .c-acts .c-del:hover{color:#ff3b30}
        .no-c{text-align:center;color:rgba(255,255,255,.4);font-size:13px;padding:30px 0}
        .c-input{padding:12px 16px;padding-bottom:max(12px,env(safe-area-inset-bottom,12px));border-top:1px solid rgba(255,255,255,.1);display:flex;gap:10px;align-items:center;flex-shrink:0}
        .c-input img{width:28px;height:28px;border-radius:50%;object-fit:cover;flex-shrink:0}
        .c-input input{flex:1;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:8px 16px;font-size:13px;color:#fff;outline:none;font-family:inherit;transition:border-color .2s}
        .c-input input:focus{border-color:rgba(255,255,255,.3)}
        .c-input input::placeholder{color:rgba(255,255,255,.35)}
        .c-input .c-send{background:none;border:none;color:#0095f6;font-size:14px;font-weight:700;cursor:pointer;padding:4px 8px;opacity:.5;transition:opacity .2s}
        .c-input .c-send.act{opacity:1}
        .c-input.editing{background:rgba(0,149,246,.08);border-top-color:rgba(0,149,246,.3)}
        .c-input.editing .c-send{font-size:18px;opacity:1}
        .c-edit-bar{display:none;padding:6px 16px;background:rgba(0,149,246,.1);border-top:1px solid rgba(0,149,246,.2);font-size:12px;color:rgba(255,255,255,.6);align-items:center;justify-content:space-between;flex-shrink:0}
        .c-edit-bar.on{display:flex}
        .c-edit-bar button{background:none;border:none;color:rgba(255,255,255,.5);font-size:12px;cursor:pointer;padding:2px 6px;font-family:inherit}
        .c-edit-bar button:hover{color:#fff}

        /* Delete confirm popup */
        .del-popup-ov{position:fixed;inset:0;z-index:600;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center}
        .del-popup-ov.on{display:flex}
        .del-popup{background:#2c2c2e;border-radius:16px;padding:24px;max-width:300px;width:90%;text-align:center;animation:popIn .25s ease}
        @keyframes popIn{from{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}
        .del-popup h4{font-size:15px;font-weight:700;margin-bottom:8px;color:#fff}
        .del-popup p{font-size:13px;color:rgba(255,255,255,.6);margin-bottom:20px;line-height:1.5}
        .del-popup-btns{display:flex;gap:10px}
        .del-popup-btns button{flex:1;padding:10px;border-radius:10px;border:none;font-size:14px;font-weight:600;cursor:pointer;transition:opacity .2s;font-family:inherit}
        .del-popup-btns .dp-cancel{background:rgba(255,255,255,.1);color:#fff}
        .del-popup-btns .dp-cancel:hover{background:rgba(255,255,255,.15)}
        .del-popup-btns .dp-del{background:#ff3b30;color:#fff}
        .del-popup-btns .dp-del:hover{opacity:.85}

        /* Loading / Empty */
        .loading{display:flex;align-items:center;justify-content:center;height:100dvh}
        .spin{width:36px;height:36px;border:3px solid rgba(255,255,255,.15);border-top-color:#fff;border-radius:50%;animation:sp .8s linear infinite}
        @keyframes sp{to{transform:rotate(360deg)}}
        .empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100dvh;gap:16px;color:rgba(255,255,255,.5)}
        .empty i{font-size:48px}.empty p{font-size:15px}

        /* Double tap heart */
        .dth{position:absolute;z-index:20;pointer-events:none;animation:hb .8s ease forwards}
        .dth i{font-size:80px;color:#ff2d55;filter:drop-shadow(0 4px 12px rgba(255,45,85,.5))}
        @keyframes hb{0%{transform:scale(0);opacity:1}15%{transform:scale(1.3)}30%{transform:scale(1)}80%{opacity:1}100%{transform:scale(1.5);opacity:0}}

        /* Desktop Navigation */
        .d-nav{display:none}
        @media(min-width:769px){
            .d-nav{display:flex;flex-direction:column;gap:16px;position:fixed;z-index:100;right:16px;top:50%;transform:translateY(-50%)}
            .d-nav-btn{display:flex;flex-direction:column;align-items:center;gap:4px;background:none;border:none;cursor:pointer;color:#fff;-webkit-tap-highlight-color:transparent;padding:0;margin:0;}
            .d-nav-btn i{font-size:22px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,255,255,.12);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.12);transition:background .2s}
            .d-nav-btn:active i{background:rgba(255,255,255,.25)}
        }
    
/* extracted from \portfolio\profile.php */

        .prf-panel,.prf-panel *,.prf-panel *::before,.prf-panel *::after{box-sizing:border-box;margin:0;padding:0}
        body:has(.prf-panel){height:100%;background:#000;color:#fff;font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased}.prf-panel *{scrollbar-width:none}
        
        /* Spin Loader */
        .spin{width:36px;height:36px;border:3px solid rgba(255,255,255,.15);border-top-color:#fff;border-radius:50%;animation:sp .8s linear infinite}
        @keyframes sp{to{transform:rotate(360deg)}}
        
        .prf-panel{background:#000;width:100%;height:100dvh;display:flex;flex-direction:column;max-width:600px;margin:0 auto;position:relative}
        .prf-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;padding-top:max(12px,env(safe-area-inset-top,12px));border-bottom:1px solid rgba(255,255,255,.1);flex-shrink:0}
        .prf-close{background:none;border:none;color:#fff;font-size:24px;cursor:pointer}
        .prf-title{font-size:16px;font-weight:700;}
        .prf-content{flex:1;overflow-y:auto;padding-bottom:min(100px, 15vh);scrollbar-width:none;}
        .prf-content
        .prf-info{display:flex;align-items:center;padding:16px 20px;}
        .prf-avatar{width:82px;height:82px;aspect-ratio:1/1;flex-shrink:0;border-radius:50%;object-fit:cover;border:1.5px solid rgba(255,255,255,.4);padding:3px;margin-right:24px;}
        .prf-details{display:flex;flex-direction:column;justify-content:center;gap:8px;flex:1;}
        .prf-name-bold{font-size:14px;font-weight:700;}
        .prf-stats{display:flex;align-items:center;gap:32px;}
        .prf-stat{display:flex;flex-direction:column;align-items:flex-start;font-size:13px;color:rgba(255,255,255,.9);}
        .prf-stat span:first-child{font-size:16px;font-weight:700;color:#fff;margin-bottom:2px;}
        .lang-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,255,255,.1);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.15);transition:background .2s;cursor:pointer;color:#fff;text-decoration:none}
        .lang-btn:hover{background:rgba(255,255,255,.2)}
        .lang-btn span{font-size:11px;font-weight:700;}
        .prf-bio{padding:0 20px;margin-top:4px;margin-bottom:24px;}
        .prf-category{font-size:13px;color:rgba(255,255,255,.6);margin-bottom:4px}
        .prf-desc{font-size:13px;line-height:1.4;margin-bottom:12px;color:rgba(255,255,255,.9);}
        .prf-links-btn{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;background:rgba(255,255,255,.1);padding:6px 14px;border-radius:20px;cursor:pointer;cursor:hand;transition:background .2s}
        .prf-links-btn:hover{background:rgba(255,255,255,.15)}
        .prf-highlights-wrap{overflow-x:auto;padding:8px 20px 20px 20px;scrollbar-width:none}
        .prf-highlights-wrap
        .prf-highlights{display:flex;gap:20px;}
        .prf-highlight{display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;min-width:70px;max-width:84px;opacity:0.6;transition:all .2s;}
        .prf-highlight.active{opacity:1;transform:scale(1.05);}
        .prf-highlight:hover{opacity:1;}
        .prf-hl-img-wrap{width:70px;height:70px;aspect-ratio:1/1;flex-shrink:0;border-radius:50%;padding:2px;border:1.5px solid rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center;transition:border-color .2s;}
        .prf-highlight.active .prf-hl-img-wrap{border:2px solid #fff;}
        .prf-hl-img{width:100%;height:100%;aspect-ratio:1/1;border-radius:50%;background:#111;object-fit:cover}
        .prf-hl-name{font-size:11px;font-weight:500;text-align:center;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
        .prf-tabs{display:flex;border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1)}
        .prf-tab{flex:1;text-align:center;padding:12px 0;color:rgba(255,255,255,.4);font-size:20px;cursor:pointer;border-bottom:1px solid transparent;transition:all .2s;}
        .prf-tab.active{color:#fff;border-bottom:1px solid #fff;}
        .prf-grid-loader{display:none;padding:40px;text-align:center;}
        .prf-grid-loader.show{display:block;}
        .prf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
        .prf-grid-item{position:relative;aspect-ratio:9/16;background:#111;cursor:pointer;overflow:hidden}
        .prf-grid-item video, .prf-grid-item img {width:100%;height:100%;object-fit:cover;pointer-events:none;}
        .prf-grid-item .b-views{position:absolute;bottom:6px;left:6px;font-size:11px;font-weight:600;display:flex;align-items:center;gap:4px;text-shadow:0 1px 3px rgba(0,0,0,.9);z-index:2}
        .prf-grid-empty{grid-column:1/4;text-align:center;padding:40px 20px;color:rgba(255,255,255,.5);font-size:14px;}
        
        /* Links Overlay */
        .lnk-overlay{position:fixed;inset:0;z-index:950;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);display:flex;align-items:flex-end;justify-content:center;opacity:0;transition:opacity .3s;pointer-events:none;}
        .lnk-overlay.on{opacity:1;pointer-events:auto;}
        .lnk-popup{background:#262626;width:100%;max-width:600px;border-radius:20px 20px 0 0;padding:16px 20px 30px;transform:translateY(100%);transition:transform .35s cubic-bezier(.32,.72,0,1);max-height:85vh;display:flex;flex-direction:column;}
        .lnk-overlay.on .lnk-popup{transform:translateY(0)}
        .lnk-handle{width:40px;height:4px;border-radius:2px;background:rgba(255,255,255,.3);margin:0 auto 20px;cursor:pointer;}
        .lnk-popup h3{font-size:16px;font-weight:700;text-align:center;margin-bottom:20px;}
        .lnk-list{display:flex;flex-direction:column;gap:12px;overflow-y:auto;scrollbar-width:none;}
        .lnk-list
        .lnk-item{display:flex;align-items:center;gap:16px;background:#1a1a1a;padding:12px 16px;border-radius:12px;text-decoration:none;color:#fff;transition:background .2s;border:1px solid rgba(255,255,255,.05);}
        .lnk-item:hover{background:#333;border-color:rgba(255,255,255,.1);}
        .lnk-icon{width:40px;height:40px;border-radius:50%;background:#000;display:flex;align-items:center;justify-content:center;font-size:20px;border:1px solid rgba(255,255,255,.1);}
        .lnk-text{flex:1;display:flex;flex-direction:column;gap:2px;}
        .lnk-name{font-size:14px;font-weight:700;}
        .lnk-url{font-size:12px;color:rgba(255,255,255,.5);}
    

/* Final scrollbar override for shared admin/business screens */
html,
body {
    overflow-y: auto;
}
*:not(.reels-wrap):not(.reels-wrap *):not(.prf-panel):not(.prf-panel *) {
    scrollbar-width: thin;
    scrollbar-color: #4b5563 rgba(0,0,0,.06);
}
html.dark *:not(.reels-wrap):not(.reels-wrap *):not(.prf-panel):not(.prf-panel *),
body.dark *:not(.reels-wrap):not(.reels-wrap *):not(.prf-panel):not(.prf-panel *),
.dark *:not(.reels-wrap):not(.reels-wrap *):not(.prf-panel):not(.prf-panel *) {
    scrollbar-color: #6b7280 rgba(255,255,255,.06);
}
*:not(.reels-wrap):not(.reels-wrap *):not(.prf-panel):not(.prf-panel *)::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
*:not(.reels-wrap):not(.reels-wrap *):not(.prf-panel):not(.prf-panel *)::-webkit-scrollbar-track {
    background: rgba(0,0,0,.06);
}
*:not(.reels-wrap):not(.reels-wrap *):not(.prf-panel):not(.prf-panel *)::-webkit-scrollbar-thumb {
    background: #4b5563;
    border-radius: 9999px;
}
*:not(.reels-wrap):not(.reels-wrap *):not(.prf-panel):not(.prf-panel *)::-webkit-scrollbar-thumb:hover {
    background: #374151;
}
html.dark *:not(.reels-wrap):not(.reels-wrap *):not(.prf-panel):not(.prf-panel *)::-webkit-scrollbar-track,
body.dark *:not(.reels-wrap):not(.reels-wrap *):not(.prf-panel):not(.prf-panel *)::-webkit-scrollbar-track,
.dark *:not(.reels-wrap):not(.reels-wrap *):not(.prf-panel):not(.prf-panel *)::-webkit-scrollbar-track {
    background: rgba(255,255,255,.06);
}
html.dark *:not(.reels-wrap):not(.reels-wrap *):not(.prf-panel):not(.prf-panel *)::-webkit-scrollbar-thumb,
body.dark *:not(.reels-wrap):not(.reels-wrap *):not(.prf-panel):not(.prf-panel *)::-webkit-scrollbar-thumb,
.dark *:not(.reels-wrap):not(.reels-wrap *):not(.prf-panel):not(.prf-panel *)::-webkit-scrollbar-thumb {
    background: #6b7280;
}
html.dark *:not(.reels-wrap):not(.reels-wrap *):not(.prf-panel):not(.prf-panel *)::-webkit-scrollbar-thumb:hover,
body.dark *:not(.reels-wrap):not(.reels-wrap *):not(.prf-panel):not(.prf-panel *)::-webkit-scrollbar-thumb:hover,
.dark *:not(.reels-wrap):not(.reels-wrap *):not(.prf-panel):not(.prf-panel *)::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}
body:has(.reels-wrap) {
    overflow: hidden;
}

@media (min-width: 768px) {
    html:has(.settings-page),
    html:has(.payment-methods-page),
    body:has(.settings-page),
    body:has(.payment-methods-page) {
        height: 100%;
        overflow-y: hidden !important;
    }
    main:has(.settings-page),
    main:has(.payment-methods-page) {
        overflow-y: auto !important;
        overscroll-behavior: contain;
    }
}

.payment-methods-grid {
    align-items: start !important;
}

.payment-method-card {
    align-self: start !important;
    margin-top: 0 !important;
}

.payment-method-card-head {
    align-items: flex-start !important;
}

@media (max-width: 767px) {
    html,
    body {
        height: auto !important;
        min-height: 100% !important;
        max-height: none !important;
        overflow-y: auto !important;
        position: static !important;
    }

    body > .flex.min-h-screen,
    body > .flex.min-h-\[100dvh\],
    #mobile-admin-header ~ .flex,
    body > .flex.min-h-\[100dvh\] > .flex-1.flex.flex-col.min-h-\[100dvh\],
    .flex-1.flex.flex-col.min-h-screen {
        height: auto !important;
        min-height: 100dvh !important;
        overflow: visible !important;
    }

    body > .flex.min-h-\[100dvh\],
    body > .flex.min-h-\[100dvh\] > .flex-1.flex.flex-col.min-h-\[100dvh\] {
        display: block !important;
    }

    main {
        flex: none !important;
        height: auto !important;
        max-height: none !important;
        min-height: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch;
    }

    main:has(.cal-wrap),
    main:has(.mail-wrap) {
        overflow: auto !important;
    }
}

/* Shared dark button color */
:root {
    --odak-button-black: #000000;
    --odak-button-black-hover: #2c2c2e;
}
:is(a, button, input[type="submit"], input[type="button"]).admin-btn-primary,
:is(a, button, input[type="submit"], input[type="button"]):where([class^="bg-gray-950"], [class*=" bg-gray-950"]),
:is(a, button, input[type="submit"], input[type="button"]):where([class^="bg-gray-900"], [class*=" bg-gray-900"]),
:is(a, button, input[type="submit"], input[type="button"]):where([class^="bg-black"], [class*=" bg-black"]),
:is(a, button, input[type="submit"], input[type="button"]):where([class^="bg-blue-"], [class*=" bg-blue-"]),
:is(a, button, input[type="submit"], input[type="button"]):where([class^="bg-sky-"], [class*=" bg-sky-"]),
:is(a, button, input[type="submit"], input[type="button"]):where([class^="bg-indigo-"], [class*=" bg-indigo-"]),
:is(a, button, input[type="submit"], input[type="button"])[class*="peer-checked:bg-gray-950"],
:is(a, button, input[type="submit"], input[type="button"])[class*="checked:bg-gray-900"],
body.light .menu-active,
body.light .user-checkbox-item.selected .user-check-dot,
body.light .cal-day-num .today-badge,
body.light #staffLookupList > button.bg-gray-950,
body.light #staffLookupList > button.bg-black {
    background-color: var(--odak-button-black) !important;
    border-color: var(--odak-button-black) !important;
    color: #ffffff !important;
}
.tab-btn.active,
.time-slot.selected,
.time-slot:focus-visible,
.select-card.selected,
.dark .tab-btn.active,
.dark .time-slot.selected,
.dark .time-slot:focus-visible,
.dark .select-card.selected,
#progressBar,
[id^="stepIndicator"][class*="bg-gray-950"] {
    background-color: var(--odak-button-black) !important;
    border-color: var(--odak-button-black) !important;
    color: #ffffff !important;
}
.select-card.selected p,
.select-card.selected i,
.select-card.selected span,
.dark .select-card.selected p,
.dark .select-card.selected i,
.dark .select-card.selected span,
.dark .tab-btn.active *,
.dark .time-slot.selected * {
    color: #ffffff !important;
}
.select-card.selected .choice-fallback,
.dark .select-card.selected .choice-fallback {
    background: rgba(255,255,255,.12) !important;
    border-color: rgba(255,255,255,.45) !important;
}
.select-card.selected:hover,
.time-slot.selected:hover,
.tab-btn.active:hover {
    background-color: var(--odak-button-black-hover) !important;
    border-color: var(--odak-button-black-hover) !important;
    color: #ffffff !important;
}
:is(a, button, input[type="submit"], input[type="button"]).admin-btn-primary:hover,
:is(a, button, input[type="submit"], input[type="button"]):where([class^="bg-gray-950"], [class*=" bg-gray-950"]):hover,
:is(a, button, input[type="submit"], input[type="button"]):where([class^="bg-gray-900"], [class*=" bg-gray-900"]):hover,
:is(a, button, input[type="submit"], input[type="button"]):where([class^="bg-black"], [class*=" bg-black"]):hover,
:is(a, button, input[type="submit"], input[type="button"]):where([class^="bg-blue-"], [class*=" bg-blue-"]):hover,
:is(a, button, input[type="submit"], input[type="button"]):where([class^="bg-sky-"], [class*=" bg-sky-"]):hover,
:is(a, button, input[type="submit"], input[type="button"]):where([class^="bg-indigo-"], [class*=" bg-indigo-"]):hover,
body.light .menu-active:hover,
body.light #staffLookupList > button.bg-gray-950:hover,
body.light #staffLookupList > button.bg-black:hover {
    background-color: var(--odak-button-black-hover) !important;
    border-color: var(--odak-button-black-hover) !important;
    color: #ffffff !important;
}
:is(a, button, input[type="submit"], input[type="button"]).admin-btn-primary *,
:is(a, button, input[type="submit"], input[type="button"]):where([class^="bg-gray-950"], [class*=" bg-gray-950"]) *,
:is(a, button, input[type="submit"], input[type="button"]):where([class^="bg-gray-900"], [class*=" bg-gray-900"]) *,
:is(a, button, input[type="submit"], input[type="button"]):where([class^="bg-black"], [class*=" bg-black"]) *,
:is(a, button, input[type="submit"], input[type="button"]):where([class^="bg-blue-"], [class*=" bg-blue-"]) *,
:is(a, button, input[type="submit"], input[type="button"]):where([class^="bg-sky-"], [class*=" bg-sky-"]) *,
:is(a, button, input[type="submit"], input[type="button"]):where([class^="bg-indigo-"], [class*=" bg-indigo-"]) * {
    color: #ffffff !important;
}
body.light :is(a, button, input[type="submit"], input[type="button"]).admin-btn-primary,
body.light :is(a, button, input[type="submit"], input[type="button"]):is([class^="bg-gray-950"], [class*=" bg-gray-950"]),
body.light :is(a, button, input[type="submit"], input[type="button"]):is([class^="bg-gray-900"], [class*=" bg-gray-900"]),
body.light :is(a, button, input[type="submit"], input[type="button"]):is([class^="bg-black"], [class*=" bg-black"]),
body.light :is(a, button, input[type="submit"], input[type="button"]):is([class^="bg-blue-"], [class*=" bg-blue-"]),
body.light :is(a, button, input[type="submit"], input[type="button"]):is([class^="bg-sky-"], [class*=" bg-sky-"]),
body.light :is(a, button, input[type="submit"], input[type="button"]):is([class^="bg-indigo-"], [class*=" bg-indigo-"]) {
    background-color: var(--odak-button-black) !important;
    border-color: var(--odak-button-black) !important;
    color: #ffffff !important;
}
body.light :is(a, button, input[type="submit"], input[type="button"]).admin-btn-primary:hover,
body.light :is(a, button, input[type="submit"], input[type="button"]):is([class^="bg-gray-950"], [class*=" bg-gray-950"]):hover,
body.light :is(a, button, input[type="submit"], input[type="button"]):is([class^="bg-gray-900"], [class*=" bg-gray-900"]):hover,
body.light :is(a, button, input[type="submit"], input[type="button"]):is([class^="bg-black"], [class*=" bg-black"]):hover,
body.light :is(a, button, input[type="submit"], input[type="button"]):is([class^="bg-blue-"], [class*=" bg-blue-"]):hover,
body.light :is(a, button, input[type="submit"], input[type="button"]):is([class^="bg-sky-"], [class*=" bg-sky-"]):hover,
body.light :is(a, button, input[type="submit"], input[type="button"]):is([class^="bg-indigo-"], [class*=" bg-indigo-"]):hover {
    background-color: var(--odak-button-black-hover) !important;
    border-color: var(--odak-button-black-hover) !important;
    color: #ffffff !important;
}
body.light :is(a, button, input[type="submit"], input[type="button"]).admin-btn-primary *,
body.light :is(a, button, input[type="submit"], input[type="button"]):is([class^="bg-gray-950"], [class*=" bg-gray-950"]) *,
body.light :is(a, button, input[type="submit"], input[type="button"]):is([class^="bg-gray-900"], [class*=" bg-gray-900"]) *,
body.light :is(a, button, input[type="submit"], input[type="button"]):is([class^="bg-black"], [class*=" bg-black"]) *,
body.light :is(a, button, input[type="submit"], input[type="button"]):is([class^="bg-blue-"], [class*=" bg-blue-"]) *,
body.light :is(a, button, input[type="submit"], input[type="button"]):is([class^="bg-sky-"], [class*=" bg-sky-"]) *,
body.light :is(a, button, input[type="submit"], input[type="button"]):is([class^="bg-indigo-"], [class*=" bg-indigo-"]) * {
    color: #ffffff !important;
}

:is(a, button, input[type="submit"], input[type="button"]).admin-btn-primary {
    background-color: #6b7280 !important;
    border-color: #6b7280 !important;
    color: #ffffff !important;
}
:is(a, button, input[type="submit"], input[type="button"]).admin-btn-primary:hover {
    background-color: #4b5563 !important;
    border-color: #4b5563 !important;
    color: #ffffff !important;
}
:is(a, button, input[type="submit"], input[type="button"]).admin-btn-primary * {
    color: #ffffff !important;
}

/* Dark theme overrides for all primary/colored buttons to make them white with black text */
.dark :is(a, button, input[type="submit"], input[type="button"]).admin-btn-primary,
.dark :is(a, button, input[type="submit"], input[type="button"]):where([class^="bg-gray-950"], [class*=" bg-gray-950"]),
.dark :is(a, button, input[type="submit"], input[type="button"]):where([class^="bg-gray-900"], [class*=" bg-gray-900"]),
.dark :is(a, button, input[type="submit"], input[type="button"]):where([class^="bg-black"], [class*=" bg-black"]),
.dark :is(a, button, input[type="submit"], input[type="button"]):where([class^="bg-blue-"], [class*=" bg-blue-"]),
.dark :is(a, button, input[type="submit"], input[type="button"]):where([class^="bg-sky-"], [class*=" bg-sky-"]),
.dark :is(a, button, input[type="submit"], input[type="button"]):where([class^="bg-indigo-"], [class*=" bg-indigo-"]),
.dark :is(a, button, input[type="submit"], input[type="button"])[class*="peer-checked:bg-gray-950"],
.dark :is(a, button, input[type="submit"], input[type="button"])[class*="checked:bg-gray-900"],
html.dark :is(a, button, input[type="submit"], input[type="button"]).admin-btn-primary,
html.dark :is(a, button, input[type="submit"], input[type="button"]):where([class^="bg-gray-950"], [class*=" bg-gray-950"]),
html.dark :is(a, button, input[type="submit"], input[type="button"]):where([class^="bg-gray-900"], [class*=" bg-gray-900"]),
html.dark :is(a, button, input[type="submit"], input[type="button"]):where([class^="bg-black"], [class*=" bg-black"]),
html.dark :is(a, button, input[type="submit"], input[type="button"]):where([class^="bg-blue-"], [class*=" bg-blue-"]),
html.dark :is(a, button, input[type="submit"], input[type="button"]):where([class^="bg-sky-"], [class*=" bg-sky-"]),
html.dark :is(a, button, input[type="submit"], input[type="button"]):where([class^="bg-indigo-"], [class*=" bg-indigo-"]),
html.dark :is(a, button, input[type="submit"], input[type="button"])[class*="peer-checked:bg-gray-950"],
html.dark :is(a, button, input[type="submit"], input[type="button"])[class*="checked:bg-gray-900"],
body.dark :is(a, button, input[type="submit"], input[type="button"]).admin-btn-primary,
body.dark :is(a, button, input[type="submit"], input[type="button"]):where([class^="bg-gray-950"], [class*=" bg-gray-950"]),
body.dark :is(a, button, input[type="submit"], input[type="button"]):where([class^="bg-gray-900"], [class*=" bg-gray-900"]),
body.dark :is(a, button, input[type="submit"], input[type="button"]):where([class^="bg-black"], [class*=" bg-black"]),
body.dark :is(a, button, input[type="submit"], input[type="button"]):where([class^="bg-blue-"], [class*=" bg-blue-"]),
body.dark :is(a, button, input[type="submit"], input[type="button"]):where([class^="bg-sky-"], [class*=" bg-sky-"]),
body.dark :is(a, button, input[type="submit"], input[type="button"]):where([class^="bg-indigo-"], [class*=" bg-indigo-"]),
body.dark :is(a, button, input[type="submit"], input[type="button"])[class*="peer-checked:bg-gray-950"],
body.dark :is(a, button, input[type="submit"], input[type="button"])[class*="checked:bg-gray-900"] {
    background-color: #ffffff !important;
    border-color: #ffffff !important;
    color: #000000 !important;
}

.dark :is(a, button, input[type="submit"], input[type="button"]).admin-btn-primary:hover,
.dark :is(a, button, input[type="submit"], input[type="button"]):where([class^="bg-gray-950"], [class*=" bg-gray-950"]):hover,
.dark :is(a, button, input[type="submit"], input[type="button"]):where([class^="bg-gray-900"], [class*=" bg-gray-900"]):hover,
.dark :is(a, button, input[type="submit"], input[type="button"]):where([class^="bg-black"], [class*=" bg-black"]):hover,
.dark :is(a, button, input[type="submit"], input[type="button"]):where([class^="bg-blue-"], [class*=" bg-blue-"]):hover,
.dark :is(a, button, input[type="submit"], input[type="button"]):where([class^="bg-sky-"], [class*=" bg-sky-"]):hover,
.dark :is(a, button, input[type="submit"], input[type="button"]):where([class^="bg-indigo-"], [class*=" bg-indigo-"]):hover,
html.dark :is(a, button, input[type="submit"], input[type="button"]).admin-btn-primary:hover,
html.dark :is(a, button, input[type="submit"], input[type="button"]):where([class^="bg-gray-950"], [class*=" bg-gray-950"]):hover,
html.dark :is(a, button, input[type="submit"], input[type="button"]):where([class^="bg-gray-900"], [class*=" bg-gray-900"]):hover,
html.dark :is(a, button, input[type="submit"], input[type="button"]):where([class^="bg-black"], [class*=" bg-black"]):hover,
html.dark :is(a, button, input[type="submit"], input[type="button"]):where([class^="bg-blue-"], [class*=" bg-blue-"]):hover,
html.dark :is(a, button, input[type="submit"], input[type="button"]):where([class^="bg-sky-"], [class*=" bg-sky-"]):hover,
html.dark :is(a, button, input[type="submit"], input[type="button"]):where([class^="bg-indigo-"], [class*=" bg-indigo-"]):hover,
body.dark :is(a, button, input[type="submit"], input[type="button"]).admin-btn-primary:hover,
body.dark :is(a, button, input[type="submit"], input[type="button"]):where([class^="bg-gray-950"], [class*=" bg-gray-950"]):hover,
body.dark :is(a, button, input[type="submit"], input[type="button"]):where([class^="bg-gray-900"], [class*=" bg-gray-900"]):hover,
body.dark :is(a, button, input[type="submit"], input[type="button"]):where([class^="bg-black"], [class*=" bg-black"]):hover,
body.dark :is(a, button, input[type="submit"], input[type="button"]):where([class^="bg-blue-"], [class*=" bg-blue-"]):hover,
body.dark :is(a, button, input[type="submit"], input[type="button"]):where([class^="bg-sky-"], [class*=" bg-sky-"]):hover,
body.dark :is(a, button, input[type="submit"], input[type="button"]):where([class^="bg-indigo-"], [class*=" bg-indigo-"]):hover {
    background-color: #e5e7eb !important;
    border-color: #e5e7eb !important;
    color: #000000 !important;
}

.dark :is(a, button, input[type="submit"], input[type="button"]).admin-btn-primary *,
.dark :is(a, button, input[type="submit"], input[type="button"]):where([class^="bg-gray-950"], [class*=" bg-gray-950"]) *,
.dark :is(a, button, input[type="submit"], input[type="button"]):where([class^="bg-gray-900"], [class*=" bg-gray-900"]) *,
.dark :is(a, button, input[type="submit"], input[type="button"]):where([class^="bg-black"], [class*=" bg-black"]) *,
.dark :is(a, button, input[type="submit"], input[type="button"]):where([class^="bg-blue-"], [class*=" bg-blue-"]) *,
.dark :is(a, button, input[type="submit"], input[type="button"]):where([class^="bg-sky-"], [class*=" bg-sky-"]) *,
.dark :is(a, button, input[type="submit"], input[type="button"]):where([class^="bg-indigo-"], [class*=" bg-indigo-"]) *,
html.dark :is(a, button, input[type="submit"], input[type="button"]).admin-btn-primary *,
html.dark :is(a, button, input[type="submit"], input[type="button"]):where([class^="bg-gray-950"], [class*=" bg-gray-950"]) *,
html.dark :is(a, button, input[type="submit"], input[type="button"]):where([class^="bg-gray-900"], [class*=" bg-gray-900"]) *,
html.dark :is(a, button, input[type="submit"], input[type="button"]):where([class^="bg-black"], [class*=" bg-black"]) *,
html.dark :is(a, button, input[type="submit"], input[type="button"]):where([class^="bg-blue-"], [class*=" bg-blue-"]) *,
html.dark :is(a, button, input[type="submit"], input[type="button"]):where([class^="bg-sky-"], [class*=" bg-sky-"]) *,
html.dark :is(a, button, input[type="submit"], input[type="button"]):where([class^="bg-indigo-"], [class*=" bg-indigo-"]) *,
body.dark :is(a, button, input[type="submit"], input[type="button"]).admin-btn-primary *,
body.dark :is(a, button, input[type="submit"], input[type="button"]):where([class^="bg-gray-950"], [class*=" bg-gray-950"]) *,
body.dark :is(a, button, input[type="submit"], input[type="button"]):where([class^="bg-gray-900"], [class*=" bg-gray-900"]) *,
body.dark :is(a, button, input[type="submit"], input[type="button"]):where([class^="bg-black"], [class*=" bg-black"]) *,
body.dark :is(a, button, input[type="submit"], input[type="button"]):where([class^="bg-blue-"], [class*=" bg-blue-"]) *,
body.dark :is(a, button, input[type="submit"], input[type="button"]):where([class^="bg-sky-"], [class*=" bg-sky-"]) *,
body.dark :is(a, button, input[type="submit"], input[type="button"]):where([class^="bg-indigo-"], [class*=" bg-indigo-"]) * {
    color: #000000 !important;
}

/* Dark theme active/passive status button colors (green/red soft buttons) */
.dark .bg-red-500\/10,
html.dark .bg-red-500\/10,
body.dark .bg-red-500\/10 {
    background-color: rgba(239, 68, 68, 0.18) !important;
}
.dark .border-red-500\/20,
html.dark .border-red-500\/20,
body.dark .border-red-500\/20 {
    border-color: rgba(239, 68, 68, 0.4) !important;
}
.dark .text-red-500,
.dark .dark\:text-red-400,
html.dark .text-red-500,
html.dark .dark\:text-red-400,
body.dark .text-red-500,
body.dark .dark\:text-red-400 {
    color: #f87171 !important;
}
.dark .hover\:bg-red-500\/20:hover,
html.dark .hover\:bg-red-500\/20:hover,
body.dark .hover\:bg-red-500\/20:hover {
    background-color: rgba(239, 68, 68, 0.3) !important;
}

.dark .bg-green-500\/10,
html.dark .bg-green-500\/10,
body.dark .bg-green-500\/10 {
    background-color: rgba(34, 197, 94, 0.18) !important;
}
.dark .border-green-500\/20,
html.dark .border-green-500\/20,
body.dark .border-green-500\/20 {
    border-color: rgba(34, 197, 94, 0.4) !important;
}
.dark .text-green-500,
.dark .text-green-600,
.dark .dark\:text-green-400,
.dark .dark\:text-green-500,
html.dark .text-green-500,
html.dark .text-green-600,
html.dark .dark\:text-green-400,
html.dark .dark\:text-green-500,
body.dark .text-green-500,
body.dark .text-green-600,
body.dark .dark\:text-green-400,
body.dark .dark\:text-green-500 {
    color: #4ade80 !important;
}
.dark .hover\:bg-green-500\/20:hover,
html.dark .hover\:bg-green-500\/20:hover,
body.dark .hover\:bg-green-500\/20:hover {
    background-color: rgba(34, 197, 94, 0.3) !important;
}
html.dark input.admin-input[data-customer-history-search],
html.dark input#customerSearchInput.admin-input,
body.dark input.admin-input[data-customer-history-search],
body.dark input#customerSearchInput.admin-input,
.dark input.admin-input[data-customer-history-search],
.dark input#customerSearchInput.admin-input {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
html.dark input.admin-input[data-customer-history-search]::placeholder,
html.dark input#customerSearchInput.admin-input::placeholder,
body.dark input.admin-input[data-customer-history-search]::placeholder,
body.dark input#customerSearchInput.admin-input::placeholder,
.dark input.admin-input[data-customer-history-search]::placeholder,
.dark input#customerSearchInput.admin-input::placeholder {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* Dashboard cards keep a light surface in light theme, even when their dark-theme class is bg-black. */
body.light .dashboard-stat-card,
body.light .dashboard-list-card {
    background: #ffffff !important;
    border-color: rgba(17,24,39,.10) !important;
    color: #000000 !important;
    box-shadow: 0 1px 2px rgba(17,24,39,.04);
}
body.light .dashboard-stat-card:hover,
body.light .dashboard-list-card:hover {
    background: #f9fafb !important;
    border-color: rgba(17,24,39,.18) !important;
}
body.light .dashboard-stat-card .text-white,
body.light .dashboard-list-card .text-white,
body.light .dashboard-list-card .text-gray-300 {
    color: #000000 !important;
}
body.light .dashboard-stat-card .text-gray-500,
body.light .dashboard-list-card .text-gray-500,
body.light .dashboard-stat-card .text-gray-600,
body.light .dashboard-list-card .text-gray-600 {
    color: #6b7280 !important;
}
body.light .dashboard-stat-card .group-hover\:text-white,
body.light .dashboard-list-card .group-hover\:text-white {
    color: #4b5563 !important;
}
body.light .dashboard-stat-card:hover .group-hover\:text-white,
body.light .dashboard-list-card:hover .group-hover\:text-white {
    color: #000000 !important;
}
body.light .dashboard-list-card .bg-white\/5,
body.light .dashboard-list-card .bg-white\/\[0\.04\] {
    background: #f3f4f6 !important;
}
body.light .dashboard-list-card .border-white\/10,
body.light .dashboard-list-card .border-white\/\[0\.08\] {
    border-color: rgba(17,24,39,.10) !important;
}

/* Active filter buttons in admin/business panels should be black in light theme. */
body.light a[href^="?filter="][class~="bg-black"],
body.light a[href*="?filter="][class~="bg-black"],
body.light button[class~="filter-tab-active"],
body.light a.filter-tab-active,
body.light .filter-tab.active,
body.light .filter-btn.active,
body.light .admin-filter-active,
body.light a[aria-selected="true"],
body.light button[aria-selected="true"] {
    background-color: #000000 !important;
    border-color: #000000 !important;
    color: #ffffff !important;
}
body.light a[href^="?filter="][class~="bg-black"]:hover,
body.light a[href*="?filter="][class~="bg-black"]:hover,
body.light button[class~="filter-tab-active"]:hover,
body.light a.filter-tab-active:hover,
body.light .filter-tab.active:hover,
body.light .filter-btn.active:hover,
body.light .admin-filter-active:hover,
body.light a[aria-selected="true"]:hover,
body.light button[aria-selected="true"]:hover {
    background-color: #2c2c2e !important;
    border-color: #2c2c2e !important;
    color: #ffffff !important;
}
body.light a[href^="?filter="][class~="bg-black"] *,
body.light a[href*="?filter="][class~="bg-black"] *,
body.light button[class~="filter-tab-active"] *,
body.light a.filter-tab-active *,
body.light .filter-tab.active *,
body.light .filter-btn.active *,
body.light .admin-filter-active *,
body.light a[aria-selected="true"] *,
body.light button[aria-selected="true"] * {
    color: #ffffff !important;
}

/* Selected language/theme pills in panel headers are black in light theme. */
body.light a[href^="?lang="][class~="bg-white"],
body.light a[href*="?lang="][class~="bg-white"],
body.light a[href^="?theme="][class~="bg-white"],
body.light a[href*="?theme="][class~="bg-white"] {
    background-color: #000000 !important;
    border-color: #000000 !important;
    color: #ffffff !important;
}
body.light a[href^="?lang="][class~="bg-white"] *,
body.light a[href*="?lang="][class~="bg-white"] *,
body.light a[href^="?theme="][class~="bg-white"] *,
body.light a[href*="?theme="][class~="bg-white"] * {
    color: #ffffff !important;
}

/* Language/theme switcher contrast: light theme uses black, dark theme uses white. */
body.light a[href^="?lang="]:not(.theme-switcher-active):not(.theme-switcher-inactive),
body.light a[href*="?lang="]:not(.theme-switcher-active):not(.theme-switcher-inactive),
body.light a[href^="?theme="]:not(.theme-switcher-active):not(.theme-switcher-inactive),
body.light a[href*="?theme="]:not(.theme-switcher-active):not(.theme-switcher-inactive) {
    color: #000000 !important;
}
body.light a[href^="?lang="][class*="bg-black"],
body.light a[href*="?lang="][class*="bg-black"],
body.light a[href^="?theme="][class*="bg-black"],
body.light a[href*="?theme="][class*="bg-black"],
body.light a[href^="?lang="][class*="bg-black"] *,
body.light a[href*="?lang="][class*="bg-black"] *,
body.light a[href^="?theme="][class*="bg-black"] *,
body.light a[href*="?theme="][class*="bg-black"] * {
    color: #ffffff !important;
}
body.dark a[href^="?lang="]:not(.theme-switcher-active):not(.theme-switcher-inactive),
body.dark a[href*="?lang="]:not(.theme-switcher-active):not(.theme-switcher-inactive),
body.dark a[href^="?theme="]:not(.theme-switcher-active):not(.theme-switcher-inactive),
body.dark a[href*="?theme="]:not(.theme-switcher-active):not(.theme-switcher-inactive) {
    color: #ffffff !important;
}
body.dark a[href^="?lang="][class*="bg-white"],
body.dark a[href*="?lang="][class*="bg-white"],
body.dark a[href^="?theme="][class*="bg-white"],
body.dark a[href*="?theme="][class*="bg-white"],
body.dark a[href^="?lang="][class*="bg-white"] *,
body.dark a[href*="?lang="][class*="bg-white"] *,
body.dark a[href^="?theme="][class*="bg-white"] *,
body.dark a[href*="?theme="][class*="bg-white"] * {
    color: #000000 !important;
}

/* Reply actions are intentionally light in light theme; selected filters stay black above. */
body.light .light-soft-action {
    background: #ffffff !important;
    border: 1px solid rgba(17,24,39,.14) !important;
    color: #000000 !important;
}
body.light .light-soft-action:hover {
    background: #f3f4f6 !important;
    border-color: rgba(17,24,39,.24) !important;
    color: #000000 !important;
}
body.light .light-soft-action *,
body.light .light-soft-action i {
    color: #000000 !important;
}

.profile-tab-bar {
    align-items: flex-end;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}

.profile-tab-bar::-webkit-scrollbar {
    display: none;
}

.profile-tab-bar .profile-tab-btn {
    flex: 0 0 auto;
    min-height: 0;
    line-height: 1.25;
    touch-action: pan-x;
}

.profile-tab-bar .settings-tab::after {
    bottom: 0;
}

.profile-tab-btn,
.profile-tab-btn:hover,
.profile-tab-btn.active,
.profile-tab-btn.active:hover {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.profile-tab-btn.active {
    color: #ffffff !important;
}

body.light .profile-tab-btn.active {
    color: #1d1d1f !important;
}

.profile-tab-bar .rounded-full {
    border: 1.5px solid rgba(255, 255, 255, .25) !important;
    background: rgba(255, 255, 255, .1) !important;
    color: #ffffff !important;
}

body.light .profile-tab-bar .rounded-full {
    border-color: rgba(0, 0, 0, .2) !important;
    background: rgba(0, 0, 0, .1) !important;
    color: #000000 !important;
}

body.dark .profile-tab-bar .rounded-full,
.dark .profile-tab-bar .rounded-full {
    border-color: rgba(255, 255, 255, .25) !important;
    background: rgba(255, 255, 255, .1) !important;
    color: #ffffff !important;
}

/* Mobile page scroll unlock - keep document scrolling available site-wide. */
@media (max-width: 767px) {
    html,
    body {
        height: auto !important;
        min-height: 100% !important;
        max-height: none !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior-y: auto !important;
        position: static !important;
        touch-action: pan-x pan-y !important;
        -webkit-overflow-scrolling: touch;
    }

    body.overflow-hidden,
    html.overflow-hidden {
        overflow-y: auto !important;
    }

    body > .block.min-h-screen,
    body > .block.min-h-\[100dvh\],
    body > .flex.min-h-screen,
    body > .flex.min-h-\[100dvh\],
    #mobile-admin-header ~ .flex,
    #mobile-admin-header ~ .block,
    .min-h-screen.min-w-0,
    .min-h-\[100dvh\].min-w-0 {
        height: auto !important;
        min-height: 100dvh !important;
        max-height: none !important;
        overflow: visible !important;
    }

    main {
        display: block !important;
        flex: none !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        -webkit-overflow-scrolling: touch;
    }

    html:has(.reels-wrap),
    body:has(.reels-wrap) {
        height: 100% !important;
        overflow: hidden !important;
    }

    html:has(.prf-panel),
    body:has(.prf-panel) {
        height: 100% !important;
        overflow: hidden !important;
    }
}

/* Mobile admin refinements for cards, modals and stable page height. */
@media (max-width: 767px) {
    @supports (height: 100svh) {
        body > .block.min-h-screen,
        body > .block.min-h-\[100dvh\],
        body > .flex.min-h-screen,
        body > .flex.min-h-\[100dvh\],
        #mobile-admin-header ~ .flex,
        #mobile-admin-header ~ .block,
        .min-h-screen.min-w-0,
        .min-h-\[100dvh\].min-w-0 {
            min-height: 100svh !important;
        }
    }

    .modal-overlay {
        inset: 0 !important;
        padding: 22px !important;
    }

    .modal-box {
        width: calc(100vw - 44px) !important;
        max-width: 520px !important;
        max-height: calc(100dvh - 44px) !important;
        padding: 1.25rem !important;
    }

    #confirm-box {
        width: calc(100vw - 44px) !important;
        max-width: 420px !important;
    }

    .admin-card {
        max-width: 100% !important;
        overflow-wrap: anywhere;
    }

    .admin-icon-btn {
        aspect-ratio: 1 / 1;
        padding: 0 !important;
        flex: 0 0 auto;
    }
}

/* Final light-theme shell and notes overrides.
   Some extracted legacy page rules invert `.bg-white` in light mode; keep the shared
   admin shell and the notes workspace truly light regardless of those utilities. */
html.light body.light,
body.light {
    background: #f5f7fb !important;
    color: #172033 !important;
}

body.light #admin-sidebar,
body.light #sidebar-mini-strip,
body.light #mobile-admin-header,
body.light #mobile-admin-menu {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.10) !important;
    color: #172033 !important;
}

body.light #admin-sidebar .border-white\/\[0\.07\],
body.light #mobile-admin-menu .border-white\/\[0\.07\],
body.light #mobile-admin-header.border-white\/\[0\.07\] {
    border-color: rgba(15, 23, 42, 0.10) !important;
}

body.light #admin-sidebar a:not(.menu-active):not([href*="logout"]):not([href*="lang="]):not([href*="theme="]),
body.light #mobile-admin-menu a:not(.menu-active):not([href*="logout"]):not([href*="lang="]):not([href*="theme="]),
body.light #sidebar-mini-strip button,
body.light #mobile-menu-btn {
    color: #64748b !important;
}

body.light #admin-sidebar a:not(.menu-active):not([href*="logout"]):not([href*="lang="]):not([href*="theme="]):hover,
body.light #mobile-admin-menu a:not(.menu-active):not([href*="logout"]):not([href*="lang="]):not([href*="theme="]):hover,
body.light #sidebar-mini-strip button:hover,
body.light #mobile-menu-btn:hover {
    background: rgba(15, 23, 42, 0.06) !important;
    color: #0f172a !important;
}

body.light #admin-sidebar .menu-active,
body.light #mobile-admin-menu .menu-active {
    background: #0f172a !important;
    color: #ffffff !important;
}

body.light #admin-sidebar .menu-active *,
body.light #mobile-admin-menu .menu-active * {
    color: #ffffff !important;
}

body.light #admin-sidebar p,
body.light #admin-sidebar span,
body.light #mobile-admin-menu p,
body.light #mobile-admin-menu span,
body.light #mobile-admin-header span {
    color: #64748b !important;
}

body.light #admin-sidebar .admin-brand-link span,
body.light #admin-sidebar .admin-brand-link span *,
body.light #mobile-admin-header .admin-brand-link span,
body.light #mobile-admin-header .admin-brand-link span * {
    color: #000000 !important;
}

body.dark .admin-brand-link span,
body.dark .admin-brand-link span *,
.dark .admin-brand-link span,
.dark .admin-brand-link span * {
    color: #ffffff !important;
}

body.light #admin-sidebar .menu-active *,
body.light #mobile-admin-menu .menu-active *,
body.light #admin-sidebar a.bg-black,
body.light #admin-sidebar a.bg-black *,
body.light #mobile-admin-menu a.bg-black,
body.light #mobile-admin-menu a.bg-black * {
    color: #ffffff !important;
}

body.dark #admin-sidebar a.bg-white,
body.dark #admin-sidebar a.bg-white *,
body.dark #mobile-admin-menu a.bg-white,
body.dark #mobile-admin-menu a.bg-white * {
    color: #000000 !important;
}

body.light #admin-sidebar .menu-active,
body.light #mobile-admin-menu .menu-active {
    background: #000000 !important;
    border-color: #000000 !important;
    color: #ffffff !important;
}

body.light #admin-sidebar .menu-active *,
body.light #mobile-admin-menu .menu-active * {
    color: #ffffff !important;
}

body.dark #admin-sidebar .menu-active,
body.dark #mobile-admin-menu .menu-active {
    background: #ffffff !important;
    border-color: #ffffff !important;
    color: #000000 !important;
}

body.dark #admin-sidebar .menu-active *,
body.dark #mobile-admin-menu .menu-active * {
    color: #000000 !important;
}

body.light #admin-sidebar a[href="/admin/logout"],
body.light #mobile-admin-menu a[href="/admin/logout"],
body.light #admin-sidebar a[href="/isletme-panel/logout"],
body.light #mobile-admin-menu a[href="/isletme-panel/logout"] {
    border-color: rgba(220, 38, 38, .2) !important;
    background: rgba(220, 38, 38, .08) !important;
    color: #dc2626 !important;
}

body.light #admin-sidebar a[href="/admin/logout"] *,
body.light #mobile-admin-menu a[href="/admin/logout"] *,
body.light #admin-sidebar a[href="/isletme-panel/logout"] *,
body.light #mobile-admin-menu a[href="/isletme-panel/logout"] * {
    color: #dc2626 !important;
}

body.light #admin-sidebar a[href="/admin/logout"]:hover,
body.light #mobile-admin-menu a[href="/admin/logout"]:hover,
body.light #admin-sidebar a[href="/isletme-panel/logout"]:hover,
body.light #mobile-admin-menu a[href="/isletme-panel/logout"]:hover {
    border-color: rgba(220, 38, 38, .4) !important;
    background: rgba(220, 38, 38, .15) !important;
    color: #dc2626 !important;
}

body.light #admin-sidebar a[href="/admin/logout"]:hover *,
body.light #mobile-admin-menu a[href="/admin/logout"]:hover *,
body.light #admin-sidebar a[href="/isletme-panel/logout"]:hover *,
body.light #mobile-admin-menu a[href="/isletme-panel/logout"]:hover * {
    color: #dc2626 !important;
}

body.light #notes-sidebar {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
}

body.light #notes-content-pane,
body.light #editor-workspace,
body.light #editor-container,
body.light #editor-empty-state {
    background: #ffffff !important;
    color: #172033 !important;
}

body.light #notes-content-pane .bg-white,
body.light #notes-content-pane .bg-slate-50,
body.light #notes-sidebar .bg-slate-50,
body.light #emojis-dropdown,
body.light #share-modal .modal-box {
    background: #ffffff !important;
}

body.light #notes-content-pane .dark\:bg-zinc-950,
body.light #notes-content-pane .dark\:bg-white\/5,
body.light #notes-content-pane .dark\:bg-white\/10,
body.light #notes-sidebar .dark\:bg-\[\#0c0c0e\],
body.light #notes-sidebar .dark\:bg-white\/5,
body.light #notes-sidebar .dark\:bg-white\/10 {
    background: transparent !important;
}

body.light #notes-content-pane .text-white,
body.light #notes-content-pane .dark\:text-white,
body.light #notes-content-pane .dark\:text-zinc-100,
body.light #notes-sidebar .text-white,
body.light #notes-sidebar .dark\:text-white,
body.light #notes-sidebar .dark\:text-zinc-100 {
    color: #172033 !important;
}

body.light #notes-content-pane .text-slate-500,
body.light #notes-content-pane .dark\:text-zinc-500,
body.light #notes-sidebar .text-slate-500,
body.light #notes-sidebar .dark\:text-zinc-500 {
    color: #64748b !important;
}

body.light #notes-content-pane input,
body.light #notes-content-pane textarea,
body.light #notes-content-pane select,
body.light #notes-sidebar input {
    background: transparent !important;
    color: #172033 !important;
}

body.light #notes-content-pane input::placeholder,
body.light #notes-content-pane textarea::placeholder,
body.light #notes-sidebar input::placeholder {
    color: #94a3b8 !important;
}

/* ── EMOJI PICKER TABS – LIGHT MODE BACKGROUND OVERRIDES ────────── */
/* Pasif sekme butonları */
body.light #emoji-tabs button {
    background-color: #f1f5f9 !important; /* slate-100 */
    border-color: #e2e8f0 !important;     /* slate-200 */
    color: #64748b !important;            /* slate-500 */
}
/* Pasif sekme butonları – hover */
body.light #emoji-tabs button:hover {
    background-color: #dde4ee !important; /* slate-200/60 */
    color: #1e293b !important;            /* slate-800 */
}
/* Aktif sekme butonu (scale + bold) */
body.light #emoji-tabs button.bg-slate-200,
body.light #emoji-tabs button.scale-105 {
    background-color: #e2e8f0 !important; /* slate-200 */
    border-color: #cbd5e1 !important;     /* slate-300 */
    color: #0f172a !important;            /* slate-900 */
}

/* ── CUSTOM SIDEBAR TEXT COLORS ────────────────────────────────── */

/* Light mode: Main menu links, icons and profile button (excluding logout, lang, theme switcher) */
body.light #admin-sidebar a:not(.menu-active):not([href*="logout"]):not([href*="lang="]):not([href*="theme="]),
body.light #admin-sidebar a:not(.menu-active):not([href*="logout"]):not([href*="lang="]):not([href*="theme="]) *,
body.light #mobile-admin-menu a:not(.menu-active):not([href*="logout"]):not([href*="lang="]):not([href*="theme="]),
body.light #mobile-admin-menu a:not(.menu-active):not([href*="logout"]):not([href*="lang="]):not([href*="theme="]) * {
    color: #000000 !important;
}

/* Dark mode: Main menu links, icons and profile button (excluding logout, lang, theme switcher) */
body.dark #admin-sidebar a:not(.menu-active):not([href*="logout"]):not([href*="lang="]):not([href*="theme="]),
body.dark #admin-sidebar a:not(.menu-active):not([href*="logout"]):not([href*="lang="]):not([href*="theme="]) *,
.dark #admin-sidebar a:not(.menu-active):not([href*="logout"]):not([href*="lang="]):not([href*="theme="]),
.dark #admin-sidebar a:not(.menu-active):not([href*="logout"]):not([href*="lang="]):not([href*="theme="]) *,
body.dark #mobile-admin-menu a:not(.menu-active):not([href*="logout"]):not([href*="lang="]):not([href*="theme="]),
body.dark #mobile-admin-menu a:not(.menu-active):not([href*="logout"]):not([href*="lang="]):not([href*="theme="]) *,
.dark #mobile-admin-menu a:not(.menu-active):not([href*="logout"]):not([href*="lang="]):not([href*="theme="]),
.dark #mobile-admin-menu a:not(.menu-active):not([href*="logout"]):not([href*="lang="]):not([href*="theme="]) * {
    color: #ffffff !important;
}



/* ── NOTE LIST SCROLL OVERFLOW (LAZY SCROLL) ───────────────────────── */
#list-invites,
#list-pinned,
#list-personal,
#list-shared,
#list-all-admin {
    max-h: 210px; /* Fits about 6 items, scrolls after that */
    max-height: 210px;
    overflow-y: auto;
    scrollbar-width: thin;
}

#list-invites::-webkit-scrollbar,
#list-pinned::-webkit-scrollbar,
#list-personal::-webkit-scrollbar,
#list-shared::-webkit-scrollbar,
#list-all-admin::-webkit-scrollbar {
    width: 4px;
}

#list-invites::-webkit-scrollbar-thumb,
#list-pinned::-webkit-scrollbar-thumb,
#list-personal::-webkit-scrollbar-thumb,
#list-shared::-webkit-scrollbar-thumb,
#list-all-admin::-webkit-scrollbar-thumb {
    background: rgba(156, 163, 175, 0.3);
    border-radius: 2px;
}
#list-invites::-webkit-scrollbar-track,
#list-pinned::-webkit-scrollbar-track,
#list-personal::-webkit-scrollbar-track,
#list-shared::-webkit-scrollbar-track,
#list-all-admin::-webkit-scrollbar-track {
    background: transparent;
}

/* ── Custom Category Header Styling (gray-400) ── */
body.light #admin-sidebar p.text-gray-400,
body.light #mobile-admin-menu p.text-gray-400 {
    color: #9ca3af !important;
}
body.dark #admin-sidebar p.text-gray-400,
body.dark #mobile-admin-menu p.text-gray-400,
.dark #admin-sidebar p.text-gray-400,
.dark #mobile-admin-menu p.text-gray-400 {
    color: #9ca3af !important;
}

/* ── Custom User Profile Information Text Colors ── */
body.light #admin-sidebar .flex-1.min-w-0 p,
body.light #mobile-admin-menu .flex-1.min-w-0 p {
    color: #000000 !important;
}
body.dark #admin-sidebar .flex-1.min-w-0 p:first-child,
body.dark #mobile-admin-menu .flex-1.min-w-0 p:first-child,
.dark #admin-sidebar .flex-1.min-w-0 p:first-child,
.dark #mobile-admin-menu .flex-1.min-w-0 p:first-child {
    color: #ffffff !important;
}
body.dark #admin-sidebar .flex-1.min-w-0 p:last-child,
body.dark #mobile-admin-menu .flex-1.min-w-0 p:last-child,
.dark #admin-sidebar .flex-1.min-w-0 p:last-child,
.dark #mobile-admin-menu .flex-1.min-w-0 p:last-child {
    color: #94a3b8 !important;
}

/* ── Mobile Viewport Fit for Notes Application ── */
@media (max-width: 767px) {
    body:has(#notes-app) {
        height: 100dvh !important;
        overflow: hidden !important;
    }
    body:has(#notes-app) main {
        height: 100dvh !important;
        padding-top: 64px !important; /* height of sticky header */
        padding-bottom: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        overflow: hidden !important;
    }
    body:has(#notes-app) #notes-app {
        height: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }
}

/* ── Heading Color Enhancements — Black in Light Mode, White in Dark Mode ── */
body.light h1,
body.light h2,
body.light h3,
body.light h4,
body.light h5,
body.light h6 {
    color: #000000 !important;
}

body.dark h1,
body.dark h2,
body.dark h3,
body.dark h4,
body.dark h5,
body.dark h6,
.dark h1,
.dark h2,
.dark h3,
.dark h4,
.dark h5,
.dark h6 {
    color: #ffffff !important;
}

/* Specific overrides for active/passive action buttons in light and dark mode to prevent white/black button overrides */
:is(a, button, input[type="submit"], input[type="button"]).bg-red-500\/10,
.dark :is(a, button, input[type="submit"], input[type="button"]).bg-red-500\/10,
html.dark :is(a, button, input[type="submit"], input[type="button"]).bg-red-500\/10,
body.dark :is(a, button, input[type="submit"], input[type="button"]).bg-red-500\/10,
:is(a, button, input[type="submit"], input[type="button"])[class*="bg-red-500/10"],
.dark :is(a, button, input[type="submit"], input[type="button"])[class*="bg-red-500/10"],
html.dark :is(a, button, input[type="submit"], input[type="button"])[class*="bg-red-500/10"],
body.dark :is(a, button, input[type="submit"], input[type="button"])[class*="bg-red-500/10"] {
    background-color: rgba(239, 68, 68, 0.1) !important;
    border-color: rgba(239, 68, 68, 0.2) !important;
    color: #ef4444 !important;
}
:is(a, button, input[type="submit"], input[type="button"]).bg-red-500\/10:hover,
.dark :is(a, button, input[type="submit"], input[type="button"]).bg-red-500\/10:hover,
html.dark :is(a, button, input[type="submit"], input[type="button"]).bg-red-500\/10:hover,
body.dark :is(a, button, input[type="submit"], input[type="button"]).bg-red-500\/10:hover,
:is(a, button, input[type="submit"], input[type="button"])[class*="bg-red-500/10"]:hover,
.dark :is(a, button, input[type="submit"], input[type="button"])[class*="bg-red-500/10"]:hover,
html.dark :is(a, button, input[type="submit"], input[type="button"])[class*="bg-red-500/10"]:hover,
body.dark :is(a, button, input[type="submit"], input[type="button"])[class*="bg-red-500/10"]:hover {
    background-color: rgba(239, 68, 68, 0.2) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
    color: #ef4444 !important;
}
:is(a, button, input[type="submit"], input[type="button"]).bg-red-500\/10 *,
.dark :is(a, button, input[type="submit"], input[type="button"]).bg-red-500\/10 *,
html.dark :is(a, button, input[type="submit"], input[type="button"]).bg-red-500\/10 *,
body.dark :is(a, button, input[type="submit"], input[type="button"]).bg-red-500\/10 *,
:is(a, button, input[type="submit"], input[type="button"])[class*="bg-red-500/10"] *,
.dark :is(a, button, input[type="submit"], input[type="button"])[class*="bg-red-500/10"] *,
html.dark :is(a, button, input[type="submit"], input[type="button"])[class*="bg-red-500/10"] *,
body.dark :is(a, button, input[type="submit"], input[type="button"])[class*="bg-red-500/10"] *,
:is(a, button, input[type="submit"], input[type="button"]).bg-red-500\/10 i,
.dark :is(a, button, input[type="submit"], input[type="button"]).bg-red-500\/10 i,
html.dark :is(a, button, input[type="submit"], input[type="button"]).bg-red-500\/10 i,
body.dark :is(a, button, input[type="submit"], input[type="button"]).bg-red-500\/10 i,
:is(a, button, input[type="submit"], input[type="button"])[class*="bg-red-500/10"] i,
.dark :is(a, button, input[type="submit"], input[type="button"])[class*="bg-red-500/10"] i,
html.dark :is(a, button, input[type="submit"], input[type="button"])[class*="bg-red-500/10"] i,
body.dark :is(a, button, input[type="submit"], input[type="button"])[class*="bg-red-500/10"] i {
    color: #ef4444 !important;
}

:is(a, button, input[type="submit"], input[type="button"]).bg-green-500\/10,
.dark :is(a, button, input[type="submit"], input[type="button"]).bg-green-500\/10,
html.dark :is(a, button, input[type="submit"], input[type="button"]).bg-green-500\/10,
body.dark :is(a, button, input[type="submit"], input[type="button"]).bg-green-500\/10,
:is(a, button, input[type="submit"], input[type="button"])[class*="bg-green-500/10"],
.dark :is(a, button, input[type="submit"], input[type="button"])[class*="bg-green-500/10"],
html.dark :is(a, button, input[type="submit"], input[type="button"])[class*="bg-green-500/10"],
body.dark :is(a, button, input[type="submit"], input[type="button"])[class*="bg-green-500/10"] {
    background-color: rgba(34, 197, 94, 0.1) !important;
    border-color: rgba(34, 197, 94, 0.2) !important;
    color: #22c55e !important;
}
:is(a, button, input[type="submit"], input[type="button"]).bg-green-500\/10:hover,
.dark :is(a, button, input[type="submit"], input[type="button"]).bg-green-500\/10:hover,
html.dark :is(a, button, input[type="submit"], input[type="button"]).bg-green-500\/10:hover,
body.dark :is(a, button, input[type="submit"], input[type="button"]).bg-green-500\/10:hover,
:is(a, button, input[type="submit"], input[type="button"])[class*="bg-green-500/10"]:hover,
.dark :is(a, button, input[type="submit"], input[type="button"])[class*="bg-green-500/10"]:hover,
html.dark :is(a, button, input[type="submit"], input[type="button"])[class*="bg-green-500/10"]:hover,
body.dark :is(a, button, input[type="submit"], input[type="button"])[class*="bg-green-500/10"]:hover {
    background-color: rgba(34, 197, 94, 0.2) !important;
    border-color: rgba(34, 197, 94, 0.3) !important;
    color: #22c55e !important;
}
:is(a, button, input[type="submit"], input[type="button"]).bg-green-500\/10 *,
.dark :is(a, button, input[type="submit"], input[type="button"]).bg-green-500\/10 *,
html.dark :is(a, button, input[type="submit"], input[type="button"]).bg-green-500\/10 *,
body.dark :is(a, button, input[type="submit"], input[type="button"]).bg-green-500\/10 *,
:is(a, button, input[type="submit"], input[type="button"])[class*="bg-green-500/10"] *,
.dark :is(a, button, input[type="submit"], input[type="button"])[class*="bg-green-500/10"] *,
html.dark :is(a, button, input[type="submit"], input[type="button"])[class*="bg-green-500/10"] *,
body.dark :is(a, button, input[type="submit"], input[type="button"])[class*="bg-green-500/10"] *,
:is(a, button, input[type="submit"], input[type="button"]).bg-green-500\/10 i,
.dark :is(a, button, input[type="submit"], input[type="button"]).bg-green-500\/10 i,
html.dark :is(a, button, input[type="submit"], input[type="button"]).bg-green-500\/10 i,
body.dark :is(a, button, input[type="submit"], input[type="button"]).bg-green-500\/10 i,
:is(a, button, input[type="submit"], input[type="button"])[class*="bg-green-500/10"] i,
.dark :is(a, button, input[type="submit"], input[type="button"])[class*="bg-green-500/10"] i,
html.dark :is(a, button, input[type="submit"], input[type="button"])[class*="bg-green-500/10"] i,
body.dark :is(a, button, input[type="submit"], input[type="button"])[class*="bg-green-500/10"] i {
    color: #22c55e !important;
}