body { background: #f5f6f8; }

/* Sol panel: tam siyah, başlıklara tıklayınca açılan menü, altta dil / kullanıcı / çıkış */
.sidebar { width: 260px; flex-shrink: 0; background: #000; color: #fff; padding: 1rem .75rem; }
@media (min-width: 768px) {
    .sidebar { position: sticky; top: 0; height: 100vh; }
}
@media (max-width: 767.98px) {
    .sidebar { width: 100%; }
}
.sidebar .brand { color: #fff; padding: .25rem .5rem 1.25rem; }
.sidebar .brand-logo { width: 36px; height: 36px; border-radius: .5rem; object-fit: contain; background: #fff; }
.sidebar img.brand-logo { padding: 3px; }
.sidebar .brand-logo-placeholder { display: inline-flex; align-items: center; justify-content: center; background: #fff; color: #000; font-size: 1.1rem; }
.sidebar .brand-name { font-size: 1.25rem; font-weight: 600; letter-spacing: .01em; }
.sidebar-menu { overflow-y: auto; min-height: 0; flex-wrap: nowrap; }
.sidebar .nav-link { color: rgba(255,255,255,.75); padding: .4rem .6rem; border-radius: .35rem; }
.sidebar .nav-link:hover, .sidebar .nav-link.active { color: #fff; background: rgba(255,255,255,.12); }
.sidebar .nav-link.disabled { color: rgba(255,255,255,.4); }
.sidebar .nav-section { display: flex; align-items: center; gap: .5rem; width: 100%; margin-top: .25rem; padding: .45rem .6rem;
    border: 0; border-radius: .35rem; background: none; color: rgba(255,255,255,.85); text-align: left; font-weight: 500; }
.sidebar .nav-section:hover { color: #fff; background: rgba(255,255,255,.08); }
.sidebar .nav-section .chevron { font-size: .75rem; transition: transform .2s; }
.sidebar .nav-section.collapsed .chevron { transform: rotate(-90deg); }
.sidebar .sub-link { display: block; width: 100%; padding-left: 2.1rem; font-size: .9rem; text-align: left; border: 0; background: none; }
.sidebar .notification-link { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar .notification-link.unread { color: #fff; font-weight: 600; }
/* Ana alan: geniş içerik (Gantt gibi) sayfayı genişletmesin, kendi kutusunda kaysın; sol menü yerinde kalır. */
.app-main { min-width: 0; }

.sidebar-footer { border-top: 1px solid rgba(255,255,255,.15); padding: 1rem .5rem 0; margin-top: .75rem; }
.app-version { color: rgba(255,255,255,.5); }

.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.stat-value { font-size: 1.75rem; font-weight: 600; }

/* Proje: süreç planı (WBS tablosu + Gantt). Satır yükseklikleri GanttLayout::ROW / HEADER ile aynı olmalı. */
.pm-plan { display: flex; gap: 0; border: 1px solid var(--bs-border-color); border-radius: .5rem; background: #fff; overflow: hidden; }
.pm-grid { flex: 0 0 auto; max-width: 62%; overflow-x: auto; border-right: 2px solid var(--bs-border-color); }
.pm-grid table { margin: 0; font-size: .85rem; }
.pm-grid thead th { height: 44px; vertical-align: middle; white-space: nowrap; background: #f8f9fa; font-weight: 600; }
.pm-grid tbody td { height: 34px; padding-top: 0; padding-bottom: 0; vertical-align: middle; white-space: nowrap; }
.pm-grid tbody tr.pm-summary td { font-weight: 600; background: #fafbfc; }
.pm-grid tbody tr.pm-critical .pm-name a { color: #b42318; }
.pm-grid .pm-name { min-width: 240px; max-width: 360px; overflow: hidden; text-overflow: ellipsis; }
.pm-grid .pm-row-no { color: #8a8f98; text-align: right; width: 2.5rem; }
.pm-gantt { flex: 1 1 auto; min-width: 0; overflow-x: auto; }
.pm-gantt-inner { position: relative; }
.pm-gantt-header { position: absolute; top: 0; left: 0; right: 0; height: 44px; background: #f8f9fa; border-bottom: 1px solid var(--bs-border-color); font-size: .72rem; color: #555; }
.pm-gantt-header .pm-top, .pm-gantt-header .pm-bottom { position: absolute; height: 22px; line-height: 22px; padding-left: 4px; white-space: nowrap; overflow: hidden; border-left: 1px solid #e3e5e8; }
.pm-gantt-header .pm-top { top: 0; font-weight: 600; }
.pm-gantt-header .pm-bottom { top: 22px; border-top: 1px solid #e3e5e8; }
.pm-gantt-body { position: absolute; top: 44px; left: 0; right: 0; background-image: repeating-linear-gradient(to bottom, transparent 0 33px, #eef0f2 33px 34px); }
.pm-weekend { position: absolute; top: 0; bottom: 0; background: rgba(0,0,0,.035); }
.pm-today { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px solid #e8590c; z-index: 3; }
.pm-due { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px dashed #b42318; z-index: 3; }
.pm-links { position: absolute; top: 0; left: 0; pointer-events: none; z-index: 1; overflow: visible; }
.pm-links path { fill: none; stroke: #6c757d; stroke-width: 1.2; }
.pm-links path.critical { stroke: #b42318; }
.pm-bar, .pm-bar-summary, .pm-diamond, .pm-baseline { position: absolute; z-index: 2; }
.pm-bar { height: 16px; margin-top: -8px; border-radius: 3px; background: #9ec5fe; border: 1px solid #3d8bfd; overflow: hidden; }
.pm-bar .pm-bar-progress { height: 100%; background: #0d6efd; }
.pm-bar.review { background: #d6c8f5; border-color: #8a63d2; }
.pm-bar.review .pm-bar-progress { background: #6f42c1; }
.pm-bar.critical { background: #f7c1bd; border-color: #d92d20; }
.pm-bar.critical .pm-bar-progress { background: #b42318; }
.pm-bar.done { background: #b7e4c7; border-color: #2f9e44; }
.pm-bar.done .pm-bar-progress { background: #2f9e44; }
.pm-bar-summary { height: 7px; margin-top: -6px; background: #212529; }
.pm-bar-summary::before, .pm-bar-summary::after { content: ""; position: absolute; top: 0; border-top: 9px solid #212529; border-left: 5px solid transparent; border-right: 5px solid transparent; }
.pm-bar-summary::before { left: -5px; }
.pm-bar-summary::after { right: -5px; }
.pm-diamond { width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; transform: rotate(45deg); background: #212529; }
.pm-diamond.review { background: #6f42c1; }
.pm-diamond.critical { outline: 2px solid #d92d20; }
.pm-diamond.done { background: #2f9e44; }
.pm-baseline { height: 4px; margin-top: 9px; background: #adb5bd; border-radius: 2px; z-index: 1; }
.pm-bar-label { position: absolute; z-index: 2; margin-top: -9px; font-size: .72rem; white-space: nowrap; color: #343a40; }
.pm-bar-label.late { color: #b42318; font-weight: 600; }
.pm-legend { display: inline-flex; align-items: center; gap: .35rem; margin-right: .9rem; }
.pm-legend .pm-bar, .pm-legend .pm-diamond, .pm-legend .pm-bar-summary, .pm-legend .pm-baseline { position: relative; display: inline-block; margin: 0; }
.pm-legend .pm-bar { width: 22px; height: 10px; }
.pm-legend .pm-diamond { width: 9px; height: 9px; }
.pm-legend .pm-bar-summary { width: 22px; height: 5px; }
.pm-legend .pm-baseline { width: 22px; }
@media (max-width: 991.98px) {
    .pm-plan { flex-direction: column; }
    .pm-grid { max-width: 100%; border-right: 0; border-bottom: 2px solid var(--bs-border-color); }
}

/* Giriş ekranı: solda siyah panelde form (sol menüyle aynı stil), sağda tam ekran fotoğraf. Mobilde fotoğraf gizlenir. */
.login-page { background: #000; }
.login-wrap { display: flex; min-height: 100vh; }
.login-panel { display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; width: 460px; flex-shrink: 0;
    background: #000; color: #fff; padding: 2rem 3rem; }
.login-panel .brand { color: #fff; }
.login-panel .brand-logo { width: 36px; height: 36px; border-radius: .5rem; object-fit: contain; background: #fff; }
.login-panel img.brand-logo { padding: 3px; }
.login-panel .brand-logo-placeholder { display: inline-flex; align-items: center; justify-content: center; color: #000; font-size: 1.1rem; }
.login-panel .brand-name { font-size: 1.25rem; font-weight: 600; letter-spacing: .01em; }
.login-body { width: 100%; max-width: 360px; margin: 0 auto; }
.login-muted { color: rgba(255,255,255,.6); }
.login-panel .form-label { color: rgba(255,255,255,.85); font-size: .9rem; }
.login-panel .form-control { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.2); color: #fff; }
.login-panel .form-control:focus { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.6); color: #fff;
    box-shadow: 0 0 0 .2rem rgba(255,255,255,.15); }
.login-panel .form-control:-webkit-autofill { -webkit-text-fill-color: #fff; -webkit-box-shadow: 0 0 0 1000px #1a1a1a inset; }
.login-photo { flex: 1 1 auto; background: #8e98a8 url("login-bg.jpg") 60% center / cover no-repeat; }
@media (max-width: 767.98px) {
    .login-panel { width: 100%; padding: 1.5rem 1.25rem; }
    .login-photo { display: none; }
}