/* Dimensional industrial workspace: light surfaces, midnight frame, tactile controls. */
:root {--bg:#e9eef5;--accent:#234c81;--border:#d5dfec;--shadow:0 2px 2px rgba(22,43,72,.035),0 8px 22px rgba(31,56,90,.075),inset 0 1px 0 #fff;}
body {background:radial-gradient(ellipse at 95% 0%,#fff 0%,#eef3fa 36%,#e7edf6 100%)!important;}
#pageApp {background:linear-gradient(125deg,#e7eef8,#f4f7fc 70%,#e9eff7);}
#appHeader {background:linear-gradient(110deg,#fff 25%,#f3f7ff 100%)!important;border-bottom:1px solid #d5dfed!important;box-shadow:0 6px 22px rgba(24,44,75,.045)!important;position:relative;}
#appHeader::after {content:"";position:absolute;bottom:0;left:30px;width:58px;height:3px;background:linear-gradient(90deg,#275786,#77a5d4);border-radius:3px;}
.header h2 {font-size:22px;letter-spacing:-.5px;line-height:1.4;color:#163450;}
.ui-role-caption {display:block!important;font-size:11px!important;color:#73859d!important;font-weight:400;letter-spacing:.3px;margin-top:4px;}
.header-btn {border:1px solid #dae4f2;min-width:43px;min-height:43px;background:linear-gradient(145deg,#fff,#edf2fa)!important;box-shadow:inset 0 1px 0 #fff,0 3px 6px rgba(32,59,95,.07);}
#appContent {background:transparent;}
.card,.kpi-card,.stat-card,.setting-category,.equip-card,.pipe-overview-card,.role-group {
  background:linear-gradient(145deg,#fff 10%,#fdfefe 70%,#f3f7fc)!important;
  border:1px solid #fff!important;border-bottom-color:#d3deec!important;border-right-color:#dce5f1!important;
  border-radius:16px;box-shadow:0 2px 2px rgba(22,43,72,.035),0 9px 23px rgba(31,56,90,.085),inset 0 1px 0 #fff!important;
}
.card {padding:21px;margin-bottom:18px;}
.card.urgency-red {border-left:4px solid #cc5260!important;}
.card.urgency-orange {border-left:4px solid #c98245!important;}
.card.urgency-yellow {border-left:4px solid #c6a251!important;}
.section-title {font-size:16px;font-weight:650;color:#213f61!important;letter-spacing:.15px;margin:30px 0 15px;}
.kpi-card {position:relative;overflow:hidden;padding:24px 20px;text-align:left;}
.kpi-card::after {content:"";position:absolute;right:-13px;bottom:-17px;width:80px;height:80px;border:15px solid rgba(166,187,216,.07);border-radius:23px;transform:rotate(27deg);pointer-events:none;}
.kpi-value {font-size:36px;font-weight:650;letter-spacing:-1.1px;font-variant-numeric:tabular-nums;text-shadow:0 2px 0 #fff;}
.kpi-label {font-size:12px;font-weight:500;color:#71829a;letter-spacing:.25px;}
.stat-num {font-size:32px;letter-spacing:-.8px;}
.btn,.report-category,.chip-active,.sys-btn {box-shadow:0 2px 3px rgba(27,49,80,.06),inset 0 1px 0 rgba(255,255,255,.6);border-radius:9px;}
.btn-primary,.sys-btn-primary {background:linear-gradient(145deg,#35689f,#173a65)!important;border:1px solid #244d7c!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 4px 8px rgba(22,55,94,.2)!important;}
.btn-ghost {background:linear-gradient(150deg,#fff,#f2f6fb)!important;border-color:#d9e2ee!important;box-shadow:inset 0 1px 0 #fff,0 2px 3px rgba(27,49,80,.035);}
.btn-success {background:linear-gradient(140deg,#248d70,#12644d)!important;}
.btn-danger {background:linear-gradient(140deg,#cf5967,#a52d3b)!important;}
.btn-warning {background:linear-gradient(140deg,#c98648,#a55b1d)!important;}
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),select,textarea {box-shadow:inset 0 2px 4px rgba(27,49,80,.055)!important;background:linear-gradient(180deg,#f8fafd,#fff)!important;border-color:#d5dfed!important;}
.progress-bar {box-shadow:inset 0 1px 3px rgba(29,52,85,.12);background:#e6ecf4!important;}
.progress-fill {box-shadow:inset 0 1px 1px rgba(255,255,255,.45);}
.badge {box-shadow:inset 0 1px 0 rgba(255,255,255,.35);}
.modal {background:linear-gradient(150deg,#fff,#f5f8fd)!important;border:1px solid #fff;box-shadow:0 28px 80px rgba(15,32,57,.3),inset 0 1px 0 #fff;}
.modal-overlay {background:rgba(17,34,56,.40)!important;backdrop-filter:blur(7px);}
.step-tog {box-shadow:0 3px 5px rgba(23,45,76,.12),inset 0 1px 0 rgba(255,255,255,.45);border-bottom:2px solid rgba(22,46,78,.15);}
.pipe-block {box-shadow:0 2px 3px rgba(22,46,78,.12),inset 0 1px 0 rgba(255,255,255,.5)!important;}
.pipe-overview-seg {box-shadow:inset 0 1px 2px rgba(22,46,78,.09);}
.search-result-item {box-shadow:var(--shadow);border:1px solid #fff;}
.ui-login-header {background:rgba(255,255,255,.88)!important;box-shadow:0 3px 20px rgba(23,46,77,.04)!important;}
#pageLogin>.content {column-gap:42px;padding-top:40px!important;}
.ui-login-hero {padding:38px 30px 36px;border-radius:22px;background:linear-gradient(145deg,#1e456f,#112b4b 75%);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 18px 36px rgba(17,43,75,.19);overflow:hidden;min-height:548px;}
.ui-login-hero::before {content:"";position:absolute;width:220px;height:220px;border:1px solid rgba(180,207,238,.12);border-radius:38px;transform:rotate(-30deg);right:-115px;top:70px;box-shadow:0 0 0 26px rgba(155,189,230,.035),0 0 0 52px rgba(155,189,230,.03);}
.ui-login-hero .ui-eyebrow {color:#92afce;font-size:9px;letter-spacing:1.6px;}
.ui-login-hero h1 {color:#fff;font-size:36px;font-weight:650;letter-spacing:-1px;position:relative;text-shadow:0 2px 4px rgba(8,25,47,.16);}
.ui-login-hero p {color:#aec1d8;font-size:13px;}
.ui-hero-caption {color:#8fa9c7;font-size:12px;}
.ui-hero-foot {color:#c0d1e5;font-size:11px;position:relative;}
.ui-hero-line {background:linear-gradient(90deg,#c75464,#de8c99);box-shadow:0 3px 9px rgba(199,67,84,.22);}
.role-group {padding:21px 18px;border-radius:16px;}
.rg-title {padding-bottom:16px;}
.rg-icon {width:31px;height:31px;border-radius:9px;background:linear-gradient(145deg,#fff,#edf2f9);box-shadow:inset 0 1px 0 #fff,0 2px 5px rgba(24,49,80,.08);display:inline-flex;align-items:center;justify-content:center;}
.login-btn {background:linear-gradient(145deg,#f9fbfd,#edf3fa)!important;border:1px solid #e1e9f4!important;box-shadow:inset 0 1px 0 #fff,0 3px 5px rgba(26,47,75,.025)!important;border-radius:10px!important;}
.login-btn:hover {background:linear-gradient(145deg,#eef5ff,#e2ecf9)!important;box-shadow:inset 0 1px 0 #fff,0 5px 10px rgba(26,47,75,.1)!important;}
@media(hover:hover) {
  .kpi-card[onclick]:hover,.card[onclick]:hover,.setting-category:hover {transform:translateY(-2px);box-shadow:0 5px 8px rgba(22,43,72,.035),0 16px 28px rgba(31,56,90,.12),inset 0 1px 0 #fff!important;}
  .card,.kpi-card,.setting-category {transition:transform .18s,box-shadow .18s,border-color .18s;}
}
@media(min-width:1000px) {
  #pageApp.active {grid-template-columns:220px minmax(0,1fr);grid-template-rows:92px minmax(0,1fr);}
  #pageApp>.ui-app-brand {background:linear-gradient(130deg,#193958,#142e4c);border-bottom:1px solid rgba(167,196,229,.12);border-right:none;padding:17px 18px;gap:11px;}
  #pageApp>.ui-app-brand img {width:58px;height:43px;padding:4px;background:#fff;border-radius:7px;box-shadow:0 3px 9px rgba(0,10,27,.18);}
  #pageApp>.ui-app-brand strong {color:#f2f7ff;font-size:18px;}
  #pageApp>.ui-app-brand span {color:#8ca8c7;font-size:9px;}
  #appTabs {background:linear-gradient(160deg,#183653,#11283f 82%)!important;border-right:1px solid #213e5b;box-shadow:inset -1px 0 0 rgba(188,212,240,.08)!important;padding:27px 15px;gap:10px;}
  #appTabs::before {color:#7993af;letter-spacing:2px;padding-bottom:16px;}
  #appTabs::after {color:#5f7c9b;border-top:1px solid rgba(180,205,235,.11);}
  #appTabs .tab-item {color:#99b1cd!important;border:1px solid transparent;min-height:51px;border-radius:10px;font-weight:500;letter-spacing:.3px;}
  #appTabs .tab-item.active {background:linear-gradient(145deg,#40648e,#284b75)!important;border-color:rgba(176,209,245,.28);color:#fff!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 5px 9px rgba(1,13,30,.16);}
  #appTabs .tab-item:not(.active):hover {color:#e4efff!important;background:rgba(108,147,191,.13);}
  #appHeader {padding:15px 34px;}
  #appContent {padding:28px 34px 42px;}
  #appContent:has(#chartStages):has(>.stat-grid-4) {grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:0 22px;}
  #appContent:has(#chartStages)>.stat-grid-4 .kpi-card {padding:21px 14px;}
  #appContent:has(#chartStages)>.stat-grid-4 .kpi-value {font-size:33px;}
  #appContent:has(#chartStages)>.stat-grid-4 .kpi-label {font-size:12px;}
  .stat-grid-4 {gap:12px;}
}
@media(max-width:999px) {
  #pageApp>.ui-app-brand {background:linear-gradient(120deg,#163655,#1b436a);height:66px;border:0;box-shadow:inset 0 -1px 0 rgba(163,193,231,.2);}
  #pageApp>.ui-app-brand img {width:51px;height:38px;background:#fff;padding:3px;border-radius:5px;}
  #pageApp>.ui-app-brand strong {color:#fff;font-size:16px;}
  #pageApp>.ui-app-brand span {color:#9eb5ce;}
  #appHeader {padding:10px 17px;min-height:70px;}
  .header h2 {font-size:18px;}
  .ui-role-caption {font-size:10px!important;letter-spacing:0;}
  #appTabs {background:linear-gradient(180deg,#fff,#f3f7fd)!important;box-shadow:0 -3px 14px rgba(23,46,78,.08),inset 0 1px 0 #fff!important;}
  .tab-item.active {background:linear-gradient(145deg,#e4edf9,#d4e2f4)!important;box-shadow:inset 0 1px 0 #f9fcff,0 2px 4px rgba(32,63,98,.1);border:1px solid #ccdcef;color:#214c7e!important;}
}
@media(max-width:600px) {
  #appContent {padding:16px 13px 28px;}
  .card {padding:18px;margin-bottom:15px;border-radius:14px;}
  .kpi-card {padding:19px 17px;border-radius:14px;}
  .kpi-value {font-size:31px;}
  .section-title {font-size:15px;margin:25px 0 12px;}
  .header-btn {min-width:39px;min-height:39px;padding:7px 10px;}
  #appHeader h2 {min-width:0;}
  #appHeader .ui-role-caption {font-size:9px!important;}
  #appContent [style*="font-size:11px"] {font-size:12px!important;}
  .ui-login-hero {min-height:0;margin-bottom:26px;padding:24px;border-radius:16px;border:1px solid #456586;box-shadow:0 9px 20px rgba(17,43,75,.13);}
  .ui-login-hero h1 {font-size:25px;line-height:1.5;margin:13px 0 8px;letter-spacing:-.5px;}
  .ui-login-hero p {font-size:11px;color:#b9cbe0;}
  .ui-login-hero::before {top:-85px;right:-75px;}
  .ui-login-intro h2 {font-size:22px;}
  .role-group {padding:18px;border-radius:14px;}
  .rg-desc {width:100%;font-size:11px;}
  .login-btn {padding:13px 6px;}
}
/* Deliberate motion: navigation, modal entry, click feedback and gentle hover lighting. */
.ui-density {order:4;flex:0 0 auto;height:39px;min-width:48px;padding:0 11px;border-radius:9px;background:linear-gradient(145deg,#fff,#edf2fa);border:1px solid #d6e1ef;color:#496786;font-size:11px;font-weight:600;box-shadow:inset 0 1px 0 #fff,0 3px 5px rgba(32,59,95,.06);cursor:pointer;}
.ui-density[aria-pressed="true"] {background:#dce8f8;color:#214b7e;box-shadow:inset 0 2px 4px rgba(32,59,95,.08);}
.ui-wave-host {position:relative;overflow:hidden;isolation:isolate;}
.ui-click-wave {position:absolute;z-index:1;border-radius:50%;background:currentColor;opacity:0;transform:scale(.15);animation:uiWave .48s ease-out;pointer-events:none;}
@keyframes uiWave {0%{opacity:.16;transform:scale(.15)}100%{opacity:0;transform:scale(1)}}
@keyframes uiModalIn {from{opacity:.35;transform:translateY(18px) scale(.975)}to{opacity:1;transform:translateY(0) scale(1)}}
.modal-overlay.active>.modal,.modal-mask.show>.modal-box,#missingDetailModal.show>.modal-content {animation:uiModalIn .23s cubic-bezier(.2,.7,.2,1);}
.ui-scroll-top {position:fixed;z-index:80;right:26px;bottom:69px;width:41px;height:41px;border:1px solid #fff;background:linear-gradient(145deg,#fff,#e2eaf5);border-radius:12px;box-shadow:0 5px 14px rgba(20,47,84,.17),inset 0 1px 0 #fff;color:#31577f;font-size:24px;cursor:pointer;}
.ui-scroll-top[hidden] {display:none;}
html[data-ui-density="compact"] #appContent .card,html[data-ui-density="compact"] .page-view .pm-card,html[data-ui-density="compact"] .page-view .daily-card {padding:13px 15px;margin-bottom:10px;border-radius:11px;}
html[data-ui-density="compact"] .kpi-card {padding:15px!important;min-height:unset!important;}
html[data-ui-density="compact"] .section-title {margin-top:17px;margin-bottom:10px;}
html[data-ui-density="compact"] .proj-table td,html[data-ui-density="compact"] .as-table td {padding-top:9px;padding-bottom:9px;}
@media(hover:hover) {
  .kpi-card:hover,.login-btn:hover {background:radial-gradient(circle at var(--ui-light-x,50%) var(--ui-light-y,30%),#fff 0%,#f3f8ff 56%,#e8f0fb 100%)!important;}
  .ui-density:hover {transform:translateY(-1px);box-shadow:0 5px 9px rgba(32,59,95,.1);}
}
@media(max-width:600px) {
  .ui-density {font-size:10px;min-width:39px;padding:0 6px;height:39px;}
  #appHeader {gap:5px;padding-left:13px;padding-right:13px;}
  #appHeader .header-btn {min-width:35px;width:35px;padding:6px;}
  .ui-role-caption {max-width:175px;line-height:1.5;}
  .ui-scroll-top {right:14px;bottom:calc(112px + env(safe-area-inset-bottom));width:40px;height:40px;}
}
@media(prefers-reduced-motion:reduce) {.ui-click-wave{animation:none!important}.modal-overlay.active>.modal,.modal-mask.show>.modal-box,#missingDetailModal.show>.modal-content {animation:none!important;}}