/*
 * IGOTRANSIT Classic Control Center UI 4.2.1
 * Klasyczny, elegancki i funkcjonalny interfejs bez zbędnych dekoracji.
 */

:root{
    --cc-bg:#11161b;
    --cc-surface:#171d23;
    --cc-surface-2:#1d242b;
    --cc-surface-3:#232b33;
    --cc-border:#313a43;
    --cc-border-soft:#252d35;
    --cc-text:#e9edf0;
    --cc-muted:#a0abb4;
    --cc-dim:#74808a;
    --cc-accent:var(--accent,#d8b300);
    --cc-success:#4db36a;
    --cc-danger:#d95a5a;
    --cc-warning:#d7a642;
    --cc-info:#4f91c9;
    --cc-footer-height:66px;
    --cc-topbar-height:56px;
    --cc-sidebar-width:248px;
}

*{box-sizing:border-box}

html,body{
    margin:0;
    min-height:100%;
    background:var(--cc-bg);
    color:var(--cc-text);
}

body.control-center-body{
    min-height:100vh;
    padding-bottom:var(--cc-footer-height);
    background:var(--cc-bg);
    overflow-x:hidden;
}

/* Górna belka — klasyczna, zwarta i bez dekoracyjnych efektów */
.control-center-topbar{
    position:fixed;
    inset:0 0 auto 0;
    z-index:1000;
    height:var(--cc-topbar-height);
    display:grid;
    grid-template-columns:var(--cc-sidebar-width) minmax(420px,1fr) auto;
    align-items:stretch;
    padding:0;
    background:#0d1216;
    border-bottom:1px solid var(--cc-border);
}

.topbar-left{
    display:flex;
    align-items:center;
    min-width:0;
    padding:0 14px;
    border-right:1px solid var(--cc-border);
}

.control-center-topbar .brand-block{
    display:flex;
    align-items:center;
    width:100%;
    height:100%;
    min-width:0;
    text-decoration:none;
}

.control-center-topbar .topbar-brand-logo{
    display:block;
    max-width:188px;
    max-height:31px;
    object-fit:contain;
    object-position:left center;
}

.control-center-topbar .brand-block strong{
    color:#fff;
    font-size:17px;
    font-weight:700;
    letter-spacing:.01em;
    white-space:nowrap;
}

.primary-nav{
    display:flex;
    align-items:stretch;
    min-width:0;
    overflow:auto hidden;
    scrollbar-width:none;
}
.primary-nav::-webkit-scrollbar{display:none}

.primary-nav a{
    position:relative;
    display:flex;
    align-items:center;
    padding:0 16px;
    color:#cbd2d7;
    text-decoration:none;
    font-size:12px;
    font-weight:700;
    letter-spacing:.02em;
    white-space:nowrap;
    border-right:1px solid var(--cc-border-soft);
}
.primary-nav a:hover{
    color:#fff;
    background:#151b20;
}
.primary-nav a.active{
    color:var(--cc-accent);
    background:#161c21;
}
.primary-nav a.active::after{
    content:"";
    position:absolute;
    left:14px;
    right:14px;
    bottom:0;
    height:2px;
    background:var(--cc-accent);
}

.system-strip{
    position:relative;
    display:flex;
    align-items:center;
    gap:15px;
    padding:0 15px;
    border-left:1px solid var(--cc-border);
    color:#d8dde1;
    font-size:12px;
    white-space:nowrap;
}

.system-clock{font-variant-numeric:tabular-nums}

.system-online{
    display:inline-flex;
    align-items:center;
    gap:7px;
    color:var(--cc-success);
    font-weight:700;
}
.system-online i{
    display:block;
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--cc-success);
}

.user-menu-button{
    display:flex;
    align-items:center;
    gap:7px;
    height:100%;
    padding:0;
    color:#f1f3f4;
    background:transparent;
    border:0;
    font-weight:600;
}
.user-menu-button:hover{color:var(--cc-accent);filter:none}

.user-avatar{
    display:grid;
    place-items:center;
    width:24px;
    height:24px;
    border:1px solid #73808a;
    border-radius:50%;
    line-height:1;
}

.user-menu{
    position:absolute;
    right:10px;
    top:calc(100% + 5px);
    width:190px;
    padding:6px;
    background:var(--cc-surface);
    border:1px solid var(--cc-border);
    border-radius:4px;
}
.user-menu a{
    display:block;
    padding:9px 10px;
    color:#dce2e6;
    text-decoration:none;
    border-radius:3px;
}
.user-menu a:hover{background:var(--cc-surface-2)}

/* Układ */
.control-center-layout{
    display:grid;
    grid-template-columns:var(--cc-sidebar-width) minmax(0,1fr);
    min-height:calc(100vh - var(--cc-topbar-height) - var(--cc-footer-height));
    padding-top:var(--cc-topbar-height);
}

.control-center-sidebar{
    position:fixed;
    z-index:800;
    top:var(--cc-topbar-height);
    bottom:var(--cc-footer-height);
    left:0;
    width:var(--cc-sidebar-width);
    padding:0 8px 14px;
    overflow-y:auto;
    overflow-x:hidden;
    background:#12181d;
    border-right:1px solid var(--cc-border);
    scrollbar-width:thin;
    scrollbar-color:#3a4650 transparent;
}

.sidebar-heading{
    position:sticky;
    top:0;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:46px;
    padding:0 9px;
    color:#e0e5e8;
    font-size:11px;
    font-weight:700;
    letter-spacing:.07em;
    background:#12181d;
    border-bottom:1px solid var(--cc-border-soft);
}

.sidebar-heading button{
    display:none;
    padding:3px;
    color:#98a4ad;
    background:transparent;
    border:0;
    font-size:22px;
}

.control-center-sidebar .nav-group{
    margin:7px 0;
}

.control-center-sidebar .nav-group-title{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin:0;
    padding:9px 9px;
    color:#c8d0d5;
    background:transparent;
    border:0;
    border-radius:3px;
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.035em;
    text-align:left;
}
.control-center-sidebar .nav-group-title:hover{
    background:var(--cc-surface);
    filter:none;
}

.nav-chevron{color:#74818a}
.nav-group.collapsed .nav-chevron{transform:rotate(180deg)}
.nav-group.collapsed .nav-group-items{display:none}

.control-center-sidebar a{
    display:flex;
    align-items:center;
    gap:8px;
    min-height:34px;
    margin:1px 0;
    padding:7px 9px;
    color:#a6b0b8;
    text-decoration:none;
    border-left:2px solid transparent;
    border-radius:2px;
    font-size:12px;
}
.control-center-sidebar a:hover{
    color:#fff;
    background:#181f25;
}
.control-center-sidebar a.active{
    color:#fff;
    background:#1c242b;
    border-left-color:var(--cc-accent);
}
.nav-marker{
    flex:0 0 auto;
    width:5px;
    height:5px;
    border-radius:50%;
    background:#66737d;
}
.control-center-sidebar a.active .nav-marker{background:var(--cc-accent)}

.control-center-content{
    grid-column:2;
    min-width:0;
    padding:18px 20px 26px;
}

.control-center-page-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:52px;
    margin:0 0 14px;
    padding:0 0 12px;
    border-bottom:1px solid var(--cc-border);
}
.control-center-page-head h1{
    margin:2px 0 0;
    color:#f2f4f5;
    font-size:22px;
    font-weight:700;
    letter-spacing:0;
}
.page-kicker{
    color:var(--cc-muted);
    font-size:10px;
    font-weight:700;
    letter-spacing:.09em;
}
.simulation-badge{
    display:inline-flex;
    align-items:center;
    padding:5px 8px;
    color:#aeb8bf;
    background:transparent;
    border:1px solid var(--cc-border);
    border-radius:3px;
    font-size:10px;
    font-weight:700;
    letter-spacing:.05em;
}

/* Istniejące komponenty — bez nadmiernych cieni i ozdobników */
.control-center-content .panel,
.control-center-content .stat,
.control-center-content .card,
.control-center-content .editor-toolbar,
.control-center-content .editor-properties{
    color:var(--cc-text);
    background:var(--cc-surface);
    border:1px solid var(--cc-border);
    border-radius:4px;
    box-shadow:none;
}

.control-center-content .panel h2,
.control-center-content .panel h3{
    color:#f0f2f3;
}

.control-center-content .muted,
.control-center-content .small,
.control-center-content .stat span{
    color:var(--cc-muted);
}

.control-center-content .stat strong{color:#fff}

.control-center-content table{
    width:100%;
    color:#dfe4e7;
    background:var(--cc-surface);
    border:1px solid var(--cc-border);
    border-collapse:collapse;
}
.control-center-content th{
    color:#b2bcc3;
    background:var(--cc-surface-2);
    border-color:var(--cc-border);
}
.control-center-content td{
    border-color:var(--cc-border-soft);
}
.control-center-content tr:hover td{background:#1a2127}

.control-center-content input,
.control-center-content select,
.control-center-content textarea{
    color:#e6eaed;
    background:#10161b;
    border:1px solid #39434c;
    border-radius:3px;
}
.control-center-content input:focus,
.control-center-content select:focus,
.control-center-content textarea:focus{
    border-color:var(--cc-info);
    outline:1px solid var(--cc-info);
}

.control-center-content .btn,
.control-center-content button{
    border-radius:3px;
    box-shadow:none;
}

.control-center-content .btn:not(.secondary):not(.danger):not(.warning):not(.ok),
.control-center-content button:not(.secondary):not(.danger):not(.warning):not(.ok){
    color:#161616;
    background:var(--cc-accent);
    border-color:#b89a00;
}

.control-center-content .btn.secondary,
.control-center-content button.secondary{
    color:#e4e8eb;
    background:var(--cc-surface-2);
    border-color:#46515a;
}

.control-center-content .btn.danger,
.control-center-content button.danger{
    color:#fff;
    background:#7c2f2f;
    border-color:#9e4343;
}

.control-center-content .tabs a{
    color:#b5bec5;
    background:var(--cc-surface);
    border-color:var(--cc-border);
}
.control-center-content .tabs a.active{
    color:#141414;
    background:var(--cc-accent);
    border-color:var(--cc-accent);
}

.control-center-content .map-canvas,
.control-center-content #routeMap,
.control-center-content #infrastructureMap,
.control-center-content #vehicleMap{
    background:#0c1217;
    border:1px solid var(--cc-border);
    border-radius:3px;
}

/* Stała stopka z logo i obowiązkowymi informacjami */
.control-center-footer{
    position:fixed;
    z-index:1100;
    left:0;
    right:0;
    bottom:0;
    height:var(--cc-footer-height);
    display:grid;
    grid-template-columns:minmax(170px,220px) minmax(0,1fr) auto;
    align-items:center;
    gap:16px;
    margin:0;
    padding:8px 16px;
    color:#95a1aa;
    background:#0d1216;
    border-top:1px solid var(--cc-border);
    font-size:10px;
}

.footer-brand{
    min-width:0;
    display:flex;
    align-items:center;
}
.footer-brand-logo{
    display:block;
    max-width:170px;
    max-height:31px;
    object-fit:contain;
    object-position:left center;
}
.footer-brand-text{
    color:#fff;
    font-size:14px;
}

.footer-center{min-width:0}
.control-center-footer .footer-links{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin:0 0 4px;
}
.control-center-footer .footer-links a{
    color:#d1d7db;
    text-decoration:none;
}
.control-center-footer .footer-links a:hover{color:var(--cc-accent)}

.footer-disclaimer{
    overflow:hidden;
    color:#7f8b94;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.footer-copy{
    color:#a9b3ba;
    white-space:nowrap;
    text-align:right;
}

/* Responsywność */
.sidebar-backdrop{
    position:fixed;
    z-index:790;
    inset:var(--cc-topbar-height) 0 var(--cc-footer-height);
    display:none;
    background:rgba(0,0,0,.55);
}

.mobile-menu-button{
    display:none;
    margin-right:9px;
    padding:4px 7px;
    color:#e6ebee;
    background:transparent;
    border:1px solid var(--cc-border);
}

@media(max-width:1250px){
    .control-center-topbar{
        grid-template-columns:220px minmax(300px,1fr) auto;
    }
    .primary-nav a{padding:0 12px}
    .system-online{display:none}
}

@media(max-width:980px){
    :root{
        --cc-sidebar-width:270px;
        --cc-footer-height:82px;
    }
    .control-center-topbar{
        grid-template-columns:minmax(190px,1fr) auto;
    }
    .primary-nav{display:none}
    .system-clock{display:none}
    .mobile-menu-button{display:inline-flex}
    .control-center-layout{grid-template-columns:1fr}
    .control-center-sidebar{
        transform:translateX(-102%);
        transition:transform .18s ease;
    }
    body.sidebar-open .control-center-sidebar{transform:translateX(0)}
    body.sidebar-open .sidebar-backdrop{display:block}
    .sidebar-heading button{display:block}
    .control-center-content{grid-column:1;padding:15px}
    .control-center-footer{
        grid-template-columns:145px minmax(0,1fr);
    }
    .footer-copy{display:none}
    .footer-brand-logo{max-width:138px}
}

@media(max-width:650px){
    :root{--cc-footer-height:102px}
    .system-strip{gap:7px;padding:0 9px}
    .user-menu-button{font-size:0}
    .user-menu-button .user-avatar,
    .user-menu-button span:last-child{font-size:14px}
    .control-center-topbar .topbar-brand-logo{max-width:160px}
    .control-center-footer{
        grid-template-columns:1fr;
        gap:4px;
        padding:7px 11px;
    }
    .footer-brand{display:none}
    .footer-disclaimer{
        white-space:normal;
        display:-webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;
    }
    .control-center-page-head{
        align-items:flex-start;
        gap:9px;
    }
    .simulation-badge{display:none}
}

/* ==========================================================
   IGOTRANSIT 4.3 — poprawki logowania, logo i edytora
   ========================================================== */
.control-center-topbar .brand-block{overflow:hidden}
.control-center-topbar .topbar-brand-logo{width:auto;max-width:202px;max-height:38px;object-fit:contain}
.footer-brand-logo{max-width:185px;max-height:34px}

/* Ekran logowania zawsze zajmuje całą przestrzeń między krawędziami ekranu. */
body.control-center-login{
    min-height:100vh;
    display:block;
    padding-bottom:var(--cc-footer-height);
    background:#0d141b;
}
.control-center-login-shell{
    position:relative;
    isolation:isolate;
    min-height:calc(100vh - var(--cc-footer-height));
    display:grid;
    grid-template-columns:minmax(320px,560px) minmax(360px,460px);
    align-items:center;
    justify-content:center;
    gap:70px;
    padding:48px;
    background-image:var(--login-background);
    background-position:var(--login-position);
    background-size:cover;
    background-repeat:no-repeat;
}
.control-center-login-shell::before{
    content:"";
    position:absolute;
    z-index:-1;
    inset:0;
    background:rgba(10,17,24,var(--login-overlay,.58));
}
.control-center-login-hero{color:#fff;max-width:560px}
.control-center-login-hero .login-logo{display:block;max-width:420px;max-height:112px;margin:0 0 30px;object-fit:contain;object-position:left center}
.control-center-login-hero p{margin:0 0 20px;font-size:19px;line-height:1.45;color:#eef2f4}
.control-center-login-hero .login-disclaimer{margin:0;padding:14px 16px;border:1px solid rgba(255,255,255,.28);border-radius:4px;background:rgba(8,13,18,.5);font-size:13px;line-height:1.45}
.login-meta{display:flex;gap:18px;margin-top:14px;color:#d4dbe0;font-size:12px;font-variant-numeric:tabular-nums}
.control-center-login-box{width:100%;padding:28px;background:#f7f8f9;color:#202935;border:1px solid #d4d9de;border-radius:8px;box-shadow:0 12px 38px rgba(0,0,0,.28);backdrop-filter:none}
.control-center-login-box h2{margin:0 0 4px;font-size:25px}
.control-center-login-box .login-box-heading p{margin:0 0 18px;color:#65717d}
.control-center-login-box label{color:#202935}
.control-center-login-box input{background:#fff;color:#202935;border-color:#9aa8b5}
.control-center-login-box button{width:100%;margin-top:9px;color:#111;background:var(--cc-accent);border-color:#ad9000}
.control-center-login .control-center-footer{position:fixed}

/* Zwarte formularze i pasek filtrów */
.compact-toolbar{padding:9px 11px!important}
.inline-filter-form{display:flex;align-items:end;flex-wrap:wrap;gap:8px}
.inline-filter-form label{margin:0}
.inline-filter-form select{min-width:240px}

/* Edytor infrastruktury: neutralne elementy, akcent tylko dla aktywnego narzędzia. */
.infra-editor .infra-editor-toolbar,
.infra-editor .infra-palette,
.infra-editor .infra-properties,
.infra-editor .infra-canvas-panel{
    background:var(--cc-surface)!important;
    border-color:var(--cc-border)!important;
    border-radius:4px!important;
    box-shadow:none!important;
}
.infra-editor .infra-editor-toolbar{padding:9px 11px!important}
.infra-editor .infra-tool{
    color:#dce2e6!important;
    background:#1b2228!important;
    border:1px solid #3a444d!important;
    border-radius:3px!important;
    box-shadow:none!important;
}
.infra-editor .infra-tool:hover{background:#232c33!important}
.infra-editor .infra-tool.active{
    color:#fff!important;
    background:#252e35!important;
    border-color:var(--cc-accent)!important;
    box-shadow:inset 3px 0 var(--cc-accent)!important;
}
.infra-editor .infra-tabs button{
    color:#aeb8bf!important;
    background:#171d23!important;
    border-bottom:2px solid transparent!important;
}
.infra-editor .infra-tabs button.active{
    color:#fff!important;
    background:#1e262d!important;
    border-bottom-color:var(--cc-accent)!important;
    box-shadow:none!important;
}
.infra-editor .infra-mode-badge{
    color:#e5eaed!important;
    background:#242d34!important;
    border:1px solid #3b4650;
    border-radius:3px!important;
}
.infra-editor .infra-coordinate{color:#9ca8b0!important}
.infra-editor .infra-selection-title,
.infra-editor .infra-command-box,
.infra-editor .infra-layer-item,
.infra-editor .vetra-step,
.infra-editor .infra-console{
    background:#151c21!important;
    border-color:#354049!important;
    border-radius:3px!important;
}
.infra-editor .infra-properties fieldset{border-color:#39454e!important;border-radius:3px!important}
.infra-editor .infra-dialog{background:#171e24!important;border-color:#46535d!important;border-radius:5px!important;box-shadow:0 18px 50px rgba(0,0,0,.38)!important}

/* Prawdziwsze symbole sygnalizatorów na mapie. */
.infra-device-icon.turnout_signal,
.infra-device-icon.traffic_signal{
    width:auto!important;
    height:auto!important;
    padding:3px!important;
    border-radius:4px!important;
    background:#111!important;
}
.map-turnout-signal{
    display:grid;
    grid-template-rows:repeat(3,22px);
    width:26px;
    gap:2px;
    padding:2px;
    background:#141414;
    border:1px solid #6f777d;
    border-radius:3px;
}
.map-turnout-signal i{
    display:grid;
    place-items:center;
    width:22px;
    height:22px;
    border:1px solid #555d62;
    border-radius:50%;
    color:#fff;
    background:#202326;
    font:700 17px/1 Consolas,monospace;
    font-style:normal;
}
.map-turnout-signal i.off{color:transparent}
.map-traffic-signal{
    display:grid;
    grid-template-rows:repeat(3,16px);
    width:22px;
    gap:2px;
    padding:3px;
    background:#151515;
    border:1px solid #697178;
    border-radius:3px;
}
.map-traffic-signal i{
    display:block;
    width:14px;
    height:14px;
    border-radius:50%;
    background:#272b2e;
    border:1px solid #555d62;
}
.map-traffic-signal i.red.active{background:#d33b32}
.map-traffic-signal i.amber.active{background:#d7a52d}
.map-traffic-signal i.green.active{background:#36a950}

@media(max-width:850px){
    .control-center-login-shell{grid-template-columns:1fr;gap:22px;padding:24px 18px;align-content:center}
    .control-center-login-hero{display:block;text-align:center}
    .control-center-login-hero .login-logo{max-width:280px;max-height:76px;margin:0 auto 18px;object-position:center}
    .control-center-login-hero p{font-size:16px}
    .control-center-login-hero .login-disclaimer{display:none}
    .login-meta{justify-content:center}
}


/* V4.3 — korekty na podstawie wdrożonego panelu */
.control-center-topbar .topbar-brand-logo{
    width:auto !important;
    max-width:210px !important;
    max-height:38px !important;
}
.control-center-footer .footer-brand-logo{
    width:auto !important;
    max-width:185px !important;
    max-height:36px !important;
}
.control-center-login{
    min-height:100vh !important;
    padding-bottom:var(--cc-footer-height) !important;
    background:#0d141b !important;
}
.control-center-login-shell{
    position:fixed !important;
    inset:0 0 var(--cc-footer-height) 0 !important;
    width:100% !important;
    min-height:0 !important;
    height:auto !important;
    display:grid !important;
    grid-template-columns:minmax(360px,1fr) minmax(380px,470px) !important;
    align-items:center !important;
    gap:clamp(35px,7vw,120px) !important;
    padding:clamp(38px,7vw,110px) !important;
    background-image:var(--login-background) !important;
    background-size:cover !important;
    background-position:var(--login-position) !important;
    background-repeat:no-repeat !important;
    overflow:auto !important;
}
.control-center-login-shell::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    background:rgba(8,13,18,var(--login-overlay,.58));
}
.control-center-login-hero,
.control-center-login-box{position:relative;z-index:1}
.control-center-login-hero .login-logo{
    width:auto !important;
    max-width:min(480px,80vw) !important;
    max-height:150px !important;
    margin:0 0 26px !important;
}
.control-center-login-box{
    max-width:470px;
    justify-self:end;
}
.control-center-content .actions button,
.control-center-content .actions .btn,
.infra-editor button{
    min-height:34px;
    font-weight:600;
}
.infra-editor button:not(.danger):not(.ok),
.infra-editor .btn:not(.danger):not(.ok){
    color:#e7ecef !important;
    background:#20282f !important;
    border-color:#44505a !important;
}
.infra-editor button:not(.danger):not(.ok):hover,
.infra-editor .btn:not(.danger):not(.ok):hover{
    background:#29333b !important;
    border-color:#697681 !important;
}
.infra-editor #saveDraftButton,
.infra-editor #publishButton{
    color:#151515 !important;
    background:var(--cc-accent,#d8b300) !important;
    border-color:#b89900 !important;
}
@media(max-width:850px){
    .control-center-login-shell{
        position:relative !important;
        inset:auto !important;
        min-height:calc(100vh - var(--cc-footer-height)) !important;
        grid-template-columns:1fr !important;
        padding:28px 18px !important;
    }
    .control-center-login-box{justify-self:stretch;max-width:520px;margin:auto;width:100%}
}


/* V4.3.1 — pełnoekranowy obszar roboczy i poprawiona tożsamość użytkownika */
.user-display-name{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-menu-identity{display:flex;flex-direction:column;gap:2px;padding:8px 10px 9px;margin-bottom:5px;border-bottom:1px solid var(--cc-border)}
.user-menu-identity strong{color:#f1f3f4;font-size:12px}
.user-menu-identity small{color:var(--cc-muted);font-size:10px}
.workspace-mode .control-center-layout{grid-template-columns:minmax(0,1fr)}
.workspace-mode .control-center-content{grid-column:1;padding:0}
.workspace-mode .control-center-footer{height:54px;--cc-footer-height:54px}
.workspace-mode{--cc-footer-height:54px}
.workspace-mode .footer-disclaimer{font-size:9px}
@media(max-width:650px){.user-display-name{display:none}}