/* Approved STGCRM graphite / cobalt presentation. Business rules are unchanged. */
@media screen {
 :root{--accent:#246ee8;--muted:#5c6c81;color:#18263b;background:#d2d9e3;font-family:"Segoe UI",Arial,sans-serif}
 body{background:#d2d9e3;color:#18263b;font-size:14px}
 .app-shell{grid-template-columns:232px minmax(0,1fr)}
 .sidebar{background:#151d27;border-right:1px solid #344153;padding:26px 17px;gap:24px}
 .brand{gap:10px;font-size:25px;letter-spacing:-.7px}.brand .accent{color:#bfcbdc;font-weight:350}
 .brand-mark{width:34px;height:46px;flex-shrink:0;border-radius:0;background:none;box-shadow:none;font-size:0}
 .brand-mark svg{width:100%;height:100%;display:block}
 .role-card{background:#ffffff04;border:0;border-top:1px solid #364254;border-bottom:1px solid #364254;border-radius:0;padding:16px 4px}
 .role-card .identity{font-size:18px;line-height:1.4}.role-card .exit{color:#a8b8cd;font-size:12px}
 .navigation .nav-button{border-radius:6px;padding:12px 10px;color:#bdcadd;gap:12px;line-height:1.4;font-size:14px}
 .navigation .nav-button>span{color:#b8c8df;font-size:20px}
 .navigation .nav-button.active{background:#293647;border-color:transparent;box-shadow:inset 3px 0 #3988ff;color:#fff}
 .navigation .nav-button.active>span{color:#5a9eff}.navigation .nav-button:hover{background:#253243}
 .sidebar-footer,.author-line{color:#9bacc3}.online-dot{background:#45bf88;box-shadow:none}
 .main-content{background:#d2d9e3;padding:0 26px 36px;min-width:0}
 .topbar{background:#344256;color:#f4f7fc;margin:0 -26px 22px;padding:24px 26px 26px;border-bottom:1px solid #51617a;min-height:130px}
 .topbar h1{font-size:38px;font-weight:650;letter-spacing:-1px;line-height:1.2}.topbar .eyebrow{color:#afbed2;font-size:11px;letter-spacing:2px}
 .presence-badge{color:#d5dfed;font-size:13px}.top-actions{gap:18px}
 button{background:#246ee8;border:1px solid transparent;border-radius:7px;box-shadow:0 2px 3px #10233c0c;font-weight:550;transition:background .15s,box-shadow .15s}
 button:hover{background:#195dcf;filter:none}button.secondary{background:#e4eaf2;border:1px solid #bdc9d9;color:#334965}
 button.secondary:hover{background:#d5dfed}button:disabled{opacity:.45;cursor:not-allowed}
 button:focus-visible,a:focus-visible{outline:3px solid #4a92ff;outline-offset:3px}
 input,select,textarea{background:#f0f3f8;color:#1b2b43;border-color:#abbad0;border-radius:6px;min-height:40px}
 input:focus,select:focus,textarea:focus{border-color:#246ee8;outline:2px solid #246ee830}
 input[type=checkbox]{min-height:0;accent-color:#246ee8}.switch input:checked{background:#246ee8}
 label,.muted,td small{color:#5b6c83}a{color:#1d5cc3}.eyebrow{color:#5b6c83}
 .toolbar{background:transparent;border:0;border-radius:0;padding:0;gap:12px;margin:18px 0}
 .toolbar label{margin:0}.toolbar input,.toolbar select{min-height:40px}.inspection-bar{max-width:510px}
 .card{background:#eaf0f6;border:1px solid #c4cfdd;border-radius:8px;box-shadow:none;padding:18px}
 .card.scroll{padding:0;overflow:auto}.grid{gap:14px}
 #content>.grid:has(.metric){background:#344256;border:1px solid #465872;border-radius:8px;padding:16px;gap:0;margin-bottom:18px}
 #content>.grid .metric{background:transparent;border:0;border-right:1px solid #53637b;border-radius:0;color:#dce5f1;box-shadow:none;padding:14px 18px;margin:0;min-width:0}
 #content>.grid .metric strong{color:#f6f8fc;font-size:24px;font-weight:650;letter-spacing:-.5px;font-variant-numeric:tabular-nums;white-space:normal;overflow-wrap:anywhere}
 #content>.grid .metric .muted{color:#bccbdf}#profitMetric strong{color:#8ab9ff!important}
 table{font-size:14px}th{background:#4a5c75;color:#f2f6fc;font-weight:500;white-space:normal}
 th,td{padding:13px 12px;border-bottom:1px solid #cad4e1;vertical-align:middle}td{color:#1c2c44}
 tbody tr{background:#e9eef5}tbody tr:nth-child(even){background:#dfe6ef}tbody tr[data-job]:hover{background:#d0dff2}
 td small{font-size:12px}.badge{border-radius:5px;padding:5px 9px;font-size:12px;font-weight:550;letter-spacing:0}
 .status-open{background:#dce9ff;color:#1c5dba}.status-work{background:#d6e6ff;color:#1a58b7}
 .badge:not(.status-open):not(.status-work):not(.status-done):not(.status-late){background:#e7dffc;color:#6943a5}
 .status-done{background:#d8ebdf;color:#25633e}.status-late{background:#f7dce0;color:#a12c41}
 .empty{color:#62738b}.role-tabs .active{background:#246ee8;color:#fff}
 dialog{background:#e4eaf2;color:#192b43;border:1px solid #aebdd2;border-radius:12px;box-shadow:0 28px 100px #0b152b70;padding:24px}
 dialog::backdrop{background:#101a2caa;backdrop-filter:blur(3px)}
 .modal-heading{margin:-24px -24px 20px;padding:20px 24px;background:#344256;color:#f3f6fb;border-bottom:1px solid #51627b}
 .modal-heading h2{font-size:20px}.modal-heading .icon-close{background:#ffffff12;border-color:#ffffff30;color:#fff}
 dialog .card{background:#edf2f8;border-color:#c5d0df}.job-responsibles{font-size:12px;color:#53677f}
 .part-options{background:#edf2f8;border-color:#acbdd3}.part-options [role=option]{border-color:#cad5e4}
 .part-options [role=option]:hover,.part-options [role=option]:focus{background:#d9e8fb;outline-color:#246ee8}
 .photos img{border-color:#b7c7dc}.draft-photo .photo-download{color:#174a98;background:#f4f8fff2}
 #notice{background:#22344c;color:#f4f7fc;border:1px solid #506989;border-radius:9px;inset:auto 24px 24px auto;margin:0;max-width:min(440px,calc(100vw - 48px));overflow-wrap:anywhere}
 .required-warning{color:#a71919;background:#fff0f0;border-color:#df7777}.card.missing-required-photo{background:#fff7f7;border:2px solid #c52828}
 input[aria-invalid=true],select[aria-invalid=true],textarea[aria-invalid=true]{border:2px solid #c52828;background:#fff7f7}
 .auth-screen{background:linear-gradient(120deg,#151d27,#344256);gap:60px}.auth-wordmark{display:flex;align-items:center;gap:12px;letter-spacing:-1px}
 .auth-wordmark>svg{width:40px;height:55px}.auth-wordmark span{color:#bfcee3}.auth-kicker,.auth-company{color:#8eb7ef}
 .auth-description,.auth-process{color:#b7c7db}.auth-company span{color:#9bacc5}.auth-panel{background:#eaf0f6;border-color:#bdcadc;border-radius:12px;box-shadow:0 24px 70px #0003}
 .form-note{color:#5c718a}.auth-intro h2{font-weight:600}
 @media(min-width:1600px){.main-content{padding-left:36px;padding-right:36px}.topbar{margin-left:-36px;margin-right:-36px;padding-left:36px;padding-right:36px}}
 @media(max-width:1100px){.app-shell{grid-template-columns:210px minmax(0,1fr)}.brand{font-size:22px}.topbar h1{font-size:32px}.main-content{padding:0 20px 30px}.topbar{margin:0 -20px 20px;padding:22px 20px}}
 @media(max-width:800px){.app-shell{display:block}.sidebar{height:auto;position:static;padding:18px;gap:12px}.role-card{padding:10px 4px}.main-content{padding:0 14px 24px}.topbar{margin:0 -14px 16px;padding:20px 14px;min-height:0}.topbar h1{font-size:28px}.top-actions{width:100%;gap:12px}.navigation .nav-button{padding:9px 11px}.presence-badge{white-space:normal}.grid{grid-template-columns:1fr}#content>.grid:has(.metric){grid-template-columns:repeat(2,minmax(0,1fr));padding:6px}#content>.grid .metric{padding:12px 10px}#content>.grid .metric strong{font-size:20px}dialog{padding:16px;width:96vw}.modal-heading{margin:-16px -16px 16px;padding:16px}th,td{padding:10px 8px}.auth-screen{padding:28px 18px;gap:24px}.auth-panel{padding:24px}}
 /* Reference composition: slim navigation, prominent heading, outlined icons and initial avatars. */
 :root{font-family:"Segoe UI Variable Text","Segoe UI",Arial,sans-serif}
 .sidebar{background:linear-gradient(115deg,#18212a,#101820);padding:22px 20px;gap:0}
 .brand{font-size:29px;letter-spacing:-1px;gap:12px}.brand-mark{width:32px;height:54px}.brand .accent{font-weight:300}
 .auth-wordmark>svg{width:32px;height:54px;flex-shrink:0}.auth-wordmark>div{font-weight:750}.auth-wordmark>div>span{font-weight:300}
 .brand-description{white-space:pre-line;color:#94a9bf;font-size:10px;line-height:1.5;letter-spacing:.4px;margin:2px 0 34px 0}
 .navigation .nav-button{padding:15px 8px;gap:16px;font-weight:400;font-size:15px;margin:4px 0;border-radius:5px}
 .navigation .nav-button>span{display:flex;align-items:center;justify-content:center;width:26px;flex:0 0 26px;color:#e3edf7}
 .navigation svg{width:24px;height:24px}.navigation .nav-button.active{background:linear-gradient(100deg,#293848,#222d39);box-shadow:inset 4px 0 #348aff}
 .navigation .nav-button.active>span{color:#3395ff}
 .sidebar-footer{border-top:1px solid #596a7a;padding-top:14px}
 .topbar{display:grid;grid-template-columns:minmax(0,1fr) auto;position:relative;padding-top:70px;background:linear-gradient(115deg,#384859,#303d4f);margin-bottom:0;border-bottom:0;min-height:180px}
 .topbar>div:first-child{grid-column:1;grid-row:1}.top-actions{grid-column:2;grid-row:1;align-self:center}
 .topbar h1{font-size:52px;letter-spacing:-1.5px;font-weight:700;line-height:1.1}
 .page-subtitle{font-size:19px;color:#dbe6f4;margin:4px 0 0;font-weight:400}
 .topbar .eyebrow{position:absolute;top:20px;left:26px;font-size:10px;letter-spacing:1px;font-weight:400}
 .top-actions{display:flex;flex-direction:column;align-items:flex-start;gap:8px;max-width:300px}
 .top-actions .presence-badge{position:static;font-size:13px;white-space:normal;min-height:36px;text-align:left;line-height:1.35}
 #sendSystemAnnouncement.presence-badge{border:1px solid #72aaff;background:#245a97;color:#fff;padding:9px 14px}
 @media(max-width:1100px){.top-actions:has(#managerReview){flex-direction:column;align-items:flex-start;gap:4px}.top-actions #onlineExecutors{order:0}.top-actions #managerReview{order:1}}
 .topbar .header-profile{position:absolute;right:26px;top:12px;display:flex;align-items:center;gap:12px;margin:0;padding:0 0 0 20px;border:0;border-left:1px solid #7f8da0;background:none}
 .header-profile .identity{margin:0;font-size:13px;font-weight:400;letter-spacing:0}
 .header-profile .exit{margin:0;padding:4px;color:#c8d5e6;font-size:11px}
 .person-line{display:flex;align-items:center;gap:10px;min-width:0;margin:5px 0;line-height:1.3}
 .person-avatar{display:inline-flex;align-items:center;justify-content:center;flex:0 0 31px;width:31px;height:31px;border-radius:50%;background:linear-gradient(135deg,#dce4ee,#bac5d4);color:#25364e;font-size:11px;font-weight:600;letter-spacing:0}
 .person-caption{display:flex;flex-direction:column;gap:2px;min-width:0;font-size:12px;color:#17263c;font-weight:400}.person-caption small{font-size:11px;color:#596f8b}
 .person-name-row{display:flex;align-items:baseline;gap:10px}.person-phone{white-space:nowrap;flex-shrink:0}
 .header-profile .person-caption{color:#f5f7fc;font-size:13px}.header-profile .person-caption small{color:#b7c8df}.header-profile .person-avatar{width:35px;height:35px;flex-basis:35px}
 .job-responsibles{display:flex;gap:28px;flex-wrap:wrap;margin-bottom:14px}.job-responsibles .person-caption{font-size:12px}
 #content>.grid:has(.metric){border:0;border-top:1px solid #617084;border-radius:0;background:linear-gradient(115deg,#384859,#303d4f);margin:0 -26px 22px;padding:18px 26px;grid-template-columns:repeat(auto-fit,minmax(235px,1fr));row-gap:18px}
 #content>.grid .metric{position:relative;padding:4px 14px 4px 65px;min-height:86px;font-size:14px;font-weight:400;border-right:1px solid #607087}
 #content>.grid .metric strong{font-size:28px;line-height:1.25;letter-spacing:-.7px;margin-top:8px;color:#fff;font-weight:650}
 .metric-symbol{position:absolute;left:9px;top:5px;display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#4474ad,#34516f);color:#b6d8ff}
 .metric-symbol svg{width:25px;height:25px;filter:drop-shadow(0 0 3px #4090ff)}
 #metricPeriod{padding-top:14px}#content>.toolbar{gap:12px}
 #address{flex:2 1 330px;max-width:none;padding-left:15px}.card.scroll{border:0;border-radius:6px}
 th{font-size:13px;font-weight:400;background:linear-gradient(#566981,#4b5e78);height:46px}
 th,td{padding:14px 13px}#rows td{height:88px;font-size:13px}#rows td:nth-child(2),#rows td:nth-child(3){font-weight:600}#rows td small{font-weight:400}
 #rows td:last-child:not(:has(.badge)){font-variant-numeric:tabular-nums;font-weight:600}
 .badge:before{content:"";display:inline-block;width:7px;height:7px;background:currentColor;border-radius:50%;margin-right:7px}
 .badge{padding:6px 10px;font-weight:400}.status-work{color:#075cf4;background:#c7ddff}
 @media(min-width:1600px){#content>.grid:has(.metric){margin-left:-36px;margin-right:-36px;padding-left:36px;padding-right:36px}}
 @media(max-width:1100px){.brand{font-size:25px}.topbar h1{font-size:42px}.presence-badge{position:static}.top-actions{max-width:230px}#content>.grid:has(.metric){margin-left:-20px;margin-right:-20px;padding:18px 20px}.topbar .header-profile{right:20px}}
 @media(max-width:800px){.sidebar{padding:15px}.brand-description{margin-bottom:14px}.navigation .nav-button{padding:9px;font-size:13px;gap:8px}.topbar{display:flex;padding-top:78px;min-height:0}.topbar h1{font-size:36px}.topbar .eyebrow{display:none}.topbar .header-profile{left:14px;right:auto;border:0;padding:0}.top-actions{max-width:none}.page-subtitle{font-size:16px}#content>.grid:has(.metric){margin-left:-14px;margin-right:-14px;padding:14px;grid-template-columns:repeat(2,minmax(0,1fr))}#content>.grid .metric{padding:4px 8px 4px 42px;font-size:12px}#content>.grid .metric strong{font-size:21px}.metric-symbol{width:30px;height:30px;left:3px}.metric-symbol svg{width:19px;height:19px}}
 /* Keep close controls geometrically centered, independent of font glyph metrics. */
 .modal-heading{display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;gap:16px}
.user-labels{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px;max-width:580px}
.user-label{display:inline-block;border:1px solid #9db5d055;border-radius:6px;padding:3px 7px;font-size:11px;line-height:1.4;color:#355778;background:#dce8f477}
.user-label.ready{color:#246244;background:#dcefe577;border-color:#72a78a66}
.user-label.missing{color:#805b24;background:#f3e8d477;border-color:#b79b6266}
#downloadJobPhotos{flex-shrink:0;font-size:13px;white-space:nowrap}
 @media(max-width:600px){#modal>.modal-heading:has(#downloadJobPhotos){flex-wrap:wrap;gap:8px}#modal>.modal-heading:has(#downloadJobPhotos)>h2{flex-basis:calc(100% - 56px)}#modal>.modal-heading:has(#downloadJobPhotos)>#close{order:0}#downloadJobPhotos{order:1}}
 @media screen{#modal>.modal-heading{position:sticky;top:-24px;z-index:30;isolation:isolate}#modal{scroll-padding-top:90px}}
 @media screen and (max-width:800px){#modal>.modal-heading{top:-16px}}
 .modal-heading h2{flex:1;min-width:0;margin:0;line-height:1.35;overflow-wrap:anywhere}
 .modal-heading .icon-close,.draft-photo .draft-photo-remove{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;padding:0;line-height:1;font-size:0;flex-shrink:0;vertical-align:middle}
 .modal-heading .icon-close{position:relative;width:40px;height:40px;min-width:40px;min-height:40px;margin:0;align-self:center;border-radius:8px}
 .draft-photo .draft-photo-remove{width:28px;height:28px;min-width:28px;min-height:28px;top:4px;right:4px;margin:0}
 .modal-heading .icon-close::before,.modal-heading .icon-close::after,.draft-photo .draft-photo-remove::before,.draft-photo .draft-photo-remove::after{content:"";position:absolute;top:50%;left:50%;width:16px;height:2px;border-radius:1px;background:currentColor;transform:translate(-50%,-50%) rotate(45deg);pointer-events:none}
 .modal-heading .icon-close::after,.draft-photo .draft-photo-remove::after{transform:translate(-50%,-50%) rotate(-45deg)}
 .draft-photo .draft-photo-remove::before,.draft-photo .draft-photo-remove::after{width:12px}
 .photo-title{align-items:center}.photo-title>h3{line-height:1.4;min-width:0;overflow-wrap:anywhere}
 .photo-title>button,.photo-title>label{flex-shrink:0;max-width:100%}
 button svg{display:block;flex-shrink:0}
 .toolbar>button,.toolbar input:not([type=checkbox]):not([type=radio]):not([type=file]),.toolbar select:not([multiple]){min-height:42px;height:42px;box-sizing:border-box}
 .toolbar>button{display:inline-flex;align-items:center;justify-content:center;line-height:1.2}
 /* Compact dashboard: remove decorative empty height and keep monetary values together. */
 .topbar{min-height:0;padding-top:62px;padding-bottom:16px;row-gap:10px}
 .topbar h1{font-size:34px;letter-spacing:-.7px}.page-subtitle{font-size:15px;margin-top:3px}
 .inspection-bar{padding-bottom:0;margin:10px 0}.inspection-bar label{margin-bottom:0}
 #metricPeriod{padding-top:0;margin:10px 0;gap:10px}
 #content>.grid:has(.metric){grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));padding-top:12px;padding-bottom:12px;row-gap:10px;margin-bottom:12px}
 #content>.grid .metric{padding:3px 12px;min-height:64px;font-size:12px;container-type:inline-size}
 #content>.grid .metric>span:not(.metric-symbol){display:block;padding-left:39px;min-height:32px;align-content:center}
 #content>.grid .metric strong{font-size:20px;font-size:clamp(14px,10cqi,20px);line-height:1.25;letter-spacing:-.3px;margin-top:5px;white-space:nowrap;overflow-wrap:normal;word-break:normal}
 #content>.grid .metric .muted{font-size:11px;line-height:1.3}
 #content>.grid .metric .metric-pending{white-space:nowrap}
 @media(min-width:1440px){#content>.grid:has(#profitMetric){grid-template-columns:repeat(7,minmax(0,1fr))}#content>.grid:has(.metric):not(:has(#profitMetric)){grid-template-columns:repeat(6,minmax(0,1fr))}}
 .metric-symbol{width:31px;height:31px;left:8px;top:4px}.metric-symbol svg{width:19px;height:19px}
 #content>.toolbar{margin-top:12px;margin-bottom:12px}#rows td{height:72px;padding-top:10px;padding-bottom:10px}
 @media(max-width:800px){.topbar{padding-top:66px;padding-bottom:14px}.topbar h1{font-size:28px}.page-subtitle{font-size:14px}#content>.grid:has(.metric){grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}}
 #modal .row > button[data-action="warranty"]{margin-left:auto;order:1}
#modal button[hidden]{display:none!important}
@media screen {
 #modal[open]:has(> .job-dialog-actions){display:flex;flex-direction:column;overflow:hidden;max-height:92vh;max-height:92dvh;}
 #modal:has(> .job-dialog-actions)>.modal-heading{position:relative;top:auto;flex-shrink:0;}
 #modal>.job-dialog-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 2px 12px;}
 #modal>.job-dialog-actions{flex-shrink:0;margin:0;padding:12px 16px;background:#edf3fa;border-top:1px solid #b8c8db;box-shadow:0 -4px 12px rgb(24 44 70 / 10%);max-height:30vh;overflow-y:auto;}
 #modal>.job-dialog-actions h3{margin:0 0 8px;}
 #modal>.job-dialog-actions .row{flex-wrap:wrap;gap:8px;}
}
 @media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
}
 @media screen{#modal:has(#workSearch){width:calc(100vw - 32px);max-width:calc(100vw - 32px)}#modal .work-options{width:100%;max-height:48vh;overflow-y:auto;border:1px solid #acbdd2;border-radius:8px;background:#f5f8fc;margin:8px 0 16px}#modal .work-options[hidden]{display:none}#modal .work-option{display:flex;width:100%;flex-direction:column;align-items:flex-start;text-align:left;white-space:normal;overflow-wrap:anywhere;line-height:1.45;padding:12px 16px;border:0;border-bottom:1px solid #cad5e3;border-radius:0;background:#f5f8fc;color:#17263c;box-shadow:none;height:auto}#modal .work-option:hover,#modal .work-option:focus-visible{background:#dce9fa;outline:2px solid #2673da;outline-offset:-2px}#modal .work-option small{color:#536b89}#modal #workUnit{white-space:normal;overflow-wrap:anywhere}}
.settlement-results { margin-top:5px; max-height:260px; overflow-y:auto; border:1px solid #9aabc1; border-radius:8px; background:#f1f5fa; }
.settlement-results[hidden] { display:none !important; }
#modal .settlement-results button, .settlement-results button { display:block; width:100%; margin:0; padding:10px 12px; border:0; border-bottom:1px solid #d3dce8; border-radius:0; background:transparent; color:#19304b; text-align:left; white-space:normal; height:auto; }
#modal .settlement-results button:hover, #modal .settlement-results button[aria-selected="true"], .settlement-results button:focus { background:#d7e6fa; }
.settlement-message { padding:10px 12px; color:#405774; }
.city-chips { list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.city-chips li { display:flex; align-items:center; gap:8px; border:1px solid #aabbd1; border-radius:8px; padding:6px 10px; background:#edf3fa; }
#modal .city-chips button { padding:0; width:26px; height:26px; min-height:26px; flex-shrink:0; font-size:19px; }
#modal .executor-city-row { grid-template-columns:1fr 1fr; }
/* Unified photo upload tiles, matching the graphite/blue CRM palette. */
#modal label.photo-upload-tile, label.photo-upload-tile { position:relative; display:flex; align-items:center; gap:14px; padding:14px 18px; min-height:76px; min-width:240px; max-width:100%; margin:8px 0; border:1px solid #465970; border-radius:18px; background:linear-gradient(120deg,#2b3a4e,#34465f); color:#edf4ff; cursor:pointer; box-sizing:border-box; transition:border-color .15s,background .15s; }
#modal .photo-upload-tile:hover { border-color:#70adff; background:#354c69; }
.photo-upload-icon { display:flex; align-items:center; justify-content:center; flex:0 0 48px; height:48px; border-radius:14px; background:#294d70; color:#65acff; }
.photo-upload-icon svg { width:30px; height:30px; }
.photo-upload-text { font-size:15px; font-weight:600; line-height:1.35; }
#modal label.photo-upload-tile input[type=file], label.photo-upload-tile input[type=file] { position:absolute; inset:0; width:100%; height:100%; opacity:0; margin:0; padding:0; cursor:pointer; }
.photo-upload-tile:focus-within { outline:2px solid #6facff; outline-offset:3px; }
.photo-upload-tile:has(input:disabled) { opacity:.55; cursor:wait; }
@media(max-width:600px){#modal label.photo-upload-tile { width:100%; min-width:0; padding:12px; }.photo-title:has(.photo-upload-tile){flex-wrap:wrap;}}
/* Light outlined upload control, aligned with the beginning of its section. */
#modal .photo-title:has(> .photo-upload-tile) { flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:8px; }
#modal label.photo-upload-tile, label.photo-upload-tile { background:transparent; border:1px solid rgba(72,112,164,.32); color:#405b7d; border-radius:12px; min-height:62px; padding:10px 14px; margin:0; min-width:0; gap:12px; box-shadow:none; }
#modal .photo-upload-tile:hover { background:rgba(75,136,219,.06); border-color:rgba(72,112,164,.58); }
.photo-upload-tile .photo-upload-icon { background:transparent; color:rgba(56,112,183,.72); border:1px solid rgba(72,112,164,.23); border-radius:10px; flex-basis:38px; height:38px; }
.photo-upload-tile .photo-upload-icon svg { width:25px; height:25px; }
.photo-upload-tile .photo-upload-icon svg path:first-child { fill:none; stroke:currentColor; stroke-width:1.5; }
.photo-upload-tile .photo-upload-icon svg path:nth-child(2) { stroke:currentColor; stroke-width:2; }
.photo-upload-tile .photo-upload-icon svg circle { fill:currentColor; }
.photo-upload-tile .photo-upload-text { font-size:14px; font-weight:500; }
.upload-file-name { display:block; max-width:360px; overflow-wrap:anywhere; font-size:12px; font-weight:400; color:#607693; margin-top:3px; }
.upload-file-name:empty { display:none; }
.document-upload-tile .photo-upload-icon svg path { fill:none; stroke:currentColor; stroke-width:1.7; }
.pending-attachments { display:contents; }
.pending-attachments figcaption { color:#5378a4; font-size:12px; padding:6px 3px; }
.pending-attachments img { opacity:.65; }
.pending-attachments.upload-failed figcaption { color:#b33636; }
@media screen{#modal:has(#workSearch){min-height:min(82vh,860px)}#modal .work-options.picker-overlay-menu{max-height:560px}}
/* Import actions stay outside the scrolling body even for 1500-row workbooks. */
@media screen {
 #modal[open]:has(> .tariff-import-body){display:flex;flex-direction:column;height:min(90vh,900px);height:min(90dvh,900px);max-height:90dvh;padding:0;overflow:hidden;box-sizing:border-box;}
 #modal:has(> .tariff-import-body)>.modal-heading{flex:0 0 auto;margin:0;padding:18px 24px;}
 #modal>.tariff-import-body{flex:1 1 auto;min-height:0;overflow:auto;padding:20px 24px;}
 #modal>.tariff-import-actions{flex:0 0 auto;display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:12px;margin:0;padding:16px 24px;background:#e4eaf2;border-top:1px solid #aebdd2;color:#192b43;font-size:14px;}
 #modal .tariff-import-actions>span{flex:1 1 220px;}
 #modal .tariff-import-actions>button{flex:0 0 auto;}
 @media(max-width:600px){#modal>.tariff-import-body{padding:14px;}#modal>.tariff-import-actions{padding:12px;gap:8px;}#modal .tariff-import-actions>span{flex-basis:100%;}}
}

@media screen {
 #rows tr.job-overdue,#rows tr.job-overdue:nth-child(even){background:#ffc7c7}
 #rows tr.job-overdue:hover{background:#ffb3b3}
 #rows .job-overdue-label{color:#a33333;font-weight:600}
}
/* Admin-only exchange viewer; external stylesheet respects the existing CSP. */
#exchangeRequest,#exchangeResponse{white-space:pre-wrap;overflow-wrap:anywhere;max-width:100%;padding:16px;border:1px solid #acbdd2;border-radius:8px;background:#edf3f9;color:#17263c;line-height:1.5}
#modal:has(#exchangeRows) .scroll{overflow-x:auto}
#officeContext{width:100%;display:flex;align-items:end;flex-wrap:wrap;gap:8px}
#officeContext label{min-width:0;flex:1;color:#d5dfed;font-size:12px}
#officeContext select{width:100%;margin-top:4px;max-width:100%;text-overflow:ellipsis}
#officeContext button{flex:none}
/* Use the header width instead of stacking every administrative control. */
.topbar{grid-template-columns:minmax(0,1fr);padding-top:16px;padding-bottom:16px;row-gap:16px;min-height:0}
.topbar>div:first-child{grid-column:1;grid-row:2}
.topbar .eyebrow{position:static;margin:0 0 5px}
.topbar .top-actions,.topbar .top-actions:has(#managerReview){grid-column:1;grid-row:1;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;flex-wrap:wrap;max-width:none;width:100%;gap:10px}
.topbar .top-actions .presence-badge{min-height:36px;white-space:nowrap;margin:0}
.topbar .top-actions #managerReview,.topbar .top-actions #onlineExecutors{order:0}
.topbar .top-actions .header-profile{order:10}
.topbar .header-profile{position:static;flex:none;margin-left:auto;padding-left:16px;align-self:center}
.topbar #officeContext{width:auto;flex:none;flex-wrap:nowrap;align-items:center;gap:8px}
.topbar #officeContext label{display:flex;align-items:center;gap:8px;flex:none;white-space:nowrap;margin:0}
.topbar #officeContext select{width:220px;max-width:28vw;margin:0}
.workspace-tools{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:12px 24px;padding:12px 0}
.workspace-tools .inspection-bar{display:flex;align-items:flex-end;flex-wrap:wrap;flex:1 1 480px;gap:8px;max-width:700px;margin:0;padding:0;min-width:0}
.workspace-tools .inspection-bar>label:not([hidden]){flex:1 1 260px;width:auto!important;min-width:0;margin:0}
.workspace-tools .inspection-bar>button{display:inline-flex;align-items:center;justify-content:center;flex:none;margin:0;min-height:42px}
.workspace-tools #metricPeriod{display:flex;align-items:flex-end;flex-wrap:wrap;flex:0 1 auto;gap:8px;margin:0;padding:0}
.workspace-tools #metricPeriod label{width:158px;min-width:0;margin:0}
.workspace-tools #metricPeriod button{margin:0}
@media(max-width:800px){
 .topbar{display:grid;padding-top:14px;row-gap:14px}
 .topbar .top-actions,.topbar .top-actions:has(#managerReview){gap:8px}
 .topbar .header-profile{padding-left:0;border-left:0}
 .topbar #officeContext{flex:1 1 100%;width:100%}
 .topbar #officeContext label{flex:1;min-width:0;white-space:normal}
 .topbar #officeContext select{flex:1;width:100%;max-width:none;min-width:0}
 .workspace-tools{gap:12px;padding:12px 0}
 .workspace-tools .inspection-bar{flex-basis:100%;max-width:none}
 .workspace-tools #metricPeriod{flex:1}
 .workspace-tools #metricPeriod label{flex:1 1 125px;width:auto}
}


/* Workspace header: office context, page actions, then operating filters. */
.workspace-header.topbar{display:block;min-height:0;padding:0 26px;background:#344457;border-bottom:1px solid #b6c3d3;margin-bottom:0}
.workspace-header .workspace-context-row{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:48px;border-bottom:1px solid rgba(201,216,235,.16)}
.workspace-header .workspace-context-slot{min-width:0;flex:1}
.workspace-header #officeContext{display:flex;align-items:center;flex-wrap:nowrap;gap:8px;width:auto;margin:0;padding:0}
.workspace-header #officeContext label{display:flex;flex-direction:row;align-items:center;text-align:left;gap:10px;min-width:0;max-width:480px;margin:0;color:#becde0;font-size:12px;white-space:nowrap}
.workspace-header #officeContext select{box-sizing:border-box;min-width:0;width:260px;max-width:100%;height:34px;min-height:34px;margin:0;padding:5px 32px 5px 10px;border:1px solid #71849d;border-radius:6px;background:#3d5066;color:#f3f7fd;font-size:13px;text-overflow:ellipsis}
.workspace-header #officeContext button{height:34px;min-height:34px;padding:5px 12px;flex:none;border:1px solid #71849d;background:transparent;color:#e1eaf7;border-radius:6px;font-size:12px}
.workspace-header #officeContext button:hover{background:#485d76}
.workspace-header #officeContext .presence-badge{font-weight:500;color:#edf3fa;font-size:13px;padding:0;min-height:0}
.workspace-header .header-profile{position:static;display:flex;align-items:center;gap:16px;flex:none;align-self:auto;margin:0;padding:0;border:0;background:none;max-width:340px}
.workspace-header .header-profile .identity{font-size:13px;margin:0;min-width:0}
.workspace-header .header-profile .person-line{margin:0;gap:9px}
.workspace-header .header-profile .person-avatar{width:30px;height:30px;flex-basis:30px;background:#d9e3ef}
.workspace-header .header-profile .person-caption{line-height:1.3}
.workspace-header .header-profile .person-caption small{color:#b8c8dc;font-size:11px}
.workspace-header .header-profile .exit{padding:6px 0;color:#c7d5e7;font-size:12px;border:0;white-space:nowrap}
.workspace-header .header-profile .exit:hover{color:white;text-decoration:underline;background:none}
.workspace-header .workspace-page-row{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px;padding:12px 0}
.workspace-header .workspace-page-title{min-width:160px;flex:0 0 auto}
.workspace-header .eyebrow{display:none}
.workspace-header h1{font-size:28px;line-height:1.15;letter-spacing:-.6px;margin:0;font-weight:650}
.workspace-header .page-subtitle{font-size:12px;line-height:1.4;margin:4px 0 0;color:#b9c9de}
.workspace-header .top-actions,.workspace-header .top-actions:has(#managerReview){display:flex;flex-direction:row;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px;max-width:none;width:auto;min-width:0;align-self:auto}
.workspace-header .top-actions>button,.workspace-header .top-actions .presence-badge{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:34px;height:34px;margin:0;padding:6px 11px;border:1px solid #71849d;border-radius:6px;background:transparent;color:#dfe9f7;white-space:nowrap;font-size:12px;line-height:1.2}
.workspace-header .top-actions>button:hover{background:#465c75;border-color:#90a3bc}
.workspace-header .top-actions #onlineExecutors{order:0;border-color:transparent;color:#c8d7e9;background:transparent;padding-left:0;padding-right:8px}
.workspace-header .top-actions #managerReview{order:0}
.workspace-header .top-actions #sendSystemAnnouncement{background:transparent;border-color:#71849d;color:#dfe9f7}
.workspace-header .top-actions #adminCorrectionMode[aria-pressed=true]{background:#d7a85c;color:#16273b;border-color:#e0b872}
.workspace-tools{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:12px 28px;padding:12px 0;margin:0;border-bottom:1px solid #afbdd0}
.workspace-tools .inspection-bar{display:flex;align-items:flex-end;flex-wrap:nowrap;gap:8px;flex:1 1 440px;min-width:0;max-width:650px;margin:0;padding:0}
.workspace-tools .inspection-bar>label:not([hidden]){flex:1 1 auto;min-width:0;width:auto!important;max-width:none;margin:0;color:#5a6f8c;font-size:11px;line-height:1.4}
.workspace-tools .inspection-bar>label input,.workspace-tools .inspection-bar>label select{height:36px;min-height:36px;margin-top:5px;font-size:13px;border-radius:6px}
.workspace-tools .inspection-bar>button{display:inline-flex;align-items:center;justify-content:center;flex:none;min-height:36px;height:36px;padding:7px 12px;margin:0;border-radius:6px;white-space:nowrap;font-size:12px;line-height:1.2}
.workspace-tools #metricPeriod{display:flex;align-items:flex-end;flex-wrap:nowrap;gap:8px;flex:0 1 auto;min-width:0;margin:0;padding:0}
.workspace-tools #metricPeriod label{box-sizing:border-box;flex:0 0 146px;width:146px;min-width:0;margin:0;color:#5a6f8c;font-size:11px;line-height:1.4}
.workspace-tools #metricPeriod input{box-sizing:border-box;display:block;width:100%;min-width:0;max-width:100%;height:36px;min-height:36px;margin-top:5px;padding:6px 9px;border-radius:6px;font-size:12px}
.workspace-tools #metricPeriod button{height:36px;min-height:36px;margin:0;padding:7px 11px;border-radius:6px;font-size:12px;white-space:nowrap}
@media(min-width:1600px){.workspace-header.topbar{padding-left:36px;padding-right:36px}}
@media(max-width:1100px){
 .workspace-header.topbar{padding-left:20px;padding-right:20px}
 .workspace-header .workspace-page-row{min-height:68px}
 .workspace-header .top-actions{max-width:70%}
 .workspace-tools{gap:12px 18px}
 .workspace-tools .inspection-bar{flex-basis:100%;max-width:none}
 .workspace-tools #metricPeriod{margin-left:auto}
}
@media(max-width:800px){
 .workspace-header.topbar{padding:0 14px}
 .workspace-header .workspace-context-row{gap:12px;min-height:58px;flex-wrap:wrap;padding:12px 0}
 .workspace-header .workspace-context-slot{flex:1 1 100%}
 .workspace-header #officeContext label{flex:1;max-width:none}
 .workspace-header #officeContext select{flex:1;width:100%;min-width:0}
 .workspace-header .header-profile{max-width:none;width:100%;justify-content:space-between}
 .workspace-header .workspace-page-row{display:block;min-height:0;padding:16px 0}
 .workspace-header h1{font-size:26px}
 .workspace-header .top-actions,.workspace-header .top-actions:has(#managerReview){justify-content:flex-start;max-width:none;width:100%;gap:6px;margin-top:12px}
 .workspace-header .top-actions>button,.workspace-header .top-actions .presence-badge{min-height:36px;height:36px}
 .workspace-tools{padding:12px 0;gap:12px}
 .workspace-tools .inspection-bar{flex-wrap:wrap;gap:8px}
 .workspace-tools .inspection-bar>label:not([hidden]){flex-basis:100%}
 .workspace-tools #metricPeriod{flex:1;flex-wrap:wrap;margin:0}
 .workspace-tools #metricPeriod label{flex:1 1 125px;width:auto}
 .workspace-tools #metricPeriod button{flex:none}
}
@media(max-width:800px){
 .workspace-header #officeContext select,.workspace-header #officeContext button,
 .workspace-header .top-actions>button,.workspace-header .top-actions .presence-badge,
 .workspace-tools .inspection-bar>label input,.workspace-tools .inspection-bar>label select,
 .workspace-tools .inspection-bar>button,.workspace-tools #metricPeriod input,.workspace-tools #metricPeriod button{height:44px;min-height:44px}
 .workspace-header .header-profile .exit{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
}

/* Keep desktop navigation scrolling within the dark sidebar. */
@media (min-width: 801px) and (forced-colors: none) {
 .sidebar {
  scrollbar-width: thin;
  scrollbar-color: #667c92 #151d27;
 }
 .sidebar:hover,
 .sidebar:focus-within {
  scrollbar-color: #8297ad #151d27;
 }
 @supports not (scrollbar-width: thin) {
  .sidebar::-webkit-scrollbar { width: 8px; }
  .sidebar::-webkit-scrollbar-track { background: #151d27; }
  .sidebar::-webkit-scrollbar-thumb {
   background: #667c92;
   border: 1px solid #151d27;
   border-radius: 8px;
  }
  .sidebar::-webkit-scrollbar-thumb:hover { background: #8297ad; }
 }
}

/* Keyboard navigation and bounded financial report tables. */
#rows tr[data-job]:focus-visible{outline:3px solid #347de1;outline-offset:-3px}
#executorReportResult .scroll th{position:sticky;top:0;z-index:2;background:#50647f;color:#fff}
#executorReportResult .metric strong{white-space:normal;overflow-wrap:anywhere;font-size:clamp(18px,2vw,25px)}
@media(pointer:coarse),(max-width:700px){#modal .city-chips button{width:44px;height:44px;min-width:44px;min-height:44px}}