/* =====================================================
   T3 ISTANBUL - PREMIUM MERKEZI TEMA SISTEMI
   Bu dosya tum diger CSS dosyalarindan SONRA yuklenir.
   Her tema sadece accent degil; sayfa, kart, soft yuzey ve border paletini de degistirir.
===================================================== */

:root,
:root[data-theme="light"] {
    color-scheme: light;
    --page: #f5f6f8;
    --surface: #ffffff;
    --surface-soft: #f0f2f5;
    --surface-raised: #ffffff;
    --ink: #20242a;
    --muted: #667085;
    --line: #e3e6eb;
    --line-strong: #cfd4dc;
    --accent: #c50000;
    --accent-hover: #a90000;
    --accent-ink: #aa0000;
    --accent-soft: #fff0f0;
    --accent-soft-strong: #fbe1e3;
    --accent-rgb: 197, 0, 0;
    --danger: #b42318; --danger-soft: #fbeeed;
    --success: #187a40; --success-soft: #eaf8ef;
    --warning: #8a6500; --warning-soft: #fff7df;
    --info: #315c94; --info-soft: #edf5ff;
    --shadow-color: rgba(26,31,44,.12);
    --overlay: rgba(12,16,24,.48);
}

:root:is([data-theme="dark"], [data-theme="midnight"]) {
    color-scheme: dark;
    --page: #11141a;
    --surface: #1b2028;
    --surface-soft: #242a34;
    --surface-raised: #202630;
    --ink: #f3f5f8;
    --muted: #b5bdc9;
    --line: #39414d;
    --line-strong: #505a68;
    --accent: #ff6b6b;
    --accent-hover: #ff8585;
    --accent-ink: #ff9b9b;
    --accent-soft: #38242a;
    --accent-soft-strong: #492b33;
    --accent-rgb: 255,107,107;
    --danger: #ff7a72; --danger-soft: #3c2527;
    --success: #79d89a; --success-soft: #20362a;
    --warning: #f0c96c; --warning-soft: #3a3220;
    --info: #8fbdff; --info-soft: #203047;
    --shadow-color: rgba(0,0,0,.36);
    --overlay: rgba(0,0,0,.68);
}

:root[data-theme="orange"] {
    color-scheme: light;
    --page: #fff1e6;
    --surface: #fffaf5;
    --surface-soft: #ffe8d4;
    --surface-raised: #fffdf9;
    --ink: #33251d;
    --muted: #7b6252;
    --line: #edcdb7;
    --line-strong: #dcb79f;
    --accent: #e65c00;
    --accent-hover: #c94f00;
    --accent-ink: #ad4707;
    --accent-soft: #ffe2ca;
    --accent-soft-strong: #ffd2af;
    --accent-rgb: 230,92,0;
    --danger: #b42318; --danger-soft: #fbeeed;
    --success: #187a40; --success-soft: #eaf8ef;
    --warning: #8a6500; --warning-soft: #fff7df;
    --info: #315c94; --info-soft: #edf5ff;
    --shadow-color: rgba(105,53,20,.14);
    --overlay: rgba(45,24,12,.50);
}

:root[data-theme="pink"] {
    color-scheme: light;
    --page: #fff0f7;
    --surface: #fff8fc;
    --surface-soft: #ffe2ef;
    --surface-raised: #fffafd;
    --ink: #34242e;
    --muted: #7a5e6d;
    --line: #ebc9da;
    --line-strong: #dbb2c7;
    --accent: #d63384;
    --accent-hover: #b9276f;
    --accent-ink: #a42667;
    --accent-soft: #fbd9ea;
    --accent-soft-strong: #f5c4dc;
    --accent-rgb: 214,51,132;
    --danger: #b42318; --danger-soft: #fbeeed;
    --success: #187a40; --success-soft: #eaf8ef;
    --warning: #8a6500; --warning-soft: #fff7df;
    --info: #315c94; --info-soft: #edf5ff;
    --shadow-color: rgba(98,37,70,.14);
    --overlay: rgba(38,17,29,.50);
}

:root[data-theme="purple"] {
    color-scheme: light;
    --page: #f3eeff;
    --surface: #fbf9ff;
    --surface-soft: #e7defe;
    --surface-raised: #fdfcff;
    --ink: #29243a;
    --muted: #69607d;
    --line: #d8cdec;
    --line-strong: #c5b7e1;
    --accent: #6d4aff;
    --accent-hover: #5939e8;
    --accent-ink: #5136c9;
    --accent-soft: #ddd3ff;
    --accent-soft-strong: #cfc1ff;
    --accent-rgb: 109,74,255;
    --danger: #b42318; --danger-soft: #fbeeed;
    --success: #187a40; --success-soft: #eaf8ef;
    --warning: #8a6500; --warning-soft: #fff7df;
    --info: #315c94; --info-soft: #edf5ff;
    --shadow-color: rgba(55,40,111,.14);
    --overlay: rgba(24,18,45,.50);
}

:root[data-theme="blue"] {
    color-scheme: light;
    --page: #edf4ff;
    --surface: #f8fbff;
    --surface-soft: #dce9ff;
    --surface-raised: #fbfdff;
    --ink: #202b3c;
    --muted: #5d6f89;
    --line: #cbdaf0;
    --line-strong: #b5c8e2;
    --accent: #2563eb;
    --accent-hover: #1d4ed8;
    --accent-ink: #1d4fbe;
    --accent-soft: #d4e4ff;
    --accent-soft-strong: #c1d7ff;
    --accent-rgb: 37,99,235;
    --danger: #b42318; --danger-soft: #fbeeed;
    --success: #187a40; --success-soft: #eaf8ef;
    --warning: #8a6500; --warning-soft: #fff7df;
    --info: #2563eb; --info-soft: #dce9ff;
    --shadow-color: rgba(30,64,115,.14);
    --overlay: rgba(14,27,48,.50);
}

:root[data-theme="forest"] {
    color-scheme: light;
    --page: #eaf6ef;
    --surface: #f7fcf9;
    --surface-soft: #d9ecdf;
    --surface-raised: #fbfefc;
    --ink: #173126;
    --muted: #577064;
    --line: #c7dfcf;
    --line-strong: #add0b9;
    --accent: #2f7d54;
    --accent-hover: #256847;
    --accent-ink: #245f42;
    --accent-soft: #cfe8d8;
    --accent-soft-strong: #b9dbc6;
    --accent-rgb: 47,125,84;
    --danger: #ad382f; --danger-soft: #f8e6e4;
    --success: #1d7a48; --success-soft: #dff3e7;
    --warning: #87610a; --warning-soft: #fff3d3;
    --info: #35698c; --info-soft: #e1f0f9;
    --shadow-color: rgba(30,74,49,.14);
    --overlay: rgba(13,35,23,.50);
}

:root[data-theme="midnight"] {
    color-scheme: dark;
    --page: #08111f;
    --surface: #101b2e;
    --surface-soft: #182942;
    --surface-raised: #142238;
    --ink: #eef6ff;
    --muted: #a9bad1;
    --line: #2c405d;
    --line-strong: #405b7d;
    --accent: #5aa7ff;
    --accent-hover: #7bb9ff;
    --accent-ink: #8bc2ff;
    --accent-soft: #18365a;
    --accent-soft-strong: #1d466f;
    --accent-rgb: 90,167,255;
    --danger: #ff7d87; --danger-soft: #3a202a;
    --success: #67d7a0; --success-soft: #14362b;
    --warning: #ffd275; --warning-soft: #3b321d;
    --info: #8fc7ff; --info-soft: #17324f;
    --shadow-color: rgba(0,0,0,.42);
    --overlay: rgba(0,4,12,.74);
}

:root[data-theme="sakura"] {
    color-scheme: light;
    --page: #fff0f3;
    --surface: #fff8fa;
    --surface-soft: #ffe0e7;
    --surface-raised: #fffafb;
    --ink: #3a252c;
    --muted: #7d5d66;
    --line: #edc8d1;
    --line-strong: #ddb0bb;
    --accent: #d94f70;
    --accent-hover: #bd3f5e;
    --accent-ink: #a93c58;
    --accent-soft: #fbd6df;
    --accent-soft-strong: #f3c0cd;
    --accent-rgb: 217,79,112;
    --danger: #b42318; --danger-soft: #fbeeed;
    --success: #187a40; --success-soft: #eaf8ef;
    --warning: #8a6500; --warning-soft: #fff7df;
    --info: #315c94; --info-soft: #edf5ff;
    --shadow-color: rgba(97,40,55,.14);
    --overlay: rgba(40,18,25,.50);
}

:root[data-theme="mint"] {
    color-scheme: light;
    --page: #eafaf6;
    --surface: #f7fffc;
    --surface-soft: #d5f2e9;
    --surface-raised: #fbfffe;
    --ink: #17342e;
    --muted: #55736b;
    --line: #c4e4da;
    --line-strong: #abd5c8;
    --accent: #0f9f85;
    --accent-hover: #0b866f;
    --accent-ink: #087764;
    --accent-soft: #c9eee4;
    --accent-soft-strong: #afe3d6;
    --accent-rgb: 15,159,133;
    --danger: #ad382f; --danger-soft: #f8e6e4;
    --success: #187a40; --success-soft: #e4f7eb;
    --warning: #8a6500; --warning-soft: #fff7df;
    --info: #2e6d8a; --info-soft: #e0f2f7;
    --shadow-color: rgba(25,85,70,.14);
    --overlay: rgba(10,38,31,.50);
}

:root[data-theme="mocha"] {
    color-scheme: light;
    --page: #f3ebe4;
    --surface: #fcf8f4;
    --surface-soft: #e8dbd0;
    --surface-raised: #fffaf7;
    --ink: #342820;
    --muted: #75675d;
    --line: #dac8b9;
    --line-strong: #c8b29f;
    --accent: #8a5a44;
    --accent-hover: #724936;
    --accent-ink: #6f4937;
    --accent-soft: #e5d1c4;
    --accent-soft-strong: #d8bdad;
    --accent-rgb: 138,90,68;
    --danger: #a83b32; --danger-soft: #f7e7e4;
    --success: #3f7551; --success-soft: #e7f1e9;
    --warning: #82631e; --warning-soft: #f8efdb;
    --info: #4f6f87; --info-soft: #e8eff3;
    --shadow-color: rgba(74,48,34,.16);
    --overlay: rgba(33,24,19,.52);
}

:root[data-theme="pickme"] {
    color-scheme: light;
    --page: #fff0fb;
    --surface: #fff8fe;
    --surface-soft: #f9dff2;
    --surface-raised: #fffaff;
    --ink: #35253a;
    --muted: #765f7c;
    --line: #eac8df;
    --line-strong: #dbafd0;
    --accent: #e047a5;
    --accent-hover: #c93691;
    --accent-ink: #ad2f7b;
    --accent-soft: #f7d4ec;
    --accent-soft-strong: #edbde0;
    --accent-rgb: 224,71,165;
    --danger: #b83a56; --danger-soft: #fde6ed;
    --success: #398060; --success-soft: #e7f5ee;
    --warning: #8a6500; --warning-soft: #fff4dc;
    --info: #6d5fbd; --info-soft: #efebff;
    --shadow-color: rgba(104,43,92,.15);
    --overlay: rgba(45,18,41,.52);
}

/* =====================================================
   TEMEL YUZEYLER / METIN
===================================================== */

html[data-theme] body,
html[data-theme] .main-content,
html[data-theme] .project-flow-page {
    background:
        radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--accent) 7%, transparent) 0, transparent 30%),
        radial-gradient(circle at 88% 4%, color-mix(in srgb, var(--accent-soft-strong) 30%, transparent) 0, transparent 28%),
        var(--page);
    color: var(--ink);
}

html[data-theme] :where(
    .sidebar,
    .settings-form,
    .profile-card,
    .task-card,
    .task-modal,
    .member-card,
    .team-card,
    .team-stat-card,
    .empty-state,
    .login-card,
    .calendar-main,
    .calendar-day-panel,
    .calendar-filter-modal,
    .calendar-day,
    .calendar-detail-item,
    .drive-browser,
    .drive-topbar,
    .drive-items,
    .drive-new-folder,
    .drive-upload-box,
    .uploaded-files-info,
    .idea-card,
    .project-card,
    .project-draft,
    .notification-card,
    .notification-item,
    .notification-detail,
    .member-xp-panel,
    .project-purpose-dialog,
    .flow-toolbar-shell,
    .flow-context-menu,
    .assignment-picker,
    .notice-schedule-panel,
    .foundation-member-row,
    .team-tab,
    .task-tab,
    .calendar-nav-button,
    .calendar-today-button,
    .calendar-type-button,
    .reminder-team-option,
    .secondary-button,
    .completion-file,
    .task-team-choice,
    .member-rank-option
) {
    background-color: var(--surface);
    color: var(--ink);
    border-color: var(--line);
}

html[data-theme] :where(
    input,
    select,
    textarea,
    .team-search,
    .task-filter-input,
    #modalTaskKind,
    .foundation-member-controls input,
    .foundation-member-controls select
) {
    background: var(--surface);
    color: var(--ink);
    border-color: var(--line);
}

html[data-theme] :where(
    input,
    select,
    textarea,
    button
):focus-visible {
    outline-color: var(--accent);
}

html[data-theme] ::placeholder {
    color: color-mix(in srgb, var(--muted) 78%, transparent);
    opacity: 1;
}

html[data-theme] :where(
    .team-member-mini,
    .team-empty-members,
    .member-editor-summary,
    .member-edit-button,
    .task-meta span,
    .assignee,
    .completed-by,
    .calendar-detail-tags span,
    .calendar-filter-check,
    .task-filter-mine-toggle,
    .member-rank-badge.volunteer,
    .idea-file-link,
    .idea-like-button,
    .idea-private,
    .calendar-item-actions button,
    .calendar-filter-close,
    .calendar-filter-team-tools button,
    .flow-toolbar-toggle,
    .project-flow-page .flow-toolbar button,
    .flow-context-menu .flow-zoom button,
    .notification-header-actions .notification-read-all,
    .notification-header-actions .notification-send,
    .assignment-picker-summary > span
) {
    background-color: var(--surface-soft);
    color: var(--ink);
    border-color: var(--line);
}

html[data-theme] :where(
    .page-header p,
    .settings-form small,
    .profile-details p,
    .sidebar-header span,
    .sidebar-user-meta span,
    .team-stat-card span,
    .team-card-counts,
    .member-identity span,
    .member-editor-summary span,
    .team-empty-members,
    .member-no-team,
    .task-description,
    .task-updated,
    .task-assignees-title,
    .modal-header p,
    .member small,
    .calendar-toolbar p,
    .calendar-weekdays,
    .calendar-day-panel-header span,
    .calendar-detail-type,
    .calendar-detail-body p,
    .calendar-created-by,
    .calendar-no-events,
    .calendar-loading,
    .drive-breadcrumb span,
    .upload-progress-text,
    .drive-empty,
    .completion-state,
    .idea-meta,
    .notification-card small,
    .assignment-status,
    .recipient-count,
    .flow-date,
    .flow-context-menu small,
    .flow-empty-message,
    .project-flow-canvas.flow-is-empty:after
) {
    color: var(--muted);
}


/* Renkli temalarda kartlar da beyaz kalmasin; surface tokenlarini kullan. */
html[data-theme] :where(
    .settings-form, .profile-card, .task-card, .task-modal, .team-card,
    .team-stat-card, .calendar-main, .calendar-day-panel, .drive-browser,
    .idea-card, .project-card, .notification-card, .flow-toolbar-shell
) {
    box-shadow: 0 8px 24px color-mix(in srgb, var(--shadow-color) 72%, transparent);
}

:root[data-theme="pickme"] :where(body, .main-content, .project-flow-page) {
    background:
        radial-gradient(circle at 10% 5%, rgba(224,71,165,.14) 0, transparent 26%),
        radial-gradient(circle at 92% 2%, rgba(143,92,255,.12) 0, transparent 28%),
        linear-gradient(145deg, #fff0fb 0%, #f8f0ff 52%, #fff5fb 100%);
}

:root[data-theme="sakura"] :where(body, .main-content, .project-flow-page) {
    background:
        radial-gradient(circle at 86% 4%, rgba(217,79,112,.10) 0, transparent 30%),
        linear-gradient(145deg, #fff0f3 0%, #fff6f2 100%);
}

:root[data-theme="midnight"] :where(body, .main-content, .project-flow-page) {
    background:
        radial-gradient(circle at 14% 8%, rgba(90,167,255,.13) 0, transparent 30%),
        radial-gradient(circle at 90% 0%, rgba(89,74,255,.10) 0, transparent 28%),
        #08111f;
}

/* =====================================================
   ANA VURGU RENGI
===================================================== */

html[data-theme] :where(
    .primary-button,
    .login-logo,
    .sidebar-logo,
    #saveFolderButton,
    .calendar-small-add,
    .calendar-filter-count,
    .notification-count,
    .project-flow-page .flow-toolbar [data-flow-publish],
    .project-flow-page .flow-toolbar [data-flow-update]
) {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

html[data-theme] .primary-button:hover,
html[data-theme] #saveFolderButton:hover {
    background: var(--accent-hover);
}

html[data-theme] :where(
    .menu-item.active,
    .task-tab.active,
    .team-tab.active,
    .calendar-day.selected,
    .calendar-type-button.active,
    .calendar-filter-button.has-filter,
    .task-filter-button.has-filter,
    .project-repeat .recurring-option input:checked + span,
    .notice-schedule-actions [aria-pressed="true"]
) {
    background: var(--accent-soft);
    color: var(--accent-ink);
    border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
}

html[data-theme] :where(
    .sidebar-footer button,
    .settings-logout,
    .mobile-nav-item.active,
    .task-tab.active,
    .team-tab.active,
    .members-header button,
    .definition-pencil:hover,
    .university-tile > span:last-child,
    .drive-breadcrumb button,
    .content-detail-meta .detail-xp,
    .member-xp-heading strong,
    .help-info:hover,
    .help-info:focus-visible,
    .project-purpose-button,
    .member-xp-operations button[aria-pressed="true"],
    .project-xp-options input:checked + span,
    .project-flow-page .flow-toolbar [data-flow-add],
    .flow-empty-message span
) {
    color: var(--accent-ink);
}

html[data-theme] :where(
    input[type="checkbox"],
    input[type="radio"],
    progress
) {
    accent-color: var(--accent);
}

html[data-theme] :where(
    .project-xp-options input:checked + span,
    .member-xp-operations button[aria-pressed="true"],
    .member-xp-heading strong,
    .help-info:hover,
    .help-info:focus-visible,
    .project-flow-page .flow-toolbar [data-flow-add],
    .flow-empty-message span
) {
    background: var(--accent-soft);
    border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
}

html[data-theme] .mobile-nav-item.active {
    background: color-mix(in srgb, var(--accent) 8%, transparent);
}

html[data-theme] :where(
    .mobile-nav-item:focus-visible,
    .mobile-profile-button:focus-visible,
    .password-toggle:focus-visible,
    .permission-group summary:focus-visible
) {
    outline-color: var(--accent);
}

/* =====================================================
   FLOW EDITOR
===================================================== */

html[data-theme] .project-flow-viewport,
html[data-theme] body.flow-focus .project-flow-page,
html[data-theme] body.flow-focus .project-flow-page:before {
    background: var(--page);
}

html[data-theme] .project-flow-page .flow-toolbar button,
html[data-theme] .flow-toolbar-toggle,
html[data-theme] .flow-context-menu .flow-zoom button,
html[data-theme] body.flow-focus .flow-message {
    background: var(--surface);
    color: var(--ink);
    border-color: var(--line);
}

html[data-theme] .project-flow-page .flow-toolbar button:hover,
html[data-theme] .flow-context-menu button:hover,
html[data-theme] .flow-context-menu button:focus-visible {
    background: var(--accent-soft);
    color: var(--accent-ink);
}

html[data-theme] .project-flow-page .flow-toolbar [data-flow-add] {
    background: var(--accent-soft);
    color: var(--accent-ink);
    border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
}

html[data-theme] .project-flow-page .flow-toolbar :is([data-flow-publish], [data-flow-update]) {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

html[data-theme] .project-flow-page .flow-toolbar :is([data-flow-publish], [data-flow-update]):hover {
    background: var(--accent-hover);
    color: #fff;
}

html[data-theme] :where(.flow-edge, .flow-preview) {
    stroke: var(--accent);
}

html[data-theme] .flow-source {
    outline-color: var(--accent);
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 12%, transparent);
}

html[data-theme] .flow-connect-button {
    background: var(--surface);
    color: var(--accent-ink);
    border-color: color-mix(in srgb, var(--accent) 32%, var(--line));
}

html[data-theme] .flow-disconnect-button,
html[data-theme] .project-flow-page .flow-toolbar [data-flow-delete] {
    background: var(--danger-soft);
    color: var(--danger);
    border-color: color-mix(in srgb, var(--danger) 34%, var(--line));
}

html[data-theme] .flow-empty-message {
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    color: var(--muted);
    border: 1px solid var(--line);
}

html[data-theme] .project-flow-page .flow-toolbar-shell.collapsed {
    background: var(--surface);
}

/* Takim rengi korunsun; koyu temada acik renkli kart + acik yazi cakismasin. */
:root:is([data-theme="dark"], [data-theme="midnight"]) .project-task-node {
    background: color-mix(in srgb, var(--team-color, #77808c) 17%, var(--surface));
    color: var(--ink);
    border-color: color-mix(in srgb, var(--team-color, #77808c) 48%, var(--line));
}

:root:is([data-theme="dark"], [data-theme="midnight"]) .task-card.task-team-coded {
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--team-color) 22%, var(--surface)) 0, transparent 72px),
        var(--surface);
}

:root:is([data-theme="dark"], [data-theme="midnight"]) :where(
    .calendar-detail-item.calendar-team-coded,
    .reminder-team-option.team-color-option,
    .calendar-filter-team,
    .assignment-team-tile,
    .member-editor-team,
    .member-team-chip,
    .project-draft .assignee,
    .assignment-picker-grid button,
    .assignment-picker-summary > span
) {
    background: color-mix(in srgb, var(--team-color, #77808c) 16%, var(--surface)) !important;
    color: var(--ink) !important;
}

/* =====================================================
   SEMANTIK DURUMLAR - TEMA RENGINDEN BAGIMSIZ
===================================================== */

html[data-theme] :where(.status-active, .completion-state.ready, .task-result, .my-task-label.submitted) {
    background: var(--success-soft);
    color: var(--success);
    border-color: color-mix(in srgb, var(--success) 30%, var(--line));
}

html[data-theme] .status-completed {
    background: var(--info-soft);
    color: var(--info);
}

html[data-theme] :where(.completion-warning, .review-warning, .project-card .project-pending-badge) {
    background: var(--warning-soft);
    color: var(--warning);
    border-color: color-mix(in srgb, var(--warning) 28%, var(--line));
}

html[data-theme] :where(
    .task-delete,
    .completion-file button,
    .drive-delete,
    .organization-modal-actions .definition-delete,
    .task-editor-actions .task-editor-delete
) {
    background: var(--danger-soft);
    color: var(--danger);
    border-color: color-mix(in srgb, var(--danger) 30%, var(--line));
}

html[data-theme] .notification-unread,
html[data-theme] .notification-card.notification-unread {
    background: color-mix(in srgb, var(--accent) 7%, var(--surface));
    border-left-color: var(--accent);
}

/* =====================================================
   DARK MODE KONTRAST SERTLESTIRME
===================================================== */

:root:is([data-theme="dark"], [data-theme="midnight"]) :where(
    .menu-item,
    .calendar-nav-button,
    .calendar-day,
    .calendar-type-button,
    .team-tab,
    .task-tab,
    .member-edit-button,
    .task-edit,
    .secondary-button,
    .calendar-item-actions button,
    .calendar-filter-close,
    .calendar-filter-check,
    .task-filter-input,
    .task-filter-mine-toggle strong,
    .drive-item-name,
    .completed-by strong,
    .team-stat-card strong,
    .member-identity strong,
    .member-editor-summary strong,
    .team-card-header strong,
    .team-member-mini > span:nth-child(2),
    .project-flow-page .flow-toolbar button
) {
    color: var(--ink);
}

:root:is([data-theme="dark"], [data-theme="midnight"]) :where(
    .member-avatar,
    .team-member-mini,
    .team-empty-members,
    .member-editor-summary,
    .calendar-weekdays,
    .calendar-day.other-month,
    .reminder-repeat-options,
    .completion-file,
    .empty-completion-files,
    .calendar-filter-actions,
    .calendar-filter-check,
    .task-filter-mine-toggle
) {
    background: var(--surface-soft);
    border-color: var(--line);
}

:root:is([data-theme="dark"], [data-theme="midnight"]) .calendar-day:hover,
:root:is([data-theme="dark"], [data-theme="midnight"]) button.team-stat-card:hover,
:root:is([data-theme="dark"], [data-theme="midnight"]) button.team-member-mini:hover {
    background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}

:root:is([data-theme="dark"], [data-theme="midnight"]) .idea-card.idea-approved {
    background: color-mix(in srgb, var(--success) 11%, var(--surface));
}

:root:is([data-theme="dark"], [data-theme="midnight"]) :where(.content-full-text a, .task-card .task-description a) {
    color: #8fc2ff;
}

:root:is([data-theme="dark"], [data-theme="midnight"]) .help-tooltip,
:root:is([data-theme="dark"], [data-theme="midnight"]) .flow-tool-tip,
:root:is([data-theme="dark"], [data-theme="midnight"]) .notice-mode-tooltip {
    background: #f4f6f8;
    color: #15171d;
}

:root:is([data-theme="dark"], [data-theme="midnight"]) .modal-overlay,
:root:is([data-theme="dark"], [data-theme="midnight"]) .calendar-filter-overlay {
    background: var(--overlay);
}

/* =====================================================
   LOGIN / PROFIL
===================================================== */

html[data-theme] .login-screen {
    background:
        radial-gradient(circle at 20% 15%, color-mix(in srgb, var(--accent) 75%, #fff) 0, transparent 34%),
        linear-gradient(145deg, color-mix(in srgb, var(--accent) 72%, #111) 0%, var(--accent) 54%, color-mix(in srgb, var(--accent) 70%, #fff) 100%);
}

html[data-theme] .profile-cover {
    background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 74%, #111), color-mix(in srgb, var(--accent) 74%, #fff));
}

/* =====================================================
   AYARLAR - TEMA SECICI
===================================================== */

.theme-picker {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 8px;
}

.theme-choice {
    min-width: 0;
    display: grid;
    gap: 8px;
    padding: 10px;
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 12px;
    text-align: left;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.theme-choice:hover {
    border-color: color-mix(in srgb, var(--accent) 48%, var(--line));
    transform: translateY(-1px);
}

.theme-choice.active {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 15%, transparent);
}

.theme-choice-preview {
    height: 42px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 28% 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 4px;
    padding: 6px;
    background: var(--theme-preview-page);
    border: 1px solid color-mix(in srgb, var(--theme-preview-accent) 15%, #d8dbe1);
    border-radius: 8px;
}

.theme-choice-preview span:first-child {
    grid-row: 1 / 3;
    background: var(--theme-preview-accent);
    border-radius: 4px;
}

.theme-choice-preview span:nth-child(2),
.theme-choice-preview span:nth-child(3) {
    background: var(--theme-preview-surface);
    border-radius: 4px;
}

.theme-choice strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: calc(13px * var(--text-scale, 1));
}

@media (max-width: 560px) {
    .theme-picker {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* =====================================================
   GENEL GOLGE / AYRIM
===================================================== */

html[data-theme] :where(
    .task-modal,
    .calendar-filter-modal,
    .project-purpose-dialog,
    .notifications-modal,
    .member-modal,
    .flow-context-menu
) {
    box-shadow: 0 18px 50px var(--shadow-color);
}

html[data-theme] :where(
    .modal-header,
    .sidebar-header,
    .sidebar-footer
) {
    border-color: var(--line);
}

/* =====================================================
   MOBILE APP CHROME - THEME AWARE
   themes.css en son yuklendigi icin ust/alt bar her temada kesin olarak degisir.
===================================================== */
@media (max-width: 900px) {
    html[data-theme] .mobile-header {
        color: var(--ink);
        background:
            radial-gradient(ellipse at 28% 110%, color-mix(in srgb, var(--accent) 17%, transparent) 0 24%, transparent 54%),
            linear-gradient(120deg,
                color-mix(in srgb, var(--surface) 90%, var(--accent-soft) 10%) 0%,
                color-mix(in srgb, var(--surface) 70%, var(--accent-soft) 30%) 54%,
                color-mix(in srgb, var(--surface) 88%, var(--page) 12%) 100%);
        border-bottom-color: color-mix(in srgb, var(--accent) 24%, var(--line));
    }

    html[data-theme] .mobile-bottom-nav {
        color: var(--ink);
        background:
            linear-gradient(180deg,
                color-mix(in srgb, var(--surface) 88%, var(--accent-soft) 12%) 0%,
                color-mix(in srgb, var(--surface) 68%, var(--accent-soft) 32%) 100%);
        border-top-color: color-mix(in srgb, var(--accent) 24%, var(--line));
    }

    html[data-theme] .mobile-nav-item.active {
        color: var(--accent-ink);
        background: color-mix(in srgb, var(--accent) 12%, transparent);
    }

    html[data-theme] .mobile-profile-button,
    html[data-theme] .mobile-header > .notification-bell {
        color: var(--ink);
        border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
        background: color-mix(in srgb, var(--surface-raised) 78%, var(--accent-soft) 22%);
    }

    html[data-theme] .mobile-profile-button .user-avatar {
        background: var(--surface-raised);
        color: var(--ink);
        border-color: color-mix(in srgb, var(--accent) 52%, transparent);
    }
}