/* ==========================================================================
   HR&Tomorrow — ortak arayüz katmanı (hrt-ui)
   Her şablonda </head>'den hemen önce, yani sayfanın kendi <style> bloğundan
   sonra yüklenir. Amaç: her sayfada aynı başlık, aynı boşluk ritmi, aynı
   tipografi ve aynı temel bileşenler. Yeni sayfalar header.default +
   .un-title-page.go-back kalıbını, kartlar .hrt-card'ı kullanmalı.
   Renk tokenları dark_mode.css'teki --hrt-* / --home-* değişkenlerine dayanır,
   böylece koyu mod otomatik çalışır.
   ========================================================================== */

:root {
    --hrt-font: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;

    --hrt-primary: var(--home-primary, #016dff);
    --hrt-primary-strong: #0057d9;
    --hrt-primary-soft: var(--home-primary-soft, rgba(1, 109, 255, 0.08));
    --hrt-text: var(--home-text, #1a1a2e);
    --hrt-text-muted: var(--home-text-muted, #64748b);
    --hrt-border: var(--hrt-card-border, #e8edf3);
    --hrt-card: var(--hrt-card-bg, #ffffff);
    --hrt-muted-bg: #f4f5f7;
    --hrt-danger: #ef4444;
    --hrt-success: #16a34a;
    --hrt-warning: #f59e0b;

    /* Boşluk ritmi: 4'ün katları */
    --hrt-space-1: 4px;
    --hrt-space-2: 8px;
    --hrt-space-3: 12px;
    --hrt-space-4: 16px;
    --hrt-space-5: 20px;
    --hrt-space-6: 24px;
    --hrt-gutter: 20px;

    --hrt-radius-sm: 10px;
    --hrt-radius-md: 12px;
    --hrt-radius-lg: 16px;
    --hrt-radius-pill: 999px;

    --hrt-shadow-sm: 0 1px 4px rgba(15, 23, 42, 0.06);

    --hrt-header-h: 56px;
    --hrt-icon-btn: 36px;
    --hrt-control-h: 48px;

    /* Tipografi ölçeği — 11px altına inilmez */
    --hrt-fs-title: 18px;
    --hrt-fs-section: 15px;
    --hrt-fs-body: 14px;
    --hrt-fs-small: 12px;
    --hrt-fs-micro: 11px;
}

html[data-theme="dark"] {
    --hrt-muted-bg: #33374a;
    --hrt-primary-strong: #2f8bff;
}

body {
    font-family: var(--hrt-font);
}

/* --------------------------------------------------------------------------
   1) Sayfa başlığı — tek tip: geri butonu + başlık (+ isteğe bağlı sağ eylem)
   -------------------------------------------------------------------------- */
header.default {
    min-height: var(--hrt-header-h);
    height: var(--hrt-header-h);
    padding: 0 var(--hrt-gutter);
    gap: var(--hrt-space-3);
}

header.default.heade-sticky {
    top: 0;
    left: 0;
    right: 0;
}

header.default .un-title-page {
    display: flex;
    align-items: center;
    min-width: 0;
    flex: 1 1 auto;
}

header.default .un-title-page.go-back .icon,
header.default .un-block-right .btn-box-icon {
    flex: 0 0 var(--hrt-icon-btn);
    width: var(--hrt-icon-btn);
    height: var(--hrt-icon-btn);
    border-radius: 50%;
    background-color: var(--hrt-muted-bg);
    color: var(--hrt-text);
    border: 0;
}

header.default .un-title-page.go-back .icon {
    margin-right: var(--hrt-space-3);
    font-size: 24px;
}

header.default .un-block-right .btn-box-icon {
    font-size: 18px;
}

header.default .un-title-page h1 {
    font-size: var(--hrt-fs-title);
    font-weight: 600;
    line-height: 1.3;
    color: var(--hrt-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

header.default .un-title-page .hrt-title-stack {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

header.default .un-title-page .hrt-subtitle {
    margin: 1px 0 0;
    font-size: var(--hrt-fs-small);
    line-height: 1.3;
    color: var(--hrt-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

header.default .un-block-right {
    flex: 0 0 auto;
    column-gap: var(--hrt-space-2);
}

.space-sticky {
    height: var(--hrt-header-h);
}

.border-sections-home {
    border-bottom-color: var(--hrt-border);
}

/* --------------------------------------------------------------------------
   2) Yükleniyor ekranı — görünür, marka renginde bir halka
   -------------------------------------------------------------------------- */
.loader-page {
    background-color: var(--hrt-card);
}

.loader-page .spinner_flash {
    width: 36px;
    height: 36px;
    margin: 0;
    border-radius: 50%;
    background: transparent;
    border: 3px solid var(--hrt-primary-soft);
    border-top-color: var(--hrt-primary);
    animation: hrt-spin 0.8s linear infinite;
}

@keyframes hrt-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .loader-page .spinner_flash {
        animation-duration: 2.4s;
    }
}

/* --------------------------------------------------------------------------
   3) Bölüm başlığı ve açıklama metni
   -------------------------------------------------------------------------- */
.hrt-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hrt-space-2);
    margin: var(--hrt-space-5) 0 var(--hrt-space-3);
    font-size: var(--hrt-fs-section);
    font-weight: 600;
    color: var(--hrt-text);
}

.hrt-section-title small,
.hrt-section-title .hrt-section-meta {
    font-size: var(--hrt-fs-small);
    font-weight: 400;
    color: var(--hrt-text-muted);
}

/* --------------------------------------------------------------------------
   4) Kart ve liste satırı
   -------------------------------------------------------------------------- */
.hrt-card {
    background: var(--hrt-card);
    border: 1px solid var(--hrt-border);
    border-radius: var(--hrt-radius-lg);
    box-shadow: var(--hrt-shadow-sm);
    padding: var(--hrt-space-4);
}

/* Sayfa kenar boşluğu: eski şablonlarda üstteki özet kartı 10px kenar
   boşluğuyla duruyordu; başlıkla aynı hizaya (20px) çekilir. */
#content > .un-page-components > .bg-white.padding-10,
#content > section > .bg-white.padding-10 {
    padding-left: var(--hrt-gutter);
    padding-right: var(--hrt-gutter);
}

/* --------------------------------------------------------------------------
   5) Form kontrolleri — her sayfada aynı yükseklik, köşe ve odak halkası
   -------------------------------------------------------------------------- */
.form-control,
.form-select {
    border-radius: var(--hrt-radius-md);
    border-color: var(--hrt-border);
    font-size: var(--hrt-fs-body);
}

input.form-control,
select.form-control,
.form-select {
    min-height: var(--hrt-control-h);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--hrt-primary);
    box-shadow: 0 0 0 3px var(--hrt-primary-soft);
}

/* --------------------------------------------------------------------------
   6) Alt menü etiketi — okunabilir alt sınır
   -------------------------------------------------------------------------- */
.un-bottom-navigation .hrt-nav-label {
    font-size: var(--hrt-fs-micro);
}

/* ==========================================================================
   7) Özet kartı (.hrt-hero) — modül sayfasının üstündeki sade özet kartı.
   Diğer kartlarla aynı yüzeyi kullanır (koyu modda otomatik koyu kart).
   Modül kimliği yalnızca --hrt-accent ile taşınır: ikon kutusunun tonu ve
   yükleme göstergesi. İstatistikler kutu içinde değil, ince ayırıcılı
   sütunlardadır; durum renkleri etiketin yanındaki noktayla verilir.
   Yapı: .hrt-hero > .hrt-hero__head (başlık, metin, ikon)
                    > .hrt-hero__stats > .hrt-hero__stat (etiket, değer, alt metin)
                    > .hrt-hero__bar | .hrt-hero__chips | .hrt-hero__action
   ========================================================================== */
.hrt-hero {
    --hrt-accent: var(--hrt-primary);
    --hrt-accent-soft: var(--hrt-primary-soft);
    position: relative;
    overflow: hidden;
    padding: var(--hrt-space-4);
    border: 1px solid var(--hrt-border);
    border-radius: var(--hrt-radius-lg);
    background: var(--hrt-card);
    box-shadow: var(--hrt-shadow-sm);
    color: var(--hrt-text);
}

/* Modül vurgu renkleri */
.hrt-hero--cost     { --hrt-accent: #1e6fe0; --hrt-accent-soft: rgba(30, 111, 224, 0.12); }
.hrt-hero--leave    { --hrt-accent: #a24ad8; --hrt-accent-soft: rgba(162, 74, 216, 0.12); }
.hrt-hero--docs     { --hrt-accent: #0e8aa6; --hrt-accent-soft: rgba(14, 138, 166, 0.12); }
.hrt-hero--profile  { --hrt-accent: #4f5bd5; --hrt-accent-soft: rgba(79, 91, 213, 0.12); }
.hrt-hero--org      { --hrt-accent: #e2671f; --hrt-accent-soft: rgba(226, 103, 31, 0.12); }
.hrt-hero--city     { --hrt-accent: #16a05a; --hrt-accent-soft: rgba(22, 160, 90, 0.12); }
.hrt-hero--payroll  { --hrt-accent: #0b9a76; --hrt-accent-soft: rgba(11, 154, 118, 0.12); }
.hrt-hero--overtime { --hrt-accent: #4f63e0; --hrt-accent-soft: rgba(79, 99, 224, 0.12); }
.hrt-hero--advance  { --hrt-accent: #0f9488; --hrt-accent-soft: rgba(15, 148, 136, 0.12); }
.hrt-hero--shift    { --hrt-accent: #0b84c4; --hrt-accent-soft: rgba(11, 132, 196, 0.12); }
.hrt-hero--requests { --hrt-accent: #475fa8; --hrt-accent-soft: rgba(71, 95, 168, 0.12); }
.hrt-hero--pdks     { --hrt-accent: #5b45ff; --hrt-accent-soft: rgba(91, 69, 255, 0.12); }
.hrt-hero--meal     { --hrt-accent: #d97706; --hrt-accent-soft: rgba(217, 119, 6, 0.12); }
.hrt-hero--item     { --hrt-accent: #395aff; --hrt-accent-soft: rgba(57, 90, 255, 0.12); }

html[data-theme="dark"] .hrt-hero {
    --hrt-accent-soft: color-mix(in srgb, var(--hrt-accent) 22%, transparent);
}

.hrt-hero__head {
    display: flex;
    align-items: flex-start;
    gap: var(--hrt-space-3);
}

.hrt-hero__head > :first-child {
    flex: 1 1 auto;
    min-width: 0;
}

.hrt-hero__title {
    margin: 0 0 2px;
    font-size: var(--hrt-fs-section);
    font-weight: 600;
    line-height: 1.35;
    color: var(--hrt-text);
}

.hrt-hero__text {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--hrt-text-muted);
}

.hrt-hero__icon {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--hrt-radius-md);
    background: var(--hrt-accent-soft);
    color: var(--hrt-accent);
    font-size: 22px;
}

.hrt-hero__icon img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.hrt-hero__action {
    margin-top: var(--hrt-space-4);
}

/* İstatistikler: kutusuz, ince ayırıcılı sütunlar */
.hrt-hero__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: var(--hrt-space-4);
    padding-top: var(--hrt-space-3);
    border-top: 1px solid var(--hrt-border);
}

.hrt-hero__stats--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hrt-hero__stats--1 {
    grid-template-columns: minmax(0, 1fr);
}

.hrt-hero__stat {
    display: block;
    width: 100%;
    min-width: 0;
    padding: 2px var(--hrt-space-3);
    border: 0;
    border-left: 1px solid var(--hrt-border);
    border-radius: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
}

.hrt-hero__stat:first-child {
    padding-left: 0;
    border-left: 0;
}

button.hrt-hero__stat {
    cursor: pointer;
}

button.hrt-hero__stat .hrt-hero__stat-sub {
    color: var(--hrt-primary);
}

.hrt-hero__stat-label,
.hrt-hero__stat-sub {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.hrt-hero__stat-label {
    font-size: var(--hrt-fs-small);
    color: var(--hrt-text-muted);
}

.hrt-hero__stat-value {
    display: block;
    margin-top: 2px;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--hrt-text);
    font-variant-numeric: tabular-nums;
}

.hrt-hero__stat-value small {
    font-size: var(--hrt-fs-small);
    font-weight: 400;
    color: var(--hrt-text-muted);
}

/* Metin değerli istatistik (ör. "Bulunmuyor", "Bugün vardiya yok") */
.hrt-hero__stat-value--text {
    font-size: var(--hrt-fs-section);
    line-height: 1.35;
}

.hrt-hero__stat-sub {
    margin-top: 2px;
    font-size: var(--hrt-fs-micro);
    color: var(--hrt-text-muted);
}

.hrt-stat-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 6px;
    border-radius: 50%;
    vertical-align: 1px;
}

/* Üç sütunda etiketler kesilmesin: daha dar iç boşluk ve küçük nokta */
.hrt-hero__stats--3 .hrt-hero__stat {
    padding-left: 10px;
    padding-right: 10px;
}

.hrt-hero__stats--3 .hrt-hero__stat:first-child {
    padding-left: 0;
}

.hrt-hero__stats--3 .hrt-stat-dot {
    width: 6px;
    height: 6px;
    margin-right: 4px;
}

/* Oran çubuğu (bekleyen / onaylanan / reddedilen) */
.hrt-hero__bar {
    display: flex;
    gap: 2px;
    height: 4px;
    margin-top: var(--hrt-space-3);
    overflow: hidden;
    border-radius: var(--hrt-radius-pill);
    background: var(--hrt-muted-bg);
}

.hrt-hero__bar > span {
    display: block;
    height: 100%;
    border-radius: var(--hrt-radius-pill);
}

/* Durum çipleri */
.hrt-hero__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: var(--hrt-space-3);
}

.hrt-hero__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--hrt-radius-pill);
    background: var(--hrt-muted-bg);
    color: var(--hrt-text);
    font-size: var(--hrt-fs-small);
    font-weight: 500;
}

.hrt-hero__chip--ok {
    background: rgba(22, 163, 74, 0.1);
    color: #15803d;
}

.hrt-hero__chip--warn {
    background: rgba(239, 68, 68, 0.1);
    color: #b42318;
}

html[data-theme="dark"] .hrt-hero__chip--ok {
    background: rgba(34, 197, 94, 0.14);
    color: #86efac;
}

html[data-theme="dark"] .hrt-hero__chip--warn {
    background: rgba(248, 113, 113, 0.14);
    color: #fca5a5;
}

/* Kart içi yükleme katmanı (ör. bordro hesaplanırken).
   JS katmanı style.display = "block" ile açıyor; içerik ortalı kalsın. */
.hrt-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.65);
    pointer-events: none;
}

html[data-theme="dark"] .hrt-hero__overlay {
    background: rgba(42, 45, 62, 0.65);
}

.hrt-hero__overlay[style*="block"] {
    display: flex !important;
}

.hrt-hero__overlay .spinner-border {
    color: var(--hrt-accent) !important;
}

/* Eski şablonlardaki özet kartları (item-card-gradual) aynı ölçülere çekilir.
   Başlıkların çoğunda satır içi font-size olduğu için tipografi !important. */
#content .un-page-components .bg-white > .item-card-gradual:first-child {
    border-radius: var(--hrt-radius-lg);
}

#content .un-page-components .bg-white > .item-card-gradual:first-child > .head-card {
    padding: var(--hrt-space-4);
}

#content .un-page-components .bg-white > .item-card-gradual:first-child > .head-card > .creator-name > :is(h3, h5):first-child {
    font-size: var(--hrt-fs-section) !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
}

/* --------------------------------------------------------------------------
   8) Liste satırı — ikon + başlık + açıklama + ok. Ayarlar, Bordro, Taleplerim
   gibi sayfalardaki .un-navMenu-default satırlarının ortak görünümü.
   -------------------------------------------------------------------------- */
.un-navMenu-default:not(.hrt-qr-options-list) .nav .nav-item .nav-link {
    min-height: 64px;
    padding: var(--hrt-space-3) var(--hrt-space-4);
    gap: var(--hrt-space-3);
    background-color: var(--hrt-card);
    border: 1px solid var(--hrt-border);
    border-radius: var(--hrt-radius-md);
    box-shadow: var(--hrt-shadow-sm);
}

.un-navMenu-default:not(.hrt-qr-options-list) .nav .nav-item .nav-link:hover,
.un-navMenu-default:not(.hrt-qr-options-list) .nav .nav-item .nav-link:active {
    background-color: var(--hrt-muted-bg);
}

.un-navMenu-default:not(.hrt-qr-options-list) .nav .nav-item .nav-link .item-content-link {
    flex: 1 1 auto;
    min-width: 0;
}

.un-navMenu-default:not(.hrt-qr-options-list) .nav .nav-item .nav-link .item-content-link .icon {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    margin-right: var(--hrt-space-3);
    border-radius: var(--hrt-radius-md);
    font-size: 20px;
}

.un-navMenu-default:not(.hrt-qr-options-list) .nav .nav-item .nav-link .item-content-link .link-title {
    font-size: var(--hrt-fs-body);
    font-weight: 600;
    line-height: 1.35;
    color: var(--hrt-text);
}

.un-navMenu-default:not(.hrt-qr-options-list) .nav .nav-item .nav-link .item-content-link .link-title ~ :is(.link-title, p, span) {
    display: block;
    margin: 2px 0 0;
    font-size: var(--hrt-fs-small);
    font-weight: 400;
    line-height: 1.4;
    color: var(--hrt-text-muted);
}

html[data-theme="dark"] .un-navMenu-default:not(.hrt-qr-options-list) .nav .nav-item .nav-link {
    background-color: var(--hrt-card) !important;
    border-color: var(--hrt-border) !important;
}

html[data-theme="dark"] .un-navMenu-default:not(.hrt-qr-options-list) .nav .nav-item .nav-link .item-content-link .link-title ~ :is(.link-title, p, span) {
    color: var(--hrt-text-muted) !important;
}

/* --------------------------------------------------------------------------
   9) Boş durum — "kayıt yok" kartı: ikon kutusu + başlık + açıklama.
   -------------------------------------------------------------------------- */
.hrt-empty {
    padding: 28px var(--hrt-space-5);
    text-align: center;
    background: var(--hrt-card);
    border: 1px solid var(--hrt-border);
    border-radius: var(--hrt-radius-lg);
    box-shadow: var(--hrt-shadow-sm);
    color: var(--hrt-text-muted);
    font-size: 13px;
    line-height: 1.5;
}

.hrt-empty__icon {
    width: 56px;
    height: 56px;
    margin: 0 auto var(--hrt-space-3);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--hrt-radius-lg);
    background: var(--hrt-primary-soft);
    color: var(--hrt-primary);
    font-size: 26px;
}

.hrt-empty__title {
    margin: 0 0 var(--hrt-space-1);
    font-size: var(--hrt-fs-section);
    font-weight: 600;
    color: var(--hrt-text);
}

.hrt-empty__text {
    margin: 0;
    font-size: 13px;
    color: var(--hrt-text-muted);
}

/* --------------------------------------------------------------------------
   10) Buton — tek birincil buton stili ve varyantları.
   Renkler değişkenle verilir ki Bootstrap'in .btn:hover/:focus rengi ezmesin.
   -------------------------------------------------------------------------- */
.hrt-btn {
    --hrt-btn-bg: var(--hrt-primary);
    --hrt-btn-fg: #fff;
    --hrt-btn-bd: transparent;
}

.hrt-btn--secondary { --hrt-btn-bg: var(--hrt-card); --hrt-btn-fg: var(--hrt-text); --hrt-btn-bd: var(--hrt-border); }
.hrt-btn--outline { --hrt-btn-bg: transparent; --hrt-btn-fg: var(--hrt-primary); --hrt-btn-bd: var(--hrt-primary); }
.hrt-btn--danger { --hrt-btn-bg: var(--hrt-danger); }
.hrt-btn--success { --hrt-btn-bg: var(--hrt-success); }
/* Modül rengini satır içi background ile alan butonlar: yazı koyu kalır */
.hrt-btn--tinted { --hrt-btn-fg: #1a1a2e; }
/* Renkli zemin üzerinde beyaz buton (yazı rengi satır içinde verilir) */
.hrt-btn--light { --hrt-btn-bg: #fff; }

.hrt-btn,
.btn.hrt-btn,
.btn.hrt-btn:hover,
.btn.hrt-btn:focus,
.btn.hrt-btn:active {
    background-color: var(--hrt-btn-bg);
    color: var(--hrt-btn-fg);
    border: 1px solid var(--hrt-btn-bd);
}

.hrt-btn,
.btn.hrt-btn {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--hrt-space-2);
    min-width: 120px;
    min-height: var(--hrt-control-h);
    padding: 0 var(--hrt-space-6);
    border-radius: var(--hrt-radius-pill);
    font-family: var(--hrt-font);
    font-size: var(--hrt-fs-body);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    box-shadow: none;
    cursor: pointer;
}

.btn.hrt-btn:hover {
    filter: brightness(0.96);
}

.btn.hrt-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--hrt-primary-soft);
}

.btn.hrt-btn:disabled,
.btn.hrt-btn.disabled {
    opacity: 0.5;
    pointer-events: none;
}

.hrt-btn--sm,
.btn.hrt-btn--sm {
    min-width: 0;
    min-height: 40px;
    padding: 0 18px;
    font-size: 13px;
}

.hrt-btn p {
    margin: 0;
    font: inherit;
    color: inherit;
}

.hrt-btn .ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-right: -12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    font-size: 16px;
}

/* Birincil buton: koyu moddaki açık mavi (#4da3ff) üzerinde beyaz yazı okunmuyordu */
html[data-theme="dark"] .hrt-btn:not(.hrt-btn--secondary):not(.hrt-btn--outline):not(.hrt-btn--danger):not(.hrt-btn--success):not(.hrt-btn--tinted):not(.hrt-btn--light),
html[data-theme="dark"] .sert-ekle-btn {
    --hrt-btn-bg: #1f6fe5;
    background-color: #1f6fe5;
}

/* Özet kartları koyulaşınca içlerindeki satır içi siyah yazı da açılmalı */
html[data-theme="dark"] .item-card-gradual:not([style*="background-image"]) {
    color: var(--hrt-text) !important;
}

/* Satır içi koyu yazı renkleri (zemini satır içinde verilmemiş öğelerde) */
html[data-theme="dark"] body :is(
    [style*="color:black"], [style*="color: black"],
    [style*="color:#000"], [style*="color: #000"],
    [style*="color:#010303"], [style*="color: #010303"],
    [style*="color:#111"], [style*="color: #111"],
    [style*="color:#1a1925"], [style*="color: #1a1925"],
    [style*="color:#202020"], [style*="color: #202020"],
    [style*="color:#222"], [style*="color: #222"],
    [style*="color:#2f2c45"], [style*="color: #2f2c45"],
    [style*="color:#333"], [style*="color: #333"],
    [style*="color:#373542"], [style*="color: #373542"],
    [style*="color:#555"], [style*="color: #555"],
    [style*="color:#58566a"], [style*="color: #58566a"]
):not([style*="background"]):not([style*="background-image"] *) {
    color: var(--hrt-text) !important;
}

html[data-theme="dark"] .no-task-text,
html[data-theme="dark"] .push-check-text,
html[data-theme="dark"] .documents-home-head h2,
html[data-theme="dark"] .upload-workflow-head h2 {
    color: var(--hrt-text) !important;
}

/* Form alanları: sayfa stillerindeki sabit beyaz zeminler */
html[data-theme="dark"] body :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="button"]):not([type="submit"]):not([type="file"]),
    select,
    textarea
):not(.hrt-hero *) {
    background-color: var(--hrt-muted-bg) !important;
    color: var(--hrt-text) !important;
    border-color: var(--hrt-border) !important;
}

html[data-theme="dark"] body :is(input, textarea)::placeholder {
    color: var(--hrt-text-muted) !important;
}

/* Onay sayfaları (approval-center.css değişkenleri) */
html[data-theme="dark"] {
    --approval-ink: var(--hrt-text);
    --approval-muted: var(--hrt-text-muted);
    --approval-surface: var(--hrt-card);
    --approval-border: var(--hrt-border);
}

html[data-theme="dark"] .approval-page :is(.approval-tabs button, .nav-tabs .nav-link, .approval-filter button):not(.active) {
    background: var(--hrt-muted-bg) !important;
    color: var(--hrt-text) !important;
    border-color: var(--hrt-border) !important;
}

/* Sayfaya özel açık yüzeyler */
html[data-theme="dark"] :is(
    .exp-chip:not(.active),
    .star_card,
    .statistics,
    .proc-header,
    .proc-empty,
    .proc-count-badge,
    .guide-card
) {
    background: var(--hrt-card) !important;
    border-color: var(--hrt-border) !important;
    color: var(--hrt-text) !important;
}

html[data-theme="dark"] .guide-page {
    background: transparent !important;
}

html[data-theme="dark"] :is(.guide-card h2, .proc-empty h3, .proc-title) {
    color: var(--hrt-text) !important;
}

html[data-theme="dark"] :is(.guide-card p, .guide-note, .guide-result, .proc-empty p) {
    color: var(--hrt-text-muted) !important;
}

/* Satır içi nötr açık zeminler (gri/beyaz kutular, rozetler). Modül vurgu
   renkleri (pembe, turuncu, kırmızı) bilerek bu listede yok. */
html[data-theme="dark"] body :is(
    [style*="background:#eaeaea"], [style*="background: #eaeaea"],
    [style*="background:#eeeff2"], [style*="background: #eeeff2"],
    [style*="background:#f5f5f7"], [style*="background: #f5f5f7"],
    [style*="background-color:#f5f5f7"], [style*="background-color: #f5f5f7"],
    [style*="background:#f3f5ff"], [style*="background: #f3f5ff"],
    [style*="background-color:#f3f3f3"], [style*="background-color: #f3f3f3"],
    [style*="background:#f5f6fb"], [style*="background: #f5f6fb"],
    [style*="background:#fff;"], [style*="background: #fff;"],
    [style*="background-color: #ffffff"], [style*="background-color:#ffffff"]
):not([style*="background-image"] *) {
    background: var(--hrt-muted-bg) !important;
    color: var(--hrt-text) !important;
}

/* Satır içi koyu mavi vurgu metinleri koyu zeminde açık maviye */
html[data-theme="dark"] body :is(
    [style*="color:#0055ff"], [style*="color: #0055ff"],
    [style*="color:#0457C9"], [style*="color:#0457c9"],
    [style*="color:#2675d6"], [style*="color: #2675d6"],
    [style*="color:#4f33fe"], [style*="color: #4f33fe"]
):not([style*="background"]) {
    color: var(--hrt-primary) !important;
}

html[data-theme="dark"] .guide-tab:not(.active) {
    color: var(--hrt-text) !important;
}

/* Satır içi ikincil gri metin (#5b586e) koyu zeminde soluk metin tokenına */
html[data-theme="dark"] body :is([style*="color:#5b586e"], [style*="color: #5b586e"]):not([style*="background"]) {
    color: var(--hrt-text-muted) !important;
}

/* ==========================================================================
   12) Modül sayfası şablonu — her modül aynı sırayı izler:
       başlık → .hrt-hero (özet + istatistikler) → ana eylem satırı →
       .hrt-section-title → .hrt-toolbar / .hrt-chips → kartlar / .hrt-empty
   Modüller birbirinden yalnızca özet kartındaki vurgu rengiyle ayrışır.
   ========================================================================== */
.hrt-page {
    padding: var(--hrt-space-4) var(--hrt-gutter) 120px;
}

/* Bölüm başlığı: sayfanın ilk öğesiyse üst boşluk yok */
.hrt-section-title:first-child {
    margin-top: 0;
}

.hrt-section-title > h2,
.hrt-section-title > h3 {
    margin: 0;
    font: inherit;
    color: inherit;
}

.hrt-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 0;
    border: 0;
    background: none;
    color: var(--hrt-primary);
    font-size: 13px;
    font-weight: 600;
}

/* Arama + filtre çubuğu */
.hrt-toolbar {
    display: flex;
    gap: var(--hrt-space-2);
    margin-bottom: var(--hrt-space-3);
}

.hrt-search {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.hrt-search > i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--hrt-text-muted);
    font-size: 18px;
    pointer-events: none;
}

.hrt-search > input {
    width: 100%;
    height: var(--hrt-control-h);
    padding: 0 14px 0 42px;
    border: 1px solid var(--hrt-border);
    border-radius: var(--hrt-radius-md);
    background: var(--hrt-card);
    color: var(--hrt-text);
    font-size: var(--hrt-fs-body);
}

.hrt-search > input:focus {
    outline: none;
    border-color: var(--hrt-primary);
    box-shadow: 0 0 0 3px var(--hrt-primary-soft);
}

.hrt-icon-btn {
    position: relative;
    flex: 0 0 var(--hrt-control-h);
    width: var(--hrt-control-h);
    height: var(--hrt-control-h);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--hrt-border);
    border-radius: var(--hrt-radius-md);
    background: var(--hrt-card);
    color: var(--hrt-text);
    font-size: 20px;
}

.hrt-icon-btn.active {
    border-color: var(--hrt-primary);
    background: var(--hrt-primary-soft);
    color: var(--hrt-primary);
}

/* Kaydırılabilir çipler: ekran kenarına kadar uzanır, kenarda kesik durmaz */
.hrt-chips {
    display: flex;
    gap: var(--hrt-space-2);
    margin: 0 calc(-1 * var(--hrt-gutter)) var(--hrt-space-3);
    padding: 0 var(--hrt-gutter) 2px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.hrt-chips::-webkit-scrollbar {
    display: none;
}

.hrt-chip {
    flex: 0 0 auto;
    height: 36px;
    padding: 0 14px;
    border: 1px solid var(--hrt-border);
    border-radius: var(--hrt-radius-pill);
    background: var(--hrt-card);
    color: var(--hrt-text);
    font-family: var(--hrt-font);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

.hrt-chip.active {
    border-color: var(--hrt-primary);
    background: var(--hrt-primary);
    color: #fff;
}

/* Segment (sekme) kontrolü */
.hrt-segment {
    display: flex;
    gap: 4px;
    padding: 4px;
    border-radius: var(--hrt-radius-md);
    background: var(--hrt-muted-bg);
}

.hrt-segment > * {
    flex: 1 1 0;
    min-width: 0;
    height: 36px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--hrt-text-muted);
    font-family: var(--hrt-font);
    font-size: 13px;
    font-weight: 600;
}

.hrt-segment > .active {
    background: var(--hrt-card);
    color: var(--hrt-text);
    box-shadow: var(--hrt-shadow-sm);
}

/* Liste satırı (yeni markup için; .un-navMenu-default satırlarıyla aynı görünüm) */
.hrt-row {
    display: flex;
    align-items: center;
    gap: var(--hrt-space-3);
    width: 100%;
    min-height: 64px;
    padding: var(--hrt-space-3) var(--hrt-space-4);
    border: 1px solid var(--hrt-border);
    border-radius: var(--hrt-radius-md);
    background: var(--hrt-card);
    box-shadow: var(--hrt-shadow-sm);
    color: var(--hrt-text);
    font: inherit;
    text-align: left;
    text-decoration: none;
}

.hrt-row + .hrt-row {
    margin-top: var(--hrt-space-2);
}

.hrt-row__icon {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--hrt-radius-md);
    background: var(--hrt-primary-soft);
    color: var(--hrt-primary);
    font-size: 20px;
}

.hrt-row__body {
    flex: 1 1 auto;
    min-width: 0;
}

.hrt-row__title {
    display: block;
    font-size: var(--hrt-fs-body);
    font-weight: 600;
    line-height: 1.35;
}

.hrt-row__text {
    display: block;
    margin-top: 2px;
    font-size: var(--hrt-fs-small);
    line-height: 1.4;
    color: var(--hrt-text-muted);
}

.hrt-row__chevron {
    flex: 0 0 auto;
    font-size: 20px;
    color: var(--hrt-text-muted);
}

/* Kart başlığı ve alan ızgarası (etiket + değer) */
.hrt-card + .hrt-card {
    margin-top: var(--hrt-space-3);
}

.hrt-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hrt-space-3);
}

.hrt-card__title {
    margin: 0;
    font-size: var(--hrt-fs-section);
    font-weight: 600;
    color: var(--hrt-text);
}

.hrt-card__text {
    margin: var(--hrt-space-1) 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--hrt-text-muted);
}

.hrt-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--hrt-space-3) var(--hrt-space-4);
    margin-top: var(--hrt-space-3);
}

.hrt-field__label {
    display: block;
    font-size: var(--hrt-fs-small);
    color: var(--hrt-text-muted);
}

.hrt-field__value {
    display: block;
    margin-top: 2px;
    font-size: var(--hrt-fs-body);
    font-weight: 500;
    color: var(--hrt-text);
    overflow-wrap: anywhere;
}

/* Bilgi / uyarı kutusu */
.hrt-notice {
    display: flex;
    gap: var(--hrt-space-3);
    padding: var(--hrt-space-3) var(--hrt-space-4);
    border: 1px solid #fde3a7;
    border-radius: var(--hrt-radius-md);
    background: #fff8e8;
    color: #7a4b00;
    font-size: 13px;
    line-height: 1.5;
}

.hrt-notice > i {
    flex: 0 0 auto;
    font-size: 18px;
    line-height: 1.2;
}

html[data-theme="dark"] .hrt-notice {
    border-color: rgba(245, 158, 11, 0.35);
    background: rgba(245, 158, 11, 0.12);
    color: #fcd34d;
}

/* Bilgi kutusu (mavi): uyarı değil, yönlendirme metni */
.hrt-notice--info {
    border-color: transparent;
    background: var(--hrt-primary-soft);
    color: var(--hrt-text);
}

.hrt-notice--info > i {
    color: var(--hrt-primary);
}

html[data-theme="dark"] .hrt-notice--info {
    border-color: transparent;
    background: rgba(77, 163, 255, 0.14);
    color: var(--hrt-text);
}

/* Sekme (nav-pills) kontrolleri: tüm sayfalarda .hrt-segment görünümü */
.nav-pilled-tab {
    padding: 4px;
    border-radius: var(--hrt-radius-md);
    background-color: var(--hrt-muted-bg);
}

.nav-pilled-tab .nav-item .nav-link {
    height: 36px;
    border-radius: 9px;
    color: var(--hrt-text-muted);
    font-size: 13px;
    font-weight: 600;
}

.nav-pilled-tab .nav-item .nav-link.active {
    background-color: var(--hrt-card);
    color: var(--hrt-text);
    box-shadow: var(--hrt-shadow-sm);
}

/* Eski şablonlardaki .empty-items boş durumu: .hrt-empty kartı */
.empty-items {
    padding: 28px var(--hrt-space-5);
    text-align: center;
    background: var(--hrt-card);
    border: 1px solid var(--hrt-border);
    border-radius: var(--hrt-radius-lg);
    box-shadow: var(--hrt-shadow-sm);
}

.empty-items h4 {
    margin: 0 0 var(--hrt-space-1);
    font-size: var(--hrt-fs-section);
    font-weight: 600;
    color: var(--hrt-text);
}

.empty-items p {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--hrt-text-muted);
}

/* Hero yalnızca sayfanın üst kısmıysa (altında eski bölümler devam ediyorsa) */
.hrt-page.hrt-page--top {
    padding-bottom: 0;
}

/* Hafta / ay gezinme başlığı (Vardiya vb.): başlık butonlarıyla aynı ölçü */
.un-title-default .un-block-right .icon-back {
    width: var(--hrt-icon-btn);
    height: var(--hrt-icon-btn);
    background-color: var(--hrt-muted-bg);
    color: var(--hrt-text);
    font-size: 24px;
}

.un-title-default .text h2 {
    font-size: var(--hrt-fs-section);
    font-weight: 600;
    color: var(--hrt-text);
}

.un-title-default .text p {
    font-size: var(--hrt-fs-small);
    color: var(--hrt-text-muted);
}

/* Liste filtresi başlığı: "Bekleyen Talepler" + filtre ikon butonu */
.hrt-filter-title {
    margin: 0;
    font-size: var(--hrt-fs-section);
    font-weight: 600;
    color: var(--hrt-text);
}

.hrt-icon-btn.dropdown-toggle::after {
    display: none;
}

/* Filtre satırının bulunduğu eski kart: şeffaf, sayfa kenar boşluğuyla hizalı */
.item-card-gradual:has(.hrt-filter-title) {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.item-card-gradual:has(.hrt-filter-title) > .head-card {
    padding: 8px var(--hrt-gutter) 4px !important;
}

/* Koyu mod: filtre satırı kapsayıcısı ve uyarı/hata durum kartları */
html[data-theme="dark"] .bg-white:has(> .item-card-gradual .hrt-filter-title) {
    background-color: transparent !important;
}

html[data-theme="dark"] .meal-empty-state.is-error {
    border-color: rgba(248, 113, 113, 0.35) !important;
    background: rgba(248, 113, 113, 0.1) !important;
    color: #fca5a5 !important;
}

/* Koyu mod: seçili çip / sekme zemini (açık mavi üzerinde beyaz yazı okunmuyordu) */
html[data-theme="dark"] .hrt-chip.active,
html[data-theme="dark"] .guide-tabs-wrap .guide-tab.active {
    border-color: #1f6fe5 !important;
    background: #1f6fe5 !important;
    color: #fff !important;
}

/* ==========================================================================
   13) Onay sayfaları (Harcama, Avans, İzin onayı) — modül şablonuyla aynı sıra:
       özet kartı → segment sekmeler → karar kartları / boş durum.
       Kart içleri JS ile üretildiği için sayfa sınıfları (expense-*, adv-*,
       leave-*) burada ortak görünüme bağlanır. .apv-page kapsayıcısı sayfa
       kenar boşluğunu verdiği için approval-center.css'teki kart boşlukları sıfırlanır.
   ========================================================================== */
/* Alt menünün arkasında kart kalmasın */
.hrt-page.apv-page {
    padding-bottom: 120px;
}

.apv-page .apv-tabs {
    margin: var(--hrt-space-4) 0 var(--hrt-space-3);
    padding: 4px;
}

.approval-page .apv-tabs > button,
.approval-page .apv-tabs > button.active {
    min-height: 0;
    margin: 0;
    padding: 0 8px;
    border: 0;
    border-radius: 9px;
}

.approval-page .apv-tabs > button:not(.active) {
    background: transparent;
    color: var(--hrt-text-muted);
}

.approval-page .apv-tabs > button.active {
    background: var(--hrt-card);
    color: var(--hrt-text);
    box-shadow: var(--hrt-shadow-sm);
}

.apv-loading {
    padding: 28px 0;
    text-align: center;
    color: var(--hrt-text-muted);
    font-size: 13px;
}

.approval-page .apv-list > .expense-card,
.approval-page .apv-list > .adv-card,
.approval-page .apv-list > .leave-card {
    margin: 0 0 var(--hrt-space-3) !important;
    padding: var(--hrt-space-4) !important;
    border: 1px solid var(--hrt-border) !important;
    border-radius: var(--hrt-radius-lg) !important;
    background: var(--hrt-card) !important;
    box-shadow: var(--hrt-shadow-sm);
    color: var(--hrt-text);
}

/* İzin kartı başlığı: ad solda, durum çipi sağ üstte */
.apv-list .leave-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--hrt-space-3);
}

.apv-list .leave-head > .status {
    flex: 0 1 auto;
    max-width: 55%;
    border-radius: 8px;
    line-height: 1.35;
}

.apv-list .leave-type {
    margin: var(--hrt-space-3) 0 var(--hrt-space-1);
}

/* Kart başlığı: tedarikçi / tutar / çalışan adı */
.apv-list .expense-card > strong,
.apv-list .leave-name {
    display: block;
    font-size: var(--hrt-fs-section);
    font-weight: 600;
    color: var(--hrt-text);
}

.apv-list .adv-amount {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--hrt-text);
    font-variant-numeric: tabular-nums;
}

/* Etiket – değer satırları */
.apv-list .expense-meta,
.apv-list .adv-meta {
    display: flex;
    justify-content: space-between;
    gap: var(--hrt-space-3);
    margin: 0;
    padding: 8px 0;
    border-top: 1px solid var(--hrt-border);
    font-size: 13px;
    color: var(--hrt-text);
}

.apv-list .expense-card > strong + .expense-meta,
.apv-list .adv-amount + .adv-meta {
    margin-top: var(--hrt-space-3);
}

.apv-list .expense-meta > span:last-child,
.apv-list .adv-meta > span:last-child {
    font-weight: 500;
    text-align: right;
    overflow-wrap: anywhere;
}

.apv-list .expense-label,
.apv-list .adv-label,
.apv-list .leave-meta {
    color: var(--hrt-text-muted);
}

.apv-list .leave-meta {
    font-size: var(--hrt-fs-small);
}

.apv-list .details,
.apv-list .leave-note {
    margin-top: var(--hrt-space-3);
    padding: var(--hrt-space-3);
    border: 0;
    border-radius: var(--hrt-radius-md);
    background: var(--hrt-muted-bg);
    color: var(--hrt-text);
    font-size: 13px;
    line-height: 1.5;
    white-space: pre-wrap;
}

/* Durum ve izin türü çipleri */
.apv-list .leave-type,
.apv-list .status {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: var(--hrt-radius-pill);
    background: var(--hrt-muted-bg);
    color: var(--hrt-text);
    font-size: var(--hrt-fs-small);
    font-weight: 500;
}

.apv-list .leave-type {
    background: var(--hrt-primary-soft);
    color: var(--hrt-primary);
}

.apv-list .status-approved { background: rgba(22, 163, 74, 0.1); color: #15803d; }
.apv-list .status-rejected { background: rgba(239, 68, 68, 0.1); color: #b42318; }
html[data-theme="dark"] .apv-list .status-approved { background: rgba(34, 197, 94, 0.14); color: #86efac; }
html[data-theme="dark"] .apv-list .status-rejected { background: rgba(248, 113, 113, 0.14); color: #fca5a5; }

/* Karar butonları: onay birincil yeşil, ret kırmızı çerçeveli; ikincil eylemler gri */
.approval-page .apv-list .expense-actions,
.approval-page .apv-list .adv-actions,
.approval-page .apv-list .leave-actions {
    display: flex;
    gap: var(--hrt-space-2);
    margin-top: var(--hrt-space-4);
}

.approval-page .apv-list .expense-actions button,
.approval-page .apv-list .adv-actions button,
.approval-page .apv-list .leave-actions button,
.approval-page .apv-list .attachment,
.approval-page .apv-list .form-link {
    flex: 1 1 0;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: var(--hrt-radius-md);
    font-family: var(--hrt-font);
    font-size: var(--hrt-fs-body);
    font-weight: 600;
}

.approval-page .apv-list .approve,
.approval-page .apv-list .approve-btn {
    background: var(--hrt-success) !important;
    color: #fff !important;
}

.approval-page .apv-list .reject,
.approval-page .apv-list .reject-btn {
    border-color: var(--hrt-danger) !important;
    background: transparent !important;
    color: var(--hrt-danger) !important;
}

.approval-page .apv-list .cancel,
.approval-page .apv-list .attachment,
.approval-page .apv-list .form-link,
.approval-page .apv-list .document-link {
    border-color: var(--hrt-border);
    background: var(--hrt-card);
    color: var(--hrt-text);
}

.approval-page .apv-list .attachment {
    width: 100%;
    margin-top: var(--hrt-space-3);
}

.approval-page .apv-list .form-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

/* Ret penceresi (alt sayfa) */
.approval-page .modal-box {
    background: var(--hrt-card);
    color: var(--hrt-text);
}

.approval-page .modal-box textarea,
.approval-page #rejectModal textarea {
    border: 1px solid var(--hrt-border);
    border-radius: var(--hrt-radius-md);
    background: var(--hrt-card);
    color: var(--hrt-text);
}

.approval-page .modal-buttons button,
.approval-page #rejectModal .modal-actions button {
    min-height: 44px;
    border-radius: var(--hrt-radius-md);
    font-weight: 600;
}

.approval-page .modal-buttons .cancel {
    background: var(--hrt-muted-bg);
    color: var(--hrt-text);
}

.approval-page .modal-buttons .confirm-reject,
.approval-page #rejectModal .reject-btn {
    background: var(--hrt-danger) !important;
    color: #fff !important;
}

.apv-page .error:empty {
    display: none;
}