/* ============================================================
   QUAMI TEMA — TEK KAYNAK
   Renkler yalnızca burada tanımlanır. Sayfa veya bileşen içine
   renk yazılmaz; her yerde aşağıdaki değişkenler kullanılır.

   Değerler eski Quami'nin onaylanan makyajından gelir
   (q-nav.css + ortak-tema.css). Ekran taslakları:
   docs/tasarim/index.html, kararlar docs/tasarim/KARARLAR.md.
   ============================================================ */

/* ---------- Yazı tipi: Nunito, KENDİ SUNUCUMUZDAN ----------
   Google Fonts'a bağlanılmaz: dış bağlantı çevrimdışı çalışmaz,
   kurumsal ağda engellenebilir ve ziyaretçinin adresi üçüncü
   tarafa gider. Dosyalar wwwroot/fonts altındadır (6 dosya, 228 KB).

   latin-ext ŞART: Türkçe ğ ş İ ı Ç Ö Ü harfleri o alt kümededir.
   Yalnız latin indirilirse Türkçe metin başka bir yazı tipine
   düşer ve ekranda iki farklı yazı tipi karışır. */
@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/nunito-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/nunito-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/nunito-600-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/nunito-600-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/nunito-700-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/nunito-700-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* Ana renk: lacivert */
    --quami-primary: #1E3556;
    --quami-primary-dark: #16273f;
    --quami-primary-light: #2b4a75;
    --quami-on-primary: #ffffff;

    /* Sol menü: üst çubuktan hafif farklı (onaylanan makyaj) */
    --quami-side: #1C3560;
    --quami-side-hover: #27467A;
    --quami-side-text: #D7E0EC;
    --quami-side-sub: #BFCEE2;
    --quami-side-dim: #8FA6C6;

    /* Vurgu: turuncu */
    --quami-accent: #E8772E;
    --quami-accent-dark: #C9601D;
    --quami-on-accent: #ffffff;

    /* Yüzeyler ve metin */
    --quami-surface: #ffffff;
    --quami-surface-alt: #F3F5F8;
    --quami-surface-head: #F7F9FC;
    --quami-row-hover: #F6F8FB;
    --quami-row-selected: #FFF4EC;
    --quami-border: #DDE3EA;
    --quami-border-soft: #EEF1F5;
    --quami-text: #1F2933;
    --quami-text-muted: #5B6B7C;

    /* Durum renkleri: kayıt + onay modüllerinin tamamı kullanır */
    --quami-ok: #2E8B57;
    --quami-wait: #B7791F;
    --quami-draft: #6B7C93;
    --quami-danger: #C4453C;

    /* Dosya türü rozetleri (Word mavisi, Excel yeşili, PowerPoint turuncusu) */
    --quami-file-doc: #2B579A;
    --quami-file-xls: #217346;
    --quami-file-ppt: #D24726;
    --quami-file-pdf: #C4453C;
    --quami-file-img: #7B4EA3;
    --quami-file-other: #6B7C93;

    /* Araç bandı (eski açık gri-mavi şerit) ve sarı klasör simgesi */
    --quami-band: #E9EEF4;
    --quami-band-line: #D6DEE8;
    --quami-folder-fill: #F7D774;
    --quami-folder-stroke: #D9A62B;

    --quami-radius: 8px;
    --quami-radius-sm: 6px;
    --quami-sidebar-width: 200px;
    --quami-topbar-height: 52px;
    --quami-font: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI",
                  Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Dar ekran eşiği. Ölçü tek yerden değişsin diye burada durur;
       medya sorgusu değişken kabul etmediği için sayı sorgularda
       tekrarlanır — değiştirirken ikisi birlikte değişmeli. */
    --quami-dar-esik: 860px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--quami-font);
    font-size: 15px;
    color: var(--quami-text);
    background: var(--quami-surface-alt);
}

h1 { font-size: 1.45rem; margin: 0 0 1rem; }
h2 { font-size: 1.15rem; margin: 0 0 .75rem; }

a { color: var(--quami-primary); }
a:hover { color: var(--quami-accent); }

/* ---------- Uygulama kabuğu ----------
   Eski Quami düzeni: üst şerit koyu lacivert ve TÜM GENİŞLİKTE; altında
   solda kenar menüsü, sağda içerik. */
.quami-shell { display: flex; flex-direction: column; min-height: 100vh; }
.quami-body { display: flex; flex: 1; min-height: 0; }

.quami-sidebar {
    width: var(--quami-sidebar-width);
    flex: 0 0 var(--quami-sidebar-width);
    background: var(--quami-side);
    color: var(--quami-side-text);
    display: flex;
    flex-direction: column;
}

.quami-topbar {
    height: var(--quami-topbar-height);
    flex: 0 0 auto;
    background: var(--quami-primary);
    color: #fff;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 1.25rem 0 1rem;
}
.quami-topbar-spacer { flex: 1; }

.quami-brand {
    display: inline-flex;
    align-items: center;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: #fff;
    text-decoration: none;
}
.quami-brand:hover { color: #fff; }
.quami-brand span { color: var(--quami-accent); }

.quami-user-block { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.quami-user-name { display: inline-flex; align-items: center; gap: .7rem; font-weight: 600; font-size: .95rem; }
.quami-user-company { font-size: .78rem; color: var(--quami-side-text); }
.quami-topbar .quami-user { color: var(--quami-side-dim); font-size: .75rem; }
.quami-topbar .quami-linkbutton { color: var(--quami-side-dim); font-size: .75rem; padding: 0 .1rem; }
.quami-topbar .quami-linkbutton:hover { color: #fff; }
.quami-topbar .quami-linkbutton[disabled] { color: var(--quami-accent); }
.quami-signout {
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: var(--quami-radius-sm);
    color: #fff;
    padding: .32rem .85rem;
    font-size: .9rem;
    text-decoration: none;
}
.quami-signout:hover { background: rgba(255, 255, 255, .12); color: #fff; }

.quami-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.quami-content { padding: 1.5rem; flex: 1; }

.quami-user { color: var(--quami-text-muted); font-size: .9rem; }

/* ---------- Menü ---------- */
.quami-menu { padding: .5rem 0; overflow-y: auto; flex: 1; }

.quami-menu-group {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    background: none;
    border: 0;
    color: var(--quami-side-text);
    font: inherit;
    text-align: start;
    padding: .65rem 1rem;
    cursor: pointer;
}
.quami-menu-group:hover { background: var(--quami-side-hover); }
/* Açık başlık: yalnız beyaz yazı ve aşağı dönük ok. Zemin DEĞİŞMEZ. */
.quami-menu-group.is-open { color: #fff; }

.quami-caret { font-size: .7rem; opacity: .7; transition: transform .15s ease; }
.quami-menu-group.is-open .quami-caret { transform: rotate(90deg); color: var(--quami-accent); opacity: 1; }

.quami-menu-items { padding: .1rem 0 .3rem; }

.quami-menu-link {
    display: block;
    padding: .45rem 1rem .45rem 2.6rem;
    color: var(--quami-side-sub);
    text-decoration: none;
    font-size: .92rem;
}
.quami-menu-link:hover { background: var(--quami-side-hover); color: #fff; }

/* SEÇİLİ ÖĞE: zemin değişmez, yazı turuncu ve kalın. Sol renk şeridi YOK.
   Seçici bilerek iki sınıflı; tek sınıfla yazılırsa aşağıdaki hover kuralı
   aynı özgüllükte olduğu için rengi ezer ve vurgu kaybolur. */
.quami-menu-link.active,
.quami-menu-link.active:hover {
    color: var(--quami-accent);
    font-weight: 700;
}

/* Ana sayfa gibi doğrudan bağlantılar: başlık hizasında */
.quami-menu-link--top { padding-left: 1rem; font-size: 1rem; }

/* Hazır olmayan modüller: soluk, tıklanmaz */
.quami-menu-soon {
    display: block;
    padding: .45rem 1rem .45rem 2.6rem;
    font-size: .92rem;
    color: var(--quami-side-text);
    opacity: .45;
    cursor: not-allowed;
}
.quami-menu-soon em { font-style: normal; font-size: .78rem; opacity: .9; }

/* ---------- Ortak parçalar ---------- */
.quami-panel {
    background: var(--quami-surface);
    border: 1px solid var(--quami-border);
    border-radius: var(--quami-radius);
    padding: 1.25rem;
}

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

.quami-button {
    background: var(--quami-accent);
    color: var(--quami-on-accent);
    border: 0;
    border-radius: var(--quami-radius);
    padding: .5rem 1.1rem;
    font: inherit;
    cursor: pointer;
}
.quami-button:hover { background: var(--quami-accent-dark); }

.quami-linkbutton {
    background: none;
    border: 0;
    color: var(--quami-primary);
    font: inherit;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
}
.quami-linkbutton:hover { color: var(--quami-accent); }
.quami-linkbutton[disabled] { color: var(--quami-accent); font-weight: 600; text-decoration: none; cursor: default; }

.quami-alert {
    border: 1px solid var(--quami-danger);
    color: var(--quami-danger);
    background: #fdf2f2;
    border-radius: var(--quami-radius);
    padding: .6rem .8rem;
    margin-bottom: 1rem;
}

.quami-field { margin-bottom: .9rem; }
.quami-field label { display: block; margin-bottom: .25rem; font-size: .88rem; color: var(--quami-text-muted); }
.quami-field input[type="text"],
.quami-field input[type="password"] {
    width: 100%;
    padding: .5rem .6rem;
    border: 1px solid var(--quami-border);
    border-radius: var(--quami-radius);
    font: inherit;
}
.quami-field input:focus { outline: 2px solid var(--quami-accent); outline-offset: 1px; }
.quami-validation { color: var(--quami-danger); font-size: .82rem; }

/* ---------- Giriş / çıkış ekranı ---------- */
.quami-bare {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--quami-primary);
    padding: 1.5rem;
}
.quami-card {
    background: var(--quami-surface);
    border-radius: var(--quami-radius);
    padding: 2rem;
    width: 100%;
    max-width: 380px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .25);
}
.quami-card h1 { text-align: center; letter-spacing: .05em; }
.quami-card h1 span { color: var(--quami-accent); }

/* ---------- Blazor hata çubuğu ---------- */
#blazor-error-ui {
    background: var(--quami-danger);
    color: #fff;
    bottom: 0;
    display: none;
    left: 0;
    padding: .7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }
#blazor-error-ui a { color: #fff; }

/* ============================================================
   ORTAK BİLEŞENLER
   Bütün modüller bu sınıfları kullanır. Modül içine stil yazılmaz.
   Renkler yalnızca yukarıdaki değişkenlerden gelir.
   ============================================================ */

/* ---------- İkon ---------- */
.quami-icon { display: inline-block; vertical-align: -.15em; flex: 0 0 auto; stroke-width: 2; }

/* ---------- Butonlar ---------- */
.quami-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border-radius: var(--quami-radius);
    border: 1px solid transparent;
    padding: .45rem 1rem;
    font: inherit;
    line-height: 1.4;
    cursor: pointer;
    white-space: nowrap;
}
.quami-btn:disabled { opacity: .55; cursor: not-allowed; }

.quami-btn--primary { background: var(--quami-accent); color: var(--quami-on-accent); }
.quami-btn--primary:hover:not(:disabled) { background: var(--quami-accent-dark); }

.quami-btn--secondary { background: var(--quami-surface); color: var(--quami-primary); border-color: var(--quami-border); }
.quami-btn--secondary:hover:not(:disabled) { border-color: var(--quami-primary); background: var(--quami-surface-alt); }

.quami-btn--danger { background: var(--quami-danger); color: #fff; }
.quami-btn--danger:hover:not(:disabled) { filter: brightness(.9); }

.quami-btn-spinner,
.quami-spinner {
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: quami-spin .7s linear infinite;
}
@keyframes quami-spin { to { transform: rotate(360deg); } }

/* ---------- Yükleniyor ---------- */
.quami-spinner-wrap { display: flex; align-items: center; gap: .5rem; padding: 1.25rem; justify-content: center; }
.quami-spinner-wrap--inline { padding: .4rem; }
.quami-spinner-wrap .quami-spinner { color: var(--quami-accent); }

/* ---------- Sayfa başlığı ---------- */
.quami-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}
.quami-page-header h1 { display: flex; align-items: center; gap: .5rem; margin: 0; }
.quami-page-header-icon { color: var(--quami-accent); }
.quami-page-header-text p { margin: .3rem 0 0; }
.quami-page-header-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

/* ---------- Uyarı / bilgi kutusu ---------- */
.quami-alert-box {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    border: 1px solid var(--quami-border);
    border-left-width: 4px;
    border-radius: var(--quami-radius);
    padding: .75rem .9rem;
    margin-bottom: 1rem;
    background: var(--quami-surface);
}
.quami-alert-box strong { display: block; margin-bottom: .15rem; }
.quami-alert-icon { margin-top: .15rem; }
.quami-alert-box--info { border-left-color: var(--quami-primary); }
.quami-alert-box--info .quami-alert-icon { color: var(--quami-primary); }
.quami-alert-box--success { border-left-color: #1f7a45; }
.quami-alert-box--success .quami-alert-icon { color: #1f7a45; }
.quami-alert-box--warning { border-left-color: var(--quami-accent); }
.quami-alert-box--warning .quami-alert-icon { color: var(--quami-accent); }
.quami-alert-box--danger { border-left-color: var(--quami-danger); }
.quami-alert-box--danger .quami-alert-icon { color: var(--quami-danger); }

/* ---------- Form alanları ---------- */
.quami-input {
    width: 100%;
    padding: .45rem .6rem;
    border: 1px solid var(--quami-border);
    border-radius: var(--quami-radius);
    font: inherit;
    color: var(--quami-text);
    background: var(--quami-surface);
}
.quami-input:focus { outline: 2px solid var(--quami-accent); outline-offset: 1px; }
.quami-input:disabled { background: var(--quami-surface-alt); color: var(--quami-text-muted); }
.quami-textarea { resize: vertical; }
.quami-select { appearance: auto; }
.quami-required { color: var(--quami-danger); margin-inline-start: .15rem; }
.quami-hint { font-size: .8rem; color: var(--quami-text-muted); margin-top: .2rem; }
.quami-field--check label { margin-bottom: 0; }
.quami-check { display: inline-flex; align-items: center; gap: .45rem; cursor: pointer; color: var(--quami-text); }

/* ---------- Tablo ---------- */
.quami-table-wrap {
    overflow-x: auto;
    background: var(--quami-surface);
    border: 1px solid var(--quami-border);
    border-radius: var(--quami-radius);
}
.quami-table { width: 100%; border-collapse: collapse; }
.quami-table th,
.quami-table td { padding: .55rem .75rem; border-bottom: 1px solid var(--quami-border); text-align: start; }
.quami-table thead th {
    background: var(--quami-surface-alt);
    color: var(--quami-text-muted);
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    white-space: nowrap;
}
.quami-table tbody tr:last-child td { border-bottom: 0; }
.quami-table tbody tr:hover { background: var(--quami-surface-alt); }
.quami-th-sort {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    cursor: pointer;
}
.quami-th-sort:hover { color: var(--quami-accent); }
.quami-table-state { text-align: center; padding: 1.5rem; }
.quami-align-start { text-align: start; }
.quami-align-center { text-align: center; }
.quami-align-end { text-align: end; }
.quami-table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: .6rem .2rem 0;
    font-size: .88rem;
}
.quami-table-pager { display: inline-flex; align-items: center; gap: .6rem; }

/* ---------- Pencere (modal) ---------- */
.quami-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 35, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    z-index: 900;
}
.quami-modal {
    background: var(--quami-surface);
    border-radius: var(--quami-radius);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .3);
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    outline: none;
}
.quami-modal--small { max-width: 420px; }
.quami-modal--medium { max-width: 680px; }
.quami-modal--large { max-width: 960px; }
.quami-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .9rem 1.1rem;
    border-bottom: 1px solid var(--quami-border);
}
.quami-modal-header h2 { margin: 0; font-size: 1.05rem; }
.quami-modal-close {
    background: none;
    border: 0;
    color: var(--quami-text-muted);
    cursor: pointer;
    padding: .2rem;
    display: inline-flex;
}
.quami-modal-close:hover { color: var(--quami-danger); }
.quami-modal-body { padding: 1.1rem; overflow-y: auto; }
.quami-modal-body p:first-child { margin-top: 0; }
.quami-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    padding: .8rem 1.1rem;
    border-top: 1px solid var(--quami-border);
    background: var(--quami-surface-alt);
    border-radius: 0 0 var(--quami-radius) var(--quami-radius);
}

/* ---------- Menü ikonları ---------- */
.quami-menu-group > span:first-child,
.quami-menu-link { display: flex; align-items: center; gap: .55rem; }
.quami-menu-soon { display: flex; align-items: center; gap: .55rem; }
.quami-menu-icon { opacity: .85; }

/* ---------- Yerleşim yardımcıları ---------- */
/* Bunlar ortak; belirli bir sayfaya ait değildir. */
.quami-stack { display: flex; flex-direction: column; gap: 1.25rem; }
.quami-grid { display: grid; gap: 1.25rem; }
.quami-grid--halves { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.quami-grid--cards { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .9rem; }

/* ---------- Kart ---------- */
.quami-card-box {
    display: block;
    background: var(--quami-surface);
    border: 1px solid var(--quami-border);
    border-radius: var(--quami-radius);
    padding: .9rem 1rem;
    color: inherit;
    text-decoration: none;
}
.quami-card-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .35rem; }
.quami-card-icon { color: var(--quami-accent); }
.quami-card-title { font-weight: 600; }
.quami-card-box--link:hover {
    border-color: var(--quami-primary);
    box-shadow: 0 2px 10px rgba(30, 53, 86, .12);
    color: inherit;
}
.quami-card-box--link:hover .quami-card-title { color: var(--quami-primary); }

/* ---------- Yer tutucu alan ---------- */
.quami-placeholder {
    background: var(--quami-surface);
    border: 1px dashed var(--quami-border);
    border-radius: var(--quami-radius);
    padding: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}
.quami-placeholder-head { display: flex; align-items: center; gap: .5rem; }
.quami-placeholder-head h2 { margin: 0; font-size: 1rem; }
.quami-placeholder-head .quami-icon { color: var(--quami-text-muted); }
.quami-placeholder-body { margin-top: .5rem; }

/* ============================================================
   DAR EKRAN (İ1)
   ------------------------------------------------------------
   Menü dar ekranda üstte durmaz, kenardan açılır (off-canvas).
   Açma/kapama YALNIZCA CSS ile yapılır: gizli bir onay kutusu
   ve ona bağlı etiketler.

   Neden betik yok: mobil sayfalar statik render edilecek
   (rehber §6.3), yani Blazor devresi kurulmuyor. Menü betiğe
   bağlı olsaydı o sayfalarda hiç açılmazdı.
   ============================================================ */

/* Onay kutusu ekranda görünmez ama klavyeyle erişilebilir kalır. */
.quami-menu-switch {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden; clip-path: inset(50%);
    white-space: nowrap; border: 0;
}

/* Hamburger ve örtü geniş ekranda yoktur. */
.quami-menu-toggle,
.quami-menu-overlay { display: none; }

.quami-menu-toggle {
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    margin-inline-end: auto;
    border: 1px solid var(--quami-border);
    border-radius: var(--quami-radius-sm);
    background: var(--quami-surface);
    color: var(--quami-text);
    cursor: pointer;
}
.quami-menu-toggle:hover { background: var(--quami-row-hover); }

/* Klavye kullanıcısı için: onay kutusu odaklanınca hamburger belli olsun. */
.quami-menu-switch:focus-visible ~ .quami-shell .quami-menu-toggle {
    outline: 2px solid var(--quami-accent);
    outline-offset: 2px;
}

@media (max-width: 860px) {
    .quami-menu-toggle { display: inline-flex; }

    .quami-topbar {
        justify-content: flex-start;
        padding: 0 .75rem;
        gap: .6rem;
    }

    /* Kenar çubuğu akıştan çıkar, soldan kayarak gelir. */
    .quami-sidebar {
        position: fixed;
        inset-block: var(--quami-topbar-height) 0;
        inset-inline-start: 0;
        z-index: 40;
        transform: translateX(-100%);
        transition: transform .2s ease;
        box-shadow: 0 0 40px rgba(15, 30, 55, .35);
    }
    .quami-menu-switch:checked ~ .quami-shell .quami-sidebar { transform: translateX(0); }

    /* Menü açıkken arkadaki alana dokunmak menüyü kapatır. */
    .quami-menu-switch:checked ~ .quami-shell .quami-menu-overlay {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 30;
        background: rgba(30, 53, 86, .45);
    }

    .quami-content { padding: 1rem .9rem; }
    h1 { font-size: 1.25rem; }
}

/* Telefon: dokunma hedefleri büyür, tek sütuna iner. */
@media (max-width: 560px) {
    .quami-menu-group,
    .quami-menu-link,
    .quami-menu-soon { padding-block: .7rem; }

    .quami-content { padding: .85rem .75rem; }
    .quami-cards { grid-template-columns: 1fr; }
    .quami-user-company { display: none; }
}

/* ---------- Dar ekranda tablo: satırlar karta döner ----------
   Yatay kaydırma yerine her satır kendi kutusunda listelenir.
   Başlık metni hücrenin önüne data-etiket ile yazılır; tabloyu
   çizen ortak bileşen bunu kendisi koyar, sayfa uğraşmaz. */
@media (max-width: 720px) {
    .quami-table-responsive thead { display: none; }
    .quami-table-responsive tr {
        display: block;
        border: 1px solid var(--quami-border);
        border-radius: var(--quami-radius);
        background: var(--quami-surface);
        padding: .6rem .75rem;
        margin-bottom: .6rem;
    }
    .quami-table-responsive td {
        display: flex;
        gap: .75rem;
        border: 0;
        padding: .2rem 0;
    }
    .quami-table-responsive td::before {
        content: attr(data-etiket);
        flex: 0 0 40%;
        color: var(--quami-text-muted);
        font-size: .85rem;
    }
}

/* Yazdırma: menü ve araç çubukları kâğıda gitmez. */
@media print {
    .quami-sidebar, .quami-topbar, .quami-menu-toggle { display: none !important; }
    .quami-content { padding: 0; }
}

/* ============================================================
   YENİ ORTAK BİLEŞENLER (9. adım)
   Rozet, durum etiketi, sekme, ağaç, dosya yükleme.
   ============================================================ */

/* ---------- Rozet ---------- */
.quami-badge {
    display: inline-block;
    min-width: 20px;
    padding: 0 6px;
    border-radius: 10px;
    font-size: .72rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    color: #fff;
}
.quami-badge--accent { background: var(--quami-accent); }
.quami-badge--muted { background: var(--quami-draft); }
.quami-badge--danger { background: var(--quami-danger); }

/* ---------- Durum etiketi ---------- */
.quami-status {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    white-space: nowrap;
    font-size: .9rem;
}
.quami-status::before {
    content: "";
    width: 8px; height: 8px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
}
.quami-status--ok { color: var(--quami-ok); }
.quami-status--waiting { color: var(--quami-wait); }
.quami-status--draft { color: var(--quami-draft); }
.quami-status--danger { color: var(--quami-danger); }
.quami-status--neutral { color: var(--quami-text-muted); }
.quami-status--neutral::before { display: none; }

/* ---------- Sekmeler ---------- */
.quami-tabs-head {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid var(--quami-border);
    margin-bottom: 1rem;
    overflow-x: auto;
}
.quami-tab {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border: 0;
    background: none;
    padding: .65rem .9rem;
    font: inherit;
    font-size: .95rem;
    color: var(--quami-text-muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
    white-space: nowrap;
}
.quami-tab:hover { color: var(--quami-text); }
.quami-tab.is-active {
    color: var(--quami-primary);
    font-weight: 600;
    border-bottom-color: var(--quami-accent);
}

/* ---------- Ağaç ---------- */
.quami-tree { font-size: .92rem; }
.quami-tree-row {
    display: flex;
    align-items: center;
    gap: .35rem;
    border-radius: var(--quami-radius-sm);
    padding-block: .1rem;
    padding-inline-end: .5rem;
}
.quami-tree-row:hover { background: var(--quami-row-hover); }
.quami-tree-row.is-selected { background: var(--quami-row-selected); }
.quami-tree-row.is-selected .quami-tree-label { color: var(--quami-primary); font-weight: 600; }

/* Yalnız geçiş için duran düğüm: soluk ve tıklanamaz (yetkisiz üst klasör). */
.quami-tree-row.is-passthrough .quami-tree-label { color: #A4AFBC; cursor: default; }
.quami-tree-row.is-passthrough:hover { background: transparent; }
.quami-tree-row.is-dimmed .quami-tree-label { opacity: .6; }

.quami-tree-toggle {
    display: inline-grid;
    place-items: center;
    width: 20px; height: 24px;
    border: 0; background: none; padding: 0;
    color: var(--quami-text-muted);
    cursor: pointer;
    flex: 0 0 auto;
}
.quami-tree-toggle--empty { cursor: default; }
.quami-tree-label {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    border: 0; background: none;
    font: inherit;
    color: var(--quami-text);
    padding: .3rem 0;
    text-align: start;
    cursor: pointer;
    flex: 1;
    min-width: 0;
}
.quami-tree-label > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quami-tree-label .quami-icon { color: var(--quami-text-muted); flex: 0 0 auto; }
.quami-tree-count { font-size: .78rem; color: var(--quami-text-muted); flex: 0 0 auto; }
.quami-tree-empty { margin: .5rem 0; }

/* ---------- Dosya yükleme ---------- */
.quami-upload-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    border: 1.5px dashed var(--quami-border);
    border-radius: var(--quami-radius);
    background: #FBFCFD;
    padding: 1.4rem 1rem;
    text-align: center;
    color: var(--quami-text-muted);
    cursor: pointer;
}
.quami-upload-drop:hover,
.quami-upload.is-dragging .quami-upload-drop {
    border-color: var(--quami-accent);
    background: var(--quami-row-selected);
}
.quami-upload-drop input[type=file] { display: none; }
.quami-upload-drop .quami-icon { color: var(--quami-accent); }
.quami-upload-main { color: var(--quami-text); font-weight: 600; }
.quami-upload-hint { font-size: .82rem; color: var(--quami-text-muted); }

.quami-upload-selected {
    display: flex;
    align-items: center;
    gap: .75rem;
    border: 1px solid var(--quami-border);
    border-radius: var(--quami-radius);
    background: var(--quami-surface);
    padding: .7rem .9rem;
}
.quami-upload-info { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.quami-upload-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quami-upload-error { color: var(--quami-danger); font-size: .88rem; margin: .5rem 0 0; }

/* ---------- Dokümanlar ekranı: eski Quami düzeni ----------
   Sol klasör ağacı YOK: klasörler ızgarada satırdır, "Geri" üst klasöre
   çıkar (eski ManagementPage). Araç çubuğu ikon üstte / etiket altta;
   ölçüler eski makyajdan (ortak-tema.css: kutu 52–100 px, etiket 12 px). */
.quami-toolbar {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 2px;
    padding: .4rem .75rem;
    margin-bottom: .6rem;
    background: var(--quami-band);
    border: 1px solid var(--quami-band-line);
    border-radius: var(--quami-radius);
}
.quami-toolbar-title {
    align-self: center;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--quami-text);
    margin-inline-end: 1.25rem;
    white-space: nowrap;
}
.quami-tool {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 3px;
    flex: 0 0 auto;
    min-width: 52px;
    max-width: 100px;
    padding: 6px 5px 5px;
    border: 1px solid transparent;
    border-radius: var(--quami-radius-sm);
    background: transparent;
    color: var(--quami-primary);
    font: inherit;
    cursor: pointer;
    text-decoration: none;
    transition: background .12s, border-color .12s;
}
.quami-tool .quami-icon { stroke-width: 2.5; }
.quami-tool:hover:not(:disabled) {
    background: var(--quami-surface);
    border-color: var(--quami-border);
}
.quami-tool:disabled { opacity: .35; cursor: default; }
.quami-tool--danger { color: var(--quami-danger); }
.quami-tool.is-active { background: var(--quami-surface); border-color: var(--quami-primary); }
.quami-folder-icon { stroke-width: 1.5; vertical-align: middle; }
/* Eski ızgara gibi çok sütunlu geniş tablo: sığmazsa yatay kayar, ad sütunu ezilmez. */
.quami-grid-wide { overflow-x: auto; }
.quami-grid-wide .quami-table { min-width: 1280px; }
.quami-grid-wide .quami-doc-name { white-space: nowrap; }
.quami-tool-label {
    display: block;
    width: 100%;
    font-size: 12px;
    line-height: 1.15;
    text-align: center;
    color: var(--quami-text);
    /* Kelime ortasından bölünmesin; iki satır yüksekliği sabit. */
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
    height: 2.3em;
    overflow: hidden;
}
.quami-tool:hover:not(:disabled) .quami-tool-label { color: var(--quami-primary); }
.quami-toolbar-spacer { flex: 1; }
.quami-toolbar-sep { width: 1px; align-self: stretch; margin: 6px 4px; background: var(--quami-border); }

/* Süzgeç satırı: arama + Temizle solda, Yürürlükte/Arşiv sağda */
.quami-filterbar {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: .6rem;
}
.quami-filterbar .quami-spacer { flex: 1; }
.quami-radio-inline { display: inline-flex; gap: 1rem; font-size: .92rem; }
.quami-radio-inline label { display: inline-flex; align-items: center; gap: .3rem; cursor: pointer; }
.quami-crumbs-bar { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; font-size: .92rem; margin-bottom: .5rem; color: var(--quami-text-muted); }
.quami-crumbs-bar button { border: 0; background: none; padding: 0; color: var(--quami-primary); cursor: pointer; font: inherit; }
.quami-crumbs-bar button:hover { color: var(--quami-accent); }
.quami-crumbs-bar b { color: var(--quami-text); }

.quami-search {
    display: flex;
    align-items: center;
    gap: .4rem;
    background: var(--quami-surface);
    border: 1px solid var(--quami-border);
    border-radius: var(--quami-radius);
    padding: 0 .6rem;
    height: 36px;
    min-width: 240px;
    color: var(--quami-text-muted);
}
.quami-search input { border: 0; outline: 0; flex: 1; background: transparent; font: inherit; color: var(--quami-text); }
.quami-select {
    border: 1px solid var(--quami-border);
    border-radius: var(--quami-radius);
    background: var(--quami-surface);
    padding: 0 .6rem;
    height: 36px;
    font: inherit;
}
.quami-check-inline { display: inline-flex; align-items: center; gap: .4rem; font-size: .9rem; }
.quami-doc-name { font-weight: 500; display: block; }
.quami-doc-name small { display: block; font-weight: 400; }
.quami-mono { font-variant-numeric: tabular-nums; }

/* Izgara satırları: seçili satır, klasör satırı, dosya türü rozeti */
.quami-table tbody tr.is-selected td { background: var(--quami-row-selected); }
.quami-table tbody tr.is-folder .quami-doc-name { font-weight: 600; }
.quami-row-check { width: 16px; height: 16px; margin: 0; cursor: pointer; accent-color: var(--quami-primary); }
.quami-type-badge {
    display: inline-flex;
    width: 22px;
    height: 26px;
    border-radius: 4px;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: var(--quami-file-other);
    text-decoration: none;
}
.quami-type-badge:hover { color: #fff; filter: brightness(1.1); }
.quami-type-badge--dir { background: var(--quami-accent); }
.quami-type-badge--doc { background: var(--quami-file-doc); }
.quami-type-badge--xls { background: var(--quami-file-xls); }
.quami-type-badge--ppt { background: var(--quami-file-ppt); }
.quami-type-badge--pdf { background: var(--quami-file-pdf); }
.quami-type-badge--img { background: var(--quami-file-img); }
.quami-inline-link { border: 0; background: none; padding: 0; color: var(--quami-primary); cursor: pointer; font: inherit; text-align: start; }
.quami-inline-link:hover { color: var(--quami-accent); }

@media (max-width: 860px) {
    .quami-search { min-width: 0; flex: 1 1 100%; }
    .quami-tool { min-width: 46px; }
}
}


/* ---------- Sütun seçici, yardım simgesi, kişi seçici (11. adım) ---------- */
.quami-table-tools { display: flex; justify-content: flex-end; margin-bottom: .5rem; }
.quami-columns { position: relative; }
.quami-columns-menu {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 20;
    background: var(--quami-surface); border: 1px solid var(--quami-border);
    border-radius: var(--quami-radius); box-shadow: 0 10px 30px rgba(30,53,86,.14);
    padding: .5rem .75rem; min-width: 220px; display: grid; gap: .3rem;
}
.quami-columns-menu .quami-check { display: flex; align-items: center; gap: .5rem; font-size: .9rem; }
.quami-link { border: 0; background: none; color: var(--quami-primary-light); cursor: pointer; padding: .3rem 0; text-align: start; font: inherit; font-size: .85rem; }

.quami-help { position: relative; display: inline-flex; margin-inline-start: .3rem; vertical-align: middle; }
.quami-help-btn { border: 0; background: none; padding: 0; color: var(--quami-text-muted); cursor: help; display: inline-flex; }
.quami-help-btn:hover { color: var(--quami-primary); }
.quami-help-pop {
    position: absolute; left: 0; top: calc(100% + 6px); z-index: 30; width: 260px;
    background: var(--quami-primary); color: #fff; font-size: .82rem; line-height: 1.4;
    padding: .5rem .7rem; border-radius: var(--quami-radius-sm); box-shadow: 0 8px 24px rgba(15,30,55,.3);
}

.quami-picker-tools { display: flex; gap: .5rem; margin-bottom: .5rem; flex-wrap: wrap; }
.quami-picker-tools .quami-search { flex: 1; min-width: 180px; }
.quami-picker-list { border: 1px solid var(--quami-border); border-radius: var(--quami-radius); max-height: 240px; overflow: auto; }
.quami-picker-row { display: flex; align-items: center; gap: .6rem; padding: .5rem .75rem; border-bottom: 1px solid var(--quami-border-soft); cursor: pointer; }
.quami-picker-row:last-child { border-bottom: 0; }
.quami-picker-row:hover { background: var(--quami-row-hover); }
.quami-picker-row.is-disabled { opacity: .55; cursor: default; }
.quami-picker-name { flex: 1; font-size: .92rem; }
.quami-picker-dep { font-size: .8rem; color: var(--quami-text-muted); }
.quami-picker-empty { margin: .6rem .75rem; }
.quami-picker-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.quami-picker-bulk { display: inline-flex; gap: .8rem; }

.quami-status-btn { border: 0; background: none; padding: 0; cursor: pointer; font: inherit; text-align: start; }
.quami-status-btn:hover .quami-status { text-decoration: underline; }
.quami-doc-actions { display: flex; gap: .25rem; justify-content: flex-end; }
.quami-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem 1rem; }
.quami-form-grid .quami-field--wide { grid-column: 1 / -1; }
.quami-plain-toggle { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem .8rem; border: 1px dashed var(--quami-border); border-radius: var(--quami-radius); margin-bottom: .75rem; }
@media (max-width: 640px) { .quami-form-grid { grid-template-columns: 1fr; } }

.quami-kunye { display: grid; grid-template-columns: 160px 1fr; gap: .5rem 1rem; font-size: .92rem; margin: 0; }
.quami-kunye dt { color: var(--quami-text-muted); }
.quami-kunye dd { margin: 0; }
.quami-crumbs { color: var(--quami-text-muted); font-size: .85rem; margin-bottom: .4rem; }
.quami-crumbs a { text-decoration: none; }
.quami-label { display: block; font-size: .85rem; color: var(--quami-text-muted); margin: .5rem 0 .25rem; }
.quami-required { color: var(--quami-danger); }
@media (max-width: 640px) { .quami-kunye { grid-template-columns: 1fr; } }

/* Sayfa değişince odak h1'e alınır (erişilebilirlik: ekran okuyucu
   yeni sayfayı duyursun). Görsel çerçeve gerekmez; klavye kullanıcısı
   zaten başlığa tıklamaz. */
.quami-page-header h1:focus,
.quami-page-header h1:focus-visible,
.quami-toolbar-title:focus,
.quami-toolbar-title:focus-visible { outline: none; }

/* ---- Mobil yerleşim (MODUL_01 §17): gelen kutusu, onay, okuma — statik sayfalar ---- */
.quami-mobile { min-height: 100vh; background: var(--quami-bg, #F3F5F8); color: #222; font-size: 15px; }
.quami-mobile-top { background: #1E3556; color: #fff; padding: .6rem 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.quami-mobile-brand { color: #fff; text-decoration: none; font-size: 1.3rem; letter-spacing: .05em; }
.quami-mobile-brand span { color: var(--quami-accent, #E8772E); }
.quami-mobile-nav { display: flex; gap: .2rem; margin-left: auto; }
.quami-mobile-nav a { color: #fff; text-decoration: none; padding: .6rem .7rem; min-height: 44px; display: inline-flex; align-items: center; border-radius: 6px; }
.quami-mobile-nav a:hover { background: rgba(255,255,255,.12); }
.quami-mobile-user { width: 100%; font-size: .8rem; opacity: .85; }
.quami-mobile-body { padding: 1rem; max-width: 760px; margin: 0 auto; }
.quami-mobile-h1 { font-size: 1.25rem; margin: 0 0 .6rem; }
.quami-mobile-h2 { font-size: 1rem; margin: 1.2rem 0 .5rem; color: #1E3556; }
.quami-mobile-counts { display: flex; gap: 1.2rem; margin-bottom: .6rem; }
.quami-mobile-card { display: block; background: #fff; border: 1px solid #dde3ea; border-radius: 8px; padding: .8rem .9rem; margin-bottom: .6rem; color: inherit; text-decoration: none; }
.quami-mobile-card--link { min-height: 44px; }
.quami-mobile-card--link:hover { border-color: var(--quami-accent, #E8772E); }
.quami-mobile-card-title { font-weight: 600; }
.quami-mobile-card-meta { font-size: .85rem; color: #555; margin-top: .2rem; }
.quami-mobile-card-note { font-size: .9rem; margin-top: .3rem; }
.quami-mobile-links { margin-top: .5rem; }
.quami-mobile-links a { padding: .3rem 0; display: inline-block; }
.quami-mobile-overdue { color: #b00020; font-weight: 600; }
.quami-mobile-empty { color: #666; padding: .6rem 0; }
.quami-mobile-info { background: #e8f5e9; border: 1px solid #9ccc9c; border-radius: 6px; padding: .6rem .8rem; margin-bottom: .8rem; }
.quami-mobile-error { background: #fdecea; border: 1px solid #f5b5ae; border-radius: 6px; padding: .6rem .8rem; margin-bottom: .8rem; }
.quami-mobile-viewer { width: 100%; height: 70vh; border: 1px solid #dde3ea; border-radius: 8px; background: #fff; margin: .6rem 0; }
.quami-mobile-form { background: #fff; border: 1px solid #dde3ea; border-radius: 8px; padding: .8rem .9rem; margin: .6rem 0; }
.quami-mobile-form--danger { border-color: #f5b5ae; }
.quami-mobile-form label { display: block; font-size: .85rem; color: #555; margin-bottom: .3rem; }
.quami-mobile-form textarea { width: 100%; box-sizing: border-box; padding: .5rem; border: 1px solid #c9d1da; border-radius: 6px; font: inherit; }
.quami-mobile-hint { font-size: .85rem; color: #555; }
.quami-button--wide { width: 100%; min-height: 44px; margin-top: .6rem; }
.quami-button--danger { background: #b00020; }
.quami-button--danger:hover { background: #8e0019; }
.quami-button[disabled] { opacity: .5; cursor: not-allowed; }

/* Tarayıcıda düzenleme (EditorLayout / EditorPage) */
.quami-editor-page { height: 100vh; display: flex; flex-direction: column; background: #f4f5f7; }
.quami-editor-bar { flex: 0 0 auto; display: flex; gap: 14px; align-items: center; padding: 6px 12px; background: #354360; color: #fff; font-size: 13px; }
.quami-editor-bar a { color: #ffd9b8; text-decoration: none; }
.quami-editor-mode { margin-left: auto; opacity: .85; }
.quami-editor-host { flex: 1 1 auto; min-height: 0; width: 100%; border: 0; }
.quami-editor-error { padding: 24px; color: #a32d2d; }
/* deneme: ?mobile=1 telefon genişliğinde çerçeve (Collabora dar görünümde kendi mobil arayüzüne geçer) */
.quami-editor-host--mobile { width: 430px; margin: 0 auto; border: 1px solid #999; }
.quami-editor-confirm { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.quami-editor-confirm__box { background: #fff; padding: 20px 24px; border-radius: 6px; max-width: 420px; font-size: 14px; }
.quami-editor-confirm__box p { margin: 0 0 14px; }
.quami-editor-confirm__box .quami-button { margin-right: 8px; }