/* DataComfort's shared identity for ServiceDesk, Reception and the customer portal. */
:root{--ink:#1a2c45;--muted:#66758b;--line:#dce4ef;--border:#dce4ef;--bg:#f4f7fb;--nav:#122b4c;--teal:#194e91;--orange:#dc6518;font-family:"Segoe UI",Arial,sans-serif}
body{color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
h1,h2,h3{color:var(--ink)}h1{font-weight:700;letter-spacing:-.8px}h2{font-weight:650;letter-spacing:-.25px}p,small{line-height:1.55}
button,input,select,textarea{font-family:inherit}button{transition:background-color .15s,border-color .15s,box-shadow .15s;line-height:1.35}button:not(:disabled):hover{border-color:#a9bdd9}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #efaa70;outline-offset:3px}
button.primary,a.primary,.login-button{background:linear-gradient(120deg,#16447e,#2362aa)!important;color:white!important;border:1px solid #174c88!important;box-shadow:0 3px 8px #194e911c;border-radius:8px;font-weight:650;transition:background .15s,box-shadow .15s,transform .15s}
button.primary:not(:disabled):hover,a.primary:hover,.login-button:hover{background:linear-gradient(120deg,#133b6c,#1b5290)!important;box-shadow:0 5px 14px #194e9129;transform:translateY(-1px)}
input,select,textarea{border-color:#cdd9e7;border-radius:8px}input:hover,select:hover,textarea:hover{border-color:#a6bcd8}input:focus,select:focus,textarea:focus{border-color:#658fc0}
.panel,.person-card,.metric,.case-table,.table,.staff-card,.metrics article{border-color:var(--line);border-radius:13px;box-shadow:0 3px 14px #142e4d05}
.page-head,.page-heading{gap:24px}.eyebrow{color:#315d91;letter-spacing:1.7px;font-size:10px}.page-head .muted,.page-heading .muted{font-size:13px}.metric{position:relative;overflow:hidden}.metric:before{content:"";position:absolute;left:0;top:22px;width:3px;height:34px;background:#e9782a;border-radius:0 3px 3px 0}.metric strong{color:#173e70}.metric.alert strong,.metric:nth-child(2) strong{color:#af531b}
.badge{border-radius:6px;font-weight:600;background:#eaf0f9;color:#315c91}.badge.hot,.badge.waiting{background:#fff1e4;color:#974b16}.badge.closed{background:#eaf4ee;color:#397058}.table-head{background:#edf2f9;color:#69809c}.ticket-row[data-ticket]:hover,.case-row:hover{background:#f4f8fd}.event.note,.event.call{background:#f3f6fa}.warning{background:#fff3e6;color:#984b17}.customer-visible-warning{border-color:#dd711f}.case-live-state{color:#4e7a6c}
/* Use the supplied wordmark, including its original blue/orange symbol. */
.brand{display:block;text-decoration:none;line-height:1.2;letter-spacing:normal}.brand img{display:block;width:210px;max-width:100%;height:auto}.brand .brand-product{display:flex;align-items:center;gap:9px;font-family:inherit;font-weight:650;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:#48617f;margin-top:10px;line-height:1.5}.brand .brand-product:before{content:"";width:17px;height:2px;background:#e77426;flex-shrink:0}
.sidebar{background:linear-gradient(165deg,#142f53 0%,#112746 65%,#172f4d 100%);border-right:1px solid #132a49}.sidebar>.brand{background:#fff;padding:14px 12px;margin:0 0 2px;border:1px solid #ffffff40;border-radius:11px;box-shadow:0 6px 22px #081b3326}.sidebar .brand img{width:190px}.sidebar .brand .brand-product{font-size:10px;margin-top:9px;padding-top:9px;border-top:1px solid #e5ebf3;letter-spacing:2px}.sidebar .nav-label{color:#8fa8c8;margin-top:34px;letter-spacing:1.8px}.sidebar nav button{border-radius:8px;padding:11px 13px;color:#c6d4e7;min-height:43px;margin:4px 0;border:1px solid transparent;font-size:13px}.sidebar nav button:hover{background:#ffffff0b;color:white;border-color:#ffffff12}.sidebar nav button.selected{background:#ffffff12;color:white;box-shadow:inset 3px 0 #ed842e;border-color:#ffffff0a}.sidebar-foot{color:#d2dfee}.sidebar-foot small{color:#99afc9}.sidebar-foot button{border-color:#ffffff40;background:#ffffff0b;color:white}.sidebar-foot button:hover{background:#ffffff18}.sidebar .help-button{color:#c3d3e8;border-color:#ffffff32}.workspace>header{background:#ffffffec;border-bottom:1px solid #e1e7f0}.workspace>header .search input{border:1px solid #e3e9f2;background:#f7f9fc;border-radius:9px;padding:10px 13px}.development{border-radius:7px;background:#eef3fa;color:#5d7595}
header .brand{font-size:inherit}header .brand img{width:216px}header .brand .brand-product{font-size:9px;margin-top:8px}header #account>span,.account>span{color:#3f5777;font-size:13px}header #account>button,.account>button{border-color:#d7e1ee;border-radius:8px}.case-navigation{border-bottom-color:#dbe4f1}.case-navigation [aria-current=page]{background:#e6eefb;color:#214f88;border-radius:8px}.case-context h2{color:#456181;font-size:11px;letter-spacing:1px}.access-context{background:#eaf0f8;border-color:#dce5f1}.history-icon{border-radius:10px}.back-link,.back{color:#315e94}.back{border-color:#dbe5f0;background:#ffffffa8}
/* Shared login composition: room for the glass sphere on the right. */
body:has(>.login-gate),body:has(.welcome){min-height:100svh;background:linear-gradient(90deg,#f7f9fdf0 0%,#f7f9fd9c 44%,#f7f9fd08 75%),url('/assets/login-background.png') center center/cover no-repeat fixed}
.login-gate{max-width:1384px;min-height:100svh;margin:0 auto;padding:36px 36px 28px;background:none;border:0;border-radius:0;line-height:1.6;display:flex;flex-direction:column;align-items:flex-start}
.login-brand{display:inline-flex;flex-direction:column;text-decoration:none;color:#365679;gap:9px}.login-brand img{width:270px;max-width:100%;height:auto}.login-brand>span{font-size:10px;font-weight:650;letter-spacing:2.5px;text-transform:uppercase;display:flex;align-items:center;gap:9px}.login-brand>span:before{content:"";width:19px;height:2px;background:#e87729}
.login-card,.welcome{background:#fffffff5;border:1px solid #ffffffd9;border-top:3px solid #e2792d;border-radius:18px;padding:36px;box-shadow:0 18px 55px #193b6811,0 2px 6px #193b6807;backdrop-filter:blur(12px);width:min(468px,100%)}
.login-card{margin-top:clamp(58px,10vh,110px)}.login-card h1,.welcome h1{font-size:36px;line-height:1.15;letter-spacing:-1px;margin:14px 0 22px;max-width:390px}.login-card>p:not(.eyebrow):not(.login-note),.welcome>p:not(.eyebrow){color:#536780;font-size:14px;line-height:1.75;margin:0 0 22px}.login-card .eyebrow,.welcome .eyebrow{font-size:9px;letter-spacing:1.7px}.login-card .login-button,.welcome .primary{display:flex;width:100%;min-height:48px;align-items:center;justify-content:center;padding:13px 18px;margin:26px 0 0;text-decoration:none}.login-card .login-button:after,.welcome a.primary:after{content:'→';font-size:20px;font-weight:400;margin-left:auto}.login-card .login-button:before,.welcome a.primary:before{content:'';width:20px}.login-note{font-size:11px;color:#75859c;margin:18px 0 0;text-align:center}.login-footer{font-size:11px;color:#7a8ca3;margin:auto 0 0;padding-top:45px;letter-spacing:.2px}
body:has(.welcome)>header{background:transparent;border-bottom:0;max-width:1384px;margin:auto;padding:34px 36px 0;min-height:0}body:has(.welcome)>header .brand img{width:270px}body:has(.welcome)>main{max-width:1384px;min-height:auto;margin:auto;padding:0 36px}.welcome{margin:clamp(58px,10vh,110px) 0 0}.welcome .primary+p.muted{font-size:11px;line-height:1.6;margin:18px 0 0;text-align:center;max-width:365px}body:has(.welcome)>footer{max-width:1384px;color:#7588a1;padding:32px 36px;font-size:11px;margin:4vh auto 0}
body:has(.welcome) #notice:not(:empty){max-width:468px;margin-top:24px;margin-bottom:-28px;border-radius:8px}body:has(.welcome) #notice:not(:empty)+#content .welcome{margin-top:52px}
@media(min-width:1700px){.login-gate,body:has(.welcome)>header,body:has(.welcome)>main,body:has(.welcome)>footer{max-width:1520px}.login-card,.welcome{margin-left:28px}.login-brand{margin-left:28px}}
@media(max-width:1100px){.sidebar>.brand{padding:12px 9px}.sidebar .brand .brand-product{font-size:9px;letter-spacing:1.5px}.sidebar nav button{font-size:12px;padding:10px 9px}}
@media(max-width:760px){.brand img,header .brand img{width:180px}.brand .brand-product{font-size:9px;letter-spacing:1.5px}.login-gate{padding:28px 22px;min-height:100svh}.login-brand img,body:has(.welcome)>header .brand img{width:232px}.login-card,.welcome{padding:28px;width:min(440px,100%);border-radius:15px;margin-top:52px}.login-card h1,.welcome h1{font-size:32px}.login-card>p:not(.eyebrow):not(.login-note),.welcome>p:not(.eyebrow){font-size:13px}.login-gate,.welcome{position:relative}body:has(>.login-gate),body:has(.welcome){background-position:66% center;background-image:linear-gradient(90deg,#f7f9fdf2,#f7f9fdb0),url('/assets/login-background.png')}body:has(.welcome)>header{padding:28px 22px 0}body:has(.welcome)>main{padding:0 22px}body:has(.welcome)>footer{padding:26px 22px}.login-footer{padding-top:35px}.page-head{gap:18px}.panel{border-radius:11px}}
@media(max-width:700px){.sidebar>.brand{display:flex;align-items:center;justify-content:space-between;gap:14px;max-width:none;margin:0;padding:12px 14px}.sidebar>.brand img{width:190px;max-width:60%}.sidebar .brand .brand-product{display:flex;border:0;margin:0;padding:0;font-size:9px;white-space:nowrap}.sidebar nav button{font-size:11px;padding:8px 10px;min-height:37px}.sidebar .sidebar-foot{padding:8px 0}.workspace>header .search input{width:100%}.metric{border-radius:10px}.metric:before{top:16px;height:28px}.person-card{border-radius:11px}header .brand img{width:160px}header .brand .brand-product{font-size:8px;letter-spacing:1.2px}.topbar .brand img{width:170px}}
@media(max-width:420px){.login-brand img,body:has(.welcome)>header .brand img{width:208px}.login-card,.welcome{padding:25px;margin-top:42px}.login-card h1,.welcome h1{font-size:30px}.login-card .eyebrow,.welcome .eyebrow{font-size:8px}.login-gate{padding:24px 18px}body:has(.welcome)>header{padding:24px 18px 0}body:has(.welcome)>main{padding:0 18px}body:has(.welcome)>footer{padding:24px 18px}header .brand img{width:145px}.sidebar>.brand img{width:170px}.sidebar .brand .brand-product:before{display:none}}
@media(prefers-reduced-motion:reduce){button,.primary,.login-button{transition:none!important;transform:none!important}}
.sidebar nav{min-height:0;overflow-y:auto;flex:1;scrollbar-width:thin;scrollbar-color:#ffffff30 transparent}.sidebar .sidebar-foot{flex-shrink:0;margin-top:12px}@media(max-width:700px){.sidebar nav{overflow:visible;flex:none}}