/*
 * HRV Design System — hrv-theme.css
 * Tek yer: fontlar, spacing token'ları, renk override'ları.
 * Herhangi bir DevExtreme temasının üstüne yüklenir (site.css sonrası).
 */

/* ── Token'lar ──────────────────────────────────────────── */
:root {
    --hrv-font: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

    /* 4pt spacing scale */
    --hrv-sp-1: 4px;
    --hrv-sp-2: 8px;
    --hrv-sp-3: 12px;
    --hrv-sp-4: 16px;
    --hrv-sp-6: 24px;

    /* Köşe yuvarlaklıkları */
    --hrv-r-sm:   4px;
    --hrv-r-md:   8px;
    --hrv-r-card: 12px;

    /* Gölgeler */
    --hrv-shadow-sm: 0 1px 3px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.14);
    --hrv-shadow-md: 0 4px 16px rgba(0,0,0,.12);
    --hrv-shadow-lg: 0 4px 20px rgba(0,0,0,.26);

    /* Yazı boyutları */
    --hrv-fs-xs:   11px;
    --hrv-fs-sm:   12px;
    --hrv-fs-base: 13px;
    --hrv-fs-md:   14px;
    --hrv-fs-lg:   16px;
    --hrv-fs-xl:   20px;

    /* Tema aksan rengi — tema family × koyu/açık kombinasyonlarıyla override edilir */
    --hrv-accent:     #003e71;
    --hrv-accent-rgb: 0, 62, 113;
}

/* ── Aksan rengi: family × dark kombinasyonları ──────────── */
body[data-hrv-family="generic"][data-hrv-dark="false"]        { --hrv-accent: #003e71; --hrv-accent-rgb: 0,62,113; }
body[data-hrv-family="generic"][data-hrv-dark="true"]         { --hrv-accent: #5aaee0; --hrv-accent-rgb: 90,174,224; }
body[data-hrv-family="fluent.blue"][data-hrv-dark="false"]    { --hrv-accent: #0066cc; --hrv-accent-rgb: 0,102,204; }
body[data-hrv-family="fluent.blue"][data-hrv-dark="true"]     { --hrv-accent: #60a5fa; --hrv-accent-rgb: 96,165,250; }
body[data-hrv-family="material.blue"][data-hrv-dark="false"]  { --hrv-accent: #1565c0; --hrv-accent-rgb: 21,101,192; }
body[data-hrv-family="material.blue"][data-hrv-dark="true"]   { --hrv-accent: #64b5f6; --hrv-accent-rgb: 100,181,246; }

/* ── Yazı tipi ───────────────────────────────────────────── */
body,
.dx-widget,
.dx-popup-content,
.dx-form-group-caption,
.dx-fieldset-header {
    font-family: var(--hrv-font) !important;
}

/* ── Header filter ikonu: sadece hover veya aktif filtrede görünür ── */
.dx-datagrid .dx-header-filter {
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease;
}

/* Sütun başlığı üzerine gelinince */
.dx-datagrid .dx-header-row > td:hover .dx-header-filter {
    opacity: 1;
    pointer-events: auto;
}

/* Filtre aktifse her zaman görünür */
.dx-datagrid .dx-header-filter-active {
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* ── Grid satırları ──────────────────────────────────────── */
.dx-datagrid-rowsview .dx-row {
    font-family: var(--hrv-font);
    font-size: var(--hrv-fs-sm);
    line-height: 1.4;
}

.dx-datagrid .dx-header-row > td {
    font-family: var(--hrv-font);
    font-size: var(--hrv-fs-sm);
    font-weight: 600;
}

/* Compact: daha sıkışık satırlar */
body[data-hrv-compact="true"] .dx-datagrid-rowsview .dx-row {
    font-size: var(--hrv-fs-xs);
    line-height: 1.25;
}

body[data-hrv-compact="true"] .dx-datagrid .dx-header-row > td {
    font-size: var(--hrv-fs-xs);
}

/* ── Kompakt mod: header yüksekliği ─────────────────────────── */
/*
   DevExtreme compact toolbar ~40px yüksekliğe çekilir.
   --header-h değişkenini güncelleyip sabit/inline boyutlu
   öğeleri (logo, avatar) kısaltarak taşmayı önleriz.
*/
body[data-hrv-compact="true"] {
    --header-h: 40px;
}

/* Toolbar items container'ı sıkıştır, taşmayı kes */
body[data-hrv-compact="true"] .layout-header .dx-toolbar {
    height: 40px !important;
}

body[data-hrv-compact="true"] .layout-header .dx-toolbar-items-container {
    height: 40px !important;
    overflow: hidden !important;
}

/* Logo: inline max-height: 40px'i 26px'e indirgeliyoruz */
body[data-hrv-compact="true"] .header-title img {
    max-height: 26px !important;
    height: 26px !important;
}

body[data-hrv-compact="true"] .header-title > div {
    padding: 3px !important;
}

/* Hamburger menü butonu */
body[data-hrv-compact="true"] .dx-toolbar .dx-toolbar-item.menu-button {
    width: 36px !important;
}

/* Kullanıcı avatar düğmesi */
body[data-hrv-compact="true"] .user-avatar-button .dx-button-content {
    width: 20px !important;
    height: 20px !important;
    font-size: 8px !important;
}

/* Company lookup: taşmayı önle */
body[data-hrv-compact="true"] #companyInfoLookup {
    height: 28px !important;
    line-height: 28px !important;
}

body[data-hrv-compact="true"] #companyInfoLookup .dx-texteditor-input {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    min-height: unset !important;
}

/* ── Aksan rengi override'ları (hardcoded değerlerin yerini alır) */
.dx-toolbar .dx-toolbar-item.menu-button > .dx-toolbar-item-content .dx-icon {
    color: var(--hrv-accent) !important;
}

.dx-icon-bell.big-icon {
    color: var(--hrv-accent) !important;
}

.user-avatar-button .dx-button-content {
    background-color: var(--hrv-accent) !important;
}

/* Menü seçili item */
.menu-container .dx-treeview .dx-treeview-node-container .dx-treeview-node.dx-state-selected > .dx-treeview-item * {
    color: var(--hrv-accent) !important;
}

/* ── ContentHost kart ────────────────────────────────────── */
#contentHost {
    border-radius: var(--hrv-r-card) !important;
    box-shadow: var(--hrv-shadow-md) !important;
    transition: box-shadow .25s ease !important;
}

#contentHost:hover {
    box-shadow: var(--hrv-shadow-lg) !important;
}

#contentHost h2 {
    font-size: var(--hrv-fs-xl) !important;
    font-weight: 600 !important;
    font-family: var(--hrv-font) !important;
}

/* ── Toolbar gölgesi ─────────────────────────────────────── */
.dx-toolbar-items-container {
    box-shadow: var(--hrv-shadow-sm) !important;
}

/* ── Sayısal alan genişlik kısıtı (form'larda) ───────────── */
.dx-numberbox { max-width: 20ch; }

/* ══════════════════════════════════════════════════════════
   Tema Seçici Popup  (#hrvThemePickerPopup)
   ══════════════════════════════════════════════════════════ */
#hrvThemePicker {
    padding: 2px 0 6px;
    font-family: var(--hrv-font);
}

.hrv-tp-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    opacity: .5;
    margin-bottom: 8px;
    font-family: var(--hrv-font);
}

/* Renk ailesi butonları */
.hrv-tp-families {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
}

.hrv-tp-family-btn {
    flex: 1;
    padding: 6px 4px;
    border-radius: var(--hrv-r-sm);
    border: 2px solid var(--dx-border-color, #ccc);
    background: transparent;
    cursor: pointer;
    font-size: 11px;
    font-family: var(--hrv-font);
    font-weight: 500;
    color: inherit;
    transition: border-color .12s, color .12s, background .12s;
}

.hrv-tp-family-btn:hover {
    border-color: var(--hrv-accent);
    color: var(--hrv-accent);
}

.hrv-tp-family-btn.hrv-active {
    border-color: var(--hrv-accent);
    color: var(--hrv-accent);
    font-weight: 700;
    background: rgba(var(--hrv-accent-rgb), .07);
}

/* Görünüm kartları ızgarası */
.hrv-tp-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.hrv-tp-card {
    border: 2px solid var(--dx-border-color, #ccc);
    border-radius: var(--hrv-r-md);
    padding: 8px 6px 7px;
    cursor: pointer;
    text-align: center;
    font-size: 11px;
    font-family: var(--hrv-font);
    font-weight: 500;
    transition: border-color .12s, box-shadow .12s, transform .12s;
}

.hrv-tp-card:hover {
    border-color: var(--hrv-accent);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(var(--hrv-accent-rgb), .18);
}

.hrv-tp-card.hrv-active {
    border-color: var(--hrv-accent);
    background: rgba(var(--hrv-accent-rgb), .07);
}

.hrv-tp-swatch {
    height: 36px;
    border-radius: 4px;
    margin-bottom: 6px;
    border: 1px solid rgba(0,0,0,.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
}

.hrv-tp-swatch-light { background: #eef2f8; }
.hrv-tp-swatch-dark  { background: #1a1f2e; }

/* Grid görünüm — ayırıcı */
.hrv-tp-divider {
    border: none;
    border-top: 1px solid var(--dx-border-color, #ddd);
    margin: 14px 0 10px;
}

/* Toggle listesi */
.hrv-tp-toggles {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hrv-tp-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    font-size: 12px;
    font-family: var(--hrv-font);
    user-select: none;
}

.hrv-tp-toggle-label {
    flex: 1;
    padding-right: 8px;
}

/* Switch kutusu */
.hrv-tp-toggle-switch {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
    flex-shrink: 0;
}

.hrv-tp-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

/* Zemin çubuğu */
.hrv-tp-toggle-knob {
    position: absolute;
    inset: 0;
    background: var(--dx-border-color, #ccc);
    border-radius: 20px;
    transition: background .2s;
    cursor: pointer;
}

/* Kaydırıcı top */
.hrv-tp-toggle-knob::before {
    content: '';
    position: absolute;
    height: 14px;
    width: 14px;
    left: 3px;
    top: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform .2s;
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
}

.hrv-tp-toggle-switch input:checked + .hrv-tp-toggle-knob {
    background: var(--hrv-accent);
}

.hrv-tp-toggle-switch input:checked + .hrv-tp-toggle-knob::before {
    transform: translateX(16px);
}