/* ==========================================================
   ŞİFA AKADEMİ — ORTAK SAKİN FÜTÜRİSTİK TEMA
   Tüm rol ve içerik ekranlarında açık/koyu tema uyumu.
   ========================================================== */

:root {
    --fx-teal: #0f766e;
    --fx-teal-bright: #20a99b;
    --fx-navy: #1e3a5f;
    --fx-gold: #d7a94b;
    --fx-violet: #7866a8;
    --fx-coral: #c96a58;
    --fx-panel-border: rgba(15, 118, 110, 0.18);
    --fx-panel-shadow: 0 16px 38px -30px rgba(13, 82, 80, 0.68);
    --fx-glow: rgba(32, 169, 155, 0.12);
}

[data-theme="dark"] {
    --fx-teal: #38a99d;
    --fx-teal-bright: #56c2b7;
    --fx-navy: #5277a7;
    --fx-gold: #e0b85f;
    --fx-violet: #9586c2;
    --fx-coral: #d77b68;
    --fx-panel-border: rgba(91, 190, 180, 0.2);
    --fx-panel-shadow: 0 18px 44px -30px rgba(0, 0, 0, 0.95);
    --fx-glow: rgba(65, 190, 177, 0.08);
    --success: #4ade80;
    --warning: #f6c453;
    --danger: #fb7185;
    --info: #56c2e8;
}

html,
body {
    background-color: var(--bg-main);
}

body {
    background-image:
        radial-gradient(circle at 7% 5%, rgba(32, 169, 155, 0.075), transparent 25rem),
        radial-gradient(circle at 94% 12%, rgba(30, 58, 95, 0.055), transparent 28rem),
        radial-gradient(circle at 76% 92%, rgba(215, 169, 75, 0.045), transparent 24rem);
    background-attachment: fixed;
}

[data-theme="dark"] body {
    background-image:
        radial-gradient(circle at 7% 5%, rgba(32, 169, 155, 0.07), transparent 26rem),
        radial-gradient(circle at 94% 12%, rgba(82, 119, 167, 0.055), transparent 30rem),
        radial-gradient(circle at 76% 92%, rgba(215, 169, 75, 0.035), transparent 25rem);
}

.app-wrapper,
.app-main,
.public-page,
.auth-page {
    background-color: transparent !important;
}

/* Ortak yüzeyler */
.card,
.dashboard-card-widget,
.follower-stat-card,
.admin-stat-box,
.action-card,
.mobile-reader-card,
.mobile-item-card,
.streak-card-container,
.discover-panel,
.help-topic-card,
.reading-modal-card,
.public-content-card {
    border-color: var(--fx-panel-border) !important;
    background:
        radial-gradient(circle at 100% 0, var(--fx-glow), transparent 34%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0)),
        var(--bg-surface) !important;
    box-shadow: var(--fx-panel-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.58) !important;
}

[data-theme="dark"] .card,
[data-theme="dark"] .dashboard-card-widget,
[data-theme="dark"] .follower-stat-card,
[data-theme="dark"] .admin-stat-box,
[data-theme="dark"] .action-card,
[data-theme="dark"] .mobile-reader-card,
[data-theme="dark"] .mobile-item-card,
[data-theme="dark"] .streak-card-container,
[data-theme="dark"] .discover-panel,
[data-theme="dark"] .help-topic-card,
[data-theme="dark"] .reading-modal-card,
[data-theme="dark"] .public-content-card {
    background:
        radial-gradient(circle at 100% 0, var(--fx-glow), transparent 34%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0)),
        var(--bg-surface) !important;
    box-shadow: var(--fx-panel-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
}

.card-header,
.dashboard-card-header {
    border-color: var(--fx-panel-border) !important;
    background:
        linear-gradient(90deg, rgba(32, 169, 155, 0.075), rgba(30, 58, 95, 0.025) 60%, transparent),
        var(--bg-surface) !important;
}

[data-theme="dark"] .card-header,
[data-theme="dark"] .dashboard-card-header {
    background:
        linear-gradient(90deg, rgba(32, 169, 155, 0.105), rgba(82, 119, 167, 0.045) 60%, transparent),
        var(--bg-surface) !important;
}

.card-footer {
    border-color: var(--fx-panel-border) !important;
    background: rgba(15, 118, 110, 0.035) !important;
}

[data-theme="dark"] .card-footer {
    background: rgba(32, 169, 155, 0.045) !important;
}

/* Başlıklar ve küçük vurgu çizgileri */
.page-header,
.discover-heading {
    position: relative;
}

.page-title,
.page-header h1,
.discover-heading h1,
.content-container > div:first-child h1 {
    letter-spacing: -0.025em;
}

.page-title::after,
.discover-heading h1::after {
    content: "";
    display: block;
    width: 52px;
    height: 3px;
    margin-top: 0.5rem;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--fx-teal-bright), var(--fx-gold));
    box-shadow: 0 0 14px rgba(32, 169, 155, 0.18);
}

/* Formlar */
.form-control,
.form-select,
.form-textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="number"],
input[type="date"],
select,
textarea {
    color: var(--text-primary);
    border-color: var(--border) !important;
    background-color: var(--bg-surface-secondary) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
    transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] .form-textarea,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="url"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    color-scheme: dark;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.form-control:focus,
.form-select:focus,
.form-textarea:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
select:focus,
textarea:focus {
    border-color: var(--fx-teal-bright) !important;
    box-shadow: 0 0 0 3px rgba(32, 169, 155, 0.13) !important;
    outline: none;
}

/* Eylemler ve sekmeler */
.btn-primary {
    border-color: #0f7169 !important;
    background: linear-gradient(135deg, #126f69, #176c57) !important;
    color: #ffffff !important;
    box-shadow: 0 9px 22px -15px rgba(15, 118, 110, 0.95);
}

.btn-primary:hover,
.btn-primary:focus-visible {
    border-color: #0c615b !important;
    background: linear-gradient(135deg, #0d625d, #125b4a) !important;
    box-shadow: 0 11px 25px -14px rgba(15, 118, 110, 1);
}

.btn-secondary,
.btn-outline {
    border-color: var(--fx-panel-border) !important;
    background: linear-gradient(145deg, var(--bg-surface), var(--bg-surface-secondary)) !important;
}

.btn-secondary:hover,
.btn-outline:hover {
    color: var(--fx-teal) !important;
    border-color: rgba(32, 169, 155, 0.42) !important;
    background: rgba(32, 169, 155, 0.08) !important;
}

.nav-link.active,
.sidebar-link.active,
.bottom-nav-item.active,
.follower-tab-item.active,
.ranking-tab-btn.active {
    color: var(--fx-teal) !important;
}

.sidebar-link.active {
    border-color: rgba(32, 169, 155, 0.24) !important;
    background: linear-gradient(90deg, rgba(32, 169, 155, 0.15), rgba(30, 58, 95, 0.045)) !important;
}

.ranking-tab-btn.active,
.follower-tab-item.active {
    background: rgba(32, 169, 155, 0.12) !important;
}

/* Tablo ve liste yüzeyleri */
.table-responsive {
    border-color: var(--fx-panel-border);
    border-radius: var(--radius-md);
}

.table th {
    color: var(--text-secondary);
    border-color: var(--border) !important;
    background: linear-gradient(180deg, rgba(32, 169, 155, 0.075), rgba(30, 58, 95, 0.025)), var(--bg-surface-secondary) !important;
}

.table td {
    border-color: var(--border) !important;
}

.table tbody tr {
    transition: background-color 150ms ease;
}

.table tbody tr:hover {
    background-color: rgba(32, 169, 155, 0.055) !important;
}

[data-theme="dark"] .table tbody tr:hover {
    background-color: rgba(55, 170, 158, 0.075) !important;
}

.progress-track {
    background: var(--bg-surface-tertiary) !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08);
}

.progress-fill {
    background: linear-gradient(90deg, var(--fx-teal), var(--fx-teal-bright), var(--fx-gold)) !important;
    box-shadow: 0 0 10px rgba(32, 169, 155, 0.18);
}

/* Akordeonlar ve seçim kartları */
.book-accordion-header,
.choice-card-label,
details > summary {
    border-color: var(--fx-panel-border) !important;
    background: linear-gradient(90deg, rgba(32, 169, 155, 0.055), transparent), var(--bg-surface) !important;
}

.book-accordion-header:hover,
.choice-card-label:hover,
details > summary:hover {
    border-color: rgba(32, 169, 155, 0.38) !important;
    background: rgba(32, 169, 155, 0.07) !important;
}

/* Header, yan menü ve alt navigasyon */
.app-header,
.admin-header,
.public-header,
.bottom-nav {
    border-color: var(--fx-panel-border) !important;
    background: rgba(255, 255, 255, 0.86) !important;
    box-shadow: 0 8px 28px -24px rgba(13, 82, 80, 0.58);
    backdrop-filter: blur(16px) saturate(135%);
    -webkit-backdrop-filter: blur(16px) saturate(135%);
}

[data-theme="dark"] .app-header,
[data-theme="dark"] .admin-header,
[data-theme="dark"] .public-header,
[data-theme="dark"] .bottom-nav {
    background: rgba(22, 25, 26, 0.9) !important;
    box-shadow: 0 8px 28px -24px rgba(0, 0, 0, 0.95);
}

.app-sidebar {
    border-color: var(--fx-panel-border) !important;
    background:
        radial-gradient(circle at 15% 3%, rgba(32, 169, 155, 0.1), transparent 16rem),
        linear-gradient(180deg, var(--bg-surface), var(--bg-main)) !important;
}

[data-theme="dark"] .app-sidebar {
    background:
        radial-gradient(circle at 15% 3%, rgba(32, 169, 155, 0.085), transparent 16rem),
        linear-gradient(180deg, #191d1e, #131516) !important;
}

.header-action-btn:hover,
.header-btn:hover,
.bottom-nav-item.active {
    background: rgba(32, 169, 155, 0.09) !important;
}

.user-avatar-wrap,
.chat-avatar-icon {
    border: 1px solid rgba(32, 169, 155, 0.22);
    box-shadow: 0 0 0 3px rgba(32, 169, 155, 0.045);
}

/* Mesajlaşma ve modallar */
.chat-shell,
.chat-sidebar,
.chat-main,
.chat-header,
.chat-composer,
.modal-dialog,
.modal-content {
    border-color: var(--fx-panel-border) !important;
    background-color: var(--bg-surface) !important;
}

.chat-header,
.chat-composer {
    background-image: linear-gradient(90deg, rgba(32, 169, 155, 0.055), transparent) !important;
}

.modal-backdrop,
.reading-modal-backdrop {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Sabit açık renk kullanan bilgi yüzeylerinin tema karşılıkları */
.task-note-surface,
.chat-muted-box,
.admin-warning-surface,
.follower-alert-surface {
    color: #8a4b08 !important;
    border-color: rgba(215, 169, 75, 0.4) !important;
    background: linear-gradient(135deg, rgba(215, 169, 75, 0.13), rgba(201, 106, 88, 0.045)), var(--bg-surface) !important;
}

.program-success-surface {
    color: var(--text-primary) !important;
    border-color: rgba(32, 169, 155, 0.32) !important;
    background: linear-gradient(135deg, rgba(32, 169, 155, 0.11), rgba(30, 58, 95, 0.025)), var(--bg-surface) !important;
}

#notification-permission-denied-notice {
    color: var(--danger) !important;
    border-color: var(--danger-border) !important;
    background: linear-gradient(135deg, var(--danger-bg), transparent), var(--bg-surface) !important;
}

[data-theme="dark"] .task-note-surface,
[data-theme="dark"] .chat-muted-box,
[data-theme="dark"] .admin-warning-surface,
[data-theme="dark"] .follower-alert-surface {
    color: #e9bd67 !important;
    border-color: rgba(224, 184, 95, 0.27) !important;
    background: linear-gradient(135deg, rgba(215, 169, 75, 0.11), rgba(201, 106, 88, 0.035)), var(--bg-surface) !important;
}

/* Giriş ve herkese açık sayfalar */
.auth-page::before,
.public-page::before {
    content: "";
    position: fixed;
    width: 260px;
    height: 260px;
    right: -110px;
    top: -120px;
    border-radius: 50%;
    border: 1px solid rgba(32, 169, 155, 0.12);
    box-shadow: 0 0 0 34px rgba(32, 169, 155, 0.025), 0 0 0 72px rgba(30, 58, 95, 0.018);
    pointer-events: none;
}

@media (hover: hover) {
    .card,
    .mobile-reader-card,
    .mobile-item-card,
    .help-topic-card {
        transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
    }

    .card:hover,
    .mobile-reader-card:hover,
    .mobile-item-card:hover,
    .help-topic-card:hover {
        border-color: rgba(32, 169, 155, 0.34) !important;
        box-shadow: 0 20px 42px -30px rgba(13, 82, 80, 0.82), inset 0 1px 0 rgba(255, 255, 255, 0.48) !important;
    }
}

@media (max-width: 600px) {
    body {
        background-image:
            radial-gradient(circle at 0 0, rgba(32, 169, 155, 0.055), transparent 18rem),
            radial-gradient(circle at 100% 18%, rgba(30, 58, 95, 0.035), transparent 20rem);
        background-attachment: scroll;
    }

    .card,
    .dashboard-card-widget,
    .mobile-reader-card,
    .mobile-item-card,
    .streak-card-container,
    .discover-panel {
        border-radius: 13px !important;
        box-shadow: 0 12px 28px -25px rgba(13, 82, 80, 0.62), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
    }

    [data-theme="dark"] .card,
    [data-theme="dark"] .dashboard-card-widget,
    [data-theme="dark"] .mobile-reader-card,
    [data-theme="dark"] .mobile-item-card,
    [data-theme="dark"] .streak-card-container,
    [data-theme="dark"] .discover-panel {
        box-shadow: 0 12px 28px -24px rgba(0, 0, 0, 0.88), inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .card,
    .btn,
    .sidebar-link,
    .bottom-nav-item,
    .mobile-reader-card,
    .mobile-item-card {
        transition: none !important;
    }
}

/* ==========================================================
   OKUNABİLİRLİK VE ALAN VERİMLİLİĞİ
   Bu dosya son yüklendiği için eski sayfa içi renkleri güvenle dengeler.
   ========================================================== */
.reader-dashboard-grid {
    align-items: start !important;
}

.reader-dashboard-grid > .dashboard-hero-section {
    min-height: 0 !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    background:
        radial-gradient(circle at 86% 20%, rgba(232, 201, 153, 0.2), transparent 28%),
        linear-gradient(125deg, #123c55 0%, #0f766e 55%, #26724e 100%) !important;
    box-shadow: 0 14px 36px -22px rgba(15, 78, 91, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}

.reader-dashboard-grid > .dashboard-hero-section .dashboard-welcome-title,
.reader-dashboard-grid > .dashboard-hero-section > div,
.reader-dashboard-grid > .dashboard-hero-section > div > div {
    color: #ffffff !important;
}

.reader-dashboard-grid > .dashboard-hero-section .hero-metric-value {
    color: #ffe29a !important;
}

[data-theme="dark"] .reader-dashboard-grid > .dashboard-hero-section {
    background:
        radial-gradient(circle at 86% 20%, rgba(215, 169, 75, 0.17), transparent 28%),
        linear-gradient(125deg, #142d42 0%, #0d5555 58%, #244d39 100%) !important;
}

.content-container .tasks-page-grid {
    align-items: start !important;
}

.content-container .tasks-page-grid > section {
    align-self: start !important;
}

.content-container {
    padding-top: 0.75rem !important;
    padding-bottom: 1.25rem !important;
}

.admin-content-container {
    padding: clamp(0.75rem, 2vw, 1.1rem) !important;
}

.content-container > .page-header,
.content-container > div.page-header {
    margin-bottom: 0.8rem !important;
}

.card-header,
.dashboard-card-header {
    padding: 0.65rem 0.8rem !important;
}

.card-body,
.dashboard-card-body {
    padding: 0.8rem !important;
}

.card-body[style*="padding: 0"] {
    padding: 0 !important;
}

.card-footer {
    padding: 0.6rem 0.8rem !important;
}

.form-group {
    margin-bottom: 0.8rem !important;
}

.form-grid-2,
.admin-grid-2col,
.dashboard-grid-cards,
.metrics-grid,
.follower-stats-grid,
.admin-stats-grid,
.books-catalog-grid {
    gap: 0.75rem !important;
}

.table th,
.table td {
    padding: 0.62rem 0.72rem !important;
    vertical-align: middle;
}

.empty-state,
.table td[colspan] {
    min-height: 0 !important;
    padding: 1.2rem 0.9rem !important;
}

main [style*="text-align: center"][style*="padding: 3rem"],
main [style*="text-align: center"][style*="padding: 2.5rem"] {
    min-height: 0 !important;
    padding: 1.25rem 0.9rem !important;
}

.program-success-surface {
    padding: 0.85rem 1rem !important;
    margin-bottom: var(--panel-gap) !important;
}

.program-success-surface h2 {
    color: var(--success-text, #166534) !important;
}

.program-success-surface p {
    color: color-mix(in srgb, var(--success-text, #166534) 82%, var(--text-secondary)) !important;
}

.program-stage-complete-label {
    color: var(--success-text, #166534) !important;
}

.task-completed-surface {
    color: var(--success-text, #166534) !important;
    border-color: color-mix(in srgb, var(--success-text, #166534) 45%, var(--border)) !important;
    background: color-mix(in srgb, var(--success-text, #166534) 9%, var(--bg-surface)) !important;
}

.follower-current-task-card {
    border-color: color-mix(in srgb, var(--fx-teal) 30%, var(--border)) !important;
}

.follower-current-task-header {
    background: linear-gradient(90deg, rgba(32, 169, 155, 0.1), transparent), var(--bg-surface) !important;
}

.follower-current-task-title {
    color: var(--fx-teal) !important;
}

.follower-alert-surface > div > div:first-child,
.follower-alert-surface > div > div:last-child {
    color: inherit !important;
}

.reader-message-filter.btn-secondary {
    color: var(--info-text, #0369a1) !important;
    border-color: color-mix(in srgb, var(--info-text, #0369a1) 26%, var(--border)) !important;
    background: color-mix(in srgb, var(--info-text, #0369a1) 8%, var(--bg-surface)) !important;
}

.reader-unread-dot {
    background: var(--info-text, #0369a1) !important;
    border-color: var(--bg-surface) !important;
}

#stage2_auto_complete_notice {
    color: var(--success-text, #166534) !important;
    border-color: color-mix(in srgb, var(--success-text, #166534) 32%, var(--border)) !important;
    background: color-mix(in srgb, var(--success-text, #166534) 8%, var(--bg-surface)) !important;
}

#chapter_helper_note,
#all_books_completed_notice {
    color: var(--success-text, #166534) !important;
    border-color: color-mix(in srgb, var(--success-text, #166534) 28%, var(--border)) !important;
    background: color-mix(in srgb, var(--success-text, #166534) 7%, var(--bg-surface)) !important;
}

.wizard-step-pill.completed {
    color: var(--success-text, #166534) !important;
    border-color: color-mix(in srgb, var(--success-text, #166534) 35%, var(--border)) !important;
    background: color-mix(in srgb, var(--success-text, #166534) 7%, var(--bg-surface)) !important;
}

.wizard-step-pill.completed .step-num {
    background: #047857 !important;
    color: #ffffff !important;
}

[data-theme="dark"] .wizard-step-pill.completed .step-num {
    background: #15803d !important;
}

@media (min-width: 821px) {
    .reader-dashboard-grid > .dashboard-follower-box,
    .reader-dashboard-grid > .dashboard-announcements-box {
        align-self: start !important;
    }
}

@media (max-width: 600px) {
    .content-container {
        width: calc(100% - 20px) !important;
        padding-top: 0.6rem !important;
        padding-bottom: calc(var(--bottom-nav-height, 56px) + 0.85rem) !important;
    }

    .card-header,
    .dashboard-card-header,
    .card-body,
    .dashboard-card-body {
        padding: 0.68rem !important;
    }

    .reader-dashboard-grid > .dashboard-hero-section {
        padding: 0.85rem 0.9rem !important;
    }

    .reader-dashboard-grid > .dashboard-hero-section > div {
        gap: 0.65rem !important;
    }

    .reader-dashboard-grid > .dashboard-hero-section > div > div:last-child {
        width: 100%;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem !important;
    }

    .reader-dashboard-grid > .dashboard-hero-section > div > div:last-child > div {
        min-width: 0 !important;
        padding: 0.42rem 0.55rem !important;
    }

    .table th,
    .table td {
        padding: 0.55rem 0.6rem !important;
    }

    .empty-state,
    .table td[colspan] {
        padding: 1rem 0.7rem !important;
    }

    .profile-container .metrics-grid > .card:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}