html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    max-width: 100%;
    position: relative;
}

body {
    font-family: var(--font-family-base);
    font-optical-sizing: auto;
    background: linear-gradient(to bottom right, #ecfaf9, #eef2ff, #eef6f6);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100vw;
}

/* Ana uygulama layout (layout.php) — gövde metni */
body.app-layout {
    color: var(--color-text-body);
}

/*
 * Tailwind CDN `text-slate-*` renkleri (#0f172a, #64748b vb.) yerine marka tipografisi.
 * :root --color-text-heading (#2d3436) ve --color-text-body (#565f64) ile hizalı.
 */
body.app-layout .text-slate-900,
body.app-layout .text-slate-950,
body.app-layout .text-slate-800 {
    color: var(--color-text-heading);
}

body.app-layout .text-slate-700,
body.app-layout .text-slate-600,
body.app-layout .text-slate-500 {
    color: var(--color-text-body);
}

/* Modül sayfaları — başlık / ikincil metin (app.css merkezi) */
.app-text-heading {
    color: var(--color-text-heading);
}

.app-text-muted {
    color: var(--color-text-body);
    opacity: 0.88;
}

.app-text-brand {
    color: var(--color-brand-primary);
}

.app-text-brand-strong {
    color: var(--color-brand-primary-hover);
}

/* Masraf talep (masraf-talep.php) */
nav.masraf-tabs .tab-button {
    background: #fff;
    color: var(--color-text-body);
}

nav.masraf-tabs .tab-button:hover:not(.active):not(:disabled) {
    background: var(--color-brand-primary);
    color: #fff;
}

nav.masraf-tabs .tab-button.active {
    background: var(--color-brand-primary);
    color: #fff;
}

nav.masraf-tabs .tab-button.active:hover {
    background: var(--color-brand-primary-hover);
}

@media (max-width: 1023px) {
    nav[role='tablist'].masraf-tabs {
        display: flex !important;
        white-space: nowrap;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
    }

    nav[role='tablist'].masraf-tabs .tab-button {
        white-space: nowrap;
        flex-shrink: 0;
        scroll-snap-align: start;
    }
}

.masraf-tab-badge {
    background: var(--color-brand-muted-bg);
    color: var(--color-brand-primary-hover);
}

.masraf-btn-soft {
    background: var(--color-brand-muted-bg);
    color: var(--color-brand-primary-hover);
}

.masraf-btn-soft:hover {
    background: rgba(0, 177, 169, 0.2);
}

.masraf-accent-bar {
    background: var(--color-brand-primary);
}

.masraf-upload-zone:hover {
    border-color: var(--color-brand-primary);
    background: var(--color-brand-muted-bg);
}

.masraf-upload-icon-wrap {
    background: var(--color-brand-muted-bg);
    color: var(--color-brand-primary);
}

.masraf-spinner {
    border-style: solid;
    border-width: 4px;
    border-color: rgba(0, 177, 169, 0.35);
    border-top-color: var(--color-brand-primary);
}

.masraf-preview-wrap:hover {
    box-shadow: 0 0 0 2px var(--color-brand-primary);
    border-color: var(--color-brand-primary);
}

.masraf-upload-zone--drag {
    border-color: var(--color-brand-primary) !important;
    background: var(--color-brand-muted-bg) !important;
    box-shadow: 0 0 0 2px var(--color-brand-focus-ring);
}

.masraf-pick-row:hover {
    background: var(--color-brand-muted-bg);
}

.masraf-pick-row:hover .masraf-pick-row-title {
    color: var(--color-brand-primary-hover);
}

.masraf-checkbox-accent {
    accent-color: var(--color-brand-primary);
}

.masraf-checkbox-accent:focus-visible {
    outline: 2px solid var(--color-brand-primary);
    outline-offset: 2px;
}

.masraf-link-icon {
    color: var(--color-brand-primary);
}

.masraf-link-icon:hover {
    color: var(--color-brand-primary);
    background: var(--color-brand-muted-bg);
}

.masraf-context-item:hover {
    background: var(--color-brand-muted-bg);
}

.masraf-category-pill {
    background: var(--color-brand-muted-bg);
    color: var(--color-brand-primary-hover);
    border: 1px solid rgba(0, 177, 169, 0.22);
}

.masraf-icon-btn-muted:hover {
    color: var(--color-brand-primary);
    background: var(--color-brand-muted-bg);
}

.masraf-timeline-border-pending {
    border-color: rgba(0, 177, 169, 0.38);
}

.masraf-timeline-dot-pending {
    background: var(--color-brand-muted-bg);
}

/* Masraf talep — tutarlı düğme boyutu (toolbar, drawer footer, onay) */
.masraf-btn-md {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25;
    border-radius: 0.5rem;
    box-sizing: border-box;
}

.masraf-btn-md--grow {
    flex: 1 1 0%;
}

/* Tablo satırı: Geri Çek / Detay */
.masraf-btn-table {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    min-height: 2.25rem;
    padding: 0.375rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.2;
    box-sizing: border-box;
}

/* Taslak satırı ikon düğmeleri — eşit dokunma alanı */
.masraf-icon-hit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    min-height: 2.25rem;
    padding: 0;
    border-radius: 0.5rem;
    box-sizing: border-box;
}

/* Onay drawer — uyarı (amber) birincil aksiyon */
.masraf-btn-confirm-warn {
    background: #f59e0b;
    color: #fff;
    border: none;
    transition:
        background-color 0.2s ease,
        opacity 0.2s ease;
}

.masraf-btn-confirm-warn:hover:not(:disabled) {
    background: #d97706;
}

.masraf-btn-confirm-warn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* === Page: masraf-talep.php — tipografi, renk, tablo / drawer === */
.page-masraf-talep {
    color: var(--color-text-body);
}

.page-masraf-talep nav.masraf-tabs .tab-button {
    min-height: 2.75rem;
    align-items: center;
    display: inline-flex;
    justify-content: center;
}

.page-masraf-talep .masraf-page-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text-heading);
    letter-spacing: -0.02em;
    line-height: 1.3;
}

.page-masraf-talep .masraf-page-lead {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-body);
    opacity: 0.92;
    margin-top: 0.25rem;
}

.page-masraf-talep .masraf-card-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text-heading);
    line-height: 1.35;
}

.page-masraf-talep .masraf-card-lead {
    font-size: 0.875rem;
    color: var(--color-text-body);
    opacity: 0.9;
    margin-top: 0.125rem;
}

.page-masraf-talep .masraf-table-th {
    padding: 0.75rem 1.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-text-body);
    opacity: 0.82;
    text-transform: uppercase;
    letter-spacing: 0.055em;
    vertical-align: middle;
}

.page-masraf-talep .masraf-table-th--compact {
    padding: 0.75rem 1rem;
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
}

.page-masraf-talep .masraf-table-th--left {
    text-align: left;
}

.page-masraf-talep .masraf-table-th--right {
    text-align: right;
}

.page-masraf-talep .masraf-table-th--center {
    text-align: center;
}

.page-masraf-talep .masraf-field-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-body);
    opacity: 0.88;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.page-masraf-talep .masraf-field-label--widest {
    letter-spacing: 0.1em;
}

.page-masraf-talep .masraf-kv-label {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--color-text-body);
    opacity: 0.65;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.page-masraf-talep .masraf-drawer-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text-heading);
    letter-spacing: -0.02em;
    line-height: 1.3;
}

.page-masraf-talep .masraf-drawer-subtitle {
    font-size: 0.875rem;
    color: var(--color-text-body);
    opacity: 0.88;
}

.page-masraf-talep .masraf-drawer-subtitle--medium {
    font-weight: 500;
}

.page-masraf-talep .masraf-drawer-close {
    color: var(--color-text-body);
    opacity: 0.45;
}

.page-masraf-talep .masraf-drawer-close:hover {
    opacity: 1;
    color: var(--color-text-heading);
    background: var(--color-brand-muted-bg);
}

.page-masraf-talep .masraf-inline-section-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-heading);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.page-masraf-talep .masraf-value-text {
    color: var(--color-text-heading);
}

.page-masraf-talep .masraf-empty-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-heading);
}

.page-masraf-talep .masraf-empty-hint {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text-body);
    opacity: 0.88;
    margin-top: 0.25rem;
}

.page-masraf-talep .masraf-empty-cell {
    color: var(--color-text-body);
    opacity: 0.75;
}

.page-masraf-talep .masraf-required-mark {
    color: #e11d48;
}

.page-masraf-talep .masraf-form-input {
    color: var(--color-text-heading);
}

.page-masraf-talep .masraf-upload-lead {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-text-body);
}

.page-masraf-talep .masraf-upload-lead strong {
    font-weight: 600;
    color: var(--color-text-heading);
}

.page-masraf-talep .masraf-ocr-text-block {
    width: 100%;
    max-height: 10rem;
    padding: 0.75rem;
    font-size: 0.75rem;
    line-height: 1.5;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    color: var(--color-text-heading);
    background: var(--color-brand-muted-bg);
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 0.5rem;
    overflow-y: auto;
    white-space: pre-wrap;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
}

.page-masraf-talep .masraf-ocr-hint {
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--color-brand-primary-hover);
}

.page-masraf-talep .masraf-section-accent-warn {
    background: #d97706;
}

.page-masraf-talep .masraf-section-accent-accounting {
    background: #059669;
}

.page-masraf-talep .masraf-limit-line {
    margin-top: 0.25rem;
    font-size: 0.75rem;
}

.page-masraf-talep .masraf-limit-badge {
    margin-top: 0.25rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
    border: 1px solid transparent;
}

.page-masraf-talep .masraf-limit-badge--muted {
    color: var(--color-text-body);
    opacity: 0.75;
    background: var(--color-brand-muted-bg);
    border-color: rgba(148, 163, 184, 0.35);
}

.page-masraf-talep .masraf-limit-badge--neutral {
    color: var(--color-text-body);
    opacity: 0.85;
    background: #f8fafc;
    border-color: #e2e8f0;
}

.page-masraf-talep .masraf-limit-badge--over {
    color: #9f1239;
    background: #fff1f2;
    border-color: #fecdd3;
}

.page-masraf-talep .masraf-limit-badge--ok {
    color: #166534;
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.page-masraf-talep .masraf-limit-badge--warn {
    color: #92400e;
    background: #fffbeb;
    border-color: #fde68a;
}

/* Taleplerim: Onay / Muhasebe — avans-talep .avans-history-badge ile aynı görünüm */
.page-masraf-talep .masraf-history-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    font-size: var(--font-size-overline);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: 1px solid transparent;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
}

.page-masraf-talep .masraf-history-badge--beklemede {
    background: rgb(254 249 195);
    color: rgb(161 98 7);
    border-color: rgb(253 224 71);
}

.page-masraf-talep .masraf-history-badge--onaylandi {
    background: rgba(0, 177, 169, 0.12);
    color: var(--color-brand-primary-hover);
    border-color: rgba(0, 177, 169, 0.22);
}

.page-masraf-talep .masraf-history-badge--reddedildi {
    background: rgb(254 226 226);
    color: rgb(185 28 28);
    border-color: rgb(254 202 202);
}

.page-masraf-talep .masraf-history-badge--iptal {
    background: rgb(248 250 252);
    color: var(--color-text-body);
    border-color: rgb(226 232 240);
}

/* Tablo / liste gövdesi (JS şablonları) */
.page-masraf-talep .masraf-text-caption {
    font-size: 0.8125rem;
    color: var(--color-text-body);
    opacity: 0.88;
}

.page-masraf-talep .masraf-text-micro {
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--color-text-body);
    opacity: 0.55;
    letter-spacing: 0.02em;
}

.page-masraf-talep .masraf-text-micro--caps {
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.page-masraf-talep .masraf-mobile-field-label {
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--color-text-body);
    opacity: 0.55;
    text-transform: uppercase;
    margin-bottom: 0.25rem;
}

.page-masraf-talep .masraf-timeline-section-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-heading);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.page-masraf-talep .masraf-tax-tag {
    font-size: 0.5625rem;
    font-weight: 700;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.page-masraf-talep .masraf-tax-row {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.625rem;
    font-weight: 700;
    color: var(--color-text-body);
    opacity: 0.9;
}

/* OCR vurguları (önceden masraf-talep.php <style>) */
.page-masraf-talep .ocr-highlight {
    padding: 1px 0;
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.2s;
    border-bottom: 2px solid transparent;
}

.page-masraf-talep .ocr-highlight:hover {
    filter: brightness(0.92);
}

.page-masraf-talep .ocr-highlight.active {
    box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.08);
    font-weight: 700;
}

.page-masraf-talep .hl-companyName {
    background-color: #dbeafe;
    color: #1e40af;
    border-color: #3b82f6;
}

.page-masraf-talep .hl-date {
    background-color: #ffedd5;
    color: #9a3412;
    border-color: #f97316;
}

.page-masraf-talep .hl-receiptNumber {
    background-color: #ccfbf1;
    color: #115e59;
    border-color: #14b8a6;
}

.page-masraf-talep .hl-taxRate {
    background-color: #fef9c3;
    color: #854d0e;
    border-color: #eab308;
}

.page-masraf-talep .hl-taxAmount {
    background-color: #dcfce7;
    color: #166534;
    border-color: #22c55e;
}

.page-masraf-talep .hl-amount {
    background-color: #ffe4e6;
    color: #9f1239;
    border-color: #fb7185;
}

.page-masraf-talep #ocrTextResult mark {
    background: transparent;
    color: inherit;
}

.page-masraf-talep .context-menu-item {
    transition: background-color 0.15s ease, color 0.15s ease;
}

.page-masraf-talep .masraf-context-menu-item {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-text-heading);
}

.page-masraf-talep .scrollbar-hide {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.page-masraf-talep .scrollbar-hide::-webkit-scrollbar {
    display: none;
}

.page-masraf-talep .timeline-item::before {
    content: '';
    position: absolute;
    left: 0.875rem;
    top: 2rem;
    bottom: -0.5rem;
    width: 2px;
    background: linear-gradient(to bottom, #e2e8f0, transparent);
}

.page-masraf-talep .timeline-item:last-child::before {
    display: none;
}

.page-masraf-talep .status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Profil (profile.php) — sekme, avatar, spinner, odak */
nav.profile-tabs .tab-button {
    background: #fff;
    color: var(--color-text-body);
}

nav.profile-tabs .tab-button:hover:not(.active):not(:disabled) {
    background: var(--color-brand-primary);
    color: #fff;
}

nav.profile-tabs .tab-button.active {
    background: var(--color-brand-primary);
    color: #fff;
}

nav.profile-tabs .tab-button.active:hover {
    background: var(--color-brand-primary-hover);
}

.profile-avatar-fallback {
    background: linear-gradient(135deg, var(--color-brand-primary) 0%, var(--color-brand-primary-hover) 100%);
}

.profile-leave-badge {
    background: var(--color-brand-primary);
    color: #fff;
}

.profile-spinner {
    border-style: solid;
    border-width: 2px;
    border-color: rgba(0, 177, 169, 0.25);
    border-bottom-color: var(--color-brand-primary);
    border-radius: 9999px;
}

.profile-avatar-ring-leave {
    box-shadow:
        0 0 0 2px #fff,
        0 0 0 5px var(--color-brand-primary);
}

.profile-phone-input-focus:focus-within {
    border-color: var(--color-brand-primary);
    box-shadow: 0 0 0 2px var(--color-brand-focus-ring);
}

.profile-career-row-default {
    background: var(--color-brand-muted-bg);
    border-left: 4px solid var(--color-brand-primary);
}

.profile-org-group-card {
    background: linear-gradient(135deg, var(--color-brand-muted-bg) 0%, rgba(0, 85, 90, 0.06) 100%);
    border: 2px solid var(--color-brand-muted-border);
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.profile-org-group-card:hover {
    border-color: var(--color-brand-primary);
    box-shadow: 0 4px 14px rgba(0, 177, 169, 0.12);
}

.profile-step-bar-brand {
    background: var(--color-brand-primary);
}

.asset-btn-success {
    background: #22c55e;
    color: #fff;
    transition: background-color 0.2s ease;
}

.asset-btn-success:hover:not(:disabled) {
    background: #16a34a;
}

.asset-btn-danger {
    background: rgb(244, 63, 95);
    color: #fff;
    transition:
        background-color 0.2s ease,
        opacity 0.2s ease;
}

.asset-btn-danger:hover:not(:disabled) {
    background: rgb(225, 29, 72);
}

.asset-btn-danger:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

:root {
    --font-size-display: 2.5rem;
    --font-size-h1: 2rem;
    --font-size-h2: 1.5rem;
    --font-size-h3: 1.125rem;
    --font-size-title: 1rem;
    --font-size-body: 0.875rem;
    --font-size-body-sm: 0.8125rem;
    --font-size-caption: 0.75rem;
    --font-size-overline: 0.6875rem;
    --font-size-metric: 3rem;
    --font-size-metric-sm: 1.5rem;
    --font-size-page-title: 1.125rem;
    --font-size-page-title-mobile: 1rem;
    --font-size-page-description: 0.8125rem;
    --font-size-breadcrumb: 0.75rem;
    --font-size-nav-label: 0.8125rem;
    --font-size-nav-section: 0.625rem;
    --font-size-widget-title: 0.875rem;
    --font-size-widget-subtitle: 0.75rem;
    --font-size-widget-metric: 2.75rem;
    --font-size-widget-metric-mobile: 2.25rem;
    --font-size-widget-body: 0.75rem;
    --font-size-widget-label: 0.75rem;
    --font-size-widget-meta: 0.75rem;
    --font-size-widget-overline: 0.75rem;
    --font-family-base: 'Inter', 'InterVariable', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --line-height-tight: 1.2;
    --line-height-body: 1.5;
    --icon-size-sm: 1rem;
    --icon-size-md: 1.25rem;
    --icon-size-lg: 1.5rem;
    --icon-size-xl: 2rem;
    --dashboard-avatar-size: 32px;
    --dashboard-avatar-radius: 8px;

    /* Marka renkleri (merkezi — login, reset-password, layout) */
    --color-brand-primary: #00a19c;
    --color-brand-primary-hover: #003237;
    /* Tipografi: başlık #2d3436 (Tailwind slate-900 yerine), gövde #565f64 (slate-500/600 yerine) */
    --color-text-heading: #2d3436;
    --color-text-body: #565f64;
    --color-brand-muted-bg: rgba(0, 177, 169, 0.1);
    --color-brand-muted-border: rgba(0, 177, 169, 0.28);
    --color-brand-focus-ring: rgba(0, 177, 169, 0.2);
}

/* --------------------------------------------------------------------------
   Auth sayfaları: login.php, reset-password.php (body.page-auth)
   -------------------------------------------------------------------------- */
body.page-auth {
    display: block;
    min-height: 100vh;
    font-family: var(--font-family-base);
    color: var(--color-text-body);
}

.page-auth .glass {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 25px 60px -20px rgba(45, 52, 54, 0.15);
    backdrop-filter: blur(16px);
}

.page-auth .auth-text-heading {
    color: var(--color-text-heading);
}

.page-auth .auth-text-body {
    color: var(--color-text-body);
}

.page-auth .auth-text-muted {
    color: var(--color-text-body);
    opacity: 0.75;
}

.page-auth .auth-text-caption {
    color: var(--color-text-body);
    opacity: 0.55;
}

.page-auth .login-input-focus:focus {
    border-color: var(--color-brand-primary) !important;
    box-shadow: 0 0 0 4px var(--color-brand-focus-ring);
    outline: none;
}

.page-auth .login-brand-link {
    color: var(--color-brand-primary);
}

.page-auth .login-brand-link:hover {
    color: var(--color-brand-primary-hover);
}

.page-auth .login-btn-submit {
    width: 100%;
    color: #fff;
    padding: 0.75rem;
    border-radius: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: none;
    cursor: pointer;
    background: var(--color-brand-primary);
    box-shadow: 0 10px 15px -3px rgba(0, 177, 169, 0.28), 0 4px 6px -2px rgba(0, 85, 90, 0.12);
    transition: background 0.2s ease, opacity 0.2s ease;
}

.page-auth .login-btn-submit:hover:not(:disabled) {
    background: var(--color-brand-primary-hover);
}

.page-auth .login-btn-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.page-auth .login-btn-solid {
    background: var(--color-brand-primary);
    color: #fff;
    transition: background 0.2s ease, opacity 0.2s ease;
}

.page-auth .login-btn-solid:hover:not(:disabled) {
    background: var(--color-brand-primary-hover);
}

.page-auth .login-panel-muted {
    background: var(--color-brand-muted-bg);
    border: 1px solid var(--color-brand-muted-border);
}

.page-auth .text-brand-primary {
    color: var(--color-brand-primary);
}

.page-auth .text-brand-primary-hover {
    color: var(--color-brand-primary-hover);
}

.page-auth .auth-drawer-header {
    background: rgba(0, 177, 169, 0.06);
}

.page-auth .auth-check-label {
    color: var(--color-text-body);
}

.page-auth .auth-check-label--valid {
    color: var(--color-brand-primary-hover);
    font-weight: 500;
}

.page-auth .auth-check-ring.auth-check-valid {
    border-color: var(--color-brand-primary) !important;
    background-color: var(--color-brand-muted-bg);
}

@keyframes auth-shake {
    0%,
    100% {
        transform: translateX(0);
    }
    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-4px);
    }
    20%,
    40%,
    60%,
    80% {
        transform: translateX(4px);
    }
}

.page-auth .animate-shake {
    animation: auth-shake 0.5s ease-in-out;
}

@keyframes auth-pulse-slow {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

.page-auth .animate-pulse-slow {
    animation: auth-pulse-slow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

#forgotPasswordDrawer.drawer-open #forgotPasswordDrawerPanel {
    transform: translateX(0);
}

#forgotPasswordDrawer:not(.drawer-open) #forgotPasswordDrawerPanel {
    transform: translateX(100%);
}

@media (max-width: 640px) {
    #forgotPasswordDrawerPanel {
        max-width: 100%;
    }
}

/* layout.php — marka chip / avatar / şirket değiştir */
.layout-brand-gradient {
    background: linear-gradient(to right, var(--color-brand-primary), var(--color-brand-primary-hover));
}

.layout-brand-gradient-br {
    background: linear-gradient(to bottom right, var(--color-brand-primary), var(--color-brand-primary-hover));
}

.layout-badge-brand {
    background: var(--color-brand-primary);
    color: #fff;
}

.layout-btn-company-switch {
    background: rgba(0, 177, 169, 0.14);
    color: var(--color-brand-primary-hover);
}

.layout-btn-company-switch:hover {
    background: rgba(0, 177, 169, 0.22);
}

#userProfileShortcut.user-profile-shortcut--current {
    background-color: var(--color-brand-muted-bg);
    box-shadow: inset 0 0 0 1px var(--color-brand-primary);
}

.avatar-ring-leave {
    box-shadow:
        0 0 0 2px var(--color-brand-primary),
        0 0 0 4px #fff,
        0 4px 6px -1px rgba(45, 52, 54, 0.12);
}

.type-display,
.type-h1,
.type-h2,
.type-h3,
.type-title,
.type-body,
.type-body-sm,
.type-caption,
.type-overline,
.type-metric {
    margin: 0;
}

.type-display {
    font-size: var(--font-size-display);
    font-weight: 700;
    line-height: 1.1;
}

.type-h1 {
    font-size: var(--font-size-h1);
    font-weight: 700;
    line-height: 1.15;
}

.type-h2 {
    font-size: var(--font-size-h2);
    font-weight: 600;
    line-height: var(--line-height-tight);
}

.type-h3 {
    font-size: var(--font-size-h3);
    font-weight: 600;
    line-height: var(--line-height-tight);
}

.type-title {
    font-size: var(--font-size-title);
    font-weight: 600;
    line-height: 1.35;
}

.type-body {
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
}

.type-body-sm {
    font-size: var(--font-size-body-sm);
    line-height: 1.45;
}

.type-caption {
    font-size: var(--font-size-caption);
    line-height: 1.4;
}

.type-caption--muted {
    color: var(--color-text-body);
    opacity: 0.65;
}

.type-overline {
    font-size: var(--font-size-overline);
    font-weight: 600;
    line-height: 1.35;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.type-metric {
    font-size: var(--font-size-metric);
    font-weight: 700;
    line-height: 1;
}

.icon-sm,
.icon-md,
.icon-lg,
.icon-xl,
.icon-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.icon-sm {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
}

.icon-md {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
}

.icon-lg {
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
}

.icon-xl {
    width: var(--icon-size-xl);
    height: var(--icon-size-xl);
}

.icon-fallback {
    line-height: 1;
}

.icon-fallback.icon-sm {
    font-size: var(--icon-size-sm);
}

.icon-fallback.icon-md {
    font-size: var(--icon-size-md);
}

.icon-fallback.icon-lg {
    font-size: var(--icon-size-lg);
}

.icon-fallback.icon-xl {
    font-size: var(--icon-size-xl);
}

/*
 * Tablo / liste işlem butonları (app-table-action-btn)
 * — İkon only: .app-table-action-btn--edit | --danger + svg.icon-sm (veya ana satırda svg.icon-md)
 * — İkon + metin: + .app-table-action-btn--with-label; sıkı: + .app-table-action-btn--compact
 * — Ekle (sky): .app-table-action-btn--add (+ --with-label)
 * — Satır genişletme +/-: .app-table-action-btn--toggle | --toggle-sm
 * — Sıra yukarı/aşağı: .app-table-action-btn--muted
 * — Durum: .app-status-badge--active | --inactive
 * — Mavi dolgu CTA: .app-btn-sky-solid (ör. izin-yönetimi detay başlığı)
 */
.app-table-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0.375rem;
    border-radius: 0.5rem;
    border: 1px solid transparent;
    background: transparent;
    color: inherit;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.app-table-action-btn:focus {
    outline: none;
}

.app-table-action-btn:focus-visible {
    outline: 2px solid var(--color-brand-primary);
    outline-offset: 2px;
}

.app-table-action-btn--edit {
    border-color: var(--color-brand-muted-border);
    background: var(--color-brand-muted-bg);
    color: var(--color-brand-primary);
}

.app-table-action-btn--edit:hover {
    background: rgba(0, 177, 169, 0.16);
    border-color: rgba(0, 177, 169, 0.42);
    color: var(--color-brand-primary-hover);
}

.app-table-action-btn--danger {
    border-color: rgb(254 202 202 / 0.85);
    background: rgb(255 241 242);
    color: rgb(190 18 60);
}

.app-table-action-btn--danger:hover {
    background: rgb(254 226 232);
    border-color: rgb(252 165 165 / 0.9);
}

.app-table-action-btn svg {
    flex-shrink: 0;
}

/* Düzenle / Sil: ikon boyutu her zaman --icon-size-sm (Tailwind çakışmasına karşı) */
.app-table-action-btn--edit svg.icon-sm,
.app-table-action-btn--danger svg.icon-sm {
    display: block;
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
}

/* Ana tablo İşlemler satırı — biraz daha büyük ikon */
.app-table-action-btn--edit svg.icon-md,
.app-table-action-btn--danger svg.icon-md,
.app-table-action-btn--add svg.icon-md {
    display: block;
    width: var(--icon-size-md);
    height: var(--icon-size-md);
}

button.app-table-action-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* Sıra yukarı / aşağı (nötr ikon) */
.app-table-action-btn--muted {
    padding: 0.25rem;
    border-color: transparent;
    background: transparent;
    color: rgb(100 116 139);
}

.app-table-action-btn--muted:hover:not(:disabled) {
    background: rgb(226 232 240);
    color: rgb(51 65 85);
}

.app-table-action-btn--muted:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Bölüm üstü birincil CTA (ör. izin-yönetimi: İlk detayı ekle) — marka token */
.app-btn-sky-solid {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25;
    font-weight: 500;
    background: var(--color-brand-primary);
    color: #fff;
    border: none;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.app-btn-sky-solid:hover {
    background: var(--color-brand-primary-hover);
}

.app-btn-sky-solid:focus {
    outline: none;
}

.app-btn-sky-solid:focus-visible {
    outline: 2px solid var(--color-brand-focus-ring);
    outline-offset: 2px;
}

.app-btn-sky-solid:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* İkon + kısa metin (Kategori, Düzenle, Özellik, …) */
.app-table-action-btn--with-label {
    gap: 0.375rem;
    padding: 0.375rem 0.625rem;
    font-size: var(--font-size-caption);
    font-weight: 500;
    line-height: 1.25;
}

.app-table-action-btn--with-label.app-table-action-btn--compact {
    padding: 0.25rem 0.5rem;
}

/* Ekle / birincil sky (Kategori, Özellik, Seçenek) */
.app-table-action-btn--add {
    border-color: rgb(125 211 252 / 0.85);
    background: rgb(240 249 255);
    color: rgb(3 105 161);
}

.app-table-action-btn--add:hover {
    background: rgb(224 242 254);
    border-color: rgb(56 189 248 / 0.9);
}

/* İç tablo satırı +/- (kategori / özellik genişletme) */
.app-table-action-btn--toggle {
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border-color: rgb(226 232 240);
    background: rgb(248 250 252);
    color: rgb(71 85 105);
}

.app-table-action-btn--toggle:hover {
    background: rgb(241 245 249);
    border-color: rgb(203 213 225);
}

.app-table-action-btn--toggle-sm {
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border-radius: 0.375rem;
    border-color: rgb(226 232 240);
    background: rgb(248 250 252);
    color: rgb(71 85 105);
}

.app-table-action-btn--toggle-sm:hover {
    background: rgb(241 245 249);
    border-color: rgb(203 213 225);
}

/* Liste / tablo durum rozeti (Aktif / Pasif) */
.app-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: var(--font-size-caption);
    font-weight: 500;
    line-height: 1.25;
}

.app-status-badge--active {
    background: rgb(209 250 229);
    color: rgb(4 120 87);
}

.app-status-badge--inactive {
    background: rgb(241 245 249);
    color: rgb(100 116 139);
}

.page-title {
    font-size: var(--font-size-page-title);
    font-weight: 600;
    line-height: var(--line-height-tight);
    color: var(--color-text-heading);
}

.page-description,
.breadcrumb,
.breadcrumb-link,
.breadcrumb-current,
.user-info-title {
    font-size: var(--font-size-page-description);
}

.page-description,
.user-info-title {
    line-height: 1.45;
}

.page-description {
    margin-top: 0.125rem;
    color: var(--color-text-body);
    opacity: 0.9;
}

.breadcrumb,
.breadcrumb-link,
.breadcrumb-current {
    font-size: var(--font-size-breadcrumb);
}

.breadcrumb {
    margin-top: 0.375rem;
}

.breadcrumb-link {
    font-weight: 500;
    color: var(--color-brand-primary-hover);
}

.breadcrumb-link:hover {
    background-color: var(--color-brand-muted-bg);
    color: var(--color-brand-primary);
}

.breadcrumb-link .icon-sm {
    color: var(--color-brand-primary-hover);
}

.breadcrumb-current {
    line-height: 1.4;
    color: var(--color-text-body);
}

.breadcrumb-current.font-semibold {
    color: var(--color-text-heading);
}

.nav-section-title {
    font-size: var(--font-size-nav-section);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-body);
    opacity: 0.65;
}

.nav-label {
    font-size: var(--font-size-nav-label);
    line-height: 1.35;
}

.mobile-nav-label {
    font-size: var(--font-size-nav-section);
    font-weight: 500;
    line-height: 1.2;
}

.user-info-title {
    font-weight: 500;
    line-height: 1.2;
    color: var(--color-text-heading);
}

.user-info-meta {
    font-size: var(--font-size-widget-meta);
    line-height: 1.2;
    color: var(--color-text-body);
    opacity: 0.88;
}

.nav-icon {
    color: inherit;
}

.nav-icon.icon-md {
    width: 1.125rem;
    height: 1.125rem;
}

.nav-icon svg,
.nav-item svg {
    width: 100%;
    height: 100%;
}

.dashboard-widget-layout {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    height: 100%;
}

.dashboard-widget-chart {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.dashboard-widget-bars {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
    justify-content: space-around;
    padding: 0 0.5rem;
    flex: 1;
    min-height: 0;
    flex-wrap: wrap;
}

.dashboard-widget-bar-item {
    min-width: 0;
}

.dashboard-widget-bar-stage {
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.dashboard-widget-bar-count {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.8125rem;
    font-weight: 700;
    color: white;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.dashboard-widget-bar-label {
    font-size: var(--font-size-widget-label);
    font-weight: 600;
    color: rgb(51, 65, 85);
    text-align: center;
}

.dashboard-widget-bar-label--truncate {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-widget-summary {
    text-align: center;
    padding: 1rem;
    border-radius: 0.75rem;
    height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-shrink: 0;
}

.dashboard-widget-summary--violet {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(99, 102, 241, 0.1));
}

.dashboard-widget-summary--sky {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.1), rgba(99, 102, 241, 0.1));
}

.type-metric,
.dashboard-widget-summary-value {
    font-size: var(--font-size-widget-metric);
    font-weight: 700;
    line-height: 1;
}

.dashboard-widget-summary-value--violet {
    color: rgb(139, 92, 246);
}

.dashboard-widget-summary-value--sky {
    color: rgb(14, 165, 233);
}

.dashboard-widget-summary-label {
    margin-top: 0.25rem;
    font-size: var(--font-size-widget-label);
    color: rgb(100, 116, 139);
    font-weight: 500;
}

.dashboard-widget-summary-meta {
    margin-top: 0.5rem;
    font-size: 0.6875rem;
    color: rgb(148, 163, 184);
}

.dashboard-widget-overline {
    margin-bottom: 0.5rem;
    font-size: var(--font-size-widget-overline);
    font-weight: 600;
    color: rgb(100, 116, 139);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.dashboard-avatar-img,
.dashboard-avatar-fallback,
.avatar {
    width: var(--dashboard-avatar-size);
    height: var(--dashboard-avatar-size);
    border-radius: var(--dashboard-avatar-radius);
}

.dashboard-avatar-img,
.dashboard-avatar-fallback {
    flex-shrink: 0;
}

.dashboard-avatar-img {
    object-fit: cover;
}

.dashboard-avatar-fallback.dashboard-avatar-fallback--hidden {
    display: none;
}

.dashboard-avatar-fallback--pink {
    background: linear-gradient(135deg, rgb(236, 72, 153), rgb(251, 113, 133));
}

.dashboard-avatar-fallback--violet {
    background: linear-gradient(135deg, rgb(14, 165, 233), rgb(139, 92, 246));
}

.dashboard-avatar-fallback--orange {
    background: linear-gradient(135deg, rgb(249, 115, 22), rgb(251, 146, 60));
}

.dashboard-avatar-fallback--sky {
    background: linear-gradient(135deg, rgb(14, 165, 233), rgb(56, 189, 248));
}

.glass {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(148, 163, 184, 0.2);
    box-shadow: 0 25px 60px -20px rgba(15, 23, 42, 0.2);
    backdrop-filter: blur(12px);
}

.nav-item {
    transition: all 0.2s;
    position: relative;
    gap: 0.5rem;
    padding-top: 0.3125rem;
    padding-bottom: 0.3125rem;
    color: var(--color-text-body);
}

.nav-item:hover {
    background-color: var(--color-brand-muted-bg);
    color: var(--color-text-heading);
}

.nav-item.active {
    background-color: var(--color-brand-muted-bg);
    border-left: 3px solid var(--color-brand-primary);
    color: var(--color-brand-primary-hover);
    font-weight: 600;
}

.nav-item.active svg {
    color: var(--color-brand-primary);
}

.nav-item .nav-icon {
    color: var(--color-text-body);
    opacity: 0.88;
}

.nav-item.active .nav-icon {
    color: var(--color-brand-primary);
    opacity: 1;
}

#navSections .space-y-1 > :not([hidden]) ~ :not([hidden]),
#adminSection .space-y-1 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 0;
}

#navSections > .mb-3,
#adminSection .mb-3 {
    margin-bottom: 0.5rem;
}

#sidebar {
    z-index: 1000;
    position: relative;
}

#sidebar.collapsed {
    width: 64px;
}

#sidebar.collapsed #companyLogo,
#sidebar.collapsed #userProfileShortcut {
    display: none;
}

#sidebar.collapsed #logoutBtn {
    padding: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

#sidebar.collapsed #logoutBtn .leading-tight {
    display: none;
}

#sidebar.collapsed .mb-3 > p {
    display: none;
}

#sidebar.collapsed .nav-item {
    justify-content: center;
    padding: 0.75rem;
    overflow: visible !important;
}

#sidebar.collapsed .nav-item .leading-tight {
    display: none;
}

#sidebar.collapsed .nav-item .flex-shrink-0 {
    display: flex;
}

.nav-item .tooltip,
#logoutBtn .tooltip {
    position: fixed;
    background: rgb(15, 23, 42);
    color: white;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    z-index: 10000;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    margin: 0;
}

.nav-item .tooltip::before,
#logoutBtn .tooltip::before {
    content: '';
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-right-color: rgb(15, 23, 42);
    z-index: 10001;
}

.nav-item .tooltip {
    display: none;
}

#sidebar.collapsed .nav-item .tooltip {
    display: block;
}

#sidebar.collapsed .nav-item:hover .tooltip {
    opacity: 1 !important;
    pointer-events: auto;
}

#sidebar.collapsed nav,
#sidebar.collapsed .space-y-1,
#sidebar.collapsed .mb-3 {
    overflow: visible !important;
}

#logoutBtn {
    position: relative;
}

#logoutBtn .tooltip {
    display: none;
    visibility: hidden;
}

#sidebar.collapsed #logoutBtn .tooltip {
    display: block;
    visibility: visible;
}

#sidebar.collapsed #logoutBtn:hover .tooltip {
    opacity: 1 !important;
    pointer-events: auto;
    visibility: visible;
}

.collapse-sidebar-btn {
    position: absolute;
    top: 1rem;
    right: -0.75rem;
    width: 1.5rem;
    height: 1.5rem;
    background: white;
    border: 1px solid rgb(226, 232, 240);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 10;
    transition: transform 0.2s;
}

.collapse-sidebar-btn:hover {
    background: rgb(248, 250, 252);
    transform: scale(1.1);
}

#sidebar.collapsed .collapse-sidebar-btn {
    transform: rotate(180deg);
}

.mobile-menu-item {
    flex: 1;
    min-width: 0;
    gap: 0.125rem;
}

#userProfileShortcut > div {
    gap: 0.5rem;
}

.mobile-menu-item:hover {
    color: var(--color-brand-primary);
}

.mobile-menu-item:hover svg {
    color: var(--color-brand-primary);
}

.mobile-menu-item.active {
    color: var(--color-brand-primary-hover) !important;
}

.mobile-menu-item.active svg {
    color: var(--color-brand-primary) !important;
}

main {
    padding-bottom: 4rem !important;
}

@media (max-width: 1023px) {
    .page-title {
        font-size: var(--font-size-page-title-mobile);
    }

    .mobile-nav-label {
        font-size: var(--font-size-nav-section);
    }

    .dashboard-widget-summary-value {
        font-size: var(--font-size-widget-metric-mobile);
    }

    body > div.flex {
        height: auto !important;
        min-height: 100vh;
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    main {
        position: relative !important;
        overflow: visible !important;
        overflow-x: hidden !important;
        height: auto !important;
        max-height: none !important;
        flex: none !important;
        width: 100% !important;
        max-width: 100vw !important;
    }

    header {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        z-index: auto !important;
        transform: none !important;
        width: auto !important;
        flex-shrink: 0;
    }

    main > div.flex-1.overflow-y-auto {
        position: relative !important;
        overflow: visible !important;
        overflow-x: hidden !important;
        height: auto !important;
        flex: none !important;
        width: 100% !important;
        max-width: 100vw !important;
    }

    .mood-banner {
        bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 0.25rem) !important;
        padding: 0.75rem;
    }

    .mood-indicator {
        bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 1.5rem) !important;
    }

    .mood-banner-content {
        padding: 1rem;
        margin: 0 !important;
        border-radius: 10px;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    .mood-buttons {
        gap: 0.5rem;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        align-items: stretch;
    }

    .mood-emoji {
        font-size: 1.25rem;
        height: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mood-label {
        font-size: 0.65rem;
        line-height: 1.1;
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mood-btn {
        padding: 0.65rem 0.25rem;
        min-height: 76px;
        width: 100%;
    }

    .mood-title {
        font-size: 0.875rem;
        margin-bottom: 0.75rem;
    }

    .mood-footer {
        padding-top: 0.75rem;
    }

    #sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        z-index: 9999 !important;
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out;
        overflow: hidden !important;
    }

    #sidebar:not(.hidden) {
        transform: translateX(0);
        width: 100% !important;
    }

    #sidebar.hidden {
        transform: translateX(-100%);
    }

    #sidebar .collapse-sidebar-btn {
        display: none !important;
    }

    #mobileSidebarCloseBtn {
        position: fixed;
        top: 1rem;
        right: 1rem;
        z-index: 10000;
    }

    #sidebar.collapsed {
        width: 100% !important;
    }

    #sidebar .mb-3 > p {
        display: block !important;
        visibility: visible !important;
    }

    #sidebar .nav-item .leading-tight {
        display: block !important;
        visibility: visible !important;
    }

    #sidebar .sidebar-content {
        padding-left: 0;
        height: 100dvh !important;
        max-height: 100dvh !important;
        min-height: 100dvh !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        position: relative !important;
    }

    #sidebar .sidebar-content > div:first-of-type {
        flex: 0 0 auto !important;
        height: auto !important;
    }

    #sidebar #userProfileShortcut {
        flex: 0 0 auto !important;
        height: auto !important;
        display: block !important;
    }

    #sidebar nav {
        padding-left: 0;
        flex: 1 1 0% !important;
        min-height: 0 !important;
        max-height: 100% !important;
        height: 0 !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }

    #sidebar nav #navSections {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
    }

    #sidebar nav #adminSection {
        flex: 0 0 auto !important;
        margin-top: auto !important;
    }

    #sidebar .sidebar-content > div:last-child {
        flex: 0 0 auto !important;
        height: auto !important;
        margin-top: 0 !important;
        position: relative !important;
        z-index: 10 !important;
    }

    #sidebar .mb-3 {
        padding-left: 1rem;
    }

    #sidebar .nav-item {
        padding-left: 0.5rem;
    }

    #sidebar #companyLogo {
        display: block !important;
    }

    #sidebar #logoutBtn .leading-tight {
        display: block !important;
    }

    .celebration-modal {
        padding: 8px;
        align-items: flex-start;
        padding-top: 20vh;
    }

    .celebration-content {
        padding: 32px 24px;
        margin: 16px;
        border-radius: 16px;
        max-width: calc(100% - 32px);
    }

    .celebration-emoji {
        font-size: 60px;
        margin-bottom: 20px;
    }

    .celebration-message {
        font-size: 18px;
        margin-bottom: 24px;
        padding: 0 8px;
    }

    .celebration-button {
        padding: 10px 24px;
        font-size: 14px;
        width: 100%;
        max-width: 200px;
    }
}

@media (min-width: 1024px) {
    main {
        padding-bottom: 0 !important;
    }
}

.dashboard-container {
    padding: 24px;
}

#dashboardMoodQuickFill.mood-hidden {
    display: none !important;
}

#dashboardMoodQuickFill.mood-open .mood-banner-content {
    display: block;
}

#dashboardMoodQuickFill.mood-open .mood-indicator {
    display: none;
}

#dashboardMoodQuickFill:not(.mood-open) .mood-banner-content {
    display: none;
}

#dashboardMoodQuickFill:not(.mood-open) .mood-indicator {
    display: block;
}

.mood-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 60;
    display: flex;
    justify-content: center;
    padding: 1rem;
    padding-bottom: 1rem;
    pointer-events: none;
}

.mood-banner > * {
    pointer-events: auto;
}

.mood-indicator {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #0d9488, #0f766e);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    z-index: 60;
    box-shadow: 0 4px 12px rgba(13, 148, 136, 0.4);
    transition: all 0.3s ease;
}

.mood-indicator:hover {
    padding: 0.85rem 1.6rem;
    box-shadow: 0 6px 16px rgba(13, 148, 136, 0.5);
    transform: translateX(-50%) translateY(-2px);
}

.mood-banner-content {
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(0, 0, 0, 0.05);
    max-width: 500px;
    width: 100%;
    padding: 1.5rem;
    position: relative;
    animation: moodSlideUp 0.4s ease-out;
}

@keyframes moodSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mood-close-btn {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    font-size: 1.5rem;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    border-radius: 6px;
}

.mood-close-btn:hover {
    background-color: #f1f5f9;
    color: var(--color-text-body);
}

.mood-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-heading);
    margin-bottom: 1rem;
    padding-right: 2rem;
}

.mood-buttons {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.mood-btn {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.75rem 0.5rem;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-text-body);
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
}

.mood-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 12px -2px rgba(0, 0, 0, 0.08);
}

.mood-btn.active {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    border-color: #f59e0b;
    color: #92400e;
    box-shadow: 0 8px 16px -2px rgba(245, 158, 11, 0.3);
}

.mood-emoji {
    font-size: 1.5rem;
}

.mood-label {
    font-size: 0.7rem;
}

.mood-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
    gap: 0.75rem;
}

.mood-link {
    font-size: 0.75rem;
    color: #0d9488;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}

.mood-link:hover {
    color: #0f766e;
}

.mood-saved {
    font-size: 0.75rem;
    color: #16a34a;
    font-weight: 500;
    opacity: 0;
    transition: opacity 0.3s;
}

.mood-saved.show {
    opacity: 1;
}

.widget-card {
    background: white;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.2s ease;
    height: 500px;
    width: 100%;
}

.widget-card:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.widget-heading {
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(248, 250, 252, 1);
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}

.widget-heading-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: white;
}

.widget-heading-icon--violet {
    background: rgb(139, 92, 246);
}

.widget-heading-icon--emerald {
    background: rgb(34, 197, 94);
}

.widget-heading-icon--pink {
    background: rgb(236, 72, 153);
}

.widget-heading-icon--slate {
    background: rgb(100, 116, 139);
}

.widget-heading-icon--orange {
    background: rgb(249, 115, 22);
}

.widget-heading-icon--sky {
    background: rgb(14, 165, 233);
}

.widget-heading-icon--teal {
    background: rgb(20, 184, 166);
}

.widget-heading-icon svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
    color: white;
}

.widget-heading-text {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.widget-heading-title {
    font-size: var(--font-size-widget-title);
    font-weight: 600;
    color: rgb(15, 23, 42);
}

.widget-heading-subtitle {
    font-size: var(--font-size-widget-subtitle);
    color: rgb(100, 116, 139);
}

.widget-body {
    padding: 12px;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.widget-body-scrollable {
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    min-height: 0;
}

.widget-body-scrollable::-webkit-scrollbar {
    width: 6px;
}

.widget-body-scrollable::-webkit-scrollbar-track {
    background: rgba(241, 245, 249, 0.5);
    border-radius: 3px;
}

.widget-body-scrollable::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.5);
    border-radius: 3px;
}

.widget-body-scrollable::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.7);
}

.pie-chart-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pie-segment {
    transition: transform 0.3s ease, filter 0.3s ease;
    transform-origin: center;
    cursor: pointer;
    animation: pieSegmentAppear 0.5s ease forwards;
}

.pie-segment:hover {
    transform: scale(1.1);
    filter: brightness(1.2) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
    z-index: 10;
}

.pie-tooltip {
    position: absolute;
    background: rgba(15, 23, 42, 0.95);
    color: white;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    pointer-events: none;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    white-space: nowrap;
}

.pie-tooltip.show {
    opacity: 1;
    transform: translateY(0);
}

.pie-center-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    pointer-events: none;
}

.pie-center-total {
    font-size: 24px;
    font-weight: 700;
    color: rgb(15, 23, 42);
    line-height: 1.2;
}

.pie-center-label {
    font-size: 11px;
    color: rgb(100, 116, 139);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

.pie-legend-item {
    transition: all 0.2s ease;
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
}

.pie-legend-item:hover {
    background: rgba(241, 245, 249, 0.8);
    transform: translateX(4px);
}

.pie-legend-item.active {
    background: rgba(241, 245, 249, 1);
    font-weight: 600;
}

@keyframes pieSegmentAppear {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.pie-segment:nth-child(1) {
    animation-delay: 0.1s;
}

.pie-segment:nth-child(2) {
    animation-delay: 0.2s;
}

.pie-segment:nth-child(3) {
    animation-delay: 0.3s;
}

.age-bar {
    transition: all 0.3s ease;
    position: relative;
}

.age-bar:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.4) !important;
    opacity: 0.9 !important;
}

.age-bar::after {
    content: attr(data-count);
    position: absolute;
    top: -24px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(15, 23, 42, 0.9);
    color: white;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
    z-index: 10;
}

.age-bar:hover::after {
    opacity: 1;
}

.widget-footer {
    padding: 12px 16px;
    border-top: 1px solid rgba(148, 163, 184, 0.1);
    background: rgba(248, 250, 252, 0.5);
}

.widget-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.widget-list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
}

.widget-list-item-avatar {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dashboard-widget-table {
    font-size: var(--font-size-widget-body);
}

.avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: var(--font-size-caption);
}

.widget-empty-state {
    text-align: center;
    padding: 32px 16px;
    color: rgb(100, 116, 139);
    font-size: var(--font-size-widget-body);
}

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

.widget-actions a {
    color: rgb(14, 165, 233);
    text-decoration: none;
    font-size: var(--font-size-widget-body);
    display: flex;
    align-items: center;
    gap: 4px;
}

.widget-actions a:hover {
    color: rgb(2, 132, 199);
}

.widget-list-item a.value:hover {
    text-decoration: underline;
    color: rgb(2, 132, 199) !important;
}

.survey-panel-title {
    font-size: var(--font-size-widget-title);
    font-weight: 600;
    line-height: 1.35;
}

.survey-panel-description,
.survey-meta,
.survey-empty-state {
    font-size: var(--font-size-caption);
    line-height: 1.4;
}

.survey-text,
.survey-question-title,
.survey-field-label,
.survey-input,
.survey-button {
    font-size: var(--font-size-body-sm);
    line-height: 1.45;
}

.survey-question-title,
.survey-field-label {
    font-weight: 500;
}

.survey-list-item-title {
    font-size: var(--font-size-widget-title);
    font-weight: 500;
    line-height: 1.35;
}

.celebration-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease;
    padding: 16px;
    overflow-y: auto;
}

.celebration-modal.hidden {
    display: none !important;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.celebration-content {
    background: white;
    border-radius: 20px;
    padding: 48px 32px;
    text-align: center;
    max-width: 500px;
    width: 100%;
    position: relative;
    animation: scaleIn 0.4s ease;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    margin: 20px;
}

@keyframes scaleIn {
    from {
        transform: scale(0.8);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.celebration-emoji {
    font-size: 80px;
    margin-bottom: 24px;
    animation: bounce 1s ease infinite;
}

@keyframes bounce {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }
}

.celebration-message {
    font-size: 20px;
    font-weight: 500;
    color: rgb(15, 23, 42);
    margin-bottom: 32px;
    line-height: 1.8;
}

.celebration-button {
    padding: 12px 32px;
    background: linear-gradient(135deg, rgb(14, 165, 233), rgb(99, 102, 241));
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.celebration-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(14, 165, 233, 0.3);
}

.confetti {
    position: fixed;
    width: 10px;
    height: 10px;
    background: #ffd700;
    position: absolute;
    animation: confetti-fall 3s linear infinite;
    z-index: 10000;
}

@keyframes confetti-fall {
    0% {
        transform: translateY(-100vh) rotate(0deg);
        opacity: 1;
    }

    100% {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0;
    }
}

.confetti:nth-child(1) {
    left: 10%;
    animation-delay: 0s;
    background: #ff6b6b;
}

.confetti:nth-child(2) {
    left: 20%;
    animation-delay: 0.2s;
    background: #4ecdc4;
}

.confetti:nth-child(3) {
    left: 30%;
    animation-delay: 0.4s;
    background: #ffe66d;
}

.confetti:nth-child(4) {
    left: 40%;
    animation-delay: 0.6s;
    background: #a8e6cf;
}

.confetti:nth-child(5) {
    left: 50%;
    animation-delay: 0.8s;
    background: #ff8b94;
}

.confetti:nth-child(6) {
    left: 60%;
    animation-delay: 1s;
    background: #95e1d3;
}

.confetti:nth-child(7) {
    left: 70%;
    animation-delay: 1.2s;
    background: #f38181;
}

.confetti:nth-child(8) {
    left: 80%;
    animation-delay: 1.4s;
    background: #aa96da;
}

.confetti:nth-child(9) {
    left: 90%;
    animation-delay: 1.6s;
    background: #fcbad3;
}

.confetti:nth-child(10) {
    left: 15%;
    animation-delay: 1.8s;
    background: #ffd93d;
}

.confetti:nth-child(11) {
    left: 25%;
    animation-delay: 2s;
    background: #6c5ce7;
}

.confetti:nth-child(12) {
    left: 35%;
    animation-delay: 2.2s;
    background: #fd79a8;
}

.confetti:nth-child(13) {
    left: 45%;
    animation-delay: 2.4s;
    background: #00b894;
}

.confetti:nth-child(14) {
    left: 55%;
    animation-delay: 2.6s;
    background: #e17055;
}

.confetti:nth-child(15) {
    left: 65%;
    animation-delay: 2.8s;
    background: #0984e3;
}

@keyframes firework-explode {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(0);
        opacity: 0;
    }
}

@keyframes firework-particle {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }

    100% {
        transform: translate(var(--x), var(--y)) scale(0);
        opacity: 0;
    }
}

/* ============================================
   App drawer / modal shell — tek kaynak (Avans limit drawer ölçeği)
   Tüm yeni drawer ve ortalanmış formlar bu sınıfları kullanmalı.

   Sağ drawer: .drawer + .drawer-backdrop.app-drawer-overlay +
               .drawer-panel.app-drawer-panel.app-drawer-panel--md|lg|xl
   Başlık: .app-drawer-header > .app-drawer-header__lead > (.app-drawer-title, .app-drawer-subtitle) + .app-drawer-close
   Gövde: .app-drawer-body  |  Alt: .app-drawer-footer + .drawer-btn-secondary | .drawer-btn-primary | .drawer-btn-danger
   Orta modal: .app-modal-overlay > .app-modal-panel--md|.app-modal-panel--sm (+ aynı header/body/footer)
   ============================================ */
:root {
    --app-drawer-header-pad-x: 1.5rem;
    --app-drawer-header-pad-y: 1.5rem;
    --app-drawer-body-pad-x: 1.5rem;
    --app-drawer-body-pad-y: 1.5rem;
    --app-drawer-footer-pad-x: 1.5rem;
    --app-drawer-footer-pad-y: 1.5rem;
}

/* Sağdan açılan panel — .drawer-panel ile birlikte (transform animasyonu) */
.app-drawer-panel {
    background: #fff;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.app-drawer-panel--md {
    max-width: 28rem; /* ~max-w-md */
}

.app-drawer-panel--lg {
    max-width: 32rem; /* ~max-w-lg */
}

.app-drawer-panel--xl {
    max-width: 56rem; /* ~max-w-4xl */
}

/* Arka plan — .drawer-backdrop üzerine ekleyin veya tek başına absolute inset-0 */
.drawer-backdrop.app-drawer-overlay,
.app-drawer-overlay {
    background-color: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.app-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    gap: 1rem;
    padding: var(--app-drawer-header-pad-y) var(--app-drawer-header-pad-x);
    border-bottom: 1px solid rgb(226, 232, 240);
    background: rgba(248, 250, 252, 0.5);
}

.app-drawer-header__lead {
    min-width: 0;
    flex: 1;
}

.app-drawer-title {
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 600;
    color: rgb(15, 23, 42);
    margin: 0;
}

.app-drawer-subtitle {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: rgb(100, 116, 139);
    margin: 0.125rem 0 0 0;
}

.app-drawer-close {
    flex-shrink: 0;
    padding: 0.5rem;
    margin: 0;
    border: none;
    border-radius: 0.5rem;
    background: transparent;
    color: rgb(148, 163, 184);
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.app-drawer-close:hover {
    color: rgb(71, 85, 105);
    background: rgb(226, 232, 240);
}

.app-drawer-close svg {
    width: 1.5rem;
    height: 1.5rem;
}

.app-drawer-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: var(--app-drawer-body-pad-y) var(--app-drawer-body-pad-x);
}

/* Form sarmalayıcı + .app-drawer-body (ör. avans limit drawer — gövde kayar, footer sabit) */
form.flex.flex-col.flex-1.min-h-0 > .app-drawer-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.app-drawer-footer {
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: var(--app-drawer-footer-pad-y) var(--app-drawer-footer-pad-x);
    border-top: 1px solid rgb(226, 232, 240);
    background: rgb(248, 250, 252);
}

.app-drawer-footer > .flex-1,
.app-drawer-footer > button.flex-1 {
    flex: 1 1 8rem;
}

/* Ortalanmış modal (module-asset-types vb.) */
.app-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background-color: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.app-modal-panel {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 0;
    max-height: min(90vh, 56rem);
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.app-modal-panel > .app-drawer-header {
    flex-shrink: 0;
}

.app-modal-panel > form.flex.flex-col {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.app-modal-panel--md {
    max-width: 28rem;
}

.app-modal-panel--sm {
    max-width: 24rem;
}

.app-modal-panel .app-drawer-header {
    border-radius: 0;
}

.app-modal-panel form.flex.flex-col > .app-drawer-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* Silme modali: header + gövde + footer (form yok) */
.app-modal-panel > .app-drawer-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.app-modal-panel > .app-drawer-footer {
    flex-shrink: 0;
}

/* ============================================
   Çalışan Sesi (Employee Voice) + Drawer ortak
   ============================================ */
.drawer {
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0.3s ease-in-out;
}

.drawer-open {
    visibility: visible;
    pointer-events: auto;
}

.drawer-backdrop {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.drawer-open .drawer-backdrop {
    opacity: 1;
}

.drawer-panel {
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.drawer-open .drawer-panel {
    transform: translateX(0);
}

/* Detail Drawer (user-details editUserDrawerPanel ile aynı tasarım, ortak kullanım) */
.detail-drawer {
    position: fixed;
    inset: 0;
    z-index: 60;
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0.3s ease;
}

.detail-drawer.drawer-open {
    visibility: visible;
    pointer-events: auto;
}

.detail-drawer-backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    transition: opacity 0.3s ease;
}

.detail-drawer-panel {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 100%;
    max-width: 42rem; /* max-w-3xl */
    background: #fff;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}

.detail-drawer.drawer-open .detail-drawer-panel {
    transform: translateX(0);
}

.detail-drawer-panel--wide {
    max-width: 64rem; /* max-w-5xl, user-details gibi */
}

/* Çalışan Sesi – Talep Detayı panel (sticky header/footer) */
.ev-detail-panel {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 100%;
    max-width: 48rem; /* 768px */
    background: #fff;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}
.detail-drawer.drawer-open .ev-detail-panel {
    transform: translateX(0);
}
.ev-detail-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgb(226 232 240);
    background: #fff;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 10;
}
.ev-detail-close-btn {
    padding: 0.375rem;
    border-radius: 0.5rem;
    color: rgb(148 163 184);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color 0.2s, background 0.2s;
}
.ev-detail-close-btn:hover {
    color: rgb(71 85 105);
    background: rgb(241 245 249);
}
.ev-detail-panel-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}
.ev-detail-panel-footer {
    flex-shrink: 0;
}

/* Pill içindeki select (onay sayfası Tip/Öncelik/Durum) */
.ev-pill-select {
  font-size: inherit;
  line-height: inherit;
  min-width: 4rem;
  cursor: pointer;
  outline: none;
}
.ev-pill-select:focus {
  outline: none;
}

/* Hedefler ekleme alanı – drawer içinde tam genişlik */
.ev-detail-targets-add {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Çalışan Sesi – Yorum avatarı (varsa fotoğraf gösterilir, dashboard ile uyumlu) */
.ev-comment-avatar-wrap {
    display: flex;
    position: relative;
}
.ev-comment-avatar-wrap .ev-comment-avatar-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ev-comment-avatar-wrap .ev-comment-avatar-fallback--hidden {
    display: none;
}
.ev-comment-avatar-wrap .ev-comment-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Yorum formu – gönder butonu textarea yüksekliğinde */
.ev-comments-form .ev-comment-send-row {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
}
.ev-comments-form .ev-comment-send-row .ev-comment-submit-btn {
    align-self: stretch;
    min-width: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.detail-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 1.5rem;
    border-bottom: 1px solid rgb(226, 232, 240);
    background: rgb(248, 250, 252);
}

.detail-drawer-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 1.5rem 1.5rem;
}

.detail-drawer-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid rgb(226, 232, 240);
    background: #fff;
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

.detail-drawer-close-btn {
    padding: 0.5rem;
    border-radius: 0.5rem;
    color: rgb(148, 163, 184);
    transition: color 0.2s, background 0.2s;
}

.detail-drawer-close-btn:hover {
    color: rgb(71, 85, 105);
    background: rgb(226, 232, 240);
}

/* Drawer footer butonları (ortak) */
.drawer-btn-secondary {
    flex: 1 1 0%;
    padding: 0.625rem 1rem;
    border: 1px solid rgb(203, 213, 225);
    border-radius: 0.5rem;
    font-weight: 500;
    color: rgb(51, 65, 85);
    background: #fff;
    transition: background-color 0.2s;
}
.drawer-btn-secondary:hover {
    background: rgb(248, 250, 252);
}

.drawer-btn-primary {
    flex: 1 1 0%;
    padding: 0.625rem 1rem;
    border: none;
    border-radius: 0.5rem;
    font-weight: 500;
    color: #fff;
    background: var(--color-brand-primary);
    transition: background-color 0.2s;
}
.drawer-btn-primary:hover {
    background: var(--color-brand-primary-hover);
}

.drawer-btn-danger {
    flex: 1 1 0%;
    padding: 0.625rem 1rem;
    border: none;
    border-radius: 0.5rem;
    font-weight: 500;
    color: #fff;
    background: rgb(244, 63, 94);
    transition: background-color 0.2s;
}
.drawer-btn-danger:hover {
    background: rgb(225, 29, 72);
}

.form-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid rgb(203, 213, 225);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-input:focus {
    border-color: rgb(14, 165, 233);
    box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.2);
    outline: none;
}

/* ============================================
   Asset Module - Shared styles (marka renkleri :root)
   ============================================ */
.asset-btn-primary {
    background: var(--color-brand-primary);
    color: #fff;
    transition: background-color 0.2s ease, opacity 0.2s ease;
}
.asset-btn-primary:hover:not(:disabled) {
    background: var(--color-brand-primary-hover);
}
.asset-btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.asset-input-focus:focus {
    border-color: var(--color-brand-primary) !important;
    box-shadow: 0 0 0 2px var(--color-brand-focus-ring) !important;
    outline: none !important;
}

.asset-accent-text {
    color: var(--color-brand-primary-hover);
}

.asset-action-link {
    color: var(--color-brand-primary);
}
.asset-action-link:hover {
    color: var(--color-brand-primary-hover);
}

.asset-chip-action {
    background: var(--color-brand-muted-bg);
    color: var(--color-brand-primary-hover);
}
.asset-chip-action:hover {
    background: rgba(0, 177, 169, 0.16);
}

/* Hızlı bağlantı kartları — /hizli-baglantilar + dashboard widget (.quicklinks-feed) */
.quicklinks-feed .quicklinks-category-group {
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid rgb(226 232 240 / 0.65);
}

.quicklinks-feed .quicklinks-category-group:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.quicklinks-feed .quicklinks-feed-group-title {
    margin: 0 0 0.35rem;
    padding: 0 0.125rem;
    font-size: var(--font-size-title);
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-text-heading);
    letter-spacing: -0.01em;
}

.quicklinks-feed--widget .quicklinks-category-group {
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
}

.quicklinks-feed--widget .quicklinks-feed-group-title {
    font-size: var(--font-size-body);
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.quicklinks-feed .quicklinks-feed-section-title {
    margin: 0;
    padding: 0 0.125rem;
    font-size: var(--font-size-overline);
    font-weight: 600;
    line-height: 1.35;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-body);
    opacity: 0.88;
}

.quicklinks-feed .quicklinks-card-link {
    display: flex;
    flex-direction: column;
    min-height: 5.5rem;
    padding: 1rem;
    border-radius: 0.75rem;
    border: 1px solid rgb(226 232 240 / 0.88);
    background: #fff;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
    outline: none;
}

.quicklinks-feed .quicklinks-card-link:hover {
    border-color: var(--color-brand-primary);
    box-shadow:
        0 4px 14px rgba(0, 177, 169, 0.12),
        0 0 0 1px var(--color-brand-muted-border);
    transform: translateY(-2px);
}

.quicklinks-feed .quicklinks-card-link:focus-visible {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--color-brand-primary);
}

.quicklinks-feed .quicklinks-card-icon {
    display: flex;
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 0.625rem;
    background: var(--color-brand-muted-bg);
    border: 1px solid var(--color-brand-muted-border);
    color: var(--color-brand-primary);
    transition:
        color 0.2s ease,
        border-color 0.2s ease,
        background-color 0.2s ease;
}

.quicklinks-feed .quicklinks-card-link:hover .quicklinks-card-icon {
    color: var(--color-brand-primary-hover);
    border-color: var(--color-brand-primary);
}

.quicklinks-feed .quicklinks-card-title {
    display: block;
    margin: 0;
    font-size: var(--font-size-body-sm);
    font-weight: 600;
    line-height: 1.375;
    color: var(--color-text-heading);
    transition: color 0.2s ease;
}

.quicklinks-feed .quicklinks-card-link:hover .quicklinks-card-title {
    color: var(--color-brand-primary-hover);
}

.quicklinks-feed .quicklinks-card-ext-hint {
    margin-top: 0.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: var(--font-size-caption);
    font-weight: 500;
    line-height: 1.35;
    color: var(--color-text-body);
    opacity: 0.78;
    transition:
        color 0.2s ease,
        opacity 0.2s ease;
}

.quicklinks-feed .quicklinks-card-link:hover .quicklinks-card-ext-hint {
    color: var(--color-brand-primary-hover);
    opacity: 1;
}

/* Dashboard widget: daha kompakt kartlar (aynı marka hover/focus) */
.quicklinks-feed--widget .quicklinks-card-link {
    min-height: 4.25rem;
    padding: 0.75rem;
}
.quicklinks-feed--widget .quicklinks-card-icon {
    width: 2.125rem;
    height: 2.125rem;
    border-radius: 0.625rem;
}
.quicklinks-feed--widget .quicklinks-card-ext-hint {
    margin-top: 0.375rem;
    font-size: 0.6875rem;
}

/* === Page: module-yan-hak-bakiye-raporu (web/module-yan-hak-bakiye-raporu.php) === */
.page-module-yan-hak-bakiye-raporu .yanhak-rapor-spinner {
    border-color: rgb(226 232 240);
    border-bottom-color: var(--color-brand-primary);
}

@keyframes yanhakRaporFadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.page-module-yan-hak-bakiye-raporu .yanhak-rapor-fade-in-up {
    animation: yanhakRaporFadeInUp 0.3s ease forwards;
}

.page-module-yan-hak-bakiye-raporu .history-filter-btn.yanhak-rapor-history-filter-active {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--color-brand-primary);
    transform: scale(1.02);
}

/* Drawer — özet kartları (JS’te ham Tailwind renk yok) */
.page-module-yan-hak-bakiye-raporu .yanhak-rapor-summary-card {
    text-align: left;
    padding: 0.75rem;
    border-radius: 0.75rem;
    border: 1px solid transparent;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.page-module-yan-hak-bakiye-raporu .yanhak-rapor-summary-card:hover:not(.yanhak-rapor-history-filter-active) {
    filter: brightness(0.98);
}

.page-module-yan-hak-bakiye-raporu .yanhak-rapor-summary--yukleme {
    background: rgba(0, 177, 169, 0.1);
    border-color: rgba(0, 177, 169, 0.22);
}

.page-module-yan-hak-bakiye-raporu .yanhak-rapor-summary--harcama {
    background: rgba(244, 63, 94, 0.08);
    border-color: rgba(244, 63, 94, 0.2);
}

.page-module-yan-hak-bakiye-raporu .yanhak-rapor-summary--iade {
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.25);
}

.page-module-yan-hak-bakiye-raporu .yanhak-rapor-summary__label {
    font-size: var(--font-size-overline);
    line-height: var(--line-height-tight);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.25rem;
    opacity: 0.85;
}

.page-module-yan-hak-bakiye-raporu .yanhak-rapor-summary--yukleme .yanhak-rapor-summary__label {
    color: var(--color-brand-primary-hover);
}

.page-module-yan-hak-bakiye-raporu .yanhak-rapor-summary--harcama .yanhak-rapor-summary__label {
    color: rgb(190 24 93);
}

.page-module-yan-hak-bakiye-raporu .yanhak-rapor-summary--iade .yanhak-rapor-summary__label {
    color: rgb(180 83 9);
}

.page-module-yan-hak-bakiye-raporu .yanhak-rapor-summary__value {
    font-size: var(--font-size-title);
    line-height: var(--line-height-tight);
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-module-yan-hak-bakiye-raporu .yanhak-rapor-summary--yukleme .yanhak-rapor-summary__value {
    color: var(--color-brand-primary-hover);
}

.page-module-yan-hak-bakiye-raporu .yanhak-rapor-summary--harcama .yanhak-rapor-summary__value {
    color: rgb(225 29 72);
}

.page-module-yan-hak-bakiye-raporu .yanhak-rapor-summary--iade .yanhak-rapor-summary__value {
    color: rgb(217 119 6);
}

.page-module-yan-hak-bakiye-raporu .yanhak-rapor-summary__dot {
    position: absolute;
    top: 0.375rem;
    right: 0.5rem;
    display: none;
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 9999px;
}

.page-module-yan-hak-bakiye-raporu .history-filter-btn.yanhak-rapor-history-filter-active .yanhak-rapor-summary__dot {
    display: block;
}

.page-module-yan-hak-bakiye-raporu .yanhak-rapor-summary--yukleme .yanhak-rapor-summary__dot {
    background: var(--color-brand-primary);
    box-shadow: 0 0 8px rgba(0, 177, 169, 0.45);
}

.page-module-yan-hak-bakiye-raporu .yanhak-rapor-summary--harcama .yanhak-rapor-summary__dot {
    background: rgb(244 63 94);
    box-shadow: 0 0 8px rgba(244, 63, 94, 0.45);
}

.page-module-yan-hak-bakiye-raporu .yanhak-rapor-summary--iade .yanhak-rapor-summary__dot {
    background: rgb(245 158 11);
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.45);
}

/* Zaman çizelgesi — işlem tipi kutusu */
.page-module-yan-hak-bakiye-raporu .yanhak-rapor-type-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid transparent;
}

.page-module-yan-hak-bakiye-raporu .yanhak-rapor-type-icon--yukleme {
    background: rgba(0, 177, 169, 0.12);
    border-color: rgba(0, 177, 169, 0.22);
    color: var(--color-brand-primary-hover);
}

.page-module-yan-hak-bakiye-raporu .yanhak-rapor-type-icon--harcama {
    background: rgba(244, 63, 94, 0.1);
    border-color: rgba(244, 63, 94, 0.2);
    color: rgb(225 29 72);
}

.page-module-yan-hak-bakiye-raporu .yanhak-rapor-type-icon--iade {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.22);
    color: rgb(217 119 6);
}

.page-module-yan-hak-bakiye-raporu .yanhak-rapor-type-icon--default {
    background: rgb(248 250 252);
    border-color: rgb(241 245 249);
    color: var(--color-text-body);
}

/* Tutar (+ / -) */
.page-module-yan-hak-bakiye-raporu .yanhak-rapor-amount--credit {
    color: var(--color-brand-primary-hover);
}

.page-module-yan-hak-bakiye-raporu .yanhak-rapor-amount--debit {
    color: rgb(225 29 72);
}

.page-module-yan-hak-bakiye-raporu .yanhak-rapor-text-error {
    color: rgb(225 29 72);
}

/* Onay / durum rozetleri */
.page-module-yan-hak-bakiye-raporu .yanhak-rapor-status {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: var(--font-size-overline);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1.2;
}

.page-module-yan-hak-bakiye-raporu .yanhak-rapor-status--pending {
    background: rgb(254 249 195);
    color: rgb(161 98 7);
}

.page-module-yan-hak-bakiye-raporu .yanhak-rapor-status--approved {
    background: rgba(0, 177, 169, 0.15);
    color: var(--color-brand-primary-hover);
}

.page-module-yan-hak-bakiye-raporu .yanhak-rapor-status--rejected {
    background: rgb(254 226 226);
    color: rgb(185 28 28);
}

.page-module-yan-hak-bakiye-raporu .yanhak-rapor-status--cancelled {
    background: rgb(241 245 249);
    color: var(--color-text-body);
}

/* === Page: module-yan-hak-siparis-raporu (web/module-yan-hak-siparis-raporu.php) === */
.page-module-yan-hak-siparis-raporu .siparis-rapor-text-error {
    color: rgb(225 29 72);
}

.page-module-yan-hak-siparis-raporu .siparis-rapor-order-card {
    padding: 1rem;
    border-radius: 0.75rem;
    border: 1px solid rgb(241 245 249);
    background: rgba(248, 250, 252, 0.65);
}

.page-module-yan-hak-siparis-raporu .siparis-rapor-order-status {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: var(--font-size-overline);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1.2;
}

.page-module-yan-hak-siparis-raporu .siparis-rapor-order-status--pending {
    background: rgb(254 249 195);
    color: rgb(161 98 7);
}

.page-module-yan-hak-siparis-raporu .siparis-rapor-order-status--approved {
    background: rgba(0, 177, 169, 0.15);
    color: var(--color-brand-primary-hover);
}

.page-module-yan-hak-siparis-raporu .siparis-rapor-order-status--rejected {
    background: rgb(254 226 226);
    color: rgb(185 28 28);
}

.page-module-yan-hak-siparis-raporu .siparis-rapor-order-status--cancelled {
    background: rgb(241 245 249);
    color: var(--color-text-body);
}

.asset-source-badge-company {
    background: var(--color-brand-muted-bg);
    color: var(--color-brand-primary-hover);
}

.asset-row-selected {
    background: rgba(0, 177, 169, 0.07);
}

.asset-status-assigned {
    background: var(--color-brand-muted-bg);
    color: var(--color-brand-primary-hover);
}

/* Çalışan Sesi durum rozetleri */
.ev-status-badge {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
}

.ev-status-acik {
    background: color-mix(in srgb, var(--color-brand-primary) 14%, transparent);
    color: var(--color-brand-primary);
}

.ev-status-inceleniyor {
    background: rgb(254 249 195);
    color: rgb(180 83 9);
}

.ev-status-cozuldu {
    background: rgb(220 252 231);
    color: rgb(22 163 74);
}

.ev-status-reddedildi {
    background: rgb(254 226 226);
    color: rgb(185 28 28);
}

/* Sayısal status (1=Açık, 2=İnceleniyor, 3=Kapandı, 4=Reddedildi) */
.ev-status-1 { background: color-mix(in srgb, var(--color-brand-primary) 14%, transparent); color: var(--color-brand-primary); }
.ev-status-2 { background: rgb(254 249 195); color: rgb(180 83 9); }
.ev-status-3 { background: rgb(220 252 231); color: rgb(22 163 74); }
.ev-status-4 { background: rgb(254 226 226); color: rgb(185 28 28); }

/* Çalışan Sesi – detay / liste pill’leri (Tailwind yerine) */
.ev-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 9999px;
    font-size: var(--font-size-caption);
    font-weight: 500;
    border: 1px solid transparent;
    line-height: 1.2;
}
.ev-pill svg { flex-shrink: 0; }
.ev-pill--tip {
    background: color-mix(in srgb, var(--color-brand-primary) 12%, transparent);
    color: var(--color-brand-primary);
    border-color: color-mix(in srgb, var(--color-brand-primary) 22%, transparent);
}
.ev-pill--pri-low {
    background: rgb(220 252 231);
    color: rgb(22 163 74);
    border-color: rgb(187 247 208);
}
.ev-pill--pri-high {
    background: rgb(254 226 226);
    color: rgb(185 28 28);
    border-color: rgb(254 202 202);
}
.ev-pill--pri-normal {
    background: color-mix(in srgb, var(--color-brand-primary) 12%, transparent);
    color: var(--color-brand-primary);
    border-color: color-mix(in srgb, var(--color-brand-primary) 22%, transparent);
}
.ev-pill--status-1 {
    background: color-mix(in srgb, var(--color-brand-primary) 12%, transparent);
    color: var(--color-brand-primary);
    border-color: color-mix(in srgb, var(--color-brand-primary) 22%, transparent);
}
.ev-pill--status-2 {
    background: rgb(254 249 195);
    color: rgb(180 83 9);
    border-color: rgb(253 230 138);
}
.ev-pill--status-3 {
    background: rgb(220 252 231);
    color: rgb(22 163 74);
    border-color: rgb(167 243 208);
}
.ev-pill--status-4 {
    background: rgb(254 226 226);
    color: rgb(185 28 28);
    border-color: rgb(254 202 202);
}

@keyframes ev-loading-spin {
    to { transform: rotate(360deg); }
}
.ev-loading-spinner {
    width: 2rem;
    height: 2rem;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0.5rem;
    border: 4px solid color-mix(in srgb, var(--color-brand-primary) 18%, transparent);
    border-top-color: var(--color-brand-primary);
    border-radius: 9999px;
    animation: ev-loading-spin 0.75s linear infinite;
}

.ev-loading-spinner--compact {
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: 0.5rem;
}

.ev-text-error {
    color: rgb(185 28 28);
}

.ev-doc-upload-zone--drag {
    border-color: var(--color-brand-primary) !important;
    background: color-mix(in srgb, var(--color-brand-primary) 8%, transparent) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-brand-primary) 22%, transparent);
}

/* Süreç puanı 1-5 yıldız (ortak; 1=sol, 5=sağ) */
.ev-process-rating { margin-top: 0.5rem; }
.ev-process-rating .ev-rating-stars {
  display: flex; gap: 0.5rem; align-items: center; justify-content: flex-start;
}
.ev-process-rating .ev-rating-star {
  width: 2rem; height: 2rem; padding: 0; font-size: 1.5rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer; color: rgb(203 213 225);
  transition: color 0.15s;
}
.ev-process-rating .ev-rating-star.ev-rating-active { color: rgb(245 158 11); }
/* Hover: üzerine gelinen yıldıza kadar hepsi renklensin */
.ev-process-rating .ev-rating-stars.ev-rating-hover-1 .ev-rating-star:nth-child(1),
.ev-process-rating .ev-rating-stars.ev-rating-hover-2 .ev-rating-star:nth-child(1),
.ev-process-rating .ev-rating-stars.ev-rating-hover-2 .ev-rating-star:nth-child(2),
.ev-process-rating .ev-rating-stars.ev-rating-hover-3 .ev-rating-star:nth-child(1),
.ev-process-rating .ev-rating-stars.ev-rating-hover-3 .ev-rating-star:nth-child(2),
.ev-process-rating .ev-rating-stars.ev-rating-hover-3 .ev-rating-star:nth-child(3),
.ev-process-rating .ev-rating-stars.ev-rating-hover-4 .ev-rating-star:nth-child(1),
.ev-process-rating .ev-rating-stars.ev-rating-hover-4 .ev-rating-star:nth-child(2),
.ev-process-rating .ev-rating-stars.ev-rating-hover-4 .ev-rating-star:nth-child(3),
.ev-process-rating .ev-rating-stars.ev-rating-hover-4 .ev-rating-star:nth-child(4),
.ev-process-rating .ev-rating-stars.ev-rating-hover-5 .ev-rating-star:nth-child(1),
.ev-process-rating .ev-rating-stars.ev-rating-hover-5 .ev-rating-star:nth-child(2),
.ev-process-rating .ev-rating-stars.ev-rating-hover-5 .ev-rating-star:nth-child(3),
.ev-process-rating .ev-rating-stars.ev-rating-hover-5 .ev-rating-star:nth-child(4),
.ev-process-rating .ev-rating-stars.ev-rating-hover-5 .ev-rating-star:nth-child(5) {
  color: rgb(245 158 11);
}
.ev-process-rating .ev-rating-labels { display: none; }
.ev-process-rating .ev-rating-hint {
  margin-top: 0.5rem; font-size: 0.6875rem; color: rgb(148 163 184);
}
.ev-process-rating .ev-rating-display .ev-rating-star { cursor: default; pointer-events: none; }

/* Tip / Öncelik / Durum – ikonlu, renksiz (nötr gri) meta kartları */
.ev-detail-meta-card {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.75rem 1rem; border-radius: 0.5rem;
  border: 1px solid rgb(226 232 240);
  background: rgb(248 250 252);
  min-height: 2.75rem;
}
.ev-detail-meta-card .ev-detail-meta-icon {
  width: 2.25rem; height: 2.25rem; flex-shrink: 0; border-radius: 0.5rem;
  display: flex; align-items: center; justify-content: center;
  background: rgb(241 245 249);
  color: rgb(100 116 139);
}
.ev-detail-meta-card .ev-detail-meta-icon svg { width: 1.125rem; height: 1.125rem; }
.ev-detail-meta-card .ev-detail-meta-value {
  font-size: 0.875rem; font-weight: 600; line-height: 1.3;
  color: rgb(51 65 85);
}
.ev-detail-meta-card.ev-meta-tip,
.ev-detail-meta-card.ev-meta-priority-low,
.ev-detail-meta-card.ev-meta-priority-normal,
.ev-detail-meta-card.ev-meta-priority-high {
  background: rgb(248 250 252);
  border-color: rgb(226 232 240);
}
.ev-detail-meta-card.ev-meta-tip .ev-detail-meta-icon,
.ev-detail-meta-card.ev-meta-priority-low .ev-detail-meta-icon,
.ev-detail-meta-card.ev-meta-priority-normal .ev-detail-meta-icon,
.ev-detail-meta-card.ev-meta-priority-high .ev-detail-meta-icon,
.ev-detail-meta-card.ev-meta-status .ev-detail-meta-icon,
.ev-detail-meta-card.ev-meta-status-1 .ev-detail-meta-icon,
.ev-detail-meta-card.ev-meta-status-2 .ev-detail-meta-icon,
.ev-detail-meta-card.ev-meta-status-3 .ev-detail-meta-icon,
.ev-detail-meta-card.ev-meta-status-4 .ev-detail-meta-icon {
  background: rgb(241 245 249);
  color: rgb(100 116 139);
}
.ev-detail-meta-card.ev-meta-status { background: rgb(248 250 252); border-color: rgb(226 232 240); }
.ev-detail-meta-card.ev-meta-status .ev-detail-meta-value { font-weight: 500; color: rgb(51 65 85); }

/* Çalışan Sesi – Detay drawer içerik (ortak: /calisanin-sesi + /calisanin-sesi-talepleri) */
.ev-detail-content { display: flex; flex-direction: column; gap: 2rem; }
.ev-detail-block { margin-bottom: 0; }
.ev-detail-block:last-child { margin-bottom: 0; }
.ev-detail-card {
  padding: 0.875rem 1rem; background: #fff; border: 1px solid rgb(241 245 249);
  border-radius: 0.5rem; transition: border-color 0.15s, box-shadow 0.15s;
}
.ev-detail-card:hover { border-color: rgb(226 232 240); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); }
.ev-detail-card-label {
  font-size: 0.6875rem; font-weight: 600; color: rgb(100 116 139);
  text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.375rem;
}
.ev-detail-card-value { font-size: 0.875rem; font-weight: 500; color: rgb(15 23 42); line-height: 1.4; }
.ev-detail-card--title .ev-detail-card-value {
  font-size: 1rem; font-weight: 600; color: rgb(15 23 42); line-height: 1.35;
}
.ev-detail-card--title { border-left: 3px solid var(--color-brand-primary); background: rgb(248 250 252); }
.ev-detail-card--description .ev-detail-card-value { white-space: pre-wrap; min-height: 2.5rem; }
.ev-detail-card--description { min-height: 3.5rem; }
.ev-detail-title-body { display: flex; flex-direction: column; gap: 0.5rem; }
.ev-detail-title-body .ev-detail-title { font-size: 1rem; font-weight: 700; color: rgb(15 23 42); line-height: 1.35; margin: 0; }
.ev-detail-title-body .ev-detail-body { font-size: 0.875rem; font-weight: 400; color: rgb(51 65 85); line-height: 1.5; margin: 0; white-space: pre-wrap; }
.ev-detail-grid-row { display: flex; flex-direction: column; gap: 1rem; }
.ev-detail-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.ev-detail-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.ev-detail-section-body { display: flex; flex-direction: column; gap: 1.25rem; }
@media (max-width: 480px) {
  .ev-detail-grid-3 { grid-template-columns: 1fr; }
  .ev-detail-grid-2 { grid-template-columns: 1fr; }
}
.ev-doc-upload-zone {
  position: relative;
  width: 100%; padding: 0.75rem 1rem; border: 1px dashed rgb(226 232 240); border-radius: 0.5rem;
  display: flex; align-items: center; gap: 0.75rem; cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.ev-doc-upload-zone .ev-doc-upload-label {
  display: flex; align-items: center; gap: 0.75rem; flex: 1; min-width: 0; cursor: pointer;
}
.ev-doc-upload-zone:hover { border-color: var(--color-brand-primary); background: color-mix(in srgb, var(--color-brand-primary) 10%, transparent); }
.ev-doc-upload-zone .ev-doc-upload-icon {
  width: 2.5rem; height: 2.5rem; border-radius: 9999px; background: color-mix(in srgb, var(--color-brand-primary) 14%, transparent); color: var(--color-brand-primary);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: transform 0.2s;
}
.ev-doc-upload-zone:hover .ev-doc-upload-icon { transform: scale(1.05); }
.ev-doc-upload-zone .ev-doc-upload-text { font-size: 0.875rem; font-weight: 500; color: rgb(51 65 85); }
.ev-doc-upload-zone .ev-doc-upload-text strong { font-weight: 600; color: rgb(30 41 59); }
.ev-doc-upload-zone .ev-doc-upload-hint { font-size: 0.75rem; color: rgb(100 116 139); margin-top: 0.125rem; }
.ev-doc-upload-progress {
  position: absolute; inset: 0; background: rgba(255,255,255,0.8); backdrop-filter: blur(4px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: 0.5rem;
}
.ev-detail-docs-table-wrap { margin-top: 1rem; overflow: hidden; border-radius: 0.5rem; border: 1px solid rgb(226 232 240); }
.ev-detail-docs-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.ev-detail-docs-table thead { background: rgb(248 250 252); }
.ev-detail-docs-table th {
  padding: 0.5rem 0.75rem; text-align: left; font-size: 0.6875rem; font-weight: 600;
  color: rgb(100 116 139); text-transform: uppercase; letter-spacing: 0.05em;
}
.ev-detail-docs-table th:last-child { text-align: right; }
.ev-detail-docs-table tbody { background: #fff; }
.ev-detail-docs-table tbody tr { border-top: 1px solid rgb(241 245 249); }
.ev-detail-docs-table tbody tr:hover { background: rgba(248 250 252, 0.5); }
.ev-detail-docs-table td { padding: 0.5rem 0.75rem; color: rgb(51 65 85); }
.ev-detail-docs-table td:first-child { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-detail-docs-table td:last-child { text-align: right; }
.ev-detail-docs-table .ev-doc-view {
  padding: 0.375rem 0.75rem; border-radius: 0.5rem; font-size: 0.75rem; font-weight: 500;
  background: color-mix(in srgb, var(--color-brand-primary) 14%, transparent); color: var(--color-brand-primary); border: none; cursor: pointer;
  transition: background 0.2s;
}
.ev-detail-docs-table .ev-doc-view:hover { background: color-mix(in srgb, var(--color-brand-primary) 22%, transparent); }
.ev-detail-section-box { padding: 0.75rem 0; }
/* Çalışan Sesi – Yorumlar (avatar + balon + meta + form) */
.ev-comments-block { padding: 0; }
.ev-comments-title { font-size: 1.125rem; font-weight: 500; color: rgb(15 23 42); margin: 0 0 1rem 0; }
.ev-comments-list { display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: 1.5rem; }
.ev-comment-row { display: flex; gap: 0.75rem; }
.ev-comment-row--internal .ev-comment-bubble { background: rgb(255 251 235); border-left: 4px solid rgb(245 158 11); }
.ev-comment-avatar {
  width: 2rem; height: 2rem; flex-shrink: 0; margin-top: 0.25rem;
  border-radius: 9999px; background: rgb(203 213 225); color: rgb(51 65 85);
  font-size: 0.75rem; font-weight: 600; display: flex; align-items: center; justify-content: center;
}
.ev-comment-avatar-wrap { position: relative; overflow: hidden; width: 2rem; height: 2rem; flex-shrink: 0; margin-top: 0.25rem; border-radius: 9999px; }
.ev-comment-avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: 9999px; display: block; }
.ev-comment-avatar-fallback--hidden { display: none; }
.ev-comment-avatar-wrap .ev-comment-avatar-fallback {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgb(203 213 225); color: rgb(51 65 85); font-size: 0.75rem; font-weight: 600;
}
.ev-comment-avatar--self { font-size: 0.625rem; font-weight: 500; }
.ev-comment-content { flex: 1; min-width: 0; }
.ev-comment-bubble { background: rgb(248 250 252); border-radius: 0.5rem; padding: 0.75rem 1rem; }
.ev-comment-text { font-size: 0.875rem; color: rgb(15 23 42); margin: 0; line-height: 1.4; white-space: pre-wrap; }
.ev-comment-badge-internal { display: inline-flex; align-items: center; padding: 0.125rem 0.5rem; border-radius: 0.25rem; font-size: 0.6875rem; font-weight: 600; background: rgb(254 243 199); color: rgb(146 64 14); margin-right: 0.5rem; }
.ev-comment-meta { font-size: 0.75rem; color: rgb(100 116 139); margin-top: 0.25rem; }
.ev-comments-form { margin-top: 1.5rem; }
.ev-comments-form .flex.gap-3 { display: flex; gap: 0.75rem; }
.ev-comments-form .flex-1 { flex: 1; min-width: 0; }
.ev-comment-submit-btn {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 0.375rem;
  height: 2.25rem; padding: 0 0.75rem; border: none; border-radius: 0.5rem;
  font-size: 0.8125rem; font-weight: 500; color: #fff; background: var(--color-brand-primary);
  cursor: pointer; transition: background 0.2s;
}
.ev-comment-submit-btn:hover { background: var(--color-brand-primary-hover); }
.ev-comment-submit-icon { width: 1rem; height: 1rem; flex-shrink: 0; }
.ev-detail-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.ev-detail-list li { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.375rem 0.5rem; font-size: 0.875rem; color: rgb(51 65 85); }
.ev-detail-list li span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Permissions table - module-company-onaysureci / evPermissionsListContainer */
.permissions-table-container {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
}
.permissions-table {
    border-collapse: collapse;
    min-width: 480px;
}
.permissions-table th,
.permissions-table td {
    border: 1px solid rgb(203, 213, 225);
    padding: 0.75rem;
}
.permissions-table th {
    background-color: rgb(241, 245, 249);
    font-weight: 600;
    font-size: 0.75rem;
}
.permissions-table th .flex.flex-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}
.permissions-table th svg {
    width: 1rem;
    height: 1rem;
}
.permissions-table th span {
    font-size: 0.75rem;
}
.permissions-table tbody tr:hover {
    background-color: rgb(248, 250, 252);
}
.permissions-table td:first-child .font-medium {
    font-size: 0.875rem;
}
.permissions-table td:first-child .text-xs {
    font-size: 0.75rem;
}
.permissions-table input[type="checkbox"] {
    width: 1.25rem;
    height: 1.25rem;
    cursor: pointer;
}
@media (max-width: 640px) {
    .permissions-table th,
    .permissions-table td {
        padding: 0.5rem !important;
        font-size: 0.75rem;
    }
    .permissions-table th {
        font-size: 0.7rem;
        padding: 0.4rem 0.3rem !important;
    }
    .permissions-table th svg {
        width: 0.875rem;
        height: 0.875rem;
    }
    .permissions-table th span {
        font-size: 0.65rem;
    }
    .permissions-table td:first-child {
        min-width: 120px;
        max-width: 150px;
    }
}

/* Utility: yatay kaydırmalı sekme nav */
.scrollbar-hide {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

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

/* === Page: avans-talep (web/avans-talep.php) === */
.page-avans-talep .avans-accent-bar {
    width: 0.25rem;
    height: 1rem;
    border-radius: 9999px;
    background: var(--color-brand-primary);
    flex-shrink: 0;
}

.page-avans-talep .avans-accent-bar--sm {
    height: 0.75rem;
}

.page-avans-talep .timeline-item {
    position: relative;
}

.page-avans-talep .timeline-item::before {
    content: '';
    position: absolute;
    left: 0.875rem;
    top: 2rem;
    bottom: -0.5rem;
    width: 2px;
    background: linear-gradient(to bottom, rgb(226 232 240), transparent);
}

.page-avans-talep .timeline-item:last-child::before {
    display: none;
}

.page-avans-talep .avans-step-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 9999px;
    font-size: var(--font-size-caption);
    font-weight: 600;
}

.page-avans-talep .avans-step-badge--pending {
    background: var(--color-brand-muted-bg);
    color: var(--color-brand-primary-hover);
}

.page-avans-talep .avans-step-badge--approved {
    background: rgba(0, 177, 169, 0.15);
    color: var(--color-brand-primary-hover);
}

.page-avans-talep .avans-step-badge--rejected {
    background: rgb(254 226 226);
    color: rgb(185 28 28);
}

.page-avans-talep .avans-tl-ring {
    position: absolute;
    left: 0;
    top: 0;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 9999px;
    border: 4px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.06);
}

.page-avans-talep .avans-tl-ring--pending {
    background: var(--color-brand-muted-bg);
}

.page-avans-talep .avans-tl-ring--approved {
    background: rgba(0, 177, 169, 0.12);
}

.page-avans-talep .avans-tl-ring--rejected {
    background: rgb(254 226 226);
}

.page-avans-talep .avans-tl-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
}

.page-avans-talep .avans-tl-dot--pending {
    background: var(--color-brand-primary);
}

.page-avans-talep .avans-tl-dot--approved {
    background: rgb(22 163 74);
}

.page-avans-talep .avans-tl-dot--rejected {
    background: rgb(225 29 72);
}

.page-avans-talep .avans-tl-card {
    padding: 1rem;
    background: #fff;
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
}

.page-avans-talep .avans-tl-card--neutral {
    border: 1px solid rgb(226 232 240);
}

.page-avans-talep .avans-tl-card--current {
    border: 2px solid rgba(0, 177, 169, 0.35);
}

.page-avans-talep .avans-tl-card--approved {
    border: 2px solid rgba(22, 163, 74, 0.28);
}

.page-avans-talep .avans-tl-card--rejected {
    border: 2px solid rgba(244, 63, 94, 0.35);
}

.page-avans-talep .avans-summary-panel {
    padding: 1rem;
    border-radius: 0.75rem;
    border: 1px solid rgb(241 245 249);
    background: rgb(248 250 252);
}

.page-avans-talep .avans-summary-panel--brand {
    background: var(--color-brand-muted-bg);
    border-color: rgba(0, 177, 169, 0.2);
}

.page-avans-talep .avans-summary-panel__title {
    font-size: var(--font-size-overline);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.25rem;
    color: var(--color-text-body);
    opacity: 0.85;
}

.page-avans-talep .avans-summary-panel--brand .avans-summary-panel__title {
    color: var(--color-brand-primary-hover);
    opacity: 0.9;
}

.page-avans-talep .avans-summary-panel__body {
    font-size: var(--font-size-caption);
    font-weight: 600;
    line-height: 1.5;
    color: var(--color-text-heading);
}

.page-avans-talep .avans-summary-panel--brand .avans-summary-panel__body {
    color: var(--color-brand-primary-hover);
}

.page-avans-talep .avans-schedule-card {
    border-radius: 0.75rem;
    border: 1px solid rgba(0, 177, 169, 0.18);
    background: #fff;
    padding: 0.75rem;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
}

.page-avans-talep .avans-schedule-chip {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    padding: 0.25rem 0.625rem;
    font-size: var(--font-size-overline);
    font-weight: 700;
    background: var(--color-brand-muted-bg);
    color: var(--color-brand-primary-hover);
}

.page-avans-talep .avans-schedule-amount {
    font-size: var(--font-size-body);
    font-weight: 700;
    color: var(--color-brand-primary-hover);
}

.page-avans-talep .avans-schedule-table-wrap {
    overflow: hidden;
    border-radius: 0.75rem;
    border: 1px solid rgba(0, 177, 169, 0.18);
    background: #fff;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
}

.page-avans-talep .avans-schedule-thead {
    background: rgba(0, 177, 169, 0.12);
    color: var(--color-brand-primary-hover);
}

.page-avans-talep .avans-schedule-thead th {
    padding: 0.75rem 1rem;
    text-align: left;
    font-size: var(--font-size-overline);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.page-avans-talep .avans-schedule-tfoot {
    background: var(--color-brand-muted-bg);
    color: var(--color-brand-primary-hover);
    border-top: 1px solid rgba(0, 177, 169, 0.15);
}

.page-avans-talep .avans-schedule-tfoot td {
    padding: 0.75rem 1rem;
    font-weight: 700;
    font-size: var(--font-size-caption);
}

.page-avans-talep .avans-schedule-row {
    border-bottom: 1px solid rgba(0, 177, 169, 0.12);
}

.page-avans-talep .avans-schedule-row:last-child {
    border-bottom: 0;
}

.page-avans-talep .avans-schedule-row td {
    padding: 0.75rem 1rem;
    font-size: var(--font-size-caption);
}

.page-avans-talep .avans-schedule-total-mob {
    border-radius: 0.75rem;
    border: 1px solid rgba(0, 177, 169, 0.18);
    background: #fff;
    padding: 0.5rem 0.75rem;
    text-align: right;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
}

.page-avans-talep .avans-schedule-total-mob__label {
    font-size: var(--font-size-overline);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-brand-primary);
}

.page-avans-talep .avans-schedule-total-mob__value {
    margin-top: 0.25rem;
    font-size: var(--font-size-body);
    font-weight: 700;
    color: var(--color-brand-primary-hover);
}

.page-avans-talep .avans-history-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    font-size: var(--font-size-overline);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: 1px solid transparent;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
}

.page-avans-talep .avans-history-badge--beklemede {
    background: rgb(254 249 195);
    color: rgb(161 98 7);
    border-color: rgb(253 224 71);
}

.page-avans-talep .avans-history-badge--onaylandi {
    background: rgba(0, 177, 169, 0.12);
    color: var(--color-brand-primary-hover);
    border-color: rgba(0, 177, 169, 0.22);
}

.page-avans-talep .avans-history-badge--reddedildi {
    background: rgb(254 226 226);
    color: rgb(185 28 28);
    border-color: rgb(254 202 202);
}

.page-avans-talep .avans-history-badge--iptal {
    background: rgb(248 250 252);
    color: var(--color-text-body);
    border-color: rgb(226 232 240);
}

.page-avans-talep .avans-btn-table-detail {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 0.5rem;
    font-size: var(--font-size-overline);
    font-weight: 700;
    transition: background-color 0.15s ease, color 0.15s ease;
    background: var(--color-brand-muted-bg);
    color: var(--color-brand-primary-hover);
    border: 0;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
    cursor: pointer;
}

.page-avans-talep .avans-btn-table-detail:hover {
    background: rgba(0, 177, 169, 0.2);
}

.page-avans-talep .avans-btn-table-recall {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 0.5rem;
    font-size: var(--font-size-overline);
    font-weight: 700;
    transition: background-color 0.15s ease;
    background: rgb(255 241 242);
    color: rgb(225 29 72);
    border: 1px solid rgb(254 205 211);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
    cursor: pointer;
}

.page-avans-talep .avans-btn-table-recall:hover {
    background: rgb(254 226 226);
}

.page-avans-talep .avans-btn-doc-view {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 0.5rem;
    font-size: var(--font-size-overline);
    font-weight: 700;
    background: var(--color-brand-muted-bg);
    color: var(--color-brand-primary-hover);
    border: 0;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.page-avans-talep .avans-btn-doc-view:hover {
    background: rgba(0, 177, 169, 0.2);
}

.page-avans-talep .avans-limit-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    font-size: var(--font-size-overline);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.page-avans-talep .avans-limit-pill--ok {
    background: rgba(0, 177, 169, 0.12);
    color: var(--color-brand-primary-hover);
}

.page-avans-talep .avans-limit-pill--warn {
    background: rgb(254 249 195);
    color: rgb(161 98 7);
}

.page-avans-talep .avans-limit-pill--danger {
    background: rgb(254 226 226);
    color: rgb(185 28 28);
}

.page-avans-talep .avans-amount-highlight {
    font-size: var(--font-size-body);
    font-weight: 700;
    color: var(--color-brand-primary-hover);
}

.page-avans-talep .avans-confirm-warning {
    background: rgb(255 241 242);
    border: 1px solid rgb(254 202 202);
    border-radius: 0.5rem;
    padding: 1rem;
}

.page-avans-talep .avans-confirm-warning__title {
    font-size: var(--font-size-body);
    font-weight: 600;
    color: rgb(153 27 27);
}

.page-avans-talep .avans-confirm-warning__text {
    margin-top: 0.25rem;
    font-size: var(--font-size-body);
    color: rgb(185 28 28);
}

.page-avans-talep .avans-confirm-warning__icon {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
    margin-top: 0.125rem;
    color: rgb(225 29 72);
}

.page-avans-talep .avans-btn-danger-primary {
    flex: 1;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: var(--font-size-body);
    color: #fff;
    background: rgb(225 29 72);
    border: 0;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.08);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.page-avans-talep .avans-btn-danger-primary:hover:not(:disabled) {
    background: rgb(190 18 60);
}

.page-avans-talep .avans-btn-danger-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.page-avans-talep .avans-form-status {
    font-size: var(--font-size-body);
    font-weight: 500;
    color: var(--color-text-body);
}

.page-avans-talep .avans-form-status--muted {
    color: var(--color-text-body);
    opacity: 0.9;
}

.page-avans-talep .avans-form-status--error {
    color: rgb(225 29 72);
}

.page-avans-talep .avans-form-status--success {
    color: var(--color-brand-primary-hover);
}

.page-avans-talep .avans-doc-remove-btn {
    flex-shrink: 0;
    padding: 0.375rem;
    border-radius: 0.5rem;
    color: var(--color-text-body);
    opacity: 0.55;
    border: 0;
    background: transparent;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.page-avans-talep .avans-doc-remove-btn:hover {
    color: rgb(225 29 72);
    background: rgb(255 241 242);
}

.page-avans-talep input[type='file'].avans-file-input {
    font-size: var(--font-size-body);
    color: var(--color-text-body);
}

.page-avans-talep input[type='file'].avans-file-input::file-selector-button {
    margin-right: 0.75rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    border: 0;
    font-size: var(--font-size-body);
    font-weight: 600;
    background: var(--color-brand-muted-bg);
    color: var(--color-brand-primary-hover);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.page-avans-talep input[type='file'].avans-file-input::file-selector-button:hover {
    background: rgba(0, 177, 169, 0.2);
}

.page-avans-talep .avans-warn-banner {
    font-size: var(--font-size-body);
    color: rgb(180 83 9);
}

/* === Page: avans-onay (web/avans-onay.php) === */
.page-avans-onay #detailDrawer.drawer {
    z-index: 100;
}

.page-avans-onay .status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.page-avans-onay .timeline-item::before {
    content: '';
    position: absolute;
    left: 0.875rem;
    top: 2rem;
    bottom: -0.5rem;
    width: 2px;
    background: linear-gradient(to bottom, #e2e8f0, transparent);
}

.page-avans-onay .timeline-item:last-child::before {
    display: none;
}

.page-avans-onay nav.avans-onay-tabs .avans-onay-tab {
    border-bottom: 2px solid transparent;
    color: var(--color-text-body);
    background: transparent;
}

.page-avans-onay nav.avans-onay-tabs .avans-onay-tab:hover:not(.active) {
    color: var(--color-text-heading);
    border-bottom-color: rgb(203 213 225);
}

.page-avans-onay nav.avans-onay-tabs .avans-onay-tab.active {
    color: var(--color-brand-primary);
    border-bottom-color: var(--color-brand-primary);
    background: #fff;
}

.page-avans-onay .avans-onay-accent-bar {
    width: 0.25rem;
    height: 1rem;
    border-radius: 9999px;
    background: var(--color-brand-primary);
    flex-shrink: 0;
}

.page-avans-onay .avans-onay-amount {
    color: var(--color-brand-primary);
}

.page-avans-onay .avans-onay-avatar {
    background: color-mix(in srgb, var(--color-brand-primary) 14%, transparent);
    color: var(--color-brand-primary);
}

.page-avans-onay .avans-onay-icon-btn {
    color: var(--color-brand-primary);
}

.page-avans-onay .avans-onay-icon-btn:hover {
    background: color-mix(in srgb, var(--color-brand-primary) 10%, transparent);
}

.page-avans-onay .avans-onay-badge-pending {
    background: color-mix(in srgb, var(--color-brand-primary) 14%, transparent);
    color: var(--color-brand-primary);
}

.page-avans-onay .avans-onay-empty-icon {
    background: color-mix(in srgb, var(--color-brand-primary) 8%, #f8fafc);
    color: var(--color-text-body);
}

.page-avans-onay .avans-tl-border-current {
    border-color: color-mix(in srgb, var(--color-brand-primary) 42%, rgb(226 232 240)) !important;
}

.page-avans-onay .avans-tl-ring-pending {
    background: color-mix(in srgb, var(--color-brand-primary) 12%, white);
}

.page-avans-onay .avans-tl-dot-pending {
    background: var(--color-brand-primary);
}

.page-avans-onay .avans-history-icon-submitted {
    background: color-mix(in srgb, var(--color-brand-primary) 10%, white);
    color: var(--color-brand-primary);
}

.page-avans-onay .avans-muhasebe-badge-revize {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 600;
    background: color-mix(in srgb, var(--color-brand-primary) 10%, white);
    color: var(--color-brand-primary);
    border: 1px solid color-mix(in srgb, var(--color-brand-primary) 22%, white);
}

.page-avans-onay .avans-onay-btn-spinner {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 9999px;
    animation: ev-loading-spin 0.75s linear infinite;
    vertical-align: middle;
}

@media (max-width: 640px) {
    .page-avans-onay .avans-onay-table {
        min-width: 720px;
    }

    .page-avans-onay .avans-onay-table th,
    .page-avans-onay .avans-onay-table td {
        padding: 0.5rem 0.375rem;
        font-size: 0.75rem;
    }

    .page-avans-onay #detailDrawer .drawer-panel {
        width: 100%;
        max-width: 100%;
    }

    .page-avans-onay #detailActions {
        flex-direction: column;
    }

    .page-avans-onay #detailActions button {
        width: 100%;
    }
}

/* === Page: masraf-onay (web/masraf-onay.php) === */
.page-masraf-onay #detailDrawer.drawer {
    z-index: 100;
}

.page-masraf-onay .status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.page-masraf-onay .timeline-item::before {
    content: '';
    position: absolute;
    left: 0.875rem;
    top: 2rem;
    bottom: -0.5rem;
    width: 2px;
    background: linear-gradient(to bottom, #e2e8f0, transparent);
}

.page-masraf-onay .timeline-item:last-child::before {
    display: none;
}

.page-masraf-onay nav.masraf-onay-tabs .masraf-onay-tab {
    border-bottom: 2px solid transparent;
    color: var(--color-text-body);
    background: transparent;
}

.page-masraf-onay nav.masraf-onay-tabs .masraf-onay-tab:hover:not(.active) {
    color: var(--color-text-heading);
    border-bottom-color: rgb(203 213 225);
}

.page-masraf-onay nav.masraf-onay-tabs .masraf-onay-tab.active {
    color: var(--color-brand-primary);
    border-bottom-color: var(--color-brand-primary);
    background: #fff;
}

.page-masraf-onay .masraf-onay-accent-bar {
    width: 0.25rem;
    height: 1rem;
    border-radius: 9999px;
    background: var(--color-brand-primary);
    flex-shrink: 0;
}

.page-masraf-onay .masraf-onay-amount {
    color: var(--color-brand-primary);
}

.page-masraf-onay .masraf-onay-avatar {
    background: color-mix(in srgb, var(--color-brand-primary) 14%, transparent);
    color: var(--color-brand-primary);
}

.page-masraf-onay .masraf-onay-icon-btn {
    color: var(--color-brand-primary);
}

.page-masraf-onay .masraf-onay-icon-btn:hover {
    background: color-mix(in srgb, var(--color-brand-primary) 10%, transparent);
}

.page-masraf-onay .masraf-onay-doc-link {
    color: var(--color-brand-primary);
}

.page-masraf-onay .masraf-onay-doc-link:hover {
    background: color-mix(in srgb, var(--color-brand-primary) 10%, transparent);
}

.page-masraf-onay .masraf-onay-badge-pending {
    background: color-mix(in srgb, var(--color-brand-primary) 14%, transparent);
    color: var(--color-brand-primary);
}

.page-masraf-onay .masraf-tl-border-current {
    border-color: color-mix(in srgb, var(--color-brand-primary) 42%, rgb(226 232 240)) !important;
}

.page-masraf-onay .masraf-tl-ring-pending {
    background: color-mix(in srgb, var(--color-brand-primary) 12%, white);
}

.page-masraf-onay .masraf-tl-dot-pending {
    background: var(--color-brand-primary);
}

.page-masraf-onay .masraf-history-icon-submitted {
    background: color-mix(in srgb, var(--color-brand-primary) 10%, white);
    color: var(--color-brand-primary);
}

.page-masraf-onay .masraf-muhasebe-badge-revize {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 600;
    background: color-mix(in srgb, var(--color-brand-primary) 10%, white);
    color: var(--color-brand-primary);
    border: 1px solid color-mix(in srgb, var(--color-brand-primary) 22%, white);
}

.page-masraf-onay .masraf-onay-btn-spinner {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 9999px;
    animation: ev-loading-spin 0.75s linear infinite;
    vertical-align: middle;
}

.page-masraf-onay .masraf-onay-empty-icon {
    background: color-mix(in srgb, var(--color-brand-primary) 8%, #f8fafc);
    color: var(--color-text-body);
}

@media (max-width: 640px) {
    .page-masraf-onay .masraf-onay-table {
        min-width: 720px;
    }

    .page-masraf-onay .masraf-onay-table th,
    .page-masraf-onay .masraf-onay-table td {
        padding: 0.5rem 0.375rem;
        font-size: 0.75rem;
    }

    .page-masraf-onay #detailDrawer .drawer-panel {
        width: 100%;
        max-width: 100%;
    }

    .page-masraf-onay #detailActions {
        flex-direction: column;
    }

    .page-masraf-onay #detailActions button {
        width: 100%;
    }
}

/* === Page: calisanin-sesi-talepleri (web/module-employee-voice-onay.php) === */
.page-calisanin-sesi-talepleri #evDetailDrawer.detail-drawer {
    z-index: 100;
}

.page-calisanin-sesi-talepleri #evPermissionDrawer.drawer-open #evPermissionDrawerPanel {
    transform: translateX(0);
}

.page-calisanin-sesi-talepleri #evPermissionDrawer:not(.drawer-open) #evPermissionDrawerPanel {
    transform: translateX(100%);
}

@media (max-width: 768px) {
    .page-calisanin-sesi-talepleri #evPermissionDrawerPanel {
        max-width: 100%;
    }
}

.page-calisanin-sesi-talepleri .ev-permission-drawer-scroll-area {
    padding-bottom: 6.25rem;
}

.page-calisanin-sesi-talepleri .ev-onay-tablist .ev-tab-btn {
    background: #fff;
    color: var(--color-text-body);
}

.page-calisanin-sesi-talepleri .ev-onay-tablist .ev-tab-btn:hover:not(.active) {
    background: color-mix(in srgb, var(--color-brand-primary) 10%, white);
    color: var(--color-brand-primary);
}

.page-calisanin-sesi-talepleri .ev-onay-tablist .ev-tab-btn.active {
    background: var(--color-brand-primary);
    color: #fff;
}

.page-calisanin-sesi-talepleri .ev-onay-doc-inline-label:hover {
    color: var(--color-brand-primary);
    background: color-mix(in srgb, var(--color-brand-primary) 8%, transparent);
}

.page-calisanin-sesi-talepleri .ev-onay-doc-inline-label:focus-within {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-brand-focus-ring);
    border-radius: 0.5rem;
}

.page-calisanin-sesi-talepleri .ev-onay-doc-row:hover {
    border-color: color-mix(in srgb, var(--color-brand-primary) 28%, rgb(226 232 240));
    background: color-mix(in srgb, var(--color-brand-primary) 5%, #fff);
}

.page-calisanin-sesi-talepleri .ev-onay-doc-view-btn {
    color: var(--color-brand-primary);
}

.page-calisanin-sesi-talepleri .ev-onay-doc-view-btn:hover {
    background: color-mix(in srgb, var(--color-brand-primary) 12%, transparent);
    color: var(--color-brand-primary-hover);
}

.page-calisanin-sesi-talepleri .ev-onay-comment-avatar {
    background: color-mix(in srgb, var(--color-brand-primary) 14%, transparent);
    color: var(--color-brand-primary);
}

.page-calisanin-sesi-talepleri .ev-onay-comment-avatar-wrap {
    background: color-mix(in srgb, var(--color-brand-primary) 10%, transparent);
}

.page-calisanin-sesi-talepleri .ev-comment-compose:focus-within {
    border-color: var(--color-brand-primary);
}

.page-calisanin-sesi-talepleri .ev-perm-col-view {
    background: color-mix(in srgb, var(--color-brand-primary) 8%, #fff);
}

.page-calisanin-sesi-talepleri .ev-perm-col-manage {
    background: rgb(220 252 231);
}

.page-calisanin-sesi-talepleri .ev-perm-col-delete {
    background: rgb(254 226 226);
}

.page-calisanin-sesi-talepleri .ev-perm-checkbox--view {
    accent-color: var(--color-brand-primary);
}

.page-calisanin-sesi-talepleri .ev-perm-checkbox--manage {
    accent-color: rgb(22 163 74);
}

.page-calisanin-sesi-talepleri .ev-perm-checkbox--delete {
    accent-color: rgb(220 38 38);
}

/* === Page: avans-onay-sureci-eslestirme (web/avans_onay_sureci_eslestirme.php) === */
.page-avans-onay-sureci-eslestirme .avans-eslestirme-step-badge,
.page-avans-onay-sureci-eslestirme .avans-eslestirme-card-step-badge {
    background: color-mix(in srgb, var(--color-brand-primary) 12%, #f8fafc);
    color: var(--color-brand-primary);
}

.page-avans-onay-sureci-eslestirme .avans-eslestirme-matching-icon-wrap {
    background: rgb(248 250 252);
    color: rgb(148 163 184);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.page-avans-onay-sureci-eslestirme .matching-item:hover .avans-eslestirme-matching-icon-wrap {
    background: color-mix(in srgb, var(--color-brand-primary) 10%, white);
    color: var(--color-brand-primary);
}

.page-avans-onay-sureci-eslestirme .avans-eslestirme-edit-btn:hover {
    color: var(--color-brand-primary);
    border-color: color-mix(in srgb, var(--color-brand-primary) 35%, rgb(226 232 240));
}

/* === Page: masraf-onay-sureci-eslestirme (web/masraf_onay_sureci_eslestirme.php) === */
.page-masraf-onay-sureci-eslestirme .masraf-eslestirme-step-badge,
.page-masraf-onay-sureci-eslestirme .masraf-eslestirme-card-step-badge {
    background: color-mix(in srgb, var(--color-brand-primary) 12%, #f8fafc);
    color: var(--color-brand-primary);
}

.page-masraf-onay-sureci-eslestirme .masraf-eslestirme-matching-icon-wrap {
    background: rgb(248 250 252);
    color: rgb(148 163 184);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.page-masraf-onay-sureci-eslestirme .matching-item:hover .masraf-eslestirme-matching-icon-wrap {
    background: color-mix(in srgb, var(--color-brand-primary) 10%, white);
    color: var(--color-brand-primary);
}

.page-masraf-onay-sureci-eslestirme .masraf-eslestirme-edit-btn:hover {
    color: var(--color-brand-primary);
    border-color: color-mix(in srgb, var(--color-brand-primary) 35%, rgb(226 232 240));
}

@media (max-width: 768px) {
    .page-masraf-onay-sureci-eslestirme #ozelDrawer > div:last-child {
        max-width: 100% !important;
    }
}

/* === Page: module-masraf-belge-tipleri (web/module-masraf-belge-tipleri.php) === */
.page-module-masraf-belge-tipleri .module-masraf-doc-type-usage-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.page-module-masraf-belge-tipleri .module-masraf-doc-type-usage-pill--has {
    background: color-mix(in srgb, #10b981 18%, white);
    color: #047857;
}

.page-module-masraf-belge-tipleri .module-masraf-doc-type-usage-pill--empty {
    background: rgb(241 245 249);
    color: rgb(100 116 139);
}

@media (max-width: 768px) {
    .page-module-masraf-belge-tipleri #docTypeDrawerPanel,
    .page-module-masraf-belge-tipleri #docTypeEditConfirmPanel,
    .page-module-masraf-belge-tipleri #docTypeDeletePanel {
        max-width: 100% !important;
    }
}

/* === Page: module-masraf-kategorileri (web/module-masraf-kategorileri.php) === */
.page-module-masraf-kategorileri .module-masraf-category-usage-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    border-width: 1px;
    padding: 0.125rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 500;
}

.page-module-masraf-kategorileri .module-masraf-category-usage-badge--high {
    background: color-mix(in srgb, #10b981 12%, white);
    border-color: color-mix(in srgb, #10b981 30%, white);
    color: #047857;
}

.page-module-masraf-kategorileri .module-masraf-category-usage-badge--mid {
    background: color-mix(in srgb, var(--color-brand-primary) 10%, white);
    border-color: color-mix(in srgb, var(--color-brand-primary) 28%, white);
    color: var(--color-brand-primary);
}

.page-module-masraf-kategorileri .module-masraf-category-usage-badge--low {
    background: color-mix(in srgb, #f59e0b 12%, white);
    border-color: color-mix(in srgb, #f59e0b 30%, white);
    color: #b45309;
}

@media (max-width: 768px) {
    .page-module-masraf-kategorileri #categoryDrawerPanel,
    .page-module-masraf-kategorileri #categoryEditConfirmPanel,
    .page-module-masraf-kategorileri #categoryDeletePanel {
        max-width: 100% !important;
    }
}

/* === Page: module-asset-brands (web/module-asset-brands.php) === */
.page-module-asset-brands .asset-brands-row-icon {
    background: color-mix(in srgb, var(--color-brand-primary) 10%, white);
    color: var(--color-brand-primary);
}

@media (max-width: 768px) {
    .page-module-asset-brands #brandDrawer .drawer-panel,
    .page-module-asset-brands #modelDrawer .drawer-panel,
    .page-module-asset-brands #deleteConfirmDrawer .drawer-panel {
        max-width: 100% !important;
    }
}

/* === Page: module-asset-groups (web/module-asset-groups.php) === */
.page-module-asset-groups .asset-groups-row-icon {
    background: color-mix(in srgb, var(--color-brand-primary) 10%, white);
    color: var(--color-brand-primary);
}

@media (max-width: 768px) {
    .page-module-asset-groups #groupDrawer .app-drawer-panel,
    .page-module-asset-groups #groupUsersDrawer .app-drawer-panel,
    .page-module-asset-groups #externalCandidatesDrawer .app-drawer-panel,
    .page-module-asset-groups #groupDeleteDrawer .app-drawer-panel {
        max-width: 100% !important;
    }
}

/* === Page: module-asset-stores (web/module-asset-stores.php) === */
.page-module-asset-stores .asset-stores-status-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    padding: 0.125rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 500;
    border: 1px solid transparent;
}

.page-module-asset-stores .asset-stores-status-badge--active {
    background: color-mix(in srgb, #10b981 10%, white);
    color: #065f46;
    border-color: color-mix(in srgb, #10b981 28%, white);
}

.page-module-asset-stores .asset-stores-status-badge--inactive {
    background: rgb(241 245 249);
    color: rgb(71 85 105);
    border-color: rgb(203 213 225);
}

@media (max-width: 768px) {
    .page-module-asset-stores #storeDrawer .drawer-panel,
    .page-module-asset-stores #storeDeleteDrawer .drawer-panel {
        max-width: 100% !important;
    }
}

/* === Page: module-asset-types (web/module-asset-types.php) === */
.page-module-asset-types .asset-types-row-icon {
    background: color-mix(in srgb, var(--color-brand-primary) 10%, white);
    color: var(--color-brand-primary);
}

@media (max-width: 768px) {
    .page-module-asset-types #typeDrawer .drawer-panel,
    .page-module-asset-types #categoryDrawer .drawer-panel,
    .page-module-asset-types #featureDrawer .drawer-panel,
    .page-module-asset-types #optionDrawer .drawer-panel,
    .page-module-asset-types #typesDeleteDrawer .drawer-panel {
        max-width: 100% !important;
    }
}

/* === Page: module-bordro-source-management (web/module-bordro-source-management.php) === */
.page-module-bordro-source-management .module-bordro-source-status-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 500;
}

.page-module-bordro-source-management .module-bordro-source-status-badge--active {
    background: color-mix(in srgb, #10b981 12%, white);
    color: #047857;
}

.page-module-bordro-source-management .module-bordro-source-status-badge--inactive {
    background: rgb(241 245 249);
    color: rgb(71 85 105);
}

@media (max-width: 768px) {
    .page-module-bordro-source-management #sourceTypeDrawerPanel,
    .page-module-bordro-source-management #sourceTypeDeletePanel {
        max-width: 100% !important;
    }
}

/* === Page: module-employee-voice-type-yonetimi (web/module-employee-voice-type-yonetimi.php) === */
@media (max-width: 768px) {
    .page-module-employee-voice-type-yonetimi #typeDrawerPanel,
    .page-module-employee-voice-type-yonetimi #typeDeletePanel {
        max-width: 100% !important;
    }
}

/* === Page: module-avans-limitleri (web/module-avans-limitleri.php) === */
.page-module-avans-limitleri .peer:checked + .avans-limit-switch-track {
    background: var(--color-brand-primary);
}

.page-module-avans-limitleri .peer:focus-visible + .avans-limit-switch-track {
    box-shadow: 0 0 0 2px var(--color-brand-focus-ring);
}

.page-module-avans-limitleri .avans-limit-edit-btn {
    background: color-mix(in srgb, var(--color-brand-primary) 12%, white);
    color: var(--color-brand-primary);
}

.page-module-avans-limitleri .avans-limit-edit-btn:hover {
    background: color-mix(in srgb, var(--color-brand-primary) 22%, white);
    color: var(--color-brand-primary-hover);
}

/* === Page: module-avans-tipleri (web/module-avans-tipleri.php) === */
.page-module-avans-tipleri .avans-type-edit-btn {
    background: color-mix(in srgb, var(--color-brand-primary) 12%, white);
    color: var(--color-brand-primary);
}

.page-module-avans-tipleri .avans-type-edit-btn:hover {
    background: color-mix(in srgb, var(--color-brand-primary) 22%, white);
    color: var(--color-brand-primary-hover);
}

/* === Page: module-survey-management (web/module-survey-management.php) === */
.page-module-survey-management #questionModal:not(.hidden),
.page-module-survey-management #optionsModal:not(.hidden) {
    display: flex;
}

.page-module-survey-management td .ev-loading-spinner {
    width: 1.125rem;
    height: 1.125rem;
    margin: 0;
    border-width: 2px;
}

.page-module-survey-management .form-input:focus {
    outline: none;
    border-color: var(--color-brand-primary);
    box-shadow: 0 0 0 2px var(--color-brand-focus-ring);
}

.page-module-survey-management .permissions-table-container {
    border-radius: 0.75rem;
    border: 1px solid rgb(226 232 240);
}

.page-module-survey-management .permissions-table th,
.page-module-survey-management .permissions-table td {
    vertical-align: middle;
}

.page-module-survey-management .question-text-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.page-module-survey-management .option-move {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.page-module-survey-management .option-move button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.125rem;
    border-radius: 0.25rem;
    color: rgb(100 116 139);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.page-module-survey-management .option-move button:hover:not(:disabled) {
    background: rgb(241 245 249);
    color: rgb(51 65 85);
}

.page-module-survey-management .option-move button:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* Survey drawer tabs */
.page-module-survey-management .survey-mgmt-tablist .survey-tab-button {
    background: #fff;
    color: var(--color-text-body);
}

.page-module-survey-management .survey-mgmt-tablist .survey-tab-button:hover:not(.active) {
    background: color-mix(in srgb, var(--color-brand-primary) 10%, white);
    color: var(--color-brand-primary);
}

.page-module-survey-management .survey-mgmt-tablist .survey-tab-button.active {
    background: var(--color-brand-primary);
    color: #fff;
}

/* Pickers (rating icon, likert scale, display mode) */
.page-module-survey-management .survey-mgmt-picker-active {
    border-color: var(--color-brand-primary) !important;
    box-shadow: 0 0 0 2px var(--color-brand-focus-ring);
    background: color-mix(in srgb, var(--color-brand-primary) 8%, #fff) !important;
}

.page-module-survey-management .survey-mgmt-option-card:hover:not(.survey-mgmt-picker-active) {
    border-color: color-mix(in srgb, var(--color-brand-primary) 28%, rgb(226 232 240));
    background: color-mix(in srgb, var(--color-brand-primary) 5%, #fff);
}

/* iOS-style switches */
.page-module-survey-management .peer:focus-visible + .survey-mgmt-switch-track {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-brand-focus-ring);
}

.page-module-survey-management .peer:checked + .survey-mgmt-switch-track {
    background: var(--color-brand-primary);
}

.page-module-survey-management #modal_question_required:checked + .survey-mgmt-switch-track--md .survey-mgmt-switch-knob {
    transform: translateX(1.25rem);
}

.page-module-survey-management .inline-question-required:checked + .survey-mgmt-switch-track--sm .survey-mgmt-switch-knob {
    transform: translateX(1rem);
}

.page-module-survey-management .survey-mgmt-text-link {
    color: var(--color-brand-primary);
}

.page-module-survey-management .survey-mgmt-text-link:hover {
    color: var(--color-brand-primary-hover);
    text-decoration: underline;
}

.page-module-survey-management .survey-mgmt-icon-btn-edit {
    background: color-mix(in srgb, var(--color-brand-primary) 14%, white);
    color: var(--color-brand-primary);
}

.page-module-survey-management .survey-mgmt-icon-btn-edit:hover {
    background: color-mix(in srgb, var(--color-brand-primary) 22%, white);
    color: var(--color-brand-primary-hover);
}

.page-module-survey-management .survey-mgmt-accent-bar {
    background: var(--color-brand-primary);
}

.page-module-survey-management .survey-mgmt-inline-action {
    color: var(--color-brand-primary);
}

.page-module-survey-management .survey-mgmt-inline-action:hover {
    color: var(--color-brand-primary-hover);
    background: color-mix(in srgb, var(--color-brand-primary) 10%, transparent);
}

.page-module-survey-management .survey-mgmt-question-card:hover {
    border-color: color-mix(in srgb, var(--color-brand-primary) 28%, rgb(226 232 240));
}

.page-module-survey-management .survey-mgmt-option-image-btn:hover {
    color: var(--color-brand-primary);
    background: color-mix(in srgb, var(--color-brand-primary) 10%, transparent);
}

/* === Page: users (web/users.php) === */
.page-users .user-view-mode-btn {
    color: var(--color-text-body);
    background: transparent;
}

.page-users .user-view-mode-btn:hover {
    background: #fff;
    color: var(--color-brand-primary-hover);
}

.page-users .user-view-mode-btn.active {
    background: #fff;
    color: var(--color-brand-primary-hover);
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.1);
}

.page-users .user-employee-card {
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.page-users .user-employee-avatar {
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.page-users .user-employee-card .user-employee-name,
.page-users .user-employee-card .user-employee-title,
.page-users .user-employee-card .users-card-meta-line {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

.page-users .form-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: var(--font-size-body);
    line-height: 1.25rem;
    border: 1px solid rgb(226 232 240);
    border-radius: 0.5rem;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    color: var(--color-text-heading);
    background: #fff;
}

.page-users .form-input:focus {
    border-color: var(--color-brand-primary) !important;
    box-shadow: 0 0 0 2px var(--color-brand-focus-ring) !important;
}

.page-users .users-input-state-error {
    border-color: rgb(239 68 68) !important;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2) !important;
}

.page-users .users-input-state-ok {
    border-color: var(--color-brand-primary) !important;
    box-shadow: 0 0 0 2px var(--color-brand-focus-ring) !important;
}

.page-users .users-email-hint {
    border-radius: 0.5rem;
    padding: 0.5rem;
}

.page-users .users-email-hint--error {
    background: rgb(254 242 242);
    border: 1px solid rgb(254 202 202);
}

.page-users .users-email-hint--ok {
    background: var(--color-brand-muted-bg);
    border: 1px solid rgba(0, 177, 169, 0.25);
}

.page-users .users-email-hint-text--error {
    color: rgb(220 38 38);
    font-size: var(--font-size-body);
}

.page-users .users-email-hint-text--ok {
    color: var(--color-brand-primary-hover);
    font-size: var(--font-size-body);
}

.page-users .users-filter-checkbox,
.page-users .users-filter-checkbox.group-filter-checkbox,
.page-user-details .users-filter-checkbox,
.page-user-details .users-filter-checkbox.group-filter-checkbox {
    accent-color: var(--color-brand-primary);
    border-radius: 0.25rem;
    border-color: rgb(203 213 225);
}

.page-users .users-filter-checkbox:focus,
.page-user-details .users-filter-checkbox:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-brand-focus-ring);
}

.page-users .users-status-badge,
.page-user-details .users-status-badge,
.page-user-details-lite .users-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
    font-size: var(--font-size-caption);
    font-weight: 600;
}

.page-users .users-status-badge--active,
.page-user-details .users-status-badge--active,
.page-user-details-lite .users-status-badge--active {
    background: rgba(0, 177, 169, 0.12);
    color: var(--color-brand-primary-hover);
}

.page-users .users-status-badge--inactive,
.page-user-details .users-status-badge--inactive,
.page-user-details-lite .users-status-badge--inactive {
    background: rgb(255 241 242);
    color: rgb(190 18 60);
}

.page-users .users-leave-badge,
.page-user-details .users-leave-badge,
.page-user-details-lite .users-leave-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
    font-size: var(--font-size-caption);
    font-weight: 600;
    background: var(--color-brand-muted-bg);
    color: var(--color-brand-primary-hover);
    border: 1px solid rgba(0, 177, 169, 0.22);
}

.page-users .users-leave-pill,
.page-user-details .users-leave-pill,
.page-user-details-lite .users-leave-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    font-size: var(--font-size-overline);
    font-weight: 600;
    background: var(--color-brand-primary);
    color: #fff;
    border-radius: 9999px;
    border: 2px solid #fff;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.08);
    white-space: nowrap;
}

.page-users .users-avatar-leave-ring,
.page-user-details .users-avatar-leave-ring,
.page-user-details-lite .users-avatar-leave-ring {
    box-shadow:
        0 0 0 4px rgba(0, 177, 169, 0.35),
        0 4px 12px rgb(0 0 0 / 0.08);
}

.page-users .user-employee-card--clickable.user-employee-card--active:hover {
    border-color: rgba(0, 177, 169, 0.45);
    box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.08);
    transform: translateY(-2px);
}

.page-users .user-employee-card--clickable.user-employee-card--inactive:hover {
    border-color: rgba(244, 63, 94, 0.45);
    box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.08);
    transform: translateY(-2px);
}

.page-users .user-employee-card--active {
    border-color: rgb(226 232 240);
}

.page-users .user-employee-card--inactive {
    border-color: rgba(244, 63, 94, 0.35);
}

.page-users .users-new-user-drawer-body {
    padding-bottom: 6.25rem;
}

.page-users .users-new-user-success {
    background: var(--color-brand-muted-bg);
    border: 1px solid rgba(0, 177, 169, 0.25);
    border-radius: 0.5rem;
    padding: 0.75rem;
}

.page-users .users-new-user-success-text {
    font-size: var(--font-size-body);
    color: var(--color-brand-primary-hover);
}

#newUserDrawer.drawer-open #newUserDrawerPanel {
    transform: translateX(0);
}

#newUserDrawer:not(.drawer-open) #newUserDrawerPanel {
    transform: translateX(100%);
}

.page-users #groupFilterPopover,
.page-users #genderFilterPopover {
    z-index: 110;
}

/* Import (outline) — marka ile uyumlu nötr */
.page-users .users-btn-import {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: var(--font-size-body);
    font-weight: 500;
    border: 1px solid rgb(203 213 225);
    background: #fff;
    color: var(--color-text-heading);
    transition:
        border-color 0.2s ease,
        background-color 0.2s ease;
}

.page-users .users-btn-import:hover {
    border-color: var(--color-brand-primary);
    background: rgb(248 250 252);
}

.page-users .users-inline-error {
    font-size: var(--font-size-body);
    color: rgb(220 38 38);
}

.page-users .users-text-link {
    padding: 0.25rem 0.75rem;
    font-size: var(--font-size-body);
    font-weight: 500;
    color: var(--color-brand-primary-hover);
    background: none;
    border: none;
    cursor: pointer;
    border-radius: 0.25rem;
    transition: color 0.15s ease;
}

.page-users .users-text-link:hover {
    color: var(--color-brand-primary);
    text-decoration: underline;
}

.page-users .users-text-link--danger {
    color: rgb(220 38 38);
}

.page-users .users-text-link--danger:hover {
    color: rgb(185 28 28);
}

.page-users .users-edu-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
    font-size: var(--font-size-caption);
    font-weight: 600;
}

.page-users .users-edu-badge--ok {
    background: rgba(0, 177, 169, 0.12);
    color: var(--color-brand-primary-hover);
}

.page-users .users-edu-badge--bad {
    background: rgb(255 241 242);
    color: rgb(190 18 60);
}

.page-users .users-edu-badge--neutral {
    background: rgb(241 245 249);
    color: rgb(51 65 85);
}

@media (max-width: 640px) {
    #newUserDrawerPanel {
        max-width: 100%;
    }

    #usersTableView {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    #userSearchInput {
        min-width: 0;
    }

    #groupFilterPopover > div,
    #genderFilterPopover > div {
        width: calc(100vw - 2rem);
        max-width: 320px;
    }
}
/* === Page: user-details (web/user-details.php) + user-details-lite (web/user-details-lite.php) === */

@media (max-width: 1023px) {
    .page-user-details nav[role="tablist"],
    .page-user-details-lite nav[role="tablist"] {
        display: flex !important;
        white-space: nowrap;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
    }

    .page-user-details nav[role="tablist"] .tab-button,
    .page-user-details-lite nav[role="tablist"] .tab-button,
    .page-user-details nav[role="tablist"] .edit-drawer-tab-button {
        white-space: nowrap;
        flex-shrink: 0;
        scroll-snap-align: start;
    }
}

/* Sekmeler — marka (sky yerine) */
.page-user-details nav[role="tablist"] .tab-button,
.page-user-details-lite nav[role="tablist"] .tab-button,
.page-user-details nav[role="tablist"] .edit-drawer-tab-button {
    background: #fff;
    color: rgb(51 65 85);
    border-right: 1px solid rgb(226 232 240);
    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

.page-user-details nav[role="tablist"] .tab-button:last-child,
.page-user-details-lite nav[role="tablist"] .tab-button:last-child,
.page-user-details nav[role="tablist"] .edit-drawer-tab-button:last-child {
    border-right: none;
}

.page-user-details nav[role="tablist"] .tab-button:hover,
.page-user-details-lite nav[role="tablist"] .tab-button:hover,
.page-user-details nav[role="tablist"] .edit-drawer-tab-button:hover {
    background: var(--color-brand-primary);
    color: #fff;
}

.page-user-details nav[role="tablist"] .tab-button.active,
.page-user-details-lite nav[role="tablist"] .tab-button.active,
.page-user-details nav[role="tablist"] .edit-drawer-tab-button.active {
    background: var(--color-brand-primary);
    color: #fff;
}

.page-user-details nav[role="tablist"] .tab-button.active:hover,
.page-user-details-lite nav[role="tablist"] .tab-button.active:hover,
.page-user-details nav[role="tablist"] .edit-drawer-tab-button.active:hover {
    background: var(--color-brand-primary-hover);
    color: #fff;
}

.page-user-details .form-input,
.page-user-details-lite .form-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: var(--font-size-body);
    line-height: 1.25rem;
    border: 1px solid rgb(203 213 225);
    border-radius: 0.5rem;
    outline: none;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
    color: var(--color-text-heading);
    background: #fff;
}

.page-user-details .form-input:focus,
.page-user-details-lite .form-input:focus {
    border-color: var(--color-brand-primary) !important;
    box-shadow: 0 0 0 2px var(--color-brand-focus-ring) !important;
}

.page-user-details .udetail-loading-spin,
.page-user-details-lite .udetail-loading-spin {
    border-color: rgb(226 232 240);
    border-bottom-color: var(--color-brand-primary);
}

.page-user-details .udetail-progress-brand {
    background: var(--color-brand-primary);
}

.page-user-details .udetail-callout-brand,
.page-user-details-lite .udetail-callout-brand {
    border-width: 2px;
    border-style: solid;
    border-color: rgba(0, 177, 169, 0.22);
    background: linear-gradient(to right, var(--color-brand-muted-bg), rgb(248 250 252));
}

.page-user-details .udetail-callout-brand-icon-wrap,
.page-user-details-lite .udetail-callout-brand-icon-wrap {
    background: rgba(0, 177, 169, 0.12);
    color: var(--color-brand-primary-hover);
}

.page-user-details .udetail-onboarding-mail-btn {
    box-shadow: 0 0 0 1px rgba(0, 177, 169, 0.22);
}

.page-user-details .udetail-onboarding-mail-btn:focus-visible {
    box-shadow: 0 0 0 2px var(--color-brand-focus-ring);
}

.page-user-details .udetail-group-tree-row,
.page-user-details-lite .udetail-group-tree-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    border: 2px solid rgba(0, 177, 169, 0.18);
    background: var(--color-brand-muted-bg);
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
    cursor: default;
}

.page-user-details .udetail-group-tree-row:hover,
.page-user-details-lite .udetail-group-tree-row:hover {
    border-color: rgba(0, 177, 169, 0.38);
    box-shadow: 0 4px 14px rgb(0 0 0 / 0.06);
}

.page-user-details .udetail-chip-brand,
.page-user-details-lite .udetail-chip-brand {
    margin-left: 0.5rem;
    padding: 0.125rem 0.5rem;
    font-size: var(--font-size-caption);
    font-weight: 600;
    border-radius: 0.25rem;
    background: rgba(0, 177, 169, 0.12);
    color: var(--color-brand-primary-hover);
}

.page-user-details .udetail-badge-pill,
.page-user-details-lite .udetail-badge-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: var(--font-size-caption);
    font-weight: 600;
    background: rgba(0, 177, 169, 0.12);
    color: var(--color-brand-primary-hover);
}

/* === Sağ drawer panel transform (.page-user-details only) === */
.page-user-details #editUserDrawer.drawer-open #editUserDrawerPanel {
    transform: translateX(0);
}

.page-user-details #editUserDrawer:not(.drawer-open) #editUserDrawerPanel {
    transform: translateX(100%);
}

.page-user-details #emergencyContactDrawer.drawer-open #emergencyContactDrawerPanel {
    transform: translateX(0);
}

.page-user-details #emergencyContactDrawer:not(.drawer-open) #emergencyContactDrawerPanel {
    transform: translateX(100%);
}

.page-user-details #deleteEmergencyContactDrawer.drawer-open #deleteEmergencyContactDrawerPanel {
    transform: translateX(0);
}

.page-user-details #deleteEmergencyContactDrawer:not(.drawer-open) #deleteEmergencyContactDrawerPanel {
    transform: translateX(100%);
}

.page-user-details #careerHistoryDrawer.drawer-open #careerHistoryDrawerPanel {
    transform: translateX(0);
}

.page-user-details #careerHistoryDrawer:not(.drawer-open) #careerHistoryDrawerPanel {
    transform: translateX(100%);
}

.page-user-details #educationDrawer.drawer-open #educationDrawerPanel {
    transform: translateX(0);
}

.page-user-details #educationDrawer:not(.drawer-open) #educationDrawerPanel {
    transform: translateX(100%);
}

.page-user-details #salaryDrawer.drawer-open #salaryDrawerPanel {
    transform: translateX(0);
}

.page-user-details #salaryDrawer:not(.drawer-open) #salaryDrawerPanel {
    transform: translateX(100%);
}

.page-user-details #deleteSalaryDrawer.drawer-open #deleteSalaryDrawerPanel {
    transform: translateX(0);
}

.page-user-details #deleteSalaryDrawer:not(.drawer-open) #deleteSalaryDrawerPanel {
    transform: translateX(100%);
}

.page-user-details #deleteEducationDrawer.drawer-open #deleteEducationDrawerPanel {
    transform: translateX(0);
}

.page-user-details #deleteEducationDrawer:not(.drawer-open) #deleteEducationDrawerPanel {
    transform: translateX(100%);
}

.page-user-details #deleteCareerHistoryDrawer.drawer-open #deleteCareerHistoryDrawerPanel {
    transform: translateX(0);
}

.page-user-details #deleteCareerHistoryDrawer:not(.drawer-open) #deleteCareerHistoryDrawerPanel {
    transform: translateX(100%);
}

.page-user-details #fileUploadDrawer.drawer-open #fileUploadDrawerPanel,
.page-user-details #editFileDrawer.drawer-open #editFileDrawerPanel,
.page-user-details #deleteFileDrawer.drawer-open #deleteFileDrawerPanel {
    transform: translateX(0);
}

.page-user-details #fileUploadDrawer:not(.drawer-open) #fileUploadDrawerPanel,
.page-user-details #editFileDrawer:not(.drawer-open) #editFileDrawerPanel,
.page-user-details #deleteFileDrawer:not(.drawer-open) #deleteFileDrawerPanel {
    transform: translateX(100%);
}

.page-user-details #filePreviewModal.drawer-open #filePreviewModalPanel {
    transform: translateX(0);
}

.page-user-details #filePreviewModal:not(.drawer-open) #filePreviewModalPanel {
    transform: translateX(100%);
}

.page-user-details #bankAccountDrawer.drawer-open #bankAccountDrawerPanel {
    transform: translateX(0);
}

.page-user-details #bankAccountDrawer:not(.drawer-open) #bankAccountDrawerPanel {
    transform: translateX(100%);
}

.page-user-details #editDeletePhotoDrawer.drawer-open #editDeletePhotoDrawerPanel {
    transform: translateX(0);
}

.page-user-details #editDeletePhotoDrawer:not(.drawer-open) #editDeletePhotoDrawerPanel {
    transform: translateX(100%);
}

@media (max-width: 640px) {
    .page-user-details #editUserDrawerPanel,
    .page-user-details #emergencyContactDrawerPanel,
    .page-user-details #deleteEmergencyContactDrawerPanel,
    .page-user-details #careerHistoryDrawerPanel,
    .page-user-details #educationDrawerPanel,
    .page-user-details #deleteEducationDrawerPanel,
    .page-user-details #deleteCareerHistoryDrawerPanel,
    .page-user-details #deleteSalaryDrawerPanel,
    .page-user-details #bankAccountDrawerPanel,
    .page-user-details #editDeletePhotoDrawerPanel {
        max-width: 100%;
    }
}
    /* User Organization Chart Styles */
    .org-tree-container {
        font-family: 'Inter', sans-serif;
        padding: 20px;
        display: flex;
        justify-content: center;
        position: relative;
        overflow: hidden;
        width: 100%;
        min-height: 600px;
        background: #f8fafc;
        cursor: grab;
    }
    
    .org-tree-container:active {
        cursor: grabbing;
    }
    
    .org-tree-wrapper {
        transform-origin: center center;
        transition: transform 0.1s ease-out;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(1);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    
    .org-tree-node {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        margin-bottom: 30px;
    }
    
    .org-tree-card {
        background: white;
        border: 2px solid #e2e8f0;
        border-radius: 12px;
        padding: 16px 20px;
        min-width: 240px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        position: relative;
        z-index: 2;
    }
    
    .org-tree-card:hover {
        border-color: var(--color-brand-primary);
        box-shadow: 0 4px 12px rgba(0, 177, 169, 0.15);
        transform: translateY(-2px);
    }
    
    .org-tree-card-expandable {
        cursor: pointer;
    }
    
    .org-tree-card-company {
        background: linear-gradient(135deg, var(--color-brand-primary) 0%, var(--color-brand-primary-hover) 100%);
        border-color: var(--color-brand-primary-hover);
        color: white;
    }
    
    .org-tree-card-company .org-tree-title {
        color: white;
    }
    
    .org-tree-card-company .org-tree-subtitle {
        color: rgba(255, 255, 255, 0.9);
    }
    
    .org-tree-card-company .org-tree-badge {
        background: rgba(255, 255, 255, 0.25);
        color: white;
        backdrop-filter: blur(4px);
    }
    
    .org-tree-card-company .org-tree-toggle {
        color: white;
    }

    .org-tree-card-reporting {
        min-width: 260px;
    }
    .org-tree-card-reporting .org-tree-reporting-avatar {
        flex-shrink: 0;
    }
    .org-tree-card-reporting .org-tree-reporting-name {
        font-weight: 600;
        color: #0f172a;
        font-size: 14px;
    }
    .org-tree-card-reporting .org-tree-reporting-title {
        font-size: 12px;
        color: #475569;
        margin-top: 2px;
    }
    .org-tree-card-reporting .org-tree-reporting-group {
        font-size: 12px;
        color: #64748b;
        margin-top: 2px;
    }

    .org-tree-card-inactive {
        background: #f8fafc;
        border-color: #cbd5e1;
    }
    .org-tree-card-inactive .org-tree-reporting-name,
    .org-tree-card-inactive .org-tree-reporting-title,
    .org-tree-card-inactive .org-tree-reporting-group {
        color: #94a3b8 !important;
    }
    .org-tree-inactive-badge {
        display: inline-flex;
        align-items: center;
        border-radius: 9999px;
        padding: 2px 8px;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.01em;
        background: #e2e8f0;
        color: #475569;
        border: 1px solid #cbd5e1;
    }

    .org-tree-card-content {
        display: flex;
        align-items: center;
        gap: 12px;
        flex: 1;
    }
    
    .org-tree-icon {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
    }
    
    .org-tree-icon-svg {
        transition: transform 0.2s ease;
        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
    }
    
    .org-tree-info {
        flex: 1;
        min-width: 0;
    }
    
    .org-tree-title {
        font-weight: 600;
        font-size: 15px;
        color: #1e293b;
        margin-bottom: 4px;
    }
    
    .org-tree-subtitle {
        font-size: 12px;
        color: #64748b;
    }
    
    .org-tree-badge {
        display: inline-block;
        font-size: 10px;
        padding: 2px 8px;
        background: #f1f5f9;
        border-radius: 12px;
        color: #64748b;
        margin-top: 4px;
    }
    
    .org-tree-toggle {
        font-size: 14px;
        color: #64748b;
        transition: transform 0.3s ease;
        flex-shrink: 0;
        cursor: pointer;
        user-select: none;
    }
    
    .org-tree-branch {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 15px;
        position: relative;
        transition: all 0.3s ease;
        opacity: 1;
        max-height: 10000px;
    }
    
    .org-tree-branch.org-collapsed {
        max-height: 0;
        opacity: 0;
        margin-top: 0;
        margin-bottom: 0;
        overflow: hidden;
    }
    
    .org-tree-connector {
        width: 2px;
        height: 20px;
        background: #cbd5e1;
        margin-bottom: 10px;
        position: relative;
    }
    
    .org-tree-connector::before {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 0;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-top: 8px solid #cbd5e1;
    }
    
    .org-tree-children {
        display: flex;
        gap: 20px;
        position: relative;
        padding-top: 30px;
        padding-left: 50px;
        padding-right: 50px;
    }
    
    .org-tree-children::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50px;
        right: 50px;
        height: 2px;
        background: #cbd5e1;
    }
    
    .org-tree-node-child {
        position: relative;
        flex: 1;
    }
    
    .org-tree-node-child::before {
        content: '';
        position: absolute;
        top: -30px;
        left: 50%;
        transform: translateX(-50%);
        width: 2px;
        height: 30px;
        background: #cbd5e1;
        z-index: 1;
    }
    
    .org-tree-node-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
        margin-top: 12px;
    }

    .org-tree-users {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        width: auto;
        max-width: 320px;
        max-height: 10000px;
        opacity: 1;
        transition: all 0.3s ease;
        overflow: hidden;
    }
    
    .org-tree-users.org-collapsed {
        max-height: 0;
        opacity: 0;
        margin-top: 0;
        margin-bottom: 0;
        overflow: hidden;
    }
    
    .org-tree-user-wrapper {
        position: relative;
        margin-bottom: 16px;
    }
    
    .org-tree-manager-connection {
        position: relative;
        margin-top: 12px;
        margin-left: 20px;
        margin-right: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        z-index: 1;
    }
    
    .org-tree-manager-line-vertical {
        width: 3px;
        height: 24px;
        background: linear-gradient(to bottom, var(--color-brand-primary), var(--color-brand-primary-hover));
        margin-bottom: 6px;
        border-radius: 2px;
        box-shadow: 0 2px 4px rgba(0, 177, 169, 0.3);
    }
    
    .org-tree-manager-connector-bottom {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        padding: 4px 8px;
        background: transparent;
        border: none;
        border-radius: 0;
    }
    
    .org-tree-manager-line-horizontal {
        flex: 1;
        height: 3px;
        background: linear-gradient(to right, var(--color-brand-primary), var(--color-brand-primary-hover));
        border-radius: 2px;
        box-shadow: 0 2px 4px rgba(0, 177, 169, 0.3);
    }
    
    .org-tree-manager-arrow-bottom {
        color: var(--color-brand-primary-hover);
        font-size: 24px;
        font-weight: bold;
        line-height: 1;
        text-shadow: 0 2px 4px rgba(0, 177, 169, 0.4);
        filter: drop-shadow(0 2px 2px rgba(0, 177, 169, 0.3));
    }
    
    .org-tree-user-card {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 14px;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.2s ease;
        margin-left: 20px;
        margin-right: 20px;
        min-width: 180px;
        max-width: 320px;
    }
    
    .org-tree-user-card:hover {
        background: var(--color-brand-muted-bg);
        border-color: var(--color-brand-primary);
        transform: translateX(4px);
    }
    
    .org-tree-user-icon {
        font-size: 18px;
        flex-shrink: 0;
    }
    
    .org-tree-user-info {
        flex: 1;
        min-width: 0;
    }
    
    .org-tree-user-name {
        font-size: 13px;
        font-weight: 500;
        color: #1e293b;
        margin-bottom: 2px;
    }
    
    .org-tree-user-title {
        font-size: 11px;
        color: #64748b;
        font-style: italic;
    }
/* === Page: İzin modülü (izin.php, izin-talep-onay.php, izin-tanimlama.php, calisan-izin-yonetimi.php) === */

/* Ortak: sekme satırı kaydırma */
@media (max-width: 1023px) {
    .page-izin nav[role="tablist"],
    .page-calisan-izin nav[role="tablist"] {
        display: flex !important;
        white-space: nowrap;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
    }

    .page-izin nav[role="tablist"] .tab-button,
    .page-calisan-izin nav[role="tablist"] .tab-button {
        white-space: nowrap;
        flex-shrink: 0;
        scroll-snap-align: start;
    }
}

/* izin.php + calisan: üst sekme çubuğu (user-details ile aynı mantık) */
.page-izin nav[role="tablist"] .tab-button,
.page-calisan-izin nav[role="tablist"] .tab-button {
    background: #fff;
    color: rgb(51 65 85);
    border-right: 1px solid rgb(226 232 240);
    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

.page-izin nav[role="tablist"] .tab-button:last-child,
.page-calisan-izin nav[role="tablist"] .tab-button:last-child {
    border-right: none;
}

.page-izin nav[role="tablist"] .tab-button:hover,
.page-calisan-izin nav[role="tablist"] .tab-button:hover {
    background: var(--color-brand-primary);
    color: #fff;
}

.page-izin nav[role="tablist"] .tab-button.active,
.page-calisan-izin nav[role="tablist"] .tab-button.active {
    background: var(--color-brand-primary);
    color: #fff;
}

.page-izin nav[role="tablist"] .tab-button.active:hover,
.page-calisan-izin nav[role="tablist"] .tab-button.active:hover {
    background: var(--color-brand-primary-hover);
    color: #fff;
}

/* Geçmiş / çalışan: takvim görünümü (Haftalık–Aylık) */
.page-izin .gecmis-calendar-view-btn--active,
.page-calisan-izin .gecmis-calendar-view-btn--active {
    background: var(--color-brand-primary) !important;
    color: #fff !important;
}

.page-izin .gecmis-calendar-view-btn:not(.gecmis-calendar-view-btn--active):hover,
.page-calisan-izin .gecmis-calendar-view-btn:not(.gecmis-calendar-view-btn--active):hover {
    background: rgb(226 232 240);
}

.page-izin .izin-wait-spinner,
.page-calisan-izin .izin-wait-spinner {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(86, 95, 100, 0.3);
    border-top-color: var(--color-brand-primary);
    border-radius: 9999px;
}

.page-izin .izin-cal-legend-swatch,
.page-calisan-izin .izin-cal-legend-swatch {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 0.125rem;
}

.page-izin .izin-cal-legend-swatch--approved,
.page-calisan-izin .izin-cal-legend-swatch--approved {
    background: var(--color-brand-primary);
    border-left: 3px solid var(--color-brand-primary-hover);
}

.page-izin .izin-cal-legend-swatch--pending,
.page-calisan-izin .izin-cal-legend-swatch--pending {
    background: rgba(217 119 6 / 0.15);
    border-left: 3px solid #d97706;
}

.page-izin .izin-cal-legend-swatch--holiday,
.page-calisan-izin .izin-cal-legend-swatch--holiday {
    background: rgba(245 158 11 / 0.15);
    border-left: 3px solid #f59e0b;
}

.page-izin .izin-text-link-brand {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-brand-primary);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.page-izin .izin-text-link-brand:hover {
    color: var(--color-brand-primary-hover);
    text-decoration: underline;
}

/* izin-gecmis.js — talep detay drawer timeline (izin.php) */
.page-izin .izin-tl-badge-success {
    background: #dcfce7;
    color: #15803d;
}

.page-izin .izin-tl-badge-pending-brand {
    background: var(--color-brand-muted-bg);
    color: var(--color-brand-primary-hover);
}

.page-izin .izin-tl-card-success {
    border: 2px solid #bbf7d0;
}

.page-izin .izin-tl-card-pending {
    border: 2px solid var(--color-brand-muted-border);
}

.page-izin .izin-tl-dot-success {
    background: #dcfce7;
    border: 4px solid #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.page-izin .izin-tl-dotinner-success {
    background: #22c55e;
}

.page-izin .izin-tl-dot-pending {
    background: var(--color-brand-muted-bg);
    border: 4px solid #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.page-izin .izin-tl-dotinner-pending {
    background: var(--color-brand-primary);
}

.page-izin .izin-bakiye-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-text-body);
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}

.page-izin .izin-bakiye-metric-positive {
    color: #15803d;
    font-weight: 600;
}

.page-izin .izin-bakiye-metric-negative {
    color: #be123c;
    font-weight: 600;
}

.page-izin .izin-bakiye-status-ok {
    color: #16a34a;
}

/* --- izin.php: drawer (visibility) --- */
.page-izin .drawer {
    visibility: hidden;
    transition: visibility 0.3s ease-in-out;
}

.page-izin .drawer-open {
    visibility: visible;
}

.page-izin .drawer-backdrop {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.page-izin .drawer-open .drawer-backdrop {
    opacity: 1;
}

.page-izin .drawer-panel {
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.page-izin .drawer-open .drawer-panel {
    transform: translateX(0);
}

.page-izin #requestDrawer.drawer-open #requestDrawerPanel {
    transform: translateX(0);
}

.page-izin #requestDrawer:not(.drawer-open) #requestDrawerPanel {
    transform: translateX(100%);
}

.page-izin #talepDetailDrawer.drawer-open {
    visibility: visible;
}

.page-izin #talepDetailDrawer #talepDetailDrawerPanel {
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.page-izin #talepDetailDrawer.drawer-open #talepDetailDrawerPanel {
    transform: translateX(0);
}

.page-izin .form-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid rgb(203 213 225);
    border-radius: 0.5rem;
    font-size: var(--font-size-body);
    line-height: 1.5;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
    color: var(--color-text-heading);
    background: #fff;
}

.page-izin .form-input:focus {
    border-color: var(--color-brand-primary) !important;
    box-shadow: 0 0 0 2px var(--color-brand-focus-ring) !important;
    outline: none;
}

.page-izin .accordion-detail-toggle,
.page-izin-tanimlama .accordion-detail-toggle,
.page-calisan-izin .accordion-detail-toggle {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.375rem;
    border: 1px solid rgb(226 232 240);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    background: rgb(248 250 252);
    color: rgb(100 116 139);
}

.page-izin .accordion-detail-toggle:hover,
.page-izin-tanimlama .accordion-detail-toggle:hover,
.page-calisan-izin .accordion-detail-toggle:hover {
    border-color: rgb(148 163 184);
    background: rgb(241 245 249);
    color: rgb(71 85 105);
}

.page-izin .accordion-detail-toggle.accordion-open,
.page-izin-tanimlama .accordion-detail-toggle.accordion-open,
.page-calisan-izin .accordion-detail-toggle.accordion-open {
    border-color: rgb(148 163 184);
    background: rgb(226 232 240);
    color: rgb(51 65 85);
}

.page-izin .izin-gecmis-icon-plus.hidden,
.page-izin .izin-gecmis-icon-minus.hidden,
.page-izin-tanimlama .izin-tanimlama-icon-plus.hidden,
.page-izin-tanimlama .izin-tanimlama-icon-minus.hidden {
    display: none !important;
}

.page-izin .izin-gecmis-compact-col {
    width: 1%;
    white-space: nowrap;
}

.page-izin .izin-gecmis-aciklama-col {
    min-width: 16rem;
    width: 20%;
}

.page-izin .izin-gecmis-aciklama-cell {
    min-width: 16rem;
    overflow: hidden;
}

.page-izin .izin-gecmis-aciklama-text {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-izin .izin-gecmis-islem-col {
    width: 1%;
    white-space: nowrap;
    min-width: 7rem;
}

.page-izin .izin-gecmis-islem-cell {
    min-width: 7rem;
}

.page-izin #talepDetailDrawer .status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 9999px;
    font-size: var(--font-size-caption);
    font-weight: 600;
}

.page-izin #talepDetailDrawer .timeline-item::before {
    content: '';
    position: absolute;
    left: 0.875rem;
    top: 2rem;
    bottom: -0.5rem;
    width: 2px;
    background: linear-gradient(to bottom, #e2e8f0, transparent);
}

.page-izin #talepDetailDrawer .timeline-item:last-child::before {
    display: none;
}

@media (max-width: 768px) {
    .page-izin #requestDrawerPanel {
        max-width: 100%;
    }
}

/* --- izin-talep-onay.php --- */
.page-izin-talep-onay .drawer {
    visibility: hidden;
    transition: visibility 0.3s ease-in-out;
}

.page-izin-talep-onay .drawer-open {
    visibility: visible;
}

.page-izin-talep-onay .drawer-backdrop {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.page-izin-talep-onay .drawer-open .drawer-backdrop {
    opacity: 1;
}

.page-izin-talep-onay .drawer-panel {
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.page-izin-talep-onay .drawer-open .drawer-panel {
    transform: translateX(0);
}

.page-izin-talep-onay .status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 9999px;
    font-size: var(--font-size-caption);
    font-weight: 600;
}

.page-izin-talep-onay .timeline-item::before {
    content: '';
    position: absolute;
    left: 0.875rem;
    top: 2rem;
    bottom: -0.5rem;
    width: 2px;
    background: linear-gradient(to bottom, #e2e8f0, transparent);
}

.page-izin-talep-onay .timeline-item:last-child::before {
    display: none;
}

/* Alt çizgili sekmeler (Onayımı Bekleyen / Tüm Ekip) */
.page-izin-talep-onay nav[role="tablist"] .tab-button {
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    background: transparent;
    color: rgb(100 116 139);
    transition:
        color 0.2s ease,
        border-color 0.2s ease,
        background-color 0.2s ease;
}

.page-izin-talep-onay nav[role="tablist"] .tab-button:hover {
    color: rgb(51 65 85);
    border-bottom-color: rgb(203 213 225);
}

.page-izin-talep-onay nav[role="tablist"] .tab-button.border-brand-tab-active,
.page-izin-talep-onay nav[role="tablist"] .tab-button[aria-selected='true'] {
    border-bottom-color: var(--color-brand-primary);
    color: var(--color-brand-primary-hover);
    background: #fff;
}

.page-izin-talep-onay .calendar-view-btn--active {
    background: var(--color-brand-primary) !important;
    color: #fff !important;
}

.page-izin-talep-onay .calendar-view-btn:not(.calendar-view-btn--active):hover {
    background: rgb(226 232 240);
}

/* Takvim göstergeleri (inline style kaldırıldı) */
.page-izin-talep-onay .izin-cal-legend-swatch {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 0.125rem;
}

.page-izin-talep-onay .izin-cal-legend-swatch--approved {
    background: var(--color-brand-primary);
    border-left: 3px solid var(--color-brand-primary-hover);
}

.page-izin-talep-onay .izin-cal-legend-swatch--pending {
    background: rgba(217 119 6 / 0.15);
    border-left: 3px solid #d97706;
}

.page-izin-talep-onay .izin-cal-legend-swatch--holiday {
    background: rgba(245 158 11 / 0.15);
    border-left: 3px solid #f59e0b;
}

.page-izin-talep-onay .form-input:focus {
    outline: none;
    border-color: var(--color-brand-primary) !important;
    box-shadow: 0 0 0 2px var(--color-brand-focus-ring) !important;
}

.page-izin-talep-onay .izin-cal-day--today,
.page-izin .izin-cal-day--today,
.page-calisan-izin .izin-cal-day--today {
    border-width: 2px !important;
    border-color: var(--color-brand-primary) !important;
    background: var(--color-brand-muted-bg);
}

.page-izin-talep-onay .izin-cal-day-label--today,
.page-izin .izin-cal-day-label--today,
.page-calisan-izin .izin-cal-day-label--today {
    color: var(--color-brand-primary-hover);
}

.page-izin-talep-onay .izin-cal-day-more {
    font-size: 10px;
    color: var(--color-brand-primary);
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.page-izin-talep-onay .izin-cal-day-more:hover {
    text-decoration: underline;
}

.page-izin-talep-onay .izin-onay-icon-btn {
    padding: 0.5rem;
    border-radius: 0.5rem;
    transition:
        background-color 0.15s ease,
        color 0.15s ease;
    border: none;
    background: transparent;
    cursor: pointer;
}

.page-izin-talep-onay .izin-onay-icon-btn--brand {
    color: var(--color-brand-primary);
}

.page-izin-talep-onay .izin-onay-icon-btn--brand:hover {
    background: var(--color-brand-muted-bg);
    color: var(--color-brand-primary-hover);
}

.page-izin-talep-onay .izin-onay-icon-btn--success {
    color: #16a34a;
}

.page-izin-talep-onay .izin-onay-icon-btn--success:hover {
    background: #f0fdf4;
}

.page-izin-talep-onay .izin-pill-success {
    background: #dcfce7;
    color: #15803d;
}

.page-izin-talep-onay .izin-pill-amber {
    background: #fef3c7;
    color: #b45309;
}

.page-izin-talep-onay .izin-pill-rose {
    background: #ffe4e6;
    color: #be123c;
}

.page-izin-talep-onay .izin-pill-slate {
    background: #f1f5f9;
    color: #475569;
}

.page-izin-talep-onay .izin-tl-badge-success {
    background: #dcfce7;
    color: #15803d;
}

.page-izin-talep-onay .izin-tl-badge-pending-brand {
    background: var(--color-brand-muted-bg);
    color: var(--color-brand-primary-hover);
}

.page-izin-talep-onay .izin-tl-card-success {
    border: 2px solid #bbf7d0;
}

.page-izin-talep-onay .izin-tl-card-pending {
    border: 2px solid var(--color-brand-muted-border);
}

.page-izin-talep-onay .izin-tl-dot-success {
    background: #dcfce7;
    border: 4px solid #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.page-izin-talep-onay .izin-tl-dotinner-success {
    background: #22c55e;
}

.page-izin-talep-onay .izin-tl-dot-pending {
    background: var(--color-brand-muted-bg);
    border: 4px solid #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.page-izin-talep-onay .izin-tl-dotinner-pending {
    background: var(--color-brand-primary);
}

.page-izin-talep-onay .izin-detail-stat-icon--days {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    background: #dcfce7;
    color: #16a34a;
    margin-bottom: 0.5rem;
}

.page-izin-talep-onay .izin-detail-stat-icon--date {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    background: var(--color-brand-muted-bg);
    color: var(--color-brand-primary);
    margin-bottom: 0.5rem;
}

.page-izin-talep-onay .izin-requester-row--current {
    border-color: var(--color-brand-muted-border) !important;
    background: var(--color-brand-muted-bg) !important;
}

.page-izin-talep-onay .izin-requester-row-label--current {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-brand-primary-hover);
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .page-izin-talep-onay .izin-onay-table {
        min-width: 720px;
    }

    .page-izin-talep-onay .izin-onay-table th,
    .page-izin-talep-onay .izin-onay-table td {
        padding: 0.5rem 0.375rem;
        font-size: var(--font-size-caption);
    }

    .page-izin-talep-onay .izin-onay-table th:first-child,
    .page-izin-talep-onay .izin-onay-table td:first-child {
        padding-left: 0.5rem;
    }

    .page-izin-talep-onay .izin-onay-table th:last-child,
    .page-izin-talep-onay .izin-onay-table td:last-child {
        padding-right: 0.5rem;
    }

    .page-izin-talep-onay #detailDrawer .drawer-panel {
        width: 100%;
        max-width: 100%;
    }

    .page-izin-talep-onay #detailActions {
        flex-direction: column;
    }

    .page-izin-talep-onay #detailActions button {
        width: 100%;
    }
}

/* --- izin-tanimlama.php drawer --- */
.page-izin-tanimlama .drawer {
    position: fixed;
    inset: 0;
    z-index: 100;
    overflow: hidden;
    display: none;
}

.page-izin-tanimlama .drawer.drawer-open {
    display: block;
}

.page-izin-tanimlama .drawer-backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.page-izin-tanimlama .drawer.drawer-open .drawer-backdrop {
    opacity: 1;
}

.page-izin-tanimlama .drawer-panel {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 100%;
    max-width: 28rem;
    background-color: white;
    box-shadow:
        0 20px 25px -5px rgba(0, 0, 0, 0.1),
        0 10px 10px -5px rgba(0, 0, 0, 0.04);
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
}

.page-izin-tanimlama .drawer.drawer-open .drawer-panel {
    transform: translateX(0);
}

.page-izin-tanimlama .form-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid rgb(203 213 225);
    border-radius: 0.5rem;
    font-size: var(--font-size-body);
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
    color: var(--color-text-heading);
    background: #fff;
}

.page-izin-tanimlama .form-input:focus {
    border-color: var(--color-brand-primary) !important;
    box-shadow: 0 0 0 2px var(--color-brand-focus-ring) !important;
    outline: none;
}

.page-izin-tanimlama .accordion-content {
    transition: all 0.3s ease-in-out;
}

.page-izin-tanimlama .izin-tanimlama-pill-safe {
    background: #dcfce7;
    color: #15803d;
}

.page-izin-tanimlama .izin-tanimlama-expiry-card:hover {
    border-color: var(--color-brand-muted-border);
}

.page-izin-tanimlama .izin-tanimlama-matching-highlight {
    color: var(--color-brand-primary);
    background: var(--color-brand-muted-bg);
}

.page-izin-tanimlama .izin-tanimlama-matching-dot--on {
    background: var(--color-brand-primary);
}

.page-izin-tanimlama .izin-tanimlama-matching-dot--off {
    background: rgb(148 163 184);
}

.page-izin-tanimlama .izin-tanimlama-status--active {
    background: #dcfce7;
    color: #15803d;
}

.page-izin-tanimlama .izin-tanimlama-icon-wrap {
    padding: 0.5rem;
    border-radius: 0.5rem;
    flex-shrink: 0;
    background: var(--color-brand-muted-bg);
    color: var(--color-brand-primary);
}

.page-izin-tanimlama .izin-tanimlama-count-pill--on {
    background: var(--color-brand-muted-bg);
    color: var(--color-brand-primary-hover);
}

.page-izin-tanimlama .izin-tanimlama-count-pill--off {
    background: rgb(241 245 249);
    color: rgb(100 116 139);
}

.page-izin-tanimlama .izin-tanimlama-override--ekle {
    background: #22c55e;
    color: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.page-izin-tanimlama .izin-tanimlama-override--cikar {
    background: rgb(239 68 68);
    color: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.page-izin-tanimlama .izin-tanimlama-override--none {
    background: rgb(248 250 252);
    color: rgb(148 163 184);
}

.page-izin-tanimlama .izin-tanimlama-override-row:hover .izin-tanimlama-override--none {
    background: var(--color-brand-muted-bg);
    color: var(--color-brand-primary);
}

.page-izin-tanimlama .izin-tanimlama-matching-row--override-ekle {
    background: #ecfdf5;
}

.page-izin-tanimlama .izin-tanimlama-matching-row--override-cikar {
    background: #fef2f2;
}

.page-izin-tanimlama .izin-tanimlama-matching-bar--ekle {
    background: rgba(34, 197, 94, 0.9);
}

.page-izin-tanimlama .izin-tanimlama-matching-bar--cikar {
    background: rgba(239, 68, 68, 0.9);
}

@media (max-width: 640px) {
    .page-izin-tanimlama .drawer-panel {
        max-width: 100%;
    }
}

/* --- calisan-izin-yonetimi.php --- */
.page-calisan-izin .drawer {
    visibility: hidden;
    transition: visibility 0.3s ease-in-out;
}

.page-calisan-izin .drawer-open {
    visibility: visible;
}

.page-calisan-izin .drawer-backdrop {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.page-calisan-izin .drawer-open .drawer-backdrop {
    opacity: 1;
}

.page-calisan-izin .drawer-panel {
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.page-calisan-izin .drawer-open .drawer-panel {
    transform: translateX(0);
}

.page-calisan-izin .tab-content {
    display: block;
}

.page-calisan-izin .tab-content.hidden {
    display: none;
}

.page-calisan-izin .status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 9999px;
    font-size: var(--font-size-caption);
    font-weight: 600;
}

.page-calisan-izin .form-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid rgb(203 213 225);
    border-radius: 0.5rem;
    font-size: var(--font-size-body);
    line-height: 1.5;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
    color: var(--color-text-heading);
    background: #fff;
}

.page-calisan-izin .form-input:focus {
    outline: none;
    border-color: var(--color-brand-primary) !important;
    box-shadow: 0 0 0 3px var(--color-brand-focus-ring) !important;
}

.page-calisan-izin .izin-select-row {
    border: 1px solid rgb(226 232 240);
    border-left-width: 4px;
    border-left-color: rgb(148 163 184);
}

.page-calisan-izin .izin-select-row--checked {
    border-color: var(--color-brand-muted-border);
    border-left-color: var(--color-brand-primary);
}

.page-calisan-izin .izin-target-cb {
    accent-color: var(--color-brand-primary);
}

.page-calisan-izin .izin-hint-link {
    font-size: 0.75rem;
    line-height: 1rem;
    color: var(--color-brand-primary);
}

.page-calisan-izin .izin-hint-link button {
    color: inherit;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

.page-calisan-izin .izin-hint-link:hover {
    color: var(--color-brand-primary-hover);
    text-decoration: underline;
}

.page-calisan-izin .izin-text-link-brand {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-brand-primary);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.page-calisan-izin .izin-text-link-brand:hover {
    color: var(--color-brand-primary-hover);
    text-decoration: underline;
}

.page-calisan-izin .izin-calisan-radio {
    accent-color: var(--color-brand-primary);
}

.page-calisan-izin .calisan-halfday-btn--active {
    border-color: var(--color-brand-primary) !important;
    background: var(--color-brand-muted-bg);
}

.page-calisan-izin .izin-leave-status--beklemede {
    background: #fef3c7;
    color: #b45309;
}

.page-calisan-izin .izin-leave-status--onaylandi {
    background: #dcfce7;
    color: #15803d;
}

.page-calisan-izin .izin-leave-status--reddedildi {
    background: #ffe4e6;
    color: #be123c;
}

.page-calisan-izin .izin-leave-status--iptal {
    background: #f1f5f9;
    color: #475569;
}

.page-calisan-izin .izin-leave-status--revize {
    background: #dbeafe;
    color: #1d4ed8;
}

.page-calisan-izin .izin-bakiye-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-text-body);
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}

.page-calisan-izin .izin-bakiye-metric-positive {
    color: #15803d;
    font-weight: 600;
}

.page-calisan-izin .izin-bakiye-metric-negative {
    color: #be123c;
    font-weight: 600;
}

.page-calisan-izin .izin-bakiye-status-ok {
    color: #16a34a;
}

.page-calisan-izin .calisan-drawer-feedback--success {
    border-color: #bbf7d0 !important;
    background: #f0fdf4 !important;
    color: #166534 !important;
}

.page-calisan-izin .calisan-drawer-feedback--error {
    border-color: #fecdd3 !important;
    background: #fff1f2 !important;
    color: #9f1239 !important;
}

.page-calisan-izin #izinGirisDrawer.drawer-open {
    visibility: visible;
}

.page-calisan-izin #izinGirisDrawer.drawer-open .drawer-panel {
    transform: translateX(0);
}

.page-calisan-izin #deleteConfirmDrawer.drawer-open {
    visibility: visible;
}

.page-calisan-izin #deleteConfirmDrawer.drawer-open .drawer-panel {
    transform: translateX(0);
}

.page-calisan-izin .izin-gecmis-compact-col {
    width: 1%;
    white-space: nowrap;
}

.page-calisan-izin .izin-gecmis-aciklama-col {
    min-width: 16rem;
    width: 20%;
}

.page-calisan-izin .izin-gecmis-aciklama-cell {
    min-width: 16rem;
    overflow: hidden;
}

.page-calisan-izin .izin-gecmis-aciklama-text {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-calisan-izin .izin-gecmis-islem-col {
    width: 1%;
    white-space: nowrap;
    min-width: 7rem;
}

.page-calisan-izin .izin-gecmis-islem-cell {
    min-width: 7rem;
}

@media (max-width: 640px) {
    .page-calisan-izin .izin-table {
        min-width: 720px;
    }

    .page-calisan-izin .izin-table th,
    .page-calisan-izin .izin-table td {
        padding: 0.5rem 0.375rem;
        font-size: var(--font-size-caption);
    }

    .page-calisan-izin #izinGirisDrawer .drawer-panel,
    .page-calisan-izin #deleteConfirmDrawer .drawer-panel {
        max-width: 100%;
    }
}

/* === Page: module-masraf-kategori-limitleri === */
.page-module-masraf-kategori-limitleri {
    color: var(--color-text-body);
}

.page-module-masraf-kategori-limitleri .modlim-table-th {
    padding: 0.75rem 1.5rem;
    text-align: left;
    font-size: var(--font-size-overline);
    font-weight: 500;
    color: var(--color-text-body);
    opacity: 0.82;
    text-transform: uppercase;
    letter-spacing: 0.055em;
}

.page-module-masraf-kategori-limitleri .modlim-table-cell {
    padding: 0.75rem 1.5rem;
    vertical-align: middle;
}

.page-module-masraf-kategori-limitleri .modlim-drawer-title {
    font-size: var(--font-size-h3);
    font-weight: 600;
    color: var(--color-text-heading);
    letter-spacing: -0.02em;
}

.page-module-masraf-kategori-limitleri .modlim-drawer-close {
    padding: 0.5rem;
    border-radius: 0.5rem;
    color: var(--color-text-body);
    opacity: 0.75;
    transition: background-color 0.15s ease, opacity 0.15s ease;
}

.page-module-masraf-kategori-limitleri .modlim-drawer-close:hover {
    opacity: 1;
    background: rgb(226 232 240);
}

.page-module-masraf-kategori-limitleri .modlim-form-label {
    display: block;
    font-size: var(--font-size-overline);
    font-weight: 500;
    color: var(--color-text-body);
    opacity: 0.82;
    text-transform: uppercase;
    letter-spacing: 0.055em;
    margin-bottom: 0.25rem;
}

.page-module-masraf-kategori-limitleri .modlim-input,
.page-module-masraf-kategori-limitleri .modlim-select {
    width: 100%;
    border-radius: 0.75rem;
    border: 1px solid rgb(226 232 240);
    padding: 0.625rem 1rem;
    font-size: var(--font-size-body);
    color: var(--color-text-heading);
    background: #fff;
}

.page-module-masraf-kategori-limitleri .modlim-input:focus,
.page-module-masraf-kategori-limitleri .modlim-select:focus {
    outline: none;
    border-color: var(--color-brand-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand-primary) 22%, transparent);
}

.page-module-masraf-kategori-limitleri .modlim-target-seg {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.25rem;
    padding: 0.25rem;
    background: rgb(241 245 249);
    border-radius: 0.5rem;
}

.page-module-masraf-kategori-limitleri .limit-target-type-btn {
    border-radius: 0.375rem;
    padding: 0.375rem 0.25rem;
    font-size: var(--font-size-caption);
    font-weight: 500;
    color: var(--color-text-body);
    opacity: 0.85;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.page-module-masraf-kategori-limitleri .limit-target-type-btn:hover {
    opacity: 1;
    color: var(--color-text-heading);
}

.page-module-masraf-kategori-limitleri .limit-target-type-btn.limit-target-type-btn--active {
    background: #fff;
    color: var(--color-text-heading);
    opacity: 1;
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.08);
}

.page-module-masraf-kategori-limitleri .modlim-usage-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    padding: 0.125rem 0.5rem;
    font-size: var(--font-size-caption);
    font-weight: 600;
}

.page-module-masraf-kategori-limitleri .modlim-usage-pill--none {
    background: color-mix(in srgb, var(--color-brand-primary) 12%, transparent);
    color: var(--color-brand-primary);
}

.page-module-masraf-kategori-limitleri .modlim-usage-pill--low {
    background: color-mix(in srgb, var(--color-brand-primary) 18%, transparent);
    color: var(--color-brand-primary);
}

.page-module-masraf-kategori-limitleri .modlim-usage-pill--mid {
    background: rgb(254 243 199);
    color: rgb(146 64 14);
}

.page-module-masraf-kategori-limitleri .modlim-usage-pill--high {
    background: rgb(254 226 226);
    color: rgb(185 28 28);
}

.page-module-masraf-kategori-limitleri .modlim-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    border: none;
    cursor: pointer;
    transition: background-color 0.15s ease, opacity 0.15s ease;
}

.page-module-masraf-kategori-limitleri .modlim-icon-btn--edit {
    background: color-mix(in srgb, var(--color-brand-primary) 14%, transparent);
    color: var(--color-brand-primary);
}

.page-module-masraf-kategori-limitleri .modlim-icon-btn--edit:hover {
    background: color-mix(in srgb, var(--color-brand-primary) 22%, transparent);
}

.page-module-masraf-kategori-limitleri .modlim-icon-btn--danger {
    background: rgb(254 226 226);
    color: rgb(185 28 28);
}

.page-module-masraf-kategori-limitleri .modlim-icon-btn--danger:hover {
    background: rgb(254 202 202);
}

.page-module-masraf-kategori-limitleri .modlim-alert {
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    font-size: var(--font-size-caption);
    font-weight: 500;
}

.page-module-masraf-kategori-limitleri .modlim-alert--warn {
    background: rgb(254 252 232);
    border: 1px solid rgb(253 230 138);
    color: rgb(146 64 14);
}

.page-module-masraf-kategori-limitleri .modlim-alert--error {
    background: rgb(254 242 242);
    border: 1px solid rgb(254 202 202);
    color: rgb(185 28 28);
}

.page-module-masraf-kategori-limitleri .modlim-confirm-panel {
    border-radius: 0.75rem;
    border: 1px solid rgb(254 202 202);
    background: rgb(254 242 242);
    padding: 1rem;
}

.page-module-masraf-kategori-limitleri .modlim-confirm-panel--warn {
    border-color: rgb(253 230 138);
    background: rgb(254 252 232);
}

.page-module-masraf-kategori-limitleri .modlim-text-error {
    color: rgb(185 28 28);
}

@media (max-width: 640px) {
    .page-module-masraf-kategori-limitleri .modlim-table-th,
    .page-module-masraf-kategori-limitleri .modlim-table-cell {
        padding: 0.5rem 0.75rem;
    }
}

/* === Page: calisanin-sesi (module-employee-voice) === */
.page-calisanin-sesi {
    color: var(--color-text-body);
}

.page-calisanin-sesi .ev-page-table-th {
    padding: 0.75rem 1.5rem;
    text-align: left;
    font-size: var(--font-size-overline);
    font-weight: 500;
    color: var(--color-text-body);
    opacity: 0.82;
    text-transform: uppercase;
    letter-spacing: 0.055em;
}

.page-calisanin-sesi .ev-page-table-td {
    padding: 0.75rem 1.5rem;
    vertical-align: middle;
}

.page-calisanin-sesi .ev-filter-label {
    font-size: var(--font-size-caption);
    font-weight: 500;
    color: var(--color-text-body);
    opacity: 0.85;
    white-space: nowrap;
}

.page-calisanin-sesi .form-input:focus {
    border-color: var(--color-brand-primary);
    box-shadow: 0 0 0 2px var(--color-brand-focus-ring);
    outline: none;
}

.page-calisanin-sesi .ev-meta-kv {
    background: rgb(248 250 252);
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
}

.page-calisanin-sesi .ev-meta-kv-label {
    font-size: var(--font-size-overline);
    font-weight: 500;
    color: var(--color-text-body);
    opacity: 0.55;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.25rem;
}

.page-calisanin-sesi .ev-detail-summary {
    background: linear-gradient(to bottom right, rgb(248 250 252), rgb(241 245 249));
    border-radius: 0.75rem;
    border: 1px solid rgb(226 232 240);
    padding: 1.25rem 1.25rem;
}

.page-calisanin-sesi .ev-upload-inline-label {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    font-size: var(--font-size-caption);
    font-weight: 500;
    border-radius: 0.5rem;
    background: #fff;
    color: var(--color-text-body);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.page-calisanin-sesi .ev-upload-inline-label:hover {
    color: var(--color-brand-primary);
    background: color-mix(in srgb, var(--color-brand-primary) 8%, transparent);
}

.page-calisanin-sesi .ev-upload-inline-label:focus-within {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-brand-focus-ring);
    border-radius: 0.5rem;
}

.page-calisanin-sesi .ev-doc-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: #fff;
    border: 1px solid rgb(226 232 240);
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.page-calisanin-sesi .ev-doc-row:hover {
    border-color: color-mix(in srgb, var(--color-brand-primary) 35%, rgb(226 232 240));
    background: color-mix(in srgb, var(--color-brand-primary) 5%, #fff);
}

.page-calisanin-sesi .ev-doc-view-btn {
    flex-shrink: 0;
    padding: 0.375rem;
    border-radius: 0.5rem;
    border: none;
    background: transparent;
    color: var(--color-brand-primary);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.page-calisanin-sesi .ev-doc-view-btn:hover {
    background: color-mix(in srgb, var(--color-brand-primary) 12%, transparent);
}

.page-calisanin-sesi .ev-avatar-brand {
    background: color-mix(in srgb, var(--color-brand-primary) 14%, transparent);
    color: var(--color-brand-primary);
}

.page-calisanin-sesi .ev-avatar-brand .ev-comment-avatar-fallback {
    color: var(--color-brand-primary);
    background: transparent;
}

.page-calisanin-sesi .ev-compose-focus {
    position: relative;
    border-radius: 0.75rem;
    border: 2px solid rgb(226 232 240);
    transition: border-color 0.15s ease;
}

.page-calisanin-sesi .ev-compose-focus:focus-within {
    border-color: var(--color-brand-primary);
}

.page-calisanin-sesi .ev-anon-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    background: rgb(226 232 240);
    color: rgb(100 116 139);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.page-calisanin-sesi .ev-anon-card:has(#evCreateAnonymous:checked) .ev-anon-icon {
    background: color-mix(in srgb, var(--color-brand-primary) 16%, transparent);
    color: var(--color-brand-primary);
}

@media (max-width: 640px) {
    .page-calisanin-sesi .ev-page-table-th,
    .page-calisanin-sesi .ev-page-table-td {
        padding: 0.5rem 0.75rem;
    }
}

/* === Organizasyon şeması: izin rozeti / halka (organization-chart + user-organization-chart.js) === */
.org-chart-leave-ring {
    box-shadow:
        0 0 0 2px #fff,
        0 0 0 4px var(--color-brand-primary);
}

.org-chart-leave-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.25rem;
    font-size: 8px;
    font-weight: 600;
    line-height: 1.2;
    background: var(--color-brand-primary);
    color: #fff;
    border-radius: 9999px;
    border: 1px solid #fff;
    white-space: nowrap;
}

/* === Page: organization-chart === */
.page-organization-chart {
    color: var(--color-text-body);
}

/* === Page: module-calendar (drawer + görünüm) === */
.page-module-calendar {
    color: var(--color-text-body);
}

.page-module-calendar #eventDetailDrawer,
.page-module-calendar #dayEventsDrawer {
    position: fixed;
    inset: 0;
    z-index: 1050;
    width: 100%;
    height: 100%;
    background: transparent;
}

.page-module-calendar #eventDetailDrawer.drawer-open #eventDetailDrawerPanel {
    transform: translateX(0);
}

.page-module-calendar #eventDetailDrawer:not(.drawer-open) #eventDetailDrawerPanel {
    transform: translateX(100%);
}

.page-module-calendar #dayEventsDrawer.drawer-open #dayEventsDrawerPanel {
    transform: translateX(0);
}

.page-module-calendar #dayEventsDrawer:not(.drawer-open) #dayEventsDrawerPanel {
    transform: translateX(100%);
}

.page-module-calendar #eventDetailDrawerPanel,
.page-module-calendar #dayEventsDrawerPanel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    height: 100vh;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
}

.page-module-calendar #dayEventsDrawerScroll {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.page-module-calendar #eventDetailDrawerPanel .overflow-y-auto {
    flex: 1 1 0;
    min-height: 0;
}

@media (max-width: 768px) {
    .page-module-calendar #eventDetailDrawerPanel,
    .page-module-calendar #dayEventsDrawerPanel {
        max-width: 100% !important;
    }

    .page-module-calendar #dayEventsDrawerScroll {
        padding: 16px;
    }

    .page-module-calendar #dayEventsDrawerPanel .p-6 {
        padding: 16px;
    }
}

.page-module-calendar .cal-view-btn {
    color: var(--color-text-heading);
    background: transparent;
}

.page-module-calendar .cal-view-btn:hover:not(.cal-view-btn--active) {
    background: rgb(226 232 240);
}

.page-module-calendar .cal-view-btn--active {
    background: var(--color-brand-primary);
    color: #fff;
}

.page-module-calendar .cal-view-btn--active:hover {
    background: var(--color-brand-primary-hover);
    color: #fff;
}

.page-module-calendar .cal-nav-btn:hover {
    background: color-mix(in srgb, var(--color-brand-primary) 10%, transparent);
    border-color: color-mix(in srgb, var(--color-brand-primary) 45%, rgb(203 213 225));
    color: var(--color-brand-primary);
}

.page-module-calendar .cal-day-cell:not(.cal-day--today) {
    border: 1px solid rgb(226 232 240);
}

.page-module-calendar .cal-day-cell.cal-day--today {
    border-color: var(--color-brand-primary);
    border-width: 2px;
    background: color-mix(in srgb, var(--color-brand-primary) 10%, #fff);
}

.page-module-calendar .cal-day-cell.cal-day--today .cal-day-num {
    color: var(--color-brand-primary);
}

.page-module-calendar .cal-day-more-link {
    color: var(--color-brand-primary);
    text-decoration: none;
}

.page-module-calendar .cal-day-more-link:hover {
    color: var(--color-brand-primary-hover);
    text-decoration: underline;
}

.page-module-calendar .cal-month-box:hover {
    border-color: color-mix(in srgb, var(--color-brand-primary) 35%, rgb(226 232 240));
    box-shadow: 0 4px 14px color-mix(in srgb, var(--color-brand-primary) 12%, transparent);
}

.page-module-calendar .cal-month-box:hover .cal-month-title {
    color: var(--color-brand-primary);
}

.page-module-calendar .cal-year-mini--today {
    background: var(--color-brand-primary);
    color: #fff;
    border-radius: 0.25rem;
}

.page-module-calendar .cal-year-mini--events:not(.cal-year-mini--today) {
    background: color-mix(in srgb, var(--color-brand-primary) 16%, #fff);
    border-radius: 0.25rem;
}

/* === Page: module-yan-hak-esnek-yan-haklar (web/module-yan-hak-esnek-yan-haklar.php) === */
.page-module-yan-hak-esnek-yan-haklar {
    color: var(--color-text-body);
}

.page-module-yan-hak-esnek-yan-haklar .yanhak-product-card {
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.page-module-yan-hak-esnek-yan-haklar .yanhak-product-card:hover {
    transform: translateY(-4px);
}

.page-module-yan-hak-esnek-yan-haklar .yanhak-card--interactive:hover {
    border-color: color-mix(in srgb, var(--color-brand-primary) 32%, rgb(226 232 240));
    box-shadow:
        0 10px 15px -3px rgb(0 0 0 / 0.08),
        0 4px 6px -4px rgb(0 0 0 / 0.06);
}

.page-module-yan-hak-esnek-yan-haklar .yanhak-product-image {
    position: relative;
}

.page-module-yan-hak-esnek-yan-haklar .yanhak-product-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.05) 100%);
    pointer-events: none;
}

.page-module-yan-hak-esnek-yan-haklar .yanhak-product-card .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.page-module-yan-hak-esnek-yan-haklar .yanhak-product-card .line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.page-module-yan-hak-esnek-yan-haklar .yan-esnek-form-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid rgb(203 213 225);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.page-module-yan-hak-esnek-yan-haklar .yanhak-order-drawer-scroll {
    padding-bottom: 6rem;
}

.page-module-yan-hak-esnek-yan-haklar #yanhakOrderDrawer.drawer-open #yanhakOrderDrawerPanel {
    transform: translateX(0);
}

.page-module-yan-hak-esnek-yan-haklar #yanhakOrderDrawer:not(.drawer-open) #yanhakOrderDrawerPanel {
    transform: translateX(100%);
}

@media (max-width: 768px) {
    .page-module-yan-hak-esnek-yan-haklar #yanhakOrderDrawerPanel {
        max-width: 100% !important;
    }
}

/* === Page: module-yan-hak-bakiye-gecmisi (web/module-yan-hak-bakiye-gecmisi.php) === */
.page-module-yan-hak-bakiye-gecmisi {
    color: var(--color-text-body);
}

/* === Page: module-ust-yonetim (web/module-ust-yonetim.php) === */
@keyframes moduleUstYonetimSlideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes moduleUstYonetimSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.page-module-ust-yonetim {
    color: var(--color-text-body);
}

.page-module-ust-yonetim .module-ust-yonetim-container {
    /* Arka plan "plane"/gradient görünmesin */
    background: transparent;
    min-height: auto;
    padding: 20px;
    margin: 0;
}

.page-module-ust-yonetim .module-ust-yonetim-tabs-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 32px;
    animation: moduleUstYonetimSlideDown 0.6s ease-out 0.1s both;
}

.page-module-ust-yonetim .module-ust-yonetim-tabs-container {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    background: #fff;
    padding: 8px;
    border-radius: 12px;
    border: 1px solid rgb(226 232 240);
    width: fit-content;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.page-module-ust-yonetim .module-ust-yonetim-tab-button {
    padding: 10px 24px;
    border: none;
    background: transparent;
    color: var(--color-text-body);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    border-radius: 8px;
    transition: background-color 0.2s ease, color 0.2s ease;
    position: relative;
}

.page-module-ust-yonetim .module-ust-yonetim-tab-button:hover {
    background: color-mix(in srgb, var(--color-brand-primary) 10%, #fff);
    color: var(--color-brand-primary);
}

.page-module-ust-yonetim .module-ust-yonetim-tab-button.active {
    background: var(--color-brand-primary);
    color: #fff;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--color-brand-primary) 35%, transparent);
}

.page-module-ust-yonetim .module-ust-yonetim-tab-button.active:hover {
    background: var(--color-brand-primary-hover);
    color: #fff;
}

.page-module-ust-yonetim .module-ust-yonetim-message-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.08);
    border: 1px solid rgb(226 232 240);
    transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
    animation: moduleUstYonetimSlideUp 0.6s ease-out 0.2s both;
}

.page-module-ust-yonetim .module-ust-yonetim-message-card:hover {
    box-shadow: 0 12px 24px rgb(0 0 0 / 0.12);
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--color-brand-primary) 40%, rgb(226 232 240));
}

.page-module-ust-yonetim .module-ust-yonetim-message-content {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 0;
    height: 100%;
}

.page-module-ust-yonetim .module-ust-yonetim-message-text {
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.page-module-ust-yonetim .module-ust-yonetim-message-header {
    margin-bottom: 24px;
}

.page-module-ust-yonetim .module-ust-yonetim-message-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-text-heading);
    margin-bottom: 16px;
    line-height: 1.3;
}

.page-module-ust-yonetim .module-ust-yonetim-message-body {
    font-size: 1rem;
    color: var(--color-text-heading);
    line-height: 1.8;
    margin-bottom: 24px;
    flex-grow: 1;
}

.page-module-ust-yonetim .module-ust-yonetim-message-body p {
    margin-bottom: 16px;
}

.page-module-ust-yonetim .module-ust-yonetim-message-body p:last-child {
    margin-bottom: 0;
}

.page-module-ust-yonetim .module-ust-yonetim-message-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 24px;
    border-top: 1px solid rgb(226 232 240);
}

.page-module-ust-yonetim .module-ust-yonetim-message-author {
    color: var(--color-text-body);
    font-size: 0.95rem;
    font-weight: 500;
    font-style: italic;
}

.page-module-ust-yonetim .module-ust-yonetim-message-actions {
    display: flex;
    gap: 8px;
}

.page-module-ust-yonetim .module-ust-yonetim-action-button {
    width: 40px;
    height: 40px;
    border: none;
    background: #f8fafc;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, color 0.2s ease;
    color: var(--color-text-body);
}

.page-module-ust-yonetim .module-ust-yonetim-action-button:hover {
    background: color-mix(in srgb, var(--color-brand-primary) 12%, #fff);
    color: var(--color-brand-primary);
}

.page-module-ust-yonetim .module-ust-yonetim-action-button.danger:hover {
    background: #fee2e2;
    color: #e11d48;
}

.page-module-ust-yonetim .module-ust-yonetim-action-button svg {
    width: 18px;
    height: 18px;
}

.page-module-ust-yonetim .module-ust-yonetim-message-image {
    background: linear-gradient(135deg, #f0f4f8 0%, #e2e8f0 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    min-height: 360px;
}

.page-module-ust-yonetim .module-ust-yonetim-message-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.page-module-ust-yonetim .module-ust-yonetim-message-card:hover .module-ust-yonetim-message-image img {
    transform: scale(1.05);
}

.page-module-ust-yonetim .module-ust-yonetim-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--color-text-body);
    font-size: 0.9rem;
}

.page-module-ust-yonetim .module-ust-yonetim-new-message-btn {
    white-space: nowrap;
}

.page-module-ust-yonetim .ust-yonetim-quill-editor .ql-toolbar button:hover,
.page-module-ust-yonetim .ust-yonetim-quill-editor .ql-toolbar button:focus {
    color: var(--color-brand-primary) !important;
}

.page-module-ust-yonetim .ust-yonetim-quill-editor .ql-toolbar button.ql-active {
    color: var(--color-brand-primary) !important;
}

.page-module-ust-yonetim .ust-yonetim-quill-editor .ql-stroke {
    stroke: currentColor;
}

@media (max-width: 768px) {
    .page-module-ust-yonetim .module-ust-yonetim-container {
        padding: 12px;
        margin: 0;
    }

    .page-module-ust-yonetim .module-ust-yonetim-tabs-wrapper {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        margin-bottom: 24px;
    }

    .page-module-ust-yonetim .module-ust-yonetim-tabs-container {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .page-module-ust-yonetim .module-ust-yonetim-tabs-container::-webkit-scrollbar {
        display: none;
    }

    .page-module-ust-yonetim .module-ust-yonetim-tab-button {
        flex: 0 0 auto;
        padding: 8px 16px;
        font-size: 0.875rem;
        white-space: nowrap;
    }

    .page-module-ust-yonetim .module-ust-yonetim-new-message-btn {
        width: 100%;
    }

    .page-module-ust-yonetim .module-ust-yonetim-message-content {
        grid-template-columns: 1fr;
    }

    .page-module-ust-yonetim .module-ust-yonetim-message-image {
        min-height: 250px;
        order: -1;
    }

    .page-module-ust-yonetim .module-ust-yonetim-message-text {
        padding: 24px 16px;
    }

    .page-module-ust-yonetim .module-ust-yonetim-message-title {
        font-size: 1.375rem;
        margin-bottom: 12px;
    }

    .page-module-ust-yonetim .module-ust-yonetim-message-body {
        font-size: 0.9375rem;
        line-height: 1.6;
        margin-bottom: 20px;
    }

    .page-module-ust-yonetim .module-ust-yonetim-message-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding-top: 16px;
    }

    .page-module-ust-yonetim .module-ust-yonetim-message-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .page-module-ust-yonetim .module-ust-yonetim-action-button {
        width: 36px;
        height: 36px;
    }

    .page-module-ust-yonetim .module-ust-yonetim-action-button svg {
        width: 16px;
        height: 16px;
    }

    .page-module-ust-yonetim #messageDrawerPanel .flex-1.overflow-y-auto {
        padding: 16px;
    }

    .page-module-ust-yonetim #messageDrawerPanel .p-6 {
        padding: 16px;
    }

    .page-module-ust-yonetim #messageDrawerPanel .p-6.border-t {
        padding: 16px;
    }
}

@media (max-width: 480px) {
    .page-module-ust-yonetim .module-ust-yonetim-container {
        padding: 8px;
        margin: 0;
    }

    .page-module-ust-yonetim .module-ust-yonetim-tabs-wrapper {
        margin-bottom: 20px;
    }

    .page-module-ust-yonetim .module-ust-yonetim-tab-button {
        padding: 6px 12px;
        font-size: 0.8125rem;
    }

    .page-module-ust-yonetim .module-ust-yonetim-message-text {
        padding: 20px 12px;
    }

    .page-module-ust-yonetim .module-ust-yonetim-message-title {
        font-size: 1.25rem;
    }

    .page-module-ust-yonetim .module-ust-yonetim-message-body {
        font-size: 0.875rem;
    }

    .page-module-ust-yonetim .module-ust-yonetim-message-image {
        min-height: 200px;
    }
}

/* === Page: report-mood-tracker /gunluk-ruh-hali-rapor (web/report-mood-tracker.php) === */
.page-report-mood-tracker {
    color: var(--color-text-body);
}

@media print {
    .page-report-mood-tracker .no-print {
        display: none !important;
    }

    .page-report-mood-tracker .print-only {
        display: block !important;
    }
}

.page-report-mood-tracker .print-only {
    display: none;
}

.page-report-mood-tracker .mood-report-chart-line {
    fill: none;
    stroke: url(#moodReportChartGradient);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.page-report-mood-tracker .mood-report-chart-dot {
    transition: r 0.2s;
    cursor: pointer;
}

.page-report-mood-tracker .mood-report-chart-dot:hover {
    r: 5;
}

.page-report-mood-tracker #reportMoodTooltip {
    pointer-events: none;
}

.page-report-mood-tracker .report-page-my-mood-line {
    fill: none;
    stroke: url(#reportPageMyMoodGradient);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.page-report-mood-tracker .report-page-my-mood-dot {
    transition: r 0.2s;
    cursor: pointer;
}

.page-report-mood-tracker .report-page-my-mood-dot:hover {
    r: 5;
}

.page-report-mood-tracker .report-page-my-mood-gauge {
    background: linear-gradient(to right, #f87171 0%, #fbbf24 50%, #4ade80 100%);
}

.page-report-mood-tracker .report-page-my-mood-gauge-thumb {
    left: 0%;
    margin-left: -7px;
}

.page-report-mood-tracker #reportPageMyMoodTooltip {
    pointer-events: none;
}

.page-report-mood-tracker .report-target-item {
    border-color: rgb(226 232 240);
    border-left-color: rgb(148 163 184);
}

.page-report-mood-tracker .report-target-item--checked {
    border-color: color-mix(in srgb, var(--color-brand-primary) 30%, rgb(226 232 240));
    border-left-color: var(--color-brand-primary);
}

@media (max-width: 640px) {
    .page-report-mood-tracker #reportMoodChartWrap {
        padding: 0.75rem;
        min-height: 160px;
    }

    .page-report-mood-tracker #reportMoodChartSvg {
        min-width: 320px;
    }

    .page-report-mood-tracker #reportPageMyMoodChartSvg {
        min-width: 280px;
    }

    .page-report-mood-tracker #reportPageMyMoodAverageBig {
        font-size: 1.25rem !important;
    }
}

/* === Page: module-leave-yonetimi (web/module-leave-yonetimi.php) — /izin-yonetimi === */
@keyframes leave-yonetim-slide-in {
    from {
        transform: translateY(10px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes leave-yonetim-pulse-ring {
    0%,
    100% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-brand-primary) 55%, transparent);
    }

    50% {
        box-shadow: 0 0 0 4px transparent;
    }
}

.page-module-leave-yonetimi #typeDrawer.drawer-open #typeDrawerPanel,
.page-module-leave-yonetimi #detailDrawer.drawer-open #detailDrawerPanel,
.page-module-leave-yonetimi #deleteTypeDrawer.drawer-open #deleteTypeDrawerPanel,
.page-module-leave-yonetimi #deleteDetailDrawer.drawer-open #deleteDetailDrawerPanel,
.page-module-leave-yonetimi #seniorityDrawer.drawer-open #seniorityDrawerPanel,
.page-module-leave-yonetimi #deleteSeniorityDrawer.drawer-open #deleteSeniorityDrawerPanel,
.page-module-leave-yonetimi #typeOzelEslestirmeListDrawer.drawer-open #typeOzelEslestirmeListDrawerPanel,
.page-module-leave-yonetimi #templateDrawer.drawer-open #templateDrawerPanel {
    transform: translateX(0);
}

.page-module-leave-yonetimi #typeDrawer:not(.drawer-open) #typeDrawerPanel,
.page-module-leave-yonetimi #detailDrawer:not(.drawer-open) #detailDrawerPanel,
.page-module-leave-yonetimi #deleteTypeDrawer:not(.drawer-open) #deleteTypeDrawerPanel,
.page-module-leave-yonetimi #deleteDetailDrawer:not(.drawer-open) #deleteDetailDrawerPanel,
.page-module-leave-yonetimi #seniorityDrawer:not(.drawer-open) #seniorityDrawerPanel,
.page-module-leave-yonetimi #deleteSeniorityDrawer:not(.drawer-open) #deleteSeniorityDrawerPanel,
.page-module-leave-yonetimi #typeOzelEslestirmeListDrawer:not(.drawer-open) #typeOzelEslestirmeListDrawerPanel,
.page-module-leave-yonetimi #templateDrawer:not(.drawer-open) #templateDrawerPanel {
    transform: translateX(100%);
}

.page-module-leave-yonetimi .form-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid rgb(203, 213, 225);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.page-module-leave-yonetimi .form-input:focus {
    border-color: var(--color-brand-primary) !important;
    box-shadow: 0 0 0 2px var(--color-brand-focus-ring) !important;
    outline: none;
}

.page-module-leave-yonetimi .accordion-detail-toggle {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.375rem;
    border: 1px solid rgb(226, 232, 240);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    background: rgb(248, 250, 252);
    color: rgb(100, 116, 139);
}

.page-module-leave-yonetimi .accordion-detail-toggle:hover {
    border-color: rgb(148, 163, 184);
    background: rgb(241, 245, 249);
    color: rgb(71, 85, 105);
}

.page-module-leave-yonetimi .accordion-detail-toggle.accordion-open {
    border-color: rgb(148, 163, 184);
    background: rgb(226, 232, 240);
    color: rgb(51, 65, 85);
}

.page-module-leave-yonetimi .type-icon-plus.hidden,
.page-module-leave-yonetimi .type-icon-minus.hidden {
    display: none !important;
}

.page-module-leave-yonetimi .version-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 500;
    background: color-mix(in srgb, var(--color-brand-primary) 12%, white);
    color: var(--color-brand-primary);
    border: 1px solid color-mix(in srgb, var(--color-brand-primary) 28%, white);
}

.page-module-leave-yonetimi .minimal-toggle {
    display: flex;
    align-items: center;
    gap: 15px;
}

.page-module-leave-yonetimi .minimal-toggle input {
    display: none;
}

.page-module-leave-yonetimi .minimal-switch {
    width: 60px;
    height: 30px;
    background: #e2e8f0;
    border-radius: 30px;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
}

.page-module-leave-yonetimi .minimal-switch::after {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    background: white;
    border-radius: 50%;
    top: 3px;
    left: 3px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.page-module-leave-yonetimi .minimal-toggle input:checked + .minimal-switch {
    background: var(--color-brand-primary);
}

.page-module-leave-yonetimi .minimal-toggle input:checked + .minimal-switch::after {
    transform: translateX(30px);
}

.page-module-leave-yonetimi .minimal-label {
    font-size: 0.875rem;
    color: #64748b;
    font-weight: 500;
    transition: all 0.3s ease;
}

.page-module-leave-yonetimi .minimal-label.active {
    color: #1e293b;
    font-weight: 600;
}

.page-module-leave-yonetimi .step-item {
    animation: leave-yonetim-slide-in 0.3s ease-out;
}

.page-module-leave-yonetimi .active-badge {
    animation: leave-yonetim-pulse-ring 2s infinite;
}

.page-module-leave-yonetimi .wizard-progress-container {
    margin-bottom: 1rem;
}

.page-module-leave-yonetimi .wizard-step-info {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .page-module-leave-yonetimi .wizard-step-info {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

.page-module-leave-yonetimi .wizard-step-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: rgb(30, 41, 59);
}

@media (min-width: 768px) {
    .page-module-leave-yonetimi .wizard-step-title {
        font-size: 1.25rem;
    }
}

.page-module-leave-yonetimi .wizard-step-desc {
    font-size: 0.75rem;
    color: rgb(100, 116, 139);
    margin-top: 0.25rem;
}

@media (min-width: 768px) {
    .page-module-leave-yonetimi .wizard-step-desc {
        font-size: 0.875rem;
    }
}

.page-module-leave-yonetimi .wizard-completion-badge {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-brand-primary);
    background: color-mix(in srgb, var(--color-brand-primary) 14%, white);
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    white-space: nowrap;
}

@media (min-width: 768px) {
    .page-module-leave-yonetimi .wizard-completion-badge {
        font-size: 0.875rem;
        padding: 0.5rem 1rem;
    }
}

.page-module-leave-yonetimi .wizard-mini-progress {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 1rem;
}

.page-module-leave-yonetimi .wizard-mini-bar {
    flex: 1;
    height: 12px;
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.page-module-leave-yonetimi .wizard-mini-bar:hover {
    filter: brightness(1.1);
    transform: scaleY(1.2);
}

.page-module-leave-yonetimi .wizard-mini-bar.completed {
    background: rgb(34, 197, 94);
}

.page-module-leave-yonetimi .wizard-mini-bar.active {
    background: var(--color-brand-primary);
}

.page-module-leave-yonetimi .wizard-mini-bar.pending {
    background: rgb(203, 213, 225);
}

.page-module-leave-yonetimi .wizard-step-content {
    display: none;
}

.page-module-leave-yonetimi .wizard-step-content.active {
    display: block;
}

/* Duyuru yönetimi wizard görünümü */
.page-module-duyuru-yonetimi .wizard-progress-container {
    margin-bottom: 1rem;
}

.page-module-duyuru-yonetimi .wizard-step-info {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .page-module-duyuru-yonetimi .wizard-step-info {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

.page-module-duyuru-yonetimi .wizard-step-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: rgb(30, 41, 59);
}

@media (min-width: 768px) {
    .page-module-duyuru-yonetimi .wizard-step-title {
        font-size: 1.25rem;
    }
}

.page-module-duyuru-yonetimi .wizard-step-desc {
    font-size: 0.75rem;
    color: rgb(100, 116, 139);
    margin-top: 0.25rem;
}

@media (min-width: 768px) {
    .page-module-duyuru-yonetimi .wizard-step-desc {
        font-size: 0.875rem;
    }
}

.page-module-duyuru-yonetimi .wizard-completion-badge {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-brand-primary);
    background: color-mix(in srgb, var(--color-brand-primary) 14%, white);
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    white-space: nowrap;
}

@media (min-width: 768px) {
    .page-module-duyuru-yonetimi .wizard-completion-badge {
        font-size: 0.875rem;
        padding: 0.5rem 1rem;
    }
}

.page-module-duyuru-yonetimi .wizard-mini-progress {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 1rem;
}

.page-module-duyuru-yonetimi .wizard-mini-bar {
    flex: 1;
    height: 12px;
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.page-module-duyuru-yonetimi .wizard-mini-bar:hover {
    filter: brightness(1.1);
    transform: scaleY(1.2);
}

.page-module-duyuru-yonetimi .wizard-mini-bar.completed {
    background: rgb(34, 197, 94);
}

.page-module-duyuru-yonetimi .wizard-mini-bar.active {
    background: var(--color-brand-primary);
}

.page-module-duyuru-yonetimi .wizard-mini-bar.pending {
    background: rgb(203, 213, 225);
}

.page-module-duyuru-yonetimi .wizard-step-content {
    display: none;
}

.page-module-duyuru-yonetimi .wizard-step-content.active {
    display: block;
}

.page-module-leave-yonetimi .button-group {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    width: 100%;
}

.page-module-leave-yonetimi .button-group button,
.page-module-leave-yonetimi .button-group-item {
    flex: 1;
    min-width: 0;
    padding: 0.5rem 0.75rem;
    border: 1px solid rgb(203, 213, 225);
    border-radius: 0.5rem;
    background: rgb(241, 245, 249);
    color: rgb(51, 65, 85);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.page-module-leave-yonetimi .button-group button:hover,
.page-module-leave-yonetimi .button-group-item:hover {
    background: rgb(226, 232, 240);
    border-color: rgb(148, 163, 184);
}

.page-module-leave-yonetimi .button-group button.active,
.page-module-leave-yonetimi .button-group-item.active {
    background: var(--color-brand-primary);
    color: white;
    border-color: var(--color-brand-primary);
}

.page-module-leave-yonetimi .wizard-nav-container {
    position: relative;
}

.page-module-leave-yonetimi .wizard-nav-toggle {
    display: none;
    padding: 0.5rem;
    background: rgb(241, 245, 249);
    border: 1px solid rgb(203, 213, 225);
    border-radius: 0.5rem;
    cursor: pointer;
    margin-bottom: 0.5rem;
}

.page-module-leave-yonetimi .wizard-nav-steps {
    transition:
        max-height 0.3s ease,
        opacity 0.3s ease;
    overflow: hidden;
}

.page-module-leave-yonetimi .wizard-nav-steps.collapsed {
    max-height: 0;
    opacity: 0;
}

/* Peer switch (Tailwind .peer + sibling) — sky yerine marka */
.page-module-leave-yonetimi .leave-yonetim-peer-switch {
    position: relative;
    width: 3.5rem;
    height: 1.75rem;
    background: rgb(226 232 240);
    border-radius: 9999px;
    flex-shrink: 0;
    transition: background-color 0.2s ease;
    box-shadow: inset 0 2px 4px rgba(15, 23, 42, 0.06);
}

.page-module-leave-yonetimi .leave-yonetim-peer-switch::after {
    content: '';
    position: absolute;
    width: 1.5rem;
    height: 1.5rem;
    background: #fff;
    border-radius: 50%;
    top: 2px;
    left: 4px;
    transition: transform 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    border: 1px solid rgb(203 213 225);
}

.page-module-leave-yonetimi .peer:checked ~ .leave-yonetim-peer-switch {
    background: var(--color-brand-primary);
}

.page-module-leave-yonetimi .peer:checked ~ .leave-yonetim-peer-switch::after {
    transform: translateX(1.25rem);
    border-color: rgba(255, 255, 255, 0.35);
}

.page-module-leave-yonetimi .peer:focus-visible ~ .leave-yonetim-peer-switch {
    outline: 2px solid var(--color-brand-focus-ring);
    outline-offset: 2px;
}

.page-module-leave-yonetimi .leave-yonetim-radio {
    accent-color: var(--color-brand-primary);
}

.page-module-leave-yonetimi .leave-yonetim-radio:focus {
    outline: none;
}

.page-module-leave-yonetimi .leave-yonetim-radio:focus-visible {
    outline: 2px solid var(--color-brand-focus-ring);
    outline-offset: 2px;
}

.page-module-leave-yonetimi .leave-yonetim-breadcrumb-link {
    color: var(--color-brand-primary);
}

.page-module-leave-yonetimi .leave-yonetim-breadcrumb-link:hover {
    background: color-mix(in srgb, var(--color-brand-primary) 12%, white);
    color: var(--color-brand-primary-hover);
}

.page-module-leave-yonetimi .leave-yonetim-type-icon-wrap {
    padding: 0.5rem;
    border-radius: 0.5rem;
    flex-shrink: 0;
    background: color-mix(in srgb, var(--color-brand-primary) 10%, white);
    color: var(--color-brand-primary);
}

.page-module-leave-yonetimi .leave-yonetim-type-name-btn:hover {
    color: var(--color-brand-primary-hover);
}

.page-module-leave-yonetimi .leave-yonetim-wizard-option {
    display: flex;
    padding: 1rem;
    border: 2px solid rgb(226 232 240);
    border-radius: 0.5rem;
    transition: all 0.2s ease;
    cursor: pointer;
}

.page-module-leave-yonetimi .leave-yonetim-wizard-option:hover {
    border-color: color-mix(in srgb, var(--color-brand-primary) 45%, rgb(226 232 240));
    background: color-mix(in srgb, var(--color-brand-primary) 6%, white);
}

.page-module-leave-yonetimi .leave-yonetim-wizard-option--selected {
    border-color: var(--color-brand-primary);
    background: color-mix(in srgb, var(--color-brand-primary) 10%, white);
}

.page-module-leave-yonetimi .leave-yonetim-wizard-option-radio {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.125rem;
    margin-right: 1rem;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: var(--color-brand-primary);
}

.page-module-leave-yonetimi .leave-yonetim-detail-tab {
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    transition:
        background-color 0.15s ease,
        color 0.15s ease;
    background: #fff;
    color: rgb(51 65 85);
}

.page-module-leave-yonetimi .leave-yonetim-detail-tab--active {
    background: var(--color-brand-primary);
    color: #fff;
}

.page-module-leave-yonetimi .leave-yonetim-oteleme-cb {
    width: 1rem;
    height: 1rem;
    border-radius: 0.25rem;
    border-color: rgb(203 213 225);
    accent-color: var(--color-brand-primary);
}

.page-module-leave-yonetimi .leave-yonetim-oteleme-cb:focus {
    outline: none;
}

.page-module-leave-yonetimi .leave-yonetim-oteleme-cb:focus-visible {
    outline: 2px solid var(--color-brand-focus-ring);
    outline-offset: 2px;
}

.page-module-leave-yonetimi .leave-yonetim-oteleme-row--selected {
    border-color: var(--color-brand-primary);
    background: color-mix(in srgb, var(--color-brand-primary) 8%, white);
}

.page-module-leave-yonetimi .leave-yonetim-wizard-back-btn {
    border: 2px solid color-mix(in srgb, var(--color-brand-primary) 40%, rgb(203 213 225));
    color: var(--color-brand-primary);
    background: color-mix(in srgb, var(--color-brand-primary) 8%, white);
}

.page-module-leave-yonetimi .leave-yonetim-wizard-back-btn:hover {
    background: color-mix(in srgb, var(--color-brand-primary) 14%, white);
    border-color: color-mix(in srgb, var(--color-brand-primary) 55%, rgb(203 213 225));
}

.page-module-leave-yonetimi .group:hover .leave-yonetim-row-chevron {
    background: color-mix(in srgb, var(--color-brand-primary) 10%, white);
    color: var(--color-brand-primary);
}

@media (max-width: 768px) {
    .page-module-leave-yonetimi #typeDrawerPanel,
    .page-module-leave-yonetimi #detailDrawerPanel,
    .page-module-leave-yonetimi #deleteTypeDrawerPanel,
    .page-module-leave-yonetimi #deleteDetailDrawerPanel,
    .page-module-leave-yonetimi #deleteSeniorityDrawerPanel,
    .page-module-leave-yonetimi #typeOzelEslestirmeListDrawerPanel,
    .page-module-leave-yonetimi #templateDrawerPanel {
        max-width: 100%;
    }
}

/* === Page: erisim-yonetimi (web/erisim-yonetimi.php) === */
.page-erisim-yonetimi #permissionDrawerPanel,
.page-erisim-yonetimi #deletePermissionDrawerPanel,
.page-erisim-yonetimi #adminPermissionConfirmDrawerPanel {
    will-change: transform;
}

@media (max-width: 768px) {
    .page-erisim-yonetimi #permissionDrawerPanel,
    .page-erisim-yonetimi #deletePermissionDrawerPanel,
    .page-erisim-yonetimi #adminPermissionConfirmDrawerPanel {
        max-width: 100% !important;
    }

    .page-erisim-yonetimi .permissions-table-container {
        -webkit-overflow-scrolling: touch;
        overflow-x: auto;
    }

    .page-erisim-yonetimi .accordion-header {
        padding: 0.75rem !important;
        flex-wrap: wrap;
    }

    .page-erisim-yonetimi .accordion-header button {
        font-size: 0.875rem;
    }

    .page-erisim-yonetimi .permissions-table th,
    .page-erisim-yonetimi .permissions-table td {
        padding: 0.5rem !important;
        font-size: 0.75rem;
    }

    .page-erisim-yonetimi .permissions-table th {
        font-size: 0.7rem;
        padding: 0.4rem 0.3rem !important;
    }

    .page-erisim-yonetimi .permissions-table th svg {
        width: 0.875rem;
        height: 0.875rem;
    }

    .page-erisim-yonetimi .permissions-table th span {
        font-size: 0.65rem;
    }

    .page-erisim-yonetimi .permissions-table td:first-child {
        min-width: 120px;
        max-width: 150px;
    }

    .page-erisim-yonetimi .permissions-table td:first-child .font-medium {
        font-size: 0.75rem;
    }

    .page-erisim-yonetimi .permissions-table td:first-child .text-xs {
        font-size: 0.65rem;
    }

    .page-erisim-yonetimi .permissions-table input[type="checkbox"] {
        width: 1.25rem;
        height: 1.25rem;
    }

    .page-erisim-yonetimi .form-input {
        font-size: 16px; /* iOS zoom önleme */
        padding: 0.625rem 0.875rem;
    }

    .page-erisim-yonetimi #permissionDrawerPanel > div:first-child,
    .page-erisim-yonetimi #deletePermissionDrawerPanel > div:first-child,
    .page-erisim-yonetimi #adminPermissionConfirmDrawerPanel > div:first-child {
        padding: 1rem !important;
    }

    .page-erisim-yonetimi #permissionDrawerPanel h3,
    .page-erisim-yonetimi #deletePermissionDrawerPanel h3,
    .page-erisim-yonetimi #adminPermissionConfirmDrawerPanel h3 {
        font-size: 1.125rem;
    }

    .page-erisim-yonetimi #permissionForm > div:first-child,
    .page-erisim-yonetimi #deletePermissionDrawerPanel > div:nth-child(2),
    .page-erisim-yonetimi #adminPermissionConfirmDrawerPanel > div:nth-child(2) {
        padding: 1rem !important;
    }

    .page-erisim-yonetimi #permissionDrawerPanel > div:last-child,
    .page-erisim-yonetimi #deletePermissionDrawerPanel > div:last-child,
    .page-erisim-yonetimi #adminPermissionConfirmDrawerPanel > div:last-child {
        padding: 1rem !important;
    }

    .page-erisim-yonetimi #permissionDrawerPanel button,
    .page-erisim-yonetimi #deletePermissionDrawerPanel button,
    .page-erisim-yonetimi #adminPermissionConfirmDrawerPanel button {
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
    }

    .page-erisim-yonetimi label {
        font-size: 0.875rem;
        margin-bottom: 0.5rem;
    }
}

/* === Page: group-types (web/group-types.php) === */
.page-group-types #groupTypeDrawerPanel,
.page-group-types #deleteGroupTypeDrawerPanel {
    will-change: transform;
}

.page-group-types .group-types-stat-system {
    color: var(--color-brand-primary);
}

.page-group-types .group-types-stat-company {
    color: rgb(67 56 202);
}

.page-group-types .group-types-type-pill {
    display: inline-block;
}

.page-group-types .group-types-type-pill--system {
    background: color-mix(in srgb, var(--color-brand-primary) 12%, white);
    color: var(--color-brand-primary-hover);
}

.page-group-types .group-types-type-pill--company {
    background: color-mix(in srgb, rgb(99 102 241) 14%, white);
    color: rgb(67 56 202);
}

.page-group-types .group-types-sort-indicator {
    display: inline-block;
    min-width: 1ch;
    text-align: center;
    font-size: 0.75rem;
    color: var(--color-brand-primary);
}

@media (max-width: 768px) {
    .page-group-types #groupTypeDrawerPanel,
    .page-group-types #deleteGroupTypeDrawerPanel {
        max-width: 100% !important;
    }

    .page-group-types #groupTypeDrawerPanel > div:first-child,
    .page-group-types #deleteGroupTypeDrawerPanel > div:first-child {
        padding: 1rem !important;
    }

    .page-group-types #groupTypeDrawerPanel h3,
    .page-group-types #deleteGroupTypeDrawerPanel h3 {
        font-size: 1.125rem;
    }

    .page-group-types #groupTypeForm > div:first-child,
    .page-group-types #deleteGroupTypeDrawerPanel > div:nth-child(2) {
        padding: 1rem !important;
    }

    .page-group-types #groupTypeDrawerPanel > div:last-child,
    .page-group-types #deleteGroupTypeDrawerPanel > div:last-child {
        padding: 1rem !important;
    }

    .page-group-types #groupTypeDrawerPanel button,
    .page-group-types #deleteGroupTypeDrawerPanel button {
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
    }

    .page-group-types .form-input {
        font-size: 16px; /* iOS zoom önleme */
        padding: 0.625rem 0.875rem;
    }
}

/* === Page: groups (web/groups.php) === */
.page-groups #groupDrawerPanel,
.page-groups #deleteGroupDrawerPanel {
    will-change: transform;
}

.page-groups .groups-stat-active {
    color: #16a34a;
}

.page-groups .groups-stat-inactive {
    color: rgb(148 163 184);
}

.page-groups .groups-count-pill {
    display: inline-block;
}

.page-groups .groups-count-pill--has {
    background: color-mix(in srgb, #22c55e 16%, white);
    color: #15803d;
}

.page-groups .groups-count-pill--empty {
    background: rgb(241 245 249);
    color: rgb(71 85 105);
}

.page-groups .groups-sort-indicator {
    display: inline-block;
    min-width: 1ch;
    text-align: center;
    font-size: 0.75rem;
    color: var(--color-brand-primary);
}

.page-groups .groups-inline-approve-btn {
    padding: 0.25rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25;
    background: color-mix(in srgb, #22c55e 18%, white);
    color: #15803d;
    transition: background-color 0.15s ease;
}

.page-groups .groups-inline-approve-btn:hover {
    background: color-mix(in srgb, #22c55e 30%, white);
}

.page-groups .groups-inline-reject-btn {
    padding: 0.25rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25;
    background: color-mix(in srgb, rgb(245 158 11) 22%, white);
    color: rgb(180 83 9);
    transition: background-color 0.15s ease;
}

.page-groups .groups-inline-reject-btn:hover {
    background: color-mix(in srgb, rgb(245 158 11) 34%, white);
}

@media (max-width: 768px) {
    .page-groups #groupDrawerPanel,
    .page-groups #deleteGroupDrawerPanel {
        max-width: 100% !important;
    }

    .page-groups #groupDrawerPanel > div:first-child,
    .page-groups #deleteGroupDrawerPanel > div:first-child {
        padding: 1rem !important;
    }

    .page-groups #groupDrawerPanel h3,
    .page-groups #deleteGroupDrawerPanel h3 {
        font-size: 1.125rem;
    }

    .page-groups #groupForm > div:first-child,
    .page-groups #deleteGroupDrawerPanel > div:nth-child(2) {
        padding: 1rem !important;
    }

    .page-groups #groupDrawerPanel > div:last-child,
    .page-groups #deleteGroupDrawerPanel > div:last-child {
        padding: 1rem !important;
    }

    .page-groups #groupDrawerPanel button,
    .page-groups #deleteGroupDrawerPanel button {
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
    }

    .page-groups .form-input {
        font-size: 16px; /* iOS zoom önleme */
        padding: 0.625rem 0.875rem;
    }
}

/* === Page: companies (web/companies.php) === */
.page-companies #companyDetailsDrawerPanel {
    will-change: transform;
}

.page-companies .companies-logo-select-btn {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    border-radius: 0.5rem;
    border: 1px solid color-mix(in srgb, var(--color-brand-primary) 20%, transparent);
    background: color-mix(in srgb, var(--color-brand-primary) 10%, white);
    color: var(--color-brand-primary-hover);
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.page-companies .companies-logo-select-btn:hover {
    background: color-mix(in srgb, var(--color-brand-primary) 16%, white);
    border-color: color-mix(in srgb, var(--color-brand-primary) 30%, transparent);
}

@media (max-width: 768px) {
    .page-companies #companyDetailsDrawerPanel {
        max-width: 100% !important;
    }

    .page-companies #companyDetailsDrawerPanel .form-input {
        font-size: 16px; /* iOS zoom önleme */
        padding: 0.625rem 0.875rem;
    }
}

/* === Page: company-office (web/company-office.php) === */
.page-company-office #officeDrawerPanel,
.page-company-office #deleteOfficeDrawerPanel {
    will-change: transform;
}

.page-company-office .office-stat-active {
    color: #16a34a;
}

.page-company-office .office-stat-inactive {
    color: rgb(148 163 184);
}

.page-company-office .office-sort-indicator {
    display: inline-block;
    min-width: 1ch;
    text-align: center;
    font-size: 0.75rem;
    color: var(--color-brand-primary);
}

.page-company-office .office-status-pill--active,
.page-company-office .office-count-pill--has {
    background: color-mix(in srgb, #22c55e 16%, white);
    color: #15803d;
}

.page-company-office .office-status-pill--inactive,
.page-company-office .office-count-pill--empty {
    background: rgb(241 245 249);
    color: rgb(71 85 105);
}

@media (max-width: 768px) {
    .page-company-office #officeDrawerPanel,
    .page-company-office #deleteOfficeDrawerPanel {
        max-width: 100% !important;
    }

    .page-company-office #officeDrawerPanel > div:first-child,
    .page-company-office #deleteOfficeDrawerPanel > div:first-child {
        padding: 1rem !important;
    }

    .page-company-office #officeDrawerPanel h3,
    .page-company-office #deleteOfficeDrawerPanel h3 {
        font-size: 1.125rem;
    }

    .page-company-office #officeForm > div:first-child,
    .page-company-office #deleteOfficeDrawerPanel > div:nth-child(2) {
        padding: 1rem !important;
    }

    .page-company-office #officeDrawerPanel > div:last-child,
    .page-company-office #deleteOfficeDrawerPanel > div:last-child {
        padding: 1rem !important;
    }

    .page-company-office #officeDrawerPanel button,
    .page-company-office #deleteOfficeDrawerPanel button {
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
    }

    .page-company-office .form-input {
        font-size: 16px; /* iOS zoom önleme */
        padding: 0.625rem 0.875rem;
    }
}

/* === Page: titles (web/titles.php) === */
.page-titles #titleDrawerPanel,
.page-titles #deleteTitleDrawerPanel {
    will-change: transform;
}

.page-titles .titles-stat-company {
    color: rgb(67 56 202);
}

.page-titles .titles-sort-indicator {
    display: inline-block;
    min-width: 1ch;
    text-align: center;
    font-size: 0.75rem;
    color: var(--color-brand-primary);
}

.page-titles .titles-row-clickable {
    cursor: pointer;
}

.page-titles .titles-count-pill--has {
    background: color-mix(in srgb, #22c55e 16%, white);
    color: #15803d;
}

.page-titles .titles-count-pill--empty {
    background: rgb(241 245 249);
    color: rgb(71 85 105);
}

.page-titles .titles-inline-approve-btn {
    padding: 0.25rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25;
    background: color-mix(in srgb, #22c55e 18%, white);
    color: #15803d;
    transition: background-color 0.15s ease;
}

.page-titles .titles-inline-approve-btn:hover {
    background: color-mix(in srgb, #22c55e 30%, white);
}

.page-titles .titles-inline-reject-btn {
    padding: 0.25rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25;
    background: color-mix(in srgb, rgb(245 158 11) 22%, white);
    color: rgb(180 83 9);
    transition: background-color 0.15s ease;
}

.page-titles .titles-inline-reject-btn:hover {
    background: color-mix(in srgb, rgb(245 158 11) 34%, white);
}

@media (max-width: 768px) {
    .page-titles #titleDrawerPanel,
    .page-titles #deleteTitleDrawerPanel {
        max-width: 100% !important;
    }

    .page-titles #titleDrawerPanel > div:first-child,
    .page-titles #deleteTitleDrawerPanel > div:first-child {
        padding: 1rem !important;
    }

    .page-titles #titleDrawerPanel h3,
    .page-titles #deleteTitleDrawerPanel h3 {
        font-size: 1.125rem;
    }

    .page-titles #titleForm > div:first-child,
    .page-titles #deleteTitleDrawerPanel > div:nth-child(2) {
        padding: 1rem !important;
    }

    .page-titles #titleDrawerPanel > div:last-child,
    .page-titles #deleteTitleDrawerPanel > div:last-child {
        padding: 1rem !important;
    }

    .page-titles #titleDrawerPanel button,
    .page-titles #deleteTitleDrawerPanel button {
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
    }

    .page-titles .form-input {
        font-size: 16px; /* iOS zoom önleme */
        padding: 0.625rem 0.875rem;
    }
}

/* === Page: module-yan-hak-bakiye-kur-yonetimi (web/module-yan-hak-bakiye-kur-yonetimi.php) === */
.page-module-yan-hak-bakiye-kur-yonetimi #currencyRateDrawerPanel,
.page-module-yan-hak-bakiye-kur-yonetimi #currencyRateDeleteDrawerPanel {
    will-change: transform;
}

@media (max-width: 768px) {
    .page-module-yan-hak-bakiye-kur-yonetimi #currencyRateDrawerPanel,
    .page-module-yan-hak-bakiye-kur-yonetimi #currencyRateDeleteDrawerPanel {
        max-width: 100% !important;
    }
}

/* === Page: file-categories-management (web/file-categories-management.php) === */
.page-file-categories-management .file-categories-list-icon {
    padding: 0.5rem;
    border-radius: 0.5rem;
    flex-shrink: 0;
    background: color-mix(in srgb, var(--color-brand-primary) 12%, white);
    color: var(--color-brand-primary);
}

.page-file-categories-management .file-categories-version-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    padding: 0.125rem 0.5rem;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    border: 1px solid color-mix(in srgb, var(--color-brand-primary) 22%, white);
    background: color-mix(in srgb, var(--color-brand-primary) 10%, white);
    color: color-mix(in srgb, var(--color-brand-primary) 82%, black);
}

.page-file-categories-management #categoryModalPanel,
.page-file-categories-management #versionModalPanel,
.page-file-categories-management #deleteConfirmDrawerPanel {
    will-change: transform;
}

@media (max-width: 768px) {
    .page-file-categories-management #categoryModalPanel,
    .page-file-categories-management #versionModalPanel,
    .page-file-categories-management #deleteConfirmDrawerPanel {
        max-width: 100% !important;
    }
}

/* === Page: isten-ayrilis-nedenleri (web/isten-ayrilis-nedenleri.php) === */
.page-isten-ayrilis-nedenleri .sort-indicator {
    font-size: 0.75rem;
    color: var(--color-brand-primary);
}

/* === Page: toplu-islemler (web/toplu-islemler.php) === */
.page-toplu-islemler .toplu-wizard-badge {
    color: var(--color-brand-primary);
    background: color-mix(in srgb, var(--color-brand-primary) 10%, white);
}

.page-toplu-islemler .wizard-mini-progress {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 1rem;
}

.page-toplu-islemler .wizard-mini-bar {
    flex: 1;
    height: 12px;
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.page-toplu-islemler .wizard-mini-bar.completed {
    background: rgb(34 197 94);
}

.page-toplu-islemler .wizard-mini-bar.active {
    background: var(--color-brand-primary);
}

.page-toplu-islemler .wizard-mini-bar.pending {
    background: rgb(203 213 225);
}

.page-toplu-islemler .wizard-step-content {
    display: none;
}

.page-toplu-islemler .wizard-step-content.active {
    display: block;
}

.page-toplu-islemler .wizard-action-card {
    cursor: pointer;
    transition: all 0.2s;
    border: 2px solid rgb(226 232 240);
}

.page-toplu-islemler .wizard-action-card:hover {
    border-color: rgb(148 163 184);
    background: rgb(248 250 252);
}

.page-toplu-islemler .wizard-action-card.selected {
    border-color: var(--color-brand-primary);
    background: color-mix(in srgb, var(--color-brand-primary) 12%, white);
}

.page-toplu-islemler .toplu-action-icon {
    background: color-mix(in srgb, var(--color-brand-primary) 14%, white);
    color: var(--color-brand-primary);
}

.page-isten-ayrilis-nedenleri .isten-ayrilis-type-pill,
.page-isten-ayrilis-nedenleri .isten-ayrilis-user-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.2;
}

.page-isten-ayrilis-nedenleri .isten-ayrilis-type-pill--system {
    background: color-mix(in srgb, #6366f1 16%, white);
    color: color-mix(in srgb, #4338ca 78%, black);
}

.page-isten-ayrilis-nedenleri .isten-ayrilis-type-pill--company {
    background: color-mix(in srgb, #64748b 14%, white);
    color: #475569;
}

.page-isten-ayrilis-nedenleri .isten-ayrilis-user-pill--has {
    background: color-mix(in srgb, #10b981 18%, white);
    color: #047857;
}

.page-isten-ayrilis-nedenleri .isten-ayrilis-user-pill--empty {
    background: color-mix(in srgb, #94a3b8 16%, white);
    color: #475569;
}

@media (max-width: 640px) {
    .page-isten-ayrilis-nedenleri #separationTypeDrawerPanel,
    .page-isten-ayrilis-nedenleri #deleteSeparationTypeDrawerPanel {
        max-width: 100% !important;
    }
}

/* === Page: module-calendar-yonetimi (web/module-calendar-yonetimi.php) === */
.page-module-calendar-yonetimi {
    /* Drawer animations are controlled by aria-hidden on drawer root */
}

#typeDrawer[aria-hidden="false"] #typeDrawerPanel {
    transform: translateX(0) !important;
}
#typeDrawer:not(.hidden) #typeDrawerPanel {
    transform: translateX(0) !important;
}
#typeDrawer:not([aria-hidden="false"]) #typeDrawerPanel {
    transform: translateX(100%) !important;
}

#dateDrawer[aria-hidden="false"] #dateDrawerPanel {
    transform: translateX(0) !important;
}
#dateDrawer:not(.hidden) #dateDrawerPanel {
    transform: translateX(0) !important;
}
#dateDrawer:not([aria-hidden="false"]) #dateDrawerPanel {
    transform: translateX(100%) !important;
}

#permissionDrawer[aria-hidden="false"] #permissionDrawerPanel {
    transform: translateX(0) !important;
}
#permissionDrawer:not(.hidden) #permissionDrawerPanel {
    transform: translateX(0) !important;
}
#permissionDrawer:not([aria-hidden="false"]) #permissionDrawerPanel {
    transform: translateX(100%) !important;
}

#deletePermissionDrawer[aria-hidden="false"] #deletePermissionDrawerPanel {
    transform: translateX(0) !important;
}
#deletePermissionDrawer:not(.hidden) #deletePermissionDrawerPanel {
    transform: translateX(0) !important;
}
#deletePermissionDrawer:not([aria-hidden="false"]) #deletePermissionDrawerPanel {
    transform: translateX(100%) !important;
}

#deleteDateDrawer[aria-hidden="false"] #deleteDateDrawerPanel {
    transform: translateX(0) !important;
}
#deleteDateDrawer:not(.hidden) #deleteDateDrawerPanel {
    transform: translateX(0) !important;
}
#deleteDateDrawer:not([aria-hidden="false"]) #deleteDateDrawerPanel {
    transform: translateX(100%) !important;
}

#deleteTypeDrawer[aria-hidden="false"] #deleteTypeDrawerPanel {
    transform: translateX(0) !important;
}
#deleteTypeDrawer:not(.hidden) #deleteTypeDrawerPanel {
    transform: translateX(0) !important;
}
#deleteTypeDrawer:not([aria-hidden="false"]) #deleteTypeDrawerPanel {
    transform: translateX(100%) !important;
}

.page-module-calendar-yonetimi .form-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid rgb(203, 213, 225);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
    transition: all 0.2s;
}

.page-module-calendar-yonetimi .form-input:focus {
    border-color: var(--color-brand-primary) !important;
    box-shadow: 0 0 0 2px var(--color-brand-focus-ring) !important;
    outline: none;
}

.page-module-calendar-yonetimi .permissions-table-container {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
}

.page-module-calendar-yonetimi .permissions-table {
    border-collapse: collapse;
}

.page-module-calendar-yonetimi .permissions-table th,
.page-module-calendar-yonetimi .permissions-table td {
    border: 1px solid rgb(203, 213, 225);
}

.page-module-calendar-yonetimi .permissions-table th {
    background-color: rgb(241, 245, 249);
    font-weight: 600;
    font-size: 0.75rem;
    padding: 0.75rem;
}

.page-module-calendar-yonetimi .permissions-table td {
    padding: 0.75rem;
}

.page-module-calendar-yonetimi .permissions-table tbody tr:hover {
    background-color: rgb(248, 250, 252);
}

@media (max-width: 640px) {
    .page-module-calendar-yonetimi #typeDrawerPanel,
    .page-module-calendar-yonetimi #dateDrawerPanel,
    .page-module-calendar-yonetimi #permissionDrawerPanel,
    .page-module-calendar-yonetimi #deletePermissionDrawerPanel,
    .page-module-calendar-yonetimi #deleteDateDrawerPanel,
    .page-module-calendar-yonetimi #deleteTypeDrawerPanel {
        max-width: 100%;
    }

    /* Tablo hücrelerini mobilde daha küçük yap */
    .page-module-calendar-yonetimi .permissions-table th,
    .page-module-calendar-yonetimi .permissions-table td {
        padding: 0.5rem !important;
        font-size: 0.75rem;
    }

    /* Tablo başlıklarını mobilde daha kompakt yap */
    .page-module-calendar-yonetimi .permissions-table th {
        font-size: 0.7rem;
        padding: 0.4rem 0.3rem !important;
    }

    .page-module-calendar-yonetimi .permissions-table th svg {
        width: 0.875rem;
        height: 0.875rem;
    }

    .page-module-calendar-yonetimi .permissions-table th span {
        font-size: 0.65rem;
    }
}

/* === Page: tatil-takvimi-yonetimi (web/tatil-takvimi-yonetimi.php) === */
#calendarDrawer[aria-hidden="false"] #calendarDrawerPanel {
    transform: translateX(0) !important;
}
#calendarDrawer:not([aria-hidden="false"]) #calendarDrawerPanel {
    transform: translateX(100%) !important;
}

#dayDrawer[aria-hidden="false"] #dayDrawerPanel {
    transform: translateX(0) !important;
}
#dayDrawer:not([aria-hidden="false"]) #dayDrawerPanel {
    transform: translateX(100%) !important;
}

#deleteCalendarDrawer[aria-hidden="false"] #deleteCalendarDrawerPanel {
    transform: translateX(0) !important;
}
#deleteCalendarDrawer:not([aria-hidden="false"]) #deleteCalendarDrawerPanel {
    transform: translateX(100%) !important;
}

#addTemplateCalendarDrawer[aria-hidden="false"] #addTemplateCalendarDrawerPanel {
    transform: translateX(0) !important;
}
#addTemplateCalendarDrawer:not([aria-hidden="false"]) #addTemplateCalendarDrawerPanel {
    transform: translateX(100%) !important;
}

#removeTemplateCalendarDrawer[aria-hidden="false"] #removeTemplateCalendarDrawerPanel {
    transform: translateX(0) !important;
}
#removeTemplateCalendarDrawer:not([aria-hidden="false"]) #removeTemplateCalendarDrawerPanel {
    transform: translateX(100%) !important;
}

.page-tatil-takvimi-yonetimi .form-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid rgb(203, 213, 225);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
    transition: all 0.2s;
}

.page-tatil-takvimi-yonetimi .form-input:focus {
    border-color: var(--color-brand-primary) !important;
    box-shadow: 0 0 0 2px var(--color-brand-focus-ring) !important;
    outline: none;
}

.page-tatil-takvimi-yonetimi .minimal-toggle {
    display: flex;
    align-items: center;
    gap: 15px;
}

.page-tatil-takvimi-yonetimi .minimal-toggle input {
    display: none;
}

.page-tatil-takvimi-yonetimi .minimal-switch {
    width: 60px;
    height: 30px;
    background: #e2e8f0;
    border-radius: 30px;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
}

.page-tatil-takvimi-yonetimi .minimal-switch::after {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    background: white;
    border-radius: 50%;
    top: 3px;
    left: 3px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.page-tatil-takvimi-yonetimi .minimal-toggle input:checked + .minimal-switch {
    background: var(--color-brand-primary);
}

.page-tatil-takvimi-yonetimi .minimal-toggle input:checked + .minimal-switch::after {
    transform: translateX(30px);
}

.page-tatil-takvimi-yonetimi .button-group {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    width: 100%;
}

.page-tatil-takvimi-yonetimi .button-group button,
.page-tatil-takvimi-yonetimi .button-group-item {
    flex: 1;
    min-width: 0;
    padding: 0.5rem 0.75rem;
    border: 1px solid rgb(203, 213, 225);
    border-radius: 0.5rem;
    background: rgb(241, 245, 249);
    color: rgb(51, 65, 85);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.page-tatil-takvimi-yonetimi .button-group button:hover,
.page-tatil-takvimi-yonetimi .button-group-item:hover {
    background: rgb(226, 232, 240);
    border-color: rgb(148, 163, 184);
}

.page-tatil-takvimi-yonetimi .button-group button.active,
.page-tatil-takvimi-yonetimi .button-group-item.active {
    background: var(--color-brand-primary);
    color: white;
    border-color: var(--color-brand-primary);
}

.page-tatil-takvimi-yonetimi .tatil-takvimi-icon-plus.hidden,
.page-tatil-takvimi-yonetimi .tatil-takvimi-icon-minus.hidden {
    display: none !important;
}

@media (max-width: 768px) {
    #calendarDrawerPanel,
    #dayDrawerPanel {
        max-width: 100%;
    }
}

/* === Page: module-yan-hak-esnek-yan-hak-yonetimi (web/module-yan-hak-esnek-yan-hak-yonetimi.php) === */

/* Drawer Animations (drawer transform handled by aria-hidden on drawer root) */
#yanhakDrawer[aria-hidden="false"] #yanhakDrawerPanel {
    transform: translateX(0) !important;
}
#yanhakDrawer:not([aria-hidden="false"]) #yanhakDrawerPanel {
    transform: translateX(100%) !important;
}

#yanhakErrorDrawer[aria-hidden="false"] #yanhakErrorDrawerPanel {
    transform: translateX(0) !important;
}
#yanhakErrorDrawer:not([aria-hidden="false"]) #yanhakErrorDrawerPanel {
    transform: translateX(100%) !important;
}

#deletePeriodDrawer[aria-hidden="false"] #deletePeriodDrawerPanel {
    transform: translateX(0) !important;
}
#deletePeriodDrawer:not([aria-hidden="false"]) #deletePeriodDrawerPanel {
    transform: translateX(100%) !important;
}

#periodDrawer[aria-hidden="false"] #periodDrawerPanel {
    transform: translateX(0) !important;
}
#periodDrawer:not([aria-hidden="false"]) #periodDrawerPanel {
    transform: translateX(100%) !important;
}

#deleteYanhakDrawer[aria-hidden="false"] #deleteYanhakDrawerPanel {
    transform: translateX(0) !important;
}
#deleteYanhakDrawer:not([aria-hidden="false"]) #deleteYanhakDrawerPanel {
    transform: translateX(100%) !important;
}

/* Drawer input focus (override global .form-input:focus with brand ring) */
#yanhakDrawer .form-input:focus,
#periodDrawer .form-input:focus,
#deletePeriodDrawer .form-input:focus,
#deleteYanhakDrawer .form-input:focus {
    border-color: var(--color-brand-primary) !important;
    box-shadow: 0 0 0 2px var(--color-brand-focus-ring) !important;
    outline: none !important;
}

/* List + detail: görsel hücresi sabit boyut */
.page-module-yan-hak-esnek-yan-hak-yonetimi .eyy-yanhak-thumb {
    width: 3rem;
    height: 3rem;
    min-width: 3rem;
    min-height: 3rem;
    flex-shrink: 0;
    border-radius: 0.5rem;
    border: 1px solid rgb(226, 232, 240);
    background: rgb(248, 250, 252);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}
.page-module-yan-hak-esnek-yan-hak-yonetimi .eyy-yanhak-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 768px) {
    #yanhakDrawerPanel {
        max-width: 100% !important;
    }

    .page-module-yan-hak-esnek-yan-hak-yonetimi .grid.md\:grid-cols-3 {
        grid-template-columns: 1fr;
    }

    #yanhakStatusContainer {
        width: 100%;
    }

    #yanhakDrawer .flex.justify-end.gap-3 {
        flex-direction: column;
    }

    #yanhakDrawer .flex.justify-end.gap-3 button {
        width: 100%;
    }
}

/* === Page: module-yan-hak-standart-yan-hak-yonetimi (web/module-yan-hak-standart-yan-hak-yonetimi.php) === */
#sabitYanhakDrawer .drawer-backdrop,
#matchingDrawer .drawer-backdrop,
#deleteDrawer .drawer-backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

#sabitYanhakDrawer[aria-hidden="false"] .drawer-backdrop,
#matchingDrawer[aria-hidden="false"] .drawer-backdrop,
#deleteDrawer[aria-hidden="false"] .drawer-backdrop {
    opacity: 1;
}

#sabitYanhakDrawer .drawer-panel,
#matchingDrawer .drawer-panel,
#deleteDrawer .drawer-panel {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 100%;
    max-width: 28rem;
    background-color: white;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
}

#sabitYanhakDrawer[aria-hidden="false"] .drawer-panel,
#matchingDrawer[aria-hidden="false"] .drawer-panel,
#deleteDrawer[aria-hidden="false"] .drawer-panel {
    transform: translateX(0);
}

@media (max-width: 640px) {
    #sabitYanhakDrawer .drawer-panel,
    #matchingDrawer .drawer-panel,
    #deleteDrawer .drawer-panel {
        max-width: 100%;
    }
}

/* Accordion transitions (page-scoped) */
#page-module-yan-hak-standart-yan-hak-yonetimi .accordion-content {
    transition: all 0.3s ease-in-out;
}

/* +/- accordion (page-scoped) */
#page-module-yan-hak-standart-yan-hak-yonetimi .accordion-detail-toggle {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.375rem;
    border: 1px solid rgb(226, 232, 240);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    background: rgb(248, 250, 252);
    color: rgb(100, 116, 139);
}

#page-module-yan-hak-standart-yan-hak-yonetimi .accordion-detail-toggle:hover {
    border-color: rgb(148, 163, 184);
    background: rgb(241, 245, 249);
    color: rgb(71, 85, 105);
}

#page-module-yan-hak-standart-yan-hak-yonetimi .accordion-detail-toggle.accordion-open {
    border-color: rgb(148, 163, 184);
    background: rgb(226, 232, 240);
    color: rgb(51, 65, 85);
}

#page-module-yan-hak-standart-yan-hak-yonetimi .standart-yan-hak-icon-plus.hidden,
#page-module-yan-hak-standart-yan-hak-yonetimi .standart-yan-hak-icon-minus.hidden {
    display: none !important;
}

/* Brand focus ring for page inputs */
#page-module-yan-hak-standart-yan-hak-yonetimi .form-input:focus {
    border-color: var(--color-brand-primary) !important;
    box-shadow: 0 0 0 2px var(--color-brand-focus-ring) !important;
    outline: none !important;
}

/* Page: module-employee-voice (web/module-employee-voice.php) - Mobile table UX */
@media (max-width: 640px) {
    #page-calisanin-sesi .overflow-x-auto {
        overflow: visible !important;
    }
    #page-calisanin-sesi table {
        width: 100% !important;
        table-layout: fixed;
    }
    #page-calisanin-sesi thead {
        display: none !important;
    }
    #page-calisanin-sesi tbody tr {
        display: block !important;
        width: 100% !important;
        border: 1px solid rgb(226 232 240);
        border-radius: 0.75rem;
        background: #ffffff;
        margin-bottom: 0.75rem;
        overflow: hidden;
    }
    #page-calisanin-sesi tbody td {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        width: 100%;
        padding: 0.6rem 0.75rem !important;
        border-top: 1px solid rgb(241 245 249);
        border-right: 0 !important;
        border-left: 0 !important;
        min-width: 0 !important;
        overflow-wrap: anywhere;
        word-break: break-word;
        white-space: normal;
    }
    #page-calisanin-sesi tbody td:first-child {
        border-top: 0 !important;
    }
    #page-calisanin-sesi tbody td::before {
        content: attr(data-label);
        color: rgb(100 116 139);
        font-weight: 700;
        font-size: 0.75rem;
        flex: 0 0 auto;
    }
}