:root {
    --bg: #eef2f6;
    --panel: #f8f9fb;
    --white: #ffffff;
    --text: #22272e;
    --muted: #7d8793;
    --line: #e2e7ec;
    --shadow: 0 18px 45px rgba(32,42,56,.08);
    --radius: 22px;
}

/* 2026-08 persistence, theme and collaboration layer */
.app-shell{grid-template-columns:var(--sidebar-width,280px) minmax(0,1fr)}
.sidebar-resize-handle{position:absolute;z-index:80;top:0;right:-4px;width:8px;height:100%;cursor:col-resize;touch-action:none}
.sidebar-resize-handle:hover{background:rgba(36,112,204,.22)}
.sidebar-resizing{user-select:none;cursor:col-resize}
.theme-toggle-button{position:fixed;right:190px;top:14px;z-index:120;display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--white);color:var(--text);border-radius:12px;padding:10px 14px}.theme-toggle-button svg{width:17px}
.sidebar-section>.workspace-item{display:none}.sql-workspace-tree .workspace-item{display:block}.sql-workspace-tree{display:grid;gap:4px}
.sql-workspace-item{position:relative}.sql-workspace-item>.tree-group{padding-left:24px}.sql-category-node{position:relative;display:flex;align-items:center;min-height:34px;gap:5px}.tree-node-toggle,.tree-node-spacer{width:20px;flex:0 0 20px;border:0;background:transparent;color:var(--muted);padding:0}.tree-node-toggle svg{width:14px;transition:transform .18s ease}.sql-category-node.expanded>.tree-node-toggle svg{transform:rotate(90deg)}.tree-children{padding-left:16px}.tree-children.collapsed{display:none}.sql-category-node>.tree-item{flex:1;min-width:0}.sql-category-node>.tree-actions{display:flex;opacity:0;transition:opacity .15s}.sql-category-node:hover>.tree-actions{opacity:1}.tree-actions button{border:0;background:transparent;color:var(--muted);padding:3px}.tree-actions svg{width:14px}.tree-color-dot{width:7px;height:7px;border-radius:50%;background:var(--category-color)}
.support-floating-button{width:auto!important;padding:0 15px!important;gap:7px}.support-floating-button span{font-weight:700}
.chat-drawer{transition:width .24s ease,height .24s ease,transform .24s ease}.chat-drawer.fullscreen{position:fixed!important;inset:18px!important;width:auto!important;height:auto!important;max-width:none!important;border-radius:20px!important;z-index:1000}.chat-fullscreen-open{overflow:hidden}.chat-file-chip{display:flex;align-items:center;justify-content:space-between;gap:8px}.chat-file-chip button{border:0;background:transparent;color:inherit;display:grid;place-items:center}.chat-file-chip button svg{width:15px}.chat-message-meta{display:flex;align-items:center;justify-content:flex-end;gap:5px;margin-top:4px}.chat-message-meta button{border:0;background:transparent;color:inherit;opacity:.65;padding:1px}.chat-message-meta button svg{width:12px}.chat-message-meta small,.chat-message-retracted{font-style:italic;opacity:.72}
.note-filter-bar{display:flex;align-items:end;gap:12px;flex-wrap:wrap;margin-bottom:18px;padding:12px;background:var(--white);border:1px solid var(--line);border-radius:14px}.note-filter-bar label{display:grid;gap:5px;color:var(--muted);font-size:12px}.note-filter-bar select,.detail-priority select{min-width:160px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--text);padding:9px}.priority-badge{border-radius:99px;padding:3px 7px;font-size:10px;font-weight:700}.priority-badge.yuksek{background:#fee2e2;color:#b91c1c}.priority-badge.normal{background:#fef3c7;color:#92400e}.priority-badge.dusuk{background:#dcfce7;color:#166534}.detail-priority{display:grid;gap:5px;margin:10px 0;color:var(--muted);font-size:12px}
.role-editor{display:grid;gap:12px}.role-editor>label,.profile-form>label{display:grid;gap:6px;font-size:13px;font-weight:600}.role-editor input[type=text],.role-editor textarea,.profile-form input{width:100%;padding:11px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--text)}.permission-checklist{display:grid;gap:7px;max-height:320px;overflow:auto}.permission-checklist>label{display:flex;align-items:start;gap:8px;padding:8px;border:1px solid var(--line);border-radius:9px}.permission-checklist span{display:grid}.permission-checklist small{color:var(--muted);font-weight:400}.role-editor-head{display:flex;justify-content:space-between}.form-message{min-height:18px;color:#15803d}.form-message.error{color:#b91c1c}
.profile-page{max-width:850px}.profile-form{display:grid;gap:15px}.profile-photo-editor{display:flex;align-items:center;gap:18px}.profile-photo-editor img,.profile-photo-editor>span{width:88px;height:88px;border-radius:50%;object-fit:cover;display:grid;place-items:center;background:#174d8f;color:#fff;font-size:32px;font-weight:800}.success-banner{background:#dcfce7;color:#166534;padding:12px;border-radius:10px}
body[data-theme="dark"]{--bg:#091222;--panel:#101b2d;--white:#111d30;--text:#eef4ff;--muted:#9aabc2;--line:#283850;--shadow:0 18px 45px rgba(0,0,0,.35);background:#091222;color:var(--text)}
body[data-theme="dark"] .app-shell,body[data-theme="dark"] .main-area{background:#091222;color:var(--text)}body[data-theme="dark"] .sidebar,body[data-theme="dark"] .topbar,body[data-theme="dark"] .detail-panel,body[data-theme="dark"] .chat-drawer,body[data-theme="dark"] .calendar-modal-card,body[data-theme="dark"] .support-modal-card,body[data-theme="dark"] .workspace-editor,body[data-theme="dark"] .category-editor,body[data-theme="dark"] .delete-popover{background:#0d192b;color:var(--text);border-color:var(--line)}body[data-theme="dark"] .note-card,body[data-theme="dark"] .settings-card,body[data-theme="dark"] .role-card,body[data-theme="dark"] .admin-table-wrap,body[data-theme="dark"] .calendar-day,body[data-theme="dark"] input,body[data-theme="dark"] textarea,body[data-theme="dark"] select{background:#111f34!important;color:var(--text)!important;border-color:var(--line)!important}body[data-theme="dark"] .nav-item:hover,body[data-theme="dark"] .nav-item.active,body[data-theme="dark"] .workspace-row:hover,body[data-theme="dark"] .workspace-row.active{background:#1a2b45;color:#fff}body[data-theme="dark"] .chat-message-bubble{border-color:#32435d}body[data-theme="dark"] .chat-message-row.theirs .chat-message-bubble{background:#18263b}body[data-theme="dark"] .calendar-days{background:#0d192b}
@media(max-width:820px){.sidebar-resize-handle,.theme-toggle-button span{display:none}.theme-toggle-button{right:76px;top:12px;padding:10px}.chat-drawer.fullscreen{inset:0!important;border-radius:0!important}.note-filter-bar{align-items:stretch}.note-filter-bar label,.note-filter-bar select{width:100%}.sql-category-node>.tree-actions{opacity:1}}

* {
    box-sizing: border-box
}

html, body {
    margin: 0;
    min-height: 100%;
    font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    background: var(--bg);
    color: var(--text)
}

button, input, textarea {
    font: inherit
}

button {
    cursor: pointer
}

a {
    color: inherit;
    text-decoration: none
}

.app-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 300px minmax(0,1fr);
    background: linear-gradient(180deg,#eef2f6 0,#f6f8fa 100%)
}

.sidebar {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    padding: 24px 18px 0;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(20px);
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 30;
}

.sidebar-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding: 0 6px
}

.window-dots {
    display: flex;
    gap: 8px
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%
}

.red {
    background: #ff6258
}

.yellow {
    background: #ffbe40
}

.green {
    background: #2bca48
}

.icon-button, .plus-button {
    border: 0;
    background: transparent;
    color: #6f7984
}

    .icon-button svg {
        width: 21px;
        height: 21px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8
    }

.primary-nav {
    display: grid;
    gap: 4px
}

.nav-item {
    height: 42px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 12px;
    padding: 0 10px;
    color: #59636f;
    font-size: 14px;
    font-weight: 500
}

    .nav-item:hover {
        background: #f2f5f7
    }

.nav-icon {
    width: 24px;
    text-align: center;
    font-size: 15px
}

.star, .small-star {
    color: #ffb71b
}

.nav-count {
    margin-left: auto;
    color: #87919b
}

.badge {
    margin-left: auto;
    border-radius: 999px;
    padding: 3px 7px;
    font-size: 11px;
    color: white
}

.danger {
    background: #eb5a55
}

.nav-separator {
    height: 1px;
    background: var(--line);
    margin: 9px 0
}

.sidebar-section {
    margin-top: 25px
}

.section-title {
    font-size: 12px;
    color: #858f99;
    margin: 0 10px 10px
}

.workspace-row {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 9px;
    height: 38px;
    border: 0;
    background: transparent;
    border-radius: 10px;
    text-align: left;
    color: #4c5661;
    padding: 0 9px
}

    .workspace-row:hover, .workspace-row.active {
        background: #f4f6f8
    }

.chevron {
    width: 14px;
    color: #9aa3ac
}

.workspace-icon {
    width: 21px;
    height: 21px;
    border-radius: 7px;
    color: white;
    display: grid;
    place-items: center;
    font-size: 11px
}

.green-box {
    background: #29a989
}

.orange-box {
    background: #ef9f43
}

.purple-box {
    background: #806be8
}

.tree-group {
    display: grid;
    padding-left: 47px;
    gap: 3px
}

    .tree-group.collapsed {
        display: none
    }

.tree-item {
    font-size: 13px;
    color: #6f7984;
    padding: 7px 0
}

    .tree-item.active {
        font-weight: 600;
        color: #252a30
    }

.add-workspace {
    margin: 10px 0 0 10px;
    border: 0;
    background: transparent;
    color: #858f99;
    padding: 0
}

.recent-notes {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    margin-top: 24px;
    padding-bottom: 18px;
    scrollbar-width: thin;
}

    .recent-notes a {
        flex-shrink: 0;
        font-size: 13px;
        color: #5d6671;
        padding: 0 10px;
    }

.profile-card {
    width: calc(100% + 36px);
    margin-left: -18px;
    margin-top: 0;
    padding: 14px 18px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    background: #ffffff;
    border-top: 1px solid var(--line);
    position: relative;
    z-index: 10;
}

.avatar {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 12px;
    background: #20252b;
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 700;
}

.profile-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

    .profile-copy strong {
        font-size: 13px;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .profile-copy span {
        font-size: 11px;
        color: #929ba4;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.profile-card .icon-button {
    margin-left: auto;
    flex: 0 0 auto;
}

.main-area {
    min-width: 0;
    transition: margin .25s ease
}

.topbar {
    height: 92px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 36px;
    border-bottom: 1px solid rgba(226,231,236,.8);
    background: rgba(246,248,250,.82);
    backdrop-filter: blur(14px);
    position: sticky;
    top: 0;
    z-index: 20
}

.eyebrow {
    font-size: 11px;
    color: #929aa3;
    text-transform: uppercase;
    letter-spacing: .08em
}

.topbar h1 {
    margin: 3px 0 0;
    font-size: 20px
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 12px
}

.ghost-button {
    border: 0;
    background: transparent;
    color: #69727c;
    font-weight: 600
}

.view-toggle {
    display: flex;
    background: #eef1f4;
    border: 1px solid #e0e5e9;
    padding: 3px;
    border-radius: 12px
}

    .view-toggle button {
        border: 0;
        background: transparent;
        width: 38px;
        height: 32px;
        border-radius: 9px;
        color: #7c858e
    }

        .view-toggle button.active {
            background: #fff;
            color: #252a30;
            box-shadow: 0 2px 8px rgba(0,0,0,.05)
        }

.content {
    padding: 28px 36px 60px;
    max-width: 1220px;
    margin: 0 auto
}

.greeting {
    display: flex;
    align-items: center;
    gap: 7px
}

    .greeting h2 {
        font-size: 15px;
        margin: 0;
        font-weight: 500
    }

.wave {
    font-size: 15px
}

.search-box {
    height: 52px;
    background: #fff;
    border: 1px solid #e6eaee;
    box-shadow: 0 10px 25px rgba(32,42,56,.04);
    border-radius: 15px;
    margin: 18px 0 30px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 15px
}

    .search-box svg {
        width: 20px;
        height: 20px;
        fill: none;
        stroke: #929ba4;
        stroke-width: 1.8
    }

    .search-box input {
        border: 0;
        outline: 0;
        flex: 1;
        font-size: 15px;
        color: #404750
    }

    .search-box kbd {
        font-family: inherit;
        background: #f5f7f8;
        border: 1px solid #e3e7eb;
        border-radius: 8px;
        color: #949da7;
        padding: 4px 7px;
        font-size: 11px
    }

.note-section {
    margin-top: 28px
}

.section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 5px 12px;
    border-bottom: 1px solid #dfe4e8
}

.heading-left {
    display: flex;
    align-items: center;
    gap: 10px
}

    .heading-left h3 {
        margin: 0;
        font-size: 14px
    }

.ring {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 3px dotted
}

.ideas {
    border-color: #c76e7f
}

.research {
    border-color: #309bd2
}

.drafts {
    border-color: #5aa66b
}

.plus-button {
    font-size: 24px
}

.note-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 12px;
    margin-top: 14px
}

.new-note-card, .note-card {
    min-height: 250px;
    border-radius: 15px;
    background: #fff;
    border: 1px solid #e2e6ea;
    box-shadow: 0 10px 20px rgba(37,46,58,.025)
}

.new-note-card {
    display: grid;
    place-content: center;
    gap: 8px;
    color: #747e88;
    border-style: dashed
}

    .new-note-card span {
        font-size: 28px
    }

    .new-note-card strong {
        font-size: 13px;
        font-weight: 500
    }

.note-card {
    position: relative;
    padding: 22px 20px 46px;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease
}

    .note-card::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 4px;
        background: #b98088
    }

    .note-card.blue::before {
        background: #2e9bd2
    }

    .note-card.green::before {
        background: #64a970
    }

    .note-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 18px 35px rgba(37,46,58,.07)
    }

    .note-card h4 {
        font-size: 15px;
        margin: 0 0 10px
    }

    .note-card p, .note-card li {
        font-size: 12px;
        line-height: 1.5;
        color: #5f6974
    }

    .note-card ul {
        padding-left: 18px;
        margin: 12px 0 0
    }

    .note-card footer {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 38px;
        border-top: 1px solid #eef1f3;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 18px;
        color: #98a0a8;
        font-size: 11px;
        background: #fafbfc
    }

        .note-card footer button {
            border: 0;
            background: transparent;
            color: #858e97
        }

.note-grid.list-view {
    grid-template-columns: 1fr
}

    .note-grid.list-view .note-card, .note-grid.list-view .new-note-card {
        min-height: 130px
    }

.detail-panel {
    position: fixed;
    right: 0;
    top: 0;
    width: 390px;
    height: 100vh;
    background: #fff;
    border-left: 1px solid var(--line);
    box-shadow: -20px 0 50px rgba(33,43,54,.08);
    z-index: 60;
    padding: 28px;
    transform: translateX(100%);
    transition: transform .25s ease;
    overflow: auto
}

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

.detail-close {
    position: absolute;
    right: 20px;
    top: 17px;
    border: 0;
    background: transparent;
    font-size: 28px;
    color: #89929b
}

.detail-badge {
    font-size: 10px;
    letter-spacing: .1em;
    color: #959da6;
    margin-top: 12px
}

.detail-panel h2 {
    font-size: 24px;
    margin: 9px 0 22px
}

.detail-meta {
    display: grid;
    gap: 12px
}

    .detail-meta > div {
        display: flex;
        justify-content: space-between;
        gap: 20px;
        font-size: 12px
    }

    .detail-meta span {
        color: #9099a3
    }

    .detail-meta strong {
        text-align: right
    }

.detail-divider {
    height: 1px;
    background: var(--line);
    margin: 22px 0
}

.detail-panel textarea {
    width: 100%;
    height: 260px;
    resize: vertical;
    border: 0;
    outline: 0;
    line-height: 1.7;
    color: #414952;
    font-size: 13px
}

.detail-tabs {
    display: flex;
    gap: 16px;
    border-bottom: 1px solid var(--line);
    margin-top: 16px
}

    .detail-tabs button {
        border: 0;
        background: transparent;
        padding: 10px 0;
        color: #8b949e;
        font-size: 12px
    }

        .detail-tabs button.active {
            color: #22272e;
            border-bottom: 2px solid #22272e
        }

.attachment {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 0
}

.attachment-icon {
    width: 40px;
    height: 40px;
    background: #f2f4f6;
    border-radius: 10px;
    display: grid;
    place-items: center;
    font-size: 10px;
    font-weight: 700
}

.attachment > div:nth-child(2) {
    display: grid;
    gap: 3px
}

.attachment strong {
    font-size: 12px
}

.attachment span {
    font-size: 10px;
    color: #939ca5
}

.attachment button {
    margin-left: auto;
    border: 0;
    background: transparent
}

.save-button {
    width: 100%;
    height: 44px;
    border: 0;
    border-radius: 12px;
    background: #24292f;
    color: #fff;
    font-weight: 600;
    margin-top: 12px
}

.mobile-overlay {
    display: none
}

.sidebar-collapsed .app-shell {
    grid-template-columns: 88px minmax(0,1fr)
}

.sidebar-collapsed .sidebar {
    padding-left: 14px;
    padding-right: 14px
}

    .sidebar-collapsed .sidebar .nav-item span:not(.nav-icon), .sidebar-collapsed .sidebar .sidebar-section, .sidebar-collapsed .sidebar .profile-copy, .sidebar-collapsed .sidebar .profile-card .icon-button, .sidebar-collapsed .window-dots {
        display: none
    }

.sidebar-collapsed .sidebar-top {
    justify-content: center
}

.sidebar-collapsed .nav-item {
    justify-content: center
}

.sidebar-collapsed .nav-icon {
    font-size: 18px
}

@media (max-width:1100px) {
    .note-grid {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }
}

@media (max-width:820px) {
    .app-shell {
        grid-template-columns: 1fr
    }

    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        width: 290px;
        transform: translateX(-100%);
        transition: transform .25s ease
    }

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

    .topbar {
        padding: 0 18px
    }

    .content {
        padding: 22px 18px 50px
    }

    .note-grid {
        grid-template-columns: 1fr
    }

    .mobile-overlay {
        position: fixed;
        inset: 0;
        background: rgba(20,26,33,.28);
        z-index: 25
    }

        .mobile-overlay.show {
            display: block
        }

    .sidebar-collapse {
        display: block
    }

    .detail-panel {
        width: min(92vw,390px)
    }
}

.access-home-button {
    display: grid;
    place-items: center;
    text-decoration: none;
}
/* =========================================================
   AUTH / LOGIN / SETUP
   ========================================================= */

.auth-page {
    min-height: 100vh;
    padding: 32px;
    display: grid;
    place-items: center;
    background: radial-gradient( circle at 10% 10%, rgba(122, 149, 170, 0.18), transparent 34% ), radial-gradient( circle at 90% 90%, rgba(171, 150, 131, 0.15), transparent 34% ), #eef2f5;
}

.auth-shell {
    width: min(1100px, 100%);
    min-height: 680px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #dfe5ea;
    border-radius: 28px;
    box-shadow: 0 30px 80px rgba(37, 46, 58, 0.10);
}

/* LEFT SIDE */

.auth-info {
    position: relative;
    padding: 46px;
    display: flex;
    flex-direction: column;
    color: #ffffff;
    background: linear-gradient( 145deg, #22282e 0%, #2e353c 50%, #3c444b 100% );
}

    .auth-info::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: radial-gradient( circle at 80% 20%, rgba(255,255,255,.08), transparent 30% );
    }

.auth-brand {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 12px;
}

.auth-logo {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: #ffffff;
    color: #252b31;
    font-size: 18px;
    font-weight: 700;
}

.auth-brand > div:last-child {
    display: grid;
    gap: 2px;
}

.auth-brand strong {
    font-size: 15px;
}

.auth-brand span {
    font-size: 10px;
    color: rgba(255,255,255,.55);
}

.auth-copy {
    position: relative;
    z-index: 1;
    margin-top: auto;
    margin-bottom: 54px;
}

.auth-kicker {
    display: block;
    margin-bottom: 15px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    color: rgba(255,255,255,.48);
}

.auth-copy h1 {
    max-width: 430px;
    margin: 0 0 18px;
    font-size: clamp(34px, 4vw, 52px);
    line-height: 1.06;
    letter-spacing: -0.04em;
}

.auth-copy p {
    max-width: 440px;
    margin: 0;
    color: rgba(255,255,255,.62);
    line-height: 1.7;
    font-size: 13px;
}

.auth-feature-list {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 12px;
}

    .auth-feature-list > div {
        min-height: 68px;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 15px;
        border: 1px solid rgba(255,255,255,.10);
        border-radius: 15px;
        background: rgba(255,255,255,.04);
        font-size: 11px;
        color: rgba(255,255,255,.72);
    }

    .auth-feature-list span {
        width: 25px;
        height: 25px;
        flex: 0 0 25px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: rgba(255,255,255,.10);
        color: #ffffff;
    }

/* RIGHT SIDE */

.auth-form-panel {
    padding: 58px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #ffffff;
}

.auth-form-header {
    margin-bottom: 30px;
}

    .auth-form-header > span {
        display: inline-block;
        margin-bottom: 10px;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .12em;
        color: #9aa3ac;
    }

    .auth-form-header h2 {
        margin: 0 0 8px;
        font-size: 25px;
        letter-spacing: -0.025em;
    }

    .auth-form-header p {
        margin: 0;
        color: #8b949e;
        font-size: 12px;
    }

.auth-form {
    display: grid;
    gap: 17px;
}

.auth-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px;
}

.auth-field {
    display: grid;
    gap: 7px;
}

    .auth-field label {
        color: #535d67;
        font-size: 11px;
        font-weight: 600;
    }

    .auth-field input {
        width: 100%;
        height: 47px;
        padding: 0 14px;
        outline: none;
        border: 1px solid #dfe4e9;
        border-radius: 12px;
        background: #fbfcfd;
        color: #2c3238;
        transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
    }

        .auth-field input:hover {
            background: #ffffff;
        }

        .auth-field input:focus {
            background: #ffffff;
            border-color: #8d98a2;
            box-shadow: 0 0 0 4px rgba(74, 86, 97, .07);
        }

    .auth-field > span,
    .auth-error {
        color: #d95454;
        font-size: 10px;
    }

.auth-submit {
    height: 48px;
    margin-top: 4px;
    border: 0;
    border-radius: 13px;
    background: #272d33;
    color: #ffffff;
    font-weight: 600;
    transition: transform .15s ease, background .15s ease;
}

    .auth-submit:hover {
        background: #181d22;
        transform: translateY(-1px);
    }

.auth-footer {
    margin-top: 30px;
    text-align: center;
    color: #a0a8b0;
    font-size: 10px;
}

/* RESPONSIVE */

@media (max-width: 850px) {

    .auth-page {
        padding: 15px;
    }

    .auth-shell {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .auth-info {
        min-height: 350px;
        padding: 30px;
    }

    .auth-copy {
        margin-top: 70px;
        margin-bottom: 30px;
    }

        .auth-copy h1 {
            font-size: 36px;
        }

    .auth-form-panel {
        padding: 35px 28px;
    }
}

@media (max-width: 520px) {

    .auth-info {
        display: none;
    }

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

    .auth-form-panel {
        min-height: calc(100vh - 30px);
        padding: 32px 22px;
    }
}

/* =========================================================
   OFFICE UI POLISH — profile, users, support and note replies
   ========================================================= */

/* Category actions stay quiet until the relevant row is hovered/focused. */
.sql-category-node > .tree-actions {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateX(4px);
    transition: opacity .16s ease, visibility .16s ease, transform .16s ease !important;
}

.sql-category-node:hover > .tree-actions,
.sql-category-node:focus-within > .tree-actions {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(0);
}

/* Support appears as a round control with a separate readable label. */
.support-floating-button {
    width: auto !important;
    height: 50px !important;
    min-width: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: 9px !important;
    padding: 5px 15px 5px 5px !important;
    border: 1px solid var(--line) !important;
    border-radius: 999px !important;
    background: var(--white) !important;
    color: var(--text) !important;
    box-shadow: 0 12px 28px rgba(25, 36, 47, .16) !important;
}

.support-floating-button .support-button-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #26313a;
    color: #fff;
}

.support-floating-button .support-button-icon svg { width: 18px; height: 18px; }
.support-floating-button .support-button-label { font-size: 12px; font-weight: 750; }
.support-floating-button:hover { transform: translateY(-2px); background: var(--panel) !important; }
body[data-theme="dark"] .support-floating-button { background: #111f34 !important; border-color: #2b3b53 !important; }
body[data-theme="dark"] .support-floating-button .support-button-icon { background: #2b6eb8; }
.detail-panel.open ~ .support-floating-button { right: 410px; }

/* Reply composer no longer stretches the send button to textarea height. */
.note-comments {
    gap: 12px;
    padding-top: 18px;
}

.note-comments > strong { font-size: 15px; }
.note-comments-list:empty { display: none; }
.note-comments-list > div { padding: 10px 12px; border-radius: 12px; background: var(--soft); }
.note-comment-compose { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px !important; }
.note-comment-compose textarea { min-height: 76px; resize: vertical; padding: 11px 12px !important; border-radius: 12px !important; }
.note-comment-compose button {
    height: 42px;
    min-width: 86px;
    padding: 0 15px !important;
    border-radius: 11px !important;
    font-weight: 700;
    cursor: pointer;
}

/* Profile page */
.profile-page { max-width: 1120px; margin: 0 auto; }
.profile-surface { display: grid; gap: 18px; }
.profile-surface .validation-summary:empty { display: none; }
.profile-surface .success-banner { display: flex; align-items: center; gap: 8px; border: 1px solid rgba(22, 101, 52, .12); }
.profile-surface .success-banner svg { width: 17px; height: 17px; }
.profile-identity-card,
.profile-section-card {
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--white);
    box-shadow: 0 12px 32px rgba(35, 48, 61, .055);
}
.profile-identity-card { display: flex; align-items: center; gap: 26px; padding: 24px; }
.profile-photo-editor { width: 160px; flex: 0 0 160px; display: grid; justify-items: center; gap: 9px; text-align: center; }
.profile-photo-preview img,
.profile-photo-preview span { width: 104px; height: 104px; display: grid; place-items: center; object-fit: cover; border-radius: 50%; background: linear-gradient(145deg, #2767ad, #123d78); color: #fff; font-size: 34px; font-weight: 800; box-shadow: 0 0 0 6px var(--soft); }
.profile-photo-button { height: 34px; display: inline-flex; align-items: center; gap: 7px; padding: 0 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--text); font-size: 11px; font-weight: 650; cursor: pointer; }
.profile-photo-button svg { width: 14px; height: 14px; }
.profile-photo-button input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.profile-photo-editor small { color: var(--muted); font-size: 9px; }
.profile-identity-copy h2 { margin: 5px 0 7px; font-size: 26px; }
.profile-identity-copy p { margin: 0; color: var(--muted); line-height: 1.6; }
.profile-sections-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 18px; }
.profile-section-card { padding: 22px; }
.profile-section-heading { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 20px; }
.profile-section-icon { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; border-radius: 11px; background: rgba(39, 103, 173, .1); color: #2767ad; }
.profile-section-icon svg { width: 18px; height: 18px; }
.profile-section-heading h3 { margin: 0 0 4px; font-size: 15px; }
.profile-section-heading p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.profile-field-grid,
.profile-password-grid { display: grid; gap: 13px; }
.profile-password-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.profile-field-grid label,
.profile-password-grid label { min-width: 0; display: grid; gap: 6px; color: var(--text); font-size: 10px; font-weight: 650; }
.profile-field-grid input,
.profile-password-grid input { width: 100%; height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: 11px; outline: 0; background: var(--panel); color: var(--text); }
.profile-field-grid input:focus,
.profile-password-grid input:focus { border-color: #5d91c9; box-shadow: 0 0 0 3px rgba(39, 103, 173, .1); }
.profile-field-grid [data-valmsg-for],
.profile-password-grid [data-valmsg-for] { color: #c84f55; font-size: 9px; font-weight: 500; }
.profile-form-actions { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 12px 14px 12px 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--white); }
.profile-form-actions > span { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 10px; }
.profile-form-actions > span svg { width: 14px; height: 14px; }
.profile-form-actions .save-button { width: auto; min-width: 155px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.profile-form-actions .save-button svg { width: 15px; height: 15px; }

/* User management */
.users-admin-page { max-width: 1180px; margin: 0 auto; }
.users-admin-page .page-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.users-admin-page .page-intro h2 { margin: 5px 0 5px; font-size: 22px; }
.users-admin-page .page-intro p { margin: 0; color: var(--muted); }
.user-summary-pills { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.user-summary-pills > span { display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--muted); font-size: 10px; }
.user-summary-pills > span strong { color: var(--text); font-size: 11px; }
.user-summary-pills > span.active { background: rgba(34, 166, 122, .08); border-color: rgba(34, 166, 122, .16); color: #168560; }
.users-admin-page .admin-table-wrap { margin-top: 18px; border-radius: 16px; box-shadow: 0 12px 32px rgba(35, 48, 61, .05); }
.users-admin-table th { height: 44px; }
.users-admin-table td { height: 66px; vertical-align: middle; }
.user-cell-identity { display: flex; align-items: center; gap: 11px; }
.user-cell-identity > span:last-child { min-width: 0; display: grid; gap: 3px; }
.user-table-avatar { width: 36px; height: 36px; flex: 0 0 36px; display: grid; place-items: center; border-radius: 11px; background: #eaf2fb; color: #174d8f; font-size: 12px; font-weight: 800; }
.table-actions-inline { opacity: .55; transition: opacity .15s ease; }
.users-admin-table tr:hover .table-actions-inline,
.table-actions-inline:focus-within { opacity: 1; }
body[data-theme="dark"] .profile-identity-card,
body[data-theme="dark"] .profile-section-card,
body[data-theme="dark"] .profile-form-actions,
body[data-theme="dark"] .user-summary-pills > span { background: #111f34; border-color: #2b3b53; }
body[data-theme="dark"] .user-table-avatar { background: #1b3658; color: #9bc9f2; }

@media (hover: none), (max-width: 820px) {
    .sql-category-node > .tree-actions { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: none; }
    .table-actions-inline { opacity: 1; }
}

@media (max-width: 900px) {
    .profile-sections-grid { grid-template-columns: 1fr; }
    .profile-password-grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
    .profile-identity-card { align-items: flex-start; flex-direction: column; }
    .profile-photo-editor { width: 100%; }
    .profile-form-actions,
    .users-admin-page .page-intro { align-items: stretch; flex-direction: column; }
    .profile-form-actions .save-button { width: 100%; }
    .user-summary-pills { justify-content: flex-start; }
    .note-comment-compose { grid-template-columns: 1fr; }
    .note-comment-compose button { width: 100%; }
    .detail-panel.open ~ .support-floating-button { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* =========================================================
   WORKSPACE TREE DRAG & DROP
   ========================================================= */
.sql-workspace-item[draggable="true"] > .workspace-toggle,
.sql-category-node[draggable="true"] > .tree-item {
    cursor: grab;
}

.sql-workspace-item.tree-dragging,
.sql-category-node.tree-dragging {
    opacity: .38;
}

.sql-workspace-item.tree-dragging > .workspace-toggle,
.sql-category-node.tree-dragging > .tree-item {
    cursor: grabbing;
}

.sql-workspace-item,
.sql-category-node {
    transition: opacity .14s ease, background-color .14s ease, box-shadow .14s ease;
}

.tree-drop-before,
.tree-drop-after {
    position: relative;
}

.tree-drop-before::before,
.tree-drop-after::after {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    height: 2px;
    z-index: 20;
    border-radius: 999px;
    background: #2d83ce;
    box-shadow: 0 0 0 3px rgba(45, 131, 206, .12);
    pointer-events: none;
}

.tree-drop-before::before { top: -2px; }
.tree-drop-after::after { bottom: -2px; }

.sql-category-node.tree-drop-inside {
    border-radius: 9px;
    background: rgba(45, 131, 206, .11);
    box-shadow: inset 0 0 0 1px rgba(45, 131, 206, .22);
}

.sql-workspace-item.workspace-drop-root > .workspace-toggle {
    border-radius: 10px;
    background: rgba(45, 131, 206, .11);
    box-shadow: inset 0 0 0 1px rgba(45, 131, 206, .2);
}

body[data-theme="dark"] .sql-category-node.tree-drop-inside,
body[data-theme="dark"] .sql-workspace-item.workspace-drop-root > .workspace-toggle {
    background: rgba(90, 164, 229, .15);
    box-shadow: inset 0 0 0 1px rgba(90, 164, 229, .28);
}

@media (hover: none) {
    .sql-workspace-item[draggable="true"] > .workspace-toggle,
    .sql-category-node[draggable="true"] > .tree-item { cursor: pointer; }
}

/* =========================================================
   CLICKABLE NOTIFICATIONS
   ========================================================= */
.notifications-page { max-width: 1180px; margin: 0 auto; }
.notifications-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
.notifications-heading h2 { margin: 0 0 5px; }
.notifications-heading p { margin: 0; color: var(--muted); }
.notifications-heading form { margin: 0; }
.notification-list { display: grid; gap: 9px; margin-top: 18px; }
.notification-list-row {
    min-height: 68px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto 28px;
    align-items: center;
    gap: 12px;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--white);
    color: var(--text);
    text-decoration: none;
    box-shadow: 0 7px 22px rgba(35, 48, 61, .035);
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.notification-list-row:hover { transform: translateY(-1px); border-color: rgba(45, 131, 206, .35); box-shadow: 0 11px 26px rgba(35, 48, 61, .08); }
.notification-list-row.unread { background: linear-gradient(90deg, rgba(45, 131, 206, .07), var(--white) 28%); border-left: 3px solid #2d83ce; }
.notification-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: var(--soft); color: #65717c; }
.notification-list-row.unread .notification-icon { background: rgba(45, 131, 206, .12); color: #2779bd; }
.notification-icon svg { width: 17px; height: 17px; }
.notification-copy { min-width: 0; display: grid; gap: 4px; }
.notification-copy strong { font-size: 11px; }
.notification-copy small { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.notification-list-row time { color: var(--muted); font-size: 9px; }
.notification-open-icon { display: grid; place-items: center; color: #87929c; }
.notification-open-icon svg { width: 15px; height: 15px; }
body[data-theme="dark"] .notification-list-row { background: #111f34; border-color: #2b3b53; }
body[data-theme="dark"] .notification-list-row.unread { background: linear-gradient(90deg, rgba(58, 139, 211, .15), #111f34 32%); }

@media (max-width: 620px) {
    .notifications-heading { align-items: stretch; flex-direction: column; }
    .notification-list-row { grid-template-columns: 36px minmax(0, 1fr) 24px; }
    .notification-list-row time { grid-column: 2; }
    .notification-open-icon { grid-column: 3; grid-row: 1 / span 2; }
}

/* =========================================================
   FINAL THEME + SUPPORT CONSISTENCY
   Keep this block last so legacy fixed colors cannot win.
   ========================================================= */
body[data-theme="dark"] {
    color-scheme: dark;
    --bg: #091222;
    --panel: #101b2d;
    --white: #111d30;
    --text: #eef4ff;
    --muted: #9aabc2;
    --line: #283850;
}

body[data-theme="dark"] .content,
body[data-theme="dark"] .home-content,
body[data-theme="dark"] .page-content,
body[data-theme="dark"] .calendar-page,
body[data-theme="dark"] .admin-page,
body[data-theme="dark"] .support-admin-page {
    background: var(--bg);
    color: var(--text);
}

body[data-theme="dark"] :is(
    .topbar,
    .page-intro,
    .search-box,
    .selected-area-card,
    .note-list-panel,
    .note-editor,
    .detail-panel,
    .calendar-shell,
    .calendar-toolbar,
    .calendar-day,
    .calendar-detail-panel,
    .calendar-context-menu,
    .admin-modal-card,
    .user-editor-card,
    .workspace-editor,
    .category-editor,
    .delete-popover,
    .profile-menu,
    .install-menu,
    .notification-panel,
    .support-modal-card,
    .support-ticket-card,
    .support-empty-state
) {
    background-color: var(--panel) !important;
    color: var(--text) !important;
    border-color: var(--line) !important;
}

body[data-theme="dark"] :is(
    input,
    textarea,
    select,
    .support-form-field input[type="text"],
    .support-form-field textarea,
    .support-image-picker,
    .support-filter-tabs,
    .support-image-link
) {
    background-color: #0c1728 !important;
    color: var(--text) !important;
    border-color: var(--line) !important;
}

body[data-theme="dark"] :is(input, textarea)::placeholder {
    color: #71839b !important;
    opacity: 1;
}

body[data-theme="dark"] :is(
    .support-modal-header h2,
    .support-ticket-card h3,
    .support-ticket-footer strong,
    .support-empty-state strong,
    .support-page-intro h2
) {
    color: var(--text) !important;
}

body[data-theme="dark"] :is(
    .support-form-field label,
    .support-ticket-card > p,
    .support-ticket-footer span,
    .support-ticket-footer time,
    .support-ticket-number,
    .support-empty-state span,
    .support-page-intro p
) {
    color: var(--muted) !important;
}

body[data-theme="dark"] .support-filter-tabs a {
    color: var(--muted);
}

body[data-theme="dark"] .support-filter-tabs a:hover {
    background: #17263c;
    color: var(--text);
}

body[data-theme="dark"] .support-filter-tabs a.active {
    background: #223754;
    color: #fff;
    box-shadow: none;
}

body[data-theme="dark"] .support-modal-close:hover,
body[data-theme="dark"] .support-image-picker:hover,
body[data-theme="dark"] .support-image-link:hover {
    background: #192941 !important;
    color: #fff !important;
}

body[data-theme="dark"] .support-ticket-footer {
    border-color: var(--line);
}

body[data-theme="dark"] .support-modal {
    background: rgba(2, 8, 18, .72);
}

.support-floating-button {
    min-width: 104px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: #123d78;
    box-shadow: 0 14px 30px rgba(18, 61, 120, .28);
}

.support-floating-button:hover {
    background: #0d315f;
}

body[data-theme="dark"] .support-floating-button {
    border-color: #345274;
    background: #1d5aa3;
}

.chat-drawer.open ~ .support-floating-button,
body.support-modal-open .support-floating-button {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

body.support-modal-open {
    overflow: hidden;
}

.theme-toggle-button [data-lucide] {
    flex: 0 0 auto;
}

@media (max-width: 820px) {
    .support-floating-button {
        min-width: 46px !important;
        width: 46px !important;
        height: 46px;
        padding: 0 !important;
        border-radius: 50%;
    }

    .support-floating-button span {
        display: none;
    }
}

.error-page{min-height:100dvh;display:grid;place-items:center;padding:24px;background:var(--bg)}
.error-card{width:min(480px,100%);padding:34px;border:1px solid var(--line);border-radius:20px;background:var(--white);color:var(--text);box-shadow:var(--shadow);text-align:center}
.error-icon{width:52px;height:52px;margin:0 auto 16px;display:grid;place-items:center;border-radius:16px;background:rgba(228,93,97,.12);color:#d14f54}.error-icon svg{width:25px}
.error-card h1{margin:0 0 10px;font-size:25px}.error-card p{margin:0;color:var(--muted);line-height:1.65}
.error-actions{display:flex;justify-content:center;gap:9px;margin-top:22px}.error-actions button,.error-actions a{min-height:40px;display:inline-flex;align-items:center;justify-content:center;padding:0 14px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--text);font-weight:700;cursor:pointer}.error-actions a{background:#123d78;color:#fff;border-color:#123d78}

/* Recursive SQL category controls: keep create and name/color actions available. */
.sql-category-node > .tree-actions {
    display: inline-flex !important;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
    padding-right: 2px;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.sql-category-node > .tree-actions .tree-action {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
}

.sql-category-node > .tree-actions .tree-action:hover,
.sql-category-node > .tree-actions .tree-action:focus-visible {
    background: rgba(54, 151, 217, .12);
    color: #277fbd;
    outline: none;
}

.sql-category-node > .tree-actions .tree-action svg {
    width: 14px;
    height: 14px;
    stroke-width: 1.9;
}

body[data-theme="dark"] .sql-category-node > .tree-actions .tree-action:hover,
body[data-theme="dark"] .sql-category-node > .tree-actions .tree-action:focus-visible {
    background: rgba(105, 180, 235, .14);
    color: #8bc8f3;
}

/* Existing overlay installations still get a draggable title area until manifest refresh. */
@media (display-mode: window-controls-overlay) {
    .topbar {
        min-height: max(64px, env(titlebar-area-height, 64px));
        padding-top: max(10px, env(titlebar-area-y, 0px));
        padding-left: max(18px, env(titlebar-area-x, 0px));
        padding-right: max(150px, calc(100vw - env(titlebar-area-x, 0px) - env(titlebar-area-width, 100vw)));
        -webkit-app-region: drag;
        app-region: drag;
    }

    .topbar :is(a, button, input, select, textarea, [role="button"]) {
        -webkit-app-region: no-drag;
        app-region: no-drag;
    }
}

/* Installed PWA fills every resized Windows window without fixed desktop dimensions. */
@media (display-mode: standalone), (display-mode: window-controls-overlay) {
    html,
    body,
    .app-shell {
        width: 100%;
        min-width: 0;
        min-height: 100dvh;
    }

    .main-area {
        min-width: 0;
        width: 100%;
    }
}

/* Keep persistence/theme overrides last in the cascade. */
.app-shell{grid-template-columns:var(--sidebar-width,280px) minmax(0,1fr)}
.sidebar-section>.workspace-item{display:none}.sql-workspace-tree .workspace-item{display:block}
.chat-drawer.fullscreen{position:fixed!important;inset:18px!important;width:auto!important;height:auto!important;max-width:none!important;border-radius:20px!important;z-index:1000}
.calendar-days.month-view{grid-template-columns:repeat(7,minmax(130px,1fr));min-width:910px}.calendar-days.month-view .calendar-day-body{min-height:110px;height:110px;overflow:hidden}.calendar-days.month-view .calendar-hour-row{display:none}.calendar-days.month-view .calendar-event{position:relative!important;top:auto!important;height:auto!important;min-height:28px;margin:3px}
.note-comments{display:grid;gap:8px;border-top:1px solid var(--line);padding-top:12px}.note-comments-list{display:grid;gap:7px;max-height:180px;overflow:auto}.note-comments-list>div{padding:8px;border:1px solid var(--line);border-radius:9px}.note-comments-list p{margin:4px 0}.note-comments-list time{font-size:10px;color:var(--muted)}.note-comment-compose{display:flex;gap:7px}.note-comment-compose textarea{flex:1;border:1px solid var(--line);border-radius:9px;padding:8px}.note-comment-compose button{border:0;border-radius:9px;background:#174d8f;color:white;padding:0 12px}

/* SQL ağacı ve sabit profil alanı */
.sql-workspace-tree .workspace-actions{position:absolute;right:6px;top:7px;z-index:2}
.sql-workspace-tree .workspace-toggle{padding-right:86px}
.tree-action{width:22px;height:22px;display:grid;place-items:center;padding:0;border:0;border-radius:6px;background:transparent;color:#8a949d;cursor:pointer}
.tree-action:hover{background:#e9edf0;color:#252b31}
.tree-action svg{width:13px;height:13px;stroke-width:1.8}
.sidebar-profile-footer{width:100%;display:grid;grid-template-columns:minmax(0,1fr) 46px;align-items:center;border-top:1px solid var(--line);background:var(--white);flex:0 0 auto;position:relative;z-index:12}
.sidebar-profile-footer .profile-card{width:100%;min-width:0;margin:0;padding:12px 10px 12px 14px;border:0;background:transparent;text-decoration:none}
.sidebar-profile-footer .logout-form{margin:0;display:grid;place-items:center}
.sidebar-profile-footer .logout-form .icon-button{width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:9px;background:transparent;color:var(--muted);cursor:pointer}
.sidebar-profile-footer .logout-form .icon-button:hover{background:var(--soft);color:var(--text)}
.sidebar-profile-footer .logout-form svg{width:17px;height:17px}
[data-theme="dark"] .tree-action:hover,[data-theme="dark"] .workspace-action:hover{background:rgba(255,255,255,.08);color:var(--text)}
body[data-theme="dark"]{--bg:#091222;--panel:#101b2d;--white:#111d30;--text:#eef4ff;--muted:#9aabc2;--line:#283850;background:#091222;color:var(--text)}
body[data-theme="dark"] .app-shell,body[data-theme="dark"] .main-area{background:#091222;color:var(--text)}
body[data-theme="dark"] .sidebar,body[data-theme="dark"] .topbar,body[data-theme="dark"] .detail-panel,body[data-theme="dark"] .chat-drawer,body[data-theme="dark"] .calendar-modal-card,body[data-theme="dark"] .support-modal-card,body[data-theme="dark"] .note-card,body[data-theme="dark"] .settings-card,body[data-theme="dark"] .role-card,body[data-theme="dark"] .admin-table-wrap{background:#0d192b;color:var(--text);border-color:var(--line)}
@media(max-width:820px){.app-shell{grid-template-columns:1fr!important}.chat-drawer.fullscreen{inset:0!important;border-radius:0!important}}

/* =========================================================
   GOKSANOTE LOGIN
   ========================================================= */

.gn-login-page {
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    background: linear-gradient( rgba(238, 243, 247, .08), rgba(238, 243, 247, .08) ), url('/images/login-background.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* =========================================================
   LOGIN CARD
   ========================================================= */

.gn-login-card {
    width: 500px;
    min-height: auto;
    padding: 42px 46px 34px;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(255, 255, 255, .75);
    border-radius: 30px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 28px 70px rgba(35, 45, 55, .18), 0 6px 18px rgba(35, 45, 55, .06);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}


/* =========================================================
   BRAND
   ========================================================= */

.gn-login-brand {
    display: flex;
    align-items: center;
    gap: 11px;
}

.gn-login-logo {
    width: 43px;
    height: 43px;
    display: grid;
    place-items: center;
    flex: 0 0 43px;
    border-radius: 13px;
    background: #262d33;
    color: #ffffff;
    font-size: 17px;
    font-weight: 700;
}

.gn-login-brand > div:last-child {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.gn-login-brand strong {
    color: #252c32;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
}

.gn-login-brand span {
    color: #929ba4;
    font-size: 9px;
    line-height: 1.2;
}


/* =========================================================
   CONTENT
   ========================================================= */

.gn-login-content {
    margin: 38px 0 24px;
}

.gn-login-heading {
    margin-bottom: 28px;
}

    .gn-login-heading h1 {
        margin: 0 0 8px;
        color: #22292f;
        font-size: 31px;
        font-weight: 700;
        line-height: 1.15;
        letter-spacing: -.035em;
    }

    .gn-login-heading p {
        max-width: 360px;
        margin: 0;
        color: #7e8993;
        font-size: 13px;
        line-height: 1.6;
    }


/* =========================================================
   FORM
   ========================================================= */

.gn-login-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.gn-login-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

    .gn-login-field label {
        color: #4e5963;
        font-size: 11px;
        font-weight: 600;
    }


/* =========================================================
   INPUT WRAPPER
   ========================================================= */

.gn-input-wrapper {
    position: relative;
}

    .gn-input-wrapper svg {
        position: absolute;
        left: 15px;
        top: 50%;
        width: 18px;
        height: 18px;
        transform: translateY(-50%);
        fill: none;
        stroke: #929ca5;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
        pointer-events: none;
    }

    .gn-input-wrapper input {
        width: 100%;
        height: 52px;
        padding: 0 15px 0 45px;
        outline: none;
        border: 1px solid #dce2e7;
        border-radius: 13px;
        background: rgba(249, 250, 251, .94);
        color: #252c32;
        font-family: inherit;
        font-size: 13px;
        transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
    }

        .gn-input-wrapper input::placeholder {
            color: #adb5bd;
        }

        .gn-input-wrapper input:hover {
            border-color: #cbd2d8;
            background: #ffffff;
        }

        .gn-input-wrapper input:focus {
            border-color: #818d97;
            background: #ffffff;
            box-shadow: 0 0 0 4px rgba(69, 81, 91, .07);
        }


/* =========================================================
   VALIDATION
   ========================================================= */

.gn-login-field > span {
    min-height: 0;
    color: #d45151;
    font-size: 10px;
}

    .gn-login-field > span:empty {
        display: none;
    }

.gn-login-error {
    margin: 0;
    padding: 0;
    color: #cf4d4d;
    font-size: 11px;
}

    .gn-login-error:empty {
        display: none;
    }


/* =========================================================
   REMEMBER ME
   ========================================================= */

.gn-login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: -2px;
}

    .gn-login-options label {
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        color: #68737c;
        font-size: 11px;
    }

    .gn-login-options input {
        width: 15px;
        height: 15px;
        margin: 0;
        cursor: pointer;
        accent-color: #2a3137;
    }


/* =========================================================
   LOGIN BUTTON
   ========================================================= */

.gn-login-submit {
    width: 100%;
    height: 52px;
    margin-top: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: none;
    border-radius: 13px;
    cursor: pointer;
    background: #262d33;
    color: #ffffff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 10px 25px rgba(38, 45, 51, .16);
    transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}

    .gn-login-submit svg {
        width: 16px;
        height: 16px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: transform .15s ease;
    }

    .gn-login-submit:hover {
        background: #171c20;
        transform: translateY(-1px);
        box-shadow: 0 14px 30px rgba(38, 45, 51, .20);
    }

        .gn-login-submit:hover svg {
            transform: translateX(3px);
        }

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


/* =========================================================
   FOOTER
   ========================================================= */

.gn-login-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 4px;
    color: #a0a8af;
    font-size: 9px;
}

    .gn-login-footer .dot {
        width: 3px;
        height: 3px;
        flex: 0 0 3px;
        border-radius: 50%;
        background: #b7bec4;
    }


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

@media (max-width: 900px) {

    .gn-login-page {
        justify-content: center;
        padding: 30px;
    }

    .gn-login-card {
        width: min(500px, 100%);
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 550px) {

    .gn-login-page {
        padding: 15px;
        background-position: 35% center;
    }

    .gn-login-card {
        width: 100%;
        padding: 30px 24px;
        border-radius: 22px;
        background: rgba(255, 255, 255, .96);
    }

    .gn-login-content {
        margin: 34px 0 22px;
    }

    .gn-login-heading {
        margin-bottom: 24px;
    }

        .gn-login-heading h1 {
            font-size: 27px;
        }

        .gn-login-heading p {
            font-size: 12px;
        }

    .gn-input-wrapper input {
        height: 50px;
    }

    .gn-login-submit {
        height: 50px;
    }
}


/* =========================================================
   STABLE UI - SIDEBAR / WORKSPACE / LUCIDE
   ========================================================= */

.sidebar-top,
.primary-nav,
.profile-card {
    flex-shrink: 0;
}

.sidebar-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 6px;
    padding-bottom: 18px;
    scrollbar-width: thin;
    scrollbar-color: #cfd6dc transparent;
}

    .sidebar-scroll::-webkit-scrollbar {
        width: 6px;
    }

    .sidebar-scroll::-webkit-scrollbar-track {
        background: transparent;
    }

    .sidebar-scroll::-webkit-scrollbar-thumb {
        background: #cfd6dc;
        border-radius: 999px;
    }

.nav-icon {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    flex: 0 0 24px;
    color: #7f8a94;
}

    .nav-icon svg {
        width: 16px;
        height: 16px;
        stroke-width: 1.8;
    }

.nav-item:hover .nav-icon {
    color: #333b42;
}

.sidebar-section {
    margin-top: 24px;
}

.workspace-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 28px;
    margin: 0 4px 8px 10px;
}

.section-add-button {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    flex: 0 0 26px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #8b959e;
}

    .section-add-button:hover {
        background: #edf1f3;
        color: #2e363d;
    }

    .section-add-button svg {
        width: 15px;
        height: 15px;
        stroke-width: 1.9;
    }

.workspace-item {
    position: relative;
    width: 100%;
    min-height: 38px;
    display: flex;
    align-items: center;
    border-radius: 10px;
}

    .workspace-item:hover,
    .workspace-item.active {
        background: #f4f6f8;
    }

.workspace-toggle {
    flex: 1;
    min-width: 0;
    height: 38px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 7px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #4c5661;
    text-align: left;
}

.chevron {
    width: 16px;
    height: 16px;
    display: grid;
    place-items: center;
    flex: 0 0 16px;
    color: #9aa3ac;
    transition: transform .18s ease;
}

    .chevron svg {
        width: 13px;
        height: 13px;
        stroke-width: 1.8;
    }

.workspace-item.expanded .chevron {
    transform: rotate(90deg);
}

.workspace-icon {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    color: #fff;
}

    .workspace-icon svg {
        width: 13px;
        height: 13px;
        stroke-width: 2;
    }

.green-box {
    background: #29a989;
}

.orange-box {
    background: #ef9f43;
}

.purple-box {
    background: #806be8;
}

.blue-box {
    background: #3697d9;
}

.red-box {
    background: #e45d61;
}

.pink-box {
    background: #d965a5;
}

.yellow-box {
    background: #e5b93e;
}

.cyan-box {
    background: #29a7b8;
}

.gray-box {
    background: #6f7984;
}

.workspace-name {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.workspace-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-right: 4px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease;
}

.workspace-item:hover .workspace-actions,
.workspace-item:focus-within .workspace-actions {
    opacity: 1;
    pointer-events: auto;
}

.workspace-action {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #8a949d;
}

    .workspace-action:hover {
        background: #e9edf0;
        color: #252b31;
    }

    .workspace-action svg {
        width: 14px;
        height: 14px;
        stroke-width: 1.8;
    }

.tree-group {
    display: grid;
    gap: 2px;
    padding-left: 43px;
    margin: 2px 0 6px;
}

    .tree-group.collapsed {
        display: none;
    }

.tree-row {
    min-height: 30px;
    display: flex;
    align-items: center;
    border-radius: 7px;
}

    .tree-row:hover {
        background: #f6f8f9;
    }

.tree-item {
    flex: 1;
    min-width: 0;
    padding: 7px 5px;
    color: #6f7984;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .tree-item.active {
        color: #252a30;
        font-weight: 600;
    }

.tree-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    padding-right: 4px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease;
}

.tree-row:hover .tree-actions,
.tree-row:focus-within .tree-actions {
    opacity: 1;
    pointer-events: auto;
}

.tree-actions button {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #9099a2;
}

    .tree-actions button:hover {
        background: #e9edf0;
        color: #262c32;
    }

.tree-actions svg {
    width: 13px;
    height: 13px;
    stroke-width: 1.8;
}

/* Yönetim workspace'in altında */
.management-section {
    margin-top: 20px;
}

    .management-section .section-title {
        margin-bottom: 7px;
    }

.management-item {
    height: 38px;
    padding: 0 8px;
    font-size: 13px;
    border-radius: 9px;
}

    .management-item .nav-icon {
        width: 22px;
        height: 22px;
        flex: 0 0 22px;
    }

        .management-item .nav-icon svg {
            width: 15px;
            height: 15px;
        }

/* Son notlar ana sidebar scroll'unun parçası */
.recent-notes {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 0 0 auto;
    min-height: auto;
    overflow: visible;
    margin-top: 22px;
    padding-bottom: 24px;
}

    .recent-notes a {
        flex-shrink: 0;
        font-size: 13px;
        color: #5d6671;
        padding: 0 10px;
    }

/* Topbar ve içerik Lucide ikonları */
.ghost-button {
    display: flex;
    align-items: center;
    gap: 7px;
}

    .ghost-button svg {
        width: 15px;
        height: 15px;
        stroke-width: 1.8;
    }

.view-toggle button {
    display: grid;
    place-items: center;
}

    .view-toggle button svg {
        width: 15px;
        height: 15px;
        stroke-width: 1.8;
    }

.search-box > svg {
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
    fill: none;
    stroke: #929ba4;
    stroke-width: 1.8;
}

.section-icon {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 8px;
}

    .section-icon svg {
        width: 14px;
        height: 14px;
        stroke-width: 2;
    }

.ideas-icon {
    color: #b95f74;
    background: rgba(199, 110, 127, .12);
}

.research-icon {
    color: #288fca;
    background: rgba(48, 155, 210, .12);
}

.drafts-icon {
    color: #559f66;
    background: rgba(90, 166, 107, .12);
}

.plus-button {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    padding: 0;
    border-radius: 8px;
}

    .plus-button:hover {
        background: #e9edf1;
    }

    .plus-button svg {
        width: 17px;
        height: 17px;
        stroke-width: 1.8;
    }

.new-note-icon {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    margin: 0 auto;
}

    .new-note-icon svg {
        width: 21px;
        height: 21px;
        stroke-width: 1.7;
    }

.note-card footer button {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    padding: 0;
    border-radius: 7px;
}

    .note-card footer button:hover {
        background: #eef1f3;
    }

    .note-card footer button svg,
    .attachment button svg {
        width: 16px;
        height: 16px;
        stroke-width: 1.8;
    }

.detail-close {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    padding: 0;
    font-size: initial;
}

    .detail-close svg {
        width: 18px;
        height: 18px;
        stroke-width: 1.8;
    }

.profile-card .icon-button svg {
    width: 16px;
    height: 16px;
    stroke-width: 1.8;
}

/* =========================================================
   WORKSPACE EDITOR - TEK TANIM
   ========================================================= */

.workspace-editor {
    position: fixed;
    width: 300px;
    max-height: calc(100vh - 30px);
    overflow-y: auto;
    padding: 16px;
    border: 1px solid #e0e5e9;
    border-radius: 15px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 18px 45px rgba(30, 39, 49, .16), 0 4px 14px rgba(30, 39, 49, .06);
    z-index: 200;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px) scale(.98);
    transition: opacity .14s ease, transform .14s ease, visibility .14s ease;
}

    .workspace-editor.open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(1);
    }

.workspace-editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 17px;
}

    .workspace-editor-header strong {
        font-size: 13px;
        font-weight: 650;
        color: #282f35;
    }

.workspace-editor-close {
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #8b949d;
}

    .workspace-editor-close:hover {
        background: #f0f3f5;
        color: #333a40;
    }

    .workspace-editor-close svg {
        width: 17px;
        height: 17px;
    }

.workspace-editor-field {
    display: grid;
    gap: 8px;
    margin-bottom: 16px;
}

    .workspace-editor-field label {
        color: #616b74;
        font-size: 11px;
        font-weight: 600;
    }

    .workspace-editor-field > input[type="text"] {
        width: 100%;
        height: 40px;
        padding: 0 11px;
        border: 1px solid #dce2e7;
        border-radius: 9px;
        outline: 0;
        background: #fafbfc;
        color: #2c3339;
        font-size: 12px;
    }

        .workspace-editor-field > input[type="text"]:focus {
            border-color: #949fa9;
            background: #fff;
            box-shadow: 0 0 0 3px rgba(71, 82, 92, .07);
        }

.workspace-icon-picker {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 7px;
}

    .workspace-icon-picker button {
        height: 39px;
        display: grid;
        place-items: center;
        padding: 0;
        border: 1px solid #e0e5e9;
        border-radius: 9px;
        background: #f8fafb;
        color: #626c75;
    }

        .workspace-icon-picker button:hover {
            background: #fff;
            border-color: #bcc5cc;
        }

        .workspace-icon-picker button.selected {
            border-color: #30373d;
            background: #30373d;
            color: #fff;
        }

    .workspace-icon-picker svg {
        width: 18px;
        height: 18px;
        stroke-width: 1.8;
    }

.workspace-color-picker {
    display: grid;
    grid-template-columns: repeat(5, 28px);
    gap: 9px;
    align-items: center;
}

    .workspace-color-picker > button {
        position: relative;
        width: 28px;
        height: 28px;
        padding: 0;
        border: 3px solid transparent;
        border-radius: 9px;
        outline: none;
        background: var(--picker-color, #dfe4e8);
        box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
    }

        .workspace-color-picker > button.selected {
            border-color: #fff;
            box-shadow: 0 0 0 2px #30373d, inset 0 0 0 1px rgba(0,0,0,.05);
        }

.custom-color-button {
    display: grid;
    place-items: center;
    overflow: hidden;
    background: conic-gradient( #ef5350, #ec407a, #ab47bc, #5c6bc0, #42a5f5, #26c6da, #66bb6a, #ffee58, #ffa726, #ef5350 ) !important;
    color: #fff;
}

    .custom-color-button svg {
        width: 15px;
        height: 15px;
        stroke-width: 2.2;
        pointer-events: none;
    }

    .custom-color-button input[type="color"] {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        padding: 0;
        border: 0;
        opacity: 0;
        cursor: pointer;
    }

.workspace-editor-actions {
    display: flex;
    justify-content: flex-end;
    gap: 7px;
    padding-top: 4px;
}

.workspace-editor-cancel,
.workspace-editor-save {
    height: 34px;
    padding: 0 13px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
}

.workspace-editor-cancel {
    border: 1px solid #dfe4e8;
    background: #fff;
    color: #707982;
}

.workspace-editor-save {
    border: 0;
    background: #262d33;
    color: #fff;
}

    .workspace-editor-save:hover {
        background: #171c20;
    }

.sidebar-collapsed .sidebar .sidebar-scroll {
    display: none;
}

@media (max-width: 820px) {
    .management-item {
        height: 40px;
    }
}

/* =========================================================
   PWA + MOBILE APPLICATION POLISH
   ========================================================= */

html {
    min-height: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    min-width: 0;
    min-height: 100dvh;
    overscroll-behavior-y: none;
}

img,
svg,
video {
    max-width: 100%;
}

.main-area,
.content,
.app-shell > * {
    min-width: 0;
}

.sidebar-brand {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
    color: #17365f;
    font-size: 14px;
    font-weight: 800;
}

.sidebar-brand img {
    width: 62px;
    height: 34px;
    padding: 3px 5px;
    object-fit: contain;
    border: 1px solid #d9e3ef;
    border-radius: 9px;
    background: #fff;
}

.sidebar-brand span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pwa-install-button {
    position: fixed;
    top: max(16px, env(safe-area-inset-top));
    right: max(16px, env(safe-area-inset-right));
    z-index: 650;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 15px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 13px;
    background: linear-gradient(135deg,#194f94,#0c2e5e);
    color: #fff;
    box-shadow: 0 12px 30px rgba(7,32,69,.24);
    font-size: 12px;
    font-weight: 750;
}

.pwa-install-button[hidden] {
    display: none !important;
}

.pwa-install-button svg {
    width: 17px;
    height: 17px;
}

.gn-login-logo {
    overflow: hidden;
    background: #fff;
}

.gn-login-logo img {
    width: 100%;
    height: 100%;
    padding: 5px;
    object-fit: contain;
}

.admin-table-wrap,
.calendar-shell,
.chat-messages,
.note-editor-content {
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 820px) {
    .app-shell {
        min-height: 100dvh;
    }

    .sidebar {
        width: min(88vw, 320px);
        height: 100dvh;
        padding-top: max(18px, env(safe-area-inset-top));
        padding-bottom: env(safe-area-inset-bottom);
    }

    .content {
        width: 100%;
        padding: 18px 14px calc(76px + env(safe-area-inset-bottom));
    }

    .page-intro,
    .heading-left,
    .topbar,
    .topbar-actions,
    .calendar-toolbar,
    .calendar-toolbar-left,
    .selected-target-bar {
        flex-wrap: wrap;
        gap: 10px;
    }

    .note-grid,
    .settings-grid,
    .role-grid,
    .admin-form-grid,
    .calendar-form-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .admin-table-wrap {
        width: 100%;
        overflow-x: auto;
        border-radius: 14px;
    }

    .admin-table {
        min-width: 720px;
    }

    .calendar-shell {
        width: 100%;
        overflow-x: auto;
    }

    .calendar-days,
    .calendar-time-column {
        min-width: 680px;
    }

    .workspace-editor,
    .category-editor,
    .delete-popover,
    .calendar-context-menu {
        max-width: calc(100vw - 24px);
    }

    .admin-modal-card,
    .calendar-modal-card,
    .support-modal-card {
        width: calc(100vw - 24px);
        max-height: calc(100dvh - 24px);
        overflow-y: auto;
    }

    button,
    .nav-item,
    input,
    select {
        min-height: 44px;
    }

    textarea {
        min-height: 96px;
    }

    .pwa-install-button {
        top: auto;
        right: max(14px, env(safe-area-inset-right));
        bottom: calc(14px + env(safe-area-inset-bottom));
    }
}

@media (max-width: 520px) {
    .content {
        padding-inline: 10px;
    }

    .note-card,
    .settings-card,
    .role-card,
    .support-ticket-card {
        border-radius: 15px;
    }

    .detail-panel,
    .note-editor {
        width: 100vw;
        max-width: 100vw;
    }

    .pwa-install-button span {
        max-width: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

@media (display-mode: standalone) {
    body {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }

    .pwa-install-button {
        display: none !important;
    }
}

.note-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

    .note-card-top h4 {
        flex: 1;
        min-width: 0;
        margin: 0;
    }

.note-favorite {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    flex: 0 0 28px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #9aa3ac;
    cursor: pointer;
}

    .note-favorite:hover {
        background: #f1f4f6;
    }

    .note-favorite.active {
        color: #d8a322;
    }

        .note-favorite.active svg {
            fill: currentColor;
        }

    .note-favorite svg {
        width: 16px;
        height: 16px;
        stroke-width: 1.8;
    }

.note-card {
    cursor: pointer;
}

.note-menu-button {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #858e97;
}

    .note-menu-button:hover {
        background: #edf1f3;
    }

.archive-icon {
    color: #697681;
    background: rgba(105, 118, 129, .11);
}

.note-action-icon {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    flex: 0 0 28px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #89939d;
}

    .note-action-icon:hover {
        background: #f1f4f6;
        color: #30373d;
    }

    .note-action-icon svg {
        width: 16px;
        height: 16px;
        stroke-width: 1.8;
    }

.detail-actions-stack {
    display: grid;
    gap: 9px;
    margin-top: 22px;
}

.secondary-action-button,
.danger-action-button {
    width: 100%;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 11px;
    font-size: 12px;
    font-weight: 600;
}

.secondary-action-button {
    border: 1px solid #dce2e7;
    background: #fff;
    color: #4e5963;
}

    .secondary-action-button:hover {
        background: #f7f9fa;
    }

.danger-action-button {
    border: 1px solid rgba(217, 84, 84, .18);
    background: rgba(217, 84, 84, .07);
    color: #c84e4e;
}

    .danger-action-button:hover {
        background: rgba(217, 84, 84, .12);
    }

    .secondary-action-button svg,
    .danger-action-button svg {
        width: 15px;
        height: 15px;
        stroke-width: 1.9;
    }

/* =========================================================
   NOTE EDITOR
   ========================================================= */

.note-editor {
    border: 1px solid #e2e7eb;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}

.note-editor-toolbar {
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 5px 7px;
    border-bottom: 1px solid #e7ebee;
    background: #f8fafb;
}

.editor-tool {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #707b85;
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}

    .editor-tool:hover {
        background: #e9edf0;
        color: #272e34;
    }

    .editor-tool.active {
        background: #272e34;
        color: #fff;
    }

    .editor-tool svg {
        width: 15px;
        height: 15px;
        stroke-width: 1.9;
    }

.editor-divider {
    width: 1px;
    height: 20px;
    margin: 0 4px;
    background: #dfe4e8;
}

.note-editor-content {
    min-height: 260px;
    max-height: 440px;
    padding: 15px 14px;
    overflow-y: auto;
    outline: none;
    color: #414952;
    font-size: 13px;
    line-height: 1.7;
    white-space: normal;
}

    .note-editor-content:empty::before {
        content: "Notunuzu yazın...";
        color: #a1a9b1;
        pointer-events: none;
    }

    .note-editor-content ul,
    .note-editor-content ol {
        margin: 7px 0;
        padding-left: 23px;
    }

    .note-editor-content li {
        margin: 3px 0;
    }

.note-dash-line {
    display: block;
}

    .note-dash-line::before {
        content: "- ";
        color: #6f7984;
    }

.note-check-line {
    display: flex;
    align-items: flex-start;
    gap: 7px;
}

    .note-check-line::before {
        content: "☐";
        flex: 0 0 auto;
        color: #7c8791;
    }

/* =========================================================
   GOKSANOTE CALENDAR
   ========================================================= */

.calendar-page {
    max-width: none;
    padding-top: 22px;
}

.calendar-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
}

.calendar-toolbar-options {
    display: flex;
    align-items: center;
    gap: 10px;
}

.calendar-weekend-toggle {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    border: 1px solid #dfe4e8;
    border-radius: 11px;
    background: #fff;
    color: #66717b;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
}

.calendar-weekend-toggle input {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: #1f5a9d;
}

body[data-theme="dark"] .calendar-weekend-toggle {
    background: #111f34;
    color: var(--text);
    border-color: var(--line);
}

.calendar-toolbar-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

    .calendar-toolbar-left h2 {
        margin: 0 0 0 10px;
        font-size: 18px;
        font-weight: 650;
        color: #283039;
        white-space: nowrap;
    }

.calendar-nav-button,
.calendar-today-button {
    height: 34px;
    border: 1px solid #dfe4e8;
    border-radius: 9px;
    background: #ffffff;
    color: #66717b;
}

.calendar-nav-button {
    width: 34px;
    display: grid;
    place-items: center;
    padding: 0;
}

    .calendar-nav-button svg {
        width: 15px;
        height: 15px;
        stroke-width: 1.9;
    }

    .calendar-nav-button:hover,
    .calendar-today-button:hover {
        background: #f4f6f8;
        color: #293139;
    }

.calendar-today-button {
    padding: 0 12px;
    font-size: 12px;
    font-weight: 600;
}

.calendar-new-button {
    height: 36px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 13px;
    border: 0;
    border-radius: 10px;
    background: #272e34;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
}

    .calendar-new-button:hover {
        background: #171c20;
    }

    .calendar-new-button svg {
        width: 15px;
        height: 15px;
        stroke-width: 1.9;
    }

.calendar-view-switch {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 3px;
    border: 1px solid #dfe4e8;
    border-radius: 11px;
    background: #eef1f4;
}

    .calendar-view-switch button {
        height: 30px;
        padding: 0 12px;
        border: 0;
        border-radius: 8px;
        background: transparent;
        color: #7a858f;
        font-size: 11px;
        font-weight: 600;
    }

        .calendar-view-switch button.active {
            background: #fff;
            color: #252c32;
            box-shadow: 0 2px 8px rgba(0,0,0,.05);
        }

/* =========================================================
   CALENDAR GRID
   ========================================================= */

.calendar-shell {
    display: grid;
    grid-template-columns: 66px minmax(0, 1fr);
    min-width: 0;
    overflow: auto;
    border: 1px solid #dfe4e8;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(32,42,56,.035);
}

.calendar-time-column {
    border-right: 1px solid #e5e9ed;
    background: #fafbfc;
}

.calendar-time-head {
    height: 58px;
    border-bottom: 1px solid #e5e9ed;
}

.calendar-time-slot {
    height: 60px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 6px 10px 0 0;
    color: #9aa3ac;
    font-size: 10px;
    border-bottom: 1px solid #edf0f2;
}

.calendar-days {
    display: grid;
    grid-template-columns: repeat(5, minmax(150px, 1fr));
    min-width: 750px;
}

.calendar-day {
    min-width: 0;
    border-right: 1px solid #e6eaee;
}

    .calendar-day:last-child {
        border-right: 0;
    }

.calendar-day-head {
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-bottom: 1px solid #e5e9ed;
    background: #fbfcfd;
}

    .calendar-day-head span {
        color: #929ca5;
        font-size: 10px;
        font-weight: 600;
        text-transform: uppercase;
    }

    .calendar-day-head strong {
        width: 28px;
        height: 28px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        color: #343c43;
        font-size: 12px;
        font-weight: 650;
    }

.calendar-day.current .calendar-day-head strong {
    background: #252c32;
    color: #fff;
}

.calendar-day-body {
    position: relative;
    min-height: 660px;
}

.calendar-hour-row {
    height: 60px;
    border-bottom: 1px solid #edf0f2;
}

    .calendar-hour-row:hover {
        background: #fafcfd;
    }

/* =========================================================
   EVENTS
   ========================================================= */

.calendar-event {
    position: absolute;
    top: var(--event-top);
    left: 6px;
    right: 6px;
    min-height: var(--event-height);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    padding: 8px 9px;
    border: 0;
    border-left: 3px solid currentColor;
    border-radius: 8px;
    text-align: left;
    overflow: hidden;
    cursor: pointer;
    transition: transform .14s ease, box-shadow .14s ease;
}

    .calendar-event:hover {
        transform: translateY(-1px);
        box-shadow: 0 8px 18px rgba(30,40,50,.08);
    }

    .calendar-event strong {
        width: 100%;
        font-size: 11px;
        font-weight: 650;
        line-height: 1.3;
        color: #263039;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .calendar-event span {
        font-size: 10px;
        color: #6f7983;
    }

    .calendar-event small {
        display: flex;
        align-items: center;
        gap: 4px;
        margin-top: 1px;
        font-size: 9px;
        color: #66717a;
    }

        .calendar-event small svg {
            width: 11px;
            height: 11px;
            stroke-width: 1.9;
        }

    /* Event renkleri */

    .calendar-event.blue {
        background: rgba(54, 151, 217, .12);
        color: #3697d9;
    }

    .calendar-event.orange {
        background: rgba(243, 154, 46, .13);
        color: #f39a2e;
    }

    .calendar-event.purple {
        background: rgba(124, 92, 229, .12);
        color: #7c5ce5;
    }

    .calendar-event.green {
        background: rgba(34, 166, 122, .12);
        color: #22a67a;
    }

/* =========================================================
   DETAIL PANEL
   ========================================================= */

.calendar-detail-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 390px;
    height: 100vh;
    padding: 28px;
    background: #fff;
    border-left: 1px solid #e1e6ea;
    box-shadow: -20px 0 50px rgba(33,43,54,.08);
    z-index: 80;
    transform: translateX(100%);
    transition: transform .24s ease;
    overflow-y: auto;
}

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

.calendar-detail-close {
    position: absolute;
    top: 17px;
    right: 20px;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #89929b;
}

    .calendar-detail-close:hover {
        background: #f1f4f6;
        color: #333b42;
    }

    .calendar-detail-close svg {
        width: 17px;
        height: 17px;
        stroke-width: 1.8;
    }

.calendar-detail-panel h2 {
    margin: 9px 0 24px;
    padding-right: 30px;
    font-size: 23px;
    letter-spacing: -.02em;
}

.calendar-detail-info {
    display: grid;
    gap: 16px;
}

    .calendar-detail-info > div {
        display: grid;
        grid-template-columns: 28px 1fr;
        align-items: flex-start;
        gap: 9px;
    }

        .calendar-detail-info > div > svg {
            width: 17px;
            height: 17px;
            margin-top: 2px;
            stroke-width: 1.8;
            color: #858f98;
        }

        .calendar-detail-info > div > div {
            display: grid;
            gap: 3px;
        }

    .calendar-detail-info span {
        color: #929ca5;
        font-size: 10px;
    }

    .calendar-detail-info strong {
        color: #333b42;
        font-size: 12px;
        font-weight: 600;
    }

.calendar-detail-actions {
    display: grid;
    gap: 9px;
    margin-top: 28px;
}

.teams-join-button {
    width: 100%;
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: 11px;
    background: #5b5fc7;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
}

    .teams-join-button:hover {
        background: #4b4fab;
    }

    .teams-join-button svg {
        width: 15px;
        height: 15px;
        stroke-width: 1.9;
    }

/* =========================================================
   MODAL
   ========================================================= */

.calendar-modal {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(23, 29, 35, .25);
    backdrop-filter: blur(3px);
    z-index: 120;
    opacity: 0;
    visibility: hidden;
    transition: opacity .16s ease, visibility .16s ease;
}

    .calendar-modal.open {
        opacity: 1;
        visibility: visible;
    }

.calendar-modal-card {
    width: min(560px, 100%);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding: 22px;
    border: 1px solid #dfe4e8;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 28px 70px rgba(26,35,45,.18);
    transform: translateY(8px) scale(.98);
    transition: transform .16s ease;
}

.calendar-modal.open .calendar-modal-card {
    transform: translateY(0) scale(1);
}

.calendar-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 20px;
}

    .calendar-modal-header h2 {
        margin: 4px 0 0;
        font-size: 20px;
    }

    .calendar-modal-header > button {
        width: 30px;
        height: 30px;
        display: grid;
        place-items: center;
        padding: 0;
        border: 0;
        border-radius: 8px;
        background: transparent;
        color: #858f98;
    }

        .calendar-modal-header > button:hover {
            background: #f1f4f6;
            color: #333b42;
        }

        .calendar-modal-header > button svg {
            width: 17px;
            height: 17px;
            stroke-width: 1.8;
        }

/* =========================================================
   FORM
   ========================================================= */

.calendar-form {
    display: grid;
    gap: 15px;
}

.calendar-form-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr;
    gap: 10px;
}

.calendar-form-field {
    display: grid;
    gap: 7px;
}

    .calendar-form-field label {
        color: #56616b;
        font-size: 11px;
        font-weight: 600;
    }

    .calendar-form-field input,
    .calendar-form-field textarea {
        width: 100%;
        border: 1px solid #dfe4e8;
        border-radius: 10px;
        outline: 0;
        background: #fafbfc;
        color: #30383f;
        font-size: 12px;
        transition: border-color .14s ease, box-shadow .14s ease, background .14s ease;
    }

    .calendar-form-field input {
        height: 42px;
        padding: 0 11px;
    }

    .calendar-form-field textarea {
        min-height: 100px;
        resize: vertical;
        padding: 11px;
    }

        .calendar-form-field input:focus,
        .calendar-form-field textarea:focus {
            border-color: #949fa9;
            background: #fff;
            box-shadow: 0 0 0 3px rgba(71,82,92,.07);
        }

.calendar-teams-option {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 42px;
    padding: 0 11px;
    border: 1px solid #e1e6ea;
    border-radius: 10px;
    background: #f9fafb;
    cursor: pointer;
}

    .calendar-teams-option input {
        width: 15px;
        height: 15px;
        accent-color: #5b5fc7;
    }

    .calendar-teams-option span {
        display: flex;
        align-items: center;
        gap: 7px;
        color: #4f5a64;
        font-size: 11px;
        font-weight: 600;
    }

    .calendar-teams-option svg {
        width: 15px;
        height: 15px;
        stroke-width: 1.8;
    }

.calendar-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 22px;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {

    .calendar-toolbar {
        align-items: flex-start;
    }

    .calendar-toolbar-left {
        flex-wrap: wrap;
    }

        .calendar-toolbar-left h2 {
            width: 100%;
            margin: 7px 0 0;
        }

    .calendar-days {
        min-width: 850px;
    }
}

@media (max-width: 820px) {

    .calendar-page {
        padding-left: 14px;
        padding-right: 14px;
    }

    .calendar-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .calendar-view-switch {
        align-self: flex-start;
    }

    .calendar-detail-panel {
        width: min(92vw, 390px);
    }

    .calendar-form-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {

    .calendar-toolbar-left {
        gap: 6px;
    }

        .calendar-toolbar-left h2 {
            font-size: 16px;
        }

    .calendar-new-button span {
        display: none;
    }

    .calendar-new-button {
        width: 36px;
        padding: 0;
        justify-content: center;
    }

    .calendar-modal-card {
        padding: 18px;
        border-radius: 15px;
    }
}

.calendar-link-picker {
    height: 42px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 11px;
    border: 1px solid #dfe4e8;
    border-radius: 10px;
    background: #fafbfc;
}

    .calendar-link-picker:focus-within {
        border-color: #949fa9;
        background: #fff;
        box-shadow: 0 0 0 3px rgba(71,82,92,.07);
    }

    .calendar-link-picker svg {
        width: 15px;
        height: 15px;
        flex: 0 0 15px;
        color: #929ca5;
    }

    .calendar-link-picker input {
        width: 100%;
        height: 100%;
        padding: 0 !important;
        border: 0 !important;
        outline: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

.calendar-link-results {
    display: none;
    max-height: 190px;
    overflow-y: auto;
    margin-top: 5px;
    padding: 5px;
    border: 1px solid #dfe4e8;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(30,40,50,.10);
}

    .calendar-link-results.open {
        display: grid;
        gap: 2px;
    }

    .calendar-link-results button {
        width: 100%;
        min-height: 46px;
        display: flex;
        align-items: center;
        gap: 9px;
        padding: 6px 8px;
        border: 0;
        border-radius: 8px;
        background: transparent;
        text-align: left;
    }

        .calendar-link-results button:hover {
            background: #f3f6f8;
        }

.calendar-link-icon {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    flex: 0 0 30px;
    border-radius: 8px;
    background: #eef2f5;
    color: #66717b;
}

    .calendar-link-icon svg {
        width: 15px;
        height: 15px;
    }

.calendar-link-results button > span:last-child {
    display: grid;
    gap: 2px;
}

.calendar-link-results strong {
    font-size: 11px;
    color: #333b42;
}

.calendar-link-results small {
    font-size: 9px;
    color: #929ca5;
}

.calendar-linked-target {
    min-height: 38px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding: 0 9px;
    border: 1px solid #dfe5e9;
    border-radius: 9px;
    background: #f6f8fa;
    color: #58636d;
    font-size: 11px;
}

    .calendar-linked-target[hidden] {
        display: none;
    }

    .calendar-linked-target > svg {
        width: 14px;
        height: 14px;
    }

    .calendar-linked-target span {
        flex: 1;
    }

    .calendar-linked-target button {
        width: 24px;
        height: 24px;
        display: grid;
        place-items: center;
        padding: 0;
        border: 0;
        border-radius: 6px;
        background: transparent;
        color: #9099a2;
    }


/* =========================================================
   CALENDAR CONTEXT MENU
   ========================================================= */

.calendar-context-menu {
    position: fixed;
    width: 180px;
    display: grid;
    gap: 2px;
    padding: 5px;
    border: 1px solid #dfe4e8;
    border-radius: 11px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 18px 45px rgba(30, 39, 49, .14), 0 3px 10px rgba(30, 39, 49, .05);
    z-index: 300;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-3px) scale(.98);
    transition: opacity .12s ease, transform .12s ease, visibility .12s ease;
}

    .calendar-context-menu.open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(1);
    }

    .calendar-context-menu button {
        width: 100%;
        height: 36px;
        display: flex;
        align-items: center;
        gap: 9px;
        padding: 0 10px;
        border: 0;
        border-radius: 8px;
        background: transparent;
        color: #59636d;
        font-size: 11px;
        font-weight: 500;
        text-align: left;
    }

        .calendar-context-menu button:hover {
            background: #f1f4f6;
            color: #272e34;
        }

        .calendar-context-menu button svg {
            width: 15px;
            height: 15px;
            flex: 0 0 15px;
            stroke-width: 1.8;
        }

.calendar-detail-description {
    display: grid;
    gap: 6px;
}

    .calendar-detail-description > span {
        color: #929ca5;
        font-size: 10px;
    }

    .calendar-detail-description p {
        margin: 0;
        color: #4f5963;
        font-size: 12px;
        line-height: 1.65;
    }
/* =========================================================
   GOKSANOTE RUNTIME STABILITY / PERFORMANCE
   ========================================================= */

/* Hidden workspace editor must not occupy/render stray color controls. */
.workspace-editor {
    display: none;
}

    .workspace-editor.open {
        display: block;
    }

.nav-button {
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
}

.shell-loading .main-area {
    opacity: .72;
    pointer-events: none;
}

.main-area {
    transition: opacity .12s ease;
}

.calendar-day-body {
    contain: layout paint;
}

.calendar-event {
    will-change: transform;
    contain: layout paint style;
}

.calendar-day[hidden] {
    display: none !important;
}

/* =========================================================
   CHAT DRAWER
   ========================================================= */

.chat-drawer {
    position: fixed;
    right: 18px;
    bottom: 18px;
    width: min(390px, calc(100vw - 36px));
    height: min(650px, calc(100vh - 36px));
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #dfe4e8;
    border-radius: 18px;
    box-shadow: 0 28px 70px rgba(31, 40, 50, .18), 0 6px 20px rgba(31, 40, 50, .06);
    z-index: 260;
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px) scale(.98);
    transition: opacity .16s ease, visibility .16s ease, transform .16s ease;
    overflow: hidden;
}

    .chat-drawer.open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(1);
    }

.chat-drawer-header,
.chat-conversation-header {
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid #e8ecef;
    background: #fff;
    flex: 0 0 auto;
}

    .chat-drawer-header > div:first-child {
        display: grid;
        gap: 3px;
    }

    .chat-drawer-header strong {
        font-size: 15px;
    }

.chat-drawer-actions {
    display: flex;
    gap: 4px;
}

.chat-icon-button {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #7c8791;
}

    .chat-icon-button:hover {
        background: #f0f3f5;
        color: #263039;
    }

    .chat-icon-button svg {
        width: 16px;
        height: 16px;
        stroke-width: 1.8;
    }

.chat-user-search,
.messages-page-search {
    height: 44px;
    margin: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 11px;
    border: 1px solid #e0e5e9;
    border-radius: 11px;
    background: #f8fafb;
}

    .chat-user-search svg,
    .messages-page-search svg {
        width: 15px;
        height: 15px;
        color: #929ca5;
    }

    .chat-user-search input,
    .messages-page-search input {
        min-width: 0;
        flex: 1;
        border: 0;
        outline: 0;
        background: transparent;
        color: #333b42;
        font-size: 12px;
    }

.chat-user-list,
.messages-page-users [data-chat-users] {
    min-height: 0;
    overflow-y: auto;
    padding: 0 8px 10px;
}

.chat-user-row {
    width: 100%;
    min-height: 58px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: #374149;
    text-align: left;
}

    .chat-user-row:hover {
        background: #f3f6f8;
    }

.chat-user-avatar {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    flex: 0 0 36px;
    border-radius: 12px;
    background: #273039;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
}

.chat-user-copy,
.chat-peer-copy {
    min-width: 0;
    display: grid;
    gap: 2px;
    flex: 1;
}

    .chat-user-copy strong,
    .chat-peer-copy strong {
        font-size: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .chat-user-copy small,
    .chat-peer-copy span {
        color: #929ca5;
        font-size: 10px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.chat-unread,
.chat-nav-badge {
    min-width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    padding: 0 5px;
    border-radius: 999px;
    background: #eb5a55;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
}

.chat-conversation {
    min-height: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

    .chat-conversation[hidden] {
        display: none;
    }

.chat-conversation-header {
    justify-content: flex-start;
}

.chat-messages,
.messages-page-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    background: #f7f9fb;
}

.chat-message-row {
    display: flex;
    width: 100%;
}

    .chat-message-row.mine {
        justify-content: flex-end;
    }

    .chat-message-row.theirs {
        justify-content: flex-start;
    }

.chat-message-bubble {
    max-width: 82%;
    display: grid;
    gap: 6px;
    padding: 9px 11px 7px;
    border: 1px solid #e1e6ea;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(30, 40, 50, .025);
}

.chat-message-row.mine .chat-message-bubble {
    border-color: #293139;
    background: #293139;
    color: #fff;
}

.chat-message-bubble p {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 12px;
    line-height: 1.5;
}

.chat-message-bubble time {
    justify-self: end;
    color: #929ca5;
    font-size: 8px;
}

.chat-message-row.mine .chat-message-bubble time {
    color: rgba(255, 255, 255, .55);
}

.chat-file-link {
    min-width: 190px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-radius: 9px;
    background: rgba(0, 0, 0, .04);
}

.chat-message-row.mine .chat-file-link {
    background: rgba(255, 255, 255, .09);
}

.chat-file-link > svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
}

.chat-file-link > span {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.chat-file-link strong {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
}

.chat-file-link small {
    color: #929ca5;
    font-size: 8px;
}

.chat-composer {
    display: flex;
    align-items: flex-end;
    gap: 7px;
    padding: 10px;
    border-top: 1px solid #e3e8ec;
    background: #fff;
    flex: 0 0 auto;
}

.chat-compose-main {
    min-width: 0;
    flex: 1;
    display: grid;
    gap: 5px;
}

    .chat-compose-main textarea {
        width: 100%;
        max-height: 110px;
        resize: none;
        padding: 9px 10px;
        border: 1px solid #dfe4e8;
        border-radius: 10px;
        outline: 0;
        background: #fafbfc;
        color: #30383f;
        font-size: 12px;
    }

        .chat-compose-main textarea:focus {
            background: #fff;
            border-color: #949fa9;
        }

.chat-file-chip {
    padding: 5px 7px;
    border-radius: 7px;
    background: #eef2f5;
    color: #66717b;
    font-size: 9px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.chat-send-button {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: #272e34;
    color: #fff;
}

    .chat-send-button:disabled {
        opacity: .5;
    }

    .chat-send-button svg {
        width: 15px;
        height: 15px;
    }

/* =========================================================
   FULL MESSAGES PAGE
   ========================================================= */

.messages-page {
    max-width: 1380px;
}

.messages-page-shell {
    height: calc(100vh - 180px);
    min-height: 560px;
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid #dfe4e8;
    border-radius: 16px;
    background: #fff;
}

.messages-page-users {
    min-width: 0;
    border-right: 1px solid #e5e9ed;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.messages-page-conversation {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.messages-page-header {
    min-height: 70px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid #e5e9ed;
}

    .messages-page-header > div {
        display: grid;
        gap: 2px;
    }

    .messages-page-header strong {
        font-size: 13px;
    }

    .messages-page-header span {
        color: #929ca5;
        font-size: 10px;
    }

.messages-page-list {
    flex: 1;
}

.messages-page-compose-hint {
    padding: 10px 14px;
    border-top: 1px solid #e5e9ed;
    color: #8d97a0;
    font-size: 10px;
    text-align: center;
}

.chat-empty-state {
    margin: auto;
    display: grid;
    justify-items: center;
    gap: 8px;
    color: #8b959e;
}

    .chat-empty-state svg {
        width: 34px;
        height: 34px;
    }

    .chat-empty-state strong {
        color: #4b555e;
        font-size: 13px;
    }

    .chat-empty-state span {
        font-size: 10px;
    }

@media (max-width: 820px) {
    .chat-drawer {
        right: 8px;
        bottom: 8px;
        width: calc(100vw - 16px);
        height: calc(100vh - 16px);
    }

    .messages-page-shell {
        grid-template-columns: 1fr;
        height: auto;
        min-height: 70vh;
    }

    .messages-page-users {
        max-height: 280px;
        border-right: 0;
        border-bottom: 1px solid #e5e9ed;
    }
}

/* =========================================================
   FINAL INTEGRATION - DASHBOARD / NOTES / CHAT WINDOW
   ========================================================= */
.workspace-editor[aria-hidden="true"] {
    display: none !important;
}

.workspace-editor.open {
    display: block !important;
}

.detail-title-input {
    width: calc(100% - 36px);
    margin: 8px 0 18px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #22272e;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -.025em;
}

.detail-action-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.note-preview {
    max-height: 130px;
    overflow: hidden;
    color: #5f6974;
    font-size: 12px;
    line-height: 1.55;
}

    .note-preview p {
        margin: 0 0 8px;
    }

    .note-preview ul, .note-preview ol {
        margin: 6px 0;
        padding-left: 18px;
    }

.note-target-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    margin-top: 12px;
    padding: 4px 7px;
    border-radius: 7px;
    background: #f2f5f7;
    color: #87919b;
    font-size: 9px;
}

    .note-target-chip svg {
        width: 11px;
        height: 11px;
    }

.note-footer-actions {
    display: flex;
    align-items: center;
    gap: 3px;
}

.selected-target-bar {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 24px;
    padding: 10px 14px;
    border: 1px solid #e1e6ea;
    border-radius: 12px;
    background: rgba(255,255,255,.76);
}

    .selected-target-bar > div {
        display: grid;
        gap: 3px;
    }

    .selected-target-bar span {
        color: #9aa3ac;
        font-size: 9px;
        letter-spacing: .1em;
    }

    .selected-target-bar strong {
        font-size: 11px;
    }

    .selected-target-bar button {
        height: 32px;
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 0 10px;
        border: 1px solid #dce2e7;
        border-radius: 8px;
        background: #fff;
        color: #5d6771;
        font-size: 10px;
    }

        .selected-target-bar button svg {
            width: 13px;
            height: 13px;
        }

.section-link {
    color: #7f8992;
    font-size: 10px;
}

.empty-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 20px 8px;
    color: #98a1aa;
    font-size: 11px;
}

    .empty-inline svg {
        width: 15px;
        height: 15px;
    }

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

.upcoming-event {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 66px;
    padding: 10px;
    border: 1px solid #e2e7eb;
    border-radius: 11px;
    background: #fff;
}

    .upcoming-event:hover {
        background: #fafbfc;
    }

.event-date {
    min-width: 46px;
    color: #66717a;
    font-size: 10px;
    font-weight: 700;
}

.upcoming-event > div {
    display: grid;
    gap: 4px;
}

.upcoming-event strong {
    font-size: 11px;
}

.upcoming-event small {
    color: #929ba4;
    font-size: 9px;
}

.page-intro {
    margin-bottom: 20px;
}

    .page-intro h2 {
        margin: 0 0 6px;
        font-size: 23px;
    }

    .page-intro p {
        margin: 0;
        color: #7f8992;
        font-size: 12px;
    }

.simple-list {
    display: grid;
    gap: 8px;
}

.simple-list-row {
    min-height: 64px;
    display: grid;
    grid-template-columns: 34px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #e1e6ea;
    border-radius: 11px;
    background: #fff;
}

    .simple-list-row > div {
        display: grid;
        gap: 3px;
    }

    .simple-list-row strong {
        font-size: 11px;
    }

    .simple-list-row small, .simple-list-row time {
        color: #9099a2;
        font-size: 9px;
    }

.admin-table-wrap {
    overflow: auto;
    border: 1px solid #e1e6ea;
    border-radius: 13px;
    background: #fff;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 760px;
}

    .admin-table th, .admin-table td {
        padding: 12px 14px;
        border-bottom: 1px solid #eef1f3;
        text-align: left;
        font-size: 11px;
    }

    .admin-table th {
        color: #8b959e;
        background: #fafbfc;
        font-size: 9px;
        text-transform: uppercase;
        letter-spacing: .06em;
    }

    .admin-table td:first-child {
        display: grid;
        gap: 2px;
    }

    .admin-table td small {
        color: #98a0a8;
    }

.status-pill {
    display: inline-flex;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 9px;
}

    .status-pill.ok {
        background: rgba(34,166,122,.10);
        color: #168560;
    }

    .status-pill.off {
        background: rgba(228,93,97,.10);
        color: #c44d52;
    }

.table-action {
    border: 1px solid #dfe4e8;
    border-radius: 7px;
    background: #fff;
    padding: 5px 8px;
    color: #5f6973;
    font-size: 9px;
}

.role-grid, .settings-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 12px;
}

.role-card, .settings-card {
    padding: 18px;
    border: 1px solid #e1e6ea;
    border-radius: 13px;
    background: #fff;
}

    .role-card h3 {
        margin: 12px 0 5px;
        font-size: 13px;
    }

    .role-card p, .settings-card span {
        color: #7f8992;
        font-size: 10px;
        line-height: 1.55;
    }

.permission-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 12px;
}

    .permission-tags span {
        padding: 4px 7px;
        border-radius: 6px;
        background: #f1f4f6;
        color: #66717a;
        font-size: 8px;
    }

.settings-card {
    display: flex;
    align-items: flex-start;
    gap: 11px;
}

    .settings-card > svg {
        width: 18px;
        height: 18px;
        color: #7d8791;
    }

    .settings-card > div {
        display: grid;
        gap: 5px;
    }

    .settings-card strong {
        font-size: 11px;
    }

.tree-row-child {
    padding-left: 10px;
}

    .tree-row-child .tree-item {
        font-size: 12px;
        color: #87919b;
    }

.chat-window-body {
    min-height: 100vh;
    overflow: hidden;
    background: #eef2f6;
}

.chat-window-shell {
    height: 100vh;
    display: grid;
    grid-template-columns: 300px 1fr;
    background: #fff;
}

.chat-window-users {
    min-width: 0;
    padding: 14px;
    border-right: 1px solid #e1e6ea;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.chat-window-conversation {
    min-width: 0;
    min-height: 0;
    position: relative;
    display: flex;
}

    .chat-window-conversation .chat-conversation {
        flex: 1;
        min-height: 0;
        display: grid;
        grid-template-rows: auto 1fr auto;
    }

    .chat-window-conversation .chat-empty-state {
        margin: auto;
    }

@media (max-width: 900px) {
    .upcoming-events, .role-grid, .settings-grid {
        grid-template-columns: 1fr;
    }

    .chat-window-shell {
        grid-template-columns: 240px 1fr;
    }
}

@media (max-width: 640px) {
    .selected-target-bar {
        align-items: flex-start;
        flex-direction: column;
    }

    .chat-window-shell {
        grid-template-columns: 1fr;
    }

    .chat-window-users {
        height: 42vh;
        border-right: 0;
        border-bottom: 1px solid #e1e6ea;
    }
}
/* =========================================================
   SIDEBAR - TAKVİM / MESAJLAR SONRASI WORKSPACE AYRIMI
   ========================================================= */

.primary-nav + .sidebar-section,
.sidebar-section.workspace-section {
    margin-top: 28px;
}

/* Eğer Mesajlar doğrudan nav içinde son eleman ise */
.nav-item[href*="Messages"],
.nav-item[href*="Calendar"] {
    margin-bottom: 2px;
}

/* Çalışma Alanı başlığının üstüne biraz nefes */
.workspace-section-title {
    margin-top: 8px;
}

/* Muhasebe / Yazılım blokları fazla yukarı yapışmasın */
.workspace-item + .workspace-item {
    margin-top: 4px;
}

/* İlk workspace grubundan sonra diğer çalışma alanlarına boşluk */
.tree-group + .workspace-item {
    margin-top: 8px;
}

/* Yönetim bölümü workspace'lerden belirgin ayrı dursun */
.management-section {
    margin-top: 28px !important;
}
/* =========================================================
   CATEGORY EDITOR / DELETE POPOVER
   ========================================================= */

.category-editor,
.delete-popover {
    position: fixed;
    width: 270px;
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    padding: 15px;
    border: 1px solid #e0e5e9;
    border-radius: 14px;
    background: rgba(255, 255, 255, .99);
    box-shadow: 0 18px 45px rgba(30, 39, 49, .15), 0 4px 14px rgba(30, 39, 49, .06);
    z-index: 310;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-3px) scale(.985);
    transition: opacity .12s ease, transform .12s ease, visibility .12s ease;
}

    .category-editor.open,
    .delete-popover.open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(1);
    }

    .category-editor[aria-hidden="true"],
    .delete-popover[aria-hidden="true"] {
        pointer-events: none;
    }

.category-editor-header,
.delete-popover-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}

    .category-editor-header strong,
    .delete-popover-header strong {
        color: #2b3238;
        font-size: 12px;
        font-weight: 650;
    }

    .category-editor-close,
    .delete-popover-header > button {
        width: 26px;
        height: 26px;
        display: grid;
        place-items: center;
        padding: 0;
        border: 0;
        border-radius: 7px;
        background: transparent;
        color: #89939c;
    }

        .category-editor-close:hover,
        .delete-popover-header > button:hover {
            background: #f0f3f5;
            color: #30373d;
        }

        .category-editor-close svg,
        .delete-popover-header > button svg {
            width: 16px;
            height: 16px;
            stroke-width: 1.8;
        }

.category-editor-field {
    display: grid;
    gap: 7px;
    margin-bottom: 14px;
}

    .category-editor-field label {
        color: #626c75;
        font-size: 10px;
        font-weight: 600;
    }

    .category-editor-field > input[type="text"] {
        width: 100%;
        height: 39px;
        padding: 0 10px;
        border: 1px solid #dce2e7;
        border-radius: 9px;
        outline: 0;
        background: #fafbfc;
        color: #2c3339;
        font-size: 12px;
    }

        .category-editor-field > input[type="text"]:focus {
            border-color: #949fa9;
            background: #fff;
            box-shadow: 0 0 0 3px rgba(71, 82, 92, .07);
        }

.category-color-picker {
    display: grid;
    grid-template-columns: repeat(5, 28px);
    align-items: center;
    gap: 9px;
}

    .category-color-picker > button {
        position: relative;
        width: 28px;
        height: 28px;
        padding: 0;
        border: 3px solid transparent;
        border-radius: 9px;
        outline: 0;
        background: var(--picker-color, #dfe4e8);
        box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .05);
    }

        .category-color-picker > button.selected {
            border-color: #fff;
            box-shadow: 0 0 0 2px #30373d, inset 0 0 0 1px rgba(0, 0, 0, .05);
        }

.category-custom-color-button {
    display: grid;
    place-items: center;
    overflow: hidden;
    background: conic-gradient( #ef5350, #ec407a, #ab47bc, #5c6bc0, #42a5f5, #26c6da, #66bb6a, #ffee58, #ffa726, #ef5350 ) !important;
    color: #fff;
}

    .category-custom-color-button svg {
        width: 14px;
        height: 14px;
        pointer-events: none;
    }

    .category-custom-color-button input[type="color"] {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        padding: 0;
        border: 0;
        opacity: 0;
        cursor: pointer;
    }

.category-editor-actions,
.delete-popover-actions {
    display: flex;
    justify-content: flex-end;
    gap: 7px;
    padding-top: 3px;
}

.delete-popover p {
    margin: 0 0 15px;
    color: #6f7983;
    font-size: 11px;
    line-height: 1.55;
}

.delete-confirm-button {
    height: 34px;
    padding: 0 13px;
    border: 0;
    border-radius: 8px;
    background: #d95757;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
}

    .delete-confirm-button:hover {
        background: #c94a4a;
    }


/* =========================================================
   TREE RECURSIVE LEVELS
   ========================================================= */

.tree-children {
    display: grid;
    gap: 2px;
    padding-left: 10px;
}

    /* 2. seviye */
    .tree-children .tree-children {
        padding-left: 10px;
    }

        /* 3. seviye ve sonrası artık daha fazla sağa gitmesin */
        .tree-children .tree-children .tree-children {
            padding-left: 8px;
        }

            /* Çok derin yapılarda taşmayı engelle */
            .tree-children .tree-children .tree-children .tree-children,
            .tree-children .tree-children .tree-children .tree-children .tree-children {
                padding-left: 6px;
            }

/* Yazı sidebar dışına taşmasın */
.tree-row {
    min-width: 0;
}

.tree-item {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.tree-row.tree-node {
    position: relative;
}

.tree-row-child {
    padding-left: 0;
}

.tree-color-dot {
    width: 5px;
    height: 5px;
    flex: 0 0 5px;
    margin-left: 4px;
    border-radius: 50%;
    background: var(--category-color, #c96b7a);
}

    .tree-color-dot + .tree-item {
        padding-left: 4px;
    }


/* =========================================================
   WORKSPACE / TREE DELETE ACTIONS
   ========================================================= */

.danger-workspace-action,
.danger-tree-action {
    color: #a48e8e !important;
}

    .danger-workspace-action:hover,
    .danger-tree-action:hover {
        background: rgba(217, 84, 84, .10) !important;
        color: #c54f4f !important;
    }


/* 4 aksiyon varken satırın yazısı tamamen ezilmesin */
.workspace-actions {
    flex: 0 0 auto;
}

.tree-actions {
    flex: 0 0 auto;
}

/* Dar sidebar'da ikonlar yalnızca hover/focus sırasında görünmeye devam eder. */
@media (max-width: 1100px) {
    .category-editor,
    .delete-popover {
        width: 255px;
    }
}

@media (max-width: 820px) {
    .category-editor,
    .delete-popover {
        width: min(270px, calc(100vw - 24px));
    }
}

/* =========================================================
   TREE ACTIONS - 4 BUTON TAM GÖRÜNSÜN
   ========================================================= */

.tree-row {
    position: relative;
    padding-right: 2px;
}

.tree-item {
    min-width: 0;
}

.tree-actions {
    display: flex;
    align-items: center;
    gap: 1px;
    flex: 0 0 auto;
    padding-right: 2px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .14s ease, visibility .14s ease;
}

.tree-row:hover .tree-actions,
.tree-row:focus-within .tree-actions {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.tree-actions button {
    width: 20px;
    height: 22px;
    flex: 0 0 20px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #9099a2;
}

    .tree-actions button svg {
        width: 12px;
        height: 12px;
        stroke-width: 1.8;
    }

    .tree-actions button:hover {
        background: #e9edf0;
        color: #262c32;
    }

.tree-actions .danger-tree-action {
    color: #a88d8d;
}

    .tree-actions .danger-tree-action:hover {
        background: rgba(217, 84, 84, .10);
        color: #c54f4f;
    }

/* =========================================================
   USER MANAGEMENT / ADMIN MODAL
   ========================================================= */

.admin-primary-button {
    height: 36px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 13px;
    border: 0;
    border-radius: 10px;
    background: #272e34;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
}

.admin-primary-button:hover {
    background: #171c20;
}

.admin-primary-button svg {
    width: 15px;
    height: 15px;
    stroke-width: 1.9;
}

.table-actions-inline {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}

.table-actions-inline form {
    margin: 0;
}

.table-icon-action {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid #e0e5e9;
    border-radius: 8px;
    background: #fff;
    color: #717c86;
}

.table-icon-action:hover {
    background: #f3f6f8;
    color: #273039;
}

.table-icon-action svg {
    width: 14px;
    height: 14px;
    stroke-width: 1.8;
}

.protected-user-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #929ba4;
    font-size: 9px;
}

.protected-user-label svg {
    width: 12px;
    height: 12px;
}

.admin-modal {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(25, 31, 37, .24);
    backdrop-filter: blur(3px);
    z-index: 500;
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s ease, visibility .15s ease;
}

.admin-modal.open {
    opacity: 1;
    visibility: visible;
}

.admin-modal-card {
    width: min(560px, 100%);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding: 22px;
    border: 1px solid #dfe4e8;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 28px 70px rgba(26, 35, 45, .18);
    transform: translateY(7px) scale(.985);
    transition: transform .15s ease;
}

.admin-modal.open .admin-modal-card {
    transform: translateY(0) scale(1);
}

.admin-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 20px;
}

.admin-modal-header h2 {
    margin: 4px 0 0;
    font-size: 20px;
}

.admin-modal-close {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #89939c;
}

.admin-modal-close:hover {
    background: #f0f3f5;
    color: #30373d;
}

.admin-modal-close svg {
    width: 17px;
    height: 17px;
}

.admin-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px;
}

.admin-form-field {
    display: grid;
    gap: 7px;
}

.admin-form-span-2 {
    grid-column: 1 / -1;
}

.admin-form-field label {
    color: #59646e;
    font-size: 10px;
    font-weight: 600;
}

.admin-form-field input,
.admin-form-field select {
    width: 100%;
    height: 42px;
    padding: 0 11px;
    border: 1px solid #dfe4e8;
    border-radius: 10px;
    outline: 0;
    background: #fafbfc;
    color: #30383f;
    font-size: 12px;
}

.admin-form-field input:focus,
.admin-form-field select:focus {
    border-color: #949fa9;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(71, 82, 92, .07);
}

.admin-form-field small {
    color: #929ba4;
    font-size: 9px;
}

.admin-toggle-field {
    min-height: 54px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border: 1px solid #e1e6ea;
    border-radius: 10px;
    background: #fafbfc;
}

.admin-toggle-field input {
    width: 16px;
    height: 16px;
    accent-color: #272e34;
}

.admin-toggle-field > span {
    display: grid;
    gap: 2px;
}

.admin-toggle-field strong {
    font-size: 10px;
}

.admin-toggle-field small {
    color: #929ba4;
    font-size: 9px;
}

.admin-form-error,
.support-form-error {
    margin-top: 13px;
    padding: 9px 10px;
    border: 1px solid rgba(210, 78, 78, .17);
    border-radius: 9px;
    background: rgba(210, 78, 78, .07);
    color: #bd4747;
    font-size: 10px;
}

.admin-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 7px;
    margin-top: 20px;
}

/* =========================================================
   SUPPORT / BUG REPORT
   ========================================================= */

.support-floating-button {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 50%;
    background: #283038;
    color: #fff;
    box-shadow: 0 14px 30px rgba(29, 38, 47, .20);
    z-index: 245;
    transition: transform .14s ease, background .14s ease;
}

.support-floating-button:hover {
    transform: translateY(-2px);
    background: #171d22;
}

.support-floating-button svg {
    width: 20px;
    height: 20px;
    stroke-width: 1.8;
}

.support-modal {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(25, 31, 37, .22);
    backdrop-filter: blur(3px);
    z-index: 520;
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s ease, visibility .15s ease;
}

.support-modal.open {
    opacity: 1;
    visibility: visible;
}

.support-modal-card {
    width: min(500px, 100%);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding: 22px;
    border: 1px solid #dfe4e8;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 28px 70px rgba(26, 35, 45, .18);
    transform: translateY(8px) scale(.985);
    transition: transform .15s ease;
}

.support-modal.open .support-modal-card {
    transform: translateY(0) scale(1);
}

.support-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 20px;
}

.support-modal-header h2 {
    margin: 4px 0 0;
    font-size: 20px;
}

.support-modal-close {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #89939c;
}

.support-modal-close:hover {
    background: #f0f3f5;
    color: #30373d;
}

.support-modal-close svg {
    width: 17px;
    height: 17px;
}

.support-form-field {
    display: grid;
    gap: 7px;
    margin-bottom: 14px;
}

.support-form-field label {
    color: #59646e;
    font-size: 10px;
    font-weight: 600;
}

.support-form-field label span {
    margin-left: 4px;
    color: #a0a8b0;
    font-weight: 400;
}

.support-form-field input[type="text"],
.support-form-field textarea {
    width: 100%;
    padding: 0 11px;
    border: 1px solid #dfe4e8;
    border-radius: 10px;
    outline: 0;
    background: #fafbfc;
    color: #30383f;
    font-size: 12px;
}

.support-form-field input[type="text"] {
    height: 42px;
}

.support-form-field textarea {
    min-height: 125px;
    padding-top: 10px;
    resize: vertical;
    line-height: 1.55;
}

.support-form-field input[type="text"]:focus,
.support-form-field textarea:focus {
    border-color: #949fa9;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(71, 82, 92, .07);
}

.support-image-picker {
    min-height: 62px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    border: 1px dashed #ccd4da;
    border-radius: 11px;
    background: #fafbfc;
    color: #7c8791 !important;
    cursor: pointer;
}

.support-image-picker:hover {
    border-color: #9da8b1;
    background: #f5f7f9;
}

.support-image-picker svg {
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
}

.support-image-picker span {
    margin: 0 !important;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.support-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 7px;
    margin-top: 18px;
}

.support-nav-count {
    min-width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    padding: 0 5px;
    border-radius: 999px;
    background: #eb5a55;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
}

.support-page-intro {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
}

.support-filter-tabs {
    display: flex;
    gap: 3px;
    padding: 3px;
    border: 1px solid #dfe4e8;
    border-radius: 10px;
    background: #eef1f4;
}

.support-filter-tabs a {
    height: 30px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    border-radius: 7px;
    color: #7a858f;
    font-size: 10px;
    font-weight: 600;
}

.support-filter-tabs a.active {
    background: #fff;
    color: #252c32;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
}

.support-ticket-list {
    display: grid;
    gap: 10px;
}

.support-ticket-card {
    padding: 17px;
    border: 1px solid #e1e6ea;
    border-radius: 13px;
    background: #fff;
}

.support-ticket-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.support-ticket-number {
    color: #98a1aa;
    font-size: 9px;
}

.support-ticket-card h3 {
    margin: 4px 0 0;
    font-size: 14px;
}

.support-ticket-card > p {
    margin: 12px 0;
    color: #5f6973;
    font-size: 11px;
    line-height: 1.65;
    white-space: pre-wrap;
}

.support-status {
    flex: 0 0 auto;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 600;
}

.support-status.open {
    background: rgba(243, 154, 46, .12);
    color: #bd741d;
}

.support-status.resolved {
    background: rgba(34, 166, 122, .10);
    color: #168560;
}

.support-image-link {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 9px;
    border-radius: 8px;
    background: #f2f5f7;
    color: #64707a;
    font-size: 9px;
}

.support-image-link svg {
    width: 14px;
    height: 14px;
}

.support-ticket-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #edf0f2;
}

.support-ticket-footer > div {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.support-ticket-footer strong {
    font-size: 10px;
}

.support-ticket-footer span,
.support-ticket-footer time {
    color: #929ba4;
    font-size: 9px;
}

.support-resolve-button {
    height: 30px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 9px;
    border: 1px solid rgba(34, 166, 122, .18);
    border-radius: 8px;
    background: rgba(34, 166, 122, .07);
    color: #168560;
    font-size: 9px;
    font-weight: 600;
}

.support-resolve-button svg {
    width: 13px;
    height: 13px;
}

.support-empty-state {
    min-height: 300px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 8px;
    color: #8e98a1;
}

.support-empty-state svg {
    width: 34px;
    height: 34px;
}

.support-empty-state strong {
    color: #4b555e;
    font-size: 13px;
}

.support-empty-state span {
    font-size: 10px;
}

.runtime-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 700;
    padding: 10px 14px;
    border-radius: 10px;
    background: #283038;
    color: #fff;
    box-shadow: 0 12px 30px rgba(28, 37, 45, .18);
    font-size: 10px;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 8px);
    transition: opacity .15s ease, visibility .15s ease, transform .15s ease;
}

.runtime-toast.show {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

@media (max-width: 720px) {
    .admin-form-grid {
        grid-template-columns: 1fr;
    }

    .admin-form-span-2 {
        grid-column: auto;
    }

    .support-page-intro {
        align-items: flex-start;
        flex-direction: column;
    }

    .support-ticket-footer {
        grid-template-columns: 1fr;
    }

    .support-floating-button {
        right: 14px;
        bottom: 14px;
    }
}

/* =========================================================
   REALTIME MESSAGES - SELECTION FIRST
   ========================================================= */

.messages-page-shell {
    width: min(390px, 100%);
    grid-template-columns: minmax(280px, 390px);
    transition: width .16s ease;
}

.messages-page-shell.conversation-open {
    width: 100%;
    grid-template-columns: 300px minmax(0, 1fr);
}

.messages-page-conversation[hidden] {
    display: none !important;
}

.chat-window-shell {
    width: 300px;
    grid-template-columns: 300px;
    transition: width .16s ease;
}

.chat-window-shell.conversation-open {
    width: 100vw;
    grid-template-columns: 300px minmax(0, 1fr);
}

.chat-window-conversation[hidden] {
    display: none !important;
}

.chat-window-shell:not(.conversation-open) .chat-window-users {
    border-right: 0;
}

@media (max-width: 820px) {
    .messages-page-shell,
    .messages-page-shell.conversation-open {
        width: 100%;
        grid-template-columns: 1fr;
    }

    .messages-page-shell.conversation-open .messages-page-users {
        display: none;
    }

    .chat-window-shell,
    .chat-window-shell.conversation-open {
        width: 100vw;
        grid-template-columns: 1fr;
    }

    .chat-window-shell.conversation-open .chat-window-users {
        display: none;
    }
}

/* Final mobile overrides: keep all modules inside the device viewport. */
@media (max-width: 820px) {
    .app-shell {
        grid-template-columns: minmax(0, 1fr) !important;
        min-height: 100dvh;
    }

    .main-area,
    .content {
        width: 100%;
        min-width: 0;
        max-width: 100vw;
    }

    .content {
        padding: 18px 14px calc(76px + env(safe-area-inset-bottom)) !important;
        overflow-x: hidden;
    }

    .sidebar {
        position: fixed !important;
        inset: 0 auto 0 0;
        width: min(88vw, 320px) !important;
        height: 100dvh !important;
    }

    .note-grid,
    .settings-grid,
    .role-grid,
    .admin-form-grid,
    .calendar-form-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .admin-table-wrap,
    .calendar-shell {
        width: 100%;
        max-width: 100%;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .admin-table {
        min-width: 720px;
    }

    .admin-modal-card,
    .calendar-modal-card,
    .support-modal-card {
        width: calc(100vw - 24px) !important;
        max-height: calc(100dvh - 24px);
        overflow-y: auto;
    }
}

@media (max-width: 520px) {
    .content {
        padding-inline: 10px !important;
    }

    .detail-panel,
    .note-editor {
        width: 100vw !important;
        max-width: 100vw !important;
    }
}
.push-settings-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.push-settings-card small {
    display: block;
    margin-top: 10px;
    color: var(--muted, #7b8794);
    line-height: 1.45;
}

.push-settings-card [data-push-status] {
    line-height: 1.5;
}

/* Mesaj eki yalnızca gerçekten bir dosya seçildiğinde görünür. */
.chat-file-chip[hidden] {
    display: none !important;
}

.chat-floating-button {
    position: fixed;
    right: 20px;
    bottom: 82px;
    min-width: 110px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 15px;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 999px;
    background: #123d78;
    color: #fff;
    box-shadow: 0 14px 30px rgba(29, 38, 47, .20);
    z-index: 245;
    cursor: pointer;
    transition: transform .16s ease, background .16s ease, opacity .16s ease;
}

.chat-floating-button:hover {
    transform: translateY(-2px);
    background: #0d315f;
}

.chat-floating-button .floating-action-icon {
    display: grid;
    place-items: center;
}

.chat-floating-button svg {
    width: 18px;
    height: 18px;
}

.chat-floating-button .floating-action-label {
    font-size: 12px;
    font-weight: 750;
}

.chat-floating-button .floating-action-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    border: 2px solid var(--panel, #fff);
    border-radius: 999px;
    background: #ef5b5b;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
}

.chat-floating-button .floating-action-badge[hidden] {
    display: none !important;
}

body[data-theme="dark"] .chat-floating-button {
    background: #245c9f;
    border-color: #31445f;
}

.detail-panel.open ~ .chat-floating-button {
    right: 410px;
}

.chat-drawer.open ~ .chat-floating-button,
body.support-modal-open .chat-floating-button {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

@media (max-width: 760px) {
    .chat-floating-button {
        right: 14px;
        bottom: 76px;
        min-width: 48px;
        width: 48px;
        padding: 0;
    }

    .chat-floating-button .floating-action-label {
        display: none;
    }

    .detail-panel.open ~ .chat-floating-button {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
}

/* Tema ve kurulum kontrolleri profil alanının üstünde sabit ve düzenli durur. */
.sidebar-utility-actions {
    flex: 0 0 auto;
    display: grid;
    gap: 6px;
    padding: 9px 12px;
    border-top: 1px solid var(--line);
    background: var(--white);
}

.sidebar-utility-actions .theme-toggle-button,
.sidebar-utility-actions .pwa-install-button {
    position: static !important;
    inset: auto !important;
    z-index: auto !important;
    width: 100% !important;
    min-height: 38px !important;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 9px;
    padding: 0 11px !important;
    border: 1px solid var(--line) !important;
    border-radius: 10px !important;
    background: var(--panel) !important;
    color: var(--text) !important;
    box-shadow: none !important;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.sidebar-utility-actions .theme-toggle-button:hover,
.sidebar-utility-actions .pwa-install-button:hover {
    background: var(--soft) !important;
    border-color: #b7c7d9 !important;
}

.sidebar-utility-actions .theme-toggle-button svg,
.sidebar-utility-actions .pwa-install-button svg {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
}

.sidebar-utility-actions .pwa-install-button[hidden] {
    display: none !important;
}

body[data-theme="dark"] .sidebar-utility-actions {
    background: var(--white);
}

/* Çalışma alanı işlem ikonları yalnızca ilgili satır hover/focus olduğunda görünür. */
.sql-workspace-item > .workspace-actions,
.sql-category-node > .tree-actions {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateX(4px);
    transition: opacity .15s ease, visibility .15s ease, transform .15s ease !important;
}

.sql-workspace-item:hover > .workspace-actions,
.sql-workspace-item:focus-within > .workspace-actions,
.sql-category-node:hover > .tree-actions,
.sql-category-node:focus-within > .tree-actions {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(0);
}

.sidebar-collapsed .sidebar-utility-actions {
    padding-inline: 8px;
}

.sidebar-collapsed .sidebar-utility-actions button {
    justify-content: center;
    padding-inline: 0 !important;
}

.sidebar-collapsed .sidebar-utility-actions button span {
    display: none;
}