/* =====================================================
   DEĞİŞKENLER
===================================================== */

:root {
    --text-scale: 1;

    --surface: #fff;
    --page: #f5f6f8;

    --ink: #222;
    --muted: #666;
    --line: #e5e5e5;
}


:root[data-font-size="small"] {
    --text-scale: .9;
}


:root[data-font-size="large"] {
    --text-scale: 1.18;
}


:root[data-theme="dark"] {
    color-scheme: dark;

    --surface: #20232b;
    --page: #15171d;

    --ink: #f0f1f4;
    --muted: #bfc3cd;
    --line: #404550;
}


body {
    background:
        var(--page);

    color:
        var(--ink);
}


/* =====================================================
   AYARLAR
===================================================== */

.settings-grid {
    display: grid;

    grid-template-columns:
        minmax(240px, 1fr)
        minmax(280px, 1fr);

    gap: 20px;

    max-width: 1000px;

    align-items: start;
}


.settings-form,
.profile-card {
    background:
        var(--surface);

    border:
        1px solid var(--line);

    border-radius:
        16px;

    overflow:
        hidden;
}


.settings-form {
    padding: 20px;
}


.settings-form small {
    display: block;

    color:
        var(--muted);

    margin:
        6px 0;
}


/* =====================================================
   PROFİL
===================================================== */

.profile-card {
    max-width:
        650px;
}


.profile-cover {
    height:
        140px;

    background:
        linear-gradient(
            120deg,
            #750c22,
            #c33b46
        );
}


.profile-cover img {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}


.profile-details {
    padding:
        0 20px 20px;
}


.profile-details p {
    margin:
        10px 0;

    line-height:
        1.5;

    color:
        var(--muted);
}


.profile-avatar {
    width:
        72px;

    height:
        72px;

    margin-top:
        -36px;

    position:
        relative;

    border:
        3px solid
        var(--surface);

    margin-bottom:
        12px;
}


.member-avatar,
.team-member-mini-avatar {
    overflow:
        hidden;
}


.member-avatar img,
.team-member-mini-avatar img {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}


.profile-biography,
.idea-description {
    white-space:
        pre-wrap;

    overflow-wrap:
        anywhere;
}


/* =====================================================
   MÜSAİTLİK
===================================================== */

.availability {
    display:
        inline-block;

    font-size:
        calc(
            12px *
            var(--text-scale)
        );

    line-height:
        1.6;
}


.availability-available {
    color:
        #248144;
}


.availability-limited {
    color:
        #97720c;
}


.availability-busy {
    color:
        #c23f48;
}


.settings-form #settingsMessage {
    padding:
        8px 0;
}


/* =====================================================
   ÇOKLU EKİP GÖREV FORMU
===================================================== */

.task-team-choice {
    margin:
        8px 0;

    border:
        1px solid
        var(--line);

    border-left:
        3px solid
        var(--team-color);

    border-radius:
        10px;

    padding:
        10px;
}


.task-team-choice > div:first-child {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        8px;
}


.task-team-choice label {
    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    font-size:
        calc(
            13px *
            var(--text-scale)
        );
}


.task-team-choice input[type="checkbox"] {
    width:
        18px;

    height:
        18px;

    accent-color:
        var(--team-color);
}


.task-team-choice .members-list {
    margin-top:
        10px;
}


.task-team-chips {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        5px;
}


.task-team-chips span {
    border-left:
        3px solid
        var(--team-color);

    background:
        var(--team-soft);
}


.task-tabs {
    flex-wrap:
        wrap;
}


/* =====================================================
   EKSTRA GÖREV
===================================================== */

.extra-full,
.extra-archived,
.idea-old {
    opacity:
        .7;
}


.extra-count {
    margin:
        12px 0;
}


.extra-count progress {
    width:
        100%;

    accent-color:
        #bd0000;
}


/* =====================================================
   FİKİR MERKEZİ - TOOLBAR
===================================================== */

.idea-toolbar {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    flex-wrap:
        wrap;

    gap:
        12px;

    margin-bottom:
        10px;
}


.idea-type-tabs {
    margin-bottom:
        0;
}


.idea-toolbar-actions {
    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        8px;
}


.idea-sort-select {
    min-height:
        39px;

    padding:
        9px 34px 9px 11px;

    border:
        1px solid
        var(--line);

    border-radius:
        9px;

    background:
        var(--surface);

    color:
        var(--ink);

    outline:
        none;

    font-size:
        calc(
            12px *
            var(--text-scale)
        );
}


.idea-sort-select:focus {
    border-color:
        #c50000;
}


.idea-notice {
    margin:
        0 0 18px;

    color:
        var(--muted);

    font-size:
        calc(
            12px *
            var(--text-scale)
        );

    line-height:
        1.45;
}


/* =====================================================
   FİKİR MERKEZİ - GRID
===================================================== */

.idea-list.tasks-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(290px, 1fr)
        );

    gap:
        16px;

    align-items:
        stretch;
}


/* =====================================================
   FİKİR KARTI
===================================================== */

.idea-card {
    /*
        Görev kartlarıyla aynı temel mantık.
    */

    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    height:
        100%;

    box-sizing:
        border-box;

    overflow:
        hidden;

    padding:
        19px;

    border:
        1px solid
        #eaeaea;

    /*
        Ana vurgu artık Fikir/Öneri/Şikayet değil.
        Fikri paylaşan kişinin ANA EKİBİ.
    */
    border-left:
        4px solid
        var(--team-color);

    border-radius:
        16px;

    background:
        var(--surface);

    box-shadow:
        0 4px 15px
        rgba(
            0,
            0,
            0,
            0.03
        );
}


/*
   Görev kartlarındaki üst ekip çizgisi hissi.
*/

.idea-card-top-accent {
    position:
        absolute;

    top:
        0;

    left:
        16px;

    right:
        16px;

    height:
        3px;

    border-radius:
        0 0 4px 4px;

    background:
        var(--team-color);
}


/* =====================================================
   SABİTLENEN FİKİR
===================================================== */

.idea-pinned {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    flex-wrap:
        wrap;

    gap:
        5px 10px;

    margin:
        0 0 12px;

    padding:
        8px 10px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--team-color) 22%,
            #ffffff
        );

    border-radius:
        9px;

    background:
        var(--team-soft);

    color:
        #555;

    font-size:
        calc(
            10px *
            var(--text-scale)
        );
}


.idea-pinned strong {
    color:
        var(--team-color);

    font-size:
        calc(
            10px *
            var(--text-scale)
        );
}


.idea-pinned span {
    color:
        var(--muted);
}


/* =====================================================
   BAŞLIK
===================================================== */

.idea-card .task-card-header {
    margin-bottom:
        12px;
}


.idea-card .task-card-header h3 {
    margin:
        0;

    overflow-wrap:
        anywhere;

    display:
        -webkit-box;

    -webkit-line-clamp:
        3;

    -webkit-box-orient:
        vertical;

    overflow:
        hidden;
}


/* =====================================================
   FİKİR / ÖNERİ / ŞİKAYET BADGE
===================================================== */

.idea-type-badge {
    flex-shrink:
        0;
}


.idea-type-idea {
    background:
        #eafff0;

    color:
        #16833c;
}


.idea-type-suggestion {
    background:
        #fff8e6;

    color:
        #946b00;
}


.idea-type-complaint {
    background:
        #fff0f0;

    color:
        #b00000;
}


/* =====================================================
   AÇIKLAMA
===================================================== */

.idea-description {
    margin:
        0 0 14px;

    color:
        var(--muted);

    line-height:
        1.5;

    font-size:
        calc(
            13px *
            var(--text-scale)
        );

    display:
        -webkit-box;

    -webkit-line-clamp:
        5;

    -webkit-box-orient:
        vertical;

    overflow:
        hidden;
}


/* =====================================================
   EKİP + PAYLAŞAN
===================================================== */

.idea-meta {
    min-height:
        0;

    margin-bottom:
        14px;
}


.idea-meta > span {
    display:
        inline-flex;

    align-items:
        center;

    min-height:
        28px;

    box-sizing:
        border-box;
}


.idea-team-chip {
    gap:
        6px;

    border-left:
        3px solid
        var(--team-color) !important;

    background:
        var(--team-soft) !important;

    color:
        #555 !important;

    font-weight:
        700;
}


.idea-team-dot {
    width:
        7px;

    height:
        7px;

    min-width:
        7px;

    border-radius:
        50%;

    background:
        var(--team-color);
}


/* =====================================================
   EK DOSYALAR
===================================================== */

.idea-files {
    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;

    margin:
        0 0 14px;

    padding-top:
        12px;

    border-top:
        1px solid
        #eeeeee;
}


.idea-file-link {
    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    padding:
        8px 9px;

    border:
        1px solid
        var(--line);

    border-radius:
        8px;

    background:
        #fafafa;

    color:
        var(--ink);

    text-decoration:
        none;

    font-size:
        calc(
            10px *
            var(--text-scale)
        );
}


.idea-file-link span {
    min-width:
        0;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


/* =====================================================
   TARİH
===================================================== */

.idea-created-at {
    margin-top:
        0;

    padding-top:
        11px;

    border-top:
        1px solid
        #eeeeee;
}


/* =====================================================
   BUTONLAR
===================================================== */

.idea-actions {
    margin-top:
        auto;

    padding-top:
        14px;

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        7px;
}


.idea-like-button {
    border:
        1px solid
        #e4e4e4;

    background:
        #f4f4f5;

    color:
        #444;
}


.idea-like-button.liked {
    border-color:
        #dc777f;

    background:
        #fff0f0;

    color:
        #c53949;
}


.idea-pin-button {
    background:
        var(--team-soft);

    color:
        var(--team-color);
}


/* =====================================================
   ÖZEL BİLGİ
===================================================== */

.idea-private {
    margin:
        -5px 0 17px;

    padding:
        9px 11px;

    border-radius:
        8px;

    background:
        #f5f5f5;

    color:
        var(--muted);

    font-size:
        calc(
            11px *
            var(--text-scale)
        );

    line-height:
        1.4;
}


/* =====================================================
   DEVRE DIŞI
===================================================== */

button:disabled {
    cursor:
        not-allowed;

    opacity:
        .65;
}


/* =====================================================
   DARK MODE
===================================================== */

:root[data-theme="dark"]
:is(
    .sidebar,
    .main-content,
    .task-card,
    .task-modal,
    .member-card,
    .team-card,
    .team-stat-card,
    .empty-state,
    .login-card,
    .calendar-main,
    .calendar-day-panel,
    .calendar-filter-modal,
    .drive-browser,
    .calendar-day,
    .calendar-detail-item,
    .secondary-button,
    .team-tab,
    .team-search,
    .task-filter-input,
    .task-tab,
    .idea-sort-select
) {
    background:
        var(--surface);

    color:
        var(--ink);

    border-color:
        var(--line);
}


:root[data-theme="dark"]
.main-content {
    background:
        var(--page);
}


:root[data-theme="dark"]
:is(
    input,
    select,
    textarea,
    .member,
    .member-editor-summary,
    .team-member-mini,
    .calendar-navigation,
    .calendar-filter-section,
    .task-meta span,
    .assignee,
    .completed-by,
    .completion-file,
    .drive-item,
    .calendar-detail-tags span,
    .calendar-event-preview,
    .calendar-team-chip,
    .member-team-chip,
    .member-editor-team,
    .member-rank-option,
    .task-edit,
    .menu-item,
    .calendar-filter-check,
    .calendar-filter-team,
    .idea-file-link,
    .idea-private
) {
    background:
        var(--surface);

    color:
        var(--ink);

    border-color:
        var(--line);
}


:root[data-theme="dark"]
:is(
    .task-description,
    .task-updated,
    .page-header p,
    .calendar-toolbar p,
    .calendar-created-by,
    .member-identity span,
    .sidebar-user-meta span,
    .calendar-detail-body p,
    .calendar-detail-type,
    .calendar-detail-time,
    .team-card-counts,
    .calendar-weekdays,
    .calendar-day-number,
    .calendar-month-title,
    .calendar-navigation h2,
    .calendar-filter-section-title,
    .calendar-filter-team-name,
    .calendar-detail-body strong,
    .idea-notice
) {
    color:
        var(--muted);
}


:root[data-theme="dark"]
:is(
    .menu-item.active,
    .task-tab.active,
    .team-tab.active,
    .calendar-day.selected
) {
    background:
        #492631;

    color:
        #ffb6bd;
}


:root[data-theme="dark"]
.availability-available {
    color:
        #80d797;
}


:root[data-theme="dark"]
.availability-limited {
    color:
        #e1c568;
}


:root[data-theme="dark"]
.availability-busy {
    color:
        #ff999f;
}


/* =====================================================
   TABLET
===================================================== */

@media (
    max-width:
        760px
) {

    .settings-grid {
        grid-template-columns:
            1fr;
    }


    .idea-toolbar {
        align-items:
            stretch;

        flex-direction:
            column;
    }


    .idea-toolbar-actions {
        width:
            100%;
    }


    .idea-sort-select {
        flex:
            1;
    }

}


/* =====================================================
   MOBİL
===================================================== */

@media (
    max-width:
        600px
) {

    .sidebar {
        position:
            static;

        width:
            100%;

        border-right:
            0;
    }


    .sidebar-header {
        height:
            76px;
    }


    .sidebar-menu {
        display:
            flex;

        overflow-x:
            auto;

        padding:
            6px;

        flex:
            none;
    }


    .menu-item {
        width:
            auto;

        flex:
            0 0 auto;

        white-space:
            nowrap;

        margin:
            0;
    }


    .sidebar-footer {
        padding:
            0 8px;
    }


    .sidebar-footer button {
        padding:
            8px;
    }


    .main-content {
        margin-left:
            0;

        padding:
            14px;

        min-height:
            60vh;
    }


    .profile-cover {
        height:
            120px;
    }


    .page-header-actions {
        flex-wrap:
            wrap;
    }


    .idea-list,
    .member-grid,
    .team-card-grid,
    .tasks-grid {
        grid-template-columns:
            minmax(
                0,
                1fr
            );
    }


    .modal-overlay {
        padding:
            10px;
    }


    .task-modal {
        max-height:
            94dvh;
    }


    .team-member-mini {
        grid-template-columns:
            26px
            minmax(0, 1fr)
            auto;
    }


    .idea-toolbar-actions {
        align-items:
            stretch;

        flex-direction:
            column;
    }


    .idea-sort-select,
    .idea-toolbar-actions button {
        width:
            100%;
    }

}
/* =====================================================
   FİKİR MERKEZİ - AÇIKLAMA HİZASI DÜZELTME
===================================================== */

.idea-card .idea-description,
.idea-card .task-description {
    display: block;

    width: 100%;
    max-width: 100%;

    box-sizing: border-box;

    margin: 0 0 14px;
    padding: 0;

    text-align: left !important;

    align-self: stretch;

    background: transparent !important;

    color: var(--muted);

    line-height: 1.5;

    font-size:
        calc(13px * var(--text-scale, 1));

    white-space: pre-line;
    overflow-wrap: anywhere;
    word-break: normal;
}


/* =====================================================
   ÜYE DÜZENLE - EKİP SEÇİM ALANI DÜZELTME
===================================================== */

.member-modal {
    overflow-x: hidden;
}


.member-modal form,
.member-modal .task-form-group,
.member-modal .member-editor-team-grid {
    width: 100%;
    min-width: 0;

    box-sizing: border-box;
}


.member-modal .member-editor-team-grid {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 8px;

    overflow: hidden;
}


/*
   Her ekip kutusunun iç yapısı:

   [checkbox] [renk noktası] [ekip adı]
*/
.member-modal .member-editor-team {
    display: grid;

    grid-template-columns:
        18px
        7px
        minmax(0, 1fr);

    align-items: center;

    gap: 8px;

    width: 100%;
    min-width: 0;

    min-height: 46px;

    box-sizing: border-box;

    padding: 10px 11px;

    overflow: hidden;
}


/*
   tasks.css içindeki:
   .task-form-group input { width:100%; ... }

   checkbox'ı bozmasın diye
   burada özellikle eziyoruz.
*/
.member-modal
.task-form-group
.member-editor-team
input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;

    min-width: 16px;
    max-width: 16px;

    min-height: 16px;
    max-height: 16px;

    padding: 0 !important;
    margin: 0 !important;

    box-sizing: border-box;

    justify-self: start;

    accent-color: var(--team-color);
}


.member-modal .member-editor-team-dot {
    width: 7px;
    height: 7px;

    min-width: 7px;
    min-height: 7px;

    margin: 0;

    border-radius: 50%;

    background: var(--team-color);
}


/*
   Ekip adı kesinlikle kutunun dışına çıkmayacak.
*/
.member-modal
.member-editor-team
> span:last-child {
    min-width: 0;

    overflow: hidden;

    color: var(--ink);

    font-size:
        calc(10px * var(--text-scale, 1));

    font-weight: 800;

    line-height: 1.3;

    white-space: normal;

    overflow-wrap: anywhere;
}


/* =====================================================
   ÜNVAN INPUT
===================================================== */

.member-modal #memberTitles {
    display: block;

    width: 100%;

    box-sizing: border-box;
}


/* =====================================================
   TABLET / DAR MODAL
===================================================== */

@media (max-width: 700px) {

    .member-modal .member-editor-team-grid {
        grid-template-columns: 1fr;
    }

}