/* ==========================================================================
   PROJE STİLLERİ
   --------------------------------------------------------------------------
   Cork'un kendi CSS dosyalarını (css/light, css/dark, layout/) düzenleme —
   şablon güncellenirse değişikliklerin kaybolur. Kendi kurallarını buraya yaz.
   Bu dosya <head> içinde en son yüklenir, yani vendor kurallarını ezer.

   Koyu tema için:  body.dark .senin-siniifin { ... }
   ========================================================================== */

/* Sayfa içeriği kısa olsa bile footer'ı ekranın altına iter. */
.layout-px-spacing,
body.dark .layout-px-spacing {
    min-height: calc(100vh - 155px) !important;
}

/* ==========================================================================
   BREADCRUMB ŞERİDİ
   --------------------------------------------------------------------------
   Cork bu layout'ta .secondary-nav için önce `display: flex`, hemen ardından
   `display: none` yazıyor (layout klasöründeki light ve dark structure.css) —
   yani şablonun kendi sayfalarında da breadcrumb hiç görünmüyor.

   Biz görünür yapıyoruz; ayrıca `position: fixed` yerine normal akışa
   alıyoruz: şerit zaten içerik kutusunun içinde duruyor, akışa alınca
   sabit bar ile içeriğin üst üste binmesi sorunu hiç doğmuyor.
   ========================================================================== */

.secondary-nav,
body.dark .secondary-nav {
    display: flex;
    position: static;
    width: auto;
    min-height: 0;
    background: transparent;
    box-shadow: none;
    margin-bottom: 2px;
}

.secondary-nav .breadcrumbs-container .navbar {
    padding: 0;
    align-items: center;
}

/* Sabit şeritte anlamlıydı; akış içinde sol menünün kendi düğmesiyle
   ve mobil üst bardaki düğmeyle çakışıyor. */
.secondary-nav .breadcrumbs-container .navbar .sidebarCollapse {
    display: none;
}

.secondary-nav .breadcrumb-content .page-header .page-title h4 {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    color: var(--dark_500);
}

body.dark .secondary-nav .breadcrumb-content .page-header .page-title h4 {
    color: var(--dark_100);
}

/* Başlığın altındaki açıklama cümlesi ($pageDescription) */
.secondary-nav .breadcrumb-content .page-header .page-title span.page-description {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
    color: var(--x_7);
}

body.dark .secondary-nav .breadcrumb-content .page-header .page-title span.page-description {
    color: var(--dark_300);
}

.secondary-nav .breadcrumb-style-one .breadcrumb {
    margin: 0 0 3px;
    padding: 0;
    font-size: 12px;
}

.secondary-nav .breadcrumb-action-dropdown {
    align-items: center;
}

/* ==========================================================================
   KART DÜZELTMELERİ
   ========================================================================== */

/* Cork'un kart bileşeni üst kenarlığı, üstünde bir başlık şeridi olacağını
   varsayarak kaldırıyor. Tek başına kullandığımızda geri veriyoruz. */
.widget-content-area.br-8 {
    border-top: 1px solid var(--x_4);
}

body.dark .widget-content-area.br-8 {
    border-top-color: var(--dark_600);
}

/* layout/structure.css tüm .widget ögelerinin gölgesini `!important` ile
   kapatıyor; dashboard kartlarında yumuşak gölge daha iyi duruyor. */
.widget.widget-stat-card-one {
    box-shadow: 0 0 40px 0 rgba(94, 92, 154, 0.06) !important;
    height: 100%;
}

body.dark .widget.widget-stat-card-one {
    box-shadow: none !important;
}

/* ==========================================================================
   LİSTELEME TABLOLARI
   ========================================================================== */

/* Ad + e-posta gibi iki satırlı hücreler */
.cell-stack {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.cell-stack .cell-title {
    font-weight: 600;
    color: var(--dark_500);
}

body.dark .cell-stack .cell-title {
    color: var(--dark_100);
}

.cell-stack .cell-sub {
    font-size: 12px;
    color: var(--x_7);
}

table.table img.profile-img {
    width: 34px;
    height: 34px;
    object-fit: cover;
}

/* Satır işlem butonları

   Kurallar .row-actions'a DEGIL dogrudan .ra-btn'e bagli: bu dugmeleri
   sayfa sablonu da JS de uretiyor ve JS tarafinda sarmalayici cogu
   yerde yok. .row-actions altina baglandiginda o dugmeler hic stil
   almiyor, tarayicinin varsayilan gri kutulu <button>'i olarak
   goruntuleniyordu.

   <button> icin ayrica arka plan/cerceve sifirlamasi sart - bu
   kurallar once yalnizca <a> ile kullaniliyordu. */
.row-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.ra-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    background: transparent;
    border-radius: 7px;
    color: var(--x_7);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.ra-btn:disabled,
.ra-btn.disabled {
    opacity: 0.5;
    cursor: default;
}

.ra-btn svg {
    width: 17px;
    height: 17px;
    stroke-width: 1.8px;
}

/* Metinli işlem butonu (ör. Cari listesinde "Ekstre" / "Kart"): sabit
   30px'lik ikon kutusuna metin sığmıyor, iç içe giriyordu. Bunlar
   otomatik genişlikte, dolgulu küçük hap düğmelerdir. */
.ra-btn.ra-btn-text {
    width: auto;
    height: 28px;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    background: var(--primary_50, #f5f7fe);
    color: var(--primary_600, #3754db);
}
.ra-btn.ra-btn-text:hover {
    background: var(--primary_100, #eceffe);
    color: var(--primary_600, #3754db);
}

.ra-view:hover   { background-color: var(--info_100);    color: var(--info_600); }
.ra-edit:hover   { background-color: var(--primary_100); color: var(--primary_600); }
.ra-delete:hover { background-color: var(--danger_100);  color: var(--danger_600); }
.ra-select:hover { background-color: var(--info_100);    color: var(--info_600); }

body.dark .ra-view:hover   { background-color: var(--dark_600); color: var(--info_400); }
body.dark .ra-edit:hover   { background-color: var(--dark_600); color: var(--primary_400); }
body.dark .ra-delete:hover { background-color: var(--dark_600); color: var(--danger_400); }
body.dark .ra-select:hover { background-color: var(--dark_600); color: var(--info_400); }

/* ==========================================================================
   ARAMA MODALI
   --------------------------------------------------------------------------
   Cork bu bileşene neredeyse hiç stil vermiyor: içerik 65px iç boşlukla
   dar bir şeride sıkışıyor, satırların hover'ı ve dolgusu yok. Aşağıdaki
   kurallar onu düzgün bir komut paleti görünümüne getiriyor.

   Seçiciler bilerek uzun: Cork'un kuralları da aynı uzunlukta, daha kısa
   yazarsak özgüllük yetmez.
   ========================================================================== */

.search-content-modal .modal-dialog .modal-content {
    border-radius: 12px;
    overflow: hidden;
}

.search-content-modal .modal-dialog .modal-content .modal-body .search-modal {
    padding: 13px 18px;
}

.search-content-modal .modal-dialog .modal-content .modal-body .modal-search-container {
    max-width: 100%;
}

/* app.js, yazarken bu ögeye satır içi padding (65px / 25px) yazıyor.
   !important olmasa modal açılışta ve her tuşta zıplıyor. */
.search-content-modal .modal-dialog .modal-content .modal-body .modal-search-container .search-content {
    padding: 14px 14px 8px !important;
    align-items: stretch;
}

/* Bölüm başlıkları */
.search-content-modal .modal-dialog .modal-content .modal-body .modal-search-container .search-content .search-list-content h6,
.search-content-modal .modal-dialog .modal-content .modal-body .modal-search-container .search-content .searchable-list-content h6 {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--dark_300);
    margin-bottom: 4px;
    padding-left: 10px;
}

/* Satırlar — tam genişlik, dolgulu, hover'lı */
.search-content-modal .modal-dialog .modal-content .modal-body .modal-search-container .search-content .search-list-content .search-list li,
.search-content-modal .modal-dialog .modal-content .modal-body .modal-search-container .search-content .searchable-list-content .searchable-list li {
    margin-bottom: 1px;
}

.search-content-modal .modal-dialog .modal-content .modal-body .modal-search-container .search-content .search-list-content .search-list li a,
.search-content-modal .modal-dialog .modal-content .modal-body .modal-search-container .search-content .searchable-list-content .searchable-list li a {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 7px 10px;
    border-radius: 8px;
    background-color: transparent;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.search-content-modal .modal-dialog .modal-content .modal-body .modal-search-container .search-content .search-list-content .search-list li a:hover,
.search-content-modal .modal-dialog .modal-content .modal-body .modal-search-container .search-content .searchable-list-content .searchable-list li a:hover {
    background-color: var(--primary_50);
    color: var(--primary_600);
}

/* İkonlar */
.search-content-modal .modal-dialog .modal-content .modal-body .modal-search-container .search-content .search-list-content .search-list li .search-list-icon,
.search-content-modal .modal-dialog .modal-content .modal-body .modal-search-container .search-content .searchable-list-content .searchable-list li a .search-list-icon {
    display: flex;
    align-items: center;
    color: var(--dark_400);
}

.search-content-modal .modal-dialog .modal-content .modal-body .modal-search-container .search-content .search-list-content .search-list li .search-list-icon svg,
.search-content-modal .modal-dialog .modal-content .modal-body .modal-search-container .search-content .searchable-list-content .searchable-list li a .search-list-icon svg {
    width: 18px;
    height: 18px;
    stroke-width: 1.6px;
}

.search-content-modal .modal-dialog .modal-content .modal-body .modal-search-container .search-content .search-list-content .search-list li a:hover .search-list-icon,
.search-content-modal .modal-dialog .modal-content .modal-body .modal-search-container .search-content .searchable-list-content .searchable-list li a:hover .search-list-icon {
    color: inherit;
}

/* Etiketler */
.search-content-modal .modal-dialog .modal-content .modal-body .modal-search-container .search-content .search-list-content .search-list li span.search-label,
.search-content-modal .modal-dialog .modal-content .modal-body .modal-search-container .search-content .searchable-list-content .searchable-list li a span.search-label {
    font-size: 13px;
    line-height: 1.35;
}

/* "Personel Listesi — Personel" satırındaki üst menü adı */
.search-content-modal .search-label .search-parent {
    font-size: 11px;
    color: var(--dark_300);
    margin-left: 6px;
}

/* Bölümler arası boşluk */
.search-content-modal .search-content .search-row-one > [class*="col-"] {
    margin-bottom: 12px;
}

.search-content-modal .search-content .search-row-one > [class*="col-"]:last-child {
    margin-bottom: 0;
}

/* Sonuç yok durumu */
.search-content-modal .search-content .search-no-result {
    text-align: center;
    padding: 34px 10px 40px;
    color: var(--dark_300);
}

.search-content-modal .search-content .search-no-result svg {
    width: 34px;
    height: 34px;
    margin-bottom: 10px;
    opacity: 0.7;
}

.search-content-modal .search-content .search-no-result p {
    font-size: 13px;
    color: var(--dark_300);
}

/* --- Koyu tema --- */
body.dark .search-content-modal .modal-dialog .modal-content .modal-body .modal-search-container .search-content .search-list-content .search-list li a:hover,
body.dark .search-content-modal .modal-dialog .modal-content .modal-body .modal-search-container .search-content .searchable-list-content .searchable-list li a:hover {
    background-color: var(--dark_600);
    color: var(--primary_300);
}

body.dark .search-content-modal .modal-dialog .modal-content .modal-body .modal-search-container .search-content .search-list-content h6,
body.dark .search-content-modal .modal-dialog .modal-content .modal-body .modal-search-container .search-content .searchable-list-content h6 {
    color: var(--dark_300);
}

/* --------------------------------------------------------------------------
   Cork düzeltmesi: css/light/main.css ve css/dark/main.css
   `select.form-control.form-custom` için ../img/arrow-down.png istiyor, ama
   şablon o dosyayı hiç göndermiyor — yani bir form sayfası açıldığında 404
   üretiyordu. Oku data-URI olarak gömüyoruz; artık dosyaya ihtiyaç yok.
   -------------------------------------------------------------------------- */
select.form-control.form-custom {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='14' viewBox='0 0 24 24' fill='none' stroke='%23888ea8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

body.dark select.form-control.form-custom {
    background-color: transparent;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='14' viewBox='0 0 24 24' fill='none' stroke='%23888ea8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* ==================================================================
   EVRAK TANIMLARI  (document_type.php)
   Tablo yerine satir listesi: uzun aciklamalar sutuna sigmiyordu.
   ================================================================== */

.doc-list {
    border: 1px solid var(--border-color, #e0e6ed);
    border-radius: 8px;
    overflow: hidden;
}

.doc-row {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--border-color, #e0e6ed);
    transition: background-color 0.15s ease;
}

.doc-row:last-child {
    border-bottom: 0;
}

.doc-row:hover {
    background-color: rgba(27, 85, 226, 0.03);
}

.doc-row.doc-inactive {
    opacity: 0.55;
}

.doc-info {
    flex: 1 1 auto;
    min-width: 0;
}

.doc-name {
    font-weight: 600;
    line-height: 1.4;
}

.doc-desc {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: #888ea8;
    margin-top: 0.15rem;
}

.doc-toggles {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 0 0 auto;
    min-width: 6.5rem;
}

.doc-toggles .form-check-label {
    cursor: pointer;
    user-select: none;
}

.doc-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex: 0 0 auto;
}

.doc-actions .btn {
    line-height: 1;
    border: 0;
    background: transparent;
    color: #888ea8;
}

.doc-actions .btn:hover {
    color: #1b55e2;
}

.doc-actions .btn.text-danger:hover {
    color: #e7515a !important;
}

/* Dar ekranda anahtarlar ve islemler alt satira insin. */
@media (max-width: 575.98px) {
    .doc-row {
        flex-wrap: wrap;
    }

    .doc-info {
        flex: 1 1 100%;
    }
}

/* Koyu tema */
.dark .doc-list,
.dark .doc-row {
    border-color: #191e3a;
}

.dark .doc-row:hover {
    background-color: rgba(255, 255, 255, 0.02);
}

.dark .doc-desc {
    color: #607d8b;
}

/* ==================================================================
   ANAHTAR ve KUTUCUK  (PROJE STANDARDI)

   Markup'i config/helpers.php icindeki hr_switch() / hr_check() uretir;
   elle <input type="checkbox"> yazilmaz. Boylece gorunum her sayfada
   ayni kalir ve burasi tek stil kaynagidir.
   ================================================================== */

.hr-switch,
.hr-check {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    user-select: none;
    margin: 0;
    line-height: 1.2;
}

.hr-switch input,
.hr-check input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.hr-label {
    font-size: 0.8125rem;
    color: #506690;
}

/* ---------- Anahtar (toggle) ---------- */

.hr-switch .hr-indicator {
    position: relative;
    flex: 0 0 auto;
    width: 2.25rem;
    height: 1.25rem;
    border-radius: 999px;
    background-color: #d3d3d3;
    transition: background-color 0.2s ease;
}

.hr-switch .hr-indicator::after {
    content: "";
    position: absolute;
    top: 0.1875rem;
    left: 0.1875rem;
    width: 0.875rem;
    height: 0.875rem;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease;
}

.hr-switch input:checked + .hr-indicator {
    background-color: #1b55e2;
}

.hr-switch input:checked + .hr-indicator::after {
    transform: translateX(1rem);
}

/* ---------- Kutucuk ---------- */

.hr-check .hr-indicator {
    position: relative;
    flex: 0 0 auto;
    width: 1.125rem;
    height: 1.125rem;
    border: 2px solid #bfc9d4;
    border-radius: 4px;
    background-color: #fff;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.hr-check .hr-indicator::after {
    content: "";
    position: absolute;
    top: 0.0625rem;
    left: 0.3125rem;
    width: 0.25rem;
    height: 0.5625rem;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    transition: transform 0.15s ease;
}

.hr-check input:checked + .hr-indicator {
    background-color: #1b55e2;
    border-color: #1b55e2;
}

.hr-check input:checked + .hr-indicator::after {
    transform: rotate(45deg) scale(1);
}

/* ---------- Ortak durumlar ---------- */

.hr-switch input:focus-visible + .hr-indicator,
.hr-check input:focus-visible + .hr-indicator {
    outline: 2px solid rgba(27, 85, 226, 0.45);
    outline-offset: 2px;
}

.hr-switch:hover .hr-indicator,
.hr-check:hover .hr-indicator {
    border-color: #1b55e2;
}

.hr-disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.hr-disabled:hover .hr-indicator {
    border-color: #bfc9d4;
}

/* Etiketsiz kullanim (tablo hucresi) — ortalanir. */
.hr-unlabeled {
    gap: 0;
}

/* ---------- Koyu tema ---------- */

.dark .hr-label {
    color: #888ea8;
}

.dark .hr-switch .hr-indicator {
    background-color: #3b3f5c;
}

.dark .hr-check .hr-indicator {
    background-color: #1b2e4b;
    border-color: #3b3f5c;
}

.dark .hr-switch .hr-indicator::after {
    background-color: #e0e6ed;
}

/* ==================================================================
   PROFIL GORSELI  (PROJE STANDARDI)
   Markup'i config/helpers.php icindeki hr_avatar() uretir.
   Kisiye ozel fotograf kullanilmaz; her yerde ayni notr gorsel.
   ================================================================== */

.hr-avatar {
    display: inline-flex;
    flex: 0 0 auto;
    border-radius: 50%;
    overflow: hidden;
    line-height: 0;
    vertical-align: middle;
}

.hr-avatar svg {
    width: 100%;
    height: 100%;
    display: block;
}

.hr-avatar-bg {
    fill: #e0e6ed;
}

.hr-avatar-fg {
    fill: #a3b0c2;
}

.dark .hr-avatar-bg {
    fill: #1b2e4b;
}

.dark .hr-avatar-fg {
    fill: #506690;
}

/* ==================================================================
   TABLO AVATAR KOLONU
   # kolonundan sonra gelen ortak avatar kolonu için stil.
   Tüm tablolarda aynı pozisyonda (index 1) kullanılır — DataTable
   olmayan düz tablolarda da (team_list.php #member-table) geçerli
   olsun diye seçici `table.dataTable` değil `table`.
   ================================================================== */

table th.col-avatar,
table td.col-avatar {
    width: 3rem;
    min-width: 3rem;
    max-width: 3rem;
    text-align: center;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

table td.col-avatar .hr-avatar {
    width: 34px;
    height: 34px;
}

table td.col-avatar .col-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--primary, #6d8eff);
    color: #fff;
}

table td.col-avatar .col-icon svg {
    width: 18px;
    height: 18px;
}

.dark table td.col-avatar .col-icon {
    background: var(--primary, #6d8eff);
}

.dark table th.col-avatar,
.dark table td.col-avatar {
    /* Dark mode'da ek bir değişiklik gerekmez — avatar SVG'si
       zaten dark mode sınıflarına sahip. */
}

/* ==================================================================
   PERSONEL FORMU · EVRAK TABLOSU  (employee_form.php #doc-list)

   Sabit yerlesim sart: evrak aciklamalari uzun (saglik raporu birkac
   satir) ve serbest yerlesimde tablo yatay tasiyordu - Dosya sutunu
   ekranin disina cikip gorunmez oluyordu.
   ================================================================== */

#doc-list {
    table-layout: fixed;
    width: 100%;
}

#doc-list td,
#doc-list th {
    vertical-align: top;
}

/* Durum sutunu satirin ortasinda dursun: aciklama sarabildigi icin
   satir yuksekligi degisken, uste dayali tik/carpi kopuk duruyordu. */
#doc-list td:first-child {
    vertical-align: middle;
}

#doc-list .doc-name {
    font-weight: 600;
    line-height: 1.4;
}

#doc-list .doc-desc {
    font-size: 0.75rem;
    line-height: 1.45;
    color: #888ea8;
    margin-top: 0.15rem;
    white-space: normal;
    overflow-wrap: anywhere;

    /* Aciklamalar cok uzun olabiliyor (saglik raporu ~9 satir); 13 evrakla
       tablo okunmaz hale geliyordu. Iki satirla sinirla, tamami title'da. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dark #doc-list .doc-desc {
    color: #607d8b;
}

/* ==================================================================
   SABIT YERLESIMLI MODAL TABLOSU  (.hr-fixed-table)

   #doc-list ile ayni dert: serbest yerlesimde tablo kabindan genis
   olup "Islem" sutununu ekranin disina itiyordu - uye cikarma /
   satir duzeltme butonuna erisilemiyordu (team_list uye tablosu
   843px'e 731px, payroll_list satir tablosu 1298px'e 1091px).

   Id yerine SINIF: ayni dert her modal tablosunda cikiyor, kural
   tek yerde dursun.
   ================================================================== */

.hr-fixed-table {
    table-layout: fixed;
    width: 100%;
}

.hr-fixed-table td,
.hr-fixed-table th {
    vertical-align: middle;
    white-space: nowrap;
}

/* Kirpma yalniz metin sutunlarinda: dar sutunlarda (#, sorumlu, islem)
   ellipsis basliklari da yiyordu ("Sor...", "Isl..."). */
.hr-fixed-table td.col-name,
.hr-fixed-table th.col-name,
.hr-fixed-table td.col-dept,
.hr-fixed-table th.col-dept,
.hr-fixed-table td.col-pos,
.hr-fixed-table th.col-pos {
    overflow: hidden;
    text-overflow: ellipsis;
}

.hr-fixed-table .col-no,
.hr-fixed-table .col-lead,
.hr-fixed-table .col-action {
    padding-left: 0.35rem;
    padding-right: 0.35rem;
}

.hr-fixed-table .col-no      { width: 2.75rem; }
.hr-fixed-table .col-dept    { width: 19%; }
.hr-fixed-table .col-pos     { width: 19%; }
.hr-fixed-table .col-lead    { width: 5.25rem; }
.hr-fixed-table .col-action  { width: 4.25rem; }

/* Para sutunlari: rakamlar sagda ve esit genislikte olsun ki goz
   kolonu asagi dogru tarayabilsin (bordro satir tablosu). */
.hr-fixed-table .col-money {
    width: 8%;
    min-width: 6.5rem;
    text-align: right;
    white-space: nowrap;

    /* Cork hucrelere 21px yatay dolgu veriyor; 94px'lik bir sutunda
       rakama 52px kaliyor ve "26.447,30 TL" kirpiliyordu. Sorun
       genislik degil dolguydu. */
    padding-left: 0.6rem;
    padding-right: 0.6rem;
}

/* Ad sutunu kalan yeri alir; dar kalirsa isimler kirpilir. Bordro
   satir tablosunda alti para sutunu var, onlari daraltmak adlara
   yer aciyor. */
.hr-fixed-table .col-name {
    width: auto;
}

/* Evrak durumu: yesil tik (yuklendi) / kirmizi carpi (eksik).
   Elle isaretlenen bir kutucuk yok - durum dosyadan turetilir. */

.doc-state {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
}

.doc-state-ok {
    color: #00ab55;
}

.doc-state-missing {
    color: #e7515a;
}

.doc-state-text {
    letter-spacing: 0.01em;
}

/* ==========================================================================
   AUTH SAYFALARI — Login, Forgot Password, Reset Password
   --------------------------------------------------------------------------
   Modern input ikonları, şifre göster/gizle, Caps Lock uyarısı, buton stili.
   ========================================================================== */

/* Input grup wrapper — ikon + input + toggle butonu yan yana */
.auth-input-group {
    position: relative;
    display: flex;
    align-items: center;
}

/* Sol ikon */
.auth-input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    color: var(--x_7, #888);
    pointer-events: none;
    display: flex;
    align-items: center;
    transition: color 0.2s ease;
}

/* Input odaklanınca ikon rengi değişir */
.auth-input-group:focus-within .auth-input-icon {
    color: var(--primary, #4361ee);
}

/* Input'a sol padding — ikonun üstüne binmesin */
.auth-input-group .form-float {
    flex: 1;
}

.auth-input-group .form-float .form-control {
    padding-left: 42px;
    height: 48px;
}

/* Floating label'ı ikonla hizala */
.auth-input-group .form-float label {
    left: 42px;
}

/* Şifre göster/gizle butonu */
.auth-pw-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    background: transparent;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--x_7, #888);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: color 0.2s ease, background 0.2s ease;
}

.auth-pw-toggle:hover {
    color: var(--primary, #4361ee);
    background: rgba(67, 97, 238, 0.08);
}

/* Şifre input'una sağ padding — toggle butonuyla çakışmasın */
.auth-input-group:has(.auth-pw-toggle) .form-float .form-control {
    padding-right: 42px;
}

/* Caps Lock uyarısı */
.auth-caps-warning {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    color: #e7515a;
    padding: 6px 10px;
    margin-top: 6px;
    background: rgba(231, 81, 90, 0.08);
    border-radius: 6px;
    width: fit-content;
}

/* Şifremi unuttum linki */
.auth-forgot-link {
    font-size: 13px;
    font-weight: 600;
    color: var(--primary, #4361ee);
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.auth-forgot-link:hover {
    opacity: 0.75;
    text-decoration: none;
}

/* Submit butonu — login, forgot, reset */
.auth-submit-btn {
    height: 48px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
    border-radius: 8px;
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.auth-submit-btn:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(67, 97, 238, 0.35);
}

.auth-submit-btn:not(:disabled):active {
    transform: translateY(0);
}

/* Koyu tema uyumu */
body.dark .auth-input-icon {
    color: var(--dark_300, #888);
}

body.dark .auth-input-group:focus-within .auth-input-icon {
    color: var(--primary, #4361ee);
}

body.dark .auth-pw-toggle {
    color: var(--dark_300, #888);
}

body.dark .auth-pw-toggle:hover {
    color: var(--primary, #4361ee);
    background: rgba(67, 97, 238, 0.15);
}

body.dark .auth-forgot-link {
    color: var(--primary, #4361ee);
}

body.dark .auth-caps-warning {
    color: #e7515a;
    background: rgba(231, 81, 90, 0.12);
}

/* ==========================================================================
   ÖZET KARTLARI — İYİLEŞTİRİLMİŞ
   ========================================================================== */

.summary-card {
    /* KART GORUNUMU BURADA TANIMLIDIR, Cork'un sayfa stiline birakilmaz.

       Zemin, kenarlik, kose ve ic bosluk `analytics.css`teki genel
       `.widget` kuralindan geliyordu ve o dosya $pageStyles ile SAYFA
       BASINA yukleniyor. Yuklemeyi unutan sayfada kart bir "kart"
       olmaktan cikiyordu -- olculdu (expense_category):
           backgroundColor  rgba(0,0,0,0)   yerine  #fff
           borderTopWidth   0px             yerine  1px
           borderRadius     0px             yerine  16px
       yani zeminsiz, cercevesiz, kosesiz bir metin blogu.

       Degerler analytics.css'tekilerle BIREBIR ayni; o dosyayi yukleyen
       18 sayfada hicbir sey degismez. Koyu tema karsiligi asagida. */
    background-color: #fff;
    border: 1px solid var(--x_4);
    border-radius: 16px;
    box-shadow: 0 0 40px 0 rgba(94, 92, 154, 0.06);
    padding: 20px;

    /* `border` SONRASINDA gelir: sol kenar renk seridi olarak kalir ve
       .summary-card-<renk> yalnizca rengini degistirir. Once yazilsaydi
       ustteki `border` onu 1px'e indirirdi. */
    border-left: 3px solid transparent;

    transition: border-color 0.2s ease, transform 0.15s ease;
    overflow: hidden;
    position: relative;
}

.summary-card:hover {
    transform: translateY(-2px);
}

.summary-card-primary  { border-left-color: var(--primary_500); }
.summary-card-warning  { border-left-color: var(--warning_500); }
.summary-card-info     { border-left-color: var(--info_500); }
.summary-card-success  { border-left-color: var(--success_500); }
.summary-card-danger   { border-left-color: var(--danger_500); }
.summary-card-secondary{ border-left-color: var(--secondary_500); }

.summary-card-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--x_25);
}

.summary-card-icon svg {
    width: 22px;
    height: 22px;
}

.summary-card-primary  .summary-card-icon { background-color: var(--primary_100); }
.summary-card-warning  .summary-card-icon { background-color: var(--warning_100); }
.summary-card-info     .summary-card-icon { background-color: var(--info_100); }
.summary-card-success  .summary-card-icon { background-color: var(--success_100); }
.summary-card-danger   .summary-card-icon { background-color: var(--danger_100); }

body.dark .summary-card {
    background-color: #1b1d25;
    border-color: #1b1d25;
}

body.dark .summary-card-icon { background-color: var(--dark_600); }
body.dark .summary-card-primary  .summary-card-icon { background-color: rgba(67,97,238,0.15); }
body.dark .summary-card-warning  .summary-card-icon { background-color: rgba(231,81,90,0.15); }
body.dark .summary-card-info     .summary-card-icon { background-color: rgba(33,150,243,0.15); }
body.dark .summary-card-success  .summary-card-icon { background-color: rgba(0,171,85,0.15); }
body.dark .summary-card-danger   .summary-card-icon { background-color: rgba(231,81,90,0.15); }

.summary-card-sub {
    display: block;
    margin-top: 2px;
}

/* --------------------------------------------------------------------------
   UZUN RAKAM TASMASI
   --------------------------------------------------------------------------
   Deger ile ikon ayni satirda ve deger sabit buyuk fontta yaziliyordu.
   Olculdu (Bordro Raporu, "2.470.000,00"):

     1600px  kart 306px, deger 219px  -> sigiyor
     1366px  kart 248px, deger 219px  -> 36px TASIYOR
     1200px  kart 206px, deger 219px  -> 78px TASIYOR

   `.summary-card` overflow:hidden oldugu icin taşan rakam kirpiliyordu:
   "2.470.00" gorunup son hane kayboluyordu -- para rakaminda en kotu
   hata bicimi, cunku yanlis okunur ama bozuk gorunmez.

   Uc kurul birlikte cozer: deger fontu kart genisligine gore kuculur,
   ikon sikismaz, ikisi sigmazsa deger alt satira iner (kirpilmaz).
   -------------------------------------------------------------------------- */

.summary-card .widget-content > .w-100 {
    min-width: 0;
}

.summary-card .widget-content .d-flex.justify-content-between {
    flex-wrap: wrap;
    gap: 6px 10px;
}

.summary-card h2 {
    font-size: clamp(19px, 1.55vw, 28px);
    white-space: nowrap;
    min-width: 0;
}

.summary-card-icon {
    flex: 0 0 auto;
}

/* Baslik ve alt satir da kirpilmaz: uzun ada sarilir. */
.summary-card h6,
.summary-card-sub {
    overflow-wrap: anywhere;
}

/* ==========================================================================
   ONAY/RED BUTONLARI — TABLO SATIR İŞLEMLERİ
   ========================================================================== */

.row-actions .ra-approve { color: var(--success_500); }
.row-actions .ra-reject  { color: var(--danger_500); }

.row-actions .ra-approve:hover { background-color: var(--success_100); color: var(--success_600); }
.row-actions .ra-reject:hover  { background-color: var(--danger_100);  color: var(--danger_600); }

body.dark .row-actions .ra-approve:hover { background-color: var(--dark_600); color: var(--success_400); }
body.dark .row-actions .ra-reject:hover  { background-color: var(--dark_600); color: var(--danger_400); }

/* ==========================================================================
   ONAY SÜRECİ TİMELINE — DETAY MODAL
   ========================================================================== */

/* ==========================================================================
   ONAY ZINCIRI (.approval-chain)
   --------------------------------------------------------------------------
   Onceden dikey bir nokta listesiydi (.approval-timeline): adimlar alt
   alta, hepsi ayni agirlikta, "sirada kim var" hicbir yerde yazmiyordu.
   Simdi halkalar birbirine bagli ve uc hali var:

     done    tamamlanmis halka, sonraki halkaya giden cizgi DOLU
     current siradaki halka, vurgulu cerceve + "Sirada" etiketi
     future  henuz gelmemis halka, soluk ve KESIKLI cizgi

   Surecin nerede durdugu cizginin kendisinden okunur; rozet metnine
   bakmak gerekmez.
   ========================================================================== */

.approval-chain {
    display: flex;
    flex-direction: column;
}

/* align-items: STRETCH sart. flex-start iken halka sutunu yalnizca
   kendi icerigi kadar uzuyordu: cizgi sabit 22px kalip satirin
   ortasinda kesiliyor, altindaki halkaya ULASMIYORDU. Ustelik boyu
   satir yuksekligine gore degistigi icin (olculdu: bosluk 33px ile
   90px arasi) izin ve zimmet ekranlari birbirinden farkli
   goruluyordu. Stretch ile sutun satirin tamamini kaplar, cizgi de
   kalan bosluga buyur. */
.approval-chain-step {
    display: flex;
    gap: 14px;
    align-items: stretch;
}

/* Halka + ondan sonraki cizgi tek sutunda durur. */
.approval-chain-node {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 auto;
}

.approval-chain-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    border: 2px solid #e0e6ed;
    background: #fff;
    color: #888ea8;
    flex: 0 0 auto;
}

/* Cizgi halkanin altindan BIR SONRAKI halkanin ustune kadar uzar:
   min-height degil, kalan bosluk kadar. */
.approval-chain-link {
    flex: 1 1 auto;
    width: 2px;
    min-height: 12px;
    margin: 4px 0 0;
    background: #e0e6ed;
}

/* Tamamlanan halkadan sonraki cizgi DOLU, oteki kesikli. */
.approval-chain-link.dolu { background: #00ab55; }

.approval-chain-link.bos {
    background: none;
    border-left: 2px dashed #e0e6ed;
    width: 0;
}

.approval-chain-body {
    padding-bottom: 18px;
    min-width: 0;
}

.approval-chain-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #3b3f5c;
    margin-bottom: 4px;
}

.approval-chain-meta {
    font-size: 12px;
    color: #888ea8;
    margin-top: 3px;
}

.approval-chain-comment {
    margin-top: 6px;
    padding: 6px 10px;
    border-radius: 6px;
    background: #f1f2f6;
    font-size: 12px;
    font-style: italic;
    color: #6c7293;
}

/* --- Haller ------------------------------------------------------- */

.approval-chain-step.done .approval-chain-dot {
    border-color: #00ab55;
    background: #00ab55;
    color: #fff;
}

.approval-chain-step.rejected .approval-chain-dot {
    border-color: #e7515a;
    background: #e7515a;
    color: #fff;
}

.approval-chain-step.rejected .approval-chain-link.dolu { background: #e7515a; }

/* Siradaki halka: halkanin etrafinda halka. Renk tek basina yetmiyordu
   -- ekranda dort rozet varken goz hangisinin sirada oldugunu
   ayirt edemiyordu. */
.approval-chain-step.current .approval-chain-dot {
    border-color: #e2a03f;
    background: #fff;
    color: #e2a03f;
    box-shadow: 0 0 0 4px rgba(226, 160, 63, .18);
}

.approval-chain-step.current .approval-chain-title { color: #e2a03f; }

.approval-chain-now {
    padding: 1px 8px;
    border-radius: 10px;
    background: rgba(226, 160, 63, .14);
    color: #e2a03f;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
}

/* Gelmemis halka soluk: tamamlananla ayni agirlikta durmasin. */
.approval-chain-step.future .approval-chain-dot,
.approval-chain-step.future .approval-chain-title { opacity: .55; }

.approval-chain-step.future .badge { opacity: .7; }

body.dark .approval-chain-dot        { background: #0e1726; border-color: #1b2e4b; color: #888ea8; }
body.dark .approval-chain-link       { background: #1b2e4b; }
body.dark .approval-chain-link.bos   { border-left-color: #1b2e4b; }
body.dark .approval-chain-title      { color: #e0e6ed; }
body.dark .approval-chain-comment    { background: #1b2e4b; color: #888ea8; }
body.dark .approval-chain-step.current .approval-chain-dot { background: #0e1726; }


/* ==========================================================================
   DETAY MODAL — KART TABANLI DÜZEN
   ========================================================================== */

.detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}

.detail-grid .detail-item {
    background-color: var(--x_25);
    border-radius: 8px;
    padding: 12px 14px;
}

.detail-grid .detail-item.full {
    grid-column: 1 / -1;
}

.detail-grid .detail-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--x_7);
    margin-bottom: 4px;
    font-weight: 600;
}

.detail-grid .detail-value {
    font-size: 14px;
    font-weight: 500;
    color: var(--dark_500);
}

body.dark .detail-grid .detail-item { background-color: var(--dark_600); }
body.dark .detail-grid .detail-value { color: var(--dark_100); }

/* ==========================================================================
   PILL ROZET — İZİN TÜRÜ
   ========================================================================== */

.badge.badge-pill {
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
}

/* ===== Leave Request Modal — Type Preview ===== */
.lf-type-preview {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--bs-gray-100, #f5f5f5);
    border: 1px solid var(--bs-gray-200, #e9e9e9);
}
.lf-type-preview-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 50rem;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    line-height: 1.4;
}
.lf-type-preview-hint {
    font-size: 12px;
    color: var(--bs-warning, #f1b44c);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
}
.lf-type-preview-hint svg {
    width: 14px;
    height: 14px;
}

/* ===== Leave Request Modal — Date Range Bar ===== */
.lf-date-range-bar {
    display: flex;
    align-items: stretch;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--bs-gray-200, #e9e9e9);
    background: var(--bs-gray-100, #f5f5f5);
    margin-top: 8px;
}
.lf-date-range-start,
.lf-date-range-end {
    flex: 1;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}
.lf-date-range-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    color: var(--bs-gray-500, #888);
}
.lf-date-range-arrow svg {
    width: 20px;
    height: 20px;
}
.lf-date-range-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--bs-gray-500, #888);
    font-weight: 600;
}
.lf-date-range-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--bs-gray-800, #333);
}
.lf-date-range-days {
    padding: 12px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    background: var(--bs-gray-200, #e9e9e9);
    min-width: 90px;
}
.lf-date-range-days-num {
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
    color: var(--bs-gray-600, #666);
}
.lf-date-range-days-label {
    font-size: 11px;
    color: var(--bs-gray-500, #888);
    font-weight: 500;
}
.lf-date-range-days--active .lf-date-range-days-num {
    color: var(--bs-success, #00ab55);
}
.lf-date-range-days--active .lf-date-range-days-label {
    color: var(--bs-success, #00ab55);
}
.lf-date-range-days--warn .lf-date-range-days-num {
    color: var(--bs-danger, #e8533f);
}
.lf-date-range-days--warn .lf-date-range-days-label {
    color: var(--bs-danger, #e8533f);
}

/* Dark mode */
.dark .lf-type-preview {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.08);
}
.dark .lf-date-range-bar {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.08);
}
.dark .lf-date-range-days {
    background: rgba(255,255,255,0.08);
}
.dark .lf-date-range-value {
    color: rgba(255,255,255,0.9);
}
.dark .lf-date-range-label,
.dark .lf-date-range-arrow,
.dark .lf-date-range-days-label {
    color: rgba(255,255,255,0.5);
}
.dark .lf-date-range-days-num {
    color: rgba(255,255,255,0.6);
}

/* ==================================================================
   MASKELI RAKAM  (salary_list.php · bordro ekranlari)

   Maas rakami listede gonderilmez; kullanici tikladiginda ayri bir
   istekle gelir ve o istek access_log'a yazilir. Tiklanabilir oldugu
   gorunmezse kullanici rakamin var oldugunu anlamaz.
   ================================================================== */

.masked-amount {
    cursor: pointer;
    letter-spacing: 0.12em;
    color: #888ea8;
    user-select: none;
    border-bottom: 1px dashed #d3d3d3;
}

.masked-amount:hover {
    color: var(--primary, #6d8eff);
}

.masked-amount.revealed {
    cursor: default;
    letter-spacing: normal;
    color: inherit;
    font-weight: 600;
    border-bottom: 0;
    user-select: text;
}

.dark .masked-amount {
    color: #607d8b;
    border-bottom-color: #3b3f5c;
}

/* ==================================================================
   BİLDİRİM ROZETİ
   Menü ögesindeki okunmamış bildirim sayısı. Üst barda zaten Cork'un
   .badge'i var; menüde karşılığı yoktu.
   ================================================================== */
.hr-menu-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    margin-left: 6px;
    padding: 0 5px;
    border-radius: 9px;
    background-color: #e7515a;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    vertical-align: middle;
}

/* ==================================================================
   GİRİŞ SAYFASI  (login.php)
   ------------------------------------------------------------------
   İki panel: solda marka (HER ZAMAN koyu), sağda form (temaya uyar).
   Tema, login.php'deki satır içi betiğin <html>'e koyduğu .auth-dark
   sınıfıyla belirlenir — boyamadan önce uygulanır ki beyaz sıçrama
   olmasın.

   Cork'un auth-boxed.css dosyası KULLANILMIYOR; bu bölüm onun yerine
   geçer. Bu sayede giriş sayfası dört CSS yerine ikisiyle açılır.
   ================================================================== */

.auth-page {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    /* svh: mobilde tarayıcı çubuğu gizlenince sayfa zıplamasın */
    min-height: 100svh;
    background-color: #fff;
    color: #3b3f5c;
}

.auth-split {
    display: flex;
    min-height: 100svh;
}

/* ---------------------- SOL: marka ---------------------- */

.auth-brand {
    flex: 0 0 55%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px;
    overflow: hidden;
    color: #fff;
    /* Renkler logodan türetildi: lacivert · orta mavi · bej.
       Taban bilerek koyu ama SİYAH DEĞİL — küreler screen ile üzerine
       ışık ekliyor; taban çok koyu olursa o ışık kayboluyor. */
    background-color: #1c2b45;
    background-image:
        radial-gradient(55% 60% at 18% 22%, rgba(122, 168, 228, 0.95), transparent 62%),
        radial-gradient(50% 55% at 84% 30%, rgba(64, 96, 152, 1), transparent 64%),
        radial-gradient(58% 62% at 60% 88%, rgba(214, 196, 172, 0.7), transparent 62%);
    background-size: 200% 200%;
    animation: auth-flow 14s ease-in-out infinite;
}

/* Yalnız background-position değişir — düzen yeniden hesaplanmaz. */
@keyframes auth-flow {
    0%   { background-position:   0% 25%, 100% 15%, 50% 100%; }
    33%  { background-position:  70% 80%,  20% 70%, 10%  20%; }
    66%  { background-position: 100% 40%,   0% 90%, 85%  55%; }
    100% { background-position:   0% 25%, 100% 15%, 50% 100%; }
}

/* --- Süzülen küreler ---------------------------------------------
   Degradenin üzerinde bağımsız hızlarda sürüklenen bulanık daireler.
   Hareketin fark edilmesini sağlayan asıl katman bu; degrade tek
   başına fazla yavaş okunuyordu. Yalnız transform animasyonu. */

.auth-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(48px);
    pointer-events: none;
    will-change: transform;
    /* screen: küreler zemini örtmek yerine ÜZERİNE IŞIK EKLER.
       Düz opaklıkla denendiğinde hepsi silik gri lekeler gibi
       duruyordu; hareketi görünür kılan bu karışım. */
    mix-blend-mode: screen;
}

.auth-orb-1 {
    top: 2%;
    left: 2%;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, rgba(120, 176, 255, 0.85), transparent 66%);
    animation: auth-drift-1 15s ease-in-out infinite;
}

.auth-orb-2 {
    bottom: -4%;
    right: 0%;
    width: 460px;
    height: 460px;
    background: radial-gradient(circle, rgba(226, 205, 172, 0.7), transparent 66%);
    animation: auth-drift-2 19s ease-in-out infinite;
}

.auth-orb-3 {
    top: 38%;
    right: 26%;
    width: 340px;
    height: 340px;
    background: radial-gradient(circle, rgba(96, 140, 220, 0.8), transparent 68%);
    animation: auth-drift-3 23s ease-in-out infinite;
}

@keyframes auth-drift-1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(220px, 170px) scale(1.3); }
}

@keyframes auth-drift-2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(-260px, -160px) scale(0.78); }
}

@keyframes auth-drift-3 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(-180px, 140px) scale(1.35); }
    66%      { transform: translate(160px, -120px) scale(0.85); }
}

/* Işık süpürmesi: panelin üzerinden geçen ince, yumuşak parlaklık.
   Hareketi "canlı" gösteren ama dikkat dağıtmayan ikinci katman. */
.auth-brand::after {
    content: '';
    position: absolute;
    inset: -50% -20%;
    background: linear-gradient(
        100deg,
        transparent 42%,
        rgba(255, 255, 255, 0.07) 50%,
        transparent 58%
    );
    animation: auth-sweep 9s linear infinite;
    pointer-events: none;
}

@keyframes auth-sweep {
    0%   { transform: translateX(-60%); }
    100% { transform: translateX(60%); }
}

.auth-brand-inner {
    position: relative;
    max-width: 420px;
    text-align: center;
}

.auth-brand-logo {
    width: 140px;
    height: auto;
    margin-bottom: 26px;
    animation: auth-breathe 6s ease-in-out infinite;
}

@keyframes auth-breathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.02); }
}

.auth-brand-title {
    margin: 0 0 12px;
    font-size: 30px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #fff;
}

.auth-brand-text {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.72);
}

.auth-brand-foot {
    position: absolute;
    bottom: 24px;
    margin: 0;
    text-align: center;
    font-size: 12px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.4);
}

.auth-brand-vendor {
    display: block;
    font-size: 11px;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.3);
}

/* Panel footer'ındaki geliştirici adı — sürüm numarasının yanında. */
.footer-vendor {
    opacity: 0.75;
}

/* ---------------------- SAĞ: form ---------------------- */

.auth-panel {
    flex: 1 1 45%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    background-color: #fff;
}

.auth-box {
    width: 100%;
    max-width: 420px;
}

.auth-head {
    margin-bottom: 28px;
}

.auth-head h2 {
    margin: 0 0 6px;
    font-size: 26px;
    font-weight: 600;
    color: #0e1726;
}

.auth-head p {
    margin: 0;
    font-size: 14px;
    color: #888ea8;
}

/* Alanlar açılışta sırayla belirir; sırayı login.php'deki --i verir. */
.auth-field,
.auth-row {
    animation: auth-rise 0.45s cubic-bezier(0.22, 0.8, 0.3, 1) backwards;
    animation-delay: calc(var(--i, 1) * 60ms);
}

.auth-field {
    margin-bottom: 18px;
}

@keyframes auth-rise {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}

.auth-field > label {
    display: block;
    margin-bottom: 7px;
    font-size: 12.5px;
    font-weight: 600;
    color: #506690;
}

.auth-input-group {
    position: relative;
    display: flex;
    align-items: center;
}

.auth-input-icon {
    position: absolute;
    left: 14px;
    display: flex;
    color: #a3aed0;
    pointer-events: none;
    transition: color 0.18s ease;
}

.auth-input-group:focus-within .auth-input-icon {
    color: #5c7ba6;
}

.auth-input-group .form-control {
    height: 48px;
    padding: 0 44px;
    border: 1px solid #e0e6ed;
    border-radius: 10px;
    background-color: #fbfcfe;
    font-size: 14px;
    color: #0e1726;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.auth-input-group .form-control::placeholder {
    color: #c3ccdb;
}

.auth-input-group .form-control:focus {
    border-color: #5c7ba6;
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(92, 123, 166, 0.14);
}

.auth-pw-toggle {
    position: absolute;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #a3aed0;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.auth-pw-toggle:hover {
    background-color: #f1f4f9;
    color: #5c7ba6;
}

.auth-caps-warning {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 12px;
    color: #e2a03f;
}

.auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
    font-size: 13px;
}

/* Tek öge kaldığında (ör. yalnız "Şifremi unuttum") sağa yaslanır. */
.auth-row-end {
    justify-content: flex-end;
}

.auth-row .form-check-label {
    color: #506690;
    cursor: pointer;
}

/* "Giriş sayfasına dön" — forgot/reset sayfalarında formun altında. */
.auth-back {
    margin: 20px 0 0;
    text-align: center;
    font-size: 13px;
    animation: auth-rise 0.45s cubic-bezier(0.22, 0.8, 0.3, 1) backwards;
    animation-delay: calc(var(--i, 1) * 60ms);
}

/* reset_password.php: token doğrulanana kadar görünen bekleme durumu.
   login.js doğrulama bitince bunu gizleyip formu açar. */
.auth-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 32px 0;
    color: #888ea8;
}

.auth-loading .spinner-border {
    width: 28px;
    height: 28px;
    color: #5c7ba6;
}

.auth-loading p {
    margin: 0;
    font-size: 13px;
}

.auth-forgot-link {
    color: #5c7ba6;
    font-weight: 500;
    text-decoration: none;
}

.auth-forgot-link:hover {
    color: #2d3f5e;
    text-decoration: underline;
}

.auth-submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    border: 0;
    border-radius: 10px;
    background-image: linear-gradient(135deg, #2d3f5e, #5c7ba6);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease, opacity 0.15s ease;
}

.auth-submit-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(45, 63, 94, 0.3);
}

.auth-submit-btn:active:not(:disabled) {
    transform: translateY(0);
}

.auth-submit-btn:disabled {
    opacity: 0.65;
    cursor: default;
}

/* Hata mesajı belirince form kısa bir sarsıntı yapar: mesajı kaçıran
   kullanıcı bir şeyin ters gittiğini hareketten de anlar. */
.auth-box .alert:not(.d-none) {
    margin-bottom: 18px;
    border: 0;
    border-radius: 10px;
    font-size: 13.5px;
    animation: auth-shake 0.4s ease;
}

@keyframes auth-shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}

/* ------------------ Koyu tema (yalnız sağ panel) ------------------ */

.auth-dark .auth-page,
.auth-dark .auth-panel {
    background-color: #0e1726;
}

.auth-dark .auth-head h2 {
    color: #e0e6ed;
}

.auth-dark .auth-head p {
    color: #888ea8;
}

.auth-dark .auth-field > label {
    color: #a3aed0;
}

.auth-dark .auth-input-group .form-control {
    border-color: #1b2e4b;
    background-color: #1b2e4b;
    color: #e0e6ed;
}

.auth-dark .auth-input-group .form-control:focus {
    border-color: #5c7ba6;
    background-color: #172336;
}

.auth-dark .auth-input-group .form-control::placeholder {
    color: #506690;
}

.auth-dark .auth-pw-toggle:hover {
    background-color: #1b2e4b;
}

.auth-dark .auth-row .form-check-label {
    color: #a3aed0;
}

/* ---------------------- Dar ekran ---------------------- */

@media (max-width: 1024px) {
    /* İki panel bu genişlikten sonra sıkışıp okunmaz oluyor:
       marka paneli gizlenir, form tam genişliğe geçer. */
    .auth-brand {
        display: none;
    }

    .auth-panel {
        flex: 1 1 100%;
    }
}

/* ------------------ Hareket azaltma tercihi ------------------ */

@media (prefers-reduced-motion: reduce) {
    .auth-brand,
    .auth-brand::after,
    .auth-orb,
    .auth-brand-logo,
    .auth-field,
    .auth-row,
    .auth-box .alert:not(.d-none) {
        animation: none;
    }

    .auth-submit-btn:hover:not(:disabled) {
        transform: none;
    }
}

/* ==================================================================
   YETKİ MATRİSİ  (role_permission.php)
   ------------------------------------------------------------------
   Üç satır tipi birbirine karışmasın diye görsel olarak ayrıştırıldı:

     .pm-section  Bölüm başlığı (İNSAN KAYNAKLARI) — koyu, harf aralıklı,
                  tıklanmaz. Sadece ayraç.
     .pm-group    Modül (Personel) — TIKLANABİLİR, alt satırlarını açar.
                  Sol kenarında renkli şerit ve açılma oku var.
     .pm-child    Modülün alt sayfası — girintili, varsayılan gizli.
     .pm-single   Alt sayfası olmayan sayfa (Gösterge Paneli).
   ================================================================== */

/* --- Bölüm başlığı --- */

#permission-matrix .pm-section td,
#person-matrix .pm-section td {
    padding: 14px 16px 8px;
    border: 0;
    background: transparent;
    color: var(--x_7, #888ea8);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* --- Modül satırı --- */

#permission-matrix .pm-group > td,
#person-matrix .pm-group > td {
    background-color: #f5f7fa;
    border-top: 1px solid #e0e6ed;
    border-bottom: 1px solid #e0e6ed;
}

#permission-matrix .pm-group > td:first-child,
#person-matrix .pm-group > td:first-child {
    border-left: 3px solid #5c7ba6;
}

.pm-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.pm-chevron {
    display: inline-block;
    width: 14px;
    color: #5c7ba6;
    font-size: 16px;
    line-height: 1;
    transition: transform 0.18s ease;
}

.pm-toggle[aria-expanded="true"] .pm-chevron {
    transform: rotate(90deg);
}

/* İşaretli yetki sayısı — modül kapalıyken içeride ne olduğunu söyler.
   Sıfırsa soluk kalır ki dolu olanlar göze çarpsın. */
.pm-count {
    min-width: 20px;
    margin-left: auto;
    padding: 1px 7px;
    border-radius: 10px;
    background-color: #e0e6ed;
    color: #506690;
    font-size: 10.5px;
    font-weight: 700;
    text-align: center;
}

.pm-count.dolu {
    background-color: #5c7ba6;
    color: #fff;
}

/* --- Alt sayfa --- */

#permission-matrix .pm-child > td:first-child,
#person-matrix .pm-child > td:first-child {
    padding-left: 40px;
}

#permission-matrix .pm-child .pm-name,
#person-matrix .pm-child .pm-name {
    color: var(--x_7, #506690);
    font-size: 13px;
}

/* --- Koyu tema --- */

.dark #permission-matrix .pm-group > td,
.dark #person-matrix .pm-group > td {
    background-color: #1b2e4b;
    border-top-color: #1b2e4b;
    border-bottom-color: #1b2e4b;
}

.dark .pm-count {
    background-color: #253b5c;
    color: #a3aed0;
}

.dark .pm-count.dolu {
    background-color: #5c7ba6;
    color: #fff;
}

/* Modül satırında kutu yok; kalan sütunlar tek boş hücreyle doldurulur.
   (Modül anahtarı yetki öznesi değil — bkz. permission-matrix-rows.php) */
.pm-group-fill {
    background-color: inherit;
}

/* ==================================================================
   ROLLER VE YETKİLER — düzen iyileştirmeleri
   ------------------------------------------------------------------
   Önceki hâlin sorunları: modül satırlarının sağı bomboştu (tablo
   yarım kalmış gibi duruyordu), işlem sütunları çok geniş olduğu için
   kutular başlıklarından kopuyordu, rol listesi sıkışıktı ve Kaydet
   düğmesi uzun listede ekrandan çıkıyordu.
   ================================================================== */

/* ---------------------- Rol listesi ---------------------- */

.rp-roles-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.rp-roles-head h6 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
}

.rp-roles-count {
    padding: 1px 9px;
    border-radius: 10px;
    background-color: #e8edf5;
    color: #506690;
    font-size: 11px;
    font-weight: 700;
}

.rp-role {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    padding: 11px 12px;
    border: 1px solid #e8edf5;
    border-left: 3px solid transparent;
    border-radius: 9px;
    background-color: #fff;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.rp-role:last-of-type {
    margin-bottom: 0;
}

.rp-role:hover {
    background-color: #f6f8fc;
    border-color: #d8e1ee;
}

/* Aktif rol: dolu mavi blok yerine sol şerit + hafif zemin.
   Blok hâli listedeki diğer rolleri bastırıyordu. */
.rp-role.active {
    background-color: #eef3fb;
    border-color: #d3e0f4;
    border-left-color: #5c7ba6;
}

.rp-role-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.rp-role-name {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 600;
    color: #0e1726;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rp-role.active .rp-role-name {
    color: #2d3f5e;
}

.rp-role-sys {
    flex-shrink: 0;
    padding: 1px 6px;
    border-radius: 4px;
    background-color: #fff4e0;
    color: #c78d20;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.rp-role-meta {
    font-size: 11.5px;
    color: #96a0b5;
}

/* Silme düğmesi yalnız üstüne gelince görünür: her satırda durunca
   listeyi gürültülü gösteriyordu. */
.rp-role .role-delete {
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.rp-role:hover .role-delete,
.rp-role .role-delete:focus-visible {
    opacity: 1;
}

.rp-role-add {
    margin-top: 14px;
}

/* ---------------------- Üst şerit ---------------------- */

.rp-bar {
    position: sticky;
    /* 92px = sabit ust barin yuksekligi (olculdu: 91.8). Daha kucuk
       verilince serit navbar'in arkasina giriyor ve Kaydet dugmesi
       kayboluyordu. */
    top: 92px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: -20px -24px 16px;
    padding: 16px 24px;
    background-color: #fff;
    border-bottom: 1px solid #e8edf5;
}

.rp-bar-title h6 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #0e1726;
}

.rp-bar-sub {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: #96a0b5;
}

/* ---------------------- Sistem rolü uyarısı ---------------------- */

.rp-notice {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 16px;
    padding: 11px 14px;
    border-radius: 9px;
    background-color: #fff8ec;
    color: #a9761a;
    font-size: 13px;
}

.rp-notice svg {
    flex-shrink: 0;
}

/* ---------------------- Matris ---------------------- */

#permission-matrix,
#person-matrix {
    margin-bottom: 0;
}

/* İşlem sütunları dar: geniş bırakılınca kutular başlıklarından
   kopuyor, hangi kutunun hangi sütuna ait olduğu okunmuyordu. */
#permission-matrix th:not(:first-child),
#permission-matrix td:not(:first-child),
#person-matrix th:not(:first-child),
#person-matrix td:not(:first-child) {
    width: 92px;
    padding-left: 4px;
    padding-right: 4px;
}

#permission-matrix th:first-child,
#person-matrix th:first-child {
    min-width: 240px;
}

/* Sütun başlıkları kaydırırken görünür kalsın — matris uzun. */
#permission-matrix thead th,
#person-matrix thead th {
    position: sticky;
    /* 92 (sabit ust bar) + 74 (yapiskan serit) = 166. Ikisinin altina
       yapissin ki ne navbar'a girsin ne de seridin altinda kalsin. */
    top: 166px;
    z-index: 2;
    background-color: #f6f8fc;
    border-bottom: 1px solid #e8edf5;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #6b7a90;
}

#permission-matrix tbody tr:not(.pm-group):not(.pm-section):hover > td,
#person-matrix tbody tr:not(.pm-group):not(.pm-section):hover > td {
    background-color: #f8fafd;
}

/* Modül satırı tek hücreye yayıldı: sağdaki boşluk artık "4 sayfa"
   bilgisi ve sayaçla dolu. */
.pm-toggle {
    padding: 2px 0;
}

.pm-pages {
    margin-left: 10px;
    font-size: 11.5px;
    font-weight: 400;
    color: #96a0b5;
}

/* Sayaç modül adının YANINDA durur. Sağa yaslandığında "Onayla"
   sütununun altına denk gelip o sütuna ait bir değer gibi okunuyordu. */
.pm-count {
    margin-left: 10px;
}

/* Toggle tüm satırı kaplar ki modülün herhangi bir yerine tıklamak açsın,
   ama içerik sola toplanır. */
.pm-toggle {
    justify-content: flex-start;
}

/* ---------------------- Koyu tema ---------------------- */

.dark .rp-roles-count { background-color: #253b5c; color: #a3aed0; }

.dark .rp-role {
    border-color: #1b2e4b;
    background-color: #0e1726;
}

.dark .rp-role:hover { background-color: #172336; border-color: #253b5c; }

.dark .rp-role.active {
    background-color: #172336;
    border-color: #253b5c;
    border-left-color: #5c7ba6;
}

.dark .rp-role-name        { color: #e0e6ed; }
.dark .rp-role.active .rp-role-name { color: #fff; }
.dark .rp-role-meta        { color: #607192; }
.dark .rp-role-sys         { background-color: #3d3115; color: #e2a03f; }

.dark .rp-bar {
    background-color: #0e1726;
    border-bottom-color: #1b2e4b;
}

.dark .rp-bar-title h6 { color: #e0e6ed; }
.dark .rp-bar-sub      { color: #607192; }

.dark .rp-notice {
    background-color: #2b2413;
    color: #e2a03f;
}

.dark #permission-matrix thead th,
.dark #person-matrix thead th {
    background-color: #1b2e4b;
    border-bottom-color: #1b2e4b;
    color: #a3aed0;
}

.dark #permission-matrix tbody tr:not(.pm-group):not(.pm-section):hover > td,
.dark #person-matrix tbody tr:not(.pm-group):not(.pm-section):hover > td {
    background-color: #172336;
}

.dark .pm-pages { color: #607192; }

/* Geniş ekranda .table-responsive'in overflow'u kaldırılır: overflow
   içeren bir ata, içindeki position:sticky'nin sayfa kaydırmasına göre
   çalışmasını engelliyor — başlık satırı yapışmıyordu. Matris geniş
   ekranda zaten taşmıyor (240px + 5×92px). Dar ekranda overflow durur,
   yatay kaydırma korunur; orada başlık yapışmaz, o kabul edilebilir. */
@media (min-width: 992px) {
    .rp-matrix-wrap {
        overflow: visible;
    }
}

/* Kişi Bazlı şeridinde iki düğme var. */
.rp-bar-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* Kişi listesi de rol listesiyle aynı dilde olsun. */
#user-list .list-group-item {
    margin-bottom: 6px;
    border: 1px solid #e8edf5;
    border-left: 3px solid transparent;
    border-radius: 9px;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

#user-list .list-group-item:hover {
    background-color: #f6f8fc;
    border-color: #d8e1ee;
}

#user-list .list-group-item.active {
    background-color: #eef3fb;
    border-color: #d3e0f4;
    border-left-color: #5c7ba6;
    color: inherit;
}

.dark #user-list .list-group-item {
    border-color: #1b2e4b;
    background-color: #0e1726;
}

.dark #user-list .list-group-item:hover  { background-color: #172336; border-color: #253b5c; }
.dark #user-list .list-group-item.active { background-color: #172336; border-color: #253b5c; border-left-color: #5c7ba6; }

/* ==================================================================
   PERFORMANS DEĞERLENDİRME FORMU  (modal)
   ------------------------------------------------------------------
   Bu sınıflar performance_review.js tarafından üretiliyordu ama
   karşılığında HİÇ CSS yoktu; form tarayıcının varsayılan görünümüyle
   çıkıyordu. 1-5 puan düğmeleri sıradan küçük kutucuklar gibi
   duruyordu, sorular birbirine akıyordu.
   ================================================================== */

/* ---------------------- Üst bilgi kartı ---------------------- */

#review-form-body .detail-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px 20px;
    padding: 16px 18px;
    border-radius: 10px;
    background-color: #f6f8fc;
}

@media (max-width: 720px) {
    #review-form-body .detail-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

#review-form-body .detail-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #96a0b5;
}

#review-form-body .detail-value {
    margin-top: 3px;
    font-size: 13.5px;
    font-weight: 600;
    color: #0e1726;
}

/* ---------------------- Kategori ---------------------- */

.perf-category-block {
    margin-top: 22px;
}

.perf-category-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 2px 8px;
    border-bottom: 2px solid #e8edf5;
}

.perf-category-header h6 {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #5c7ba6;
}

/* ---------------------- Soru ---------------------- */

.perf-question-block {
    padding: 14px 0;
    border-bottom: 1px solid #f0f3f8;
}

.perf-question-block:last-child {
    border-bottom: 0;
}

.perf-question-text {
    margin-bottom: 10px;
    font-size: 13.5px;
    line-height: 1.6;
    color: #3b3f5c;
}

.perf-question-controls {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

/* ---------------------- 1-5 PUAN SEÇİCİ ----------------------
   Asıl sorun buydu: düğmeler stilsizdi, tıklanabilir bir skala gibi
   durmuyordu. Artık bölmeli bir kontrol; seçili olan renkle dolar ve
   renk puanın anlamını taşır (düşük kırmızı → yüksek yeşil). */

.perf-score-group {
    display: inline-flex;
    gap: 6px;
    flex-shrink: 0;
}

.perf-score-btn {
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1.5px solid #e0e6ed;
    border-radius: 9px;
    background-color: #fff;
    color: #8a94a6;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
}

.perf-score-btn:hover:not(:disabled) {
    border-color: #5c7ba6;
    color: #2d3f5e;
    transform: translateY(-1px);
}

.perf-score-btn:disabled {
    opacity: 0.55;
    cursor: default;
}

/* Seçili puan — renk skalası anlamı görünür kılar. */
.perf-score-btn.active                    { color: #fff; border-color: transparent; }
.perf-score-btn.active[data-score="1"]    { background-color: #e7515a; }
.perf-score-btn.active[data-score="2"]    { background-color: #e2833f; }
.perf-score-btn.active[data-score="3"]    { background-color: #e2a03f; }
.perf-score-btn.active[data-score="4"]    { background-color: #5c9c6a; }
.perf-score-btn.active[data-score="5"]    { background-color: #3f9e5c; }

/* ---------------------- Yönetici notu ----------------------
   Her soruda tam boy metin kutusu vardı; 12 soruda modal
   okunamayacak kadar uzuyordu. Tek satırla başlar, odaklanınca açılır. */

.perf-note-input {
    flex: 1;
    min-width: 220px;
    height: 38px;
    padding: 8px 12px;
    border: 1px solid #e0e6ed;
    border-radius: 9px;
    background-color: #fbfcfe;
    font-size: 13px;
    line-height: 20px;
    resize: none;
    /* Tek satırlık yükseklikte metin taşarsa kaydırma çubuğu beliriyor ve
       alanın sağında ok işaretleri gibi duruyordu. Kapalıyken gizli,
       açılınca gerekirse görünür. */
    overflow: hidden;
    transition: height 0.18s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.perf-note-input:focus {
    height: 76px;
    overflow-y: auto;
    border-color: #5c7ba6;
    background-color: #fff;
    outline: 0;
}

/* ---------------------- X-Factor ---------------------- */

.perf-xfactor-block .perf-category-header h6 {
    color: #a9761a;
}

.perf-xfactor-toggle {
    display: inline-flex;
    gap: 8px;
}

.perf-xfactor-btn {
    min-width: 74px;
    height: 38px;
    padding: 0 16px;
    border: 1.5px solid #e0e6ed;
    border-radius: 9px;
    background-color: #fff;
    color: #8a94a6;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.perf-xfactor-btn:hover:not(:disabled) {
    border-color: #5c7ba6;
}

.perf-xfactor-btn:disabled {
    opacity: 0.55;
    cursor: default;
}

.perf-xfactor-btn.active.yes {
    background-color: #3f9e5c;
    border-color: transparent;
    color: #fff;
}

.perf-xfactor-btn.active.no {
    background-color: #8a94a6;
    border-color: transparent;
    color: #fff;
}

/* ---------------------- Nihai puan ---------------------- */

.perf-score-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 22px;
    padding: 16px 20px;
    border-radius: 12px;
    background-image: linear-gradient(135deg, #2d3f5e, #5c7ba6);
    color: #fff;
}

.perf-score-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.8;
}

.perf-score-value {
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
}

/* Kaç sorunun puanlandığı — tamamlamadan önce eksik varsa görünsün. */
.perf-progress {
    margin-top: 4px;
    font-size: 11.5px;
    opacity: 0.75;
}

.perf-progress.eksik {
    color: #ffd98a;
    opacity: 1;
}

/* ---------------------- Koyu tema ---------------------- */

.dark #review-form-body .detail-grid { background-color: #1b2e4b; }
.dark #review-form-body .detail-value { color: #e0e6ed; }
.dark .perf-category-header { border-bottom-color: #1b2e4b; }
.dark .perf-question-block  { border-bottom-color: #172336; }
.dark .perf-question-text   { color: #a3aed0; }

.dark .perf-score-btn,
.dark .perf-xfactor-btn {
    border-color: #1b2e4b;
    background-color: #0e1726;
    color: #808ea4;
}

.dark .perf-score-btn:hover:not(:disabled),
.dark .perf-xfactor-btn:hover:not(:disabled) {
    border-color: #5c7ba6;
    color: #e0e6ed;
}

.dark .perf-score-btn.active { color: #fff; }

.dark .perf-note-input {
    border-color: #1b2e4b;
    background-color: #1b2e4b;
    color: #e0e6ed;
}

.dark .perf-note-input:focus { background-color: #172336; }

/* ==================================================================
   RAPORLAR
   Personel / İzin / Bordro rapor ekranlarının ortak parçaları:
   filtre çubuğu ve dağılım kartları.
   ================================================================== */

/* Suzgec kutusu: icerik ust ve alt kenara yapisiyordu; asagidaki
   ozet kartlari 22px nefes payiyla dururken bu serit sikisik
   goruntuyle onlarin uzerinde duruyordu. */
.rp-filter-bar {
    padding: 20px 24px;
}

.rp-filter-bar .form-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #888ea8;
    margin-bottom: 6px;
}

/* Ortak seritte etiketler oteki ekranlardaki gibi kucuk harftir:
   raporlar tek basina BUYUK HARF kullaniyordu. */
.rp-filter-bar .hr-filterbar .form-label {
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: 4px;
}

.rp-filter-bar .hr-filterbar { margin-bottom: 0; }

/* Suzgeclerin altindaki aciklama seridi. Ince ust cizgi formla
   arasina sinir koyar: onceden metin dogrudan girdilerin dibine
   yapisiyor ve karta ait olmayan bir satir gibi duruyordu. */
.rp-filter-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid #e0e6ed;
    font-size: 13px;
    color: #888ea8;
}

.rp-filter-note svg {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    margin-top: 1px;
}

.rp-filter-note strong { color: #3b3f5c; font-weight: 600; }
.rp-filter-note a      { color: var(--primary_500); text-decoration: underline; }

body.dark .rp-filter-note        { border-top-color: var(--dark_600); }
body.dark .rp-filter-note strong { color: #e0e6ed; }

.rp-dist-card {
    display: flex;
    flex-direction: column;
}

.rp-dist-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e0e6ed;
}

.rp-dist-list {
    list-style: none;
    margin: 0;
    padding: 0;
    /* Dağılım uzun olabilir (departman sayısı sınırsız); kart
       komşularıyla aynı yükseklikte kalsın diye kendi içinde kayar. */
    max-height: 232px;
    overflow-y: auto;
}

.rp-dist-item + .rp-dist-item {
    margin-top: 12px;
}

.rp-dist-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 5px;
    font-size: 13px;
}

.rp-dist-label {
    /* Uzun departman adı satırı taşırmasın; tam adı title'da duruyor. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    color: #515365;
}

.rp-dist-value {
    flex: none;
    font-weight: 600;
    color: #0e1726;
}

.rp-dist-track {
    height: 6px;
    border-radius: 3px;
    background: #ebedf2;
    overflow: hidden;
}

.rp-dist-fill {
    height: 100%;
    border-radius: 3px;
    /* Sıfıra çok yakın oranlar da görünsün. */
    min-width: 2px;
    transition: width .3s ease;
}

.rp-dist-fill-primary { background: #4361ee; }
.rp-dist-fill-info    { background: #2196f3; }
.rp-dist-fill-success { background: #00ab55; }
.rp-dist-fill-warning { background: #e2a03f; }
.rp-dist-fill-danger  { background: #e7515a; }

.dark .rp-dist-title  { border-bottom-color: #1b2e4b; }
.dark .rp-dist-label  { color: #888ea8; }
.dark .rp-dist-value  { color: #e0e6ed; }

/* ==================================================================
   HEDEFLER
   Hedefler tablo yerine kart olarak listelenir: başlık, ölçü ve
   ilerleme çubuğu bir arada okunmalı.
   ================================================================== */

.goal-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Geciken hedef kartın kendisinden belli olsun; çubuğun rengine
   bakmak için kartı taramak gerekmesin. */
.goal-card-overdue {
    box-shadow: inset 3px 0 0 0 #e7515a;
}

.goal-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.goal-card-titles {
    min-width: 0;
}

.goal-title {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 2px;
    /* Uzun hedef başlığı kartı büyütmesin; tam metin title'da. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.goal-owner {
    font-size: 12px;
    color: #888ea8;
}

.goal-desc {
    font-size: 13px;
    color: #515365;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.goal-progress-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    font-size: 13px;
}

.goal-values {
    color: #515365;
}

.goal-percent {
    font-weight: 700;
    font-size: 15px;
}

.goal-track {
    height: 8px;
    border-radius: 4px;
    background: #ebedf2;
    overflow: hidden;
}

.goal-fill {
    height: 100%;
    border-radius: 4px;
    min-width: 2px;
    transition: width .3s ease;
}

.goal-fill-success { background: #00ab55; }
.goal-fill-info    { background: #2196f3; }
.goal-fill-warning { background: #e2a03f; }
.goal-fill-danger  { background: #e7515a; }

.goal-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.goal-chip {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 10px;
    background: #f1f2f3;
    color: #515365;
    white-space: nowrap;
}

.goal-chip-danger  { background: #fbeced; color: #e7515a; }
.goal-chip-success { background: #ddf5f0; color: #00ab55; }

.goal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    /* Kart yükseklikleri eşitken düğmeler hep altta hizalı dursun. */
    margin-top: auto;
    padding-top: 4px;
}

.dark .goal-owner  { color: #888ea8; }
.dark .goal-desc,
.dark .goal-values { color: #888ea8; }
.dark .goal-track  { background: #1b2e4b; }
.dark .goal-chip   { background: #1b2e4b; color: #888ea8; }

/* ==================================================================
   EKSİK EVRAK PANELİ
   Yedi evrak adını virgülle yan yana basmak satırı okunmaz hale
   getiriyordu: artık ilerleme + etiket, gerisi katlanıyor.
   ================================================================== */

.doc-emp-link { color: inherit; text-decoration: none; }
.doc-emp-link:hover .fw-semibold { color: #4361ee; text-decoration: underline; }

.doc-emp-sub {
    font-size: .78rem;
    color: #888ea8;
    margin-top: 1px;
}

.doc-progress-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 5px;
}

.doc-progress-count {
    font-size: .82rem;
    font-weight: 600;
    color: #515365;
    white-space: nowrap;
}

.doc-missing-badge {
    font-size: .72rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
}

.doc-missing-danger  { background: #fbeced; color: #e7515a; }
.doc-missing-warning { background: #fcf5e9; color: #e2a03f; }
.doc-missing-success { background: #ddf5f0; color: #00ab55; }

.doc-track {
    height: 5px;
    border-radius: 3px;
    background: #ebedf2;
    overflow: hidden;
}

.doc-fill {
    height: 100%;
    border-radius: 3px;
    transition: width .3s ease;
}

.doc-fill-danger  { background: #e7515a; }
.doc-fill-warning { background: #e2a03f; }
.doc-fill-success { background: #00ab55; }

.doc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
}

.doc-chip {
    font-size: .72rem;
    line-height: 1.35;
    padding: 3px 8px;
    border-radius: 10px;
    background: #f1f2f3;
    color: #515365;
    /* Uzun evrak adı satırı patlatmasın; tamamı title'da. */
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* İlk üçten sonraki etiketler gizli başlar. Aç/kapa düğmesi akışın
   EN SONUNDADIR: <details> ile yapıldığında <summary> her zaman görünür
   kaldığı için açılınca etiketlerin ortasında takılı kalıyordu. */
.doc-chip-extra { display: none; }
.doc-chips.is-open .doc-chip-extra { display: inline-block; }

.doc-toggle {
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.35;
    padding: 3px 8px;
    border: 0;
    border-radius: 10px;
    background: #e9eaf0;
    color: #4361ee;
    cursor: pointer;
    white-space: nowrap;
}

.doc-toggle:hover { background: #dfe2ee; }

.doc-toggle:focus-visible {
    outline: 2px solid #4361ee;
    outline-offset: 1px;
}

.dark .doc-emp-sub        { color: #888ea8; }
.dark .doc-progress-count { color: #e0e6ed; }
.dark .doc-track          { background: #1b2e4b; }
.dark .doc-chip           { background: #1b2e4b; color: #888ea8; }
.dark .doc-toggle         { background: #1b2e4b; color: #6d8eff; }
.dark .doc-toggle:hover   { background: #22375a; }

/* ==================================================================
   TAKVİM — araç çubuğu
   FullCalendar bootstrap5 temasıyla çalışıyor, yani düğmeler zaten
   uygulamanın .btn sınıflarını alıyor. İki sorun vardı: ok ikonları
   Bootstrap Icons fontuna bağlıydı (bu projede yüklü değil, düğmeler
   boş mavi bloklar olarak çıkıyordu) ve hepsi dolu mavi olduğu için
   araç çubuğu ekranın geri kalanına göre ağır duruyordu.
   ================================================================== */

/* DİKKAT — sınıf adları: bootstrap5 temasıyla FullCalendar düğmelere
   kendi "fc-button" sınıfını DEĞİL, doğrudan Bootstrap'in "btn btn-primary"
   sınıflarını verir. İlk denemede .fc-button hedeflenmişti ve hiçbir kural
   tutmamıştı. Seçiciler #dashboard-calendar üzerinden yazılır: temanın
   kendi .btn-primary kuralını yenecek özgüllük gerekiyor. */

/* Eksik ok ikonları: fonta bağlanmak yerine SVG maskesi — rengi
   currentColor'dan alır, koyu temada da doğru görünür. */
#dashboard-calendar .fc-header-toolbar .bi-chevron-left,
#dashboard-calendar .fc-header-toolbar .bi-chevron-right {
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: -3px;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 16px 16px;
    mask-size: 16px 16px;
}

#dashboard-calendar .fc-header-toolbar .bi-chevron-left {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E");
}

#dashboard-calendar .fc-header-toolbar .bi-chevron-right {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
}

/* Ölçüler uygulamanın btn-sm'iyle aynı hizada. */
#dashboard-calendar .fc-header-toolbar .btn {
    font-size: 14px;
    font-weight: 500;
    padding: 8px 14px;
    line-height: 1.4;
    box-shadow: none;
}

/* Gezinme ve "Bugün" ikincil eylemdir: dolu mavi yerine çerçeveli.
   Dolu mavi yalnız SEÇİLİ görünüme kalır, böylece hangi görünümde
   olunduğu bir bakışta belli olur. */
#dashboard-calendar .fc-header-toolbar .btn-primary,
#dashboard-calendar .fc-header-toolbar .btn-primary:disabled {
    background-color: #fff;
    background-image: none;
    border: 1px solid #e0e6ed;
    color: #515365;
}

#dashboard-calendar .fc-header-toolbar .btn-primary:hover:not(:disabled) {
    background-color: #f1f2f3;
    border-color: #d3d9e2;
    color: #0e1726;
}

#dashboard-calendar .fc-header-toolbar .btn-primary:disabled { opacity: .5; }

#dashboard-calendar .fc-header-toolbar .btn-primary.active,
#dashboard-calendar .fc-header-toolbar .btn-primary:not(:disabled):active {
    background-color: #4361ee;
    border-color: #4361ee;
    color: #fff;
}

#dashboard-calendar .fc-header-toolbar .btn-primary:focus {
    box-shadow: 0 0 0 2px rgba(67, 97, 238, .25);
}

/* Ok düğmeleri kare dursun. */
#dashboard-calendar .fc-prev-button,
#dashboard-calendar .fc-next-button { padding: 8px 12px; }

/* Başlık uygulamanın bölüm başlığı ölçüsünde. */
#dashboard-calendar .fc-toolbar-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #0e1726;
}

#dashboard-calendar .fc-toolbar.fc-header-toolbar {
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 10px;
}

/* Gün başlıkları ve hücreler: tablo başlıklarıyla aynı dil. */
#dashboard-calendar .fc-col-header-cell-cushion {
    font-size: .8rem;
    font-weight: 600;
    color: #888ea8;
    padding: 8px 4px;
    text-decoration: none;
}

#dashboard-calendar .fc-daygrid-day-number {
    font-size: .82rem;
    color: #515365;
    text-decoration: none;
}

#dashboard-calendar .fc-day-today { background: #f1f5ff !important; }

#dashboard-calendar .fc-event {
    border: 0;
    border-radius: 5px;
    padding: 2px 6px;
    font-size: .75rem;
    font-weight: 500;
    cursor: pointer;
}

.dark #dashboard-calendar .fc-header-toolbar .btn-primary,
.dark #dashboard-calendar .fc-header-toolbar .btn-primary:disabled {
    background-color: #1b2e4b;
    border-color: #1b2e4b;
    color: #888ea8;
}

.dark #dashboard-calendar .fc-header-toolbar .btn-primary:hover:not(:disabled) {
    background-color: #22375a;
    color: #e0e6ed;
}

/* Seçili görünüm koyu temada da AYRIŞMALI. Bu kural olmadan, yukarıdaki
   koyu .btn-primary kuralı ile açık temanın .btn-primary.active kuralı
   aynı özgüllükte kalıyor ve sonra gelen (koyu) kazanıyordu: dört
   görünüm düğmesi de aynı renge düşüp hangisinde olduğun kayboluyordu. */
.dark #dashboard-calendar .fc-header-toolbar .btn-primary.active,
.dark #dashboard-calendar .fc-header-toolbar .btn-primary:not(:disabled):active {
    background-color: #4361ee;
    border-color: #4361ee;
    color: #fff;
}

.dark #dashboard-calendar .fc-toolbar-title      { color: #e0e6ed; }
.dark #dashboard-calendar .fc-daygrid-day-number { color: #888ea8; }
.dark #dashboard-calendar .fc-day-today          { background: #1b2e4b !important; }

/* Hatırlatıcı tür etiketi: rengi kaydın kendi renginden alır, ama
   dolgu yerine soluk zemin + koyu yazı — tablodaki diğer rozetlerle
   aynı ağırlıkta dursun diye. */
.rm-type {
    display: inline-block;
    font-size: .75rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 10px;
    white-space: nowrap;
}

/* ==================================================================
   TAKVİM — OLAY TÜRLERİ
   Renk tek başına yetmiyordu: doğum günü ile etkinlik aynı yeşildi,
   pasta emojisi de başlık metnine gömülü olduğu için okunmuyordu.
   Artık her tür kendi ikonunu ::before ile basar — boyutu buradan
   ayarlanabilir ve başlık metnini kirletmez.
   ================================================================== */

#dashboard-calendar .fc-ev .fc-event-title::before,
#dashboard-calendar .fc-ev .fc-event-title-container::before {
    display: inline-block;
    margin-right: 5px;
    font-size: 13px;
    line-height: 1;
    vertical-align: -1px;
}

#dashboard-calendar .fc-ev-birthday .fc-event-title::before { content: '🎂'; font-size: 14px; }
#dashboard-calendar .fc-ev-holiday  .fc-event-title::before { content: '🏛'; }
#dashboard-calendar .fc-ev-reminder .fc-event-title::before { content: '🔔'; }
#dashboard-calendar .fc-ev-event    .fc-event-title::before { content: '📅'; }
#dashboard-calendar .fc-ev-task     .fc-event-title::before { content: '✓'; font-weight: 700; }

/* Doğum günü artık ayrı bir renkte (pembe): yeşil hem etkinlikte hem
   doğum gününde kullanılıyordu ve ikisi ayırt edilemiyordu. */
#dashboard-calendar .fc-ev {
    padding: 3px 7px;
    font-size: .76rem;
    font-weight: 500;
    border-radius: 5px;
    border: 0;
}

#dashboard-calendar .fc-ev .fc-event-title {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Takvim altı açıklama şeridi ------------------------------------
   "Neyin ne olduğu" ikona bakıp tahmin etmeye bırakılmamalı. */
.cal-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #e0e6ed;
}

.cal-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .78rem;
    color: #515365;
    white-space: nowrap;
}

.cal-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex: none;
}

.dark .cal-legend      { border-top-color: #1b2e4b; }
.dark .cal-legend-item { color: #888ea8; }

/* ==================================================================
   HATIRLATICI MODALI
   ================================================================== */

/* Tür seçimi + renk noktası yan yana: seçilen türün takvimde hangi
   renkte görüneceği kaydetmeden önce belli olsun. */
.rm-type-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rm-type-row .form-select { flex: 1; }

/* Tema .form-text'i BEYAZ yapiyor (koyu zeminler icin) — beyaz modal
   uzerinde metin tamamen gorunmez oluyordu; yalnizca kendi rengi olan
   baglanti okunuyordu. Renk ve hizalama burada acikca verilir. */
#reminderModal .form-text {
    display: block;
    text-align: left;
    margin-top: 6px;
    font-size: .78rem;
    color: #888ea8;
}

.dark #reminderModal .form-text { color: #888ea8; }

.rm-color-dot {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    flex: none;
    background: #1b55e2;
    transition: background .2s ease;
}

/* Tekrar bloğu: anahtar ve "ayın günü" alanı aynı satırda dursun,
   açılınca modal zıplamasın. */
.rm-repeat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    background: #f1f2f3;
    border-radius: 8px;
    padding: 12px 14px;
}

.rm-repeat-day {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rm-repeat-day .form-control {
    width: 76px;
    text-align: center;
}

.rm-repeat-day .form-label {
    font-size: .82rem;
    white-space: nowrap;
    color: #515365;
}

.dark .rm-repeat                { background: #1b2e4b; }
.dark .rm-repeat-day .form-label { color: #888ea8; }

/* ==================================================================
   PANEL DÜZENİ EKRANI
   ================================================================== */

.dl-durum { font-size: .82rem; }
.dl-durum-ozel { color: #00ab55; font-weight: 600; }
.dl-durum-vars { color: #888ea8; }

.dl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

/* Kartın tamamı etiket: kutucuğu tam isabet ettirmek zorunda kalmadan
   seçilebilsin. */
.dl-card {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 14px;
    border: 1px solid #e0e6ed;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
    margin: 0;
}

.dl-card:hover { border-color: #c3ccd8; }

.dl-card.is-on {
    border-color: #4361ee;
    background: #f5f7ff;
}

.dl-card .form-check-input { margin-top: 3px; flex: none; }

.dl-card-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.dl-card-title { font-weight: 600; font-size: .88rem; color: #0e1726; }

.dl-card-desc {
    font-size: .76rem;
    color: #888ea8;
    line-height: 1.4;
}

.dl-card-meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; }

.dl-chip {
    font-size: .68rem;
    padding: 2px 7px;
    border-radius: 9px;
    background: #f1f2f3;
    color: #515365;
    white-space: nowrap;
}

.dl-chip-perm    { background: #fcf5e9; color: #e2a03f; }
.dl-chip-open    { background: #ddf5f0; color: #00ab55; }
.dl-chip-default { background: #eaf1ff; color: #4361ee; }

.dark .dl-card         { border-color: #1b2e4b; }
.dark .dl-card.is-on   { background: #1b2e4b; border-color: #4361ee; }
.dark .dl-card-title   { color: #e0e6ed; }
.dark .dl-chip         { background: #1b2e4b; color: #888ea8; }

/* ==========================================================================
   GÖSTERGE PANELİ — STANDART BİLEŞEN ÖLÇÜSÜ
   --------------------------------------------------------------------------
   Her bileşen aynı yükseklikte biter; içerik ona uyar. Önceden her kutu
   kendi içeriği kadar uzuyordu, bu yüzden yan yana duran "Departman
   Dağılımı" ile "Aylık İşe Giriş Trendi" farklı boyda bitiyordu.

   Yükseklik katalogda seçilir (config/widgets.php → 'height'):
     standard  varsayılan kutu
     tall      takvim gibi gerçekten yer isteyen bileşen
     auto      özet kartları gibi kutusu olmayan şerit

   Grafik yükseklikleri controller/Ajax/dashboard.js içindeki CHART_H /
   CAL_H sabitlerinden gelir — buradaki ölçüyü değiştirirsen onları da
   değiştir, yoksa grafik kutuyu taşırır ya da altında boşluk kalır.
   ========================================================================== */

.dash-w {
    display: flex;
}

/* Sutun bir flex kabi; icindeki HER SEY tam genislik almali. Yalniz
   .widget'a verilseydi, kendi izgarasini tasiyan bilesenler (ozet
   kartlari bir .row tasir) icerigi kadar daralirdi -- kartlar panonun
   yarisinda kaliyordu. */
.dash-w > * {
    width: 100%;
    min-width: 0;
}

/* ...ama KENDI IZGARASINI tasiyan bilesen (ozet kartlari bir .row
   tasir) bunun disindadir. Bootstrap satiri, sutunun ic bosluğunu
   negatif kenar boslugu ile geri alir; width:100% olcuyu sutunun
   IC kutusuna (1440) sabitledigi icin satir sola 12px kayiyor ama
   saga genisleyemiyordu. Sonuc: ozet seridi soldan hizali, SAGDAN
   24px kisa -- alttaki kutularla ayni cizgide bitmiyordu.

   Cozum width:auto DEGIL (.dash-w bir flex kabi; auto genislik
   iceriğe gore kucultur, kartlar 336px'ten 180px'e dustu),
   flex:1 1 auto: flex yerlesimi negatif kenar bosluklarini hesaba
   katarak satiri 1464'e buyutur ve sag kenar altiyla ayni cizgide
   biter (olculdu: son kart 1800, altindaki kutu 1800). */
.dash-w > .row {
    width: auto;
    flex: 1 1 auto;
}

.dash-w > .widget {
    display: flex;
    flex-direction: column;
}

.dash-w-standard > .widget { height: 440px; }
.dash-w-tall     > .widget { height: 800px; }

/* Başlık sabit kalır, gövde esner. min-height:0 olmadan flex çocuğu
   kendi içeriğinden kısalmaz ve kaydırma yerine taşma olur. */
.dash-w > .widget > .widget-heading {
    flex: 0 0 auto;
}

.dash-w > .widget > .widget-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* Uzun tablo kendi içinde kayarken başlık satırı görünür kalsın. */
.dash-w > .widget > .widget-content thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #fff;
}

body.dark .dash-w > .widget > .widget-content thead th {
    background: #0e1726;
}

/* Dar ekranda sabit yükseklik içeriği ezer; kutular zaten alt alta
   dizildiği için hizalama derdi de kalmaz. */
@media (max-width: 991px) {
    .dash-w-standard > .widget,
    .dash-w-tall     > .widget {
        height: auto;
        min-height: 0;
    }
}

/* ==========================================================================
   PANEL DÜZENİ — MAKET
   --------------------------------------------------------------------------
   Sağdaki maket, panoyu ölçekli olarak gösterir: kutu genişlikleri gerçek
   ızgara oranıdır, satırlara bölme kuralı core/dashboard_layout.php
   içindeki dashboard_widget_rows() ile aynıdır. "Hangi bileşen" sorusunu
   soldaki kartlar, "panelin neresinde" sorusunu bu maket cevaplar.
   ========================================================================== */

.dl-prev-wrap {
    position: sticky;
    top: 90px;
}

.dl-prev-hint {
    font-size: 12px;
    color: #888ea8;
    margin-bottom: 14px;
}

.dl-prev {
    background: #f1f2f3;
    border-radius: 8px;
    padding: 8px;
    max-height: 560px;
    overflow-y: auto;
}

.dl-prev-row {
    display: flex;
    gap: 6px;
    margin-bottom: 6px;
}

.dl-prev-box {
    /* flex-basis satir ici stille verilir (gerçek ızgara oranı). */
    min-width: 0;
    background: #fff;
    border: 1px solid #e0e6ed;
    border-left: 3px solid #4361ee;
    border-radius: 6px;
    padding: 8px 8px 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Panodaki yükseklik farkı makette de görünsün. */
.dl-prev-h-standard { min-height: 74px; }
.dl-prev-h-tall     { min-height: 120px; border-left-color: #e2a03f; }
.dl-prev-h-auto     { min-height: 52px; border-left-color: #00ab55; }

.dl-prev-title {
    font-size: 12px;
    font-weight: 600;
    color: #3b3f5c;
    /* Dar kutuda taşmasın; tam adı title yerine kutu genişliği belirler. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dl-prev-size {
    font-size: 10px;
    color: #888ea8;
}

.dl-prev-ops {
    display: flex;
    gap: 3px;
    margin-top: auto;
}

/* Genislik ver ama YAYILMA: 12/12 kutuda flex:1 dugmeleri kartin
   bastan basa uzatiyor ve tiklanacak yer aranir hale geliyordu. */
.dl-prev-op {
    flex: 0 0 34px;
    border: 1px solid #e0e6ed;
    background: #fff;
    color: #506690;
    border-radius: 4px;
    font-size: 10px;
    line-height: 1;
    padding: 3px 0;
    cursor: pointer;
}

.dl-prev-op:hover:not(:disabled) {
    background: #4361ee;
    border-color: #4361ee;
    color: #fff;
}

.dl-prev-op:disabled {
    opacity: .35;
    cursor: default;
}

.dl-prev-op-sil:hover {
    background: #e7515a;
    border-color: #e7515a;
}

.dl-prev-bos {
    font-size: 12px;
    color: #888ea8;
    text-align: center;
    padding: 28px 10px;
}

body.dark .dl-prev            { background: #060818; }
body.dark .dl-prev-box        { background: #0e1726; border-color: #1b2e4b; }
body.dark .dl-prev-title      { color: #e0e6ed; }
body.dark .dl-prev-op         { background: #1b2e4b; border-color: #1b2e4b; color: #bfc9d4; }

/* ==========================================================================
   CARİ HESAP
   ========================================================================== */

.cari-pozitif { color: #00ab55; font-weight: 600; }
.cari-negatif { color: #e7515a; font-weight: 600; }

.cari-ozet {
    font-size: 13px;
    color: #506690;
}

/* İptal edilmiş hareket görsel olarak da sönük dursun; satır DURUR,
   silinmez — defterin denetlenebilirliği buna bağlı. */
.cari-iptal {
    opacity: .6;
    font-style: italic;
}

body.dark .cari-ozet { color: #bfc9d4; }

/* ==========================================================================
   DURUM SÜZGECİ ŞERİDİ (.hr-segmented)
   --------------------------------------------------------------------------
   Bölmeli düğme: gri bir ray, içinde haplar, seçili olan beyaz. Öncesinde
   Bootstrap'ın nav-tabs'ıydı — alt çizgili klasik sekme; tablonun üstünde
   fazladan bir sınır çizgisi bırakıyor ve ekranın geri kalanına göre eski
   duruyordu.

   .nav-link sınıfı KORUNUR: beş sayfanın JS'i o seçiciye bağlı. Bootstrap
   tanımlarını ezmek için kurallar ray sınıfıyla nitelenir.
   ========================================================================== */

.hr-segmented {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px;
    margin-bottom: 16px;
    background: #f1f2f6;
    border-radius: 10px;
    border: 1px solid #e8eaef;
}

/* ARAC CUBUGU — serit, "Goster" ve arama TEK satirda (searchbox.js
   ogeleri buraya tasir). Once uc ayri bant vardi ve veriye inmeden
   once yarim ekran bosluk geciliyordu.

   Cork'un iki sutunu col-sm-6'dir; genislik ICERIGE birakilir,
   buyume payi serite verilir -- boylece "Goster" ve arama saga
   yaslanir, serit ne kadar genis olursa olsun satir bozulmaz. */
.hr-tools-row {
    align-items: center;
    row-gap: 12px;
}

.hr-tools-row > [class*="col-"] {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
}

/* width:auto SART: Bootstrap'in `.row > *` kurali her cocuga
   width:100% verir, o da flex-basis'i tam satira cevirip seridi
   tek basina bir satira dusurur (olculdu: sarmalayici 1420px). */
.hr-tools-tabs {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}

/* Seride kendi alt boslugu cubuk icinde gerekmez. */
.hr-tools-tabs .hr-segmented {
    margin-bottom: 0;
}

/* Cubuktaki "Goster: 10" seride bitisik durmasin. */
.hr-tools-row .dataTables_length {
    margin-right: 4px;
}

/* Arac cubugu ile tablo basliklari arasindaki bosluk, SECILEN
   DataTables yerlesimine bagli kalmaz.

   Cork'un yerlesimi ust satiri `.dt--top-section` icine koyuyor ve
   bosluk (20px) o sarmalayicinin margin'inden geliyor. Kendi `dom`
   dizesini yazan bir tablo o sarmalayiciyi uretmiyor ve arama
   cubugu basliklara YAPISIK kaliyor -- olculdu: holiday 0px,
   employee_list 20px, inventory_list 38px.

   Secici yalnizca sarmalayicisiz yerlesimi hedefler
   (`.dataTables_wrapper > .row`); Cork yerlesiminde ust satirin
   ebeveyni `.dt--top-section` oldugu icin oradaki 20px ikilenmez. */
.dataTables_wrapper > .row:first-child {
    margin-bottom: 20px;
}

/* "N kayit goster" TEK SATIRDA durur. DataTables etiketi `<label>`
   icine "secim kutusu + metin" olarak basiyor; etiket blok oldugu ve
   `.form-select` de blok oldugu icin ikisi ALT ALTA duşüyordu -- kutu
   ustte, "kayit goster" altinda (olculdu, holiday). Etiket satir ici
   esnek kaba cevrilir; secim kutusu da kendi genisligi kadar kalir. */
.dataTables_length label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
    white-space: nowrap;
}

.dataTables_length label select {
    width: auto;
    display: inline-block;

    /* Arama kutusu ve "Ara" dugmesiyle AYNI yukseklik (40px). Serbest
       birakildiginda tema/sayfa farkina gore 41-45px arasi degisiyordu
       ve ucu yan yana duran kontrol ayri boylarda bitiyordu (olculdu:
       holiday 45, employee_list 41, kutu ikisinde de 40). */
    height: 40px;
    padding-top: 0;
    padding-bottom: 0;
}

/* Arama kutusu HER EKRANDA seridin SAG UCUNDA durur.
   Sarmalayici (`.hr-tools-tabs`) buyume payini aliyor ama satir
   sarabildigi icin once TASMA olusuyordu: sekmelerin dogal genisligi
   + "Goster" + kutu satira sigmayinca kutu ALT SATIRA dusuyor,
   sekme seridi de kalan bosluga yayilarak kutuyu sola birakiyordu.
   Olculdu (1440px, inventory_list): serit 1226px'e uzuyor, kutunun
   sag kenari 625px'te bitiyordu -- sekmesi olmayan ekranlarda
   (employee_list) ayni kutu 1214px'teydi. Ayni is icin iki farkli
   yer: kullanici her ekranda kutuyu yeniden ariyordu.

   Genis ekranda satir SARMAZ; sigmayan sekme seridi kendi icinde
   yatay kayar (arama kutusunu asagi itmek yerine). */
@media (min-width: 992px) {
    .hr-tools-row {
        flex-wrap: nowrap;
    }

    .hr-tools-tabs {
        overflow-x: auto;
        scrollbar-width: thin;
    }
}

/* Dar ekranda satir sarar ve kutu kendi satirina duser; orada da
   saga yaslanmasi icin bosluk SOLA verilir (justify-content is
   gormez: sutunlarin genisligi `auto`). */
.hr-tools-row > [class*="col-"]:last-child {
    margin-left: auto;
}

/* Dar ekranda serit tam satiri alir, digerleri altina iner. */
@media (max-width: 991.98px) {
    .hr-tools-tabs {
        flex: 1 1 100%;
        width: 100%;
    }
}

.hr-segmented .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border: 0;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #6c7293;
    background: transparent;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}

.hr-segmented .nav-link:hover {
    color: #3b3f5c;
    background: rgba(255, 255, 255, .6);
}

/* Seçili hap: beyaz zemin ve küçük bir gölge — rayın üzerinde "kalkık"
   durur, hangisinin açık olduğu bir bakışta okunur. */
.hr-segmented .nav-link.active {
    color: #3b3f5c;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 1px 3px rgba(0, 0, 0, .04);
}

.hr-seg-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    background: rgba(0, 0, 0, .06);
    color: #6c7293;
}

/* Renk yalnız SEÇİLİYKEN döner. Hepsi aynı anda renkli olursa şerit
   kalabalıklaşıyor ve hangisinin açık olduğu kayboluyor. */
.hr-segmented .nav-link.active.hr-seg-success   { color: #00ab55; }
.hr-segmented .nav-link.active.hr-seg-warning   { color: #e2a03f; }
.hr-segmented .nav-link.active.hr-seg-info      { color: #2196f3; }
.hr-segmented .nav-link.active.hr-seg-danger    { color: #e7515a; }
.hr-segmented .nav-link.active.hr-seg-primary   { color: #4361ee; }
.hr-segmented .nav-link.active.hr-seg-secondary { color: #805dca; }

.hr-segmented .nav-link.active.hr-seg-success   .hr-seg-count { background: rgba(0, 171, 85, .12);   color: #00ab55; }
.hr-segmented .nav-link.active.hr-seg-warning   .hr-seg-count { background: rgba(226, 160, 63, .14); color: #e2a03f; }
.hr-segmented .nav-link.active.hr-seg-info      .hr-seg-count { background: rgba(33, 150, 243, .12); color: #2196f3; }
.hr-segmented .nav-link.active.hr-seg-danger    .hr-seg-count { background: rgba(231, 81, 90, .12);  color: #e7515a; }
.hr-segmented .nav-link.active.hr-seg-primary   .hr-seg-count { background: rgba(67, 97, 238, .12);  color: #4361ee; }
.hr-segmented .nav-link.active.hr-seg-secondary .hr-seg-count { background: rgba(128, 93, 202, .12); color: #805dca; }

body.dark .hr-segmented                  { background: #0e1726; border-color: #1b2e4b; }
body.dark .hr-segmented .nav-link        { color: #888ea8; }
body.dark .hr-segmented .nav-link:hover  { color: #e0e6ed; background: rgba(27, 46, 75, .6); }
body.dark .hr-segmented .nav-link.active { color: #e0e6ed; background: #1b2e4b; box-shadow: none; }
body.dark .hr-seg-count                  { background: rgba(255, 255, 255, .08); color: #888ea8; }

/* Dar ekranda ray taşmasın: haplar eşit paylaşır ve alt satıra iner. */
@media (max-width: 575.98px) {
    .hr-segmented { display: flex; width: 100%; }
    .hr-segmented .nav-link { flex: 1 1 auto; justify-content: center; }
}

/* ==================================================================
   İZİN TAKVİMİ — GÜN YOĞUNLUĞU
   ------------------------------------------------------------------
   Aynı güne 8-10 kişi düştüğünde ay görünümü olayları "+N daha"
   satırına katlıyor ve "bugün kaç kişi yok" sorusu cevapsız kalıyor.
   Kalabalık gün artık kutunun KENDİSİNDE okunur: köşede kişi rozeti,
   arka planda ton. Eşikler JS'te (YOGUN_ORTA / YOGUN_YUKSEK).
   ================================================================== */

.fc-yogun-orta   { background-color: rgba(226, 160, 63, .10) !important; }
.fc-yogun-yuksek { background-color: rgba(231, 81, 90, .12)  !important; }

.fc-yogun-rozet {
    float: left;
    margin: 4px 0 0 4px;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    color: #b06f18;
    background-color: rgba(226, 160, 63, .22);
}

.fc-yogun-rozet-yuksek {
    color: #c1373f;
    background-color: rgba(231, 81, 90, .20);
}

/* "+N kişi" bağlantısı sıradan bir olay gibi görünmemeli: tıklanır
   olduğu belli olsun, yoksa kalabalık gün eksik okunuyor. */
.fc .fc-daygrid-more-link {
    font-weight: 600;
    color: #4361ee;
}

/* Açılan liste on kişide sayfayı taşırıyordu — kendi içinde kayar. */
.fc .fc-popover-body {
    max-height: 320px;
    overflow-y: auto;
}

/* Yoğunluk göstergesi (sayfa üstü açıklama şeridi). */
.leave-load-key {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    margin-right: 4px;
    vertical-align: -2px;
}

.leave-load-key-orta   { background-color: rgba(226, 160, 63, .35); }
.leave-load-key-yuksek { background-color: rgba(231, 81, 90, .35); }

/* Kalabalık günün listesi bir KATMANDIR: arkasındaki gün tonu içinden
   görünürse isimler okunmuyordu (saydam zemin + kırmızı ton). */
.fc .fc-popover {
    z-index: 1050;
    border: 1px solid #e0e6ed;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
}

.fc .fc-popover-header {
    padding: 8px 10px;
    border-radius: 8px 8px 0 0;
    background-color: #f1f2f3;
    font-weight: 600;
}

body.dark .fc .fc-popover {
    border-color: #1b2e4b;
    background-color: #0e1726;
}

body.dark .fc .fc-popover-header {
    background-color: #1b2e4b;
}

/* Renk secici: Cork'un .form-control dolgusu (11px) kutucugu icine
   sikistiriyor ve secili renk hic gorunmuyordu -- kutu bembeyaz
   kaliyor, kullanici rengi degistirmedigini saniyor. */
.form-control-color {
    height: 40px;
    padding: 4px;
    cursor: pointer;
}

.form-control-color::-webkit-color-swatch-wrapper { padding: 0; }

.form-control-color::-webkit-color-swatch {
    border: none;
    border-radius: 4px;
}

.form-control-color::-moz-color-swatch {
    border: none;
    border-radius: 4px;
}

/* ==================================================================
   AYARLAR MERKEZİ (settings_hub.php)
   ------------------------------------------------------------------
   Ayar ekranları sidebar'dan çıkıp buraya toplandı; kartlar tek
   satırlık kısayollardır, kutu değil bağlantıdır.
   ================================================================== */

.settings-group-title {
    margin: 0 0 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #888ea8;
}

.settings-card {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 100%;
    padding: 18px;
    border: 1px solid #e0e6ed;
    border-radius: 8px;
    background-color: #fff;
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.settings-card:hover {
    border-color: #4361ee;
    box-shadow: 0 4px 14px rgba(67, 97, 238, .10);
    transform: translateY(-1px);
}

.settings-card-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    color: #4361ee;
    background-color: rgba(67, 97, 238, .10);
}

.settings-card-icon svg { width: 20px; height: 20px; }

.settings-card-body { flex: 1 1 auto; min-width: 0; }

.settings-card-title {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #0e1726;
}

.settings-card-desc {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    line-height: 1.45;
    color: #888ea8;
}

.settings-card-arrow { flex: 0 0 auto; color: #bfc9d4; }
.settings-card:hover .settings-card-arrow { color: #4361ee; }

body.dark .settings-card {
    border-color: #1b2e4b;
    background-color: #0e1726;
}

body.dark .settings-card-title { color: #e0e6ed; }
body.dark .settings-card:hover { border-color: #4361ee; }

/* ==================================================================
   ÜST BARDAKİ KULLANICI KİMLİĞİ
   ------------------------------------------------------------------
   Ad + görev avatarın solunda SABİT durur: paneli açmadan "şu an
   kimim" sorusunun cevabı (hızlı kullanıcı geçişinden sonra ekranda
   hiç yazmıyordu).

   Buradaki üç kural Cork'un kendi kurallarını aşmak zorunda ve o
   yüzden uzun seçicili: Cork aynı öğelere `padding: 0` ve her üst bar
   svg'sine `26px` veriyor. Kısa seçici sessizce eziliyor -- kural
   dosyada duruyor ama hiçbir şey yapmıyor.
   ================================================================== */

/* Bağlantının kendisi flex: .h-link blok akışındaydı, ad ve görev
   avatarın ÜSTÜNE düşüyor, ikon şeridiyle hizası kayıyordu. */
.user-profile-dropdown .h-link.user {
    display: flex;
    align-items: center;
}

/* Avatar 48px. Cork'un .avatar-sm kapsayıcısı 40px'te sabit: büyüyen
   görsel dışarı taşıyor ve çevrimiçi noktası kayıyor.

   Negatif dikey kenar boşluğu ŞART: üst barın yüksekliğini içeriği
   belirliyor (25px dolgu + en uzun öğe) ama sayfanın üst boşluğu
   90px'lik bir bara göre ayarlı. Avatar 48px olunca bar 100px'e
   çıkıyor ve sayfa başlığı ("Gösterge Paneli" ile altındaki cümle)
   barın ALTINDA yarım kalıyordu. Görsel 48px görünür, bar hesabında
   40px sayılır. */
.user-profile-dropdown .avatar.avatar-sm {
    width: 48px;
    height: 48px;
    margin-top: -5px;
    margin-bottom: -5px;
}

/* Cork üst bardaki HER svg'yi 26px'e sabitliyor ve avatar da bir svg:
   kapsayıcı 48px olsa bile görsel 26px kalıyor, dairenin ortasında
   küçücük duruyordu. Yalnız .hr-avatar'ı etkiler, öteki ikonlar 26px
   kalır. */
.header-container .header .header-item .h-item .hr-avatar svg {
    width: 100%;
    height: 100%;
}

/* Büyüyen avatar barın sağ kenarına yapışıyordu: son öğeye nefes payı.
   Cork aynı öğeye `padding: 0` veriyor, kural onun kadar özgül. */
.header-container .header .header-item .user-profile-dropdown .h-link.user {
    padding-right: 10px;
}

/* Dar ekranda metin gizlenir, avatar kalır. */
.topbar-user-meta {
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    margin-right: 10px;
    line-height: 1.25;
    text-align: right;
}

.topbar-user-name {
    font-size: 13px;
    font-weight: 600;
    color: #0e1726;
    white-space: nowrap;
}

.topbar-user-role {
    font-size: 11px;
    color: #888ea8;
    white-space: nowrap;
}

body.dark .topbar-user-name { color: #e0e6ed; }

/* ==================================================================
   SIDEBAR DARALTMA OKU
   ------------------------------------------------------------------
   Cork daraltılmış menüde oku GİZLİYOR: menü ikon şeridine iniyor ve
   geri açacak düğme ekranda kalmıyor. Cork'un çözümü menünün üstüne
   gelince şeridin geçici genişlemesi — ama bunu bilmeyen kişi için
   düğme "bir kez çalışıp kayboluyor".

   Ok daraltılmışken de durur; yönü Cork'un kendi kuralıyla zaten
   dönüyor (rotate(-180deg)), yani ">" görünür. Seçici Cork'unkinden
   bir sınıf daha uzun: kısası sessizce eziliyor.
   ================================================================== */

.main-container.sidebar-closed .sidebar-wrapper.sidebar-theme .theme-brand {
    flex-wrap: wrap;
    justify-content: center;
}

/* 85px'lik şeritte logo ile ok yan yana sığmıyor, üst üste biniyorlar:
   ok kendi satırına iner. */
.main-container.sidebar-closed .sidebar-wrapper.sidebar-theme .theme-brand .sidebar-toggle {
    display: block;
    width: 100%;
    margin-top: 6px;
    text-align: center;
}

/* Daraltma düğmesine basıldıktan sonra, fare menüden ayrılana kadar
   hover-expand kilitlenir (bkz. controller/Ajax/common/sidebar.js).
   Kilitsiz halde şerit tıklayanın faresi üzerindeyken 255px'te kalıyor
   ve "daraltma çalışmıyor" gibi görünüyordu. Hover-expand kaldırılmaz,
   yalnız o an devre dışıdır. */
.main-container.sidebar-hover-kilit.sidebar-closed .sidebar-wrapper:hover {
    width: 85px;
}

.main-container.sidebar-hover-kilit.sidebar-closed .sidebar-wrapper:hover span.sidebar-label,
.main-container.sidebar-hover-kilit.sidebar-closed > .sidebar-wrapper:hover ul.menu-categories li.menu.menu-heading > .heading span,
.main-container.sidebar-hover-kilit.sidebar-closed > .sidebar-wrapper:hover #sidebar .theme-brand div.theme-text {
    display: none;
}

/* ==================================================================
   ARAMA KUTUSU (views/partials/search-box.php)
   ------------------------------------------------------------------
   Liste ekranlarının üstündeki "yaz + Ara" çubuğu. DataTable'ın kendi
   ikon-arama kutusu bu sayfalarda gizlenir (searchbox.js): iki arama
   alanı yan yana durunca hangisinin ne yaptığı anlaşılmıyordu.
   ================================================================== */

/* Kutu HER ekranda tablonun sag ustunde durur. DataTable'li
   sayfalarda arac cubugunun sag yuvasina tasiniyor (bkz. asagisi);
   duz tablolu sayfalarda oraya karsilik gelen yer, tablonun uzerinin
   sag ucudur -- ikisi ayni yerde olmazsa kullanici her ekranda
   kutuyu yeniden ariyor. */
.hr-searchbox {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    margin: 6px 0 14px;
}

/* Arac cubuguna tasinmis hali (searchbox.js): satirin sagina yaslanir
   ve kendi alt boslugunu birakir -- cubugun boslugu zaten var. */
.hr-searchbox-dt {
    justify-content: flex-end;
    margin-bottom: 0;
    width: 100%;
}

/* Dar ekranda kutu KUCULUR, dugme alt satira dusmez: sabit
   genislikte kalinca "Ara" tek basina bir satira iniyordu. */
.hr-searchbox-group {
    position: relative;
    flex: 1 1 190px;
    max-width: 320px;
}

.hr-searchbox-icon {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    display: inline-flex;
    color: #888ea8;
    pointer-events: none;
}

/* Kutu, dugme ve DataTable'in "Goster" secicisi AYNI yukseklikte
   olmali; olculdu: 45 / 39 / 41 idi, yan yana gelince satir
   tirtikli duruyordu. */
.hr-searchbox-input.form-control {
    height: 40px;
    padding: 6px 34px 6px 38px;
    font-size: 13px;
}

.hr-searchbox-clear {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    display: inline-flex;
    padding: 2px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #888ea8;
    line-height: 1;
}

.hr-searchbox-clear:hover { color: #e7515a; }

.hr-searchbox-btn.btn {
    height: 40px;
    padding: 0 20px;
    font-size: 13px;
    white-space: nowrap;
}

/* Sonuc bilgisi kutunun ALTINDA, kutuyla ayni kenara hizali durur.
   Yaninda dururken uzun metin ("18 kayittan 1 tanesi eslesti")
   satiri tasirip dugmeyi asagi atiyordu. */
.hr-searchbox-info {
    flex: 1 0 100%;
    margin-top: -2px;
    font-size: 12px;
    color: #888ea8;
    text-align: right;
}

body.dark .hr-searchbox-icon,
body.dark .hr-searchbox-info { color: #506690; }

/* ==========================================================================
   SUZGEC SERIDI (.hr-filterbar)
   --------------------------------------------------------------------------
   Dort finans/rapor ekrani ayni isaretlemeyi kopyaliyordu ve kopyalar
   ayrismisti. Olculdu (1600px, Fatura ekrani):

     - JS'in doldurdugu bos secim kutusu (Cari) 75px'e dusuyor ve
       "Hepsi" yazisi KIRPILIYORDU;
     - "Suz" dugmesi otekilerden 3px asagida ve 3px kisa bitiyordu
       (42px / 45px);
     - alanlar sola sikisip sagda yarim ekran bosluk kaliyordu.

   Serit artik esnektir: alanlar sabit bir taban genislikten baslar,
   dar ekranda alt satira iner, hepsi AYNI yukseklikte biter.
   ========================================================================== */

.hr-filterbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 18px;
}

.hr-filterbar-alan {
    display: flex;
    flex-direction: column;
    flex: 0 1 155px;
    min-width: 130px;
}

/* Uzun ad listeleri (cari, kategori, hesap) icin iki kat yer. */
.hr-filterbar-genis {
    flex: 1 1 260px;
    max-width: 340px;
}

.hr-filterbar .form-label {
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #6c7293;
}

/* Alanlarin hepsi AYNI yukseklikte: tarih girisi, secim kutusu ve
   dugme Cork'ta uc ayri yukseklikte biter. */
.hr-filterbar .form-control,
.hr-filterbar .form-select,
.hr-filterbar .btn {
    height: 42px;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 13px;
}

/* Aranabilir secim kutusu (data-select) Tom Select ile kendi
   sarmalayicisini kurar; olculen yukseklik .form-select'in degil
   .ts-control'undur -- kural ona da verilmezse o alan otekilerden
   farkli yukseklikte bitiyor. */
.hr-filterbar .ts-wrapper {
    width: 100%;
}

.hr-filterbar .ts-wrapper .ts-control {
    min-height: 42px;
    height: 42px;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 13px;
    display: flex;
    align-items: center;
}

.hr-filterbar-dugme {
    flex: 0 0 auto;
    min-width: 0;
}

.hr-filterbar-dugme .btn {
    padding-left: 24px;
    padding-right: 24px;
}

/* Ikincil dugmeler birincilin YANINDA durur. Once margin-left:auto
   ile saga itiliyordu; serit sarinca "Filtreleri Temizle" tek basina
   alt satira dusuyor ve karti bos yere uzatiyordu. */
.hr-filterbar-sag {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.hr-filterbar-sag .btn {
    height: 42px;
    padding: 0 18px;
    font-size: 13px;
}

body.dark .hr-filterbar .form-label { color: #888ea8; }

/* ==========================================================================
   SAYI SERIDI (.hr-statstrip)
   --------------------------------------------------------------------------
   Suzgecin SONUCUDUR; sayfa ustundeki buyuk ozet kartlarindan (.summary-card)
   bilerek daha kucuktur. Ayni boyda cizilince hangisinin neye ait oldugu
   kayboluyordu: ust kartlar ekranin basligi, bunlar o anki suzgecin toplami.
   ========================================================================== */

.hr-statstrip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}

.hr-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 120px;
    min-width: 110px;
    padding: 10px 14px;
    border: 1px solid #e0e6ed;
    border-radius: 8px;
    background: #fff;
}

.hr-stat-etiket {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    color: #888ea8;
}

.hr-stat-deger {
    font-size: 17px;
    font-weight: 700;
    color: #3b3f5c;
    line-height: 1.2;
}

.hr-stat-pozitif { color: #00ab55; }
.hr-stat-negatif { color: #e7515a; }

body.dark .hr-stat        { background: #0e1726; border-color: #1b2e4b; }
body.dark .hr-stat-deger  { color: #e0e6ed; }
body.dark .hr-stat-etiket { color: #888ea8; }

/* Form icinde acilan kucuk ek form (or. fatura formunda "Yeni
   musteri"). Modal ustune modal acmadan, ihtiyac duyulan yerde. */
.hr-inline-form {
    padding: 12px;
    border: 1px dashed #e0e6ed;
    border-radius: 8px;
    background: #f9fafb;
}

body.dark .hr-inline-form { background: #0e1726; border-color: #1b2e4b; }

/* ==========================================================================
   KART IC BOSLUGU — DataTable'li ekranlar
   --------------------------------------------------------------------------
   DataTables'in Cork stili (dt-global_style.css) `.widget-content-area`
   padding'ini SIFIRLIYOR. Cork kendi ornek sayfalarinda bunu ic
   bolumlere ayri margin vererek telafi ediyor; bizim ekranlarimizda o
   telafi yok, dolayisiyla icerik cerceveye YAPISIK duruyordu.

   Olculdu (Personel Raporu, 1600px):
     dagilim karti  : baslik ust kenardan 1px, etiket soldan 1px,
                      deger ve cubuk sagdan 1px
     ayrinti tablosu: ilk baslik soldan 1px, son sutun sagdan 1px,
                      alt bolum dipten 1px

   Ust bosluk DataTable'in kendi ust bolumunden geliyor (olculdu 21px),
   o yuzden karta yalnizca YATAY ve ALT bosluk verilir -- ustten de
   verilirse iki bosluk ust uste binip serit asagi kayiyor.
   ========================================================================== */

/* Bosluk KARTIN kendisine verilir; boylece kartin icinde ne olursa
   olsun (tablo, liste, serit, cubuk) kenara yapismaz. Once yalniz
   DataTable sarmalayicisina verilmisti ve tablosuz kartlar (Izin
   Raporu'ndaki "En Cok Izin Kullanan" bloğu gibi) yapisik kaliyordu. */
.widget-content-area.br-8 {
    padding: 20px;
}

/* DataTable kendi ust/alt bolumlerinin boslugunu tasiyor; kart
   padding'i varken ikinci kez verilmez, yoksa serit asagi kayar. */
.widget-content-area.br-8 > .dataTables_wrapper {
    padding: 0;
}

.widget-content-area.br-8 > .dataTables_wrapper > .dt--top-section {
    margin-top: 0;
}

/* ==========================================================================
   PANEL DUZENI — OZET KARTI SECIMI (.dl-strip)
   ========================================================================== */

.dl-strip {
    border: 1px solid #e0e6ed;
    border-radius: 10px;
    padding: 14px 16px;
    height: 100%;
}

.dl-strip-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e0e6ed;
}

.dl-strip-title {
    font-size: 14px;
    font-weight: 600;
    color: #3b3f5c;
}

.dl-strip-count {
    font-size: 12px;
    font-weight: 600;
    color: #888ea8;
}

.dl-strip-group {
    margin: 12px 0 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: #888ea8;
}

.dl-strip-group:first-of-type { margin-top: 0; }

.dl-kart {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 7px 8px;
    border-radius: 8px;
    cursor: pointer;
}

.dl-kart:hover { background: #f6f7f9; }

.dl-kart-title {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #3b3f5c;
}

.dl-kart-desc {
    display: block;
    font-size: 11px;
    color: #888ea8;
}

body.dark .dl-strip,
body.dark .dl-strip-head  { border-color: #1b2e4b; }
body.dark .dl-strip-title,
body.dark .dl-kart-title  { color: #e0e6ed; }
body.dark .dl-kart:hover  { background: #1b2e4b; }

/* ==================================================================
   OFIS NOBETCISI — pano bileseni
   ------------------------------------------------------------------
   Bilesen ust bardaki rozetin YERINE gecti. Rozet her sayfadaydi ama
   dar bir yerdi: gorev listesi, tiklenebilir maddeler, eylem dugmesi
   ve haftalik cizelge acilir bir panele sigdirilmisti. Panoda dort
   bolum alt alta durur -- bilesenin 'tall' olmasinin sebebi bu.

   Bolum siniflari (.duty-dropdown-head, .duty-week, ...) ADLARINI
   KORUYOR: isaretleme rozetten oldugu gibi tasindi ve yeniden
   adlandirmak diff'i gereksiz buyutur, kazanci da yok.

   Bilesenin kendi zemini/cercevesi YOK: .widget-content-area onu
   zaten veriyor. Rozetteki zemin/golge kurallari Cork'un dropdown
   kuralindan kacmak icindi, burada karsiliksiz.
   ================================================================== */

.duty-widget .widget-content {
    /* Uzun hafta listesi kutuyu tasirmasin; .dash-w zaten kaydirma
       kabini kuruyor. */
    display: flex;
    flex-direction: column;
}
/* ==================================================================
   OFIS NOBETCISI — ust bar rozeti ve acilir panel
   ------------------------------------------------------------------
   Rozet ust barda ayarlar dislisinin solunda durur. Dar ekranda METIN
   gizlenir, ikon kalir: ust bardaki isim/gorev alaninin bugunku
   davranisinin aynisi -- yoksa uzun bir ad arama kutusunu sikistiriyor.
   ================================================================== */

/* Rozette bu bolum zeminliydi ve panelin kenarindan kenarina
   uzaniyordu. Bilesende ZEMIN YOK: kart zaten kendi zeminini
   veriyor, ustune ikinci bir ton bindirmek gereksiz. Kartin ic
   boslugu Cork'un .widget-card-list-one'indan geliyor ve degeri
   burada VARSAYILMAZ -- negatif margin ile kenara tasirmak, o deger
   degistigi gun sessizce bozulurdu. Bolumleri ayiran sey cizgi. */
.duty-dropdown-head {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-bottom: 13px;
    border-bottom: 1px solid rgba(0, 0, 0, .07);
}

.duty-dropdown-name {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
}

.duty-dropdown-sub {
    font-size: 12px;
    line-height: 1.5;
    opacity: .65;
}

/* Gorev listesi: liste kendi madde isaretini cizer, bu yuzden
   duty_task_list() kullanicinin yazdigi "-" / "*" isaretini temizler. */
.duty-dropdown-tasks {
    margin: 0;
    padding: 13px 0 13px 20px;
    font-size: 13px;
    line-height: 1.85;
}

.duty-dropdown-empty {
    margin: 0;
    padding: 13px 0;
    font-size: 13px;
    font-style: italic;
    opacity: .55;
}

/* ------------------------------------------------------------------
   "Bu hafta" listesi

   Gecmis gunler duty_log'tan gelir (donmus), bugunden sonrasi canli
   hesaptir.
   ------------------------------------------------------------------ */

.duty-week {
    padding: 12px 0 8px;
    border-top: 1px solid rgba(0, 0, 0, .07);
}

.duty-week-title {
    display: block;
    padding: 0 18px 6px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .5;
}

.duty-week-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 3px 18px;
    font-size: 12.5px;
    line-height: 1.75;
    white-space: nowrap;
}

.duty-week-day,
.duty-week-date {
    flex: 0 0 auto;
}

.duty-week-day  { width: 26px; font-weight: 600; opacity: .8; }
.duty-week-date { width: 36px; font-size: 11.5px; opacity: .5; }

/* Ad tasarsa kirpilir: rozet dar bir yer, satirin alta kaymasi
   listeyi okunmaz yapiyor. Tam ad ayar ekraninda duruyor. */
.duty-week-name {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Tatil adi KIRPILMAZ, alt satira sarar: gunun neden bos oldugu
   satirin en bilgilendirici parcasi ve uzun bayram adlari
   ("Ramazan Bayrami 2. Gun") uc noktaya dusuyordu. */
.duty-week-off {
    white-space: normal;
    font-style: italic;
    line-height: 1.4;
    opacity: .55;
}

/* Bugunun satiri: kenardan kenara uzanan hafif bir serit. Goz
   listede once buraya gitsin. */
.duty-week-row.is-today {
    background: rgba(27, 85, 226, .07);
}

.duty-week-row.is-today .duty-week-day,
.duty-week-row.is-today .duty-week-date,
.duty-week-row.is-today .duty-week-name {
    font-weight: 700;
    color: #1b55e2;
    opacity: 1;
}

/* ---- Koyu tema ---- */
body.dark .duty-dropdown-head {
    border-color: #1b2e4b;
}

body.dark .duty-week {
    border-color: #1b2e4b;
}

body.dark .duty-week-row.is-today {
    background: rgba(109, 142, 255, .12);
}

body.dark .duty-week-row.is-today .duty-week-day,
body.dark .duty-week-row.is-today .duty-week-date,
body.dark .duty-week-row.is-today .duty-week-name {
    color: #6d8eff;
}

/* --------------------------------------------------------------
   NOBET DEVIR TESLIMI

   Panel dar bir yer: durum rozeti, tiklenebilir maddeler, eylem
   dugmesi ve siradaki nobet satiri ust uste biner. Her blok kendi
   ust ayracini tasir ki gozle ayrilsinlar.
   -------------------------------------------------------------- */
.duty-status-badge {
    display: inline-block;
    margin-top: 4px;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
}

.duty-status-pending   { background: #fff4e6; color: #e2a03f; }
.duty-status-started   { background: #e6f4ff; color: #2196f3; }
.duty-status-completed { background: #e8f7ee; color: #009688; }

.duty-tasks-check li { list-style: none; margin-left: -1.1rem; }

.duty-check-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
}

.duty-check-row input { margin-top: 3px; flex: 0 0 auto; }

.duty-actions {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #e0e6ed;
}

/* Engel ve eksik madde uyarisi: KIRMIZI ve okunur. Kullaniciya
   kimin hangi gunu kapatmadigini soyleyen tek yer burasi. */
.duty-blocked {
    margin: 0 0 8px;
    font-size: 11.5px;
    line-height: 1.45;
    color: #e7515a;
}

.duty-done {
    margin: 0;
    font-size: 12px;
    color: #009688;
}

.duty-shift-msg {
    margin: 8px 0 0;
    font-size: 11.5px;
    line-height: 1.4;
}

.duty-shift-msg.is-error { color: #e7515a; }
.duty-shift-msg.is-ok    { color: #009688; }

.duty-next {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid #e0e6ed;
    font-size: 11.5px;
    line-height: 1.45;
    opacity: .75;
}

.duty-next-strong { font-weight: 600; opacity: 1; }

body.dark .duty-actions,
body.dark .duty-next { border-top-color: #191e3a; }

body.dark .duty-status-pending   { background: #3a2f1a; color: #e2a03f; }
body.dark .duty-status-started   { background: #1b2e4b; color: #2196f3; }
body.dark .duty-status-completed { background: #1a3a34; color: #009688; }

/* Satir icinde renk noktasi (tatil rengi gibi, kendi sutununa deger
   olmayan gorsel isaret). */
.hr-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 8px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, .12);
    vertical-align: middle;
}

/* ==================================================================
   GIZLI TUTAR — goz ikonuyla acilan para degeri
   ------------------------------------------------------------------
   Gosterge paneli acik bir ekranda duruyor; nakit, gelir ve bordro
   rakamlari yandan bakan herkese okunuyordu. Tutar maskeli gelir,
   goz ikonunun uzerine gelince acilir, imlec cikinca yeniden gizlenir.

   JS YOK. Acma KARDES SECICIYLE yapilir, bu yuzden gozun DOM'da
   degerden ONCE durmasi ZORUNLU; gorsel olarak saga `order` ile
   alinir. `:has()` ile yazilsaydi onu desteklemeyen bir tarayicida
   tutar kalici olarak gizli kalirdi -- okunamayan bir rakam,
   maskesiz rakamdan kotudur.
   ================================================================== */

.hr-gizli {
    /* Maske ve deger AYNI izgara hucresini paylasir: kutu her zaman
       ikisinden UZUN olani kadar genistir. Ust uste bindirilmeseydi
       maskeden gercek tutara gecerken kart genisligi degisir ve
       ozet kartlari imlec her gectiginde ziplardi. */
    display: inline-grid;
    grid-template-columns: auto auto;
    align-items: center;
    gap: 6px;
}

.hr-gizli-mask,
.hr-gizli-deger {
    grid-column: 1;
    grid-row: 1;
}

/* Goz DOM'da once, ekranda SONRA. */
.hr-gizli-goz {
    grid-column: 2;
    grid-row: 1;
    order: 2;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: inherit;
    opacity: .45;
    cursor: pointer;
    transition: opacity .15s ease;
}

.hr-gizli-goz:hover,
.hr-gizli-goz:focus-visible {
    opacity: 1;
}

.hr-gizli-deger {
    visibility: hidden;
}

/* Acilma: fare uzerine gelince VE klavyeyle odaklaninca. Dokunmatikte
   hover diye bir sey yok; :focus-visible olmadan ikon telefonda hicbir
   ise yaramazdi (dokunma odaklar). */
.hr-gizli-goz:hover ~ .hr-gizli-deger,
.hr-gizli-goz:focus-visible ~ .hr-gizli-deger {
    visibility: visible;
}

.hr-gizli-goz:hover ~ .hr-gizli-mask,
.hr-gizli-goz:focus-visible ~ .hr-gizli-mask {
    visibility: hidden;
}

.hr-gizli-mask {
    letter-spacing: 1px;
    opacity: .55;
    user-select: none;
}

/* ------------------------------------------------------------------
   İçerik yatay boşluğu
   ------------------------------------------------------------------
   Cork'un .layout-px-spacing padding'i sol/sağ 24px; sidebar çizgisi
   ile tabloların başladığı yer arasında fazla boşluk bırakıyordu.
   14px'e çekildi — hem sol (sidebar'a) hem sağ (pencere kenarına)
   daha yakın, içerik daha geniş. Küçük ekranda Cork zaten kırpıyor,
   burada da simetrik daraltıyoruz. */
/* Cork kuralı `padding: 0 24px !important`; #content ile özgüllüğü
   aşıp !important ile eziyoruz (yükleme sırasından bağımsız). */
#content .layout-px-spacing {
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* Geniş ekranda asıl boşluğun kaynağı: .middle-content `container-xxl`
   olduğu için Bootstrap onu 1440px'te sınırlayıp ortalıyordu; 1920px
   bir ekranda içerik 1440'a kırpılıp sağda-solda ~112px boşluk
   bırakıyordu. Tam genişliğe açıyoruz — kartlar/tablolar mevcut alanı
   (sidebar hariç, 14px iç boşlukla) doldurur. */
#content .middle-content.container-xxl {
    max-width: 100% !important;
}

/* Üst bar da aynı `container-xxl` sınırına takılıyordu: geniş ekranda
   navbar 1440'a kırpılıp ortalanınca arama çubuğu içeriğin sol
   kenarından ~90px içeride kalıyordu. Topbar'ı da tam genişliğe açıp
   içerikle aynı 20px iç boşluğa çekiyoruz — arama çubuğu kartların sol
   kenarıyla hizalanır. */
.header-container.container-xxl {
    /* Iki kenara sabitle (sol=sidebar, sag=0), genislik otomatik.
       Cork'un `width: calc(100% - 303px)` kurali 100%'e (viewport ICB)
       bagliydi; modal scrollbar'i kaldirinca 100% degisip ust bar
       kayiyordu. Genislik artik sol+sag kenardan turer, calc'a bagli
       degil -> kalici scrollbar (html overflow-y:scroll) ile stabil. */
    left: 255px !important;
    right: 0 !important;
    width: auto !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* Modal (arama vb.) açılınca Bootstrap dikey scrollbar'ı kaldırıyor ama
   telafi padding'i eklemiyordu; position:fixed olan üst bar scrollbar
   genişliği kadar (~15px) sola kayıyordu. Gerçek scroller <html>;
   scrollbar'ı KALICI yaparak kaymayı engelliyoruz — modal açılıp
   kapanınca yuva hiç değişmez. */
html {
    overflow-y: scroll;
}

/* ------------------------------------------------------------------
   Sidebar seçili/hover rengi: mor yerine mavi
   ------------------------------------------------------------------
   Cork'un sidebar aktif ve hover efektleri `--secondary_*` (mor,
   #7d30cb) kullanıyordu. "Yeni Personel" butonuyla (primary mavi,
   #3d5df3) aynı olsun diye sidebar kapsamında secondary paletini
   primary mavinin tonlarına eşliyoruz — böylece her aktif/hover
   kuralı (menü, alt menü, ikon, arka plan) otomatik maviye döner. */
#sidebar,
.sidebar-wrapper {
    --secondary_50:   #f5f7fe;  /* açık mavi arka (aydınlık tema hover/aktif zemin) */
    --secondary_100:  #eceffe;  /* metin/ikon (koyu temada açık mavi) */
    --secondary_500:  #3d5df3;  /* buton mavisi — metin/ikon/nokta */
    --secondary_600:  #3754db;  /* koyu mavi (vurgu) */
    --secondary_800:  #253892;  /* koyu tema tonları */
    --secondary_900:  #1e2e77;  /* KOYU TEMA hover/aktif zemin (mor yerine mavi) */
    --secondary_1000: #152143;
}

/* Seçili SAYFA daha belirgin: adı KALIN, arka planı belirgin mavi.
   YALNIZ asıl sayfa öğesi — alt menü leaf'i (ör. "İzin Talepleri") ya
   da alt menüsü olmayan üst-seviye sayfa (ör. "Gösterge Paneli").
   Üst başlık (submenu'lü kategori, ör. "İzin Yönetimi") vurgulanmaz.
   Parent ile leaf ayrımı `:has(> ul.submenu)` ile: parent'ta submenu
   vardır. */
#sidebar ul.menu-categories li.menu ul.submenu > li.active > a,
#sidebar ul.menu-categories li.menu.active:not(:has(> ul.submenu)) > .dropdown-toggle {
    font-weight: 700 !important;
    color: var(--secondary_600) !important;
    background: rgba(61, 93, 243, 0.14) !important;   /* belirgin açık mavi */
}

#sidebar ul.menu-categories li.menu ul.submenu > li.active > a:before {
    background-color: var(--secondary_600) !important; /* nokta da mavi */
}

body.dark #sidebar ul.menu-categories li.menu ul.submenu > li.active > a,
body.dark #sidebar ul.menu-categories li.menu.active:not(:has(> ul.submenu)) > .dropdown-toggle {
    font-weight: 700 !important;
    color: #ffffff !important;
    background: rgba(61, 93, 243, 0.35) !important;    /* koyu temada belirgin mavi */
}

/* Üst başlık (submenu'lü kategori) SEÇİLİ GÖRÜNMEZ: alt sayfası aktif
   olsa ya da menü açık olsa da vurgusuz — normal ağırlık, saydam arka.
   Böylece yalnız asıl sayfa öne çıkar. */
#sidebar ul.menu-categories li.menu:has(> ul.submenu).active > .dropdown-toggle,
#sidebar ul.menu-categories li.menu:has(> ul.submenu) > .dropdown-toggle[aria-expanded="true"] {
    font-weight: 500 !important;
    background: transparent !important;
}

/* ------------------------------------------------------------------
   TÜM TABLOLAR: başlık ve altındaki hücreler kolon adıyla hizalı,
   ortada (her sayfada). text-end/text-start ve JS'in verdiği hizalar
   dahil hepsi ortalanır; içerik dikeyde de ortalanır. */
.table > thead > tr > th,
.table > thead > tr > td,
.table > tbody > tr > th,
.table > tbody > tr > td,
.table > tr > th,
.table > tr > td {
    text-align: center !important;
    vertical-align: middle !important;
}

/* ------------------------------------------------------------------
   Sidebar alt bilgi (telif + sürüm) — MENÜDEN BAĞIMSIZ, sidebar'ın
   en altında SABİT bir alan. Menü kayarken yerinde kalır; üst çizgiyle
   menüden ayrılır. Metin küçük fontta, alt alta. */
.hr-sidebar-footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 255px;                 /* sidebar genişliği */
    z-index: 6;
    padding: 9px 14px;
    font-size: 11px;
    line-height: 1.55;
    text-align: center;
    color: var(--dark_300, #888ea8);
    background: #ffffff;
    border-top: 1px solid var(--dark_100, #e0e6ed);
}
body.dark .hr-sidebar-footer {
    background: #060818;
    border-top-color: #1b2e4b;
}
.hr-sidebar-footer-brand {
    font-weight: 700;
}
/* Menünün son maddesi sabit footer'ın arkasında kalmasın. */
#sidebar ul.menu-categories {
    padding-bottom: 78px;
}
/* Daraltılmış sidebar: footer de daralır, metin sığmayınca gizlenir;
   hover ile genişleyince görünür. */
.sidebar-closed .hr-sidebar-footer {
    width: 90px;
}
.sidebar-closed .hr-sidebar-footer > div {
    display: none;
}
.sidebar-closed .sidebar-wrapper:hover .hr-sidebar-footer {
    width: 255px;
}
.sidebar-closed .sidebar-wrapper:hover .hr-sidebar-footer > div {
    display: block;
}

/* ------------------------------------------------------------------
   Sayfa başlığı şeridi boşlukları — STANDART (tüm sayfalar).
   Başlık (h4) ile alt metin (açıklama) ve şerit ile içerik arası
   çok sıkışıktı; özellikle özet kartı olmayan Ayarlar sayfalarında
   içerik başlığın hemen dibindeydi. Ortak breadcrumb'tan tek yerde
   standardize edilir. */
.page-title h4 {
    margin-bottom: 5px;
}
.secondary-nav {
    margin-bottom: 22px !important;
}

/* ------------------------------------------------------------------
   Üst bar ORTA: canlı saat + tarih (clock.js) — modern "pill".
   Header'a göre mutlak ortalanır; geniş ekranda görünür, dar ekranda
   gizli. Yumuşak mavi zeminli, ikonlu, yuvarlak kapsül. Tema uyumlu. */
.hr-topbar-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    flex-direction: column;
    align-items: center;
    text-align: center;
    pointer-events: none;
    line-height: 1;
}
/* Saat: büyük, ince-orta ağırlık, hizalı rakamlar; saniyeler soluk/küçük. */
.hr-topbar-center .htc-time {
    font-size: 19px;
    font-weight: 600;
    letter-spacing: 1.5px;
    color: var(--dark_900, #1b2e4b);
    font-variant-numeric: tabular-nums;
}
.hr-topbar-center .htc-time i {
    font-style: normal;
    font-size: 12px;
    font-weight: 500;
    opacity: 0.4;
    margin-left: 1px;
}
/* Tarih: minik, büyük harf, geniş harf aralığı — üst çizgiyle ayrılır. */
.hr-topbar-center .htc-date {
    margin-top: 3px;
    padding-top: 3px;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--dark_400, #888ea8);
    border-top: 1px solid var(--dark_100, #e0e6ed);
}
/* Koyu tema */
body.dark .hr-topbar-center .htc-time {
    color: #e6ebf5;
}
body.dark .hr-topbar-center .htc-date {
    color: #7e8aa8;
    border-top-color: rgba(255, 255, 255, 0.08);
}