/* ==========================================================================
   shell.css — Portal (Jazzmin/AdminLTE) görünümünü taklit eden kabuk.
   Sol koyu sidebar + üstte beyaz logo kutusu + beyaz navbar + açık gri içerik.
   Bileşenler (kart/tablo/buton) flatly + portal.css'ten gelir.
   ========================================================================== */

:root {
    --pm-sidebar-w: 264px;
    --pm-topbar-h: 58px;
    --pm-sidebar-bg: #2c3e50;      /* flatly primary — koyu lacivert */
    --pm-sidebar-bg-2: #26374a;
    --pm-sidebar-hover: #34495e;
    --pm-sidebar-text: #c4ccd6;
    --pm-accent: #18bc9c;          /* flatly teal — aktif vurgu */
    --pm-content-bg: #f4f6f9;      /* AdminLTE içerik gri'si — beyaz kartlar öne çıksın */
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--pm-content-bg);
    min-height: 100vh;
}

/* ------------------------------ Sidebar ------------------------------ */
.pm-sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--pm-sidebar-w);
    background: var(--pm-sidebar-bg);
    color: var(--pm-sidebar-text);
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 20px rgba(15, 23, 42, 0.18);
    z-index: 1040;
    transition: transform 0.22s ease;
}

.pm-brand {
    background: #ffffff;                 /* beyaz logo kutusu — portaldaki gibi */
    padding: 0.85rem 0.75rem;
    text-align: center;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    min-height: var(--pm-topbar-h);
    display: flex;
    align-items: center;
    justify-content: center;
}
.pm-brand-logo {
    max-width: 82%;
    max-height: 40px;
    object-fit: contain;
}

.pm-nav {
    padding: 0.9rem 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    flex: 1 1 auto;
    overflow-y: auto;
}
.pm-nav-link {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.62rem 0.8rem;
    color: var(--pm-sidebar-text);
    text-decoration: none;
    border-radius: 0.55rem;
    font-size: 0.95rem;
    font-weight: 500;
    border-left: 3px solid transparent;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.pm-nav-link .nav-icon {
    width: 1.25rem;
    text-align: center;
    font-size: 0.95rem;
    opacity: 0.9;
}
.pm-nav-link:hover {
    background: var(--pm-sidebar-hover);
    color: #ffffff;
}
.pm-nav-link.active {
    background: var(--pm-sidebar-bg-2);
    color: #ffffff;
    border-left-color: var(--pm-accent);
}
.pm-nav-link.active .nav-icon { color: var(--pm-accent); opacity: 1; }

/* Alt menü grubu (Komisyon) */
.pm-nav-group-label {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.62rem 0.8rem 0.35rem;
    color: #8b98a7;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.pm-nav-group-label .nav-icon {
    width: 1.25rem;
    text-align: center;
    font-size: 0.9rem;
    opacity: 0.85;
}
.pm-nav-link.pm-nav-sub {
    margin-left: 1.35rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.9rem;
}
.pm-nav-link.pm-nav-sub .nav-icon { font-size: 0.42rem; }

.pm-sidebar-foot {
    padding: 0.8rem 1rem 1.1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.pm-sidebar-foot .badge {
    background: rgba(24, 188, 156, 0.16);
    color: #7ef0d6;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* ------------------------------ Main / Topbar ------------------------------ */
.pm-main {
    margin-left: var(--pm-sidebar-w);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.pm-topbar {
    position: sticky;
    top: 0;
    height: var(--pm-topbar-h);
    background: #ffffff;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0 1.15rem;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.03);
    z-index: 1030;
}
.pm-page-title {
    font-size: 1.08rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0;
}
.pm-topbar-right { margin-left: auto; }
.pm-burger {
    display: none;
    border: 1px solid rgba(15, 23, 42, 0.12);
    color: #1f2937;
    background: #fff;
}

.pm-content {
    padding: 1.25rem;
    flex: 1 1 auto;
}
/* base.html'deki gibi içerik bir "row g-3" — #app-content zaten row */
#app-content { margin: 0; }

/* ------------------------------ Mock'a özgü ufak stiller ------------------------------ */

/* Hedef ekranı tab'ları (Bootstrap nav-tabs üstüne ince ayar) */
.pm-tabs {
    margin-bottom: 1rem;
    border-bottom: 1px solid rgba(15, 23, 42, 0.12);
}
.pm-tabs .nav-link {
    color: #6c757d;
    font-weight: 600;
    border: 1px solid transparent;
    border-top-left-radius: 0.6rem;
    border-top-right-radius: 0.6rem;
    padding: 0.6rem 1.2rem;
    cursor: pointer;
    background: none;
}
.pm-tabs .nav-link:hover { color: #0d6efd; }
.pm-tabs .nav-link.active {
    color: #1f2937;
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.12) rgba(15, 23, 42, 0.12) #ffffff;
}

/* Filtre barı */
.pm-filter-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.9rem;
}
.pm-filter-bar .portal-filter-dropdown > summary {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.pm-filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.3rem;
    border-radius: 1rem;
    background: rgba(13, 110, 253, 0.12);
    color: #0d6efd;
    font-size: 0.72rem;
    font-weight: 700;
}
.pm-filter-body-list {
    max-height: 15rem;
    overflow-y: auto;
    margin-top: 0.5rem;
}
.pm-filter-body-list .form-check { margin-bottom: 0.15rem; }
.pm-filter-group-title {
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6c757d;
    font-weight: 700;
    margin: 0.55rem 0 0.25rem;
}

/* ============================== Oturum / login ============================
   Login, portalın "kapısı"dır: içerideki aydınlık ekranların aksine sidebar
   kimliğinin koyu lacivertini kullanır; vurgu (odak halkası) portalın teal'i. */
body.pm-loginsiz {
    background: linear-gradient(160deg, var(--pm-sidebar-bg) 0%, var(--pm-sidebar-bg-2) 55%, #1f2d3d 100%);
}

body.pm-loginsiz #pm-sidebar,
body.pm-loginsiz .pm-burger,
body.pm-loginsiz .pm-topbar {
    display: none;
}

body.pm-loginsiz .pm-main {
    margin-left: 0;
}

body.pm-loginsiz .pm-content {
    background: transparent;
}

.pm-login-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 92vh;
    padding: 2rem 1rem;
}

.pm-login-card {
    width: 100%;
    max-width: 23rem;
    background: #fff;
    border-radius: 0.9rem;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
    padding: 1.8rem 1.7rem 1.6rem;
    text-align: left;
    animation: pm-login-gir 0.28s ease-out;
}

@keyframes pm-login-gir {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .pm-login-card { animation: none; }
}

.pm-login-marka {
    text-align: center;
    margin-bottom: 0.9rem;
}

.pm-login-logo {
    height: 36px;
}

.pm-login-baslik {
    text-align: center;
    font-weight: 700;
    color: var(--pm-sidebar-bg);
}

.pm-login-not {
    text-align: center;
    font-size: 0.82rem;
    color: #6c757d;
    margin: 0.15rem 0 1.1rem;
}

/* Şifre alanı: göster/gizle göz butonu */
/* Edge/Chromium'un YERLEŞİK şifre-göster ikonu bizimkiyle çift görünmesin */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
    display: none;
}

.pm-sifre-grup {
    position: relative;
}

.pm-sifre-grup input {
    padding-right: 2.4rem;
}

.pm-sifre-goz {
    position: absolute;
    right: 0.35rem;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: none;
    color: #6c757d;
    padding: 0.25rem 0.45rem;
    line-height: 1;
}

.pm-sifre-goz:hover {
    color: var(--pm-sidebar-bg);
}

/* Odak halkası portal teal'i; buton sidebar laciverti (beyaz metinle 9:1 kontrast) */
.pm-login-card .form-control:focus {
    border-color: var(--pm-accent);
    box-shadow: 0 0 0 0.2rem rgba(24, 188, 156, 0.2);
}

.pm-login-card button[type="submit"] {
    background: var(--pm-sidebar-bg);
    border-color: var(--pm-sidebar-bg);
}

.pm-login-card button[type="submit"]:hover,
.pm-login-card button[type="submit"]:focus {
    background: var(--pm-sidebar-hover);
    border-color: var(--pm-sidebar-hover);
    box-shadow: 0 0 0 0.2rem rgba(24, 188, 156, 0.25);
}

/* Sidebar kullanıcı bloğu */
.pm-kullanici {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
    padding: 0.45rem 0.55rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0.55rem;
}

.pm-kullanici-bilgi {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pm-kullanici-ad {
    font-weight: 600;
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pm-kullanici-rol {
    font-size: 0.72rem;
    opacity: 0.75;
}

/* Salt-okunur rol: değişiklik aksiyonları görünmez (API zaten 403 döner) */
body.pm-salt-okunur [data-ka-yeni],
body.pm-salt-okunur [data-ka-duzenle],
body.pm-salt-okunur [data-ka-sil],
body.pm-salt-okunur [data-km-yeni],
body.pm-salt-okunur [data-km-duzenle],
body.pm-salt-okunur [data-km-sil],
body.pm-salt-okunur [data-bulk-apply],
body.pm-salt-okunur .pm-bulk-bar,
body.pm-salt-okunur [data-kaydet],
body.pm-salt-okunur [data-reset] {
    display: none !important;
}

/* Kategori2 panelinde kategori2 adının yanındaki bağlı-kategori rozeti */
.pm-kat-rozet {
    display: inline-block;
    font-size: .68rem;
    font-weight: 600;
    color: #6c757d;
    background: #eef1f4;
    border-radius: .5rem;
    padding: 0 .4rem;
    vertical-align: middle;
}

/* Rota/tab geçişi: eski içerik görünür kalır ama tıklanamaz (bayat butonlara
   basılmasın); üstbardaki küçük gösterge yanar */
#app-content.pm-gecis {
    pointer-events: none;
    opacity: .65;
}
.pm-yukleniyor {
    margin-left: .6rem;
    color: #6c757d;
}

/* Çoklu seçim kutusundaki "Tümünü seç" satırı — listeden ince çizgiyle ayrılır */
.pm-ka-tumu {
    border-bottom: 1px solid #dee2e6;
    padding-bottom: .3rem;
    margin-bottom: .3rem;
}

/* Geniş filtre paneli (uzun takım adları rahat okunsun) */
.pm-fd-genis .portal-filter-dropdown-body {
    min-width: 28rem;
}

/* Tanım formu — geniş modal + çift sütun + çoklu seçim kutuları */
.pm-modal-card.pm-modal-genis {
    max-width: 46rem;
    width: 94vw;
}

.pm-ka-form-2s {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 0.9rem;
}

@media (max-width: 640px) {
    .pm-ka-form-2s { grid-template-columns: 1fr; }
}

.pm-ka-coklu {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.9rem;
    margin-top: 0.7rem;
}

@media (max-width: 640px) {
    .pm-ka-coklu { grid-template-columns: 1fr; }
}

.pm-ka-coklu-kutu {
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 0.55rem;
    padding: 0.55rem;
}

.pm-ka-coklu-baslik {
    font-size: 0.82rem;
    font-weight: 700;
    margin-bottom: 0.35rem;
}

.pm-ka-coklu-liste {
    max-height: 13rem;
    overflow-y: auto;
    margin-top: 0.4rem;
    font-size: 0.85rem;
}

/* Marka tabı Takım filtresi — aramalı tek seçimli dropdown */
.pm-tf summary .pm-tf-etiket {
    display: inline-block;
    max-width: 18rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

.pm-tf .portal-filter-dropdown-body {
    min-width: 22rem;
}

.pm-tf .pm-reset-link {
    margin-top: 0.35rem;
}

/* Toplu aksiyon barı */
.pm-bulk-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.55rem 0.75rem;
    border: 1px solid rgba(13, 110, 253, 0.14);
    background: rgba(13, 110, 253, 0.04);
    border-radius: 0.7rem;
    margin-bottom: 0.9rem;
}
.pm-bulk-bar .pm-bulk-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: #1f2937;
    white-space: nowrap;
}
.pm-bulk-bar select { max-width: 9.5rem; }
.pm-bulk-bar .pm-bulk-pct { max-width: 6.5rem; text-align: right; }

/* Sıralanabilir başlıklar */
th[data-sort] {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
th[data-sort]:hover { color: #0d6efd; }

/* Salt okunur oran hücresi */
.pm-ratio-cell {
    font-weight: 700;
    color: #0d6efd;
    font-variant-numeric: tabular-nums;
}

/* Bütçe → Hedef mini paneli (Ekran 1) */
.pm-budget-panel {
    background: linear-gradient(180deg, rgba(13, 110, 253, 0.04), rgba(13, 110, 253, 0));
    border: 1px solid rgba(13, 110, 253, 0.12);
    border-radius: 0.8rem;
    padding: 0.5rem 0.75rem;
}
.pm-budget-panel .table { margin-bottom: 0; }
.pm-budget-panel .table > :not(caption) > * > * { background: transparent; }
.pm-hint {
    color: #6c757d;
    font-size: 0.8rem;
}

/* Düzenlenebilir hücre girişleri */
.pm-inp {
    max-width: 100%;
}
.pm-inp-money { text-align: right; }
.pm-inp-num   { text-align: right; max-width: 6.5rem; }
td .pm-inp { min-width: 6rem; }
td .pm-inp-comment { min-width: 11rem; }

/* Kaydet/Güncelle butonu satırı */
.pm-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-top: 0.9rem;
}
.pm-reset-link {
    font-size: 0.82rem;
    color: #6c757d;
    text-decoration: none;
    border: 0;
    background: none;
    cursor: pointer;
}
.pm-reset-link:hover { color: #0d6efd; text-decoration: underline; }

/* "Her şey dahil üst sınır" vurgu kutusu (Ekran 3) */
.pm-cap-callout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: linear-gradient(180deg, rgba(24, 188, 156, 0.10), rgba(24, 188, 156, 0));
    border: 1px solid rgba(24, 188, 156, 0.22);
    border-radius: 0.9rem;
    padding: 0.9rem 1.15rem;
}
.pm-cap-callout .pm-cap-label { font-weight: 600; color: #1f2937; }
.pm-cap-callout .pm-cap-value {
    font-size: 1.45rem;
    font-weight: 700;
    color: #0f5132;
}

/* Pay toplamı rozeti (Ekran 3) */
.pm-sum-badge { font-weight: 600; }
.pm-sum-ok    { color: #0f5132; background: rgba(25, 135, 84, 0.12); }
.pm-sum-warn  { color: #842029; background: rgba(220, 53, 69, 0.12); }

/* Notlar / açık sorular kutusu (Ekran 2) */
.pm-note-card {
    border: 1px dashed rgba(13, 110, 253, 0.28);
    background: rgba(13, 110, 253, 0.03);
    border-radius: 0.8rem;
    padding: 0.85rem 1rem;
}
.pm-note-card .pm-note-title {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6c757d;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

/* Toast */
.pm-toast-wrap {
    position: fixed;
    right: 1.1rem;
    bottom: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    z-index: 1080;
}
.pm-toast {
    min-width: 240px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-left: 4px solid var(--pm-accent);
    border-radius: 0.7rem;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.16);
    padding: 0.7rem 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: #1f2937;
    font-size: 0.9rem;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.pm-toast.show { opacity: 1; transform: translateY(0); }
.pm-toast.pm-toast-warn { border-left-color: #f39c12; }
.pm-toast .fa-circle-check { color: var(--pm-accent); }
.pm-toast.pm-toast-warn .fa-triangle-exclamation { color: #f39c12; }

/* Bilgi etiketleri (stoksuzluk/kasa önü) */
.pm-tag {
    display: inline-block;
    padding: 0.12rem 0.5rem;
    border-radius: 0.5rem;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.4;
}
.pm-tag-low  { color: #0f5132; background: rgba(25, 135, 84, 0.12); }
.pm-tag-mid  { color: #664d03; background: rgba(255, 193, 7, 0.18); }
.pm-tag-high { color: #842029; background: rgba(220, 53, 69, 0.12); }
.pm-tag-yes  { color: #0f5132; background: rgba(25, 135, 84, 0.12); }
.pm-tag-no   { color: #6c757d; background: rgba(108, 117, 125, 0.12); }

/* ------------------------------ Responsive ------------------------------ */
@media (max-width: 991.98px) {
    .pm-sidebar { transform: translateX(-100%); }
    .pm-sidebar.open { transform: translateX(0); }
    .pm-main { margin-left: 0; }
    .pm-burger { display: inline-flex; align-items: center; }
}

/* Çok kolonlu tablolar: sabit yerleşim yerine içeriğe göre genişle + gerekirse
   .table-responsive ile yatay kaydır. (portal-combined-table varsayılanı table-layout:fixed
   olduğundan çok kolonda başlıklar taşıp üst üste biniyordu.) */
.pm-wide-table.portal-combined-table {
    table-layout: auto;
    width: auto;
    min-width: 100%;
}
.pm-wide-table.portal-combined-table thead th,
.pm-wide-table.portal-combined-table > tbody > tr > * {
    white-space: nowrap;
}
.pm-wide-table.portal-combined-table th,
.pm-wide-table.portal-combined-table td {
    padding-left: 0.7rem;
    padding-right: 0.7rem;
}

/* Takım Adı kolonu: başlığın sağ kenarından sürüklenerek genişletilip
   daraltılabilir; genişlik tablo üzerindeki --tk-adi değişkeninden gelir. */
th.pm-col-resize { position: relative; }
th.pm-col-resize::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 8px;
    height: 100%;
    cursor: col-resize;
}
.pm-wide-table th.pm-tk-adi { width: var(--tk-adi, 22rem); }
.pm-wide-table td.pm-tk-adi {
    max-width: var(--tk-adi, 22rem);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Alt Grup tabı üst özet tablosu — Excel görseli düzeni (CIGAR+ / WINE+) */
.pm-altgrup-ozet {
    table-layout: fixed;
    width: 100%;
    min-width: 56rem;
    border-collapse: collapse;
    font-size: .85rem;
}
.pm-altgrup-ozet th,
.pm-altgrup-ozet td {
    border: 1px solid #b7c4d8;
    padding: .3rem .6rem;
}
.pm-altgrup-ozet th:first-child,
.pm-altgrup-ozet td:first-child { width: 13rem; }
.pm-to-bos { background: transparent; border: none !important; }
.pm-to-oranlar { background: #ffffff; font-weight: 600; text-align: left; }
.pm-to-magaza { background: #1f4e9c; color: #fff; text-align: center; font-weight: 700; }
.pm-to-ltc { background: #9dc3e6; color: #1b2a41; font-weight: 700; }
.pm-to-hedef { background: #21a366; color: #fff; text-align: center; font-weight: 700; }
.pm-to-kategori { background: #d92b2b; color: #fff; font-weight: 600; white-space: nowrap; }
.pm-to-deger { background: #eaf2fb; text-align: right; }
.pm-to-blok { background: #0070c0; color: #fff; font-size: 1.15rem; font-weight: 800; }
.pm-to-toplam { background: #ffc000; text-align: right; font-weight: 700; }

/* Onay modalı (Sistemi Sıfırla) */
.pm-modal {
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1080;
}
.pm-modal[hidden] { display: none; }
.pm-modal-card {
    background: #fff;
    border-radius: .5rem;
    padding: 1.25rem 1.5rem;
    max-width: 27rem;
    width: calc(100% - 2rem);
    box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
}
.pm-modal-title {
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: .75rem;
    color: #b02a37;
}
.pm-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
}

/* Tanım formu modalı */
.pm-modal-title-notr { color: #1b2a41; }
.pm-ka-form label {
    display: block;
    margin-bottom: .65rem;
    font-size: .85rem;
    font-weight: 600;
    color: #344054;
}
.pm-ka-form select { margin-top: .2rem; width: 100%; }