/* Premium UI layer for CMMS. Presentation only: no business flow or data binding changes. */
:root{
    --bg:#f3f1ec;
    --bg-warm:#fbfaf7;
    --ink:#151816;
    --text:#27302b;
    --text-soft:#66716b;
    --muted:#89918b;
    --panel:#fffdf9;
    --panel-strong:#ffffff;
    --surface:#f8f6f1;
    --surface-raised:#fffdf9;
    --border:#ddd8ce;
    --border-strong:#c6bdae;
    --primary:#0f766e;
    --primary-strong:#0b5f5a;
    --primary-soft:#d9f1ed;
    --secondary:#344054;
    --accent:#b7791f;
    --accent-soft:#fff2d7;
    --danger:#b42318;
    --warning:#a15c07;
    --success:#087443;
    --info:#0b5cab;
    --sidebar-width:306px;
    --radius:12px;
    --radius-lg:18px;
    --shadow:0 18px 48px rgba(43,36,24,.08),0 2px 8px rgba(43,36,24,.06);
    --shadow-soft:0 10px 28px rgba(43,36,24,.07);
    --transition:180ms cubic-bezier(.2,.8,.2,1);
}

*{letter-spacing:0}
html{scroll-behavior:smooth;background:var(--bg)}
body{
    min-width:320px;
    overflow-x:hidden;
    font-family:"Plus Jakarta Sans","Inter","Geist","Manrope",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    font-size:15px;
    color:var(--text);
    background:
        linear-gradient(90deg,rgba(15,118,110,.07) 0 1px,transparent 1px 100%),
        linear-gradient(180deg,rgba(15,118,110,.055) 0 1px,transparent 1px 100%),
        radial-gradient(circle at 8% 0%,rgba(183,121,31,.13),transparent 26rem),
        radial-gradient(circle at 100% 12%,rgba(15,118,110,.11),transparent 30rem),
        linear-gradient(180deg,#fbfaf7 0%,#f3f1ec 44%,#efede7 100%);
    background-size:32px 32px,32px 32px,auto,auto,auto;
    line-height:1.58;
    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased;
}
body::selection{background:rgba(15,118,110,.22)}
a{color:var(--primary-strong)}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
    outline:3px solid rgba(15,118,110,.34);
    outline-offset:3px;
}

.layout-shell{
    grid-template-columns:var(--sidebar-width) minmax(0,1fr);
    min-height:100vh;
    visibility:visible;
    opacity:1;
}
body.menu-hidden .layout-shell{grid-template-columns:0 minmax(0,1fr)}
.main-column{
    min-width:0;
    display:flex;
    flex-direction:column;
    visibility:visible;
    opacity:1;
}

.sidebar{
    width:var(--sidebar-width);
    padding:18px 14px;
    display:flex;
    color:#e9eee9;
    background:
        linear-gradient(180deg,rgba(255,255,255,.06),transparent 19rem),
        linear-gradient(155deg,#17211d 0%,#111816 52%,#0b1110 100%);
    border-right:1px solid rgba(255,255,255,.08);
    box-shadow:18px 0 60px rgba(14,20,17,.16);
}
.sidebar::before{
    background:
        linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 100%),
        linear-gradient(180deg,rgba(255,255,255,.035) 0 1px,transparent 1px 100%);
    background-size:24px 24px;
    opacity:.72;
}
.sidebar::after{display:none}
.brand-block{
    gap:12px;
    margin-bottom:16px;
    padding:18px;
    border-radius:18px;
    border:1px solid rgba(255,255,255,.12);
    background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.045));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.11),0 18px 44px rgba(0,0,0,.18);
}
.brand-title,.guest-brand{
    color:#fbfaf7;
    font-size:1.18rem;
    font-weight:850;
    line-height:1.18;
    background:none;
    -webkit-text-fill-color:currentColor;
}
.brand-title::before,.guest-brand::before{
    content:"";
    display:inline-block;
    width:10px;
    height:10px;
    margin-right:9px;
    border-radius:2px;
    background:linear-gradient(135deg,var(--primary),var(--accent));
    box-shadow:0 0 0 4px rgba(255,255,255,.08);
    vertical-align:1px;
}
.sidebar .brand-tagline,.guest-tagline{
    color:rgba(233,238,233,.68);
    font-size:.82rem;
    line-height:1.45;
}
.idle-timeout-widget{
    border-radius:14px;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(4,11,9,.22);
}
.idle-timeout-label{color:rgba(233,238,233,.62)}
.idle-timeout-value{color:#fff8ea;font-weight:850}
.idle-timeout-note{color:rgba(233,238,233,.62)}
.idle-timeout-dot{background:#54d19c;box-shadow:0 0 0 5px rgba(84,209,156,.14)}

.nav-menu{
    display:flex;
    gap:4px;
    padding:3px 2px 12px;
    max-height:calc(100vh - 252px);
}
.nav-level,.nav-group{gap:4px}
.nav-level-1,.nav-level-2,.nav-level-3,.nav-level-4{
    margin-left:18px;
    padding-left:10px;
    border-left:1px solid rgba(255,255,255,.10);
}
.nav-group-row{gap:7px}
.nav-link,.nav-group-link,.nav-group-label,.nav-static{
    min-height:44px;
    border-radius:12px;
}
.nav-link,.nav-group-link{
    margin:0;
    padding:9px 10px;
    color:rgba(242,246,242,.78);
    border:1px solid transparent;
    background:transparent;
    font-size:.9rem;
    font-weight:650;
}
.nav-link:hover,.nav-group-link:hover{
    color:#fffdf9;
    background:rgba(255,255,255,.075);
    border-color:rgba(255,255,255,.10);
    box-shadow:none;
    transform:translateX(2px);
}
.nav-link.active,.nav-group-link.active{
    margin:0;
    padding:9px 10px;
    color:#fffdf9;
    border:1px solid rgba(255,255,255,.12);
    border-left:1px solid rgba(255,255,255,.12);
    border-radius:12px;
    background:linear-gradient(90deg,rgba(15,118,110,.42),rgba(183,121,31,.14));
    box-shadow:inset 3px 0 0 #61d6c8;
}
.nav-link.active::before{display:none}
.nav-icon{
    width:31px;
    height:31px;
    flex-basis:31px;
    border-radius:9px;
    color:#e8f3ef;
    background:rgba(255,255,255,.075);
    opacity:1;
}
.nav-link.active .nav-icon,.nav-group-link.active .nav-icon{
    color:#10201d;
    background:#d8f4ee;
}
.nav-label{
    font-size:.88rem;
    font-weight:680;
    line-height:1.32;
}
.nav-group-label,.nav-static{
    padding:9px 10px;
    color:rgba(242,246,242,.66);
    border:0;
    background:transparent;
}
.nav-group-label .nav-label,.nav-static .nav-label{
    font-size:.72rem;
    font-weight:800;
    text-transform:uppercase;
}
.nav-group-toggle{
    width:38px;
    min-height:38px;
    flex-basis:38px;
    border-radius:10px;
    color:rgba(242,246,242,.72);
    border:1px solid rgba(255,255,255,.09);
    background:rgba(255,255,255,.045);
}
.nav-group-toggle:hover{
    color:#fff;
    background:rgba(255,255,255,.10);
    border-color:rgba(255,255,255,.16);
}

.site-header,.guest-header{
    position:sticky;
    top:16px;
    z-index:12;
    align-items:center;
    margin:16px clamp(14px,2.4vw,32px) 20px;
    padding:14px 16px;
    border-radius:18px;
    border:1px solid rgba(255,255,255,.72);
    background:rgba(255,253,249,.82);
    box-shadow:var(--shadow-soft);
    backdrop-filter:blur(18px) saturate(1.15);
}
.header-main{gap:13px}
.menu-toggle{
    min-height:44px;
    padding:10px 13px;
    border-radius:12px;
    color:#fffdf9;
    background:linear-gradient(135deg,#12211d,#0f766e);
    box-shadow:0 12px 22px rgba(15,118,110,.20);
}
.menu-toggle:hover{transform:translateY(-1px);box-shadow:0 16px 28px rgba(15,118,110,.23)}
.page-eyebrow{
    margin:0 0 3px;
    color:var(--accent);
    font-size:.72rem;
    font-weight:850;
    text-transform:uppercase;
}
.page-title{
    margin:0;
    color:var(--ink);
    font-size:clamp(1.38rem,2.1vw,2.08rem);
    font-weight:850;
    line-height:1.12;
}
.user-panel{
    min-width:min(330px,34vw);
    padding:0 0 0 18px;
    border-left:1px solid rgba(102,113,107,.18);
    gap:4px;
}
.user-name{color:var(--ink);font-weight:800}
.user-meta{color:var(--text-soft);font-size:.84rem;overflow-wrap:anywhere}
.header-actions .btn{min-height:38px}

.content-area,.guest-content{
    width:100%;
    max-width:1680px;
    margin:0 auto;
    padding:0 clamp(14px,2.4vw,32px) 30px;
}
.content-area>*+*{margin-top:18px}
.site-footer,.guest-footer{
    margin:24px clamp(14px,2.4vw,32px) 26px;
    padding:14px 16px;
    border-radius:14px;
    color:var(--text-soft);
    background:rgba(255,253,249,.74);
    border:1px solid rgba(255,255,255,.68);
    box-shadow:none;
}

.card,
.role-card,
.contract-summary-card,
.dashboard-hero,
.dashboard-card,
.kpi-card,
.customer-filter-card,
.customer-list-card,
.sla-filter-card,
.sla-list-card,
.contract-filter-card,
.contract-list-card,
.config-card,
.pm-stats-grid .stat-card,
.stats-grid .stat-card{
    border-radius:var(--radius);
    border:1px solid rgba(198,189,174,.74);
    background:var(--surface-raised);
    box-shadow:var(--shadow-soft);
}
.card{
    padding:clamp(16px,2vw,24px);
    transition:border-color var(--transition),box-shadow var(--transition),transform var(--transition);
}
.card:hover{
    transform:none;
    border-color:rgba(15,118,110,.34);
    box-shadow:var(--shadow);
}
.section-header{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:16px;
    margin-bottom:16px;
    padding-bottom:12px;
    border-bottom:1px solid rgba(198,189,174,.55);
}
.section-header h2,.role-card h3,.auth-card h2,.customer-list-head h3,.sla-list-head h3,.card-head h3,.dashboard-hero h2{
    color:var(--ink);
    font-weight:850;
    line-height:1.16;
}
.section-header p,.auth-intro p,.customer-toolbar-left p,.sla-toolbar-left p,.config-menu-subtitle,.contract-toolbar-left p,.contract-list-head p,.customer-list-head p,.sla-list-head p,.dashboard-hero p,.card-head p,.summary-label,.kpi-label,.kpi-note,.column-label,.column-value{
    color:var(--text-soft);
}

.form-grid,.contract-form-grid,.config-preview-grid,.config-notif-grid,.gdrive-test-grid{
    gap:16px 18px;
}
.form-field{gap:7px}
label{
    color:var(--ink);
    font-size:.88rem;
    font-weight:760;
}
input,select,textarea{
    min-height:44px;
    padding:11px 12px;
    color:var(--ink);
    background:#fffefa;
    border:1px solid var(--border);
    border-radius:10px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
    transition:border-color var(--transition),box-shadow var(--transition),background var(--transition);
}
textarea{min-height:118px}
input:hover,select:hover,textarea:hover{border-color:var(--border-strong)}
input:focus,select:focus,textarea:focus{
    border-color:var(--primary);
    box-shadow:0 0 0 4px rgba(15,118,110,.13),inset 0 1px 0 rgba(255,255,255,.9);
    transform:none;
}
input:disabled,select:disabled,textarea:disabled,button:disabled,.btn:disabled{
    cursor:not-allowed;
    opacity:.62;
}
::placeholder{color:#9a9f99}
.check-item{
    border-radius:10px;
    background:#faf8f3;
    border-color:rgba(198,189,174,.66);
}
.check-item:hover{border-color:rgba(15,118,110,.28)}
.renewal-source-contract-info .static-field{
    min-height:44px;
    display:flex;
    align-items:center;
    padding:11px 12px;
    border:1px solid rgba(15,118,110,.24);
    border-radius:10px;
    background:#f1fbf8;
    color:var(--primary-strong);
    font-weight:800;
}
.renew-same-contract-toggle{
    margin-top:8px;
}
.renew-same-contract-toggle small{
    color:var(--text-soft);
    font-weight:600;
}
input.is-readonly{
    background:#f1f5f2;
    color:var(--text-soft);
}

.button-row,.action-row,.pm-action-row,.pm-toolbar,.liveconsole-actions{
    gap:8px;
}
.btn{
    min-height:44px;
    border-radius:10px;
    padding:10px 14px;
    font-weight:780;
    line-height:1.2;
    border:1px solid transparent;
    transition:transform var(--transition),box-shadow var(--transition),background var(--transition),border-color var(--transition),color var(--transition);
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-primary{
    color:#fffdf9;
    background:linear-gradient(180deg,#128179,#0b5f5a);
    box-shadow:0 12px 22px rgba(15,118,110,.22),inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-primary:hover{background:linear-gradient(180deg,#178d83,#0b5f5a)}
.btn-ghost{
    color:var(--text);
    background:#fffdf9;
    border-color:var(--border);
    box-shadow:0 1px 2px rgba(43,36,24,.05);
}
.btn-ghost:hover{
    color:var(--primary-strong);
    border-color:rgba(15,118,110,.30);
    background:#f6fbf9;
}
.btn-danger{
    color:#fff;
    background:linear-gradient(180deg,#c43227,#9f1f17);
    box-shadow:0 12px 20px rgba(180,35,24,.18);
}
.btn-sm{
    min-height:36px;
    padding:8px 11px;
    border-radius:9px;
    font-size:.86rem;
}
.btn-icon,.btn-icon-only,.config-notif-page .btn-icon{
    min-width:44px;
    width:44px;
    height:44px;
    border-radius:10px;
}
.btn-icon.btn-sm,.btn-icon-only.btn-sm{
    min-width:36px;
    width:36px;
    height:36px;
}

.table-wrap,
.customer-table-wrap,
.contract-table-wrap,
.sla-table-wrap,
.contract-files-table-wrap,
.pm-table-wrap{
    border-radius:var(--radius);
    border:1px solid rgba(198,189,174,.68);
    background:#fffdf9;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.72);
}
table{color:var(--text)}
th,td{padding:13px 14px}
th,
.customer-table th,
.contract-table th,
.sla-table th{
    color:#5e675f;
    background:#f2efe8;
    border-bottom:1px solid var(--border);
    font-size:.74rem;
    font-weight:850;
    text-transform:uppercase;
}
td{border-color:rgba(198,189,174,.54)}
tr+tr td{border-top:1px solid rgba(198,189,174,.50)}
tbody tr{transition:background var(--transition)}
tbody tr:hover td{background:#fbfaf6}
.customer-table tr,.contract-table tr,.sla-table tr{transition:background var(--transition),box-shadow var(--transition)}

.badge,.status-pill,.tag-pill,.contract-badge,.contract-chain-chip,.liveconsole-pin-pill{
    border-radius:999px;
    font-weight:800;
}
.badge,.tag-pill.user-can,.contract-chain-chip,.liveconsole-pin-pill{
    color:var(--primary-strong);
    background:var(--primary-soft);
    border:1px solid rgba(15,118,110,.18);
}
.tag-pill.custom{color:#7a4b11;background:var(--accent-soft)}
.status-pill.ok,.contract-badge.status-active{color:var(--success);background:#dcf7e9}
.status-pill.off,.contract-badge.status-expired{color:var(--danger);background:#fde4e1}
.contract-badge.status-draft{color:#55615a;background:#ece9e1}
.contract-badge.status-closed{color:#5a3d7a;background:#efe7f8}

.flash{
    border-radius:12px;
    padding:13px 15px;
    font-weight:720;
    box-shadow:0 8px 22px rgba(43,36,24,.06);
}
.flash-success{color:var(--success);background:#e7f8ef;border-color:#bdebd1}
.flash-error{color:var(--danger);background:#fdebe8;border-color:#f6c8c2}
.flash-warning{color:var(--warning);background:#fff4dc;border-color:#f1d49d}
.flash-info{color:var(--info);background:#e9f3ff;border-color:#bad8f6}
.info-banner{
    color:var(--text);
    background:#f2f7f6;
    border-color:rgba(15,118,110,.18);
}

.app-modal-backdrop{
    background:rgba(21,24,22,.58);
    backdrop-filter:blur(6px);
}
.app-modal-dialog,.config-menu-modal-dialog{
    border-radius:18px;
    background:var(--panel);
    border:1px solid rgba(255,255,255,.76);
    box-shadow:0 34px 90px rgba(21,24,22,.30);
}
.app-modal-header{
    padding:18px 20px;
    background:#f7f4ed;
    border-bottom:1px solid rgba(198,189,174,.62);
}
.app-modal-title{color:var(--ink);font-weight:850}
.app-modal-subtitle{color:var(--text-soft)}
.app-modal-body{padding:20px}
.app-modal-close{
    width:44px;
    height:44px;
    border-radius:10px;
    background:#fffdf9;
    border:1px solid var(--border);
}

.dashboard-kpis,.role-grid,.config-menu-role-grid,.contract-summary-grid,.pm-stats-grid,.stats-grid{
    gap:14px;
}
.dashboard-kpis{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.contract-summary-grid{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.pm-stats-grid .stat-card,.stats-grid .stat-card{
    padding:16px;
    min-height:100px;
}
.pm-stats-grid .stat-label,.stats-grid .stat-label{
    color:var(--text-soft);
    font-size:.72rem;
    font-weight:850;
}
.pm-stats-grid .stat-value,.stats-grid .stat-value{
    color:var(--ink);
    font-weight:900;
}

.customer-toolbar,.contract-toolbar,.sla-toolbar,.config-menu-hero,.dashboard-head-actions,.customer-list-foot,.customer-list-head,.contract-list-head,.contract-list-foot,.sla-list-head,.sla-list-foot,.contract-list-actions,.sla-filter-actions,.customer-actions,.contract-actions,.sla-actions{
    gap:12px 14px;
}
.customer-filter-grid,.contract-filter-grid{gap:13px}
.customer-list-head,.sla-list-head,.contract-list-head{
    background:linear-gradient(180deg,#fffdf9,#f8f6f1);
    border-bottom-color:rgba(198,189,174,.62);
}
.contract-filter-card.is-collapsed{box-shadow:none}

.locale-switcher-select{
    min-height:44px;
    border-radius:10px;
}
.locale-switcher-sidebar .locale-switcher-select{
    color:#f5f7f5;
    background:rgba(255,255,255,.075);
    border-color:rgba(255,255,255,.14);
}
.locale-switcher-sidebar .locale-switcher-select:hover{background:rgba(255,255,255,.12)}
.locale-switcher-sidebar .locale-switcher-select:focus{background:#fffdf9;color:var(--ink)}

.auth-shell,.auth-card{max-width:520px}
.guest-wrapper{
    background:
        radial-gradient(circle at 18% 8%,rgba(15,118,110,.12),transparent 24rem),
        radial-gradient(circle at 92% 28%,rgba(183,121,31,.12),transparent 26rem);
}
.guest-header{position:relative;top:auto}
.guest-content{min-height:calc(100vh - 180px)}
.auth-card{
    border-radius:18px;
    border:1px solid rgba(255,255,255,.70);
    background:rgba(255,253,249,.90);
    box-shadow:0 28px 80px rgba(43,36,24,.13);
}

.liveconsole-console-box,.liveconsole-console-pre,.pm-code-preview{
    border-radius:12px;
    background:#101715;
    color:#dbe7e1;
}
.liveconsole-console-box{border-color:rgba(15,118,110,.24)}

@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{
        animation-duration:.01ms!important;
        animation-iteration-count:1!important;
        scroll-behavior:auto!important;
        transition-duration:.01ms!important;
    }
}

@media (min-width:1600px){
    :root{--sidebar-width:320px}
    .content-area{max-width:1760px}
}

@media (max-width:1200px){
    :root{--sidebar-width:292px}
    .user-panel{min-width:270px}
}

@media (max-width:980px){
    .layout-shell,body.menu-hidden .layout-shell{grid-template-columns:minmax(0,1fr)}
    .sidebar{
        width:min(86vw,306px);
        padding:16px 12px;
        border-top-right-radius:18px;
        border-bottom-right-radius:18px;
    }
    .backdrop{background:rgba(21,24,22,.50);backdrop-filter:blur(3px)}
    .site-header{
        position:sticky;
        top:10px;
        margin-top:10px;
    }
    .nav-menu{max-height:calc(100vh - 235px)}
}

@media (max-width:820px){
    .customer-table-wrap,.contract-table-wrap,.sla-table-wrap{
        border:0;
        background:transparent;
        box-shadow:none;
        padding:0;
    }
    .customer-table tbody,.contract-table tbody,.sla-table tbody{gap:12px}
    .customer-table tr,.contract-table tr,.sla-table tr{
        border-radius:12px;
        border:1px solid rgba(198,189,174,.74);
        background:var(--panel);
        box-shadow:var(--shadow-soft);
    }
    .customer-table td,.sla-table td,.contract-table tbody td{
        align-items:flex-start;
        padding:12px 14px;
        gap:12px;
    }
    .customer-table td::before,.sla-table td::before,.contract-table tbody td::before{
        color:var(--text-soft);
        font-size:.72rem;
        line-height:1.25;
    }
}

@media (max-width:760px){
    body{font-size:14px}
    .site-header,.guest-header{
        margin-left:10px;
        margin-right:10px;
        padding:13px;
        border-radius:14px;
    }
    .header-main{
        flex-direction:row;
        align-items:center;
    }
    .page-head{flex:1}
    .page-title{font-size:1.28rem}
    .menu-toggle-text{display:none}
    .user-panel{
        min-width:0;
        padding:12px 0 0;
        border-left:0;
        border-top:1px solid rgba(102,113,107,.18);
        text-align:left;
    }
    .content-area,.guest-content{
        padding-left:10px;
        padding-right:10px;
    }
    .card{padding:15px}
    .section-header{
        align-items:flex-start;
        flex-direction:column;
        gap:7px;
    }
    .button-row,.action-row,.pm-action-row,.pm-toolbar{
        align-items:stretch;
    }
    .button-row .btn,.action-row .btn,.pm-action-row .btn,.pm-toolbar .btn{
        justify-content:center;
    }
    .site-footer,.guest-footer{
        margin-left:10px;
        margin-right:10px;
        flex-direction:column;
        align-items:flex-start;
    }
}

@media (max-width:480px){
    .site-header{
        gap:10px;
    }
    .header-main{
        gap:10px;
    }
    .menu-toggle{
        min-width:44px;
        padding:10px;
    }
    .page-eyebrow{font-size:.66rem}
    .page-title{font-size:1.14rem}
    .btn{
        width:100%;
        justify-content:center;
    }
    .inline-form,.button-row form,.action-row form,.pm-action-row form{
        width:100%;
    }
    .inline-form .btn,.button-row form .btn,.action-row form .btn,.pm-action-row form .btn{
        width:100%;
    }
    .btn-icon,.btn-icon-only,.config-notif-page .btn-icon{
        width:44px;
        max-width:44px;
        flex:0 0 44px;
    }
    .customer-table td,.sla-table td,.contract-table tbody td{
        display:grid;
        grid-template-columns:1fr;
    }
    .customer-table td::before,.sla-table td::before,.contract-table tbody td::before{
        max-width:none;
        min-width:0;
    }
    .app-modal-scroll{padding:10px}
    .app-modal-dialog,.config-menu-modal-dialog{
        border-radius:14px;
    }
}