:root {
    --primary: #1769aa;
    --primary-rgb: 23,105,170;
    --primary-dark: #153047;
    --primary-darker: #143651;
    --primary-soft: #e7f1f8;
    --bg: #f4f7fb;
    --panel: #ffffff;
    --panel-soft: #f8fafc;
    --navy: var(--primary-dark);
    --navy-2: var(--primary-darker);
    --blue: var(--primary);
    --green: #168a5b;
    --orange: #d48722;
    --red: #c0392b;
    --yellow: #f8c537;
    --muted: #6b7a8c;
    --border: #dbe4ee;
    --text: #162331;
    --shadow: 0 16px 40px rgba(13, 36, 56, 0.12);
    --radius: 18px;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
    margin: 0;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--bg);
    color: var(--text);
}
a { color: inherit; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

.login-body {
    min-height: 100vh;
    background:
        radial-gradient(circle at top left, rgba(var(--primary-rgb), 0.26), transparent 32rem),
        linear-gradient(135deg, var(--primary-darker) 0%, var(--primary-dark) 55%, var(--primary) 100%);
    display: grid;
    place-items: center;
    padding: 28px;
}
.login-shell { width: min(100%, 460px); }
.login-card {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 26px;
    padding: 30px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.35);
}
.login-brand {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-bottom: 28px;
}
.login-brand img, .brand-box img {
    width: 58px;
    height: 58px;
    object-fit: contain;
    border-radius: 14px;
    background: #fff;
}
.login-brand h1 { margin: 0; font-size: 30px; color: var(--navy); }
.login-brand p { margin: 6px 0 0; color: var(--muted); }
.login-form { display: grid; gap: 16px; }
.login-form label, .form-grid label, .form-column label {
    display: grid;
    gap: 7px;
    color: #314458;
    font-size: 14px;
    font-weight: 650;
}
input, select, textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 11px 12px;
    color: var(--text);
    background: #fff;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
textarea { min-height: 96px; resize: vertical; }
input:focus, select:focus, textarea:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.14);
}
.form-message { min-height: 22px; color: var(--red); font-size: 14px; }
.demo-users {
    margin-top: 20px;
    padding: 14px;
    display: grid;
    gap: 5px;
    border-radius: 14px;
    background: #edf4f8;
    color: #415367;
    font-size: 13px;
}

.app-shell { display: flex; min-height: 100vh; }
.sidebar {
    width: 282px;
    background: linear-gradient(180deg, var(--navy), #071927);
    color: #fff;
    padding: 22px;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    z-index: 20;
}
.brand-box {
    display: flex;
    gap: 13px;
    align-items: center;
    padding-bottom: 22px;
    border-bottom: 1px solid rgba(255,255,255,0.12);
}
.brand-box strong { display: block; font-size: 20px; letter-spacing: .2px; }
.brand-box small { color: rgba(255,255,255,.68); }
.main-nav { display: grid; gap: 8px; margin-top: 24px; }
.nav-link {
    border: 0;
    background: transparent;
    color: rgba(255,255,255,.78);
    text-align: left;
    border-radius: 13px;
    padding: 12px 13px;
    transition: background .15s ease, color .15s ease;
}
.nav-link:hover, .nav-link.active { background: rgba(255,255,255,.12); color: #fff; }
.sidebar-footer {
    margin-top: auto;
    padding: 16px;
    border-radius: 18px;
    background: rgba(255,255,255,.08);
    display: grid;
    gap: 5px;
}
.sidebar-footer small { color: rgba(255,255,255,.7); }
.sidebar-footer a { color: #fff; text-decoration: none; font-weight: 700; margin-top: 6px; }

.main-area { flex: 1; min-width: 0; }
.topbar {
    min-height: 92px;
    padding: 20px 28px;
    background: rgba(255,255,255,.88);
    border-bottom: 1px solid var(--border);
    display: flex;
    gap: 18px;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 10;
    backdrop-filter: blur(14px);
}
.topbar h1 { margin: 0; font-size: 26px; color: var(--navy); }
.topbar p { margin: 4px 0 0; color: var(--muted); }
.topbar-actions { display: flex; gap: 10px; align-items: center; }
.mobile-menu { display: none; border: 0; background: var(--navy); color: #fff; border-radius: 10px; padding: 10px 12px; }
.content-area { padding: 28px; }

.btn {
    border: 0;
    border-radius: 12px;
    padding: 10px 14px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 750;
    line-height: 1.1;
    transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--blue); color: #fff; box-shadow: 0 8px 24px rgba(var(--primary-rgb),.25); }
.btn-success { background: var(--green); color: #fff; }
.btn-warning { background: var(--orange); color: #fff; }
.btn-danger { background: var(--red); color: #fff; }
.btn-soft { background: #e9f2f8; color: var(--navy); }
.btn-ghost { background: transparent; color: var(--navy); border: 1px solid var(--border); }
.btn-full { width: 100%; }
.btn-small { padding: 7px 10px; border-radius: 10px; font-size: 13px; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 8px 28px rgba(13, 36, 56, 0.06);
}
.card-pad { padding: 20px; }
.section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}
.section-title h2, .section-title h3 { margin: 0; color: var(--navy); }
.section-title p { margin: 5px 0 0; color: var(--muted); }
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}
.kpi-card {
    padding: 18px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid var(--border);
    box-shadow: 0 8px 24px rgba(13, 36, 56, 0.05);
}
.kpi-card span { color: var(--muted); font-weight: 700; font-size: 13px; }
.kpi-card strong { display: block; margin-top: 8px; font-size: 30px; color: var(--navy); }
.kpi-card small { color: var(--muted); }

.toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.toolbar-left, .toolbar-right { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.toolbar input, .toolbar select { width: auto; min-width: 190px; }
.table-wrap { width: 100%; overflow-x: auto; border-radius: 16px; border: 1px solid var(--border); background: #fff; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 13px 14px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
th { background: #f0f5f9; color: #344a5f; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
tbody tr:hover { background: #fbfdff; }
td.actions { white-space: nowrap; }
.empty-state { padding: 34px; text-align: center; color: var(--muted); }
.muted { color: var(--muted); }
.money { font-variant-numeric: tabular-nums; font-weight: 800; color: var(--navy); }

.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}
.badge.phase-ceka_obradu { background: #e7f0fb; color: #1d5c93; }
.badge.phase-ceka_nabavku { background: #e2f7ef; color: #12704b; }
.badge.phase-materijal_narucen { background: #fff4cf; color: #8a6100; }
.badge.phase-spremno_za_planiranje { background: #fff0bc; color: #7a5100; }
.badge.phase-proizvodnja_planirana { background: #ffe8d4; color: #98530a; }
.badge.phase-u_proizvodnji { background: #dce8f2; color: #183f5d; }
.badge.phase-proizvedeno { background: #e5e7eb; color: #374151; }
.badge.phase-isporuceno { background: #dff8e7; color: #116b38; }
.badge.phase-fakturisano { background: #d7f1ff; color: #075985; }
.badge.ok { background: #dff8e7; color: #116b38; }
.badge.no { background: #eef2f7; color: #64748b; }
.badge.warn { background: #fff4cf; color: #8a6100; }
.badge.danger { background: #ffe1dd; color: #a3261c; }

.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 18px; }
.tab-btn {
    border: 1px solid var(--border);
    background: #fff;
    color: #344a5f;
    border-radius: 999px;
    padding: 9px 13px;
    font-weight: 800;
}
.tab-btn.active { background: var(--navy); color: #fff; border-color: var(--navy); }
.detail-header {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 18px;
}
.detail-header h2 { margin: 0; color: var(--navy); }
.detail-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 9px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.form-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-column { display: grid; gap: 15px; }
.form-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; }
.inline-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.inline-row > * { flex: 1; min-width: 170px; }
.checkbox-row { display: flex !important; grid-template-columns: auto 1fr; gap: 10px !important; align-items: center; font-weight: 750; }
.checkbox-row input { width: auto; }
.note-box {
    padding: 14px;
    background: #f6f9fc;
    border: 1px solid var(--border);
    border-radius: 14px;
    color: #334155;
}
.history-list { display: grid; gap: 10px; }
.history-item {
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 12px 14px;
    background: #fff;
}
.history-item strong { color: var(--navy); }
.history-item small { display: block; color: var(--muted); margin-top: 3px; }
.comment-item { background: #f9fbfd; border-radius: 14px; padding: 12px; border: 1px solid var(--border); }

.modal-root {
    position: fixed;
    inset: 0;
    background: rgba(7, 24, 39, .58);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 60;
}
.modal-root.show { display: flex; }
.modal {
    width: min(100%, 860px);
    max-height: 92vh;
    overflow: auto;
    background: #fff;
    border-radius: 24px;
    box-shadow: var(--shadow);
    padding: 22px;
}
.modal-header { display: flex; justify-content: space-between; gap: 14px; align-items: center; margin-bottom: 18px; }
.modal-header h2 { margin: 0; color: var(--navy); }
.modal-close { border: 0; background: #eef2f7; border-radius: 50%; width: 36px; height: 36px; font-size: 18px; }
.toast {
    position: fixed;
    right: 24px;
    bottom: 24px;
    background: var(--navy);
    color: #fff;
    padding: 14px 16px;
    border-radius: 14px;
    box-shadow: var(--shadow);
    transform: translateY(18px);
    opacity: 0;
    pointer-events: none;
    transition: .2s ease;
    z-index: 80;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.error { background: var(--red); }

.planning-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.plan-card { padding: 16px; }
.plan-card h3 { margin: 0 0 8px; color: var(--navy); }
.plan-card dl { display: grid; grid-template-columns: 110px 1fr; gap: 8px 10px; margin: 12px 0 0; }
.plan-card dt { color: var(--muted); font-weight: 750; }
.plan-card dd { margin: 0; }

.report-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.report-card { padding: 18px; display: grid; gap: 12px; }
.report-card h3 { margin: 0; color: var(--navy); }
.report-card p { color: var(--muted); margin: 0; }

@media print {
    .sidebar, .topbar, .toolbar, .tabs, .btn, .form-actions { display: none !important; }
    .content-area { padding: 0; }
    .card { box-shadow: none; border: 0; }
    body { background: #fff; }
}

@media (max-width: 1100px) {
    .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .report-grid { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
    .sidebar {
        position: fixed;
        transform: translateX(-104%);
        transition: transform .2s ease;
        box-shadow: var(--shadow);
    }
    .sidebar.open { transform: translateX(0); }
    .mobile-menu { display: inline-flex; }
    .topbar { align-items: flex-start; padding: 16px; }
    .topbar-actions { display: none; }
    .content-area { padding: 16px; }
    .form-grid, .form-grid.three { grid-template-columns: 1fr; }
    .kpi-grid { grid-template-columns: 1fr; }
    .toolbar input, .toolbar select { width: 100%; min-width: 0; }
    .toolbar-left, .toolbar-right { width: 100%; }
    .toolbar-left > *, .toolbar-right > * { flex: 1; }
    .detail-header { display: grid; }
}

.notification-btn { position: relative; }
.notification-count {
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--red);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 900;
}
.notification-count.is-empty { background: #9aa7b5; }
.notification-list { display: grid; gap: 12px; }
.notification-item {
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 14px;
    padding: 13px;
}
.notification-item.unread {
    border-color: rgba(var(--primary-rgb), .35);
    background: #f2f8fd;
}
.notification-item strong { color: var(--navy); }
.notification-item small { display: block; color: var(--muted); margin-top: 4px; }
.notification-item p { margin: 9px 0; }
.project-group { display: grid; gap: 10px; margin-top: 16px; }
.project-group + .project-group { margin-top: 28px; }
.section-title.compact { margin-bottom: 8px; }
.section-title.compact h3 { margin: 0; }
.task-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.task-card {
    border: 1px solid var(--border);
    border-radius: 16px;
    background: #fff;
    padding: 16px;
    display: grid;
    gap: 12px;
}
.task-card.late { border-color: rgba(192, 57, 43, .35); background: #fffafa; }
.task-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.task-head strong { color: var(--navy); }
.task-head small { display: block; margin-top: 4px; color: var(--muted); }
.task-card p { margin: 0; color: #334155; }
.task-card dl { display: grid; grid-template-columns: 95px 1fr; gap: 7px 10px; margin: 0; }
.task-card dt { color: var(--muted); font-weight: 800; }
.task-card dd { margin: 0; }
.sector-notes { display: grid; gap: 10px; }
.sector-notes h3 { margin: 0; color: var(--navy); }
.sector-note { background: #f6f9fc; }

.nav-count {
    float: right;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: rgba(248, 197, 55, .95);
    color: #071927;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 900;
}
.nav-count.is-empty { background: rgba(255,255,255,.18); color: rgba(255,255,255,.72); }
.update-notice {
    margin-bottom: 16px;
    padding: 13px 14px;
    border: 1px solid rgba(var(--primary-rgb), .28);
    border-radius: 14px;
    background: #eef7ff;
    color: var(--navy);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.update-notice[hidden] { display: none; }
.update-notice span { font-weight: 750; }
@media (max-width: 640px) {
    .update-notice { align-items: stretch; flex-direction: column; }
}

.date-input {
    letter-spacing: .02em;
}
.dynamics-wrap { display: grid; gap: 16px; }
.timeline-axis,
.timeline-chart {
    display: grid;
    gap: 0;
    min-width: 760px;
}
.dynamics-wrap { overflow-x: auto; }
.timeline-axis {
    align-items: end;
    height: 34px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    border-bottom: 1px solid var(--border);
}
.timeline-tick {
    position: relative;
    min-width: 10px;
    border-left: 1px solid rgba(15, 23, 42, .12);
    height: 100%;
}
.timeline-tick span {
    position: absolute;
    left: 4px;
    bottom: 6px;
    white-space: nowrap;
}
.timeline-chart {
    row-gap: 10px;
    align-items: center;
}
.timeline-label {
    padding: 6px 12px 6px 0;
    border-bottom: 1px solid rgba(15, 23, 42, .07);
    min-height: 46px;
}
.timeline-label strong {
    color: var(--navy);
    display: block;
    line-height: 1.25;
}
.timeline-label small {
    color: var(--muted);
    display: block;
    margin-top: 3px;
}
.timeline-track {
    position: relative;
    height: 46px;
    border-bottom: 1px solid rgba(15, 23, 42, .07);
    background: repeating-linear-gradient(90deg, rgba(15, 23, 42, .045) 0, rgba(15, 23, 42, .045) 1px, transparent 1px, transparent calc(100% / 14));
}
.timeline-bar {
    position: absolute;
    top: 9px;
    min-width: 8px;
    height: 28px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--primary), #17a673);
    box-shadow: 0 8px 16px rgba(var(--primary-rgb), .18);
    color: #fff;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.timeline-bar span {
    padding: 0 10px;
    font-size: 12px;
    font-weight: 850;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
@media (max-width: 860px) {
    .timeline-axis,
    .timeline-chart { min-width: 680px; }
}

/* Attention badges for tasks and notifications */
.notification-count,
.nav-count {
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    border-radius: 999px;
    background: #dc2626;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 950;
    line-height: 1;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .14), 0 8px 18px rgba(220, 38, 38, .28);
}
.notification-count:not(.is-empty),
.nav-count:not(.is-empty) {
    animation: badgePulse 1.9s ease-in-out infinite;
}
.notification-count.is-empty,
.nav-count.is-empty {
    display: none;
}
.nav-count {
    float: right;
    margin-left: 10px;
}
@keyframes badgePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

/* Dynamics 365-inspired project timeline */
.dynamics-board {
    display: grid;
    gap: 16px;
}
.dynamics-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}
.dynamics-kpi {
    border: 1px solid var(--border);
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff, #f8fbfd);
    padding: 15px 16px;
    box-shadow: 0 10px 26px rgba(13, 36, 56, .06);
}
.dynamics-kpi span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 900;
    margin-bottom: 7px;
}
.dynamics-kpi strong {
    color: var(--navy);
    font-size: 17px;
    line-height: 1.25;
}
.dynamics-kpi.attention {
    border-color: rgba(220, 38, 38, .24);
    background: linear-gradient(180deg, #fff, #fff7f7);
}
.dyn-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 16px;
    padding: 12px 14px;
}
.dyn-legend span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 800;
    color: #334155;
}
.dyn-dot {
    width: 11px;
    height: 11px;
    border-radius: 999px;
    display: inline-block;
}
.dyn-dot.sales { background: #22c55e; }
.dyn-dot.technical { background: #3b82f6; }
.dyn-dot.order { background: #f59e0b; }
.dyn-dot.planning { background: #a855f7; }
.dyn-dot.production { background: #334155; }
.dyn-dot.delivery { background: #10b981; }
.dyn-dot.invoice { background: #0ea5e9; }
.dyn-chart-card {
    border: 1px solid var(--border);
    border-radius: 20px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 14px 38px rgba(13, 36, 56, .08);
}
.dyn-scroll {
    overflow: auto;
    max-width: 100%;
}
.dyn-svg {
    display: block;
    min-width: 100%;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.dyn-bg { fill: #ffffff; }
.dyn-axis-title {
    fill: #0d2438;
    font-size: 14px;
    font-weight: 900;
}
.dyn-axis-title.right {
    text-anchor: end;
}
.dyn-axis-text {
    fill: #64748b;
    font-size: 11px;
    font-weight: 800;
}
.dyn-grid-line {
    stroke: rgba(100, 116, 139, .16);
    stroke-width: 1;
    shape-rendering: crispEdges;
}
.dyn-left-divider {
    stroke: rgba(13, 36, 56, .16);
    stroke-width: 1.5;
    shape-rendering: crispEdges;
}
.dyn-row-bg { fill: #ffffff; }
.dyn-row-odd .dyn-row-bg { fill: #f8fbfd; }
.dyn-label {
    fill: #102a43;
    font-size: 13px;
    font-weight: 900;
}
.dyn-sublabel {
    fill: #64748b;
    font-size: 11px;
    font-weight: 700;
}
.dyn-days {
    fill: #475569;
    font-size: 12px;
    font-weight: 900;
}
.dyn-bar {
    filter: drop-shadow(0 8px 10px rgba(13, 36, 56, .16));
}
.dyn-sales { fill: url(#dynGradSales); }
.dyn-technical { fill: url(#dynGradTechnical); }
.dyn-order { fill: url(#dynGradOrder); }
.dyn-planning { fill: url(#dynGradPlanning); }
.dyn-planned-production { fill: rgba(51, 65, 85, .25); stroke: #334155; stroke-width: 2; stroke-dasharray: 6 4; }
.dyn-production { fill: url(#dynGradProduction); }
.dyn-delivery { fill: url(#dynGradDelivery); }
.dyn-invoice { fill: url(#dynGradInvoice); }
.dyn-state-late { fill: #dc2626; }
.dyn-state-active { opacity: .88; }
.dyn-state-planned { opacity: .82; }
.dyn-milestone {
    filter: drop-shadow(0 7px 10px rgba(13, 36, 56, .18));
}
.dyn-bar-text {
    fill: #fff;
    font-size: 11px;
    font-weight: 950;
    pointer-events: none;
}
.dyn-bar-text.dark { fill: #102a43; }
.dyn-today-line {
    stroke: #dc2626;
    stroke-width: 2;
    stroke-dasharray: 7 5;
}
.dyn-today-pill { fill: #dc2626; }
.dyn-today-text {
    fill: #fff;
    font-size: 11px;
    font-weight: 950;
    text-anchor: middle;
}
.dynamics-help {
    border: 1px solid rgba(var(--primary-rgb), .18);
    border-radius: 16px;
    background: #f1f8ff;
    color: #334155;
    padding: 13px 14px;
    font-size: 14px;
}
.dynamics-help strong { color: var(--navy); }

@media (max-width: 1100px) {
    .dynamics-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .dynamics-kpis { grid-template-columns: 1fr; }
    .dyn-legend { gap: 8px; }
}

/* Final visual fixes: attention badges and responsive Dynamics-style timeline */
.nav-link { position: relative; padding-right: 50px; }
.nav-count,
.notification-count {
    min-width: 24px !important;
    width: auto !important;
    height: 24px !important;
    padding: 0 7px !important;
    border-radius: 999px !important;
    background: #dc2626 !important;
    color: #fff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .18), 0 10px 22px rgba(220, 38, 38, .34) !important;
    animation: badgePulse 1.7s ease-in-out infinite;
}
.nav-count {
    float: none !important;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 0 !important;
}
.notification-btn { position: relative; }
.notification-count {
    position: absolute;
    top: -8px;
    right: -8px;
    z-index: 2;
}
.nav-count.is-empty,
.notification-count.is-empty {
    display: none !important;
    animation: none !important;
}
@keyframes badgePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.09); }
}
.nav-count:not(.is-empty) { transform: translateY(-50%); }
.nav-count:not(.is-empty) { animation: navBadgePulse 1.7s ease-in-out infinite; }
@keyframes navBadgePulse {
    0%, 100% { transform: translateY(-50%) scale(1); }
    50% { transform: translateY(-50%) scale(1.09); }
}

.dyn2-card {
    border: 1px solid var(--border);
    border-radius: 20px;
    background: linear-gradient(180deg, #ffffff, #f7fbff);
    overflow: hidden;
    box-shadow: 0 14px 38px rgba(13, 36, 56, .08);
}
.dyn2-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.dyn2-stage {
    position: relative;
    padding: 14px 14px 18px;
}
.dyn2-axis,
.dyn2-row {
    display: grid;
    grid-template-columns: 230px minmax(var(--chart-width), 1fr) 82px;
    align-items: stretch;
}
.dyn2-axis {
    min-height: 56px;
    color: #475569;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.dyn2-axis-label {
    display: flex;
    align-items: flex-start;
    padding: 8px 12px 0 4px;
    color: #0d2438;
}
.dyn2-axis-label.right {
    justify-content: flex-end;
    padding-right: 4px;
}
.dyn2-axis-track,
.dyn2-track {
    position: relative;
    min-width: 0;
}
.dyn2-axis-track {
    height: 56px;
    border-left: 1px solid rgba(100,116,139,.16);
    border-right: 1px solid rgba(100,116,139,.16);
}
.dyn2-tick {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(100,116,139,.22);
}
.dyn2-tick em {
    position: absolute;
    top: 7px;
    left: 5px;
    font-style: normal;
    color: #64748b;
    white-space: nowrap;
}
.dyn2-today {
    position: absolute;
    top: 28px;
    bottom: 0;
    width: 2px;
    background: #dc2626;
    box-shadow: 0 0 0 3px rgba(220,38,38,.12);
    z-index: 4;
}
.dyn2-today i {
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    font-style: normal;
    background: #dc2626;
    color: #fff;
    border-radius: 999px;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 950;
    box-shadow: 0 7px 16px rgba(220,38,38,.24);
}
.dyn2-rows {
    position: relative;
}
.dyn2-today-line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgba(220,38,38,.62);
    box-shadow: 0 0 0 3px rgba(220,38,38,.08);
    z-index: 4;
    pointer-events: none;
}
.dyn2-row {
    min-height: 64px;
    border-top: 1px solid rgba(219, 228, 238, .9);
    background: #fff;
}
.dyn2-row:nth-child(even) { background: #f8fbfd; }
.dyn2-row.is-late { background: #fff7f7; }
.dyn2-label-col {
    padding: 12px 14px 10px 4px;
    min-width: 0;
}
.dyn2-label-col strong {
    display: block;
    color: #102a43;
    font-size: 13px;
    font-weight: 950;
    line-height: 1.2;
}
.dyn2-label-col small {
    display: block;
    margin-top: 4px;
    color: #64748b;
    font-size: 11px;
    font-weight: 750;
    line-height: 1.25;
}
.dyn2-track {
    min-height: 64px;
    overflow: hidden;
    border-left: 1px solid rgba(100,116,139,.14);
    border-right: 1px solid rgba(100,116,139,.14);
}
.dyn2-grid-bg {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(90deg, rgba(100,116,139,.13) 0, rgba(100,116,139,.13) 1px, transparent 1px, transparent 10%);
    opacity: .75;
}
.dyn2-bar {
    position: absolute;
    top: 19px;
    height: 26px;
    min-width: 16px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    overflow: hidden;
    color: #fff;
    box-shadow: 0 10px 20px rgba(13,36,56,.16);
    z-index: 3;
}
.dyn2-bar span {
    padding: 0 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
    font-weight: 950;
    text-shadow: 0 1px 2px rgba(0,0,0,.18);
}
.dyn2-sales { background: linear-gradient(90deg, #22c55e, #14b8a6); }
.dyn2-technical { background: linear-gradient(90deg, #3b82f6, #06b6d4); }
.dyn2-order { background: linear-gradient(90deg, #f59e0b, #f97316); }
.dyn2-planning { background: linear-gradient(90deg, #a855f7, #6366f1); }
.dyn2-planned-production {
    background: repeating-linear-gradient(90deg, rgba(51,65,85,.16) 0, rgba(51,65,85,.16) 8px, rgba(51,65,85,.30) 8px, rgba(51,65,85,.30) 16px);
    outline: 2px dashed #334155;
    color: #0f172a;
}
.dyn2-planned-production span { color: #0f172a; text-shadow: none; }
.dyn2-production { background: linear-gradient(90deg, #334155, #0f766e); }
.dyn2-delivery { background: linear-gradient(90deg, #10b981, #16a34a); }
.dyn2-invoice { background: linear-gradient(90deg, #0ea5e9, #2563eb); }
.dyn2-state-late { background: linear-gradient(90deg, #dc2626, #f97316) !important; }
.dyn2-state-active { opacity: .92; }
.dyn2-state-planned { opacity: .88; }
.dyn2-milestone {
    position: absolute;
    top: 14px;
    transform: translateX(-2px);
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 5;
    white-space: nowrap;
}
.dyn2-milestone b {
    width: 22px;
    height: 22px;
    transform: rotate(45deg);
    border-radius: 5px;
    background: linear-gradient(135deg, #22c55e, #14b8a6);
    box-shadow: 0 8px 18px rgba(34,197,94,.22);
}
.dyn2-milestone span {
    color: #102a43;
    font-size: 12px;
    font-weight: 950;
    background: rgba(255,255,255,.9);
    border: 1px solid rgba(219,228,238,.95);
    border-radius: 999px;
    padding: 4px 8px;
}
.dyn2-duration {
    display: grid;
    align-content: center;
    justify-items: end;
    padding: 9px 4px 9px 12px;
}
.dyn2-duration strong {
    color: #0d2438;
    font-size: 13px;
    font-weight: 950;
}
.dyn2-duration small {
    color: #64748b;
    font-size: 10px;
    font-weight: 800;
}

@media (max-width: 860px) {
    .topbar-actions {
        display: flex;
        margin-left: auto;
    }
    .topbar-actions #refreshBtn,
    .topbar-actions > a {
        display: none;
    }
    .notification-btn {
        width: 38px;
        height: 38px;
        padding: 0 !important;
        font-size: 0;
        border-radius: 12px;
    }
    .notification-btn::before {
        content: "🔔";
        font-size: 17px;
    }
    .notification-count {
        top: -7px;
        right: -7px;
    }
    .dyn2-stage {
        padding: 10px 10px 14px;
    }
    .dyn2-axis,
    .dyn2-row {
        grid-template-columns: 170px var(--chart-width) 62px;
    }
    .dyn2-label-col {
        padding-right: 10px;
    }
}
@media (max-width: 520px) {
    .dyn2-axis,
    .dyn2-row {
        grid-template-columns: 145px var(--chart-width) 54px;
    }
    .dyn2-label-col strong { font-size: 12px; }
    .dyn2-label-col small { font-size: 10px; }
    .dyn2-duration strong { font-size: 12px; }
    .dyn2-duration small { display: none; }
}


/* BHF Planner light visual refresh */
:root {
    --bg: #f7fbff;
    --panel: #ffffff;
    --panel-soft: #fbfdff;
    --navy: #24445c;
    --navy-2: #2f5f7c;
    --blue: #2f8fcb;
    --green: #22a06b;
    --orange: #e49a35;
    --red: #d44234;
    --yellow: #f6d15c;
    --muted: #718498;
    --border: #e4edf5;
    --text: #1c2e3c;
    --shadow: 0 16px 40px rgba(31, 78, 110, 0.12);
}
body {
    background: linear-gradient(180deg, #f7fbff 0%, #eef7fc 100%);
}
.login-body {
    background:
        radial-gradient(circle at top left, rgba(47, 143, 203, 0.26), transparent 34rem),
        radial-gradient(circle at bottom right, rgba(34, 160, 107, 0.18), transparent 30rem),
        linear-gradient(135deg, #f7fbff 0%, #e8f5fb 100%);
}
.login-card {
    box-shadow: 0 26px 70px rgba(36, 68, 92, 0.16);
}
.sidebar {
    background: linear-gradient(180deg, #ffffff 0%, #eaf6fc 100%);
    color: var(--navy);
    border-right: 1px solid var(--border);
    box-shadow: 8px 0 30px rgba(36, 68, 92, .05);
}
.brand-box {
    border-bottom-color: rgba(47, 143, 203, .18);
}
.brand-box small,
.sidebar-footer small {
    color: var(--muted);
}
.nav-link {
    color: #486176;
}
.nav-link:hover,
.nav-link.active {
    background: #dff1fa;
    color: var(--navy);
}
.sidebar-footer {
    background: #f3f9fd;
    border: 1px solid var(--border);
}
.sidebar-footer a {
    color: var(--blue);
}
.topbar {
    background: rgba(255,255,255,.92);
}
.mobile-menu {
    background: var(--blue);
}
.btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    box-shadow: 0 8px 24px rgba(var(--primary-rgb),.22);
}
.btn-soft {
    background: #edf7fc;
    color: var(--navy);
}
.card {
    box-shadow: 0 8px 28px rgba(31, 78, 110, 0.055);
}
.kpi-grid.compact-kpis {
    gap: 11px;
    margin-bottom: 16px;
}
.compact-kpis .kpi-card {
    padding: 12px 14px;
    border-radius: 15px;
    box-shadow: 0 6px 18px rgba(31, 78, 110, .045);
}
.compact-kpis .kpi-card span {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.compact-kpis .kpi-card strong {
    margin-top: 4px;
    font-size: 24px;
}
.compact-kpis .kpi-card small {
    font-size: 12px;
}
.dashboard-timeline-legend {
    margin-bottom: 12px;
}
.dashboard-project-row .dyn2-duration {
    gap: 4px;
}
.dashboard-project-row .dyn2-duration .btn {
    padding: 6px 9px;
}
.customer-status-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 18px 0;
}
.customer-status-card {
    border: 1px solid var(--border);
    border-radius: 17px;
    background: #fff;
    padding: 15px;
    display: grid;
    gap: 6px;
}
.customer-status-card span {
    color: var(--muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 900;
}
.customer-status-card strong {
    color: var(--navy);
    font-size: 18px;
}
.customer-status-card small {
    color: var(--muted);
}
.customer-status-card.done {
    background: linear-gradient(180deg, #ffffff, #f1fbf6);
    border-color: rgba(34,160,107,.22);
}
.customer-status-card.pending {
    background: linear-gradient(180deg, #ffffff, #f8fbff);
}
.customer-project-table .badge {
    margin: 2px;
}
@media (max-width: 1100px) {
    .customer-status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .customer-status-grid { grid-template-columns: 1fr; }
    .compact-kpis .kpi-card strong { font-size: 22px; }
}

/* Safety, date picker and cleaner project UI */
.input-error {
    border-color: var(--red) !important;
    box-shadow: 0 0 0 4px rgba(212, 66, 52, .12) !important;
}
.input-warning {
    border-color: var(--orange) !important;
}
.date-input {
    padding-right: 42px;
    background-image: linear-gradient(transparent, transparent), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2324445c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px 18px;
}
.date-picker-popover {
    position: fixed;
    width: 318px;
    max-width: calc(100vw - 20px);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: 0 22px 60px rgba(31, 78, 110, .22);
    padding: 12px;
    z-index: 100;
    display: none;
}
.date-picker-popover.show { display: block; }
.date-picker-head {
    display: grid;
    grid-template-columns: 38px 1fr 38px;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.date-picker-head strong {
    text-align: center;
    color: var(--navy);
    text-transform: capitalize;
}
.date-picker-head button,
.date-picker-foot button,
.date-picker-days button {
    border: 0;
    border-radius: 11px;
    background: #edf7fc;
    color: var(--navy);
    font-weight: 900;
}
.date-picker-head button { height: 36px; font-size: 22px; }
.date-picker-weekdays,
.date-picker-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}
.date-picker-weekdays span {
    text-align: center;
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}
.date-picker-days { margin-top: 6px; }
.date-picker-days button {
    height: 34px;
    background: #f7fbff;
}
.date-picker-days button:hover { background: #dff1fa; }
.date-picker-days button.today { outline: 2px solid rgba(var(--primary-rgb),.35); }
.date-picker-days button.selected { background: var(--blue); color: #fff; }
.date-picker-empty { min-height: 34px; }
.date-picker-foot {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
}
.date-picker-foot button { padding: 8px 10px; }

.tab-groups {
    display: grid;
    grid-template-columns: 1fr 2.2fr 1.25fr;
    gap: 12px;
    margin: 0 0 18px;
}
.tab-group {
    border: 1px solid var(--border);
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff, #f7fbff);
    padding: 10px;
}
.tab-group-title {
    display: block;
    margin: 0 0 8px 3px;
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 950;
}
.tab-group-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}
.tab-group .tab-btn {
    padding: 8px 11px;
    background: #fff;
}
.tab-group .tab-btn.active {
    background: linear-gradient(135deg, var(--blue), var(--primary-dark));
    border-color: transparent;
    box-shadow: 0 8px 20px rgba(var(--primary-rgb),.18);
}
.project-form-panel {
    border: 1px solid var(--border);
    border-radius: 20px;
    background: linear-gradient(180deg, #ffffff, #f8fcff);
    padding: 18px;
    box-shadow: 0 8px 24px rgba(31, 78, 110, .045);
}
.project-form-panel.compact { padding: 14px; }
.form-panel-head {
    margin-bottom: 14px;
}
.form-panel-head h3 {
    margin: 0;
    color: var(--navy);
}
.form-panel-head p {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 13px;
}
.project-form-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    align-items: start;
}
.form-grid.project-form-grid label:has(textarea),
.form-grid.project-form-grid .checkbox-row {
    grid-column: 1 / -1;
}
.sector-form textarea {
    min-height: 116px;
}
.plan-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}
.plan-card-head h3 { margin: 0; }
.plan-card.is-late {
    border-color: rgba(212,66,52,.35);
    background: linear-gradient(180deg, #ffffff, #fff7f7);
}
.planning-toolbar .toolbar-left {
    flex-wrap: wrap;
}
.planning-toolbar input { min-width: min(100%, 300px); }
.planning-toolbar select { width: auto; min-width: 170px; }
.planning-list-title { margin-top: 22px; }
.planning-timeline-card { margin-bottom: 12px; }
.planning-timeline-row .dyn2-duration {
    gap: 4px;
}
.planning-timeline-row .dyn2-duration .btn {
    padding: 6px 9px;
}
.dyn2-state-ready { opacity: .85; }

@media (max-width: 1120px) {
    .tab-groups { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .project-form-panel { padding: 14px; border-radius: 16px; }
    .planning-toolbar select { width: 100%; }
    .date-picker-popover { left: 10px !important; right: 10px; width: auto; }
}


/* Navigation and project tab icon polish */
.nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    line-height: 1.2;
}
.nav-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    background: rgba(47, 143, 203, .12);
    box-shadow: inset 0 0 0 1px rgba(47, 143, 203, .12);
    font-size: 15px;
}
.nav-link:hover .nav-icon,
.nav-link.active .nav-icon {
    background: #ffffff;
    box-shadow: 0 8px 18px rgba(36, 68, 92, .10), inset 0 0 0 1px rgba(47, 143, 203, .18);
}
.nav-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.tab-icon {
    width: 22px;
    height: 22px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 22px;
    background: rgba(47, 143, 203, .10);
    font-size: 13px;
}
.tab-btn.active .tab-icon {
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(47, 143, 203, .18);
}
.plan-card.is-finished,
.planning-grid .plan-card[data-finished="1"] {
    display: none;
}

/* Deadline, responsive graph and theme update */
.dyn2-scroll {
    overflow-x: hidden !important;
    overflow-y: hidden;
}
.dyn2-stage,
.dyn2-stage-fit {
    width: 100% !important;
    min-width: 0 !important;
    --chart-width: 0px;
}
.dyn2-axis,
.dyn2-row {
    grid-template-columns: minmax(122px, 210px) minmax(0, 1fr) minmax(58px, 76px) !important;
}
.dyn2-label-col strong,
.dyn2-label-col small,
.dyn2-duration small {
    overflow: hidden;
    text-overflow: ellipsis;
}
.dyn2-milestone {
    max-width: 95%;
}
.dyn2-milestone span {
    max-width: min(220px, 42vw);
    overflow: hidden;
    text-overflow: ellipsis;
}
.dyn-dot.deadline { background: #ef4444; }
.dyn2-deadline b {
    background: linear-gradient(135deg, #ef4444, #f97316) !important;
    box-shadow: 0 8px 18px rgba(239, 68, 68, .22) !important;
}
.dyn2-deadline span {
    color: #7f1d1d;
    border-color: rgba(239, 68, 68, .24);
    background: rgba(255, 247, 237, .94);
}
.theme-toggle {
    min-width: 104px;
}
body[data-theme="dark"] {
    --bg: #0f172a;
    --panel: #172033;
    --panel-soft: #1f293d;
    --navy: #dbeafe;
    --navy-2: #bfdbfe;
    --blue: #38bdf8;
    --green: #34d399;
    --orange: #fb923c;
    --red: #f87171;
    --muted: #94a3b8;
    --border: #334155;
    --text: #e5eefb;
    --shadow: 0 16px 40px rgba(0, 0, 0, 0.38);
    background: var(--bg);
    color: var(--text);
}
body[data-theme="dark"] .sidebar {
    background: linear-gradient(180deg, #020617, #0f172a);
}
body[data-theme="dark"] .topbar,
body[data-theme="dark"] .card,
body[data-theme="dark"] .modal,
body[data-theme="dark"] .login-card,
body[data-theme="dark"] .customer-status-card,
body[data-theme="dark"] .project-form-panel,
body[data-theme="dark"] .dyn2-card,
body[data-theme="dark"] .date-picker-popover {
    background: linear-gradient(180deg, #172033, #111827);
    border-color: var(--border);
    color: var(--text);
    box-shadow: var(--shadow);
}
body[data-theme="dark"] input,
body[data-theme="dark"] select,
body[data-theme="dark"] textarea {
    background: #0b1220;
    color: var(--text);
    border-color: var(--border);
}
body[data-theme="dark"] input:disabled,
body[data-theme="dark"] select:disabled,
body[data-theme="dark"] textarea:disabled {
    background: #111827;
    color: #94a3b8;
}
body[data-theme="dark"] .btn-soft,
body[data-theme="dark"] .btn-ghost {
    background: #243247;
    color: #e5eefb;
}
body[data-theme="dark"] .topbar h1,
body[data-theme="dark"] .dyn2-axis-label,
body[data-theme="dark"] .dyn2-label-col strong,
body[data-theme="dark"] .dyn2-duration strong,
body[data-theme="dark"] h1,
body[data-theme="dark"] h2,
body[data-theme="dark"] h3 {
    color: #f8fafc;
}
body[data-theme="dark"] .dyn2-row,
body[data-theme="dark"] table,
body[data-theme="dark"] .table-wrap {
    background: #111827;
}
body[data-theme="dark"] .dyn2-row:nth-child(even) {
    background: #162033;
}
body[data-theme="dark"] .dyn2-row.is-late,
body[data-theme="dark"] .plan-card.is-late {
    background: linear-gradient(180deg, #2a1218, #1f1320);
}
body[data-theme="dark"] .dyn2-tick,
body[data-theme="dark"] .dyn2-grid-bg {
    opacity: .42;
}
body[data-theme="dark"] .dyn2-tick em,
body[data-theme="dark"] .dyn2-label-col small,
body[data-theme="dark"] .dyn2-duration small,
body[data-theme="dark"] .muted,
body[data-theme="dark"] .topbar p {
    color: #94a3b8;
}
body[data-theme="dark"] .dyn2-milestone span {
    background: rgba(15, 23, 42, .96);
    color: #e5eefb;
    border-color: #334155;
}
body[data-theme="dark"] .dyn2-deadline span {
    color: #fecaca;
    border-color: rgba(248, 113, 113, .35);
}
body[data-theme="dark"] .badge.no {
    background: #1e293b;
    color: #cbd5e1;
}
body[data-theme="dark"] .empty-state,
body[data-theme="dark"] .note-box,
body[data-theme="dark"] .demo-users {
    background: #111827;
    color: #cbd5e1;
    border-color: var(--border);
}
@media (max-width: 860px) {
    .dyn2-axis,
    .dyn2-row {
        grid-template-columns: minmax(96px, 150px) minmax(0, 1fr) 50px !important;
    }
    .dyn2-axis-label.right,
    .dyn2-duration small { display: none; }
    .dyn2-duration { padding-left: 6px; }
    .dyn2-label-col { padding-right: 8px; }
}
@media (max-width: 520px) {
    .dyn2-axis,
    .dyn2-row {
        grid-template-columns: minmax(82px, 118px) minmax(0, 1fr) 44px !important;
    }
    .dyn2-bar span { font-size: 10px; padding: 0 7px; }
    .dyn2-tick em { font-size: 9px; }
    .theme-toggle { min-width: 42px; font-size: 0; }
    .theme-toggle::before { content: "🌓"; font-size: 16px; }
}

/* Dark theme contrast hardening */
body[data-theme="dark"] {
    background: #0b1120 !important;
}
body[data-theme="dark"] .main-area,
body[data-theme="dark"] .content-area {
    background: transparent;
}
body[data-theme="dark"] .topbar {
    background: rgba(15, 23, 42, .94) !important;
    border-bottom-color: #26354b;
}
body[data-theme="dark"] .card,
body[data-theme="dark"] .card-pad,
body[data-theme="dark"] .kpi-card,
body[data-theme="dark"] .report-card,
body[data-theme="dark"] .plan-card,
body[data-theme="dark"] .task-card,
body[data-theme="dark"] .notification-item,
body[data-theme="dark"] .history-item,
body[data-theme="dark"] .comment-item,
body[data-theme="dark"] .note-box,
body[data-theme="dark"] .sector-note,
body[data-theme="dark"] .update-notice,
body[data-theme="dark"] .dynamics-kpi,
body[data-theme="dark"] .dyn-legend,
body[data-theme="dark"] .dyn-chart-card,
body[data-theme="dark"] .dynamics-help,
body[data-theme="dark"] .customer-status-card,
body[data-theme="dark"] .customer-status-card.done,
body[data-theme="dark"] .customer-status-card.pending,
body[data-theme="dark"] .project-form-panel,
body[data-theme="dark"] .tab-group,
body[data-theme="dark"] .table-wrap,
body[data-theme="dark"] .modal,
body[data-theme="dark"] .date-picker-popover {
    background: #111827 !important;
    color: #e5eefb !important;
    border-color: #334155 !important;
    box-shadow: 0 14px 36px rgba(0, 0, 0, .32) !important;
}
body[data-theme="dark"] .project-form-panel,
body[data-theme="dark"] .tab-group,
body[data-theme="dark"] .dynamics-kpi,
body[data-theme="dark"] .customer-status-card.done,
body[data-theme="dark"] .customer-status-card.pending {
    background: linear-gradient(180deg, #172033, #111827) !important;
}
body[data-theme="dark"] .plan-card.is-late,
body[data-theme="dark"] .task-card.late,
body[data-theme="dark"] .dynamics-kpi.attention,
body[data-theme="dark"] .notification-item.unread {
    background: linear-gradient(180deg, #271827, #161827) !important;
    border-color: rgba(248, 113, 113, .38) !important;
}
body[data-theme="dark"] table,
body[data-theme="dark"] tbody,
body[data-theme="dark"] tr,
body[data-theme="dark"] td {
    background: #111827 !important;
    color: #e5eefb !important;
    border-color: #334155 !important;
}
body[data-theme="dark"] th {
    background: #1e293b !important;
    color: #cbd5e1 !important;
    border-color: #334155 !important;
}
body[data-theme="dark"] tbody tr:hover {
    background: #1b2537 !important;
}
body[data-theme="dark"] .tab-btn,
body[data-theme="dark"] .tab-group .tab-btn,
body[data-theme="dark"] .date-picker-head button,
body[data-theme="dark"] .date-picker-foot button,
body[data-theme="dark"] .date-picker-days button,
body[data-theme="dark"] .modal-close,
body[data-theme="dark"] .btn-soft,
body[data-theme="dark"] .btn-ghost {
    background: #1e293b !important;
    color: #e5eefb !important;
    border-color: #334155 !important;
}
body[data-theme="dark"] .tab-btn.active,
body[data-theme="dark"] .tab-group .tab-btn.active {
    background: linear-gradient(135deg, #2563eb, #0ea5e9) !important;
    color: #ffffff !important;
    border-color: transparent !important;
}
body[data-theme="dark"] .date-picker-days button:hover,
body[data-theme="dark"] .btn-soft:hover,
body[data-theme="dark"] .btn-ghost:hover {
    background: #26354b !important;
}
body[data-theme="dark"] .date-picker-days button.selected {
    background: #0ea5e9 !important;
    color: #ffffff !important;
}
body[data-theme="dark"] input,
body[data-theme="dark"] select,
body[data-theme="dark"] textarea {
    background-color: #0b1220 !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}
body[data-theme="dark"] input::placeholder,
body[data-theme="dark"] textarea::placeholder {
    color: #94a3b8 !important;
}
body[data-theme="dark"] .date-input {
    background-image: linear-gradient(transparent, transparent), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23e5eefb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 18px 18px !important;
}
body[data-theme="dark"] .section-title h2,
body[data-theme="dark"] .section-title h3,
body[data-theme="dark"] .detail-header h2,
body[data-theme="dark"] .plan-card h3,
body[data-theme="dark"] .task-head strong,
body[data-theme="dark"] .notification-item strong,
body[data-theme="dark"] .history-item strong,
body[data-theme="dark"] .customer-status-card strong,
body[data-theme="dark"] .money,
body[data-theme="dark"] .form-panel-head h3,
body[data-theme="dark"] .login-brand h1 {
    color: #f8fafc !important;
}
body[data-theme="dark"] .section-title p,
body[data-theme="dark"] .form-panel-head p,
body[data-theme="dark"] .plan-card dt,
body[data-theme="dark"] .task-card dt,
body[data-theme="dark"] .task-head small,
body[data-theme="dark"] .notification-item small,
body[data-theme="dark"] .history-item small,
body[data-theme="dark"] .customer-status-card span,
body[data-theme="dark"] .customer-status-card small,
body[data-theme="dark"] .muted,
body[data-theme="dark"] .empty-state,
body[data-theme="dark"] .tab-group-title,
body[data-theme="dark"] .date-picker-weekdays span {
    color: #a8b6ca !important;
}
body[data-theme="dark"] .task-card p,
body[data-theme="dark"] .dyn-legend span,
body[data-theme="dark"] .dynamics-help,
body[data-theme="dark"] .update-notice span,
body[data-theme="dark"] .form-grid label,
body[data-theme="dark"] .form-column label,
body[data-theme="dark"] .login-form label {
    color: #dbeafe !important;
}
body[data-theme="dark"] .dyn2-card,
body[data-theme="dark"] .dyn2-row,
body[data-theme="dark"] .dyn2-axis,
body[data-theme="dark"] .dyn2-track,
body[data-theme="dark"] .dyn2-grid-bg {
    background-color: #111827 !important;
    border-color: #334155 !important;
}
body[data-theme="dark"] .dyn2-row:nth-child(even) {
    background: #172033 !important;
}
body[data-theme="dark"] .dyn2-planned-production {
    color: #e5eefb !important;
    outline-color: #94a3b8 !important;
    background: repeating-linear-gradient(90deg, rgba(148,163,184,.22) 0, rgba(148,163,184,.22) 8px, rgba(148,163,184,.36) 8px, rgba(148,163,184,.36) 16px) !important;
}
body[data-theme="dark"] .dyn2-planned-production span {
    color: #f8fafc !important;
}
body[data-theme="dark"] .dyn2-milestone span,
body[data-theme="dark"] .planning-deadline span {
    background: rgba(15, 23, 42, .96) !important;
    color: #f8fafc !important;
    border-color: #475569 !important;
}
body[data-theme="dark"] .sidebar .nav-link {
    color: #cbd5e1 !important;
}
body[data-theme="dark"] .sidebar .nav-link:hover,
body[data-theme="dark"] .sidebar .nav-link.active {
    background: rgba(56, 189, 248, .16) !important;
    color: #ffffff !important;
}
body[data-theme="dark"] .nav-icon,
body[data-theme="dark"] .tab-icon {
    background: rgba(56, 189, 248, .14) !important;
    color: #f8fafc !important;
    box-shadow: inset 0 0 0 1px rgba(56, 189, 248, .18) !important;
}
body[data-theme="dark"] .nav-link:hover .nav-icon,
body[data-theme="dark"] .nav-link.active .nav-icon,
body[data-theme="dark"] .tab-btn.active .tab-icon {
    background: rgba(15, 23, 42, .76) !important;
}

/* Replan/deadline update fixes */
.theme-toggle {
    min-width: 38px !important;
    width: 38px;
    height: 38px;
    padding: 0 !important;
    border-radius: 999px !important;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: .82;
}
.theme-toggle:hover { opacity: 1; transform: translateY(-1px); }

body[data-theme="dark"] .sidebar-footer {
    background: linear-gradient(180deg, #0b1220, #020617) !important;
    border: 1px solid #1e293b !important;
    color: #e5eefb !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 12px 24px rgba(0,0,0,.28) !important;
}
body[data-theme="dark"] .sidebar-footer span { color: #f8fafc !important; }
body[data-theme="dark"] .sidebar-footer small { color: #94a3b8 !important; }
body[data-theme="dark"] .sidebar-footer a { color: #7dd3fc !important; }
body[data-theme="dark"] .theme-toggle {
    background: #111827 !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}
.badge.danger,
.badge.phase-rok_kasni {
    background: #fee2e2;
    color: #991b1b;
    border-color: #fecaca;
}
body[data-theme="dark"] .badge.danger,
body[data-theme="dark"] .badge.phase-rok_kasni {
    background: rgba(239,68,68,.18) !important;
    color: #fecaca !important;
    border-color: rgba(248,113,113,.32) !important;
}
body[data-theme="dark"] .history-item p,
body[data-theme="dark"] .comment-item p {
    color: #dbeafe !important;
}


/* Late project graph visibility and task filters */
.dyn2-row.project-is-late {
    background: linear-gradient(90deg, #fff1f2, #fff7ed) !important;
    border-left: 4px solid #dc2626;
}
.dyn2-row.project-is-late .dyn2-label-col strong::before {
    content: "⚠ ";
    color: #dc2626;
}
.project-graph-late {
    border-color: rgba(220, 38, 38, .38) !important;
    box-shadow: 0 18px 44px rgba(220, 38, 38, .12) !important;
}
.dynamics-late-alert {
    margin: 0 0 14px;
}
.task-filter-toolbar {
    margin: -4px 0 16px;
    padding: 10px 12px;
    background: rgba(248, 250, 252, .82);
    border: 1px solid rgba(203, 213, 225, .75);
    border-radius: 16px;
}
.inline-filter {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 900;
    color: #475569;
}
.inline-filter select {
    min-width: 190px;
}
body[data-theme="dark"] .dyn2-row.project-is-late {
    background: linear-gradient(90deg, #35131c, #221827) !important;
    border-left-color: #f87171;
}
body[data-theme="dark"] .dyn2-row.project-is-late .dyn2-label-col strong::before {
    color: #fca5a5;
}
body[data-theme="dark"] .project-graph-late {
    border-color: rgba(248, 113, 113, .42) !important;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .28) !important;
}
body[data-theme="dark"] .task-filter-toolbar {
    background: rgba(15, 23, 42, .82);
    border-color: rgba(51, 65, 85, .95);
}
body[data-theme="dark"] .inline-filter {
    color: #cbd5e1;
}
.alert-box.danger {
    padding: 12px 14px;
    border-radius: 16px;
    background: linear-gradient(90deg, #fff1f2, #fff7ed);
    border: 1px solid rgba(220, 38, 38, .22);
    color: #991b1b;
    font-weight: 850;
}
body[data-theme="dark"] .alert-box.danger {
    background: linear-gradient(90deg, #35131c, #221827);
    border-color: rgba(248, 113, 113, .38);
    color: #fecaca;
}

/* Public project status / iframe embed */
.public-embed-form .note-box {
    margin-bottom: 14px;
}
.embed-copy-grid {
    display: grid;
    gap: 14px;
}
.copy-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: stretch;
}
.copy-row textarea,
.copy-row input {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 12px;
}
.copy-row textarea {
    min-height: 88px;
    resize: vertical;
}

.public-embed-page {
    min-height: 100vh;
    background: #eef4fb;
    color: #0f172a;
    margin: 0;
}
.public-embed-page.is-embedded {
    min-height: auto;
    background: transparent;
}
.public-status-shell {
    width: 100%;
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 18px;
}
.public-embed-page.is-embedded .public-status-shell {
    min-height: auto;
    padding: 0;
}
.public-status-card {
    width: min(880px, 100%);
    background: linear-gradient(180deg, #ffffff, #f8fbff);
    border: 1px solid rgba(148, 163, 184, .28);
    border-radius: 24px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .14);
    padding: 22px;
    overflow: hidden;
}
.public-embed-page.is-embedded .public-status-card {
    border-radius: 16px;
    box-shadow: none;
}
.public-status-card.is-late {
    border-color: rgba(220, 38, 38, .42);
    box-shadow: 0 24px 70px rgba(220, 38, 38, .15);
}
.public-status-head,
.public-project-title,
.public-status-meta,
.public-progress-label,
.public-status-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
}
.public-brand-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 900;
    color: #0f3d63;
}
.public-brand-row img {
    width: 34px;
    height: 34px;
    object-fit: contain;
}
.public-project-title {
    align-items: flex-end;
    margin: 18px 0;
}
.public-project-title small {
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #64748b;
    font-weight: 900;
}
.public-project-title h1 {
    margin: 4px 0;
    font-size: clamp(24px, 4vw, 38px);
    color: #0f172a;
}
.public-project-title p {
    margin: 0;
    color: #475569;
    font-weight: 800;
}
.public-phase-pill {
    flex: 0 0 auto;
    padding: 10px 14px;
    border-radius: 999px;
    background: #e7f0fb;
    color: #1d5c93;
    font-weight: 900;
    white-space: nowrap;
}
.public-status-meta {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 12px 0 18px;
}
.public-status-meta div {
    padding: 12px;
    border-radius: 16px;
    background: #f1f5f9;
    border: 1px solid rgba(203, 213, 225, .85);
}
.public-status-meta span,
.public-status-foot {
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
}
.public-status-meta strong {
    display: block;
    margin-top: 4px;
    color: #0f172a;
}
.public-progress-box {
    margin: 8px 0 18px;
}
.public-progress-label {
    margin-bottom: 8px;
    font-weight: 900;
}
.public-progress-track {
    height: 16px;
    border-radius: 999px;
    background: #e2e8f0;
    overflow: hidden;
}
.public-progress-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #38bdf8, #22c55e);
}
.public-alert {
    margin: 12px 0;
}
.public-timeline {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 10px;
    margin-top: 18px;
}
.public-timeline-step {
    position: relative;
    min-height: 118px;
    padding: 12px;
    border-radius: 18px;
    border: 1px solid rgba(203, 213, 225, .9);
    background: #f8fafc;
}
.public-timeline-step.done {
    border-color: rgba(34, 197, 94, .35);
    background: #effdf3;
}
.public-timeline-step.pending {
    opacity: .88;
}
.public-timeline-step i {
    display: inline-flex;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #e2e8f0;
    color: #64748b;
    font-style: normal;
    font-weight: 900;
    margin-bottom: 10px;
}
.public-timeline-step.done i {
    background: #22c55e;
    color: #fff;
}
.public-timeline-step strong {
    display: block;
    color: #0f172a;
    font-size: 13px;
    line-height: 1.25;
}
.public-timeline-step span {
    display: block;
    color: #64748b;
    font-size: 12px;
    margin-top: 5px;
}
.public-status-foot {
    justify-content: flex-start;
    border-top: 1px solid rgba(203, 213, 225, .8);
    margin-top: 18px;
    padding-top: 14px;
}

body.public-embed-page[data-theme="dark"] {
    background: #020617;
    color: #e5e7eb;
}
body.public-embed-page[data-theme="dark"] .public-status-card {
    background: linear-gradient(180deg, #0f172a, #020617);
    border-color: rgba(51, 65, 85, .95);
    color: #e5e7eb;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .35);
}
body.public-embed-page[data-theme="dark"] .public-brand-row,
body.public-embed-page[data-theme="dark"] .public-project-title h1,
body.public-embed-page[data-theme="dark"] .public-status-meta strong,
body.public-embed-page[data-theme="dark"] .public-timeline-step strong {
    color: #f8fafc;
}
body.public-embed-page[data-theme="dark"] .public-project-title p,
body.public-embed-page[data-theme="dark"] .public-project-title small,
body.public-embed-page[data-theme="dark"] .public-status-meta span,
body.public-embed-page[data-theme="dark"] .public-status-foot,
body.public-embed-page[data-theme="dark"] .public-timeline-step span {
    color: #94a3b8;
}
body.public-embed-page[data-theme="dark"] .public-phase-pill,
body.public-embed-page[data-theme="dark"] .public-status-meta div,
body.public-embed-page[data-theme="dark"] .public-timeline-step {
    background: rgba(15, 23, 42, .88);
    border-color: rgba(51, 65, 85, .9);
}
body.public-embed-page[data-theme="dark"] .public-timeline-step.done {
    background: rgba(34, 197, 94, .13);
    border-color: rgba(34, 197, 94, .34);
}
body.public-embed-page[data-theme="dark"] .public-progress-track {
    background: #1e293b;
}
body.public-embed-page[data-theme="dark"] .public-status-foot {
    border-color: rgba(51, 65, 85, .9);
}

@media (max-width: 900px) {
    .public-status-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .public-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .public-project-title { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 560px) {
    .copy-row { grid-template-columns: 1fr; }
    .public-status-shell { padding: 10px; }
    .public-status-card { padding: 16px; border-radius: 18px; }
    .public-status-meta { grid-template-columns: 1fr; }
    .public-timeline { grid-template-columns: 1fr; }
    .public-status-head { align-items: flex-start; }
}


/* Visual preferences / branding settings */
.settings-block {
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--panel-soft);
    display: grid;
    gap: 16px;
}
.visual-settings-block {
    background: linear-gradient(135deg, rgba(var(--primary-rgb), .09), rgba(255,255,255,.75));
}
.brand-preview-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border-radius: 18px;
    background: var(--panel);
    border: 1px solid rgba(var(--primary-rgb), .18);
    box-shadow: 0 10px 28px rgba(15, 23, 42, .07);
}
.brand-preview-logo,
.brand-upload-preview {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid var(--border);
    display: grid;
    place-items: center;
    overflow: hidden;
    color: var(--muted);
    font-size: 12px;
}
.brand-preview-logo img,
.brand-upload-preview img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.brand-preview-card strong { display: block; font-size: 20px; color: var(--text); }
.brand-preview-card span { display: block; margin-top: 4px; color: var(--muted); }
.brand-preview-color { width: 44px; height: 44px; border-radius: 50%; margin-left: auto; border: 4px solid #fff; box-shadow: 0 0 0 1px var(--border); }
.color-input-row { display: grid; grid-template-columns: 74px 1fr; gap: 10px; align-items: center; }
.color-input-row input[type="color"] { height: 44px; padding: 4px; cursor: pointer; }
.color-preset-row { display: flex; flex-wrap: wrap; gap: 9px; }
.color-preset { width: 34px; height: 34px; border-radius: 999px; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--border), 0 8px 18px rgba(15,23,42,.12); padding: 0; }
.color-preset span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.brand-upload-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.brand-upload-card { display: grid; grid-template-columns: 84px 1fr; gap: 14px; padding: 14px; border: 1px solid var(--border); background: var(--panel); border-radius: 18px; align-items: start; }
.brand-upload-card strong { display:block; margin-bottom: 4px; }
.brand-upload-card p { margin: 0 0 10px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.brand-upload-card input[type="file"] { margin-bottom: 10px; background: var(--panel-soft); }
.icon-preview img { padding: 10px; }
body[data-theme="dark"] .settings-block,
body[data-theme="dark"] .brand-preview-card,
body[data-theme="dark"] .brand-upload-card,
body[data-theme="dark"] .brand-upload-card input[type="file"] {
    background: #111827;
    border-color: #334155;
}
body[data-theme="dark"] .visual-settings-block { background: linear-gradient(135deg, rgba(var(--primary-rgb), .16), rgba(15,23,42,.92)); }
body[data-theme="dark"] .brand-preview-card strong,
body[data-theme="dark"] .brand-upload-card strong { color: #f8fafc; }
body[data-theme="dark"] .brand-preview-card span,
body[data-theme="dark"] .brand-upload-card p { color: #94a3b8; }
@media (max-width: 820px) {
    .brand-upload-grid { grid-template-columns: 1fr; }
    .brand-upload-card { grid-template-columns: 70px 1fr; }
}


/* Manager / warehouse additions */
.manager-role-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;}
.manager-role-card{display:flex;flex-direction:column;gap:6px;padding:16px;border-radius:18px;background:var(--surface-soft,#f6f8fb);border:1px solid var(--border,#dde5ef);}
.manager-role-card strong{font-size:30px;line-height:1;color:var(--primary,#1769aa);}
.manager-role-card span,.manager-role-card small{color:var(--muted,#6b7280);}
.manager-activity-list{display:grid;gap:12px;}
.manager-activity-list .activity-item{padding:14px;border-radius:16px;border:1px solid var(--border,#dde5ef);background:var(--surface-soft,#f8fafc);}
.manager-activity-list .activity-item p{margin:6px 0 10px;color:var(--text,#182033);}
[data-theme="dark"] .manager-role-card,[data-theme="dark"] .manager-activity-list .activity-item{background:rgba(15,23,42,.86);border-color:rgba(148,163,184,.22);}
[data-theme="dark"] .manager-activity-list .activity-item p{color:var(--text,#e5e7eb);}
.actions .btn-success{margin-left:4px;}


/* Manager analytics dashboard */
.manager-dashboard{display:grid;gap:18px;}
.manager-hero-card{background:linear-gradient(135deg,rgba(var(--primary-rgb,23,105,170),.10),rgba(255,255,255,.02));}
.manager-hero-title{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px;}
.manager-hero-title h2{margin:0 0 4px;font-size:24px;}
.manager-hero-title p{margin:0;color:var(--muted);max-width:860px;}
.manager-filter-grid{display:grid;grid-template-columns:repeat(5,minmax(150px,1fr));gap:12px;align-items:end;}
.manager-filter-grid label{font-weight:700;color:var(--text);}
.manager-filter-grid select{margin-top:6px;}
.manager-kpi-strip{display:grid;grid-template-columns:repeat(6,minmax(120px,1fr));gap:12px;}
.manager-kpi-card,.manager-sector-card{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:15px;box-shadow:var(--shadow-soft);}
.manager-kpi-card span,.manager-sector-card small{display:block;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.04em;font-weight:800;}
.manager-kpi-card strong{display:block;font-size:28px;margin:7px 0;color:var(--text);}
.manager-kpi-card small{color:var(--muted);}
.manager-wide-card{overflow:hidden;}
.manager-two-col{display:grid;grid-template-columns:1.15fr .85fr;gap:18px;}
.manager-sector-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;}
.manager-sector-card strong{font-size:26px;display:block;margin:5px 0;color:var(--text);}
.manager-sector-card dl{display:grid;grid-template-columns:1fr auto;gap:6px 12px;margin:10px 0 0;}
.manager-sector-card dt{color:var(--muted);font-size:12px;}
.manager-sector-card dd{margin:0;font-weight:800;color:var(--text);font-size:12px;}
.manager-trend-chart{display:grid;gap:12px;min-width:0;}
.manager-trend-head{display:flex;justify-content:space-between;gap:12px;color:var(--muted);font-weight:700;}
.manager-trend-row{display:grid;grid-template-columns:190px minmax(0,1fr);gap:14px;align-items:center;padding:10px;border:1px solid var(--border);border-radius:16px;background:rgba(var(--primary-rgb,23,105,170),.04);}
.manager-trend-label strong{display:block;color:var(--text);}
.manager-trend-label small{display:block;color:var(--muted);font-size:12px;}
.manager-trend-bars{height:58px;display:grid;grid-template-columns:repeat(var(--bucket-count),minmax(4px,1fr));gap:4px;align-items:end;min-width:0;}
.manager-trend-bar{position:relative;display:block;min-height:3px;border-radius:8px 8px 3px 3px;background:linear-gradient(180deg,var(--primary),var(--primary-dark));box-shadow:0 6px 14px rgba(var(--primary-rgb,23,105,170),.20);}
.manager-trend-bar i{display:none;}
.manager-trend-axis{display:grid;grid-template-columns:190px minmax(0,1fr);gap:14px;color:var(--muted);font-size:10px;}
.manager-trend-axis div{display:grid;grid-template-columns:repeat(var(--bucket-count,12),minmax(4px,1fr));gap:4px;}
.manager-trend-axis em{font-style:normal;white-space:nowrap;transform:rotate(-25deg);transform-origin:left top;}
.manager-trend-axis .muted-axis{opacity:.18;}
.manager-action-list{display:grid;gap:9px;}
.manager-action-row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--card-soft);}
.manager-action-row span,.manager-action-row strong{position:relative;z-index:1;color:var(--text);}
.manager-action-row i{position:absolute;left:0;bottom:0;top:0;background:rgba(var(--primary-rgb,23,105,170),.12);}
.manager-user-table table td,.manager-user-table table th{white-space:nowrap;}
.manager-activity-list{display:grid;gap:10px;}
.manager-activity-item{display:grid;gap:8px;padding:12px 14px;border:1px solid var(--border);border-radius:16px;background:var(--card-soft);}
.manager-activity-item strong{color:var(--text);}
.manager-activity-item small{display:block;color:var(--muted);margin-top:3px;}
.manager-activity-item p{margin:0;color:var(--text);}
.manager-pagination{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin-top:14px;color:var(--muted);}
.warehouse-task-card{border-color:rgba(var(--primary-rgb,23,105,170),.32);}
.danger-zone{margin-top:20px;border:1px solid rgba(220,38,38,.28);background:rgba(220,38,38,.05);border-radius:18px;padding:16px;}
.reset-panel{display:grid;gap:12px;}
.reset-panel label{font-weight:700;color:var(--text);}
@media (max-width:1100px){.manager-filter-grid{grid-template-columns:repeat(2,minmax(150px,1fr));}.manager-kpi-strip{grid-template-columns:repeat(3,minmax(120px,1fr));}.manager-two-col{grid-template-columns:1fr;}}
@media (max-width:700px){.manager-filter-grid,.manager-kpi-strip{grid-template-columns:1fr;}.manager-trend-row,.manager-trend-axis{grid-template-columns:1fr;}.manager-trend-axis span{display:none;}.manager-hero-title{flex-direction:column;}.manager-pagination{justify-content:center;flex-wrap:wrap;}}
body[data-theme="dark"] .manager-kpi-card,body[data-theme="dark"] .manager-sector-card,body[data-theme="dark"] .manager-action-row,body[data-theme="dark"] .manager-activity-item{background:rgba(15,23,42,.88);}

/* Task search / filtering */
.task-search-filter input[type="search"] {
    min-width: min(360px, 100%);
}
.task-search-summary {
    margin: -6px 0 14px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(var(--primary-rgb), .18);
    background: rgba(var(--primary-rgb), .07);
    color: var(--navy);
    font-weight: 750;
}
body[data-theme="dark"] .task-search-summary {
    background: rgba(var(--primary-rgb), .14);
    border-color: rgba(var(--primary-rgb), .35);
    color: #e2e8f0;
}
@media (max-width: 720px) {
    .task-search-filter,
    .task-search-filter input[type="search"] {
        width: 100%;
    }
}

/* Help module + scalable language system */
.help-toggle{
    min-width: 34px;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 999px;
    font-weight: 800;
    line-height: 1;
}
.help-module{display:flex;flex-direction:column;gap:16px;min-width:min(920px,86vw);}
.help-hero{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:18px;border-radius:22px;background:linear-gradient(135deg,rgba(var(--primary-rgb,23,105,170),.14),rgba(var(--primary-rgb,23,105,170),.04));border:1px solid rgba(var(--primary-rgb,23,105,170),.18);}
.help-hero h3{margin:0 0 6px;font-size:22px;color:var(--text,#172033)}
.help-hero p{margin:0;color:var(--muted,#64748b)}
.help-badge{display:inline-flex;align-items:center;padding:7px 11px;border-radius:999px;background:rgba(var(--primary-rgb,23,105,170),.12);color:var(--primary,#1769aa);font-weight:800;font-size:12px;white-space:nowrap}
.help-search-row{display:grid;grid-template-columns:minmax(220px,1fr) minmax(180px,260px) auto;gap:10px;align-items:center}
.help-search-row input,.help-search-row select{width:100%;border:1px solid var(--border,#dbe3ee);border-radius:14px;padding:11px 14px;background:var(--card,#fff);color:var(--text,#172033)}
.help-count{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;border-radius:14px;background:var(--soft,#f2f6fb);color:var(--muted,#64748b)}
.help-grid{display:grid;grid-template-columns:minmax(280px,1fr) minmax(280px,.9fr);gap:16px;min-height:430px}
.help-list{display:grid;gap:10px;align-content:start;max-height:60vh;overflow:auto;padding-right:4px}
.help-article-card{text-align:left;border:1px solid var(--border,#dbe3ee);background:var(--card,#fff);border-radius:18px;padding:14px;cursor:pointer;transition:.16s ease;box-shadow:0 10px 24px rgba(15,23,42,.05);color:var(--text,#172033)}
.help-article-card:hover{transform:translateY(-1px);border-color:rgba(var(--primary-rgb,23,105,170),.42);box-shadow:0 14px 28px rgba(15,23,42,.09)}
.help-article-card span{display:inline-block;margin-bottom:7px;color:var(--primary,#1769aa);font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.help-article-card strong{display:block;margin-bottom:7px;font-size:16px;color:var(--text,#172033)}
.help-article-card p{margin:0 0 8px;color:var(--muted,#64748b);line-height:1.45}
.help-article-card em{font-style:normal;font-weight:800;color:var(--primary,#1769aa);font-size:13px}
.help-detail{border:1px solid var(--border,#dbe3ee);border-radius:20px;background:var(--card,#fff);padding:18px;min-height:320px;max-height:60vh;overflow:auto}
.help-empty-detail{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;color:var(--muted,#64748b);gap:8px}
.help-empty-detail strong{color:var(--text,#172033);font-size:18px}
.help-detail-head{margin-top:14px;padding-bottom:12px;border-bottom:1px solid var(--border,#dbe3ee)}
.help-detail-head span{color:var(--primary,#1769aa);font-weight:900;font-size:12px;text-transform:uppercase;letter-spacing:.05em}
.help-detail-head h3{margin:7px 0 0;font-size:24px;color:var(--text,#172033)}
.help-detail-body p{line-height:1.65;color:var(--text,#172033);font-size:15px}
.help-keywords{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.help-keywords span{padding:5px 9px;border-radius:999px;background:rgba(var(--primary-rgb,23,105,170),.10);color:var(--primary,#1769aa);font-size:12px;font-weight:700}
body[data-theme="dark"] .help-hero,body[data-theme="dark"] .help-count,body[data-theme="dark"] .help-article-card,body[data-theme="dark"] .help-detail{background:var(--card,#111827);border-color:var(--border,#334155)}
body[data-theme="dark"] .help-search-row input,body[data-theme="dark"] .help-search-row select{background:var(--card,#111827);border-color:var(--border,#334155);color:var(--text,#f8fafc)}
@media (max-width: 860px){.help-module{min-width:0}.help-search-row{grid-template-columns:1fr}.help-grid{grid-template-columns:1fr}.help-detail{max-height:none}.help-list{max-height:none}}
.language-pack-list{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 8px}.language-pack-list .badge small{opacity:.72;margin-left:5px;font-weight:700}

/* Professional responsive Help Center + planning inline edit update */
.modal.help-modal{
    width:min(1180px, calc(100vw - 32px));
    max-width:1180px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
}
.modal.help-modal .modal-body{min-width:0;overflow:hidden;display:flex;flex-direction:column;}
.help-module{
    min-width:0!important;
    width:100%;
    max-width:100%;
    overflow:hidden;
}
.help-hero{flex-wrap:wrap;}
.help-search-row{grid-template-columns:minmax(0,1fr) minmax(160px,240px) auto;min-width:0;}
.help-search-row input,.help-search-row select{min-width:0;}
.help-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
    min-width:0;
    min-height:0;
    height:min(62vh,620px);
    overflow:hidden;
}
.help-list,.help-detail{min-width:0;max-height:none;height:100%;overflow:auto;}
.help-article-card{min-width:0;overflow:hidden;}
.help-article-card strong,.help-article-card p{overflow-wrap:anywhere;}
.help-detail-body p{overflow-wrap:anywhere;}
.help-keywords span{max-width:100%;overflow-wrap:anywhere;}
.dyn2-bar.is-clickable{cursor:pointer;outline:0;}
.dyn2-bar.is-clickable:hover{filter:brightness(1.04);box-shadow:0 10px 24px rgba(var(--primary-rgb,23,105,170),.22);}
.dyn2-bar.is-clickable:focus-visible{box-shadow:0 0 0 3px rgba(var(--primary-rgb,23,105,170),.28);}
.planning-card-form{margin-top:14px;padding-top:12px;border-top:1px solid var(--border);display:grid;gap:10px;}
.planning-card-dates{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.planning-card-form label{font-size:12px;color:var(--muted);font-weight:800;}
.planning-card-form input{margin-top:5px;width:100%;}
.compact-actions{margin-top:2px;justify-content:flex-start;gap:8px;flex-wrap:wrap;}
.quick-planning-form .form-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
@media (max-width: 920px){
    .modal.help-modal{width:calc(100vw - 20px);max-height:96vh;padding:16px;}
    .help-search-row{grid-template-columns:1fr;}
    .help-grid{grid-template-columns:1fr;height:auto;max-height:68vh;overflow:auto;}
    .help-list,.help-detail{height:auto;max-height:none;overflow:visible;}
    .help-detail{min-height:180px;}
}
@media (max-width: 620px){
    .modal-root{padding:8px;align-items:flex-start;}
    .modal.help-modal{width:calc(100vw - 16px);max-height:calc(100vh - 16px);border-radius:18px;}
    .help-hero{padding:14px;border-radius:16px;}
    .help-hero h3{font-size:18px;}
    .planning-card-dates,.quick-planning-form .form-grid{grid-template-columns:1fr;}
}

/* Final Help Center layout polish: no overlap, no horizontal scroll */
.modal.help-modal {
    width: min(1120px, calc(100vw - 28px));
    max-height: calc(100vh - 28px);
    overflow: hidden;
}
.modal.help-modal .modal-body {
    overflow: hidden;
    min-height: 0;
}
.help-module {
    width: 100%;
    max-width: 100%;
    min-width: 0 !important;
    min-height: 0;
    box-sizing: border-box;
}
.help-search-row {
    width: 100%;
    box-sizing: border-box;
}
.help-grid {
    display: grid;
    grid-template-columns: minmax(280px, 420px) minmax(0, 1fr);
    gap: 16px;
    height: min(62vh, 620px);
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    align-items: stretch;
}
.help-list {
    display: flex !important;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    min-height: 0;
    height: 100%;
    max-height: none !important;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 2px 6px 2px 2px;
    box-sizing: border-box;
}
.help-article-card {
    display: block;
    position: relative;
    width: 100%;
    min-height: 0;
    flex: 0 0 auto;
    box-sizing: border-box;
    overflow: hidden;
}
.help-article-card * { max-width: 100%; box-sizing: border-box; }
.help-article-card strong,
.help-article-card p,
.help-detail,
.help-detail-body,
.help-detail-body p {
    overflow-wrap: anywhere;
    word-break: normal;
}
.help-detail {
    min-width: 0;
    height: 100%;
    min-height: 0;
    max-height: none !important;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
}
@media (max-width: 900px) {
    .modal.help-modal { width: calc(100vw - 18px); max-height: calc(100vh - 18px); }
    .help-grid { grid-template-columns: 1fr; height: auto; max-height: 68vh; overflow-y: auto; }
    .help-list, .help-detail { height: auto; overflow: visible; }
    .help-detail { min-height: 220px; }
}

/* Admin settings professional section layout */
.admin-settings-layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}
.settings-side-nav {
    position: sticky;
    top: 12px;
    display: grid;
    gap: 8px;
    padding: 10px;
    border-radius: 18px;
    background: var(--soft, #f2f6fb);
    border: 1px solid var(--border, #dbe3ee);
}
.settings-side-nav button {
    display: flex;
    align-items: center;
    gap: 9px;
    border: 0;
    border-radius: 14px;
    padding: 11px 12px;
    background: transparent;
    color: var(--text, #172033);
    font-weight: 800;
    cursor: pointer;
    text-align: left;
}
.settings-side-nav button.active,
.settings-side-nav button:hover {
    background: rgba(var(--primary-rgb), .13);
    color: var(--primary, #1769aa);
}
.settings-content-panel { min-width: 0; }
.settings-pane[hidden] { display: none !important; }
.settings-pane { margin-bottom: 16px; }
.small-head { margin-top: 18px; }
.privilege-group { margin: 16px 0; }
.privilege-group h4 { margin: 0 0 8px; color: var(--text); }
.privilege-table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--border); border-radius: 16px; }
.privilege-table { width: 100%; min-width: 820px; border-collapse: collapse; }
.privilege-table th,
.privilege-table td { padding: 10px; border-bottom: 1px solid var(--border); text-align: center; vertical-align: middle; }
.privilege-table th:first-child,
.privilege-table td:first-child { text-align: left; width: 260px; }
.privilege-table td strong { display: block; }
.privilege-table td small { display: block; color: var(--muted); font-size: 11px; margin-top: 3px; }
.user-privilege-list { display: grid; gap: 10px; }
.user-privilege-card { border: 1px solid var(--border); border-radius: 16px; background: var(--card); padding: 10px 12px; }
.user-privilege-card summary { cursor: pointer; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.user-privilege-card summary span { color: var(--muted); font-size: 12px; }
.user-priv-grid { margin-top: 12px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.sticky-settings-actions { position: sticky; bottom: 0; padding: 12px 0 0; background: linear-gradient(180deg, transparent, var(--card) 35%); }
body[data-theme="dark"] .settings-side-nav,
body[data-theme="dark"] .user-privilege-card,
body[data-theme="dark"] .privilege-table-wrap { background: rgba(15,23,42,.82); border-color: var(--border); }
@media (max-width: 850px) {
    .admin-settings-layout { grid-template-columns: 1fr; }
    .settings-side-nav { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .settings-side-nav button { justify-content: center; }
}
@media (max-width: 520px) {
    .settings-side-nav { grid-template-columns: 1fr; }
}

/* Simplified planning cards */
.planning-card-summary {
    margin-top: 12px;
    padding: 11px 12px;
    border-radius: 14px;
    background: rgba(var(--primary-rgb), .07);
    border: 1px solid rgba(var(--primary-rgb), .16);
    display: grid;
    gap: 5px;
    color: var(--text);
}
.planning-card-summary small { color: var(--muted); }
body[data-theme="dark"] .planning-card-summary { background: rgba(var(--primary-rgb), .14); border-color: rgba(var(--primary-rgb), .32); }


/* Final visual polish: transparent logo surfaces, icon topbar actions, task filter spacing */
.login-brand img,
.brand-box img,
.public-brand-row img {
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.topbar-actions {
    gap: 8px;
    flex-wrap: nowrap;
}

.topbar-icon-btn {
    position: relative;
    width: 40px;
    height: 40px;
    min-width: 40px;
    padding: 0 !important;
    border-radius: 999px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.topbar-icon-btn .topbar-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    width: 1.1em;
    height: 1.1em;
}

.topbar-icon-btn .topbar-label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    padding: 0 !important;
    margin: -1px !important;
}

.topbar-icon-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(var(--primary-rgb), .14);
}

.logout-icon-btn {
    color: var(--navy);
    border-color: var(--border);
}

.notification-btn .notification-count {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    font-size: 10px;
    line-height: 1;
    z-index: 3;
}

.task-filter-toolbar {
    gap: 14px !important;
}
.task-filter-toolbar .toolbar-left {
    gap: 16px !important;
    align-items: flex-end;
}
.task-filter-toolbar .inline-filter {
    margin-right: 4px;
    flex-wrap: wrap;
}
.task-filter-toolbar .task-search-filter {
    flex: 1 1 320px;
    min-width: 260px;
}
.task-filter-toolbar .task-search-filter input[type="search"] {
    width: 100%;
    min-width: 260px;
    padding-right: 20px;
}
.task-filter-toolbar #taskSectorFilter {
    min-width: 210px;
}

body[data-theme="dark"] .topbar-icon-btn {
    background: #111827 !important;
    color: #e5eefb !important;
    border-color: #334155 !important;
}
body[data-theme="dark"] .logout-icon-btn {
    color: #e5eefb !important;
}

@media (max-width: 860px) {
    .topbar-actions {
        display: flex !important;
        gap: 6px;
        margin-left: auto;
    }
    .topbar-actions #refreshBtn,
    .topbar-actions > a {
        display: inline-flex !important;
    }
    .topbar-icon-btn {
        width: 36px;
        height: 36px;
        min-width: 36px;
    }
    .topbar-icon-btn .topbar-icon {
        font-size: 16px;
    }
    .notification-btn {
        width: 36px !important;
        height: 36px !important;
        padding: 0 !important;
        font-size: inherit !important;
        border-radius: 999px !important;
    }
    .notification-btn::before {
        content: none !important;
    }
    .task-filter-toolbar .toolbar-left,
    .task-filter-toolbar .toolbar-right,
    .task-filter-toolbar .inline-filter,
    .task-filter-toolbar .task-search-filter,
    .task-filter-toolbar .task-search-filter input[type="search"],
    .task-filter-toolbar #taskSectorFilter {
        width: 100%;
        min-width: 0;
    }
    .task-filter-toolbar .toolbar-left {
        gap: 12px !important;
    }
}

@media (max-width: 520px) {
    .topbar {
        gap: 10px;
    }
    .topbar-actions {
        flex-wrap: wrap;
        justify-content: flex-end;
        max-width: 150px;
    }
    .topbar-icon-btn {
        width: 34px;
        height: 34px;
        min-width: 34px;
    }
}


/* Final icon/action polish */
.topbar-actions .topbar-icon-btn {
    isolation: isolate;
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.94)) !important;
    border: 1px solid rgba(var(--primary-rgb), .16) !important;
    color: var(--primary-darker) !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .06);
}
.topbar-actions .topbar-icon-btn:hover {
    background: linear-gradient(180deg, rgba(var(--primary-rgb), .10), rgba(var(--primary-rgb), .04)) !important;
    border-color: rgba(var(--primary-rgb), .34) !important;
    color: var(--primary) !important;
}
.topbar-icon-btn .topbar-icon {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 900;
    letter-spacing: 0;
}
#refreshBtn.has-update::after {
    content: "";
    position: absolute;
    top: 5px;
    right: 5px;
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .16);
    z-index: 4;
}
#refreshBtn.has-update .topbar-icon {
    animation: bhfRefreshPulse 1.2s ease-in-out infinite;
}
@keyframes bhfRefreshPulse {
    0%, 100% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(90deg) scale(1.04); }
}
body[data-theme="dark"] .topbar-actions .topbar-icon-btn {
    background: linear-gradient(180deg, #111827, #0f172a) !important;
    border-color: rgba(148, 163, 184, .28) !important;
    color: #e5eefb !important;
    box-shadow: 0 12px 28px rgba(0,0,0,.22);
}
body[data-theme="dark"] .topbar-actions .topbar-icon-btn:hover {
    background: linear-gradient(180deg, rgba(var(--primary-rgb), .22), rgba(var(--primary-rgb), .10)) !important;
    border-color: rgba(var(--primary-rgb), .5) !important;
}

/* Stronger task filter spacing so search and sector controls never overlap */
.task-filter-toolbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    column-gap: 18px !important;
    row-gap: 14px !important;
}
.task-filter-toolbar .toolbar-left {
    display: grid !important;
    grid-template-columns: minmax(300px, 1fr) minmax(220px, 260px);
    column-gap: 18px !important;
    row-gap: 12px !important;
    width: 100%;
    min-width: 0;
}
.task-filter-toolbar .inline-filter {
    min-width: 0 !important;
    margin: 0 !important;
}
.task-filter-toolbar .task-search-filter,
.task-filter-toolbar .task-search-filter input[type="search"],
.task-filter-toolbar #taskSectorFilter {
    width: 100%;
    min-width: 0 !important;
    box-sizing: border-box;
}
.task-filter-toolbar .toolbar-right {
    justify-self: end;
}
@media (max-width: 820px) {
    .task-filter-toolbar {
        grid-template-columns: 1fr;
    }
    .task-filter-toolbar .toolbar-left {
        grid-template-columns: 1fr;
    }
    .task-filter-toolbar .toolbar-right {
        justify-self: stretch;
    }
    .task-filter-toolbar .toolbar-right .btn {
        width: 100%;
    }
}


/* Dark theme accent readability fix: red/dark brand colors stay readable on dark surfaces */
body[data-theme="dark"] .accent-text,
body[data-theme="dark"] .help-badge,
body[data-theme="dark"] .help-article-card span,
body[data-theme="dark"] .help-article-card em,
body[data-theme="dark"] .help-detail-head span,
body[data-theme="dark"] .help-keywords span,
body[data-theme="dark"] .manager-role-card strong,
body[data-theme="dark"] .section-title.compact h3,
body[data-theme="dark"] .public-phase-pill,
body[data-theme="dark"] .planning-card-summary strong,
body[data-theme="dark"] .manager-metric strong,
body[data-theme="dark"] [data-accent-text] {
    color: var(--primary-on-dark, #93c5fd) !important;
    text-shadow:
        -0.45px -0.45px 0 rgba(255,255,255,.28),
         0.45px -0.45px 0 rgba(255,255,255,.20),
        -0.45px  0.45px 0 rgba(255,255,255,.20),
         0.45px  0.45px 0 rgba(255,255,255,.18),
         0 0 9px rgba(var(--primary-rgb), .32);
}

body[data-theme="dark"] .help-badge,
body[data-theme="dark"] .help-keywords span,
body[data-theme="dark"] .public-phase-pill,
body[data-theme="dark"] .planning-card-summary {
    background: rgba(var(--primary-rgb), .18) !important;
    border-color: rgba(255,255,255,.20) !important;
}

body[data-theme="dark"] .money,
body[data-theme="dark"] .badge.warn,
body[data-theme="dark"] .badge.danger,
body[data-theme="dark"] .badge.ok {
    text-shadow: none !important;
}

/* Final workflow polish: collapsible finished projects, task list mode, dark accent contrast */
.finished-projects-collapse {
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--card);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}
.finished-projects-collapse > summary {
    list-style: none;
    cursor: pointer;
    padding: 14px 16px;
    margin: 0 !important;
    user-select: none;
}
.finished-projects-collapse > summary::-webkit-details-marker { display: none; }
.finished-projects-summary::after {
    content: "▾";
    margin-left: 8px;
    font-weight: 900;
    color: var(--muted);
    transition: transform .18s ease;
}
.finished-projects-collapse:not([open]) .finished-projects-summary::after {
    transform: rotate(-90deg);
}
.finished-projects-summary h3 { margin: 0; }
.finished-projects-summary p {
    margin: 3px 0 0;
    font-size: 12px;
    color: var(--muted);
    font-weight: 600;
}
.finished-projects-body {
    padding: 0 16px 16px;
}
body[data-theme="dark"] .finished-projects-collapse {
    background: rgba(15,23,42,.88);
    border-color: rgba(148,163,184,.20);
}

.task-toolbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}
.segmented-control {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: rgba(15,23,42,.035);
}
.segmented-control .btn {
    border-radius: 999px !important;
    border-color: transparent !important;
    min-height: 30px;
}
.segmented-control .btn.active {
    background: var(--primary) !important;
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(var(--primary-rgb), .18);
}
.task-action-row {
    gap: 8px;
    flex-wrap: wrap;
}
.task-list-wrap { margin-top: 4px; }
.task-list-table td strong,
.task-list-table td small {
    display: block;
}
.task-list-table td small {
    margin-top: 4px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
}
.task-list-table tr.late-row td {
    background: rgba(239,68,68,.06);
}
.task-list-table .actions {
    min-width: 145px;
}
body[data-theme="dark"] .segmented-control {
    background: rgba(2,6,23,.45);
    border-color: rgba(148,163,184,.22);
}
body[data-theme="dark"] .task-list-table tr.late-row td {
    background: rgba(239,68,68,.10);
}

body[data-theme="dark"] .brand-box strong,
body[data-theme="dark"] .kpi-card strong,
body[data-theme="dark"] .compact-kpis .kpi-card strong,
body[data-theme="dark"] .dynamics-kpi strong,
body[data-theme="dark"] .manager-kpi-card strong,
body[data-theme="dark"] .manager-sector-card strong,
body[data-theme="dark"] .metric-card strong,
body[data-theme="dark"] .stat-card strong,
body[data-theme="dark"] .dashboard-card strong {
    color: #f8fafc !important;
    -webkit-text-stroke: .22px rgba(255,255,255,.22);
    text-shadow:
        0 1px 1px rgba(0,0,0,.78),
        0 0 10px rgba(255,255,255,.16),
        0 0 16px rgba(var(--primary-rgb), .22) !important;
}
body[data-theme="dark"] .brand-box small,
body[data-theme="dark"] .kpi-card span,
body[data-theme="dark"] .compact-kpis .kpi-card span,
body[data-theme="dark"] .manager-kpi-card span {
    color: #cbd5e1 !important;
}
body[data-theme="dark"] .section-title h2,
body[data-theme="dark"] .section-title h3,
body[data-theme="dark"] .detail-header h2 {
    color: #f8fafc !important;
    text-shadow: 0 1px 1px rgba(0,0,0,.55);
}

@media (max-width: 760px) {
    .finished-projects-summary {
        align-items: flex-start !important;
        gap: 10px !important;
    }
    .task-toolbar-actions,
    .segmented-control {
        width: 100%;
    }
    .segmented-control .btn {
        flex: 1 1 0;
    }
    .task-list-table {
        min-width: 720px;
    }
}


/* Project list column preferences */
.project-column-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px 14px;
}
.project-column-grid .checkbox-row {
    margin: 0;
    min-height: 42px;
    align-items: center;
}
.project-column-grid small {
    color: var(--muted);
    margin-left: 6px;
    font-size: 11px;
    font-weight: 600;
}
.project-list-table-wrap {
    overflow-x: auto;
}
.project-list-table th[data-col="actions"],
.project-list-table td[data-col="actions"] {
    width: 1%;
    white-space: nowrap;
}
.task-action-row {
    gap: 8px;
    flex-wrap: wrap;
}
.task-list-table td.actions {
    min-width: 190px;
}
.task-list-table td.actions .btn {
    margin: 2px;
}

/* Login security / brute-force protection */
.robot-check-box {
    border: 1px solid color-mix(in srgb, var(--primary, #1769aa) 22%, var(--border, #d9e2ec));
    background: color-mix(in srgb, var(--primary, #1769aa) 8%, var(--card, #ffffff));
    border-radius: 14px;
    padding: 12px 14px;
    display: grid;
    gap: 6px;
}
.robot-check-box[hidden] { display: none !important; }
.robot-check-box small { color: var(--muted, #64748b); line-height: 1.35; }
.robot-check-box input { margin-top: 6px; }
body[data-theme="dark"] .robot-check-box {
    background: color-mix(in srgb, var(--primary, #1769aa) 14%, #0f172a);
    border-color: color-mix(in srgb, var(--primary, #1769aa) 45%, #334155);
}

/* Admin security center */
.security-title-row { align-items: center; gap: 16px; }
.security-kpi-grid { margin: 14px 0 18px; }
.security-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 18px;
}
.security-card {
    padding: 18px;
    overflow: hidden;
}
.security-card table small {
    display: block;
    margin-top: 4px;
    color: var(--muted, #64748b);
}
.security-events-list {
    display: grid;
    gap: 10px;
    max-height: 520px;
    overflow: auto;
    padding-right: 4px;
}
.security-event {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: flex-start;
    border: 1px solid var(--border, #e2e8f0);
    background: var(--soft, #f8fafc);
    border-radius: 14px;
    padding: 12px;
}
.security-event strong { display: block; color: var(--text, #172033); }
.security-event small { color: var(--muted, #64748b); }
.security-event p { margin: 4px 0 0; color: var(--text, #172033); }
body[data-theme="dark"] .security-event {
    background: #101827;
    border-color: #293548;
}
body[data-theme="dark"] .security-event strong,
body[data-theme="dark"] .security-event p { color: #e5edf8; }
@media (max-width: 980px) {
    .security-grid { grid-template-columns: 1fr; }
}


/* Login robot check visibility fix */
.robot-check-box.is-visible {
    display: grid !important;
}
.robot-check-box strong {
    color: var(--text, #172033);
    font-size: 14px;
}
.robot-check-box input:disabled {
    opacity: .75;
    cursor: not-allowed;
}
.login-form .form-message:not(:empty) {
    margin-top: 8px;
}


.locked-logic-panel{margin-top:16px;padding:16px;border:1px dashed rgba(var(--primary-rgb,23,105,170),.35);border-radius:16px;background:rgba(var(--primary-rgb,23,105,170),.06)}
.locked-logic-panel h4{margin:0 0 6px;font-size:15px}
.locked-logic-panel p{margin:0 0 12px;color:var(--muted)}
.status-label-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.status-lock-pill{display:flex;flex-direction:column;gap:4px;padding:10px 12px;border-radius:12px;background:var(--card);border:1px solid var(--border)}
.status-lock-pill small{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.status-lock-pill strong{font-size:14px;color:var(--text)}
body[data-theme=dark] .locked-logic-panel{background:rgba(var(--primary-rgb,23,105,170),.12);border-color:rgba(255,255,255,.16)}


/* Payments / collection module */
.payment-filter-toolbar { gap: 14px; align-items: end; }
.payment-kpis { margin: 16px 0; }
.payment-project-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.payments-table td small, .payments-table th small { display: block; color: var(--muted); margin-top: 3px; }
.payment-open-row td { background: rgba(var(--primary-rgb), 0.035); }
.danger-card strong { color: var(--danger, #dc2626); }
body[data-theme="dark"] .danger-card strong { color: #fecaca; text-shadow: 0 0 0 1px rgba(255,255,255,.15), 0 0 12px rgba(248,113,113,.25); }
@media (max-width: 720px) { .payment-filter-toolbar, .payment-filter-toolbar .toolbar-left { display: grid; grid-template-columns: 1fr; width: 100%; } }

.customer-payment-summary-grid{margin:16px 0 18px;}
.payment-paid-toggle{align-self:center;white-space:nowrap;}

/* Targeted additions: weekly production plan, work-order status and custom tasks */
.form-grid .span-2 { grid-column: span 2; }
.checkbox-row.compact { display:flex; align-items:center; gap:6px; margin:2px 0; font-size:12px; }
.muted-row { opacity:.72; }
.muted-row td { background:#f8fafc; }
.planning-toolbar .toolbar-right { margin-left:auto; }
@media (max-width: 760px) { .form-grid .span-2 { grid-column: span 1; } }

/* Targeted readability improvements for production work orders and project task lists */
.wo-label-cell strong,
.project-task-main strong,
.project-task-responsible strong { display: block; }
.wo-label-cell small,
.project-task-main small,
.project-task-responsible small { display: block; margin-top: 7px; color: var(--muted); line-height: 1.45; }
.project-task-main strong + small,
.project-task-responsible strong + small { margin-top: 8px; }
.wo-status-actions { display: grid; gap: 7px; min-width: 118px; }
.wo-status-check { font-size: 13px !important; font-weight: 800; border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; background: rgba(var(--primary-rgb), .045); }
.wo-status-check input { width: 18px; height: 18px; accent-color: var(--primary); }
.wo-status-check span { line-height: 1; }
body[data-theme="dark"] .wo-status-check { background: rgba(var(--primary-rgb), .16); border-color: rgba(148,163,184,.25); }

/* Better reports layout */
.report-hero { margin-bottom: 16px; background: linear-gradient(135deg, rgba(var(--primary-rgb), .08), rgba(15,23,42,.03)); }
.report-hero h2 { margin: 0 0 4px; color: var(--navy); }
.report-hero p { margin: 0; color: var(--muted); max-width: 760px; }
.report-section { margin-top: 18px; }
.better-report-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: stretch; }
.report-action-card { min-height: 185px; justify-content: space-between; }
.report-card-kicker { display: inline-flex; width: max-content; align-items: center; border-radius: 999px; padding: 4px 9px; background: rgba(var(--primary-rgb), .08); color: var(--primary); font-size: 11px; font-weight: 850; text-transform: uppercase; letter-spacing: .04em; }
body[data-theme="dark"] .report-hero { background: linear-gradient(135deg, rgba(var(--primary-rgb), .18), rgba(15,23,42,.62)); }
body[data-theme="dark"] .report-card-kicker { background: rgba(var(--primary-rgb), .20); }

.planning-capacity-estimate{
    display:flex;
    flex-direction:column;
    gap:3px;
    line-height:1.25;
}
.planning-capacity-estimate strong{
    font-size:.95rem;
    color:var(--text);
}
.planning-capacity-estimate small,
.planning-capacity-muted{
    color:var(--muted);
    font-size:.78rem;
}

/* ULTI License Manager status panel */
.license-status-panel {
    display: grid;
    gap: 16px;
}
.license-status-main {
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 18px;
    padding: 18px;
    background: linear-gradient(135deg, rgba(var(--primary-rgb, 119,19,19), .08), rgba(255,255,255,.95));
}
.license-status-main h3 {
    margin: 10px 0 4px;
    font-size: 24px;
}
.license-status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
}
.license-status-grid > div,
.license-error-box {
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 14px;
    padding: 14px;
    background: var(--card, #fff);
}
.license-status-grid small,
.license-error-box small {
    display: block;
    color: var(--muted, #64748b);
    font-weight: 700;
    margin-bottom: 6px;
}
.license-status-grid strong {
    word-break: break-word;
}
.license-error-box p {
    margin: 0;
}
.license-error-box.is-empty {
    border-style: dashed;
    opacity: .78;
}
.status-badge.status-red {
    background: #fee2e2;
    color: #991b1b;
}
.status-badge.status-green {
    background: #dcfce7;
    color: #166534;
}

.kpi-card-info {
    cursor: help;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.kpi-card-info:hover,
.kpi-card-info:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(13, 36, 56, .11);
    border-color: rgba(var(--primary-rgb, 23, 105, 170), .35);
    outline: none;
}
.kpi-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
}
.kpi-card .kpi-icon {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(var(--primary-rgb, 23, 105, 170), .10);
    font-size: 21px;
    color: inherit;
    flex: 0 0 auto;
}
.kpi-card .kpi-help {
    margin-left: auto;
    font-size: 12px;
    opacity: .55;
}
.manual-wo-message {
    display: block;
    margin-top: 4px;
}
.input-error {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .12) !important;
}
.danger-text { color: #b91c1c !important; }
.success-text { color: #047857 !important; }

/* Consistent report action cards */
.report-card.report-action-card {
    min-height: 190px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
}
.report-card-body {
    display: grid;
    gap: 10px;
}
.report-card-actions {
    margin-top: 14px;
}
.report-card-action {
    width: 100%;
    min-height: 42px;
    justify-content: center;
    text-align: center;
}


.input-valid {
    border-color: #16a34a !important;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, .12) !important;
}