/**
 * Saloni PowerBI Portal - Main Styles
 * Component-specific styles for layout and pages
 */

/* ==================== LAYOUT ==================== */

/* Sidebar - Light mode (default) */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-width);
    height: 100vh;
    background-color: #f8f9fa;
    color: var(--color-text);
    z-index: var(--z-sidebar);
    transition: width var(--transition-normal);
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--color-border);
}

.sidebar.collapsed {
    width: var(--sidebar-collapsed-width);
}

.sidebar.collapsed .nav-text,
.sidebar.collapsed .brand-text,
.sidebar.collapsed .nav-heading {
    opacity: 0;
    visibility: hidden;
}

/* Collapsed sidebar is 72px wide — header padding leaves ~40px for the logo,
 * so we shrink it from the expanded 44px hero size down to a compact 28px. */
.sidebar.collapsed .brand-logo {
    height: 28px;
    max-width: 40px;
}

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4);
    border-bottom: 1px solid var(--color-border);
    min-height: var(--header-height);
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--color-text);
    text-decoration: none;
}

.brand-icon {
    font-size: 28px;
    color: var(--color-accent);
}

.brand-logo {
    /* Logo wordmark zaten "saloni" yazıyor — yanına metin koymuyoruz, onun
     * yerine logoyu büyütüp tek başına marka kimliği olmasını sağlıyoruz. */
    height: 44px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
}

.brand-text {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    white-space: nowrap;
    transition: opacity var(--transition-normal);
    color: var(--color-text);
}

.sidebar-toggle {
    padding: var(--space-2);
    color: var(--color-text-secondary);
    opacity: 0.7;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.sidebar-toggle:hover {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.05);
}

.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-4) 0;
}

.nav-list {
    list-style: none;
}

.nav-item {
    margin: var(--space-1) var(--space-2);
}

.nav-link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    color: #333333;
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.nav-link:hover {
    color: #000000;
    background-color: rgba(0, 0, 0, 0.05);
}

.nav-link.active {
    color: var(--color-white);
    background-color: var(--color-primary);
}

.nav-link .material-icons-outlined {
    font-size: 20px;
    flex-shrink: 0;
}

.nav-text {
    transition: opacity var(--transition-normal);
}

.nav-divider {
    height: 1px;
    background-color: var(--color-border);
    margin: var(--space-4) var(--space-4);
}

.nav-heading {
    padding: var(--space-2) var(--space-5);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: #666666;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    white-space: nowrap;
    transition: opacity var(--transition-normal);
}

/* Main Wrapper */
.main-wrapper {
    margin-left: var(--sidebar-width);
    min-height: 100vh;
    transition: margin-left var(--transition-normal);
}

.sidebar.collapsed~.main-wrapper {
    margin-left: var(--sidebar-collapsed-width);
}

/* Top Header */
.top-header {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-height);
    padding: 0 var(--space-6);
    background-color: var(--color-white);
    border-bottom: 1px solid var(--color-border);
    /* Header must float above the report viewer so the theme toggle,
     * search box, notification bell and user dropdown stay clickable
     * while reports are open. */
    z-index: var(--z-fixed);
}

.header-left {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.mobile-menu-btn {
    display: none;
    padding: var(--space-2);
    color: var(--color-text);
    border-radius: var(--radius-md);
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.breadcrumb a {
    color: var(--color-text-secondary);
}

.breadcrumb a:hover {
    color: var(--color-accent);
}

.breadcrumb-separator {
    color: var(--color-text-muted);
}

.header-right {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

/* User Dropdown */
.user-dropdown {
    position: relative;
}

.user-btn {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    transition: background-color var(--transition-fast);
}

.user-btn:hover {
    background-color: var(--color-bg);
}

.user-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background-color: var(--color-accent-light);
    border-radius: var(--radius-full);
    color: var(--color-primary);
}

.user-name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
}

.dropdown-arrow {
    font-size: 18px;
    color: var(--color-text-secondary);
    transition: transform var(--transition-fast);
}

.user-dropdown.open .dropdown-arrow {
    transform: rotate(180deg);
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 200px;
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: var(--z-dropdown);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: all var(--transition-fast);
}

.user-dropdown.open .dropdown-menu,
.dropdown-menu.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(4px);
}

.dropdown-header {
    padding: var(--space-3) var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.dropdown-divider {
    height: 1px;
    background-color: var(--color-border);
    margin: var(--space-2) 0;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    color: var(--color-text);
    text-decoration: none;
    transition: background-color var(--transition-fast);
}

.dropdown-item:hover {
    background-color: var(--color-bg);
}

.dropdown-item .material-icons-outlined {
    font-size: 18px;
    color: var(--color-text-secondary);
}

/* Main Content */
.main-content {
    padding: var(--space-6);
    min-height: calc(100vh - var(--header-height));
}

/* Flash Messages */
.flash-messages {
    margin-bottom: var(--space-4);
}

/* Guest Content (Login) */
.guest-content {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
}

.guest-content .flash-messages {
    position: fixed;
    top: var(--space-4);
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 400px;
    z-index: var(--z-toast);
}

/* ==================== LOGIN PAGE ==================== */
.login-container {
    width: 100%;
    max-width: 400px;
}

.login-card {
    background-color: var(--color-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
}

.login-header {
    padding: var(--space-8) var(--space-6) var(--space-6);
    text-align: center;
    background-color: var(--color-bg);
}

.login-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.login-logo .material-icons-outlined {
    font-size: 40px;
    color: var(--color-accent);
}

.login-logo-img {
    height: 60px;
    width: auto;
    object-fit: contain;
}

.login-logo-text {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
}

.login-title {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-normal);
}

.login-body {
    padding: var(--space-6);
}

.login-form .form-group:last-of-type {
    margin-bottom: var(--space-6);
}

.login-footer {
    padding: var(--space-4) var(--space-6);
    text-align: center;
    background-color: var(--color-bg);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* ==================== PREMIUM LOGIN (NEW) ====================
 * Two-pane split layout: brand story on the left, form on the right.
 * On phones the brand panel collapses; only the mobile-brand strip stays.
 */
body.login-page .guest-content {
    padding: 0;
    background: var(--color-bg);
    min-height: 100vh;
    display: block;
}

body.login-page .guest-content .flash-messages {
    /* Keep flash messages visible above the split layout */
    position: fixed;
    top: var(--space-4);
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-toast);
}

.login-shell {
    display: grid;
    /* Tighter form column — was 5fr/4fr which left the form floating in a huge
     * empty panel on wide displays. Now: brand panel grows, form panel is a
     * compact 460–560px column so the form sits intentionally next to the brand
     * rather than lost in whitespace. */
    grid-template-columns: minmax(380px, 1fr) minmax(460px, 560px);
    min-height: 100vh;
    background: var(--color-white);
}

.login-brand-panel {
    position: relative;
    overflow: hidden;
    color: var(--color-text);
    /* Warm cream — saloni.furniture beyaz-krem hissi */
    background: linear-gradient(135deg, #fdfcf9 0%, #f7f4ec 60%, #efe9da 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--space-12) var(--space-8);
    border-right: 1px solid var(--color-border);
}

.login-brand-pattern {
    position: absolute;
    inset: 0;
    /* Very subtle copper warmth on cream — no aggressive spots */
    background:
        radial-gradient(circle at 20% 20%, rgba(168, 134, 42, 0.06), transparent 50%),
        radial-gradient(circle at 80% 75%, rgba(168, 134, 42, 0.04), transparent 55%),
        repeating-linear-gradient(45deg, transparent, transparent 24px,
            rgba(168, 134, 42, 0.015) 24px, rgba(168, 134, 42, 0.015) 25px);
    pointer-events: none;
}

/* Soft warm halo behind the logo — adds depth so the panel isn't flat */
.login-brand-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 620px;
    height: 620px;
    transform: translate(-50%, -55%);
    background: radial-gradient(circle,
            rgba(168, 134, 42, 0.10) 0%,
            rgba(168, 134, 42, 0.04) 35%,
            transparent 65%);
    pointer-events: none;
    z-index: 0;
    filter: blur(8px);
}

.login-brand-content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
}

.login-brand-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
}

.login-brand-logo img {
    /* Large, hero-sized — the logo is the only thing on the brand panel */
    max-height: 200px;
    max-width: 480px;
    width: auto;
    object-fit: contain;
    /* Soft shadow tuned for the cream backdrop (not the old dark panel) */
    filter: drop-shadow(0 8px 28px rgba(0, 0, 0, 0.08));
}

.login-brand-divider {
    width: 56px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(168, 134, 42, 0.85), transparent);
    border-radius: 2px;
    margin-top: var(--space-3);
}

.login-brand-tagline {
    margin: 0;
    font-size: 1.25rem;
    font-weight: var(--font-weight-semibold);
    color: #1a1a1a;
    letter-spacing: -0.005em;
    line-height: 1.3;
}

.login-brand-eyebrow {
    margin: 0;
    font-size: 0.72rem;
    font-weight: var(--font-weight-semibold);
    color: rgba(168, 134, 42, 0.95);
    letter-spacing: 0.32em;
    text-transform: uppercase;
}

.login-brand-wordmark {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.02em;
    color: #fff;
}

.login-brand-title {
    font-size: 2.25rem;
    line-height: 1.15;
    font-weight: var(--font-weight-bold);
    margin: 0 0 var(--space-3);
    color: #fff;
    letter-spacing: -0.01em;
}

.login-brand-subtitle {
    font-size: var(--font-size-base);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.78);
    margin: 0 0 var(--space-6);
    max-width: 420px;
}

.login-brand-features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-3);
}

.login-brand-features li {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: rgba(255, 255, 255, 0.92);
    font-size: var(--font-size-sm);
}

.login-brand-features .material-icons-outlined {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.88);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.login-brand-footer {
    position: absolute;
    bottom: var(--space-6);
    left: 0;
    right: 0;
    text-align: center;
    z-index: 1;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.login-form-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-10) var(--space-8);
    /* Soft warm backdrop so the white form card sits on a tinted surface
     * — gives the card definition without harsh contrast */
    background: linear-gradient(135deg, #fbfaf6 0%, #f3eedf 100%);
}

.login-form-container {
    width: 100%;
    max-width: 400px;
    /* Desktop card treatment — matches the mobile rounded/shadow style the
     * user approved. Mobile breakpoint overrides padding/shadow as needed. */
    background: var(--color-white);
    padding: var(--space-8);
    border-radius: var(--radius-xl);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.04),
        0 8px 24px rgba(0, 0, 0, 0.06),
        0 24px 60px rgba(26, 26, 26, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.login-mobile-brand {
    display: none;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-6);
}

.login-mobile-brand img {
    max-height: 110px;
    max-width: 280px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.06));
}

.login-greeting {
    font-size: 1.75rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    margin: 0 0 var(--space-1);
    letter-spacing: -0.01em;
}

.login-greeting-sub {
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-6);
    font-size: var(--font-size-sm);
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.login-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.login-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

.login-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.login-input-icon {
    position: absolute;
    left: var(--space-3);
    color: var(--color-text-muted);
    font-size: 20px;
    pointer-events: none;
}

.login-input {
    width: 100%;
    padding: 12px var(--space-3) 12px calc(var(--space-3) + 26px);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-white);
    font-family: inherit;
    font-size: var(--font-size-base);
    color: var(--color-text);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.login-input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(168, 134, 42, 0.15);
}

.login-input.is-invalid {
    border-color: #d9534f;
}

.login-password-toggle {
    position: absolute;
    right: var(--space-2);
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color var(--transition-fast);
}

.login-password-toggle:hover {
    color: var(--color-accent);
}

.login-password-toggle .material-icons-outlined {
    font-size: 18px;
}

.login-field-error {
    color: #d9534f;
    font-size: var(--font-size-xs);
    margin-top: 2px;
}

.login-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-2);
}

.login-check {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-text);
    cursor: pointer;
}

.login-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--color-accent);
}

.login-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 14px var(--space-5);
    /* Premium: solid charcoal, accent only on hover ring */
    background: #1a1a1a;
    color: #fff;
    border: 1px solid #1a1a1a;
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.login-submit:hover {
    background: #000;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-light);
    transform: translateY(-1px);
}

.login-submit:active {
    transform: translateY(0);
}

.login-submit .material-icons-outlined {
    font-size: 18px;
    transition: transform var(--transition-fast);
}

.login-submit:hover .material-icons-outlined {
    transform: translateX(2px);
}

.login-footer-line {
    margin-top: var(--space-6);
    text-align: center;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

@media (max-width: 900px) {
    .login-shell {
        grid-template-columns: 1fr;
    }

    .login-brand-panel {
        display: none;
    }

    .login-mobile-brand {
        display: flex;
    }

    .login-form-panel {
        padding: var(--space-6);
        /* Match the new cream brand panel — keeps mobile feel premium */
        background: linear-gradient(135deg, #fdfcf9 0%, #f5f0e0 100%);
    }

    .login-form-container {
        background: var(--color-white);
        padding: var(--space-6);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-lg);
        border: 1px solid var(--color-border);
    }
}

/* The login page is the brand surface — it stays cream/light regardless of
 * the user's dark-mode preference. Otherwise a dark logo on a dark page is
 * invisible (mobile especially), and login pages shouldn't reflect personal
 * UI prefs anyway. All inputs/text use explicit colors so they don't pick
 * up dark-mode tokens. */
body.login-page,
[data-theme="dark"] body.login-page {
    background: #ffffff;
}

[data-theme="dark"] body.login-page .guest-content {
    background: #ffffff;
}

[data-theme="dark"] .login-shell {
    background: #ffffff;
}

[data-theme="dark"] .login-form-panel {
    background: #ffffff;
}

[data-theme="dark"] .login-form-container {
    background: #ffffff;
    box-shadow: var(--shadow-lg);
}

[data-theme="dark"] .login-greeting,
[data-theme="dark"] .login-label,
[data-theme="dark"] .login-check span {
    color: #1a1a1a;
}

[data-theme="dark"] .login-greeting-sub,
[data-theme="dark"] .login-footer-line,
[data-theme="dark"] .login-brand-footer {
    color: #5a5a5a;
}

[data-theme="dark"] .login-input {
    background: #ffffff;
    color: #1a1a1a;
    border-color: #e5e2dc;
}

[data-theme="dark"] .login-input::placeholder {
    color: #9a9a9a;
}

[data-theme="dark"] .login-input-icon,
[data-theme="dark"] .login-password-toggle {
    color: #9a9a9a;
}

[data-theme="dark"] .login-submit {
    background: #1a1a1a;
    color: #ffffff;
    border-color: #1a1a1a;
}

/* ==================== MENU PAGE ==================== */
.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-5);
}

.category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-8) var(--space-6);
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    text-align: center;
    transition: all var(--transition-normal);
    border: 1px solid transparent;
}

.category-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
    border-color: var(--color-accent);
}

.category-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    /* varsayılan tile — kategori .tone-* ile renklenir */
    background: linear-gradient(135deg, #475569, #1e293b);
    box-shadow: 0 6px 16px rgba(30, 41, 59, 0.28);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-4);
    transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.28s ease;
}

.category-icon .material-icons,
.category-icon .material-icons-outlined {
    font-size: 34px;
    color: #fff;
}

.category-card:hover .category-icon {
    transform: scale(1.06);
}

.category-card:hover .category-icon .material-icons {
    animation: tilePop 0.45s ease;
}

/* Recents / Favoriler şeridi — renkli mini kapak (rapor ikonunun küçük hâli) */
.recents-card-icon {
    background: transparent;
}

.recents-card-icon .report-tile {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    box-shadow: none;
}

.recents-card-icon .report-tile .material-icons {
    font-size: 22px;
}

.category-name {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

.category-count {
    margin-top: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* ==================== REPORTS PAGE ==================== */
.report-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-5);
}

.report-card {
    display: flex;
    flex-direction: column;
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    overflow: hidden;
    transition: all var(--transition-normal);
    border: 1px solid transparent;
}

.report-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
    border-color: var(--color-accent);
}

.report-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6) var(--space-6) var(--space-2);
    background: transparent;
}

.report-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, #3d4a5e, #232c3a);
    box-shadow: 0 6px 16px rgba(20, 30, 48, 0.22);
    transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.28s ease;
}

.report-card-icon .report-tile {
    width: 88px;
    height: 88px;
    border-radius: 22px;
}

.report-tile .material-icons {
    font-size: 56px;
    line-height: 1;
}

/* Renk tonları — rapor kartı + recents şeridi (.report-tile) ve kategori
   kartı (.category-icon) için ortak. Beyaz dolu ikon. */
.report-tile.tone-emerald, .category-icon.tone-emerald, .admin-card-icon.tone-emerald { background: linear-gradient(135deg, #10b981, #047857); box-shadow: 0 6px 16px rgba(4, 120, 87, 0.32); }
.report-tile.tone-blue,    .category-icon.tone-blue,    .admin-card-icon.tone-blue    { background: linear-gradient(135deg, #3b82f6, #1d4ed8); box-shadow: 0 6px 16px rgba(29, 78, 216, 0.32); }
.report-tile.tone-teal,    .category-icon.tone-teal,    .admin-card-icon.tone-teal    { background: linear-gradient(135deg, #14b8a6, #0f766e); box-shadow: 0 6px 16px rgba(15, 118, 110, 0.32); }
.report-tile.tone-indigo,  .category-icon.tone-indigo,  .admin-card-icon.tone-indigo  { background: linear-gradient(135deg, #6366f1, #4338ca); box-shadow: 0 6px 16px rgba(67, 56, 202, 0.32); }
.report-tile.tone-purple,  .category-icon.tone-purple,  .admin-card-icon.tone-purple  { background: linear-gradient(135deg, #a855f7, #7e22ce); box-shadow: 0 6px 16px rgba(126, 34, 206, 0.32); }
.report-tile.tone-amber,   .category-icon.tone-amber,   .admin-card-icon.tone-amber   { background: linear-gradient(135deg, #f59e0b, #b45309); box-shadow: 0 6px 16px rgba(180, 83, 9, 0.32); }
.report-tile.tone-orange,  .category-icon.tone-orange,  .admin-card-icon.tone-orange  { background: linear-gradient(135deg, #fb923c, #c2410c); box-shadow: 0 6px 16px rgba(194, 65, 12, 0.32); }
.report-tile.tone-rose,    .category-icon.tone-rose,    .admin-card-icon.tone-rose    { background: linear-gradient(135deg, #f43f5e, #be123c); box-shadow: 0 6px 16px rgba(190, 18, 60, 0.32); }
.report-tile.tone-cyan,    .category-icon.tone-cyan,    .admin-card-icon.tone-cyan    { background: linear-gradient(135deg, #06b6d4, #0e7490); box-shadow: 0 6px 16px rgba(14, 116, 144, 0.32); }
.report-tile.tone-red,     .category-icon.tone-red,     .admin-card-icon.tone-red     { background: linear-gradient(135deg, #ef4444, #b91c1c); box-shadow: 0 6px 16px rgba(185, 28, 28, 0.32); }
.report-tile.tone-slate,   .category-icon.tone-slate,   .admin-card-icon.tone-slate   { background: linear-gradient(135deg, #475569, #1e293b); box-shadow: 0 6px 16px rgba(30, 41, 59, 0.32); }

.report-card:hover .report-tile {
    transform: translateY(-5px) scale(1.07);
    box-shadow: 0 16px 30px rgba(20, 30, 48, 0.34);
}

.report-card:hover .report-tile .material-icons {
    animation: tilePop 0.45s ease;
}

@keyframes tilePop {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.24); }
    100% { transform: scale(1); }
}

/* Kartların kademeli giriş animasyonu */
.report-grid .report-card { animation: cardIn 0.42s both; }
.report-grid .report-card:nth-child(2) { animation-delay: 0.04s; }
.report-grid .report-card:nth-child(3) { animation-delay: 0.08s; }
.report-grid .report-card:nth-child(4) { animation-delay: 0.12s; }
.report-grid .report-card:nth-child(5) { animation-delay: 0.16s; }
.report-grid .report-card:nth-child(6) { animation-delay: 0.20s; }
.report-grid .report-card:nth-child(7) { animation-delay: 0.24s; }
.report-grid .report-card:nth-child(8) { animation-delay: 0.28s; }
.report-grid .report-card:nth-child(n+9) { animation-delay: 0.32s; }

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

/* Toggle: "Tek renk" — tüm tile'lar grafit (konu rengini ezer) */
.icons-mono .report-card-icon .report-tile { background: linear-gradient(135deg, #3d4a5e, #232c3a); box-shadow: 0 6px 16px rgba(20, 30, 48, 0.24); }

@media (prefers-reduced-motion: reduce) {
    .report-grid .report-card,
    .report-card:hover .report-tile .material-icons { animation: none; }
}

.report-card-icon .report-custom-icon {
    width: 100px;
    height: 100px;
    object-fit: contain;
}

.report-card-body {
    padding: var(--space-4);
}

.report-card-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin-bottom: var(--space-1);
}

.report-card-desc {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ==================== REPORT VIEW PAGE ==================== */
.report-view-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.report-view-info h1 {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--space-2);
}

.report-view-desc {
    color: var(--color-text-secondary);
}

.report-embed-container {
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.report-embed-frame {
    width: 100%;
    height: calc(100vh - 250px);
    min-height: 600px;
    border: none;
}

/* ==================== ADMIN PAGES ==================== */
.admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-5);
}

.admin-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-8);
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    text-align: center;
    transition: all var(--transition-normal);
}

.admin-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}

.admin-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    background: linear-gradient(135deg, #475569, #1e293b);
    box-shadow: 0 6px 16px rgba(30, 41, 59, 0.28);
    border-radius: 20px;
    margin-bottom: var(--space-4);
    transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.28s ease;
}

.admin-card-icon .material-icons,
.admin-card-icon .material-icons-outlined {
    font-size: 38px;
    color: #fff;
}

.admin-card:hover .admin-card-icon {
    transform: scale(1.06);
}

.admin-card:hover .admin-card-icon .material-icons {
    animation: tilePop 0.45s ease;
}

.admin-card-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin-bottom: var(--space-1);
}

.admin-card-count {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-accent);
}

/* Admin Table Actions */
.table-actions {
    display: flex;
    gap: var(--space-2);
}

/* Permission Matrix */
.permission-matrix {
    overflow-x: auto;
}

.permission-matrix table {
    min-width: 100%;
}

.permission-matrix th:first-child {
    position: sticky;
    left: 0;
    background-color: var(--color-bg);
    z-index: 1;
}

.permission-matrix td:first-child {
    position: sticky;
    left: 0;
    background-color: var(--color-white);
    z-index: 1;
}

.permission-checkbox {
    cursor: pointer;
    width: 20px;
    height: 20px;
    accent-color: var(--color-accent);
}

/* Form Card */
.form-card {
    max-width: 600px;
    margin: 0 auto;
}

/* ==================== REPORT DOCK ==================== */
.report-dock {
    position: fixed;
    bottom: 0;
    left: var(--sidebar-width);
    right: 0;
    height: 48px;
    background: var(--color-white);
    border-top: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    padding: 0 var(--space-3);
    gap: var(--space-2);
    /* Must sit above --z-viewer (220) so the dock's own popovers — workspace
     * panel and overflow menu — render over an open report. Setting the
     * dock to --z-sticky (200) here would create a stacking context that
     * traps those popovers behind the viewer no matter how high their
     * inner z-index is. */
    z-index: var(--z-dock);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    transition: left var(--transition-normal);
}

.sidebar.collapsed~.main-wrapper .report-dock {
    left: var(--sidebar-collapsed-width);
}

/* Wrapper around the scrollable tab strip — provides relative positioning
 * for the edge-fade gradients that hint at overflowing content. */
.dock-reports-wrap {
    position: relative;
    flex: 1;
    min-width: 0;
    /* allow shrinking past content size */
    overflow: hidden;
}

.dock-reports-wrap::before,
.dock-reports-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 24px;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--transition-fast);
    z-index: 1;
}

.dock-reports-wrap::before {
    left: 0;
    background: linear-gradient(to right, var(--color-white), rgba(255, 255, 255, 0));
}

.dock-reports-wrap::after {
    right: 0;
    background: linear-gradient(to left, var(--color-white), rgba(255, 255, 255, 0));
}

.dock-reports-wrap.overflow-left::before {
    opacity: 1;
}

.dock-reports-wrap.overflow-right::after {
    opacity: 1;
}

[data-theme="dark"] .dock-reports-wrap::before {
    background: linear-gradient(to right, var(--color-white), rgba(30, 30, 46, 0));
}

[data-theme="dark"] .dock-reports-wrap::after {
    background: linear-gradient(to left, var(--color-white), rgba(30, 30, 46, 0));
}

.dock-reports {
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
    padding: var(--space-1) 0;
    scroll-behavior: smooth;
}

.dock-reports::-webkit-scrollbar {
    height: 4px;
}

.dock-reports::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 2px;
}

/* Scroll-by-page buttons (only visible when content overflows) */
.dock-scroll-btn {
    display: none;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 32px;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast), color var(--transition-fast);
}

.dock-scroll-btn:hover {
    background: var(--color-bg-tertiary);
    color: var(--color-text);
}

.dock-scroll-btn:disabled {
    opacity: 0.3;
    cursor: default;
}

.dock-scroll-btn.visible {
    display: flex;
}

.dock-scroll-btn .material-icons-outlined {
    font-size: 22px;
}

/* Overflow dropdown — only shown when at least one tab is fully clipped */
.dock-overflow-menu {
    position: relative;
    flex: 0 0 auto;
}

.dock-overflow-btn {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    height: 32px;
    padding: 0 var(--space-2);
    background: var(--color-bg);
    color: var(--color-text-secondary);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.dock-overflow-btn:hover {
    background: var(--color-bg-tertiary);
    color: var(--color-text);
}

.dock-overflow-count {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    min-width: 16px;
    text-align: center;
}

.dock-overflow-list {
    position: absolute;
    bottom: calc(100% + 6px);
    right: 0;
    min-width: 240px;
    max-width: 320px;
    max-height: 320px;
    overflow-y: auto;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: var(--space-1);
    z-index: var(--z-modal);
    list-style: none;
    margin: 0;
}

.dock-overflow-list li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--color-text);
    font-size: var(--font-size-sm);
}

.dock-overflow-list li:hover {
    background: var(--color-bg);
}

.dock-overflow-list li.active {
    background: var(--color-accent-light);
    color: var(--color-accent);
}

.dock-overflow-list .overflow-item-title {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dock-overflow-list .overflow-item-close {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    opacity: 0.6;
}

.dock-overflow-list .overflow-item-close:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.1);
}

/* ==================== WORKSPACE MENU ==================== */
.dock-workspace-menu {
    position: relative;
    flex: 0 0 auto;
}

.dock-workspace-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: var(--color-bg);
    color: var(--color-text-secondary);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.dock-workspace-btn:hover {
    background: var(--color-bg-tertiary);
    color: var(--color-accent);
}

.dock-workspace-btn .material-icons-outlined {
    font-size: 18px;
}

.dock-workspace-panel {
    /* Panel artık <body>'nin direkt çocuğu — dock butonuna anchor değil,
     * viewport'a anchor. position:fixed garantili viewport-relative çünkü
     * parent zincirinde stacking context oluşturan hiçbir ata yok. */
    position: fixed;
    bottom: calc(48px + 8px);
    /* Desktop: sağ kenardan 12px — dock workspace butonunun yakınında ama
     * butonun altında "asılı" değil. Mobilde @media kuralı ortalıyor. */
    right: 12px;
    left: auto;
    top: auto;
    min-width: 320px;
    max-width: 380px;
    max-height: 480px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* `[hidden]` default { display: none } loses to `display: flex` above.
 * Force it so the second click on the bookmark button actually closes the panel. */
.dock-workspace-panel[hidden] {
    display: none;
}

/* Same fix for the overflow dropdown — same flex / hidden interaction */
.dock-overflow-list[hidden] {
    display: none;
}

/* Mobilde panel her iki yandan 8px boşlukla, ortalanmış — bookmark butonun
 * altında değil, viewport'a hizalı. */
@media (max-width: 576px) {
    .dock-workspace-panel {
        left: 8px !important;
        right: 8px !important;
        bottom: 56px !important;
        min-width: 0 !important;
        max-width: none !important;
        max-height: 60vh !important;
        box-sizing: border-box !important;
    }

    .dock-workspace-section,
    .dock-workspace-header {
        padding: var(--space-2) var(--space-3);
    }

    .ws-item-load {
        padding: var(--space-2);
        min-width: 0;
    }

    .ws-item-name {
        font-size: var(--font-size-sm);
        min-width: 0;
    }
}

.dock-workspace-section {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

.dock-workspace-section[hidden] {
    display: none;
}

.dock-workspace-section:last-child {
    border-bottom: none;
}

.dock-workspace-section-title {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Panel header — always visible, even when save section is collapsed */
.dock-workspace-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg);
}

.dock-workspace-add-btn {
    width: 28px;
    height: 28px;
    border: 1px solid var(--color-border);
    background: var(--color-white);
    color: var(--color-accent);
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.dock-workspace-add-btn:hover {
    background: var(--color-accent);
    color: var(--color-white);
    border-color: var(--color-accent);
}

.dock-workspace-add-btn .material-icons-outlined {
    font-size: 18px;
}

.dock-workspace-save-row {
    display: flex;
    gap: var(--space-2);
}

.dock-workspace-save-row input {
    flex: 1;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: var(--font-size-sm);
    color: var(--color-text);
    background: var(--color-white);
    min-width: 0;
}

.dock-workspace-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 280px;
    overflow-y: auto;
}

.ws-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border);
}

.ws-item:last-child {
    border-bottom: none;
}

.ws-item-load {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-2);
    border: none;
    background: transparent;
    color: var(--color-text);
    cursor: pointer;
    border-radius: var(--radius-sm);
    text-align: left;
    font-family: inherit;
    font-size: var(--font-size-sm);
    min-width: 0;
}

.ws-item-load:hover {
    background: var(--color-bg);
}

.ws-item-load .material-icons-outlined {
    font-size: 18px;
    color: var(--color-accent);
    flex-shrink: 0;
}

.ws-item-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ws-item-count {
    background: var(--color-bg);
    color: var(--color-text-secondary);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    flex-shrink: 0;
}

.ws-item-delete {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.5;
    transition: opacity var(--transition-fast), background var(--transition-fast);
}

.ws-item-delete:hover {
    opacity: 1;
    background: rgba(217, 83, 79, 0.1);
    color: #d9534f;
}

.ws-item-delete .material-icons-outlined {
    font-size: 16px;
}

.ws-empty {
    padding: var(--space-3);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    text-align: center;
}

/* ==================== USER GROUPS ==================== */
.group-create-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3);
}

.group-create-row {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

.group-create-row input {
    flex: 1;
}

.group-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}

@media (max-width: 768px) {
    .group-detail-grid {
        grid-template-columns: 1fr;
    }
}

.group-detail-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
}

.group-detail-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    margin: 0 0 var(--space-3);
}

.group-detail-title .material-icons-outlined {
    color: var(--color-accent);
}

.group-detail-subtitle {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-2);
}

.group-member-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 280px;
    overflow-y: auto;
}

.group-member-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border);
    font-size: var(--font-size-sm);
}

.group-member-row:last-child {
    border-bottom: none;
}

.dock-tab {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--color-bg);
    border-radius: var(--radius-md);
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--transition-fast);
    border: 2px solid transparent;
    min-width: 120px;
    max-width: 200px;
}

.dock-tab:hover {
    background: var(--color-bg-tertiary);
}

.dock-tab.active {
    background: var(--color-accent-light);
    border-color: var(--color-accent);
}

.dock-tab-icon {
    font-size: 18px;
    color: var(--color-accent);
}

.dock-tab-title {
    flex: 1;
    min-width: 0;
    /* required for the child to actually shrink and trigger ellipsis */
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dock-tab-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border-radius: var(--radius-sm);
    opacity: 0.5;
    transition: all var(--transition-fast);
}

.dock-tab-close:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.1);
}

.dock-tab-close .material-icons-outlined {
    font-size: 14px;
}

.dock-close-all {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: var(--radius-md);
    background: var(--color-bg);
    color: var(--color-text-secondary);
    transition: all var(--transition-fast);
}

.dock-close-all:hover {
    background: var(--color-danger);
    color: var(--color-white);
}

/* Mirror dock-close-all sizing for the new viewer-control buttons */
/* Small toast that fires when a report opens silently into the dock (i.e.
 * not the first one) so the user knows it landed somewhere. Auto-dismisses. */
.dock-flash-hint {
    position: fixed;
    bottom: 68px;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    background: var(--color-primary);
    color: var(--color-text-light);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
    z-index: var(--z-toast);
    white-space: nowrap;
    max-width: 90vw;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dock-flash-hint.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.dock-back-page,
.dock-fullscreen,
.dock-note-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: var(--radius-md);
    background: var(--color-bg);
    color: var(--color-text-secondary);
    border: none;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.dock-back-page[hidden],
.dock-fullscreen[hidden],
.dock-note-btn[hidden] {
    display: none;
}

.dock-note-btn:hover {
    background: var(--color-accent-light);
    color: var(--color-accent);
}

.dock-note-dot {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow: 0 0 0 2px var(--color-white);
}
.dock-note-dot[hidden] { display: none; }

.dock-back-page:hover {
    background: var(--color-bg-tertiary);
    color: var(--color-accent);
}

.dock-fullscreen:hover {
    background: var(--color-accent);
    color: var(--color-white);
}

/* Report Viewer Container */
.report-viewer-container {
    position: fixed;
    top: var(--header-height);
    left: var(--sidebar-width);
    right: 0;
    bottom: 48px;
    /* dock height */
    background: var(--color-bg);
    /* Below the header (--z-fixed) so dropdowns/modals stay accessible. */
    z-index: var(--z-viewer);
    transition: left var(--transition-normal);
}

.sidebar.collapsed~.main-wrapper .report-viewer-container {
    left: var(--sidebar-collapsed-width);
}

.report-iframe {
    width: 100%;
    height: 100%;
    border: none;
    background: var(--color-white);
    display: block;
}

/* Split-view layout — viewer container becomes a flex row with two panes
 * separated by a draggable resize handle. */
.report-viewer-container.split-active {
    display: flex !important;
    flex-direction: row;
}

.report-viewer-container.split-active .viewer-pane {
    position: relative;
    height: 100%;
    overflow: hidden;
}

/* Split mode: lock each iframe to a 16:9 aspect ratio centered vertically
 * inside its wrapper. Without this, two reports with different page sizes
 * ended up visually misaligned (one at the top, the other half-way down)
 * because PowerBI publish-to-web embeds center the page vertically when
 * the iframe is taller than the rendered content. Forcing a fixed ratio
 * + center-alignment makes both panes look identical.
 * Non-split mode keeps the iframe filling the wrapper since there's only
 * one report and asymmetry isn't an issue. */
.report-viewer-container.split-active .report-iframe-wrapper {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
}

.report-viewer-container.split-active .report-iframe {
    width: 100%;
    height: auto;
    max-height: 100%;
    aspect-ratio: 16 / 9;
    flex: 0 0 auto;
}

.report-viewer-container.split-active .viewer-pane.pane-left {
    flex: 0 0 var(--split-left-pct, 50%);
    border-right: 2px solid var(--color-border);
}

.report-viewer-container.split-active .viewer-pane.pane-right {
    flex: 1 1 auto;
}

/* When NOT in split mode, the single pane fills the whole container */
.report-viewer-container:not(.split-active) .viewer-pane {
    position: absolute;
    inset: 0;
}

.report-viewer-container:not(.split-active) .viewer-pane.pane-right {
    display: none;
}

/* Pane header — small label inside each pane showing the active tab title */
.viewer-pane-header {
    position: absolute;
    top: var(--space-2);
    left: var(--space-2);
    z-index: 8;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 4px 10px;
    font-size: var(--font-size-xs);
    color: var(--color-text);
    font-weight: var(--font-weight-medium);
    display: none;
    /* hidden by default; shown only in split */
    align-items: center;
    gap: 6px;
    max-width: 70%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-shadow: var(--shadow-sm);
}

.report-viewer-container.split-active .viewer-pane-header {
    display: inline-flex;
}

.viewer-pane-header .material-icons-outlined {
    font-size: 14px;
    color: var(--color-accent);
}

/* Resize handle */
.viewer-split-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--split-left-pct, 50%);
    width: 8px;
    margin-left: -4px;
    cursor: col-resize;
    z-index: 9;
    display: none;
}

.report-viewer-container.split-active .viewer-split-handle {
    display: block;
}

.viewer-split-handle::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4px;
    height: 60px;
    background: var(--color-border);
    border-radius: 4px;
    transition: background var(--transition-fast);
}

.viewer-split-handle:hover::before,
.viewer-split-handle.dragging::before {
    background: var(--color-accent);
}

/* Close-split button */
.viewer-split-close {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    z-index: 9;
    display: none;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.92);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    cursor: pointer;
    align-items: center;
    justify-content: center;
}

.report-viewer-container.split-active .viewer-split-close {
    display: flex;
}

.viewer-split-close .material-icons-outlined {
    font-size: 16px;
}

/* Tab split-button — only shows on hover in default sized tabs */
.dock-tab-split {
    display: none;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border-radius: var(--radius-sm);
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    opacity: 0.7;
    transition: opacity var(--transition-fast), background var(--transition-fast);
    margin-right: 2px;
}

.dock-tab:hover .dock-tab-split {
    display: flex;
}

.dock-tab-split:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.1);
    color: var(--color-accent);
}

.dock-tab-split .material-icons-outlined {
    font-size: 14px;
}

/* On mobile, hide split-related affordances — they don't fit */
@media (max-width: 768px) {
    .report-viewer-container.split-active {
        flex-direction: column !important;
    }

    .report-viewer-container.split-active .viewer-pane.pane-left {
        flex: 0 0 50%;
        border-right: none;
        border-bottom: 2px solid var(--color-border);
    }

    .viewer-split-handle {
        display: none !important;
    }

    .dock-tab-split {
        display: none !important;
    }
}

/* Viewer active state */
body.viewer-active .main-content {
    display: none;
}

body.viewer-active .main-wrapper {
    padding-bottom: 48px;
}

/* Responsive dock — see consolidated responsive block at end of file. */

/* ==================== ERROR PAGES ==================== */
.error-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
    padding: var(--space-8);
}

.error-code {
    font-size: 120px;
    font-weight: var(--font-weight-bold);
    color: var(--color-accent);
    line-height: 1;
    margin-bottom: var(--space-4);
}

.error-title {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--space-4);
}

.error-message {
    color: var(--color-text-secondary);
    margin-bottom: var(--space-6);
    max-width: 400px;
}

/* ==================== RESPONSIVE ====================
 *  Breakpoints:
 *    >  992px  — desktop (default styles)
 *    <= 992px  — tablet landscape & mobile: sidebar collapses into overlay
 *    <= 768px  — tablet portrait & small mobile: tighter spacing, viewer close btn
 *    <= 576px  — phone: single-column, hide non-essential labels
 */

/* Floating expand button — visible only when sidebar is collapsed on desktop.
 * Sits at the right edge of the rail so the user can always reopen the menu
 * without hunting for the toggle inside a 72px-wide column. */
.sidebar-rail-expand {
    display: none;
    /* JS toggles to flex when collapsed on desktop */
    position: fixed;
    top: 16px;
    left: calc(var(--sidebar-collapsed-width) - 16px);
    z-index: calc(var(--z-sidebar) + 1);
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    background: var(--color-white);
    color: var(--color-accent);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-md);
    cursor: pointer;
    transition: transform var(--transition-fast), background var(--transition-fast);
}

.sidebar-rail-expand:hover {
    background: var(--color-accent);
    color: var(--color-white);
    transform: translateX(2px);
}

.sidebar-rail-expand .material-icons-outlined {
    font-size: 20px;
}

/* On mobile we never show the rail-expand button — the hamburger handles it */
@media (max-width: 992px) {
    .sidebar-rail-expand {
        display: none !important;
    }
}

/* Sidebar backdrop overlay (mobile/tablet only) */
.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: calc(var(--z-sidebar) - 1);
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.sidebar-backdrop.active {
    display: block;
    opacity: 1;
}

/* Mobile viewer close button — hidden by default, shown ≤768px when viewer active */
.viewer-mobile-close {
    display: none;
    position: fixed;
    top: calc(var(--space-3));
    right: calc(var(--space-3));
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    background: var(--color-white);
    color: var(--color-text);
    box-shadow: var(--shadow-md);
    align-items: center;
    justify-content: center;
    z-index: calc(var(--z-viewer) + 1);
    border: 1px solid var(--color-border);
}

.viewer-mobile-close .material-icons-outlined {
    font-size: 22px;
}

@media (max-width: 992px) {
    /* Sidebar slides out from the left */
    .sidebar {
        transform: translateX(-100%);
    }

    .sidebar.mobile-open {
        transform: translateX(0);
    }

    .main-wrapper {
        margin-left: 0;
    }

    .mobile-menu-btn {
        display: flex;
    }

    .main-content {
        padding: var(--space-4);
    }

    .top-header {
        padding: 0 var(--space-4);
    }

    /* Dock and viewer span full width (sidebar is overlay) */
    .report-dock {
        left: 0;
    }

    .report-viewer-container {
        left: 0;
    }

    .dock-tab {
        min-width: 110px;
        max-width: 160px;
    }
}

@media (max-width: 768px) {
    /* Tighter layout on tablet portrait & small mobile */
    .page-header {
        margin-bottom: var(--space-4);
    }

    .page-title {
        font-size: var(--font-size-xl);
    }

    .category-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: var(--space-3);
    }

    .category-card {
        padding: var(--space-5) var(--space-4);
    }

    .category-icon {
        width: 48px;
        height: 48px;
        margin-bottom: var(--space-3);
    }

    .category-icon .material-icons-outlined {
        font-size: 24px;
    }

    .report-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: var(--space-3);
    }

    .report-card-icon {
        padding: var(--space-4) var(--space-4) var(--space-2);
    }

    .report-card-icon .report-tile {
        width: 74px;
        height: 74px;
        border-radius: 18px;
    }
    .report-tile .material-icons {
        font-size: 46px;
    }
    .report-card-icon .report-custom-icon {
        height: 58px;
        width: 58px;
    }

    .admin-grid {
        grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
        gap: var(--space-3);
    }

    .admin-card {
        padding: var(--space-5);
    }

    .report-embed-frame {
        height: calc(100vh - 180px);
        min-height: 360px;
    }

    /* Reveal mobile viewer close button when a report viewer is active */
    body.viewer-active .viewer-mobile-close {
        display: flex;
    }

    /* Larger touch targets for icon-only buttons */
    .favorite-btn,
    .theme-toggle-btn {
        width: 40px;
        height: 40px;
    }

    .dock-tab-close {
        width: 24px;
        height: 24px;
    }

    .dock-tab-close .material-icons-outlined {
        font-size: 16px;
    }

    .dock-close-all {
        width: 36px;
        height: 36px;
    }
}

@media (max-width: 576px) {
    .user-name {
        display: none;
    }

    .user-btn .dropdown-arrow {
        display: none;
    }

    .breadcrumb {
        font-size: var(--font-size-xs);
    }

    /* Mobil header — kompakt ikonlar, dar boşluklar, gereksiz etiketleri gizle */
    .top-header {
        padding: 0 var(--space-3);
        height: 56px;
    }

    .header-right {
        gap: var(--space-1);
    }

    /* Hızlı arama: sadece ikon, "Ara" etiketi ve Ctrl K kbd gizli */
    .header-search-btn {
        width: 36px;
        height: 36px;
        padding: 0;
        justify-content: center;
        border-radius: var(--radius-full);
    }
    .header-search-label,
    .header-search-kbd {
        display: none;
    }

    /* Çan, tema, kullanıcı — eşit boyutlu dairesel butonlar */
    .notif-bell,
    .theme-toggle-btn {
        width: 36px;
        height: 36px;
    }
    .notif-bell .material-icons-outlined,
    .theme-toggle-btn .material-icons-outlined {
        font-size: 18px;
    }
    .notif-badge {
        font-size: 9px;
        min-width: 14px;
        height: 14px;
        line-height: 14px;
    }

    .user-btn {
        width: 36px;
        height: 36px;
        padding: 0;
        justify-content: center;
        border-radius: var(--radius-full);
    }
    .user-avatar {
        width: 28px;
        height: 28px;
    }
    .user-avatar .material-icons-outlined {
        font-size: 18px;
    }

    .report-embed-frame {
        height: calc(100vh - 160px);
        min-height: 320px;
    }

    .login-card {
        border-radius: var(--radius-lg);
    }

    .login-header,
    .login-body {
        padding: var(--space-5);
    }

    /* Single column for category/report cards on phones */
    .category-grid,
    .report-grid,
    .favorites-grid,
    .admin-grid {
        grid-template-columns: 1fr;
    }

    .report-dock {
        height: 44px;
        padding: 0 var(--space-2);
    }

    .report-viewer-container {
        bottom: 44px;
    }

    body.viewer-active .main-wrapper {
        padding-bottom: 44px;
    }
}

/* ==================== LOADING SPINNER ==================== */
.loading-spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-8);
    color: var(--color-text-secondary);
    font-size: var(--font-size-lg);
}

.loading-spinner .spinning {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Report custom icon in cards */
.report-custom-icon {
    height: 40px;
    width: 40px;
    object-fit: contain;
}

/* ==================== THEME TOGGLE ==================== */
.theme-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: var(--radius-full);
    background-color: var(--color-bg);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.theme-toggle-btn:hover {
    background-color: var(--color-bg-tertiary);
    border-color: var(--color-accent);
    color: var(--color-accent);
    transform: rotate(15deg);
}

.theme-toggle-btn .material-icons-outlined {
    font-size: 20px;
}

/* ==================== FAVORITE BUTTON ==================== */
.favorite-btn {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: var(--radius-full);
    background-color: rgba(255, 255, 255, 0.9);
    color: var(--color-text-muted);
    border: none;
    cursor: pointer;
    transition: all var(--transition-fast);
    z-index: 10;
    box-shadow: var(--shadow-sm);
}

.favorite-btn:hover {
    background-color: var(--color-white);
    color: var(--color-accent);
    transform: scale(1.1);
    box-shadow: var(--shadow-md);
}

.favorite-btn.is-favorite {
    color: var(--color-accent);
}

.favorite-btn .material-icons-outlined {
    font-size: 20px;
    transition: transform var(--transition-fast);
}

.favorite-btn.is-favorite .material-icons-outlined {
    animation: star-pop 0.3s ease;
}

@keyframes star-pop {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.3);
    }

    100% {
        transform: scale(1);
    }
}

.favorite-active {
    color: var(--color-accent) !important;
}

/* Report card relative positioning for favorite button */
.report-card {
    position: relative;
}

/* ==================== FAVORITES SECTION ==================== */
.favorites-section {
    margin-bottom: var(--space-8);
    padding: var(--space-5);
    background: var(--color-white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-accent);
}

.favorites-section-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.favorites-section-header .material-icons-outlined {
    font-size: 24px;
    color: var(--color-accent);
}

.favorites-section-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin: 0;
}

.favorites-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-4);
}

/* Dark mode adjustments for favorites section */
[data-theme="dark"] .favorites-section {
    background: linear-gradient(135deg, rgba(168, 134, 42, 0.15) 0%, rgba(168, 134, 42, 0.05) 100%);
}

[data-theme="dark"] .favorite-btn {
    background-color: rgba(30, 30, 46, 0.9);
}

[data-theme="dark"] .favorite-btn:hover {
    background-color: var(--color-bg-tertiary);
}

/* ==================== DARK MODE SIDEBAR FIX ==================== */
/* Sidebar should maintain dark background with light text in both themes */
[data-theme="dark"] .sidebar {
    background-color: #1a1a1a;
    color: #ffffff;
}

[data-theme="dark"] .sidebar-brand {
    color: #ffffff;
}

[data-theme="dark"] .brand-text {
    color: #ffffff;
}

[data-theme="dark"] .nav-link {
    color: rgba(255, 255, 255, 0.7);
}

[data-theme="dark"] .nav-link:hover {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .nav-link.active {
    color: #1a1a1a;
    background-color: var(--color-accent);
}

[data-theme="dark"] .nav-heading {
    color: rgba(255, 255, 255, 0.4);
}

[data-theme="dark"] .sidebar-toggle {
    color: #ffffff;
}

[data-theme="dark"] .nav-divider {
    background-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .sidebar-header {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .sidebar {
    border-right-color: rgba(255, 255, 255, 0.1);
}

/* ==================== REORDER CONTROLS ==================== */
.reorder-controls {
    display: none;
    justify-content: center;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2);
    /* Always use dark background for contrast with white icons */
    background: linear-gradient(135deg, #1a1a1a, #000000);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.reorder-btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    padding: var(--space-1);
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-fast);
}

.reorder-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

.reorder-handle {
    color: white;
    cursor: grab;
    padding: var(--space-1);
}

.reorder-handle:active {
    cursor: grabbing;
}

.reorder-active .report-card {
    border: 2px dashed var(--color-primary);
    transition: transform 0.2s;
}

/* Fix border color in dark mode for active reorder items */
[data-theme="dark"] .reorder-active .report-card {
    border-color: var(--color-accent);
}

.reorder-active .report-card:hover {
    transform: scale(1.02);
}

.sortable-ghost {
    opacity: 0.4;
    border: 2px solid var(--color-primary) !important;
}

[data-theme="dark"] .sortable-ghost {
    border-color: var(--color-accent) !important;
}

.sortable-chosen {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.sortable-drag {
    opacity: 0.9;
}

/* ==================== IFRAME LOADING SKELETON ====================
 * Shown over a freshly created iframe until its `load` event fires.
 * The iframe's onload handler adds `.loaded` to the skeleton, which
 * fades it out via CSS.
 */
.iframe-skeleton {
    position: absolute;
    inset: 0;
    background: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 5;
}

.iframe-skeleton.loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.iframe-skeleton-shimmer {
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg,
            transparent 30%,
            rgba(168, 134, 42, 0.08) 50%,
            transparent 70%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.6s linear infinite;
}

@keyframes skeleton-shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

.iframe-skeleton-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    text-align: center;
    padding: var(--space-6);
    z-index: 1;
}

.iframe-skeleton-icon {
    font-size: 64px;
    color: var(--color-accent);
    opacity: 0.6;
}

.iframe-skeleton-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    max-width: 400px;
}

.iframe-skeleton-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-accent);
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
}

[data-theme="dark"] .iframe-skeleton {
    background: var(--color-bg);
}

[data-theme="dark"] .iframe-skeleton-shimmer {
    background: linear-gradient(110deg,
            transparent 30%,
            rgba(168, 134, 42, 0.12) 50%,
            transparent 70%);
    background-size: 200% 100%;
}

/* Make report-embed-container the positioning context for the skeleton overlay */
.report-embed-container {
    position: relative;
}

/* Inside the dock viewer, the skeleton sits over individual iframes */
.report-viewer-container {
    /* preserve existing positioning */
}

.report-viewer-container .iframe-skeleton {
    /* full-bleed inside the viewer container */
    inset: 0;
}

/* ==================== COMMAND PALETTE ====================
 * Ctrl+K modal that fuzzy-searches reports + categories.
 */
.cmd-palette-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(2px);
    /* z-toast (500) > z-modal (400) so the command palette always rises
     * above any admin form modals, sidebar overlays, etc. that share the
     * same modal z-index. */
    z-index: var(--z-toast);
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 80px var(--space-4) var(--space-4);
}

.cmd-palette-overlay.active {
    display: flex;
}

.cmd-palette-panel {
    width: 100%;
    max-width: 640px;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 70vh;
    border: 1px solid var(--color-border);
}

.cmd-palette-input-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border);
}

.cmd-palette-input-icon {
    color: var(--color-text-secondary);
    font-size: 22px;
}

.cmd-palette-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: var(--font-size-lg);
    font-family: inherit;
    color: var(--color-text);
    min-width: 0;
}

.cmd-palette-input::placeholder {
    color: var(--color-text-muted);
}

.cmd-palette-esc {
    font-size: var(--font-size-xs);
    padding: 2px 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    background: var(--color-bg);
    font-family: inherit;
}

.cmd-palette-results {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-2);
    min-height: 0;
}

.cmd-palette-section {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: var(--space-2) var(--space-3);
}

.cmd-palette-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.cmd-palette-item.active {
    background: var(--color-accent-light);
}

.cmd-palette-item-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    flex-shrink: 0;
    box-shadow: none;
}

.cmd-palette-item-icon .material-icons {
    font-size: 20px;
}

.cmd-palette-item-body {
    flex: 1;
    min-width: 0;
}

.cmd-palette-item-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cmd-palette-item-meta {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cmd-palette-item-kind {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    background: var(--color-bg);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.cmd-palette-empty {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-8) var(--space-4);
    text-align: center;
    color: var(--color-text-secondary);
}

.cmd-palette-hint {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-top: var(--space-2);
}

.cmd-palette-footer {
    display: flex;
    gap: var(--space-4);
    padding: var(--space-2) var(--space-4);
    border-top: 1px solid var(--color-border);
    background: var(--color-bg);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.cmd-palette-footer kbd {
    font-size: 10px;
    padding: 1px 6px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-white);
    font-family: inherit;
    margin-right: 2px;
}

[data-theme="dark"] .cmd-palette-panel {
    background: var(--color-white);
}

[data-theme="dark"] .cmd-palette-footer {
    background: var(--color-bg);
}

@media (max-width: 576px) {
    .cmd-palette-overlay {
        padding: 12px;
    }

    .cmd-palette-panel {
        max-height: 90vh;
    }

    .cmd-palette-input {
        font-size: var(--font-size-base);
    }
}

/* ==================== RECENTS STRIP ====================
 * Horizontal scroll of last 8 viewed reports, shown on /menu above categories.
 */
.recents-section {
    margin-bottom: var(--space-6);
}

.recents-section-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.recents-section-header .material-icons-outlined {
    font-size: 22px;
    color: var(--color-accent);
}

.recents-section-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin: 0;
}

.recents-strip {
    display: flex;
    gap: var(--space-3);
    overflow-x: auto;
    padding-bottom: var(--space-2);
    scroll-snap-type: x proximity;
}

.recents-strip::-webkit-scrollbar {
    height: 6px;
}

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

.recents-card {
    flex: 0 0 auto;
    width: 220px;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    scroll-snap-align: start;
}

.recents-card:hover {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.recents-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--color-bg);
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

.recents-card-icon .material-icons-outlined {
    font-size: 22px;
    color: var(--color-accent);
}

.recents-card-icon .report-custom-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.recents-card-body {
    flex: 1;
    min-width: 0;
}

.recents-card-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.recents-card-meta {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 576px) {
    .recents-card {
        width: 180px;
    }
}

/* ==================== ADMIN ANALYTICS DASHBOARD ==================== */
.analytics-headline-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.analytics-stat {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    text-align: left;
    transition: box-shadow var(--transition-fast);
}

.analytics-stat:hover {
    box-shadow: var(--shadow-md);
}

.analytics-stat-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-2);
}

.analytics-stat-value {
    font-size: 2.25rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-accent);
    line-height: 1;
}

.analytics-stat-meta {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-top: var(--space-2);
}

.analytics-charts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}

.analytics-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.analytics-card-wide {
    grid-column: 1 / -1;
}

.analytics-card-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.analytics-card-header h3 {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    margin: 0;
}

.analytics-card-meta {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.analytics-chart-wrap {
    position: relative;
    height: 280px;
}

.analytics-card-wide .analytics-chart-wrap {
    height: 320px;
}

.analytics-table-wrap {
    overflow-x: auto;
    max-height: 360px;
    overflow-y: auto;
}

.analytics-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

.analytics-table th {
    text-align: left;
    padding: var(--space-2) var(--space-3);
    background: var(--color-bg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    position: sticky;
    top: 0;
    z-index: 1;
}

.analytics-table td {
    padding: var(--space-2) var(--space-3);
    border-top: 1px solid var(--color-border);
}

.analytics-table tr:hover td {
    background: var(--color-bg);
}

.analytics-table.sortable th[data-sort] {
    cursor: pointer;
    user-select: none;
}

.analytics-table.sortable th[data-sort]:hover {
    background: var(--color-bg-tertiary, var(--color-bg));
    color: var(--color-text);
}

.analytics-table.sortable th.active-sort {
    color: var(--color-accent);
}

.analytics-table .sort-ind {
    display: inline-block;
    margin-left: 4px;
    font-size: 10px;
    color: var(--color-accent);
    min-width: 8px;
}

/* Heatmap */
.heatmap-grid {
    display: grid;
    grid-template-columns: minmax(140px, 1.5fr) repeat(7, 1fr);
    gap: 4px;
    font-size: var(--font-size-xs);
}

.heatmap-cell {
    padding: var(--space-2);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 32px;
}

.heatmap-corner {
    background: transparent;
}

.heatmap-header {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    background: var(--color-bg);
}

.heatmap-rowlabel {
    justify-content: flex-start;
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    background: var(--color-bg);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.heatmap-data {
    border: 1px solid var(--color-border);
    color: var(--color-text);
}

@media (max-width: 992px) {
    .analytics-charts-grid {
        grid-template-columns: 1fr;
    }

    .analytics-card-wide {
        grid-column: 1;
    }
}

@media (max-width: 576px) {
    .analytics-stat-value {
        font-size: 1.75rem;
    }

    .heatmap-grid {
        grid-template-columns: minmax(80px, 1fr) repeat(7, minmax(28px, 1fr));
        font-size: 10px;
    }

    .heatmap-cell {
        padding: 4px;
        min-height: 28px;
    }
}

/* ==================== AUDIT LOG ==================== */
.audit-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    padding: var(--space-3);
    background: var(--color-bg);
    border-radius: var(--radius-md);
}

.audit-filter-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.audit-filter-group label {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
}

.audit-filter-group select,
.audit-filter-group input {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-white);
    color: var(--color-text);
    font-family: inherit;
    font-size: var(--font-size-sm);
    min-width: 160px;
}

.audit-result-count {
    margin-left: auto;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.audit-table-wrap {
    overflow-x: auto;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.audit-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

.audit-table th {
    text-align: left;
    padding: var(--space-2) var(--space-3);
    background: var(--color-bg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    border-bottom: 1px solid var(--color-border);
}

.audit-table td {
    padding: var(--space-2) var(--space-3);
    border-top: 1px solid var(--color-border);
    vertical-align: top;
}

.audit-table tr:hover td {
    background: var(--color-bg);
}

.audit-cell-time {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.audit-cell-meta code {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 11px;
    background: var(--color-bg);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    word-break: break-all;
    display: inline-block;
    max-width: 360px;
}

.audit-action-pill {
    display: inline-block;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-weight: var(--font-weight-medium);
    background: var(--color-bg);
    color: var(--color-text);
    white-space: nowrap;
}

.audit-entity-label {
    display: inline-block;
    font-size: 10px;
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    color: var(--color-text-secondary);
    margin-right: 6px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.audit-entity-name {
    color: var(--color-text);
    font-weight: var(--font-weight-medium);
}

.audit-action-permission {
    background: rgba(168, 134, 42, 0.15);
    color: #a37e1d;
}

.audit-action-user {
    background: rgba(54, 116, 181, 0.15);
    color: #2c5a8f;
}

.audit-action-report {
    background: rgba(88, 166, 88, 0.15);
    color: #3a6e3a;
}

.audit-action-category {
    background: rgba(186, 100, 184, 0.15);
    color: #7a3677;
}

.audit-action-approval {
    background: rgba(255, 138, 0, 0.15);
    color: #b85800;
}

.audit-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding: var(--space-3);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

/* ==================== APPROVAL WORKFLOW ==================== */
.settings-section-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    margin: 0 0 var(--space-2);
}

.approvals-section {
    margin-bottom: var(--space-6);
}

.approvals-section-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin: 0 0 var(--space-3);
}

.approvals-section-title .material-icons-outlined {
    color: var(--color-accent);
}

.approvals-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.approvals-list-compact {
    gap: var(--space-2);
}

.approval-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-accent);
    border-radius: var(--radius-md);
    flex-wrap: wrap;
}

.approval-card-decided {
    border-left-color: var(--color-border);
    padding: var(--space-3);
}

.approval-approved {
    border-left-color: #58a658;
}

.approval-rejected {
    border-left-color: var(--color-danger, #d9534f);
}

.approval-card-body {
    flex: 1;
    min-width: 240px;
}

.approval-line {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
    font-size: var(--font-size-sm);
}

.approval-arrow {
    font-size: 16px;
    color: var(--color-accent);
}

.approval-report {
    font-weight: var(--font-weight-medium);
}

.approval-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--space-2);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    flex-wrap: wrap;
}

.approval-actions {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    flex-wrap: wrap;
}

.approval-reject-details {
    display: inline-block;
    position: relative;
}

.approval-reject-details summary {
    list-style: none;
    cursor: pointer;
}

.approval-reject-details summary::-webkit-details-marker {
    display: none;
}

.approval-reject-form {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-2);
    align-items: center;
}

.approval-reject-form .form-control-sm {
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-size-sm);
    min-width: 200px;
}

.approval-status-pill {
    display: inline-block;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-weight: var(--font-weight-medium);
    margin-right: var(--space-2);
}

.approval-status-approved {
    background: rgba(88, 166, 88, 0.15);
    color: #3a6e3a;
}

.approval-status-rejected {
    background: rgba(217, 83, 79, 0.15);
    color: #a83b37;
}

.empty-state {
    text-align: center;
    padding: var(--space-8) var(--space-4);
    color: var(--color-text-secondary);
}

/* btn-success / btn-danger if not already defined */
.btn-success {
    background: #58a658;
    color: white;
    border: 1px solid #58a658;
}

.btn-success:hover {
    background: #4a8e4a;
    border-color: #4a8e4a;
}

.btn-danger {
    background: #d9534f;
    color: white;
    border: 1px solid #d9534f;
}

.btn-danger:hover {
    background: #c9302c;
    border-color: #c9302c;
}

/* ==================== HEADER SEARCH BUTTON ====================
 * Visible affordance for the Ctrl+K command palette so first-time users
 * discover it. Also clickable for mouse-only users / mobile.
 */
.header-search-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    height: 36px;
    background: var(--color-bg);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-family: inherit;
    font-size: var(--font-size-sm);
    transition: all var(--transition-fast);
    min-width: 200px;
    justify-content: flex-start;
}

.header-search-btn:hover {
    border-color: var(--color-accent);
    color: var(--color-text);
    background: var(--color-white);
}

.header-search-btn .material-icons-outlined {
    font-size: 18px;
}

.header-search-label {
    flex: 1;
    text-align: left;
    color: var(--color-text-muted);
}

.header-search-kbd {
    font-size: 10px;
    padding: 2px 6px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-white);
    color: var(--color-text-secondary);
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.04em;
    line-height: 1.2;
}

@media (max-width: 768px) {
    /* Compact: just the icon */
    .header-search-btn {
        min-width: 0;
        padding: 0;
        width: 40px;
        height: 40px;
        border-radius: var(--radius-full);
        justify-content: center;
    }

    .header-search-label,
    .header-search-kbd {
        display: none;
    }
}

/* ==================== NOTIFICATION BELL ==================== */
.notif-wrap {
    position: relative;
}

.notif-bell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: var(--radius-full);
    background: var(--color-bg);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.notif-bell:hover {
    background: var(--color-bg-tertiary);
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.notif-bell .material-icons-outlined {
    font-size: 20px;
}

.notif-bell.has-unread .material-icons-outlined {
    /* Subtle: just the badge gives the alert, no jiggling icon */
    color: var(--color-accent);
}

@keyframes bell-pulse {
    0%, 100% { transform: rotate(0); }
    10% { transform: rotate(-10deg); }
    20% { transform: rotate(10deg); }
    30% { transform: rotate(-6deg); }
    40% { transform: rotate(6deg); }
    50% { transform: rotate(0); }
}

.notif-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #d9534f;
    color: white;
    font-size: 10px;
    font-weight: var(--font-weight-bold);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--color-white);
    line-height: 1;
}

.notif-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 360px;
    max-height: 480px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: var(--z-dropdown);
    display: none;
    flex-direction: column;
    overflow: hidden;
}

.notif-dropdown.active {
    display: flex;
}

.notif-dropdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg);
}

.notif-dropdown-header h3 {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    margin: 0;
}

.notif-markall {
    background: none;
    border: none;
    color: var(--color-accent);
    /* Force a small, light pill so the dropdown's "Bildirimler" header
     * stays the primary affordance — the previous styling made this look
     * like a button shouting for attention. */
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.02em;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-family: inherit;
    opacity: 0.85;
    transition: opacity var(--transition-fast), background var(--transition-fast);
}

.notif-markall:hover {
    opacity: 1;
    background: var(--color-accent-light);
    text-decoration: none;
}

.notif-list {
    overflow-y: auto;
    flex: 1;
}

.notif-item {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    text-decoration: none;
    color: var(--color-text);
    transition: background var(--transition-fast);
}

.notif-item:last-child {
    border-bottom: none;
}

.notif-item:hover {
    background: var(--color-bg);
}

.notif-item.unread {
    background: rgba(168, 134, 42, 0.05);
}

.notif-item.unread::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-accent);
    flex-shrink: 0;
    margin-top: 8px;
}

.notif-item-icon {
    color: var(--color-accent);
    font-size: 22px;
    flex-shrink: 0;
}

.notif-item-body {
    flex: 1;
    min-width: 0;
}

.notif-item-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    margin-bottom: 2px;
}

.notif-item-meta {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    margin-bottom: 4px;
    word-wrap: break-word;
}

.notif-item-time {
    font-size: 11px;
    color: var(--color-text-muted);
}

.notif-loading,
.notif-empty {
    padding: var(--space-6) var(--space-4);
    text-align: center;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

@media (max-width: 576px) {
    .notif-dropdown {
        width: calc(100vw - var(--space-4) * 2);
        right: calc(-1 * var(--space-3));
    }
}

/* ==================== IMPERSONATION BANNER ====================
 * Sticky alert across the very top of the page when an admin is viewing
 * the portal as another user. Designed to be visually loud so it can't be
 * missed — privilege escalation is a real risk if forgotten.
 */
.impersonation-banner {
    position: sticky;
    top: 0;
    z-index: calc(var(--z-fixed) + 10);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
    background: repeating-linear-gradient(
        45deg,
        #5b3e0c,
        #5b3e0c 12px,
        #6b4a10 12px,
        #6b4a10 24px
    );
    color: #fff;
    font-size: var(--font-size-sm);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.impersonation-banner .material-icons-outlined {
    font-size: 20px;
    flex-shrink: 0;
}

.impersonation-text {
    flex: 1;
    line-height: 1.3;
}

.impersonation-text strong {
    color: var(--color-accent);
    font-weight: var(--font-weight-bold);
}

.impersonation-exit-form {
    margin: 0;
}

.impersonation-exit-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: background var(--transition-fast);
    font-family: inherit;
}

.impersonation-exit-btn:hover {
    background: rgba(0, 0, 0, 0.6);
}

.impersonation-exit-btn .material-icons-outlined {
    font-size: 16px;
}

@media (max-width: 576px) {
    .impersonation-banner {
        flex-wrap: wrap;
        font-size: var(--font-size-xs);
        gap: var(--space-2);
    }
}

/* ==================== ADMIN USER PASSWORD REVEAL ==================== */
.password-reveal {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.password-reveal-btn {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--color-border);
    background: var(--color-white);
    color: var(--color-text-secondary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.password-reveal-btn:hover {
    background: var(--color-bg);
    color: var(--color-accent);
    border-color: var(--color-accent);
}

.password-reveal-btn .material-icons-outlined {
    font-size: 16px;
}

.password-reveal .password-display {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: var(--font-size-xs);
    background: var(--color-bg);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    color: var(--color-text);
}

.password-reveal .password-display[hidden] {
    display: none;
}

/* ==================== APP CONFIRM DIALOG ==================== */
/* Global replacement for the browser-native confirm() dialog. Same visual
 * language as the rest of the app: rounded card on a soft scrim, copper
 * accent on confirm, neutral cancel. Used via window.appConfirm({...}). */
.app-confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 15, 18, 0.55);
    backdrop-filter: blur(4px);
    z-index: var(--z-toast);
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.app-confirm-overlay.active {
    display: flex;
    opacity: 1;
}

.app-confirm-panel {
    width: 100%;
    max-width: 420px;
    background: var(--color-white);
    border-radius: var(--radius-xl);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.05),
        0 12px 32px rgba(0, 0, 0, 0.10),
        0 32px 72px rgba(26, 26, 26, 0.12);
    border: 1px solid var(--color-border);
    padding: var(--space-6) var(--space-6) var(--space-5);
    text-align: center;
    transform: scale(0.96);
    transition: transform var(--transition-fast);
}

.app-confirm-overlay.active .app-confirm-panel {
    transform: scale(1);
}

.app-confirm-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--color-accent-light);
    color: var(--color-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-3);
}

.app-confirm-icon .material-icons-outlined {
    font-size: 30px;
}

.app-confirm-icon.danger {
    background: rgba(217, 83, 79, 0.10);
    color: #d9534f;
}

.app-confirm-title {
    margin: 0 0 var(--space-2);
    font-size: 1.15rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    letter-spacing: -0.01em;
}

.app-confirm-message {
    margin: 0 0 var(--space-5);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.5;
    white-space: pre-line;
}

.app-confirm-actions {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
}

.app-confirm-btn {
    flex: 1;
    max-width: 160px;
    padding: 11px var(--space-4);
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast),
        box-shadow var(--transition-fast), transform var(--transition-fast);
}

.app-confirm-cancel {
    background: transparent;
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

.app-confirm-cancel:hover {
    background: var(--color-bg);
    border-color: var(--color-border-hover);
}

.app-confirm-ok {
    background: #1a1a1a;
    color: #ffffff;
    border: 1px solid #1a1a1a;
}

.app-confirm-ok:hover {
    background: #000;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-light);
    transform: translateY(-1px);
}

.app-confirm-ok.danger {
    background: #d9534f;
    border-color: #d9534f;
}

.app-confirm-ok.danger:hover {
    background: #c9302c;
    border-color: #c9302c;
    box-shadow: 0 0 0 3px rgba(217, 83, 79, 0.18);
}

@media (max-width: 480px) {
    .app-confirm-actions {
        flex-direction: column-reverse;
    }

    .app-confirm-btn {
        max-width: none;
    }
}
/* ==================== NOTIFICATIONS PAGE ==================== */
/* Full-page notification history at /notifications. Same visual language as
 * the bell dropdown but laid out as a vertical list with filter tabs and
 * pagination. */
.notif-dropdown-footer {
    display: block;
    text-align: center;
    padding: var(--space-3);
    border-top: 1px solid var(--color-border);
    color: var(--color-accent);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    background: var(--color-bg);
}

.notif-dropdown-footer:hover {
    background: var(--color-accent-light);
    color: var(--color-accent-hover);
}


/* ==================== APP MODAL (Form Modal) ==================== */
.app-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 15, 18, 0.55);
    backdrop-filter: blur(4px);
    z-index: var(--z-toast);
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.app-modal-overlay.active {
    display: flex;
    opacity: 1;
}

.app-modal-panel {
    position: relative;
    width: 100%;
    max-width: 440px;
    background: var(--color-white);
    border-radius: var(--radius-xl);
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), 0 12px 32px rgba(0,0,0,0.10), 0 32px 72px rgba(26,26,26,0.12);
    border: 1px solid var(--color-border);
    padding: var(--space-6) var(--space-6) var(--space-5);
    text-align: center;
    transform: scale(0.96);
    transition: transform var(--transition-fast);
}

.app-modal-overlay.active .app-modal-panel {
    transform: scale(1);
}

.app-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.app-modal-close:hover {
    background: var(--color-bg);
    color: var(--color-text);
}

.app-modal-close .material-icons-outlined { font-size: 20px; }

.app-modal-icon {
    width: 56px;
    height: 56px;
    margin: 4px auto var(--space-3);
    border-radius: 50%;
    background: var(--color-accent-light);
    color: var(--color-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.app-modal-icon .material-icons-outlined { font-size: 28px; }

.app-modal-title {
    margin: 0 0 var(--space-1);
    font-size: 1.15rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    letter-spacing: -0.01em;
}

.app-modal-sub {
    margin: 0 0 var(--space-5);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

.app-modal-banner {
    margin: 0 0 var(--space-4);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    text-align: left;
    line-height: 1.4;
}

.app-modal-banner.is-error {
    background: rgba(217,83,79,0.10);
    color: #b9322e;
    border: 1px solid rgba(217,83,79,0.25);
}

.app-modal-banner.is-success {
    background: rgba(40,167,69,0.10);
    color: #1e7a36;
    border: 1px solid rgba(40,167,69,0.25);
}

.app-modal-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    text-align: left;
}

.app-modal-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.app-modal-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

.app-modal-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.app-modal-input-icon {
    position: absolute;
    left: 12px;
    color: var(--color-text-muted);
    font-size: 18px;
    pointer-events: none;
}

.app-modal-input {
    width: 100%;
    padding: 11px 12px 11px 38px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-white);
    font-family: inherit;
    font-size: var(--font-size-base);
    color: var(--color-text);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.app-modal-input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-light);
}

.app-modal-hint {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.app-modal-actions {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-3);
}

.app-modal-btn {
    flex: 1;
    padding: 11px var(--space-4);
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.app-modal-btn-cancel {
    background: transparent;
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

.app-modal-btn-cancel:hover {
    background: var(--color-bg);
    border-color: var(--color-border-hover);
}

.app-modal-btn-ok {
    background: #1a1a1a;
    color: #ffffff;
    border: 1px solid #1a1a1a;
}

.app-modal-btn-ok:hover:not(:disabled) {
    background: #000;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-light);
    transform: translateY(-1px);
}

.app-modal-btn-ok:disabled {
    opacity: 0.65;
    cursor: progress;
}

/* ==================== NOTIFICATIONS PAGE — PREMIUM ==================== */
.notif-hero {
    background: linear-gradient(135deg, #fbfaf6 0%, #f3eedf 100%);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-6) var(--space-7);
    margin-bottom: var(--space-6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    flex-wrap: wrap;
}

.notif-hero-left {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-width: 0;
}

.notif-hero-icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--color-white);
    color: var(--color-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.notif-hero-icon .material-icons-outlined { font-size: 26px; }

.notif-hero-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    letter-spacing: -0.01em;
}

.notif-hero-sub {
    margin: 4px 0 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.notif-hero-sub strong {
    color: var(--color-accent);
    font-weight: var(--font-weight-bold);
}

.notif-hero-actions {
    display: flex;
    gap: var(--space-2);
    flex-shrink: 0;
}

.notif-page-filters {
    display: inline-flex;
    gap: 2px;
    padding: 4px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    margin-bottom: var(--space-6);
    border-bottom: 1px solid var(--color-border);
}

.notif-page-filter {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 8px var(--space-4);
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--radius-full);
    border-bottom: none;
    margin-bottom: 0;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.notif-page-filter:hover {
    color: var(--color-text);
    background: rgba(0,0,0,0.03);
}

.notif-page-filter.active {
    background: var(--color-white);
    color: var(--color-text);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    border-bottom-color: transparent;
}

.notif-page-count {
    min-width: 20px;
    padding: 1px 7px;
    background: transparent;
    border: none;
    border-radius: var(--radius-full);
    font-size: 11px;
    text-align: center;
    color: var(--color-text-muted);
}

.notif-page-filter.active .notif-page-count {
    background: var(--color-accent-light);
    color: var(--color-accent);
}

.notif-group-label {
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin: var(--space-5) 0 var(--space-3);
    padding-left: 4px;
}

.notif-group-label:first-child {
    margin-top: 0;
}

.notif-page-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.notif-page-item {
    position: relative;
    display: flex;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: var(--color-text);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast), background var(--transition-fast);
}

.notif-page-item:hover {
    border-color: var(--color-accent);
    box-shadow: 0 4px 16px rgba(168,134,42,0.10);
    transform: translateY(-1px);
}

.notif-page-item.unread {
    background: linear-gradient(90deg, var(--color-accent-light) 0%, var(--color-white) 60%);
    border-color: rgba(168,134,42,0.18);
}

.notif-page-item.unread::before {
    content: "";
    position: absolute;
    left: 0;
    top: 16px;
    bottom: 16px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--color-accent);
}

.notif-page-item-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-bg);
    color: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
}

.notif-page-item.unread .notif-page-item-icon {
    background: var(--color-white);
    box-shadow: 0 2px 8px rgba(168,134,42,0.18);
}

.notif-page-item-icon .material-icons-outlined { font-size: 22px; }

.notif-page-item-body { flex: 1; min-width: 0; }

.notif-page-item-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-3);
    margin-bottom: 2px;
}

.notif-page-item-kind {
    display: inline-block;
    padding: 2px 8px;
    background: var(--color-bg);
    border-radius: var(--radius-sm);
    font-size: 10px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.notif-page-item.unread .notif-page-item-kind {
    background: var(--color-accent-light);
    color: var(--color-accent);
}

.notif-page-item-time {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    flex-shrink: 0;
    white-space: nowrap;
}

.notif-page-item-title {
    margin: 4px 0 2px;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    line-height: 1.35;
    color: var(--color-text);
}

.notif-page-item-text {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

.notif-page-item-dot {
    display: none;
}

.notif-page-empty {
    text-align: center;
    padding: var(--space-12) var(--space-4);
    color: var(--color-text-muted);
    background: var(--color-white);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-xl);
}

.notif-page-empty .material-icons-outlined {
    font-size: 56px;
    opacity: 0.35;
    margin-bottom: var(--space-3);
    display: block;
}

.notif-page-empty p {
    margin: 0;
    font-size: var(--font-size-base);
}

.notif-page-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    margin-top: var(--space-6);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

@media (max-width: 640px) {
    .notif-hero {
        flex-direction: column;
        align-items: stretch;
        padding: var(--space-5);
    }
    .notif-hero-actions { justify-content: flex-end; }
    .notif-page-item-head { flex-wrap: wrap; }
}

/* ==================== DARK MODE — HARDCODED-LIGHT OVERRIDES ==================== */
/* Pieces of the UI that hardcode warm cream / black on white (modals, notif
 * hero, the sidebar logo PNG) need explicit dark-mode treatment because they
 * don't go through CSS variables. The login surface is intentionally always
 * light — its `data-theme="light"` override on <html> prevents these rules
 * from firing there. */

/* Sidebar logo — saloni wordmark is a solid black PNG so on a dark sidebar
 * it disappears. Invert luminance so the black pixels render white while
 * keeping transparency. */
[data-theme="dark"] .brand-logo {
    filter: brightness(0) invert(1);
}

/* Notifications hero — was a warm cream gradient hardcoded for light mode.
 * Swap to a deep panel so the page no longer flashes a white slab in dark
 * mode. */
[data-theme="dark"] .notif-hero {
    background: linear-gradient(135deg, #1f1f2e 0%, #181821 100%);
    border-color: var(--color-border);
}

[data-theme="dark"] .notif-hero-icon {
    background: var(--color-bg-tertiary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* Notifications filter pill */
[data-theme="dark"] .notif-page-filter.active {
    background: var(--color-bg-tertiary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* Notifications list — unread row uses a light-side gradient that bleeds
 * white into the right side. Switch the gradient stops for dark mode. */
[data-theme="dark"] .notif-page-item.unread {
    background: linear-gradient(90deg, var(--color-accent-light) 0%, var(--color-bg-tertiary) 60%);
    border-color: rgba(195, 154, 53, 0.30);
}

[data-theme="dark"] .notif-page-item.unread .notif-page-item-icon {
    background: var(--color-bg-tertiary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* App confirm + modal OK buttons — hardcoded charcoal on light + invisible
 * on dark. Use the accent so they stand out. */
[data-theme="dark"] .app-confirm-ok,
[data-theme="dark"] .app-modal-btn-ok {
    background: var(--color-accent);
    color: #1a1a1a;
    border-color: var(--color-accent);
}

[data-theme="dark"] .app-confirm-ok:hover,
[data-theme="dark"] .app-modal-btn-ok:hover:not(:disabled) {
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
    box-shadow: 0 0 0 3px var(--color-accent-light);
}

/* Danger-confirm button stays red even in dark — it's a destructive cue */
[data-theme="dark"] .app-confirm-ok.danger {
    background: #d9534f;
    color: #ffffff;
    border-color: #d9534f;
}

/* App modal scrim is fine; the panel itself uses var(--color-white) which
 * flips to dark automatically. Notif-dropdown-footer uses bg-secondary
 * which also flips. No changes needed for those. */

/* ==================== DARK MODE — SPLIT VIEW OVERLAY ELEMENTS ==================== */
/* Pane header etiketleri ve split-close butonu hardcoded beyaz arka plana
 * sahip — dark mode'da iframe arka planının üstünde okunaksız kalıyordu.
 * Dark zemin + light text ile overlay-uyumlu olacak şekilde override. */
[data-theme="dark"] .viewer-pane-header {
    background: rgba(30, 30, 46, 0.92);
    border-color: var(--color-border);
    color: var(--color-text);
}

[data-theme="dark"] .viewer-pane-header .material-icons-outlined {
    color: var(--color-accent);
}

[data-theme="dark"] .viewer-split-close {
    background: rgba(30, 30, 46, 0.92);
    color: var(--color-text);
    border-color: var(--color-border);
}

[data-theme="dark"] .viewer-split-close:hover {
    background: rgba(40, 40, 60, 1);
    border-color: var(--color-accent);
    color: var(--color-accent);
}

/* Viewer container'ın kendi arka planı dark mode'da derin gri kalsın
 * (iframe yüklenirken görünen letterbox alanı) */
[data-theme="dark"] .report-viewer-container {
    background: var(--color-bg);
}

/* ==================== FOCUS MODE & LANDSCAPE COMPACT ==================== */

/* Header'daki "Sayfaya odaklan" butonu — diğer header butonlarıyla aynı stil */
.focus-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: var(--radius-full);
    background-color: var(--color-bg);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.focus-toggle-btn:hover {
    background-color: var(--color-bg-tertiary);
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.focus-toggle-btn .material-icons-outlined {
    font-size: 20px;
}

/* Focus mode aktif: header ve dock yumuşakça gizlenir, viewer tam ekranı kaplar */
body.focus-mode .top-header {
    transform: translateY(-100%);
    transition: transform 0.25s ease;
    pointer-events: none;
}

body.focus-mode .report-dock {
    transform: translateY(100%);
    transition: transform 0.25s ease;
    pointer-events: none;
}

/* Geri dönüş animasyonu için baseline transition'ı her zaman tanımla */
.top-header,
.report-dock {
    transition: transform 0.25s ease;
}

/* Focus mode aktifken viewer container tüm viewport'u kaplar.
 * - top:0, bottom:0 — header ve dock gizli
 * - left:0 — sidebar gizli olduğu için sol boşluğa gerek yok (yoksa solda
 *   sidebar-width kadar boş kalıyor ve rapor sağa kayık görünüyor) */
body.focus-mode .report-viewer-container {
    top: 0;
    left: 0 !important;
    right: 0;
    bottom: 0;
}

/* Sidebar'ı da gizle focus mode'da (rapor okuma deneyimi temiz olsun) */
body.focus-mode .sidebar {
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    pointer-events: none;
}

body.focus-mode .sidebar-rail-expand {
    display: none !important;
}

body.focus-mode .main-wrapper {
    margin-left: 0;
}

/* Floating "X" — sadece focus mode aktifken görünür */
.focus-mode-exit {
    position: fixed;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.92);
    color: var(--color-text);
    border-radius: 50%;
    box-shadow: var(--shadow-md);
    cursor: pointer;
    z-index: var(--z-toast);
    display: none;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

body.focus-mode .focus-mode-exit {
    display: flex;
}

.focus-mode-exit:hover {
    background: var(--color-accent);
    color: #fff;
    transform: rotate(90deg);
}

.focus-mode-exit .material-icons-outlined {
    font-size: 20px;
}

[data-theme="dark"] .focus-mode-exit {
    background: rgba(30, 30, 46, 0.92);
    color: var(--color-text);
    border-color: var(--color-border);
}

/* ── Rapor ikon kontrol pill'i (Yeni ikonlar / Renkli) ──
   Ayrık dursun: dock barı (48px) varken üstüne kalk, rapor tam
   görüntülenirken gizlen — hiçbir şeyin üstüne binmesin. */
#iconControl {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: var(--z-fixed);
    display: flex;
    gap: 10px;
    align-items: center;
    max-width: calc(100vw - 24px);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 7px 14px;
    box-shadow: var(--shadow-lg);
    font-size: 13px;
    transition: bottom var(--transition-normal), opacity var(--transition-fast);
}

body.has-dock #iconControl {
    bottom: 60px;
}

body.viewer-active #iconControl,
body.focus-mode #iconControl {
    display: none;
}

@media (max-width: 768px) {
    /* Kategori başlığındaki butonlar (Renk anlamları + Sıralama Modu)
       dar ekranda taşmasın, gerekirse alt satıra sarsın. */
    .page-header {
        flex-wrap: wrap;
        row-gap: 10px;
    }
}

@media (max-width: 576px) {
    #iconControl {
        right: 10px;
        bottom: 10px;
        gap: 7px;
        padding: 6px 11px;
        font-size: 12px;
    }
    body.has-dock #iconControl {
        bottom: 56px;
    }
}

/* Landscape compact — yatay mobilde header/dock daralt, butonlar küçül.
 * height ≤ 500px AND orientation: landscape — sadece dar yataylar.
 * Toplam +28px geri kazanım. */
@media (orientation: landscape) and (max-height: 500px) {
    .top-header {
        height: 40px;
        padding: 0 var(--space-2);
    }
    .top-header .breadcrumb {
        font-size: 11px;
    }
    .report-dock {
        height: 36px;
        padding: 0 var(--space-2);
    }
    .dock-tab {
        height: 28px;
        padding: 0 var(--space-2);
        font-size: 11px;
    }
    .dock-tab-close {
        width: 20px;
        height: 20px;
    }
    .dock-tab-close .material-icons-outlined {
        font-size: 14px;
    }
    .header-search-btn,
    .notif-bell,
    .theme-toggle-btn,
    .focus-toggle-btn,
    .user-btn {
        width: 32px !important;
        height: 32px !important;
    }
    .header-search-btn .material-icons-outlined,
    .notif-bell .material-icons-outlined,
    .theme-toggle-btn .material-icons-outlined,
    .focus-toggle-btn .material-icons-outlined,
    .user-avatar .material-icons-outlined {
        font-size: 16px !important;
    }
    /* Focus mode + landscape: header tamamen yok, viewer 100vw × 100vh */
    body.focus-mode .report-viewer-container {
        top: 0;
        left: 0 !important;
        right: 0;
        bottom: 0;
    }
}

/* ==================== CMD PALETTE — QUERY CHIPS ==================== */
.cmd-palette-queries {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 var(--space-3) var(--space-2);
}

.cmd-palette-query-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    font-family: inherit;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.cmd-palette-query-chip:hover {
    background: var(--color-accent-light);
    color: var(--color-accent);
    border-color: var(--color-accent);
}

.cmd-palette-query-chip .material-icons-outlined {
    font-size: 14px;
    opacity: 0.6;
}

/* ==================== MENU WIDGETS — HIDE/RESTORE ==================== */
/* "Favorilerim" ve "Son Görüntülenenler" section'larında küçük gizle butonu;
 * gizlenenler menüde geri yüklenebilen chip'lerle gösterilir. */
.recents-section-header {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.widget-hide-btn {
    margin-left: auto;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}

.recents-section:hover .widget-hide-btn {
    opacity: 1;
}

.widget-hide-btn:hover {
    background: var(--color-bg);
    color: var(--color-accent);
}

.widget-hide-btn .material-icons-outlined {
    font-size: 16px;
}

.widgets-restore-bar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: var(--space-4) 0;
    padding: var(--space-2) var(--space-3);
    background: var(--color-bg);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    flex-wrap: wrap;
}

/* CSS `display:flex` HTML `[hidden]`'i ezdiği için explicit override —
 * gizli widget yokken bar görünmesin. */
.widgets-restore-bar[hidden] {
    display: none;
}

.widget-restore-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    color: var(--color-text);
    font-size: var(--font-size-xs);
    font-family: inherit;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.widget-restore-chip:hover {
    background: var(--color-accent-light);
    color: var(--color-accent);
    border-color: var(--color-accent);
}

.widget-restore-chip .material-icons-outlined {
    font-size: 14px;
}

/* ==================== EMPTY STATE — STANDARDIZE ==================== */
/* Generic empty state component — büyük yumuşak ikon + başlık + alt
 * yazı + opsiyonel CTA. Tüm boş list/grid pages'te kullanılır. */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-12) var(--space-4);
    color: var(--color-text-secondary);
}

.empty-state-art {
    position: relative;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-accent-light) 0%, transparent 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-4);
}

.empty-state-art::before,
.empty-state-art::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: var(--color-accent);
    opacity: 0.15;
}

.empty-state-art::before {
    width: 12px;
    height: 12px;
    top: 6px;
    right: 8px;
}

.empty-state-art::after {
    width: 8px;
    height: 8px;
    bottom: 10px;
    left: 4px;
    opacity: 0.10;
}

.empty-state-art .material-icons-outlined {
    font-size: 44px;
    color: var(--color-accent);
    opacity: 0.85;
}

.empty-state-title {
    margin: 0 0 var(--space-2);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

.empty-state-text {
    margin: 0 0 var(--space-4);
    font-size: var(--font-size-sm);
    line-height: 1.5;
    max-width: 380px;
    color: var(--color-text-secondary);
}

.empty-state-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 8px 16px;
    background: var(--color-accent);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    transition: background var(--transition-fast), transform var(--transition-fast);
}

.empty-state-cta:hover {
    background: var(--color-accent-hover);
    transform: translateY(-1px);
}

[data-theme="dark"] .empty-state-art {
    background: linear-gradient(135deg, rgba(168, 134, 42, 0.15) 0%, transparent 100%);
}

/* ==================== REPORT MESSAGES — DOCK BUTTON + PANEL ==================== */

/* Dock'taki mesaj butonu — not butonuyla aynı görsel dil, sayaç rozetli */
.dock-msg-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: var(--radius-md);
    background: var(--color-bg);
    color: var(--color-text-secondary);
    border: none;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.dock-msg-btn[hidden] { display: none; }

.dock-msg-btn:hover {
    background: var(--color-accent-light);
    color: var(--color-accent);
}

.dock-msg-count {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--color-accent);
    color: #fff;
    font-size: 10px;
    font-weight: var(--font-weight-bold);
    line-height: 16px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--color-white);
}
.dock-msg-count[hidden] { display: none; }

/* Mesaj paneli — viewer'ın sağında slide-in. position:fixed body-level,
 * her CSS cache durumunda viewport-relative. */
.report-msg-panel {
    position: fixed;
    top: var(--header-height);
    right: 0;
    bottom: 48px;        /* dock yüksekliği */
    width: 360px;
    max-width: 100vw;
    background: var(--color-white);
    border-left: 1px solid var(--color-border);
    box-shadow: -8px 0 24px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    z-index: 240;        /* viewer (220) üstünde, header (250) altında */
    transform: translateX(100%);
    transition: transform 0.22s ease;
}
.report-msg-panel[hidden] { display: none; }
.report-msg-panel.open { transform: translateX(0); }

.report-msg-panel-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg);
}

.report-msg-panel-title {
    flex: 1;
    margin: 0;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.report-msg-panel-close {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.report-msg-panel-close:hover {
    background: var(--color-bg-tertiary);
    color: var(--color-accent);
}

.report-msg-list {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.report-msg-loading,
.report-msg-error {
    padding: var(--space-4);
    text-align: center;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.report-msg-item {
    padding: var(--space-2) var(--space-3);
    background: var(--color-bg);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
}

.report-msg-item.is-mine {
    background: var(--color-accent-light);
    border-color: rgba(168, 134, 42, 0.18);
}

.report-msg-item.deleted {
    background: transparent;
    border-style: dashed;
    color: var(--color-text-muted);
    text-align: center;
    font-size: var(--font-size-xs);
    padding: 6px;
}

.report-msg-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: 4px;
    font-size: var(--font-size-xs);
}

.report-msg-author {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

.report-msg-time {
    color: var(--color-text-muted);
    flex: 1;
}

.report-msg-delete {
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    border-radius: var(--radius-sm);
    opacity: 0.6;
}
.report-msg-delete:hover {
    opacity: 1;
    color: #d9534f;
}
.report-msg-delete .material-icons-outlined { font-size: 14px; }

.report-msg-body {
    color: var(--color-text);
    font-size: var(--font-size-sm);
    line-height: 1.45;
    word-break: break-word;
}

.report-msg-mention {
    color: var(--color-text-muted);
    font-weight: var(--font-weight-semibold);
}
.report-msg-mention.is-real {
    color: var(--color-accent);
    background: var(--color-accent-light);
    padding: 1px 5px;
    border-radius: 4px;
}

/* Composer */
.report-msg-composer {
    position: relative;
    padding: var(--space-3);
    border-top: 1px solid var(--color-border);
    background: var(--color-white);
}

.report-msg-composer textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: var(--font-size-sm);
    color: var(--color-text);
    background: var(--color-white);
    resize: vertical;
    min-height: 56px;
    box-sizing: border-box;
}
.report-msg-composer textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-light);
}

.report-msg-composer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 6px;
}

.report-msg-hint {
    color: var(--color-text-muted);
    font-size: 11px;
}
.report-msg-hint kbd {
    padding: 1px 4px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 3px;
    font-size: 10px;
    font-family: ui-monospace, monospace;
}

.report-msg-send {
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    background: var(--color-accent);
    color: #fff;
    border-radius: var(--radius-md);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-fast), transform var(--transition-fast);
}
.report-msg-send:hover:not(:disabled) {
    background: var(--color-accent-hover);
    transform: translateY(-1px);
}
.report-msg-send:disabled {
    opacity: 0.55;
    cursor: progress;
}

/* Mention autocomplete popup */
.report-msg-mention-pop {
    position: absolute;
    bottom: calc(100% - 4px);
    left: var(--space-3);
    right: var(--space-3);
    max-height: 200px;
    overflow-y: auto;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 5;
}
.report-msg-mention-pop[hidden] { display: none; }

.report-msg-mention-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 6px 10px;
    cursor: pointer;
    color: var(--color-text);
    font-size: var(--font-size-sm);
}
.report-msg-mention-item:hover,
.report-msg-mention-item.active {
    background: var(--color-accent-light);
    color: var(--color-accent);
}

.report-msg-mention-item .material-icons-outlined {
    font-size: 18px;
    opacity: 0.7;
}

.report-msg-mention-label { font-weight: var(--font-weight-semibold); }
.report-msg-mention-sub {
    font-size: 11px;
    color: var(--color-text-muted);
    margin-top: -1px;
}

/* Mobilde panel: tam genişlik, sağdan kayar */
@media (max-width: 576px) {
    .report-msg-panel {
        width: 100vw;
        max-width: 100vw;
        top: 56px;
        bottom: 48px;
        border-left: none;
    }
}

/* Dark mode override — panel light bg'lerini düzelt */
[data-theme="dark"] .report-msg-panel {
    background: var(--color-bg-secondary);
    border-left-color: var(--color-border);
}
[data-theme="dark"] .report-msg-panel-header,
[data-theme="dark"] .report-msg-composer {
    background: var(--color-bg-tertiary);
}

/* ==================== REPORT MESSAGES — PHASE 2 ==================== */

/* Mesaj başlığı action butonları — hover'da görünür */
.report-msg-actions {
    display: inline-flex;
    gap: 2px;
    margin-left: auto;
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.report-msg-item:hover .report-msg-actions,
.report-msg-item:focus-within .report-msg-actions {
    opacity: 1;
}

.report-msg-actions button {
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    border-radius: 4px;
}

.report-msg-actions button:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--color-accent);
}

.report-msg-actions .report-msg-delete:hover {
    color: #d9534f;
}

.report-msg-actions button .material-icons-outlined {
    font-size: 14px;
}

.report-msg-edited {
    margin-left: 4px;
    font-size: 10px;
    color: var(--color-text-muted);
    font-style: italic;
}

/* Markdown elementleri içeride */
.report-msg-body code {
    padding: 1px 5px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 3px;
    font-family: ui-monospace, Consolas, monospace;
    font-size: 12px;
}

.report-msg-body strong {
    font-weight: var(--font-weight-bold);
}

.report-msg-body em {
    font-style: italic;
}

/* Reaksiyon chip'leri */
.report-msg-reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}

.report-msg-reaction {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    cursor: pointer;
    font-size: 12px;
    color: var(--color-text);
    transition: all var(--transition-fast);
}

.report-msg-reaction:hover {
    background: var(--color-bg);
    border-color: var(--color-accent);
}

.report-msg-reaction.mine {
    background: var(--color-accent-light);
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.report-msg-reaction-emoji {
    font-size: 14px;
    line-height: 1;
}

.report-msg-reaction-count {
    font-weight: var(--font-weight-semibold);
}

/* Emoji picker — buton altında floating popup */
.report-msg-react-picker {
    display: flex;
    gap: 4px;
    padding: 6px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
}

.report-msg-react-picker button {
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: var(--radius-sm);
    font-size: 18px;
    transition: background var(--transition-fast), transform var(--transition-fast);
}

.report-msg-react-picker button:hover {
    background: var(--color-accent-light);
    transform: scale(1.15);
}

/* Composer edit modu */
.report-msg-composer.editing textarea {
    border-color: var(--color-accent);
    background: var(--color-accent-light);
}

.report-msg-edit-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    margin-bottom: 6px;
    background: var(--color-accent-light);
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-sm);
    color: var(--color-accent);
    font-size: 12px;
}

.report-msg-edit-chip .material-icons-outlined {
    font-size: 14px;
}

.report-msg-edit-chip button {
    margin-left: auto;
    padding: 2px 8px;
    border: none;
    background: transparent;
    color: var(--color-accent);
    cursor: pointer;
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    border-radius: 3px;
}

.report-msg-edit-chip button:hover {
    background: var(--color-accent);
    color: #fff;
}

/* Dark mode override'ları */
[data-theme="dark"] .report-msg-reaction {
    background: var(--color-bg-tertiary);
    border-color: var(--color-border);
}
[data-theme="dark"] .report-msg-reaction:hover {
    background: var(--color-bg-secondary);
}
[data-theme="dark"] .report-msg-react-picker {
    background: var(--color-bg-tertiary);
    border-color: var(--color-border);
}
[data-theme="dark"] .report-msg-body code {
    background: var(--color-bg-tertiary);
}

/* ==================== RAPOR TAZELİK NOKTASI ==================== */
/* Kart köşesindeki küçük durum noktası: yeşil=zamanında, amber=gecikmiş,
   kırmızı=son yenileme hatalı, gri=otomatik zamanlama yok. JS renk/tooltip'i
   /api/reports/refresh-info'dan doldurup [hidden]'ı kaldırır. */
.refresh-dot {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: var(--radius-full);
    background: var(--color-text-muted);
    border: 2px solid var(--color-white);
    box-shadow: var(--shadow-sm);
    z-index: 9;
    cursor: help;
    pointer-events: auto;
}
.refresh-dot[hidden] { display: none; }
/* Tam rapor kartında sol-üst (favori yıldızı sağ-üstte) */
.report-card .refresh-dot { top: var(--space-2); left: var(--space-2); }
/* Yatay kompakt kartlarda sağ-üst köşe */
.recents-card { position: relative; }
.recents-card .refresh-dot { top: 6px; right: 6px; }

.refresh-dot.rd-fresh { background: var(--color-success); }
.refresh-dot.rd-stale { background: var(--color-warning); }
.refresh-dot.rd-error { background: var(--color-danger); }
.refresh-dot.rd-manual,
.refresh-dot.rd-unknown { background: var(--color-text-muted); }