*{box-sizing:border-box}body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:#f4f7fb;color:#172033}.app-shell{min-height:100vh;display:flex}.sidebar{width:255px;background:#101827;color:#dbe5f5;padding:20px 14px;position:sticky;top:0;height:100vh}.brand{display:flex;gap:12px;align-items:center;padding:5px 8px 24px}.brand-mark{background:#3b82f6;color:#fff;border-radius:10px;font-weight:900;padding:10px 8px}.brand b{font-size:14px;letter-spacing:.8px}.brand small{display:block;color:#8ea0bd;margin-top:3px;font-size:11px}.sidebar nav{display:grid;gap:4px}.sidebar button,.import-btn{border:0;background:transparent;color:#b9c5d8;padding:11px 12px;border-radius:8px;text-align:left;font:inherit;cursor:pointer}.sidebar button:hover,.sidebar button.active,.import-btn:hover{background:#1d2a3d;color:#fff}.nav-label{font-size:10px;letter-spacing:1.3px;color:#6f819d;margin:17px 10px 5px}.side-foot{position:absolute;bottom:20px;left:22px;color:#6f819d;font-size:11px}.main{flex:1;min-width:0}.topbar{height:95px;background:#fff;border-bottom:1px solid #e5e9f0;display:flex;justify-content:space-between;align-items:center;padding:20px 34px}.eyebrow{font-size:10px;font-weight:800;letter-spacing:1.5px;color:#3b82f6;margin:0 0 5px}.topbar h1{margin:0;font-size:25px}.top-actions{display:flex;gap:10px}.top-actions button{padding:9px 12px;border:1px solid #d9e0eb;border-radius:8px;background:#fff;cursor:pointer}.danger-outline{color:#c24141!important}.content{padding:28px 34px;max-width:1500px;margin:auto}.grid{display:grid;gap:16px}.grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.card{background:#fff;border:1px solid #e5e9f0;border-radius:14px;padding:20px;box-shadow:0 5px 20px rgba(20,32,51,.035)}.kpi .label{font-size:11px;text-transform:uppercase;letter-spacing:.8px;color:#70809a;font-weight:800}.kpi .value{font-size:28px;font-weight:800;margin-top:8px}.kpi .sub{font-size:12px;color:#718096;margin-top:5px}.card h3{margin:0 0 14px;font-size:15px}.muted{color:#728096}.section{margin-top:20px}.table-wrap{overflow:auto}.data-table{width:100%;border-collapse:collapse;font-size:13px}.data-table th{background:#f7f9fc;color:#6b7890;text-transform:uppercase;letter-spacing:.45px;font-size:10px}.data-table th,.data-table td{padding:10px 11px;border-bottom:1px solid #edf0f4;text-align:left;white-space:nowrap}.badge{display:inline-block;padding:4px 7px;border-radius:999px;font-size:10px;font-weight:800;background:#eef2f7;color:#59677e}.badge.ok{background:#e8f7ef;color:#197247}.badge.warn{background:#fff4db;color:#9b6b00}.badge.bad{background:#fdecec;color:#b93838}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.form-grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}label{display:grid;gap:6px;font-size:12px;font-weight:700;color:#536179}input,select,textarea{width:100%;padding:10px;border:1px solid #dce3ec;border-radius:8px;background:#fff;color:#172033;font:inherit}textarea{resize:vertical}.btn{border:0;border-radius:8px;padding:11px 14px;font-weight:800;cursor:pointer}.btn.primary{background:#2563eb;color:#fff}.btn.secondary{background:#edf2f8;color:#344158}.btn.ghost{background:#fff;border:1px solid #dce3ec}.btn.danger{background:#e64949;color:#fff}.btn.full{width:100%}.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.workspace{display:grid;grid-template-columns:1.35fr .9fr;gap:18px}.video-wrap{position:relative;background:#101827;border-radius:12px;overflow:hidden;min-height:300px}.video-wrap video{width:100%;display:block;max-height:560px}.video-empty{position:absolute;inset:0;display:grid;place-items:center;color:#8ea0bd}.dropzone{border:2px dashed #c9d3e2;border-radius:10px;padding:18px;text-align:center;cursor:pointer;margin-bottom:12px}.dropzone:hover{border-color:#3b82f6;background:#f6f9ff}.dropzone b{display:block;color:#25324a}.dropzone small{font-weight:400;color:#718096}.time-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:12px 0}.timebox{background:#f7f9fc;padding:10px;border-radius:8px}.timebox span{font-size:10px;color:#7b879b}.timebox b{display:block;font-size:15px;margin-top:3px}.master-preview{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}.master-preview div{background:#f7f9fc;padding:9px;border-radius:8px}.master-preview span{display:block;font-size:10px;color:#7b879b}.master-preview b{font-size:12px}.hint{font-size:12px;color:#77849a}.seg-controls{display:flex;gap:8px;margin:12px 0}.summary-bar{display:flex;gap:16px;align-items:center;flex-wrap:wrap;font-size:12px;color:#65738a}.summary-bar b{color:#172033}.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}.filters select,.filters input{max-width:220px}.progress{height:8px;background:#edf1f6;border-radius:99px;overflow:hidden}.progress>i{display:block;height:100%;background:#3b82f6}.status-row{display:flex;gap:8px;align-items:center}.empty{padding:34px;text-align:center;color:#8290a5}.stat-table td.num{text-align:right}.chart-row{display:flex;align-items:center;gap:10px;margin:10px 0}.chart-label{width:220px;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bar{height:24px;background:#e8eef8;border-radius:6px;min-width:2px;position:relative}.bar i{display:block;height:100%;background:#3b82f6;border-radius:6px}.bar small{position:absolute;right:6px;top:4px;font-size:10px;color:#172033;font-weight:700}.analysis-note{border-left:4px solid #3b82f6;background:#f7f9fc;padding:12px 14px;border-radius:0 8px 8px 0;font-size:12px;color:#526078;margin-bottom:14px}.hidden{display:none}@media(max-width:1050px){.sidebar{width:220px}.workspace{grid-template-columns:1fr}.grid.cols-4,.form-grid.four{grid-template-columns:repeat(2,1fr)}.time-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:760px){.sidebar{position:fixed;transform:translateX(-100%);z-index:20}.content{padding:18px}.topbar{padding:16px 18px}.grid.cols-4,.grid.cols-3,.grid.cols-2,.form-grid,.form-grid.four{grid-template-columns:1fr}.main{width:100%}.chart-label{width:120px}.time-grid{grid-template-columns:1fr 1fr}}
.master-legend{margin:14px 0;display:flex;gap:8px;flex-wrap:wrap;align-items:center}.section-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}.modal-backdrop{position:fixed;inset:0;background:rgba(10,20,30,.45);display:flex;align-items:center;justify-content:center;padding:20px;z-index:100}.modal{background:#fff;border-radius:16px;max-width:760px;width:100%;padding:22px;max-height:90vh;overflow:auto;box-shadow:0 20px 60px rgba(0,0,0,.25)}.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:16px}.full{grid-column:1/-1}@media(max-width:700px){.section-head{display:block}.section-head>div:last-child{margin-top:10px}.modal{padding:16px}}
/* Video observation v2.3 improvements */
.video-card{padding-bottom:18px}.video-stage{display:grid;grid-template-columns:minmax(0,1fr) 112px;gap:12px;align-items:stretch}.video-wrap{min-height:390px;aspect-ratio:16/9;border:1px solid #24334a;background:#101827;box-shadow:inset 0 0 0 1px rgba(255,255,255,.03)}.video-wrap video{width:100%;height:100%;max-height:none;object-fit:contain;background:#070b12}.video-empty{font-size:13px;text-align:center;background:linear-gradient(180deg,rgba(20,31,48,.96),rgba(11,18,29,.98))}.video-empty>div{display:grid;gap:7px}.video-empty strong{font-size:17px;color:#e8eef9}.video-empty span{color:#93a3bb}.video-tools{display:flex;flex-direction:column;gap:10px;justify-content:center}.video-skip{min-height:78px;border:1px solid #d8e1ee;border-radius:12px;background:#f7f9fc;color:#223047;font:700 12px/1.25 Inter,Segoe UI,Arial,sans-serif;cursor:pointer;display:grid;place-items:center;gap:5px;transition:.18s}.video-skip span{font-size:11px;color:#66758c}.video-skip:hover{border-color:#2563eb;background:#eff6ff;color:#1d4ed8;transform:translateY(-1px)}.video-tip{margin:10px 0 0;padding:9px 11px;border-radius:8px;background:#f7f9fc;color:#70809a;font-size:11px}.video-tip b{display:inline-block;color:#344158;border:1px solid #d8e1ee;border-radius:4px;padding:1px 5px;margin:0 1px;background:#fff}@media(max-width:1050px){.video-stage{grid-template-columns:1fr}.video-tools{flex-direction:row}.video-skip{flex:1;min-height:50px;display:flex;justify-content:center;align-items:center}.video-wrap{min-height:330px}}@media(max-width:760px){.video-wrap{min-height:230px}.video-tools{gap:8px}.video-skip{min-height:48px}}
/* United Tractors-inspired theme: yellow, navy, black */
:root{--ut-yellow:#f5b400;--ut-yellow-dark:#d99700;--ut-navy:#071b33;--ut-navy-2:#102b4d;--ut-black:#101010;--ut-bg:#f6f7f8;--ut-line:#d9dee5;--ut-ink:#142033}
body{background:var(--ut-bg);color:var(--ut-ink)}
.sidebar{background:linear-gradient(180deg,#071b33 0%,#0b2340 100%);border-right:3px solid var(--ut-yellow)}
.brand-mark{background:var(--ut-yellow);color:var(--ut-black);border-radius:9px}
.brand small,.side-foot{color:#aebdd0}.nav-label{color:#f2c64d}.sidebar button:hover,.sidebar button.active,.import-btn:hover{background:var(--ut-navy-2);color:#fff;box-shadow:inset 4px 0 0 var(--ut-yellow)}
.topbar{border-bottom:3px solid var(--ut-yellow)}.eyebrow{color:#b57d00}.topbar h1{color:var(--ut-navy)}
.card{border-color:var(--ut-line);box-shadow:0 6px 20px rgba(7,27,51,.06)}
.btn.primary{background:var(--ut-yellow);color:var(--ut-black)}.btn.primary:hover{background:#e5a700}.btn.secondary{background:var(--ut-navy);color:#fff}.btn.secondary:hover{background:#102b4d}.btn.ghost{border-color:#c9d0d9}.danger-outline{color:#a63b28!important}
input,select,textarea{border-color:#cbd3dd}input:focus,select:focus,textarea:focus{outline:2px solid rgba(245,180,0,.28);border-color:var(--ut-yellow)}
.data-table th{background:#eef1f4;color:var(--ut-navy)}.badge.warn{background:#fff1bf;color:#7a5700}.badge.bad{background:#fce5df}.progress>i,.bar i{background:var(--ut-yellow)}
.analysis-note{border-left-color:var(--ut-yellow);background:#fff9e8}.dropzone:hover{border-color:var(--ut-yellow);background:#fffaf0}.video-empty strong{color:#fff}.video-tools{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;flex-direction:unset}.video-skip{min-height:48px;background:var(--ut-navy);border-color:var(--ut-navy);color:#fff;display:flex;justify-content:center;align-items:center;font-size:13px}.video-skip:hover{border-color:var(--ut-yellow);background:#102b4d;color:#fff}.video-tip{border-left:4px solid var(--ut-yellow);background:#fff9e8;color:#4f5b6b}.video-wrap{border-color:var(--ut-navy)}
.two-equal{grid-template-columns:repeat(2,minmax(0,1fr))}.rating-head{align-items:flex-end}.add-pic-form{display:grid;grid-template-columns:minmax(150px,1fr) minmax(220px,1.2fr) auto;gap:8px;width:min(100%,760px)}.rating-table-wrap{overflow-x:auto}.rating-table{min-width:1120px}.rating-table select{min-width:120px}.rating-table .pic-dept{min-width:180px}.rating-table th,.rating-table td{white-space:normal}.rating-table td{vertical-align:middle}.rating-table .rf-result{font-weight:800;color:var(--ut-navy)}
@media(max-width:900px){.add-pic-form{grid-template-columns:1fr}.rating-head{display:block}.rating-head .add-pic-form{margin-top:12px}.two-equal{grid-template-columns:1fr}.video-tools{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.video-tools{grid-template-columns:1fr}.video-skip{min-height:46px}}

/* V2.5 United Tractors header branding */
.ut-topbar{height:104px;padding:12px 28px;gap:16px;align-items:center;display:flex}.ut-home-logo{flex:0 0 auto;width:74px;height:74px;padding:0;border:0;border-radius:10px;background:transparent;cursor:pointer;display:grid;place-items:center;transition:transform .18s ease,filter .18s ease}.ut-home-logo img{display:block;width:68px;height:68px;object-fit:contain}.ut-home-logo:hover{transform:translateY(-1px);filter:drop-shadow(0 4px 8px rgba(7,27,51,.18))}.ut-home-logo:focus-visible{outline:3px solid var(--ut-yellow);outline-offset:3px}.page-heading{min-width:0;flex:1}.ut-motto-wrap{margin-left:6px;flex:0 1 360px;max-width:360px;display:flex;align-items:center;justify-content:flex-end}.ut-motto-wrap img{display:block;width:100%;max-height:62px;object-fit:contain;object-position:right center}.ut-topbar .top-actions{flex:0 0 auto}.ut-topbar .top-actions button{white-space:nowrap}.topbar .page-heading .eyebrow{margin-top:0}
@media(max-width:1100px){.ut-motto-wrap{max-width:250px;flex-basis:250px}.ut-motto-wrap img{max-height:48px}.ut-home-logo{width:62px;height:62px}.ut-home-logo img{width:58px;height:58px}.ut-topbar{height:94px;padding:12px 22px}}
@media(max-width:800px){.ut-topbar{height:auto;min-height:78px;padding:10px 16px;gap:10px}.ut-home-logo{width:52px;height:52px}.ut-home-logo img{width:50px;height:50px}.ut-motto-wrap{display:none}.ut-topbar .top-actions{gap:6px}.ut-topbar .top-actions #clearAll{font-size:0;padding:10px}.ut-topbar .top-actions #clearAll:after{content:'Reset';font-size:12px}.page-heading h1{font-size:20px}.page-heading .eyebrow{font-size:9px}}
@media(max-width:520px){.ut-topbar{flex-wrap:wrap}.page-heading{order:2;flex-basis:calc(100% - 62px)}.ut-topbar .top-actions{order:3;width:100%;justify-content:flex-end}.ut-topbar .top-actions #clearAll{font-size:12px}.ut-topbar .top-actions #clearAll:after{display:none}}

/* V2.6 Observation manual mode: remove ONE logo, keep UT motto on the right */
.ut-topbar{height:96px;padding-left:34px}.ut-home-logo{display:none!important}.manual-time{margin-top:14px;padding:14px 16px;border:1px solid #e6d7a7;border-radius:12px;background:#fffdf6}.manual-time-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px}.manual-time-head b{color:var(--ut-navy);font-size:13px}.manual-time-head span{color:#7b8491;font-size:11px}.manual-time-grid{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;align-items:end}.manual-time-grid .btn{min-height:41px;white-space:nowrap}.manual-time-grid.manual-single{grid-template-columns:minmax(260px,1fr) auto;max-width:560px}.manual-note{display:block;margin-top:8px;color:#7b8491;font-size:11px}.card-lite{box-shadow:none}@media(max-width:760px){.manual-time-grid{grid-template-columns:1fr 1fr}.manual-time-grid.manual-single{grid-template-columns:1fr}.manual-time-grid .btn{grid-column:1/-1}.manual-time-head{display:block}.manual-time-head span{display:block;margin-top:4px}.ut-topbar{padding-left:18px}}@media(max-width:520px){.manual-time-grid{grid-template-columns:1fr}.manual-time-grid .btn{grid-column:auto}}
/* Dashboard charts V2.8 */
.chart-card{min-height:520px}.pareto-card{min-height:0}.pareto-table-block{margin-top:18px;padding-top:16px;border-top:1px solid #e3e8ef}.subtable-title{font-size:14px!important;margin:0 0 12px!important}.pie-chart-wrap{display:grid;grid-template-columns:minmax(220px,.9fr) minmax(250px,1.1fr);gap:20px;align-items:center;padding:8px 0 18px}.pie-chart{width:min(100%,280px);justify-self:center;filter:drop-shadow(0 10px 18px rgba(16,42,67,.12))}.pie-total-label{font:700 10px Inter,Arial,sans-serif;fill:#69778b;letter-spacing:1px}.pie-total-value{font:800 14px Inter,Arial,sans-serif;fill:#102a43}.chart-legend{display:grid;gap:10px}.chart-legend>div{display:grid;grid-template-columns:12px minmax(0,1fr) auto auto;gap:8px;align-items:center;font-size:12px;border-bottom:1px solid #edf0f4;padding-bottom:8px}.chart-legend span{min-width:0;overflow-wrap:anywhere}.chart-legend b{white-space:nowrap}.chart-legend small{white-space:nowrap}.chart-legend i{width:10px;height:10px;border-radius:3px}.chart-legend b{font-size:12px;color:#102a43}.chart-legend small{color:#7b8797;min-width:48px;text-align:right}.pareto-chart{height:360px;display:grid;grid-template-columns:42px 1fr;gap:8px;padding:18px 6px 0}.pareto-scale{display:flex;flex-direction:column;justify-content:space-between;color:#7b8797;font-size:10px;padding-bottom:42px}.pareto-bars{display:flex;gap:14px;align-items:flex-end;height:100%;padding:0 8px 0 4px;border-left:1px solid #d9e0e8;border-bottom:1px solid #d9e0e8;background:repeating-linear-gradient(to bottom,transparent 0,transparent calc(25% - 1px),#edf1f5 calc(25% - 1px),#edf1f5 25%)}.pareto-item{height:100%;min-width:0;flex:1;display:grid;grid-template-rows:1fr 42px;align-items:end}.pareto-bar-wrap{height:100%;position:relative;display:flex;align-items:flex-end;justify-content:center}.pareto-bar{width:min(46px,78%);min-height:6px;background:linear-gradient(180deg,#f7c600,#d69f00);border-radius:7px 7px 0 0;position:relative;transition:.2s}.pareto-bar b{position:absolute;bottom:calc(100% + 5px);left:50%;transform:translateX(-50%);font-size:10px;color:#102a43;white-space:nowrap}.pareto-dot{position:absolute;left:50%;width:100%;height:1px;background:#102a43;transform:translateX(-50%);display:block}.pareto-dot i{width:9px;height:9px;border-radius:50%;background:#102a43;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.pareto-dot em{position:absolute;right:50%;bottom:7px;font-size:9px;font-style:normal;color:#102a43;background:#fff;padding:1px 3px;white-space:nowrap}.pareto-item>small{font-size:10px;line-height:1.25;text-align:center;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;color:#5f6b7a}.chart-empty{height:320px;display:grid;place-items:center;text-align:center;color:#7b8797;padding:30px}.chart-note{font-size:11px;color:#748195;margin-top:12px}.compact-table{margin-top:2px}.backend-note{font-size:12px;color:#5f6b7a;padding:10px 12px;background:#fff9e8;border-left:4px solid var(--ut-yellow);border-radius:6px}@media(max-width:900px){.pie-chart-wrap{grid-template-columns:1fr}.chart-card{min-height:auto}.pie-chart{width:240px}.pareto-chart{height:300px}}


/* V2.8.2 Dynamic collapsible sidebar */
.app-shell{display:block}.main{width:100%;min-width:0}.sidebar{position:fixed;z-index:120;left:0;top:0;bottom:0;width:255px;height:100vh;transform:translateX(-105%);transition:transform .24s ease,box-shadow .24s ease;box-shadow:none;will-change:transform}.app-shell.sidebar-open .sidebar{transform:translateX(0);box-shadow:14px 0 36px rgba(0,0,0,.28)}.sidebar-backdrop{position:fixed;z-index:110;inset:0;background:rgba(7,18,32,.42);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .24s ease,visibility .24s ease}.app-shell.sidebar-open .sidebar-backdrop{opacity:1;visibility:visible;pointer-events:auto}.ut-topbar{position:relative}.sidebar-toggle{flex:0 0 auto;width:46px;height:42px;border:1px solid #d7dee8;border-radius:10px;background:#fff;display:grid;place-content:center;gap:5px;cursor:pointer;padding:0;box-shadow:0 2px 8px rgba(7,27,51,.05);transition:.18s}.sidebar-toggle:hover{border-color:var(--ut-yellow);background:#fffaf0}.sidebar-toggle:focus-visible{outline:3px solid rgba(245,180,0,.35);outline-offset:2px}.sidebar-toggle span{display:block;width:20px;height:2px;border-radius:99px;background:var(--ut-navy);transition:.18s}.app-shell.sidebar-open .sidebar-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}.app-shell.sidebar-open .sidebar-toggle span:nth-child(2){opacity:0}.app-shell.sidebar-open .sidebar-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}@media(max-width:760px){.sidebar{width:min(86vw,300px)}.ut-topbar{padding-left:16px}.sidebar-toggle{width:42px;height:40px}.page-heading{min-width:0}}

/* V2.8.3 UI consistency and observation precision cleanup */
:root{--ui-radius:12px;--ui-radius-sm:9px;--ui-control-h:44px;--ui-font:Inter,"Segoe UI",Arial,sans-serif}
html{font-size:16px}body,button,input,select,textarea{font-family:var(--ui-font)}button,input,select,textarea{font-size:13px}
input[type="date"],input[type="time"],input[type="datetime-local"],input[type="number"]{min-width:0}
@media(max-width:760px){input,select,textarea{font-size:16px}}
.topbar{min-height:96px}.page-heading h1{font-size:26px;line-height:1.15}.eyebrow{line-height:1.2}
.card{border-radius:var(--ui-radius)}.btn,.top-actions button,.sidebar-toggle,input,select{min-height:var(--ui-control-h)}
.btn{display:inline-flex;align-items:center;justify-content:center;line-height:1.15;text-align:center}
.btn.secondary,.btn.ghost,.btn.primary{font-size:13px}
.workspace{align-items:start}.video-card h3,.workspace>.card>h3{line-height:1.3}.dropzone{min-height:92px;display:grid;place-content:center;gap:5px}
.video-stage{align-items:center}.video-wrap{display:grid;place-items:center}.video-wrap video{align-self:stretch}.video-tools{align-items:stretch}.video-skip{width:100%;text-align:center;line-height:1.25}
.time-grid{align-items:stretch}.timebox{min-height:72px;display:flex;flex-direction:column;justify-content:center}.timebox b{line-height:1.25;word-break:break-word}
.seg-controls{align-items:stretch}.seg-controls .btn{min-width:0;flex:1}
.manual-time{border-radius:var(--ui-radius)}.manual-time-head{align-items:center}.manual-time-head span{line-height:1.45}.manual-time-grid label{min-width:0}
.form-grid label,label{line-height:1.25}.form-grid input,.form-grid select,textarea{min-height:var(--ui-control-h)}
.master-preview>div{min-height:68px;display:flex;flex-direction:column;justify-content:center;gap:5px}.master-preview b{line-height:1.35;overflow-wrap:anywhere}
.data-table th,.data-table td{vertical-align:middle}.data-table th{line-height:1.25}.kpi{min-height:126px;display:flex;flex-direction:column;justify-content:center}.kpi .value{line-height:1.1;word-break:break-word}
.rating-table th,.rating-table td{height:64px}.rating-table select{min-height:40px}.rating-table .rf-result{display:inline-flex;align-items:center;justify-content:center;min-width:76px}
.chart-card h3,.pareto-card h3{line-height:1.3}.chart-legend>div{min-height:42px}.pareto-table-block{overflow-x:auto}.pareto-table-block .data-table{min-width:720px}
.sidebar button,.import-btn{min-height:42px;display:flex;align-items:center}.brand{min-height:92px}.side-foot{line-height:1.45}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid rgba(245,180,0,.35);outline-offset:2px}
@media(max-width:1050px){.topbar{min-height:90px}.workspace{gap:16px}.content{padding:24px}.grid{gap:14px}.video-wrap{min-height:300px}}
@media(max-width:760px){.content{padding:18px 14px}.topbar{min-height:82px;padding:12px 14px}.page-heading h1{font-size:22px}.top-actions button{min-height:40px}.timebox{min-height:66px}.seg-controls{display:grid;grid-template-columns:1fr 1fr}.seg-controls .btn:last-child{grid-column:1/-1}.manual-time{padding:14px}.video-tip{line-height:1.55}.kpi{min-height:112px}}
@media(max-width:520px){.topbar{gap:8px}.page-heading h1{font-size:20px}.seg-controls{grid-template-columns:1fr}.seg-controls .btn:last-child{grid-column:auto}.time-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.timebox:last-child{grid-column:1/-1}.video-wrap{min-height:210px}.manual-time-head b{font-size:13px}.manual-time-head span,.manual-note{font-size:11px}}


/* V2.8.4: dynamic native video aspect ratio + cleaner helper copy */
.video-tip,.manual-note{display:none!important}
.video-stage{display:flex;flex-direction:column;align-items:center;gap:12px}
.video-wrap{--video-ratio:16 / 9;box-sizing:border-box;width:100%;max-width:100%;min-height:0!important;aspect-ratio:var(--video-ratio);height:auto;margin:0 auto;display:grid!important;place-items:center;background:#070b12}
.video-wrap video{display:block!important;width:100%!important;height:100%!important;max-width:100%;max-height:100%;object-fit:contain!important;object-position:center!important;align-self:auto!important}
.video-wrap.video-pending{aspect-ratio:16/9;min-height:390px!important;width:100%}
.video-wrap.video-landscape{width:100%;max-height:620px}
.video-wrap.video-portrait{width:min(100%,420px);max-height:680px}
.video-wrap.video-square{width:min(100%,560px);max-height:620px}
.video-tools{width:100%;grid-column:auto!important}
.rating-head{align-items:center!important;padding-bottom:8px;gap:20px}
.add-pic-form{align-self:center;margin-bottom:8px!important}
.rating-table-wrap{margin-top:14px}
@media(max-width:1050px){.video-wrap.video-pending{min-height:330px!important}.video-wrap.video-portrait{width:min(100%,390px)}}
@media(max-width:760px){.video-wrap.video-pending{min-height:230px!important}.video-wrap.video-portrait{width:min(100%,340px)}.video-wrap.video-square{width:100%}.rating-head{align-items:stretch!important}.add-pic-form{margin-bottom:4px!important}}
/* V2.8.5: persistent observation video + draggable seek + fullscreen */
.video-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.video-card-head h3{margin:0}.video-close{width:38px;height:38px;border:1px solid #d6deea;border-radius:10px;background:#fff;color:#8b1e1e;font-size:24px;line-height:1;display:grid;place-items:center;cursor:pointer;flex:0 0 auto}.video-close:hover{background:#fff2f2;border-color:#efb4b4}.video-close.hidden{display:none!important}.seek-panel{width:100%;padding:10px 12px 12px;border:1px solid #dbe4ef;border-radius:12px;background:#f8fafc}.seek-meta{display:flex;justify-content:space-between;gap:12px;font:700 12px/1.2 Inter,Segoe UI,Arial,sans-serif;color:#334155;margin-bottom:8px}.video-seek{width:100%;height:7px;padding:0;border:0;border-radius:999px;appearance:auto;cursor:pointer;accent-color:var(--ut-yellow,#f7c600);background:transparent}.seek-caption{margin-top:8px;text-align:center;font-size:11px;line-height:1.35;color:#718096}.video-tools{grid-template-columns:repeat(3,minmax(0,1fr))!important}.video-wrap:fullscreen{width:100vw!important;height:100vh!important;max-width:none!important;max-height:none!important;aspect-ratio:auto!important;border-radius:0;background:#000}.video-wrap:fullscreen video{width:100%;height:100%;object-fit:contain}.video-wrap:fullscreen .video-empty{display:none}.video-wrap:fullscreen{display:grid;place-items:center}@media(max-width:700px){.video-tools{grid-template-columns:1fr 1fr!important}.video-tools #fullVideo{grid-column:1/-1}.seek-caption{font-size:10px}.video-card-head{align-items:flex-start}.video-close{width:36px;height:36px}}

/* V2.8.6 Sidebar overflow + UT logo cleanup */
.sidebar{display:flex;flex-direction:column;padding:20px 14px 14px;overflow:hidden}
.brand{display:flex;align-items:center;justify-content:center;flex:0 0 auto;min-height:96px;padding:6px 8px 16px;margin-bottom:6px;text-decoration:none;color:inherit}
.brand-logo img{display:block;width:118px;max-height:72px;object-fit:contain;object-position:center;filter:drop-shadow(0 4px 10px rgba(0,0,0,.22))}
.sidebar nav{display:grid;grid-auto-rows:min-content;gap:4px;flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:4px 3px 16px;margin:0 -2px;scrollbar-width:thin;scrollbar-color:rgba(245,180,0,.72) rgba(255,255,255,.06)}
.sidebar nav::-webkit-scrollbar{width:8px}.sidebar nav::-webkit-scrollbar-track{background:rgba(255,255,255,.06);border-radius:99px}.sidebar nav::-webkit-scrollbar-thumb{background:rgba(245,180,0,.72);border-radius:99px}
.sidebar .nav-label{position:static;flex:none;margin-top:15px}.side-foot{display:none}
.top-actions{margin-left:auto}
@media(max-height:760px){.sidebar{padding-top:12px}.brand{min-height:76px;padding-bottom:10px}.brand-logo img{width:100px;max-height:58px}.sidebar button,.import-btn{min-height:39px;padding-top:9px;padding-bottom:9px}.nav-label{margin-top:10px!important}}
@media(max-height:620px){.brand{min-height:62px}.brand-logo img{width:84px;max-height:48px}.sidebar nav{padding-bottom:10px}.nav-label{margin:8px 10px 3px!important}}


/* V2.8.7: balanced dashboard and observation spacing */
:root{--section-gap:24px;--card-gap:20px;--card-pad:24px;--field-gap:16px}
.content{padding:32px 34px 40px}
.content>.workspace,.dashboard-content>#dashResults{display:grid;gap:var(--section-gap)}
.grid{gap:var(--card-gap)}
.section{margin-top:var(--section-gap)}
.card{padding:var(--card-pad)}
.dashboard-filter{padding:24px 24px 22px;margin-bottom:0}
.filter-title{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:20px}
.filter-title h3{margin:0 0 6px}.filter-title .muted{margin:0;line-height:1.55}
.dashboard-filter-controls{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px 20px;align-items:end}
.dashboard-filter-grid{gap:var(--field-gap);margin:0}
.dashboard-filter-actions{display:flex;align-items:flex-end;min-width:132px}
.dashboard-filter-actions .btn{width:100%;white-space:nowrap}
.dashboard-kpis{margin:0}.dashboard-kpis+.section{margin-top:0}
.chart-card{padding:24px;min-height:0}.chart-card h3{margin-bottom:18px}
.chart-note{margin:14px 0 18px;line-height:1.55}
.compact-table{margin-top:18px}.pareto-table-block{margin-top:22px;padding-top:20px;border-top:1px solid #e8edf3}
.subtable-title{margin:0 0 14px!important}
.workspace{gap:24px}.workspace>.card{min-width:0}
.classify-card{padding:24px}.classify-card>h3{margin-bottom:20px}
.classify-card .form-grid{gap:16px;margin-bottom:16px}
.classify-card>label{margin-top:16px!important;gap:7px}
.classify-card .master-preview{margin:18px 0;gap:12px}
.classify-card textarea{margin-bottom:0}
.observation-save-action{margin-top:22px;padding-top:18px;border-top:1px solid #e8edf3}
.observation-save-action .btn{min-height:48px}
.video-card{padding:24px}.video-card-head{margin-bottom:18px}.dropzone{margin-bottom:16px}.video-stage{gap:16px}.time-grid{margin:18px 0;gap:12px}.seg-controls{margin:0 0 18px;gap:12px}.manual-time{margin-top:0}
@media(max-width:1200px){.dashboard-filter-controls{grid-template-columns:1fr}.dashboard-filter-actions{justify-content:flex-start;min-width:0}.dashboard-filter-actions .btn{width:auto;min-width:160px}.content{padding:28px 26px 36px}}
@media(max-width:900px){:root{--section-gap:20px;--card-gap:16px;--card-pad:20px}.dashboard-filter-controls{gap:16px}.workspace{gap:20px}.filter-title{margin-bottom:16px}.dashboard-filter-grid{gap:14px}.dashboard-filter-actions .btn{width:100%}}
@media(max-width:760px){.content{padding:20px 16px 30px}.card,.dashboard-filter,.chart-card,.classify-card,.video-card{padding:18px}.filter-title{gap:14px}.dashboard-filter-grid{gap:12px}.dashboard-filter-actions .btn{min-height:46px}.observation-save-action{margin-top:18px;padding-top:16px}.workspace{gap:18px}.time-grid{gap:10px;margin:16px 0}.seg-controls{gap:10px;margin-bottom:16px}}

/* V2.8.8: Dashboard vertical rhythm refinement
   Keep the KPI row visually centered between the filter card above and the
   TIME CLASSIFICATION / PARETO row below. */
:root{--dashboard-vertical-gap:28px}
.dashboard-content{display:flex;flex-direction:column;gap:var(--dashboard-vertical-gap)}
.dashboard-content>#dashResults{display:grid;gap:var(--dashboard-vertical-gap);margin:0}
.dashboard-content .dashboard-filter{margin:0}
.dashboard-content .dashboard-kpis{margin:0}
.dashboard-content #dashResults>.section{margin:0}
.dashboard-content #dashResults>.card.section{margin:0}
.dashboard-content .chart-card{margin:0}

/* The KPI row gets the same 28px breathing room above and below.
   No extra margin is left on only one side, preventing the visual imbalance
   seen between the filter, KPI cards, and chart cards. */
.dashboard-content .dashboard-kpis+.section{margin:0}
.dashboard-content .grid.cols-2.section{margin:0}

@media(max-width:900px){
  :root{--dashboard-vertical-gap:22px}
}
@media(max-width:760px){
  :root{--dashboard-vertical-gap:18px}
}

/* V2.8.9: bottom reset control + UT motto footer */
.app-shell{min-height:100vh}.main{min-height:100vh;display:flex;flex-direction:column}.main>#app{flex:1 0 auto}.topbar{flex:0 0 auto}.ut-topbar .top-actions,.ut-topbar .ut-motto-wrap{display:none!important}
.ut-bottom-footer{margin-top:auto;flex:0 0 auto;background:#fff;border-top:1px solid #e5e9f0;padding:18px 34px 20px;display:flex;align-items:flex-end;gap:26px;min-height:96px}
.ut-footer-reset{display:flex;flex-direction:column;align-items:flex-start;gap:13px;flex:1 1 auto;min-width:0}
.ut-reset-local{appearance:none;border:0;background:transparent;color:#9a3412;font:800 12px/1 Inter,Segoe UI,Arial,sans-serif;letter-spacing:.02em;padding:0;cursor:pointer;white-space:nowrap;transition:color .18s ease,transform .18s ease}
.ut-reset-local:hover{color:#7c1d12;transform:translateY(-1px)}
.ut-reset-local:focus-visible{outline:3px solid rgba(245,180,0,.35);outline-offset:5px;border-radius:4px}
.ut-footer-line{width:100%;height:3px;background:var(--ut-yellow);border-radius:99px;opacity:.95}
.ut-footer-motto{display:flex;align-items:flex-end;gap:18px;flex:0 0 auto;min-width:min(34vw,470px);justify-content:flex-end}
.ut-divider-segments{display:flex;align-items:center;gap:5px;height:48px;padding-bottom:2px}
.ut-divider-segments i{display:block;width:1px;height:16px;background:#1d2939;border-radius:99px;opacity:.65}
.ut-divider-segments i:nth-child(2){height:22px;opacity:.8}.ut-divider-segments i:nth-child(3){height:28px;opacity:.95}
.ut-footer-motto img{display:block;width:min(30vw,360px);max-width:360px;min-width:220px;height:auto;max-height:58px;object-fit:contain;object-position:right bottom}
@media(max-width:1050px){.ut-bottom-footer{padding:16px 26px 18px;gap:20px}.ut-footer-motto{min-width:300px;gap:14px}.ut-footer-motto img{min-width:190px;width:min(34vw,300px);max-height:48px}.ut-divider-segments{height:42px}}
@media(max-width:760px){.ut-bottom-footer{padding:16px 16px 18px;gap:14px;align-items:flex-end;min-height:82px}.ut-footer-reset{gap:11px}.ut-footer-motto{min-width:0;gap:10px}.ut-footer-motto img{min-width:140px;width:42vw;max-height:38px}.ut-divider-segments{height:34px;gap:4px}.ut-divider-segments i{height:12px}.ut-divider-segments i:nth-child(2){height:16px}.ut-divider-segments i:nth-child(3){height:20px}}
@media(max-width:520px){.ut-bottom-footer{display:grid;grid-template-columns:1fr;gap:14px;align-items:stretch}.ut-footer-motto{justify-content:flex-end}.ut-footer-motto img{width:min(78vw,300px);max-height:46px}.ut-footer-line{height:2px}}


/* V2.9.0: clean continuous UT footer line */
.ut-bottom-footer{margin-top:auto;flex:0 0 auto;background:#fff;border-top:1px solid #e5e9f0;padding:18px 34px 20px;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 3px;column-gap:26px;row-gap:14px;align-items:end;min-height:96px}
.ut-footer-reset{display:flex;align-items:flex-end;min-width:0}
.ut-reset-local{appearance:none;border:0;background:transparent;color:#9a3412;font:800 12px/1 Inter,Segoe UI,Arial,sans-serif;letter-spacing:.02em;padding:0;cursor:pointer;white-space:nowrap;transition:color .18s ease,transform .18s ease}
.ut-footer-reset .ut-footer-line{display:none!important}
.ut-footer-motto{display:flex;align-items:flex-end;justify-content:flex-end;min-width:0}
.ut-footer-motto .ut-divider-segments{display:none!important}
.ut-footer-motto img{display:block;width:min(30vw,360px);max-width:360px;min-width:220px;height:auto;max-height:58px;object-fit:contain;object-position:right bottom}
.ut-footer-line{grid-column:1/-1;grid-row:2;width:100%;height:3px;background:var(--ut-yellow);border:0;border-radius:0;opacity:1;margin:0}
@media(max-width:1050px){.ut-bottom-footer{padding:16px 26px 18px;column-gap:20px;row-gap:12px}.ut-footer-motto img{min-width:190px;width:min(34vw,300px);max-height:48px}.ut-footer-line{height:3px}}
@media(max-width:760px){.ut-bottom-footer{padding:16px 16px 18px;column-gap:14px;row-gap:12px;min-height:82px}.ut-footer-motto img{min-width:140px;width:42vw;max-height:38px}.ut-footer-line{height:3px}}
@media(max-width:520px){.ut-bottom-footer{grid-template-columns:1fr;grid-template-rows:auto auto 2px;gap:12px}.ut-footer-motto{grid-column:1;justify-content:flex-end}.ut-footer-motto img{width:min(78vw,300px);max-height:46px}.ut-footer-line{grid-column:1;grid-row:3;height:2px}}

/* V2.9.1 footer alignment: reset tetap di pojok kiri, motto tetap di pojok kanan */
.ut-bottom-footer{
  margin-top:auto;
  width:100%;
  padding:20px 34px 14px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-rows:auto 3px;
  column-gap:48px;
  row-gap:14px;
  align-items:end;
}
.ut-footer-reset{
  grid-column:1;
  grid-row:1;
  width:auto;
  justify-self:start;
  align-self:end;
  display:flex;
  align-items:flex-end;
}
.ut-footer-motto{
  grid-column:2;
  grid-row:1;
  width:auto;
  min-width:0;
  justify-self:end;
  align-self:end;
  display:flex;
  justify-content:flex-end;
  align-items:flex-end;
}
.ut-footer-motto img{
  display:block;
  width:min(28vw,360px);
  min-width:220px;
  max-width:360px;
  height:auto;
  max-height:58px;
  object-fit:contain;
  object-position:right bottom;
}
.ut-footer-line{
  grid-column:1 / -1;
  grid-row:2;
  align-self:end;
  justify-self:stretch;
  width:100%;
  height:3px;
  margin:0;
  background:var(--ut-yellow);
  border:0;
  border-radius:0;
}
@media(max-width:1050px){
  .ut-bottom-footer{padding:18px 26px 14px;column-gap:32px;row-gap:13px}
  .ut-footer-motto img{width:min(30vw,300px);min-width:190px;max-height:50px}
}
@media(max-width:760px){
  .ut-bottom-footer{padding:16px 18px 12px;column-gap:24px;row-gap:12px}
  .ut-footer-motto img{width:min(36vw,240px);min-width:150px;max-height:42px}
}
@media(max-width:560px){
  .ut-bottom-footer{grid-template-columns:1fr;grid-template-rows:auto auto 2px;gap:12px;padding:16px 16px 10px}
  .ut-footer-reset{grid-column:1;grid-row:1;justify-self:start}
  .ut-footer-motto{grid-column:1;grid-row:2;justify-self:end}
  .ut-footer-line{grid-column:1;grid-row:3;height:2px}
  .ut-footer-motto img{width:min(72vw,280px);min-width:0;max-height:46px}
}


/* V2.9.2: Logo United Tractors kedua di header kanan, tidak mengganti logo sidebar */
.ut-topbar{position:relative}
.ut-header-logo-2{margin-left:auto;flex:0 0 auto;display:flex;align-items:center;justify-content:flex-end;width:min(34vw,420px);padding:0 0 0 18px}
.ut-header-logo-2 img{display:block;width:100%;max-width:380px;height:auto;max-height:62px;object-fit:contain;object-position:right center}
@media(max-width:1100px){.ut-header-logo-2{width:min(33vw,320px);padding-left:14px}.ut-header-logo-2 img{max-height:52px}}
@media(max-width:800px){.ut-header-logo-2{width:min(38vw,230px);padding-left:10px}.ut-header-logo-2 img{max-height:42px}}
@media(max-width:560px){
  .ut-header-logo-2{display:flex;width:112px;max-width:32vw;padding-left:6px;margin-left:auto;flex:0 0 auto}
  .ut-header-logo-2 img{width:100%;max-width:112px;max-height:34px;object-fit:contain;object-position:right center}
}


/* =========================================================
   V2.9.3 MOBILE & RESPONSIVE SUPPORT
   Desktop layout is preserved; phone/tablet layouts reflow.
   ========================================================= */
html{width:100%;overflow-x:hidden}
body{width:100%;min-width:0;overflow-x:hidden;-webkit-text-size-adjust:100%}
img,svg,video,canvas{max-width:100%}
button,input,select,textarea{font:inherit}
button,.btn,.sidebar button,.import-btn{touch-action:manipulation}

/* Tablet: keep breathing room while preventing narrow-card overflow */
@media(max-width:900px){
  .content{padding:22px 20px}
  .card{padding:18px}
  .topbar,.ut-topbar{padding-left:20px;padding-right:20px}
  .dashboard-filter-controls{align-items:stretch}
  .dashboard-filter-actions{min-width:170px}
  .dashboard-filter-actions .btn{width:100%}
  .workspace{gap:16px}
  .video-card,.classify-card{min-width:0}
  .data-table{min-width:max-content}
  .table-wrap{-webkit-overflow-scrolling:touch}
}

/* Phone: single-column application flow */
@media(max-width:760px){
  :root{--dashboard-vertical-gap:16px}
  .content{padding:16px 14px 22px}
  .card{padding:16px;border-radius:12px}
  .section{margin-top:16px}
  .grid{gap:14px}
  .grid.cols-4,.grid.cols-3,.grid.cols-2{grid-template-columns:1fr}
  .form-grid,.form-grid.four{grid-template-columns:1fr;gap:12px}
  .workspace{grid-template-columns:1fr;gap:14px}
  .dashboard-filter-grid{grid-template-columns:1fr!important}
  .dashboard-filter-controls{display:grid!important;grid-template-columns:1fr!important;gap:12px!important}
  .dashboard-filter-actions{width:100%;min-width:0}
  .dashboard-filter-actions .btn{width:100%;min-height:46px}

  .ut-topbar{min-height:76px;height:auto;padding:10px 14px;gap:10px;display:flex;flex-wrap:nowrap}
  .sidebar-toggle{width:42px;height:42px;min-height:42px}
  .page-heading{flex:1 1 0;min-width:0;overflow:hidden}
  .page-heading .eyebrow{font-size:8px;letter-spacing:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .page-heading h1{font-size:20px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ut-header-logo-2{display:flex!important;width:150px;min-width:96px;max-width:34vw;padding-left:0}
  .ut-header-logo-2 img{width:100%;max-height:38px;object-fit:contain;object-position:right center}

  .sidebar{width:min(84vw,320px);padding:18px 12px;padding-bottom:max(18px,env(safe-area-inset-bottom));overflow-y:auto}
  .brand{padding-bottom:16px}
  .sidebar button,.import-btn{min-height:44px;font-size:14px}
  .side-foot{position:static;margin:16px 10px 4px}

  .kpi .value{font-size:25px;line-height:1.1;word-break:break-word}
  .kpi .sub{line-height:1.45}
  .chart-card{min-width:0;overflow:hidden}
  .pie-chart-wrap{grid-template-columns:1fr!important;justify-items:center}
  .chart-legend{width:100%}
  .chart-legend div{grid-template-columns:12px minmax(0,1fr) auto auto!important}
  .chart-legend span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  .pareto-chart{min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .pareto-bars{min-width:440px}
  .pareto-scale{min-width:44px}
  .pareto-card .chart-note{font-size:11px;line-height:1.5}
  .subtable-title{font-size:13px}

  .data-table{font-size:12px;min-width:680px}
  .compact-table .data-table{min-width:520px}
  .data-table th,.data-table td{padding:9px 10px}
  .table-wrap{width:100%;overflow-x:auto;overscroll-behavior-x:contain;border-radius:8px}

  .video-card-head{gap:10px;align-items:flex-start}
  .video-card-head h3{font-size:15px;line-height:1.35}
  .dropzone{padding:16px 12px}
  .video-stage{display:flex;flex-direction:column;gap:10px}
  .video-wrap{width:100%;min-height:0;aspect-ratio:var(--video-ratio,16 / 9);max-height:none}
  .video-wrap video{width:100%;height:100%;object-fit:contain}
  .seek-panel{width:100%}
  .video-tools{display:grid!important;grid-template-columns:1fr 1fr;gap:8px}
  .video-skip{width:100%;min-height:52px;padding:8px;font-size:11px}
  #fullVideo{grid-column:1/-1}
  .time-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .time-grid .timebox:last-child{grid-column:1/-1}
  .timebox{min-width:0;padding:10px}
  .timebox b{font-size:14px;overflow:hidden;text-overflow:ellipsis}
  .seg-controls{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .seg-controls .btn:last-child{grid-column:1/-1}
  .seg-controls .btn,.observation-save-action .btn{min-height:46px}
  .manual-time{padding:13px}
  .master-preview{grid-template-columns:1fr 1fr;gap:8px}
  .master-preview div{min-width:0}
  .master-preview b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  .section-head{display:block}
  .section-head .toolbar{margin-top:12px;width:100%}
  .toolbar{gap:8px}
  .toolbar .btn{flex:1 1 auto;min-height:44px}
  .filters{display:grid;grid-template-columns:1fr;gap:10px}
  .filters select,.filters input{max-width:none;width:100%}
  .modal-backdrop{padding:12px}
  .modal{max-height:calc(100dvh - 24px);padding:16px;border-radius:14px}
  .modal-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .modal-actions .btn{width:100%;min-height:44px}

  .ut-bottom-footer{padding:16px 14px calc(10px + env(safe-area-inset-bottom));grid-template-columns:minmax(0,1fr) auto;column-gap:16px;row-gap:12px}
  .ut-footer-reset{min-width:0}
  .ut-reset-local{font-size:12px;min-height:44px}
  .ut-footer-motto img{width:40vw;min-width:118px;max-width:230px;max-height:42px}
}

/* Small phones */
@media(max-width:480px){
  .content{padding:14px 10px 20px}
  .card{padding:14px;border-radius:11px}
  .ut-topbar{padding:9px 10px;gap:8px}
  .sidebar-toggle{width:40px;height:40px;min-height:40px}
  .page-heading h1{font-size:18px}
  .page-heading .eyebrow{font-size:7.5px}
  .ut-header-logo-2{display:flex!important;width:112px;min-width:82px;max-width:31vw}
  .ut-header-logo-2 img{max-height:30px}

  .kpi .label{font-size:10px}
  .kpi .value{font-size:23px}
  .dashboard-content{gap:14px}
  .dashboard-content>#dashResults{gap:14px}
  .dashboard-filter .muted{font-size:12px;line-height:1.45}

  .video-tools{grid-template-columns:1fr!important}
  #fullVideo{grid-column:auto}
  .time-grid{grid-template-columns:1fr 1fr}
  .seg-controls{grid-template-columns:1fr}
  .seg-controls .btn:last-child{grid-column:auto}
  .master-preview{grid-template-columns:1fr}
  .chart-label{width:100px;flex:0 0 100px}
  .chart-row{gap:7px}
  .chart-row .bar{min-width:70px}
  .pareto-bars{min-width:400px}

  .ut-bottom-footer{grid-template-columns:1fr;grid-template-rows:auto auto 2px;gap:8px;padding:12px 12px calc(8px + env(safe-area-inset-bottom))}
  .ut-footer-reset{grid-column:1;grid-row:1}
  .ut-footer-motto{grid-column:1;grid-row:2;justify-self:end}
  .ut-footer-motto img{width:min(70vw,270px);max-height:38px}
  .ut-footer-line{grid-column:1;grid-row:3;height:2px}
}

/* Extra narrow phones and landscape phones */
@media(max-width:380px){
  .ut-header-logo-2{display:none!important}
  .page-heading h1{font-size:17px}
  .kpi .value{font-size:21px}
}
@media(max-height:560px) and (orientation:landscape){
  .sidebar{width:min(52vw,320px)}
  .ut-topbar{min-height:64px;padding-top:7px;padding-bottom:7px}
  .ut-header-logo-2 img{max-height:32px}
  .content{padding-top:12px}
}

/* Better mobile scroll behavior */
@supports(padding:max(0px)){
  .ut-topbar{padding-top:max(10px,env(safe-area-inset-top))}
}

/* MOBILE HEADER FIX: keep UT logo 2 on the right */
@media(max-width:520px){
  .ut-topbar{height:78px;min-height:78px;padding:10px 12px;gap:8px;flex-wrap:nowrap;align-items:center}
  .page-heading{order:initial;flex:1 1 auto;flex-basis:auto;min-width:0}
  .page-heading h1{font-size:19px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .page-heading .eyebrow{font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ut-topbar .top-actions{order:initial;width:auto}
  .ut-header-logo-2{display:flex;order:3;width:105px;max-width:29vw;padding-left:4px;margin-left:0;flex:0 0 105px}
  .ut-header-logo-2 img{max-width:105px;max-height:32px}
}

/* V2.9.4 — mobile viewport and header hardening */
html, body { width:100%; max-width:100%; min-width:0; overflow-x:hidden; }
.app-shell, .main, #app, .content, .dashboard-content, .card, .workspace, .dashboard-filter, .chart-card, .video-card { min-width:0; max-width:100%; }
img, video, svg, canvas { max-width:100%; }

@media (max-width: 760px) {
  .ut-topbar {
    display:grid !important;
    grid-template-columns:40px minmax(0,1fr) minmax(82px, 105px) !important;
    width:100% !important;
    min-width:0 !important;
    height:78px !important;
    min-height:78px !important;
    padding:10px 12px !important;
    gap:8px !important;
    align-items:center !important;
    overflow:hidden !important;
  }
  .ut-topbar .sidebar-toggle { grid-column:1; width:40px; min-width:40px; }
  .ut-topbar .page-heading {
    grid-column:2;
    min-width:0 !important;
    width:100% !important;
    order:initial !important;
    overflow:hidden !important;
  }
  .ut-topbar .ut-header-logo-2 {
    grid-column:3;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    padding:0 !important;
    margin:0 !important;
    display:flex !important;
    order:initial !important;
    justify-content:flex-end !important;
    align-items:center !important;
    overflow:hidden !important;
  }
  .ut-topbar .ut-header-logo-2 img {
    display:block !important;
    width:100% !important;
    max-width:105px !important;
    max-height:32px !important;
    height:auto !important;
    object-fit:contain !important;
    object-position:right center !important;
  }
  .topbar h1, .page-heading h1 { max-width:100%; }
}

@media (max-width: 480px) {
  .ut-topbar {
    grid-template-columns:38px minmax(0,1fr) minmax(82px, 96px) !important;
    height:74px !important;
    min-height:74px !important;
    padding:8px 10px !important;
    gap:7px !important;
  }
  .ut-topbar .sidebar-toggle { width:38px; min-width:38px; height:40px; }
  .ut-topbar .ut-header-logo-2 img { max-width:96px !important; max-height:30px !important; }
}

@media (max-width: 380px) {
  /* Never hide the right-side UT logo on small phones. */
  .ut-topbar .ut-header-logo-2 { display:flex !important; }
  .ut-topbar { grid-template-columns:36px minmax(0,1fr) minmax(76px,88px) !important; padding-left:8px !important; padding-right:8px !important; }
  .ut-topbar .sidebar-toggle { width:36px; min-width:36px; }
  .ut-topbar .ut-header-logo-2 img { max-width:88px !important; max-height:28px !important; }
}

/* ==========================================================================
   LOGIN SCREEN — full-bleed building photo, gradient only at the bottom
   ========================================================================== */
.login-screen{position:fixed;inset:0;z-index:1000;overflow-y:auto}
.login-bg{position:fixed;inset:0;z-index:0;background:#0b2340}
.login-bg img{width:100%;height:100%;object-fit:cover;display:block}
.login-bg-gradient{position:fixed;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(7,27,51,0) 0%,rgba(7,27,51,0) 52%,rgba(7,27,51,.35) 75%,rgba(7,27,51,.72) 100%)}
.login-panel{position:relative;z-index:2;min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:32px 18px}
.login-card{width:100%;max-width:400px;background:rgba(13,22,36,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.16);border-radius:18px;padding:30px 28px 26px;box-shadow:0 20px 50px rgba(0,0,0,.45);text-align:center}
.login-badge{width:82px;height:82px;object-fit:contain;margin-bottom:16px;border-radius:50%;background:transparent;padding:0;display:block;margin-left:auto;margin-right:auto}
.login-card h1{color:#fff;font-size:19px;margin:0 0 20px;letter-spacing:.4px;font-weight:800}
.login-card form{display:grid;gap:14px;text-align:left}
.login-card label{color:#dbe5f5;font-size:12px;font-weight:700;display:grid;gap:6px}
.login-card input{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);color:#fff;border-radius:8px;padding:11px 12px}
.login-card input::placeholder{color:#a9b8cc}
.login-card input:focus{outline:2px solid rgba(245,180,0,.35);border-color:var(--ut-yellow)}
.login-card .btn.primary{margin-top:2px;min-height:44px}
.login-error{color:#ff9c94;font-size:12px;margin:14px 0 0;background:rgba(230,73,73,.16);border:1px solid rgba(230,73,73,.4);border-radius:8px;padding:9px 10px;line-height:1.4}
.login-mode{color:#c7d2e2;font-size:11px;margin:18px 0 0}
@media(max-width:520px){
  .login-panel{padding:20px 14px}
  .login-card{padding:24px 20px 22px;border-radius:14px}
}
@media(max-height:700px){
  .login-badge{width:64px;height:64px;margin-bottom:12px}
  .login-card h1{margin-bottom:14px;font-size:17px}
  .login-card form{gap:11px}
}
@media(max-width:360px){
  .login-card{max-width:100%}
}


/* V3.0.19 — Set Start / Set End visible buttons (desktop, tablet, mobile) */
.plain-segment-btn{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  min-height:42px!important;
  padding:10px 16px!important;
  border-radius:10px!important;
  font-weight:700!important;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease;
}
#resetSeg{
  min-height:42px!important;
  padding:10px 16px!important;
}
#setStart{
  background:var(--ut-yellow)!important;
  color:var(--ut-navy)!important;
  border:1px solid var(--ut-yellow)!important;
  box-shadow:0 3px 10px rgba(0,0,0,.12)!important;
}
#setEnd{
  background:var(--ut-navy)!important;
  color:#fff!important;
  border:1px solid var(--ut-navy)!important;
  box-shadow:0 3px 10px rgba(0,0,0,.12)!important;
}
#setStart:hover,#setEnd:hover{
  transform:translateY(-1px);
}
#setStart:focus-visible,#setEnd:focus-visible{
  outline:3px solid rgba(255,197,0,.35)!important;
  outline-offset:2px;
}
.start-play-icon{
  display:inline-block!important;
  width:0!important;
  height:0!important;
  border-top:7px solid transparent!important;
  border-bottom:7px solid transparent!important;
  border-left:12px solid currentColor!important;
  background:transparent!important;
  box-shadow:none!important;
  flex:0 0 auto!important;
}
.end-stop-icon{
  display:inline-block!important;
  width:13px!important;
  height:13px!important;
  border-radius:2px!important;
  background:currentColor!important;
  box-shadow:none!important;
  flex:0 0 auto!important;
}
@media(max-width:760px){
  .seg-controls{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }
  #setStart,#setEnd,#resetSeg{
    width:100%!important;
    min-width:0!important;
  }
  #resetSeg{grid-column:1/-1;}
}

/* V3.0.29 — Prevent login-screen flash while Supabase session is restoring */
body.auth-booting #loginScreen{visibility:hidden!important;}
body.auth-booting #appShell{visibility:hidden!important;}
body.auth-booting::before{content:"Memeriksa sesi...";position:fixed;inset:0;z-index:2000;display:grid;place-items:center;background:#f7f9fc;color:#102a43;font:700 14px/1.2 Inter,Segoe UI,Arial,sans-serif;letter-spacing:.2px;}

/* V3.0.9 — Login: Masuk / Buat Akun */
.login-switch{display:flex;justify-content:center;gap:8px;margin-top:14px;border:1px solid rgba(255,255,255,.14);padding:4px;border-radius:12px;background:rgba(0,0,0,.14)}
.login-link{flex:1;border:0;background:transparent;color:#dbe6f4;padding:9px 12px;border-radius:9px;font:inherit;font-weight:700;cursor:pointer}
.login-link:hover{background:rgba(255,255,255,.08)}
.login-link.active{background:#f9b400;color:#0a2138}
#signupForm label{display:grid;gap:6px;margin:0}
#signupForm input{margin:0}
#signupForm{display:grid;gap:14px;text-align:left}
@media (max-width:600px){.login-card{width:min(92vw,420px);padding:24px 18px}.login-switch{margin-top:12px}}

/* V3.0.16 — HARD FIX: auth tab visibility on desktop/tablet/mobile
   The login form has display:grid, which previously overrode .hidden.
   Keep every hidden element truly hidden until its tab is selected. */
.login-screen .hidden,
.login-card .hidden,
.login-card form.hidden,
.login-card [hidden]{
  display:none !important;
}

/* V3.0.20 — Classify Segment alignment */
.classify-top-grid{grid-template-columns:repeat(4,minmax(0,1fr));align-items:end}
.classify-master-grid{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:12px}
.classify-top-grid label,.classify-master-grid label{margin-top:0!important}
@media(max-width:900px){.classify-top-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.classify-master-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.classify-top-grid,.classify-master-grid{grid-template-columns:1fr}.classify-master-grid{margin-top:10px}}

/* V3.0.23 — Observation Classify mobile overflow fix */
.classify-card,
.classify-card .form-grid,
.classify-card label,
.classify-card input,
.classify-card select{min-width:0;max-width:100%;}
.classify-card input[type="date"]{width:100%;max-width:100%;}
@media(max-width:760px){
  .classify-card{width:100%;overflow:hidden;}
  .classify-top-grid,
  .classify-master-grid{grid-template-columns:minmax(0,1fr)!important;width:100%;}
  .classify-top-grid label,
  .classify-master-grid label{width:100%;min-width:0;}
  .classify-top-grid input,
  .classify-top-grid select,
  .classify-master-grid input,
  .classify-master-grid select{width:100%;min-width:0;max-width:100%;}
}

/* V3.0.24 — Final mobile observation field + footer alignment */
/* Keep Date exactly inside the same field column geometry as PIC and Size. */
.classify-top-grid > label,
.classify-master-grid > label{min-width:0;max-width:100%;}
.classify-top-grid input,
.classify-top-grid select,
.classify-master-grid input,
.classify-master-grid select{display:block;width:100%;min-width:0;max-width:100%;}
.classify-top-grid input[type="date"]{
  inline-size:100%;
  min-inline-size:0;
  max-inline-size:100%;
  appearance:none;
  -webkit-appearance:none;
}
@media(max-width:560px){
  .classify-card{overflow:visible;}
  .classify-top-grid,.classify-master-grid{width:100%;min-width:0;max-width:100%;}
  .classify-top-grid > label,.classify-master-grid > label{width:100%;min-width:0;max-width:100%;}
  .classify-top-grid input[type="date"]{height:var(--ui-control-h,42px);box-sizing:border-box;}
}

/* On mobile, keep Exit and motto on the same footer row and align both to the bottom. */
@media(max-width:560px){
  .ut-bottom-footer{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-rows:auto 2px;
    align-items:end;
    column-gap:12px;
    row-gap:10px;
    padding:18px 14px calc(10px + env(safe-area-inset-bottom));
  }
  .ut-footer-reset{grid-column:1;grid-row:1;align-self:end;justify-self:start;display:flex;align-items:flex-end;}
  .ut-footer-motto{grid-column:2;grid-row:1;align-self:end;justify-self:end;display:flex;align-items:flex-end;justify-content:flex-end;min-width:0;}
  .ut-footer-motto img{display:block;width:min(46vw,230px);min-width:0;max-width:100%;height:auto;max-height:42px;object-fit:contain;object-position:right bottom;}
  .ut-footer-line{grid-column:1/-1;grid-row:2;width:100%;height:2px;align-self:end;}
}
@media(max-width:380px){
  .ut-bottom-footer{column-gap:8px;padding-left:10px;padding-right:10px;}
  .ut-footer-motto img{width:min(45vw,180px);max-height:34px;}
  .ut-footer-reset .btn{padding-left:9px;padding-right:9px;}
}

/* V3.0.26: Classify Segment layout — 3 fields on row 1, then one full-width field per row */
.classify-top-grid{grid-template-columns:repeat(3,minmax(0,1fr));align-items:end}
.classify-process-grid,.classify-activity-grid,.classify-element-grid{grid-template-columns:minmax(0,1fr);margin-top:12px}
.classify-process-grid label,.classify-activity-grid label,.classify-element-grid label{width:100%;min-width:0}
.classify-process-grid select,.classify-activity-grid select,.classify-element-grid select{width:100%;min-width:0;max-width:100%}
@media(max-width:900px){.classify-top-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){.classify-top-grid{grid-template-columns:1fr}.classify-process-grid,.classify-activity-grid,.classify-element-grid{grid-template-columns:1fr;margin-top:10px}}


/* V3.0.27: dynamic Time Classification legend — safe at every card width */
.pie-chart-wrap{
  grid-template-columns:minmax(160px,.82fr) minmax(0,1.18fr);
  width:100%;
  min-width:0;
}
.chart-legend{width:100%;min-width:0}
.chart-legend>div.chart-legend-item,
.chart-legend .chart-legend-item{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) max-content!important;
  gap:12px;
  align-items:center;
  width:100%;
  min-width:0;
  box-sizing:border-box;
}
.chart-legend-label{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.chart-legend-label i{
  flex:0 0 10px;
  width:10px;
  height:10px;
  border-radius:3px;
}
.chart-legend-label span{
  min-width:0;
  overflow-wrap:anywhere;
  white-space:normal;
  line-height:1.35;
}
.chart-legend-metrics{
  display:grid;
  grid-template-columns:max-content max-content;
  gap:12px;
  align-items:center;
  justify-content:end;
  min-width:0;
  white-space:nowrap;
}
.chart-legend-metrics b,
.chart-legend-metrics small{
  white-space:nowrap;
  text-align:right;
}
@media(max-width:1100px){
  .pie-chart-wrap{grid-template-columns:minmax(140px,.75fr) minmax(0,1.25fr);gap:14px}
  .pie-chart{width:min(100%,240px)}
  .chart-legend-metrics{gap:8px}
}
@media(max-width:900px){
  .pie-chart-wrap{grid-template-columns:1fr!important;justify-items:center}
  .chart-legend{max-width:520px}
}
@media(max-width:520px){
  .chart-legend-item{grid-template-columns:minmax(0,1fr) max-content!important}
  .chart-legend-label span{font-size:12px}
  .chart-legend-metrics{grid-template-columns:1fr;gap:2px;justify-items:end}
}
@media(max-width:360px){
  .chart-legend>div.chart-legend-item,
  .chart-legend .chart-legend-item{grid-template-columns:1fr!important;gap:6px}
  .chart-legend-metrics{grid-template-columns:max-content max-content;justify-content:start;justify-items:start;gap:12px}
}

/* User Management status dropdown */
.user-management-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.user-management-table{width:100%;min-width:860px;table-layout:fixed}
.user-management-table .user-col-name{width:150px}
.user-management-table .user-col-email{width:255px}
.user-management-table .user-col-role{width:150px}
.user-management-table .user-col-status{width:175px}
.user-management-table .user-col-created{width:120px}
.user-management-table .user-col-action{width:110px}
.user-management-table th,.user-management-table td{vertical-align:middle}
.user-email-cell{overflow-wrap:anywhere;word-break:break-word}
.user-created-cell{white-space:nowrap}
.user-status-select{display:block;width:100%;max-width:160px;min-width:0;padding:9px 34px 9px 12px;border-radius:10px;font:inherit;font-size:14px;font-weight:700;line-height:1.2;background-repeat:no-repeat;background-position:right 10px center;cursor:pointer}
.user-status-approved{background:#dff5e7;color:#1f7a46;border:1px solid #b8e5c8}
.user-status-pending{background:#fff4c9;color:#8a6800;border:1px solid #f1df95}
.user-status-suspended{background:#fde3df;color:#b6453b;border:1px solid #f2bbb4}
@media(max-width:760px){
  .user-management-table{min-width:780px}
  .user-management-table .user-col-name{width:130px}
  .user-management-table .user-col-email{width:220px}
  .user-management-table .user-col-role{width:135px}
  .user-management-table .user-col-status{width:160px}
  .user-management-table .user-col-created{width:110px}
  .user-management-table .user-col-action{width:100px}
  .user-status-select{max-width:150px;font-size:13px;padding:8px 30px 8px 10px}
}
@media(max-width:520px){
  .user-management-table{min-width:740px}
  .user-management-table .user-col-name{width:120px}
  .user-management-table .user-col-email{width:205px}
  .user-management-table .user-col-role{width:125px}
  .user-management-table .user-col-status{width:150px}
  .user-management-table .user-col-created{width:105px}
  .user-management-table .user-col-action{width:95px}
  .user-status-select{max-width:140px;font-size:12px}
}


/* TSKK / SWCT module — responsive Standard Work Combination Table */
.tskk-content{display:grid;gap:18px}
.tskk-observation-list .table-wrap,.tskk-list-wrap .table-wrap{width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;touch-action:pan-x pan-y}
.tskk-header-card,.tskk-editor-card{overflow:hidden}
.tskk-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tskk-meta-grid{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:16px;gap:14px}
.tskk-meta-grid .full{grid-column:1/-1}
.tskk-meta-grid label{min-width:0}
.tskk-meta-grid input,.tskk-meta-grid select,.tskk-meta-grid textarea{width:100%;min-width:0;max-width:100%;box-sizing:border-box}.tskk-meta-grid input[type="date"]{min-width:0;max-width:100%;width:100%;display:block}
.tskk-meta-helper{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px;padding:13px 15px;border:1px solid #e1e7ed;border-radius:12px;background:#f8fafc;color:#5f7185;font-size:13px;line-height:1.5}
.tskk-meta-helper span{flex:1 1 320px;min-width:0}
.tskk-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin:18px 0}
.tskk-kpis .kpi{min-width:0}
.tskk-table-card,.tskk-chart-card{border:1px solid #e0e6ec;border-radius:12px;padding:16px;margin-top:14px;background:#fff}
.tskk-work-table{min-width:1000px}
.tskk-work-table th,.tskk-work-table td{padding:11px 12px;vertical-align:middle}
.tskk-work-table input,.tskk-work-table select{width:100%;min-width:0;box-sizing:border-box}
.tskk-item-element{min-width:230px}
.tskk-item-type{min-width:170px}
.tskk-item-time,.tskk-item-start{min-width:105px}
.tskk-item-note{min-width:170px}
.tskk-end-cell{font-weight:700;white-space:nowrap}

/* Actual-cycle TSKK chart: one row per Work Element, Type sits next to the label. */
.tskk-chart-scroll{width:100%;max-width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;touch-action:pan-x pan-y;scrollbar-width:thin}.tskk-combination-chart{position:relative;border:1px solid #e1e6eb;border-radius:12px;background:#fff;overflow:hidden;width:max-content;min-width:1020px;max-width:none}
.tskk-combo-header,.tskk-combo-row{display:grid;grid-template-columns:40px minmax(170px,1fr) 140px minmax(630px,1fr)}
.tskk-combo-heading,.tskk-combo-no-head{min-height:48px;display:flex;align-items:center;padding:0 12px;background:#f7f9fc;border-bottom:1px solid #e2e8ee;font-weight:800;color:#29445c;font-size:13px}
.tskk-combo-no-head{justify-content:center;color:#738396}
.tskk-combo-axis{position:relative;height:48px;border-bottom:1px solid #e2e8ee;background:repeating-linear-gradient(to right,#fff 0,#fff calc(1% - 1px),#e9eef3 1%);color:#738396;font-size:10.5px}
.tskk-combo-axis{padding-right:42px;box-sizing:border-box}
.tskk-combo-axis span{position:absolute;bottom:17px;transform:translateX(-50%);white-space:nowrap}
.tskk-combo-axis span.axis-start{left:0!important;transform:none!important}
.tskk-combo-axis span.axis-end{left:auto!important;right:42px!important;transform:none!important}
.tskk-combo-axis em{position:absolute;right:10px;bottom:17px;font-style:normal;font-weight:700}
.tskk-combo-row{min-height:50px}
.tskk-combo-no,.tskk-combo-name,.tskk-combo-type{display:flex;align-items:center;padding:8px 12px;background:#fbfcfd;border-bottom:1px solid #edf1f4}
.tskk-combo-no{justify-content:center;font-size:11px;font-weight:800;color:#738396}
.tskk-combo-name{min-width:0;font-size:13px;font-weight:750;line-height:1.35;overflow-wrap:anywhere}
.tskk-combo-type{font-size:11px;font-weight:800;padding:8px 10px;white-space:nowrap;color:#52657a;background:#fbfcfd;border-left:0}
.tskk-combo-type.manual{background:#e4f4df;border-color:#c5e3bb;color:#2e6631}
.tskk-combo-type.auto{background:#e2efff;border-color:#bfd7f5;color:#2e5f96}
.tskk-combo-type.walk{background:#fff0d6;border-color:#f3d8aa;color:#8a5d1d}
.tskk-combo-type.wait{background:#fde4e1;border-color:#f2c5c0;color:#9a3b35}
.tskk-combo-track{position:relative;height:50px;border-bottom:1px solid #edf1f4;background:repeating-linear-gradient(to right,#fff 0,#fff calc(5% - 1px),#edf1f4 5%)}
.tskk-combo-bar{position:absolute;top:11px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;min-width:5px;box-sizing:border-box;border:1px solid rgba(0,0,0,.06);overflow:hidden}
.tskk-combo-bar span{font-size:10.5px;font-weight:800;color:#17324d;padding:0 6px;white-space:nowrap}
.tskk-combo-bar.manual{background:#d9f0dc;border-color:#b8ddbd}
.tskk-combo-bar.auto{background:#dbeafe;border-color:#b8d3f3}
.tskk-combo-bar.walk{background:#ffe7bd;border-color:#f2d3a0}
.tskk-combo-bar.wait{background:#f9d8d6;border-color:#efb7b1}
.tskk-combo-bar.unassigned{background:#edf1f4;border-color:#d9e0e6}
.tskk-combo-bar.unassigned span{color:#748396}.tskk-wave-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}.tskk-wave-path{fill:none;stroke:#111;stroke-width:2;vector-effect:non-scaling-stroke}.tskk-wave-path.dashed{stroke-dasharray:5 3}.tskk-wave-path.solid{stroke-dasharray:none}.tskk-line-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.tskk-line-path{fill:none;stroke:#111;stroke-width:2;vector-effect:non-scaling-stroke}.tskk-line-path.dashed{stroke-dasharray:5 3}.tskk-solid-line{position:absolute;left:0;right:0;top:50%;height:3px;background:#111;transform:translateY(-50%);border-radius:2px}.tskk-combo-bar.auto .tskk-wave-path{stroke-width:2}.tskk-combo-bar.walk .tskk-wave-path{stroke-width:2}
.tskk-combo-takt{position:absolute;top:48px;bottom:88px;width:0;border-left:3px dashed #b12622;pointer-events:none;z-index:3}
.tskk-combo-takt span{position:absolute;top:5px;left:6px;padding:3px 6px;border-radius:5px;background:#fff;color:#a72520;font-size:10.5px;font-weight:800;white-space:nowrap;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.tskk-combo-footer{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:11px 14px;background:#fbfcfd}
.tskk-combo-note{font-size:12px;color:#738396;line-height:1.45}
.tskk-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:11.5px;color:#617286}
.tskk-dot{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px;border:1px solid rgba(0,0,0,.05)}
.tskk-dot.manual{background:#d9f0dc}.tskk-dot.auto{background:#dbeafe}.tskk-dot.walk{background:#ffe7bd}.tskk-dot.wait{background:#f9d8d6}

@media(max-width:1100px){
  .tskk-meta-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tskk-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:760px){
  .tskk-meta-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tskk-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tskk-actions{width:100%}
  .tskk-actions .btn{flex:1 1 auto}
}
@media(max-width:560px){
  .tskk-meta-grid{grid-template-columns:1fr}
  .tskk-kpis{grid-template-columns:1fr}
  .tskk-meta-grid .full{grid-column:auto}
  .tskk-meta-helper{align-items:stretch}
  .tskk-meta-helper span{width:100%;flex-basis:100%}
  .tskk-meta-helper .btn{width:100%}
  .tskk-table-card,.tskk-chart-card{padding:13px}
}

/* V3.0.32 Observation-driven TSKK */
.observation-cycle-banner{display:flex;justify-content:space-between;align-items:center;gap:14px;margin:14px 0;padding:14px 16px;border:1px solid #dfe6ec;border-radius:12px;background:#f8fafc}
.observation-cycle-banner>div{min-width:0;display:grid;gap:3px}
.observation-cycle-banner span{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:#708197;font-weight:800}
.observation-cycle-banner b{font-size:14px;color:#1f3b55;overflow-wrap:anywhere}
.observation-cycle-banner small{font-size:12px;color:#65778a;line-height:1.45}
.tskk-observation-list,.tskk-list-wrap{margin-top:14px}
.tskk-readonly-element{font-weight:700;line-height:1.35;min-width:220px;overflow-wrap:anywhere;padding:9px 10px;background:#f8fafc;border:1px solid #e2e8ee;border-radius:9px}
.tskk-readonly-number{font-variant-numeric:tabular-nums;white-space:nowrap;padding:9px 10px;background:#f8fafc;border:1px solid #e2e8ee;border-radius:9px;text-align:right}
@media (max-width:900px){.observation-cycle-banner{align-items:stretch;flex-direction:column}.observation-cycle-banner .btn{width:100%}}
@media (max-width:700px){.tskk-work-table{min-width:1080px}.tskk-chart-scroll{width:100%;max-width:100%}}


/* V3.0.39: Observation method + separated administration + responsive hardening */
.nav-admin-group{margin-top:18px;padding-top:10px;border-top:1px solid rgba(255,255,255,.12)}
.nav-admin-group .nav-label{margin-top:0!important}
.observation-method-switch{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 12px;padding:4px;border:1px solid #dce3ec;border-radius:10px;background:#f7f9fc}
.method-choice{border:0;background:transparent;color:#64748b;padding:10px 12px;border-radius:7px;font:700 12px/1 Inter,Segoe UI,Arial,sans-serif;cursor:pointer}
.method-choice.active{background:#fff;color:#172033;box-shadow:0 1px 4px rgba(20,32,51,.12)}
.manual-tskk-summary{min-height:0}
.manual-cycle-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.manual-cycle-summary>div{padding:14px;border:1px solid #e1e7ed;border-radius:10px;background:#f8fafc}
.manual-cycle-summary span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:#748397;font-weight:800}
.manual-cycle-summary b{display:block;margin-top:6px;font-size:16px;line-height:1.3;overflow-wrap:anywhere}
.manual-tskk-table{min-width:0!important}
@media(max-width:900px){
  .content{padding:24px}
  .manual-cycle-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .nav-admin-group{margin-top:14px}
  .observation-method-switch{position:sticky;top:0;z-index:2}
  .manual-cycle-summary{grid-template-columns:1fr}
  .manual-tskk-table{width:100%}
  .manual-tskk-table th,.manual-tskk-table td{white-space:normal}
}
@media(max-width:560px){
  .content{padding:14px}
  .card{padding:14px}
  .video-tools{grid-template-columns:1fr!important}
  .video-tools #fullVideo{grid-column:auto!important}
  .observation-method-switch{grid-template-columns:1fr 1fr}
}

/* V3.0.40: User Management page title + strict admin-only navigation visibility */
.user-management-page .user-management-title{align-items:flex-start}
.user-management-title h2{margin:0 0 4px;font-size:22px;line-height:1.2;color:var(--ut-navy,#102a43)}
.user-management-title h3{margin:0 0 6px;font-size:14px}
.user-management-title p{margin:0}
.nav-admin-group.hidden{display:none!important;visibility:hidden!important;height:0!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;overflow:hidden!important}
.nav-admin-group .nav-label.hidden{display:none!important}
@media(max-width:760px){
  .user-management-title h2{font-size:20px}
  .user-management-title h3{font-size:13px}
}

.tskk-actions .btn:disabled{opacity:.65;cursor:wait}

/* V3.0.64 — iOS/Safari TSKK date field containment hardening */
.tskk-meta-grid > label{min-width:0!important;width:100%!important;max-width:100%!important;overflow:hidden;}
.tskk-meta-grid input[type="date"]{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  inline-size:100%!important;
  min-inline-size:0!important;
  max-inline-size:100%!important;
  box-sizing:border-box!important;
  margin:0!important;
  padding:10px!important;
  overflow:hidden!important;
  font-size:16px!important;
  line-height:20px!important;
  -webkit-appearance:none!important;
  appearance:none!important;
}
@media(max-width:560px){
  .tskk-editor-card .tskk-meta-grid,
  .tskk-header-card .tskk-meta-grid{width:100%!important;min-width:0!important;max-width:100%!important;}
  .tskk-meta-grid > label{overflow:hidden!important;}
  .tskk-meta-grid input[type="date"]{width:100%!important;inline-size:100%!important;}
}

/* V3.0.65 — compact, fluid mobile TSKK layout */
@media (max-width:760px){
  .tskk-content{padding:12px 10px 22px!important;}
  .tskk-content>.card{padding:12px!important;border-radius:11px;}
  .tskk-header-card{overflow:hidden;}
  .tskk-header-card .section-head{gap:8px;}
  .tskk-header-card .section-head h3{font-size:14px;margin-bottom:6px;}
  .tskk-header-card .section-head .muted{font-size:11px;line-height:1.4;}
  .tskk-meta-grid{gap:9px!important;}
  .tskk-meta-grid label{font-size:11px;gap:4px;}
  .tskk-meta-grid input,.tskk-meta-grid select,.tskk-meta-grid textarea{padding:8px!important;min-height:38px!important;font-size:13px!important;}
  .tskk-meta-grid textarea{min-height:54px!important;}
  .tskk-meta-helper{margin-top:9px!important;font-size:10.5px!important;line-height:1.4;}
  .tskk-actions{gap:7px!important;margin-top:8px;}
  .tskk-actions .btn{min-height:40px!important;padding:8px 7px!important;font-size:12px!important;}
  .tskk-kpis{gap:8px!important;margin-top:10px!important;}
  .tskk-kpis .kpi{padding:9px!important;min-height:0!important;}
  .tskk-kpis .kpi .label{font-size:9px!important;}
  .tskk-kpis .kpi .value{font-size:17px!important;margin-top:4px!important;}
  .tskk-kpis .kpi .sub{font-size:9.5px!important;margin-top:3px!important;}
  .tskk-table-card,.tskk-chart-card{margin-top:9px!important;padding:10px!important;overflow:hidden;}
  .tskk-table-card h3,.tskk-chart-card h3{font-size:13px!important;margin-bottom:4px!important;}
  .tskk-table-card .muted,.tskk-chart-card .muted{font-size:10px!important;line-height:1.35;}
  .tskk-table-card .data-table{font-size:11px!important;}
  .tskk-table-card .data-table th,.tskk-table-card .data-table td{padding:7px 8px!important;}
  .tskk-work-table{min-width:920px!important;}
  .tskk-item-element{min-width:190px!important;}
  .tskk-item-type{min-width:130px!important;}
  .tskk-item-time,.tskk-item-start{min-width:88px!important;}
  .tskk-item-note{min-width:140px!important;}
  .tskk-chart-scroll{width:100%!important;max-width:100%!important;overflow-x:auto!important;overflow-y:hidden!important;-webkit-overflow-scrolling:touch!important;}
  .tskk-combination-chart{min-width:820px!important;}
  .tskk-combo-header,.tskk-combo-row{grid-template-columns:34px 150px 118px minmax(518px,1fr)!important;}
  .tskk-combo-heading,.tskk-combo-no-head{min-height:38px!important;padding:0 8px!important;font-size:10px!important;}
  .tskk-combo-row{min-height:40px!important;}
  .tskk-combo-no,.tskk-combo-name,.tskk-combo-type{padding:6px 8px!important;font-size:10px!important;}
  .tskk-combo-track{height:40px!important;}
  .tskk-combo-bar{top:8px!important;height:24px!important;}
  .tskk-combo-bar span{font-size:9px!important;padding:0 4px!important;}
  .tskk-combo-axis{height:38px!important;font-size:9px!important;}
  .tskk-combo-axis span{bottom:12px!important;}
  .tskk-combo-axis{padding-right:34px!important;}
  .tskk-combo-axis span.axis-end{right:34px!important;}
  .tskk-combo-axis span.axis-start{left:0!important;}
  .tskk-combo-axis em{bottom:12px!important;right:7px!important;}
  .tskk-combo-footer{padding:8px 9px!important;gap:8px!important;}
  .tskk-combo-note,.tskk-legend{font-size:9.5px!important;}
  .tskk-legend{gap:8px!important;}
}
@media (max-width:560px){
  .tskk-meta-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .tskk-meta-grid .full{grid-column:1/-1!important;}
  .tskk-actions{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));width:100%!important;}
  .tskk-actions .btn{width:100%!important;min-width:0!important;}
  .tskk-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .manual-cycle-summary{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important;}
  .manual-cycle-summary>div{padding:8px!important;}
  .manual-cycle-summary b{font-size:13px!important;margin-top:4px!important;}
  .manual-cycle-summary span{font-size:8.5px!important;}
  .observation-cycle-banner{margin:9px 0!important;padding:9px 10px!important;}
  .tskk-observation-list,.tskk-list-wrap{margin-top:9px!important;}
  .tskk-observation-list .data-table,.tskk-list-wrap .data-table{font-size:10.5px!important;}
  .tskk-observation-list .data-table th,.tskk-observation-list .data-table td,
  .tskk-list-wrap .data-table th,.tskk-list-wrap .data-table td{padding:7px 8px!important;}
  .tskk-combination-chart{min-width:760px!important;}
  .tskk-combo-header,.tskk-combo-row{grid-template-columns:30px 135px 105px minmax(490px,1fr)!important;}
}

/* V3.0.66 — Global compact & consistent mobile system
   Goal: reduce vertical density without sacrificing touch usability. */
@media (max-width:760px){
  html,body{width:100%;max-width:100%;overflow-x:hidden;}
  .main{min-width:0;width:100%;}
  .topbar{height:68px;padding:10px 12px;border-bottom-width:2px;}
  .topbar h1{font-size:18px;line-height:1.15;}
  .eyebrow{font-size:8px;letter-spacing:1.1px;margin-bottom:3px;}
  .top-actions{gap:6px;}
  .top-actions button{padding:7px 8px;font-size:11px;border-radius:7px;}
  .content{padding:10px!important;width:100%;max-width:100%;}
  .section{margin-top:12px;}
  .grid{gap:8px;}
  .grid.cols-4,.grid.cols-3,.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
  .card{padding:11px!important;border-radius:10px;box-shadow:0 2px 10px rgba(7,27,51,.045);}
  .card h3{font-size:13px;margin:0 0 8px;line-height:1.25;}
  .card h2{font-size:17px!important;line-height:1.2;margin:0 0 6px;}
  .card p{margin-top:5px;margin-bottom:7px;}
  .section-head{gap:7px!important;}
  .section-head>div:last-child{margin-top:6px;}
  .muted{font-size:10.5px;line-height:1.35;}
  .hint{font-size:10px;line-height:1.35;}
  .toolbar{gap:6px;}
  .toolbar .btn{min-height:36px;}
  .btn{min-height:36px;padding:8px 10px;font-size:11px;border-radius:7px;}
  label{font-size:10.5px;gap:4px;}
  input,select,textarea{padding:8px!important;min-height:36px;font-size:13px!important;border-radius:7px;}
  textarea{min-height:58px;}
  .form-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
  .form-grid.four{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
  .full{grid-column:1/-1!important;}

  /* compact KPIs across Dashboard and analysis pages */
  .kpi{padding:9px!important;min-height:0!important;}
  .kpi .label{font-size:8.5px;letter-spacing:.5px;}
  .kpi .value{font-size:19px;margin-top:4px;line-height:1.1;}
  .kpi .sub{font-size:9px;margin-top:3px;line-height:1.25;}
  .stat-table td.num{font-size:11px;}
  .summary-bar{gap:8px;font-size:10px;}

  /* tables: compact rows + a real scroll viewport */
  .table-wrap{width:100%;max-width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;}
  .data-table{font-size:11px;}
  .data-table th{font-size:8.5px;letter-spacing:.25px;}
  .data-table th,.data-table td{padding:7px 8px;}
  .data-table td{line-height:1.25;}
  .badge{padding:3px 6px;font-size:8.5px;}
  .empty{padding:22px 10px;font-size:11px;}

  /* dashboard charts / analysis */
  .chart-row{gap:6px;margin:7px 0;}
  .chart-label{width:105px;font-size:10px;}
  .bar{height:20px;border-radius:5px;}
  .bar small{font-size:8.5px;top:3px;right:5px;}
  .analysis-note{padding:8px 9px;margin-bottom:8px;font-size:10px;line-height:1.35;}
  .progress{height:6px;}

  /* observation */
  .workspace{gap:10px;}
  .video-card{padding-bottom:10px!important;}
  .video-stage{gap:7px;}
  .video-wrap{min-height:190px!important;border-radius:9px;}
  .video-empty{font-size:10px;}
  .video-empty strong{font-size:13px;}
  .video-empty span{font-size:9px;}
  .video-tools{gap:6px;}
  .video-skip{min-height:40px!important;padding:6px;font-size:10px;border-radius:8px;}
  .video-skip span{font-size:9px;}
  .video-tip{margin:6px 0 0;padding:7px 8px;font-size:9px;}
  .dropzone{padding:11px 8px;margin-bottom:8px;border-radius:8px;}
  .dropzone b{font-size:11px;}
  .dropzone small{font-size:9px;}
  .time-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:8px 0;}
  .timebox{padding:7px;border-radius:7px;}
  .timebox span{font-size:8.5px;}
  .timebox b{font-size:13px;margin-top:2px;}
  .master-preview{gap:6px;margin:8px 0;}
  .master-preview div{padding:7px;border-radius:7px;}
  .master-preview span{font-size:8.5px;}
  .master-preview b{font-size:10.5px;}
  .seg-controls{gap:6px;margin:8px 0;}

  /* master / data-entry pages */
  .filters{gap:6px;margin-bottom:8px;}
  .filters select,.filters input{max-width:none;min-width:0;flex:1 1 140px;}
  .master-legend{margin:8px 0;gap:5px;}

  /* keep horizontal tables inside their cards */
  .card>.table-wrap,.card>.table-scroll,.card>.data-table-wrap{width:100%;max-width:100%;min-width:0;}
  table{max-width:none;}

  /* modal */
  .modal-backdrop{padding:8px;}
  .modal{padding:12px!important;border-radius:11px;max-height:94vh;}
  .modal-actions{gap:6px;margin-top:9px;}
  .modal-actions .btn{flex:1;}

  /* navigation */
  .sidebar{width:min(82vw,280px);padding:14px 10px;}
  .sidebar button,.import-btn{padding:9px 10px;font-size:12px;}
  .nav-label{font-size:8.5px;margin:12px 8px 4px;}
}

@media (max-width:560px){
  .topbar{height:62px;padding:8px 10px;}
  .topbar h1{font-size:16px;}
  .content{padding:8px!important;}
  .card{padding:9px!important;border-radius:9px;}
  .grid{gap:7px;}
  .grid.cols-4,.grid.cols-3,.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
  .form-grid,.form-grid.four{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;}
  label{font-size:9.5px;}
  input,select,textarea{min-height:34px;padding:7px!important;font-size:12px!important;}
  .btn{min-height:34px;padding:7px 8px;font-size:10.5px;}
  .card h3{font-size:12px;margin-bottom:6px;}
  .muted{font-size:9.5px;}
  .kpi{padding:8px!important;}
  .kpi .label{font-size:7.8px;}
  .kpi .value{font-size:17px;}
  .kpi .sub{font-size:8.5px;}
  .data-table{font-size:10px;}
  .data-table th{font-size:8px;}
  .data-table th,.data-table td{padding:6px 7px;}
  .badge{font-size:8px;padding:3px 5px;}
  .video-wrap{min-height:165px!important;}
  .video-tools{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));}
  .video-skip{min-height:38px!important;}
  .dropzone{padding:9px 7px;}
  .timebox{padding:6px;}
  .timebox b{font-size:12px;}
  .chart-label{width:88px;font-size:9px;}
  .bar{height:18px;}
  .analysis-note{font-size:9px;}
  .toolbar .btn{flex:1 1 auto;}
}

/* V3.0.67 — Final mobile UI/UX compact consistency pass
   Scope: presentation only. Preserve application logic and desktop layout. */
@media (max-width:760px){
  html,body{font-size:14px;-webkit-text-size-adjust:100%;text-size-adjust:100%;}
  .content{padding:9px 10px 22px!important;}
  .section{margin-top:10px!important;}
  .grid,.content>.workspace,.dashboard-content>#dashResults{gap:9px!important;}
  .card,.dashboard-filter,.chart-card,.classify-card,.video-card{padding:11px!important;border-radius:9px!important;}
  .card h2{font-size:16px!important;line-height:1.18!important;}
  .card h3,.chart-card h3,.pareto-card h3{font-size:12.5px!important;line-height:1.25!important;margin-bottom:7px!important;}
  .muted{font-size:9.5px!important;line-height:1.35!important;}
  .hint,.analysis-note{font-size:9.5px!important;line-height:1.35!important;}

  /* Consistent controls: compact but still finger-friendly. */
  label{font-size:10px!important;line-height:1.2!important;gap:4px!important;}
  input,select,textarea{min-height:35px!important;height:35px;box-sizing:border-box!important;padding:7px 8px!important;font-size:13px!important;line-height:1.2!important;border-radius:7px!important;}
  textarea{height:auto;min-height:52px!important;}
  .btn{min-height:35px!important;height:35px;padding:7px 9px!important;font-size:11px!important;line-height:1.1!important;border-radius:7px!important;}
  .toolbar .btn,.top-actions button{min-height:35px!important;height:35px!important;padding:7px 8px!important;font-size:10.5px!important;}

  /* Dashboard: compact filter, KPI and charts without breaking readability. */
  .dashboard-filter{padding:10px!important;}
  .dashboard-filter-controls{gap:8px!important;}
  .dashboard-filter-grid{gap:7px!important;}
  .dashboard-filter-actions{margin-top:1px!important;}
  .dashboard-filter-actions .btn{min-height:35px!important;height:35px!important;width:100%!important;}
  .dashboard-kpis{gap:7px!important;}
  .kpi{padding:8px!important;}
  .kpi .label{font-size:8px!important;letter-spacing:.35px!important;}
  .kpi .value{font-size:17px!important;line-height:1.1!important;margin-top:3px!important;}
  .kpi .sub{font-size:8.5px!important;line-height:1.2!important;margin-top:3px!important;}
  .chart-card{overflow:hidden!important;}
  .pie-chart-wrap{gap:9px!important;padding:3px 0 8px!important;}
  .pie-chart{width:min(100%,205px)!important;}
  .chart-legend{gap:4px!important;width:100%!important;max-width:none!important;}
  .chart-legend>div.chart-legend-item,
  .chart-legend .chart-legend-item{
    grid-template-columns:minmax(0,1fr) max-content!important;
    gap:7px!important;
    min-height:0!important;
    padding:6px 0!important;
  }
  .chart-legend-label{gap:7px!important;min-width:0!important;}
  .chart-legend-label span{font-size:10.5px!important;line-height:1.25!important;white-space:normal!important;overflow:visible!important;}
  .chart-legend-metrics{grid-template-columns:max-content max-content!important;gap:7px!important;justify-content:end!important;align-items:center!important;}
  .chart-legend-metrics b{font-size:10.5px!important;}
  .chart-legend-metrics small{font-size:9.5px!important;min-width:0!important;}
  .pareto-chart{height:250px!important;padding:10px 3px 0!important;gap:5px!important;}
  .pareto-scale{font-size:8px!important;padding-bottom:34px!important;}
  .pareto-bars{gap:7px!important;padding:0 4px 0 3px!important;}
  .pareto-item{grid-template-rows:1fr 34px!important;}
  .pareto-item>small{font-size:8.5px!important;line-height:1.15!important;}
  .pareto-table-block{margin-top:10px!important;padding-top:10px!important;}
  .subtable-title{font-size:11.5px!important;margin-bottom:7px!important;}

  /* Observation: reduce video/control vertical footprint. */
  .video-wrap{min-height:165px!important;}
  .dropzone{padding:9px 7px!important;margin-bottom:7px!important;}
  .dropzone b{font-size:10.5px!important;}
  .dropzone small{font-size:8.5px!important;}
  .video-tools{gap:5px!important;}
  .video-skip{min-height:35px!important;height:35px!important;font-size:9.5px!important;}
  .time-grid{gap:6px!important;margin:7px 0!important;}
  .timebox{padding:6px!important;}
  .timebox span{font-size:8px!important;}
  .timebox b{font-size:12px!important;}
  .master-preview{gap:6px!important;margin:7px 0!important;}
  .master-preview div{padding:6px!important;}
  .master-preview span{font-size:8px!important;}
  .master-preview b{font-size:10px!important;}
  .seg-controls{gap:5px!important;margin:7px 0!important;}
  .observation-save-action{margin-top:9px!important;padding-top:9px!important;}
  .observation-save-action .btn{min-height:36px!important;height:36px!important;}

  /* Tables: compact rows while retaining real horizontal scrolling. */
  .table-wrap,.rating-table-wrap,.user-management-wrap,.tskk-chart-scroll,.tskk-observation-list .table-wrap,.tskk-list-wrap .table-wrap{
    width:100%!important;max-width:100%!important;min-width:0!important;overflow-x:auto!important;overflow-y:hidden!important;-webkit-overflow-scrolling:touch!important;touch-action:pan-x pan-y!important;
  }
  .data-table{font-size:10px!important;}
  .data-table th{font-size:7.5px!important;letter-spacing:.15px!important;}
  .data-table th,.data-table td{padding:6px 7px!important;}
  .badge{font-size:7.5px!important;padding:3px 5px!important;}

  /* Rating Factor: both setting boxes start their inputs at exactly the same row. */
  .two-equal{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important;align-items:start!important;}
  .two-equal>label{grid-template-rows:minmax(32px,auto) 35px minmax(27px,auto)!important;align-items:start!important;}
  .two-equal>label input{width:100%!important;max-width:100%!important;}
  .two-equal>label small{font-size:8px!important;line-height:1.2!important;min-height:27px!important;}
  .rating-head{gap:8px!important;padding-bottom:3px!important;}
  .add-pic-form{gap:6px!important;margin-top:7px!important;}
  .rating-table{min-width:900px!important;}
  .rating-table select{font-size:10px!important;min-height:34px!important;height:34px!important;padding:6px 8px!important;}
  #saveSettings{margin-top:9px!important;}

  /* Classification: prevent long names and metrics from colliding. */
  .classify-card .form-grid{gap:7px!important;margin-bottom:8px!important;}
  .classify-card>label{margin-top:8px!important;}

  /* TSKK: consistent typography and compact actions/fields. */
  .tskk-content{gap:9px!important;}
  .tskk-content>.card{padding:10px!important;border-radius:9px!important;}
  .tskk-header-card{overflow:hidden!important;}
  .tskk-header-card .section-head{gap:6px!important;}
  .tskk-header-card .section-head h3{font-size:14px!important;margin-bottom:4px!important;}
  .tskk-header-card .section-head .muted{font-size:9.5px!important;}
  .tskk-meta-grid{gap:7px!important;margin-top:9px!important;}
  .tskk-meta-grid label{font-size:10px!important;gap:3px!important;min-width:0!important;}
  .tskk-meta-grid input,.tskk-meta-grid select,.tskk-meta-grid textarea{
    width:100%!important;min-width:0!important;max-width:100%!important;height:35px!important;min-height:35px!important;padding:7px 8px!important;font-size:13px!important;line-height:1.15!important;border-radius:7px!important;-webkit-appearance:none;
  }
  .tskk-meta-grid input[type="date"]{width:100%!important;inline-size:100%!important;min-inline-size:0!important;max-inline-size:100%!important;display:block!important;}
  .tskk-meta-grid textarea{height:auto!important;min-height:50px!important;}
  .tskk-actions{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important;width:100%!important;margin-top:6px!important;}
  .tskk-actions .btn{width:100%!important;min-width:0!important;height:35px!important;min-height:35px!important;padding:6px 5px!important;font-size:10.5px!important;}
  .tskk-kpis{gap:7px!important;margin:8px 0!important;}
  .tskk-kpis .kpi{padding:7px!important;}
  .tskk-kpis .kpi .label{font-size:7.8px!important;}
  .tskk-kpis .kpi .value{font-size:16px!important;}
  .tskk-kpis .kpi .sub{font-size:8px!important;}
  .tskk-table-card,.tskk-chart-card{margin-top:7px!important;padding:9px!important;border-radius:9px!important;}
  .tskk-table-card h3,.tskk-chart-card h3{font-size:11.5px!important;margin-bottom:4px!important;}
  .tskk-work-table{min-width:900px!important;}
  .tskk-work-table th,.tskk-work-table td{padding:6px 7px!important;}
  .tskk-work-table input,.tskk-work-table select{font-size:10px!important;min-height:32px!important;height:32px!important;padding:5px 6px!important;}
  .tskk-item-element{min-width:180px!important;}
  .tskk-item-type{min-width:120px!important;}
  .tskk-item-time,.tskk-item-start{min-width:82px!important;}
  .tskk-item-note{min-width:130px!important;}
  .tskk-combination-chart{min-width:700px!important;}
  .tskk-combo-header,.tskk-combo-row{grid-template-columns:28px 125px 98px minmax(449px,1fr)!important;}
  .tskk-combo-heading,.tskk-combo-no-head{min-height:34px!important;padding:0 6px!important;font-size:8.5px!important;}
  .tskk-combo-row{min-height:36px!important;}
  .tskk-combo-no,.tskk-combo-name,.tskk-combo-type{padding:5px 6px!important;font-size:9px!important;}
  .tskk-combo-track{height:36px!important;}
  .tskk-combo-bar{top:7px!important;height:22px!important;}
  .tskk-combo-bar span{font-size:8px!important;padding:0 3px!important;}
  .tskk-combo-axis{height:34px!important;font-size:8px!important;}
  .tskk-combo-footer{padding:7px!important;gap:6px!important;}
  .tskk-combo-note,.tskk-legend{font-size:8.5px!important;}

  /* Sidebar/menu and common controls stay compact and consistent. */
  .sidebar{width:min(80vw,270px)!important;padding:12px 9px!important;}
  .sidebar button,.import-btn{min-height:34px!important;padding:8px 9px!important;font-size:11px!important;}
  .nav-label{font-size:8px!important;margin:10px 7px 3px!important;}
}

@media (max-width:560px){
  .content{padding:8px 9px 20px!important;}
  .card,.dashboard-filter,.chart-card,.classify-card,.video-card{padding:9px!important;}
  .grid,.content>.workspace,.dashboard-content>#dashResults{gap:7px!important;}
  .section{margin-top:8px!important;}
  .card h2{font-size:15px!important;}
  .card h3,.chart-card h3,.pareto-card h3{font-size:11.5px!important;}
  label{font-size:9.5px!important;}
  input,select,textarea{height:34px!important;min-height:34px!important;font-size:12.5px!important;padding:6px 7px!important;}
  .btn{height:34px!important;min-height:34px!important;padding:6px 8px!important;font-size:10px!important;}
  .topbar{height:60px!important;padding:7px 9px!important;}
  .topbar h1{font-size:15px!important;}
  .eyebrow{font-size:7px!important;letter-spacing:.9px!important;}
  .dashboard-kpis{gap:6px!important;}
  .kpi{padding:7px!important;}
  .kpi .label{font-size:7.5px!important;}
  .kpi .value{font-size:16px!important;}
  .kpi .sub{font-size:8px!important;}
  .pie-chart{width:min(100%,190px)!important;}
  .chart-legend>div.chart-legend-item,.chart-legend .chart-legend-item{gap:6px!important;padding:5px 0!important;}
  .chart-legend-label span{font-size:10px!important;}
  .chart-legend-metrics{gap:5px!important;}
  .chart-legend-metrics b{font-size:10px!important;}
  .chart-legend-metrics small{font-size:9px!important;}
  .pareto-chart{height:225px!important;}
  .two-equal{gap:6px!important;}
  .two-equal>label{grid-template-rows:minmax(34px,auto) 34px minmax(26px,auto)!important;}
  .two-equal>label small{font-size:7.7px!important;}
  .tskk-meta-grid{gap:6px!important;}
  .tskk-meta-grid label{font-size:9.5px!important;}
  .tskk-meta-grid input,.tskk-meta-grid select,.tskk-meta-grid textarea{font-size:12.5px!important;height:34px!important;min-height:34px!important;}
  .tskk-actions{gap:5px!important;}
  .tskk-actions .btn{height:34px!important;min-height:34px!important;font-size:10px!important;padding:6px 4px!important;}
  .tskk-combination-chart{min-width:660px!important;}
  .tskk-combo-header,.tskk-combo-row{grid-template-columns:27px 118px 94px minmax(421px,1fr)!important;}
  .tskk-combo-heading,.tskk-combo-no-head{font-size:8px!important;}
  .tskk-combo-no,.tskk-combo-name,.tskk-combo-type{font-size:8.5px!important;}
  .tskk-combo-bar span{font-size:7.5px!important;}
}


/* V3.0.68 — Mobile UI consistency + Master Method → TSKK Type */
@media (max-width:760px){
  /* Time Classification: reserve a full row for long labels, then metrics. */
  .chart-card .chart-legend-item,
  .chart-card .chart-legend>div.chart-legend-item{
    grid-template-columns:minmax(0,1fr)!important;
    gap:4px!important;
    align-items:start!important;
  }
  .chart-card .chart-legend-label{width:100%!important;min-width:0!important;align-items:flex-start!important;}
  .chart-card .chart-legend-label span{display:block!important;min-width:0!important;max-width:100%!important;overflow-wrap:anywhere!important;word-break:normal!important;line-height:1.25!important;}
  .chart-card .chart-legend-metrics{width:100%!important;display:flex!important;justify-content:flex-start!important;align-items:center!important;gap:12px!important;white-space:nowrap!important;}
  .chart-card .chart-legend-metrics b,.chart-card .chart-legend-metrics small{font-size:10px!important;white-space:nowrap!important;text-align:left!important;}

  /* One typography system for TSKK metadata controls. */
  .tskk-meta-grid label{font:700 10px/1.2 Inter,Segoe UI,Arial,sans-serif!important;color:#53657a!important;}
  .tskk-meta-grid input,
  .tskk-meta-grid select,
  .tskk-meta-grid textarea,
  .tskk-meta-grid input[type="date"]{
    font-family:Inter,Segoe UI,Arial,sans-serif!important;
    font-size:13px!important;
    font-weight:600!important;
    line-height:1.2!important;
    color:#172033!important;
    height:35px!important;
    min-height:35px!important;
    max-height:35px!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    box-sizing:border-box!important;
  }
  .tskk-meta-grid textarea{height:auto!important;min-height:50px!important;max-height:none!important;}
  .tskk-meta-helper{font-size:9px!important;line-height:1.3!important;padding:8px 9px!important;margin-top:8px!important;}
  .tskk-meta-helper .btn{height:33px!important;min-height:33px!important;font-size:10px!important;}

  /* TSKK actions: smaller and equal-width. */
  .tskk-actions{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:5px!important;}
  .tskk-actions .btn{height:33px!important;min-height:33px!important;font:700 10px/1 Inter,Segoe UI,Arial,sans-serif!important;padding:5px 4px!important;}
  .tskk-content>.card{padding:9px!important;}
  .tskk-content .section-head h3{font-size:13px!important;line-height:1.2!important;}
  .tskk-content .section-head .muted{font-size:9px!important;line-height:1.3!important;}
  .tskk-kpis .kpi .label{font-size:7.5px!important;}
  .tskk-kpis .kpi .value{font-size:15px!important;}
  .tskk-kpis .kpi .sub{font-size:7.8px!important;}

  /* TSKK table Type is derived from Master, so render it as a compact read-only badge. */
  .tskk-readonly-type{
    min-width:0!important;width:100%!important;box-sizing:border-box!important;
    padding:6px 7px!important;border:1px solid #e1e7ed!important;border-radius:7px!important;
    font:700 10px/1.15 Inter,Segoe UI,Arial,sans-serif!important;text-align:center!important;
    white-space:normal!important;overflow-wrap:anywhere!important;
  }
  .tskk-readonly-type.manual{background:#e4f4df!important;color:#2e6631!important;border-color:#c5e3bb!important;}
  .tskk-readonly-type.auto{background:#e2efff!important;color:#2e5f96!important;border-color:#bfd7f5!important;}
  .tskk-readonly-type.walk{background:#fff0d6!important;color:#8a5d1d!important;border-color:#f3d8aa!important;}

  /* Compact generic action buttons on every mobile page. */
  .btn{height:34px!important;min-height:34px!important;padding:6px 8px!important;font-size:10.5px!important;line-height:1.1!important;}
  .section-head .btn,.toolbar .btn,.top-actions button{height:34px!important;min-height:34px!important;}

  /* Rating Factor: labels may wrap, but both input boxes remain aligned. */
  .two-equal{align-items:start!important;}
  .two-equal>label{display:grid!important;grid-template-rows:minmax(24px,auto) 35px minmax(28px,auto)!important;align-content:start!important;gap:4px!important;}
  .two-equal>label input{height:35px!important;min-height:35px!important;max-height:35px!important;font-size:13px!important;}
  .two-equal>label small{display:block!important;min-height:28px!important;font-size:8px!important;line-height:1.2!important;}

  /* Master method is a select now; keep its height aligned with Equipment/Frequency. */
  #mMethod{height:35px!important;min-height:35px!important;font-size:13px!important;}
}

@media (max-width:560px){
  .chart-card .chart-legend-item,.chart-card .chart-legend>div.chart-legend-item{padding:5px 0!important;}
  .chart-card .chart-legend-label span{font-size:10px!important;}
  .chart-card .chart-legend-metrics b,.chart-card .chart-legend-metrics small{font-size:9.5px!important;}
  .tskk-meta-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important;}
  .tskk-meta-grid label{font-size:9.5px!important;}
  .tskk-meta-grid input,.tskk-meta-grid select,.tskk-meta-grid textarea,.tskk-meta-grid input[type="date"]{font-size:12px!important;}
  .tskk-actions .btn{font-size:9.5px!important;}
}


/* V3.0.69 — Mobile dashboard spacing + TSKK print overflow fix */
@media (max-width:760px){
  /* TOP 5 LEAN / WASTE: give row 5 breathing room before the next section/footer. */
  .pareto-card{padding-bottom:18px!important;}
  .pareto-table-block{padding-bottom:10px!important;margin-bottom:4px!important;}
  .pareto-table-block .table-wrap{padding-bottom:4px!important;}
}

/* TSKK print: keep the graph axis labels fully inside the graph header. */
@media print{
  .graph-head{overflow:hidden!important;}
  .axis{overflow:hidden!important;padding-right:24px!important;}
  .axis em{right:3px!important;background:#d9d9d9!important;padding-left:2px!important;z-index:2;}
  .axis span:last-of-type{left:calc(100% - 28px)!important;transform:translateX(-50%)!important;}
}

/* Dynamic duration inputs: display/input may use seconds or minutes without changing stored seconds. */
.time-input-row{display:grid;grid-template-columns:minmax(0,1fr) 92px;gap:8px;align-items:stretch}
.time-input-row input,.time-input-row select{min-width:0}
.input-help{display:block;font-size:10px!important;font-weight:500!important;color:#7b879b!important;margin-top:-2px}
@media(max-width:760px){.time-input-row{grid-template-columns:minmax(0,1fr) 82px}}


/* =========================================================
   V4.5.0 — UT PREMIUM COMMAND CENTER UI
   Presentation-only refactor. Application logic preserved.
   ========================================================= */
:root{
  --ut-yellow:#FFD100;
  --ut-gold:#D4AF37;
  --ut-navy-dark:#0A192F;
  --ut-navy-light:#1E293B;
  --ut-black:#111827;
  --ut-grey-bg:#F8FAFC;
  --ut-grey-border:#E2E8F0;
  --ut-blue:#1D4F91;
  --ut-blue-2:#3478BD;
  --ut-red:#D84A4A;
  --ut-charcoal:#374151;
  --ui-shadow:0 12px 30px -12px rgba(10,25,47,.18),0 4px 12px rgba(10,25,47,.06);
  --ui-shadow-hover:0 18px 36px -14px rgba(10,25,47,.25),0 7px 16px rgba(10,25,47,.08);
}

/* Clean white application canvas */
html,body{background:#fff!important;color:var(--ut-black)}
.app-shell,.main,#app,.content,.dashboard-content{background:#fff!important}
.card,.dashboard-filter,.chart-card,.classify-card,.video-card,.tskk-table-card,.tskk-chart-card{
  background:#fff!important;
  border:1px solid var(--ut-grey-border)!important;
  box-shadow:var(--ui-shadow)!important;
  border-radius:16px!important;
}
.card:hover,.dashboard-filter:hover,.chart-card:hover{box-shadow:var(--ui-shadow-hover)!important}

/* Header: page identity left, UT logo + menu control together on right */
.ut-topbar{
  height:96px!important;
  min-height:96px!important;
  padding:12px 30px!important;
  background:#fff!important;
  border-bottom:3px solid var(--ut-yellow)!important;
  box-shadow:0 6px 18px rgba(10,25,47,.06)!important;
  z-index:100;
}
.page-heading{flex:1 1 auto;min-width:0}
.page-heading h1{color:var(--ut-black)!important}
.ut-header-actions{
  margin-left:auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:14px;
  flex:0 0 auto;
}
.ut-header-logo-2{
  margin:0!important;
  width:min(29vw,350px)!important;
  max-width:350px!important;
  padding:0!important;
}
.ut-header-logo-2 img{
  width:100%!important;
  max-width:350px!important;
  max-height:52px!important;
  object-fit:contain!important;
  object-position:right center!important;
}
.sidebar-toggle{
  width:48px!important;height:48px!important;min-height:48px!important;
  border:1px solid var(--ut-grey-border)!important;
  border-radius:13px!important;
  background:#fff!important;
  box-shadow:0 6px 16px rgba(10,25,47,.10)!important;
  gap:5px!important;
}
.sidebar-toggle:hover{
  background:#fff!important;
  border-color:var(--ut-yellow)!important;
  box-shadow:0 10px 22px rgba(10,25,47,.14),0 0 0 3px rgba(255,209,0,.10)!important;
  transform:translateY(-1px);
}
.sidebar-toggle span{background:var(--ut-navy-dark)!important;width:21px!important;height:2.5px!important}

/* =========================================================
   Floating Command Center menu — matches supplied reference
   ========================================================= */
.sidebar{
  position:fixed!important;
  z-index:120!important;
  left:50%!important;
  top:50%!important;
  bottom:auto!important;
  width:min(1180px,calc(100vw - 64px))!important;
  height:min(760px,calc(100vh - 72px))!important;
  max-height:calc(100vh - 72px)!important;
  padding:24px!important;
  transform:translate(-50%,-50%) scale(.965)!important;
  transform-origin:center!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  background:rgba(255,255,255,.97)!important;
  color:var(--ut-black)!important;
  border:1px solid rgba(226,232,240,.95)!important;
  border-radius:24px!important;
  box-shadow:0 30px 80px rgba(10,25,47,.25),0 8px 25px rgba(10,25,47,.10)!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
  overflow:hidden!important;
  transition:transform .25s ease,opacity .2s ease,visibility .2s ease!important;
}
.app-shell.sidebar-open .sidebar{
  transform:translate(-50%,-50%) scale(1)!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  box-shadow:0 30px 80px rgba(10,25,47,.25),0 8px 25px rgba(10,25,47,.10)!important;
}
.sidebar-backdrop{
  z-index:110!important;
  background:rgba(10,25,47,.34)!important;
  backdrop-filter:blur(7px)!important;
  -webkit-backdrop-filter:blur(7px)!important;
}

/* Hide legacy sidebar branding; command-center heading replaces it */
.sidebar>.brand{display:none!important}
.menu-panel-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  padding:2px 2px 18px;
  margin-bottom:18px;
  border-bottom:1px solid var(--ut-grey-border);
}
.menu-eyebrow{
  color:#8A6500;
  font-size:10px;
  font-weight:900;
  letter-spacing:2px;
  text-transform:uppercase;
  margin-bottom:4px;
}
.menu-panel-head h2{
  margin:0!important;
  color:var(--ut-black)!important;
  font-size:22px!important;
  line-height:1.1!important;
  text-transform:uppercase;
  letter-spacing:.2px;
}
.menu-close{
  width:44px;height:44px;min-height:44px;
  border:0!important;
  border-radius:12px!important;
  background:#fff!important;
  color:#344054!important;
  font-size:28px!important;
  line-height:1!important;
  display:grid!important;
  place-items:center!important;
  cursor:pointer;
  box-shadow:0 6px 16px rgba(10,25,47,.08)!important;
  transition:all .2s ease;
}
.menu-close:hover{
  background:#f8fafc!important;
  color:var(--ut-navy-dark)!important;
  transform:rotate(90deg);
}
.sidebar nav{
  height:calc(100% - 150px);
  overflow:auto;
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  align-content:start;
  gap:10px!important;
  padding:0 2px 12px!important;
  scrollbar-width:thin;
  scrollbar-color:#D4AF37 transparent;
}
.sidebar nav::-webkit-scrollbar{width:7px}
.sidebar nav::-webkit-scrollbar-thumb{background:#D4AF37;border-radius:99px}
.nav-label{
  grid-column:1/-1!important;
  margin:8px 4px 0!important;
  padding:2px 0 0!important;
  color:#8A6500!important;
  font-size:9px!important;
  font-weight:900!important;
  letter-spacing:2px!important;
}
.nav-admin-group{display:contents!important}
.sidebar button,.import-btn{
  min-height:56px!important;
  width:100%!important;
  padding:12px 15px!important;
  border:1px solid var(--ut-grey-border)!important;
  border-radius:14px!important;
  background:#fff!important;
  color:#303945!important;
  font-size:12px!important;
  font-weight:800!important;
  letter-spacing:.05px;
  text-align:left!important;
  box-shadow:0 5px 12px rgba(10,25,47,.055)!important;
  transition:all .22s ease!important;
}
.sidebar button:hover,.import-btn:hover{
  background:#fff!important;
  color:var(--ut-navy-dark)!important;
  border-color:#cbd5e1!important;
  box-shadow:0 10px 20px rgba(10,25,47,.11)!important;
  transform:translateY(-2px);
}
.sidebar button.active{
  background:linear-gradient(135deg,var(--ut-navy-dark) 0%,var(--ut-navy-light) 100%)!important;
  color:#fff!important;
  border-color:var(--ut-navy-dark)!important;
  box-shadow:0 8px 18px rgba(10,25,47,.18),inset 0 1px 0 rgba(255,255,255,.10)!important;
  transform:translateY(-1px);
}
.sidebar .import-btn{display:flex!important;align-items:center!important;cursor:pointer!important}
.menu-panel-foot{
  position:absolute;
  left:24px;right:24px;bottom:18px;
  min-height:54px;
  padding:12px 2px 0;
  border-top:1px solid var(--ut-grey-border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  background:rgba(255,255,255,.94);
}
.menu-panel-foot>span{
  color:#8A6500;
  font-size:9px;
  font-weight:900;
  letter-spacing:1.7px;
}
.menu-panel-foot .btn{
  min-height:42px!important;
  padding:9px 16px!important;
  border-radius:12px!important;
}

/* Dashboard cards: distinct KPI identity strips */
.dashboard-kpis>.kpi{
  position:relative;
  overflow:hidden;
  min-height:146px;
  border-left-width:5px!important;
  border-left-style:solid!important;
}
.dashboard-kpis>.kpi:nth-child(1){border-left-color:#38A9E8!important}
.dashboard-kpis>.kpi:nth-child(2){border-left-color:var(--ut-yellow)!important}
.dashboard-kpis>.kpi:nth-child(3){border-left-color:var(--ut-red)!important}
.dashboard-kpis>.kpi:nth-child(4){border-left-color:var(--ut-charcoal)!important}
.dashboard-kpis>.kpi .value{color:#202B35!important}

/* Smooth single gradient across every table header */
.data-table{
  border-collapse:separate!important;
  border-spacing:0!important;
  overflow:hidden;
  border-radius:14px 14px 0 0!important;
}
.data-table thead{
  background:linear-gradient(90deg,#0F3F78 0%,#1E5A9C 48%,#3478BD 100%)!important;
}
.data-table thead tr{background:transparent!important}
.data-table th{
  background:transparent!important;
  color:#fff!important;
  border-bottom:0!important;
  text-shadow:0 1px 1px rgba(0,0,0,.12);
}
.data-table thead tr:first-child th:first-child{border-top-left-radius:14px!important}
.data-table thead tr:first-child th:last-child{border-top-right-radius:14px!important}
.data-table thead tr:first-child th{border-top:0!important}
.data-table tbody tr:last-child td{border-bottom:0!important}

/* Manual observation Apply alignment */
.manual-time-grid.manual-single{
  align-items:stretch!important;
  grid-template-columns:minmax(260px,1fr) minmax(140px,160px)!important;
}
.manual-time-grid.manual-single>#applyManualTime{
  align-self:stretch!important;
  height:100%!important;
  min-height:44px!important;
  margin:0!important;
}
#applyManualTime{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:11px!important;
}

/* Segment controls: clear Start vs End visual language */
#setStart{
  background:var(--ut-yellow)!important;
  color:var(--ut-navy-dark)!important;
  border-color:#E3B900!important;
  box-shadow:0 8px 18px rgba(255,209,0,.25)!important;
}
#setEnd{
  background:var(--ut-navy-dark)!important;
  color:#fff!important;
  border-color:var(--ut-navy-dark)!important;
  box-shadow:0 8px 18px rgba(10,25,47,.18)!important;
}
#setStart:hover{background:#F2C700!important}
#setEnd:hover{background:#172F4E!important}
.start-play-icon{
  width:0!important;height:0!important;
  border-top:7px solid transparent!important;
  border-bottom:7px solid transparent!important;
  border-left:12px solid currentColor!important;
}
.end-stop-icon{
  width:13px!important;height:13px!important;
  background:currentColor!important;
  border-radius:3px!important;
}

/* =========================================================
   Session restore screen
   ========================================================= */
body.auth-booting #loginScreen,
body.auth-booting #appShell{visibility:hidden!important}
body.auth-booting::before{content:none!important;display:none!important}
.session-loader{
  display:none;
}
body.auth-booting .session-loader{
  position:fixed;
  inset:0;
  z-index:9999;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 50% 42%,rgba(52,120,189,.20),transparent 34%),
    rgba(10,25,47,.88);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.session-loader-card{
  width:min(300px,82vw);
  min-height:235px;
  padding:30px 24px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.16);
  border-radius:22px;
  background:rgba(255,255,255,.08);
  box-shadow:0 24px 70px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.12);
}
.session-loader-logo{
  width:82px!important;
  height:82px!important;
  object-fit:contain!important;
  border-radius:50%;
  margin-bottom:18px;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.22));
}
.session-loader-title{
  color:#fff;
  font-size:16px;
  font-weight:800;
  letter-spacing:.35px;
  margin-bottom:17px;
}
.session-loader-dots{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  height:24px;
}
.session-loader-dots span{
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--ut-yellow);
  box-shadow:0 0 14px rgba(255,209,0,.38);
  animation:session-dot-bounce .8s ease-in-out infinite;
}
.session-loader-dots span:nth-child(1){animation-delay:0s}
.session-loader-dots span:nth-child(2){animation-delay:.16s}
.session-loader-dots span:nth-child(3){animation-delay:.32s}
@keyframes session-dot-bounce{
  0%,60%,100%{transform:translateY(0);opacity:.72}
  30%{transform:translateY(-9px);opacity:1}
}
@media(prefers-reduced-motion:reduce){
  .session-loader-dots span{animation:none!important;opacity:1!important}
  .sidebar,.sidebar-backdrop,.sidebar-toggle,.sidebar button,.card,.btn{transition:none!important}
}

/* Responsive command center */
@media(max-width:900px){
  .sidebar{
    width:min(760px,calc(100vw - 36px))!important;
    height:min(720px,calc(100vh - 44px))!important;
    max-height:calc(100vh - 44px)!important;
    padding:20px!important;
    border-radius:20px!important;
  }
  .sidebar nav{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .ut-header-actions{gap:9px}
  .ut-header-logo-2{width:min(34vw,280px)!important}
}
@media(max-width:560px){
  .ut-topbar{
    height:72px!important;min-height:72px!important;
    padding:8px 12px!important;
  }
  .page-heading h1{font-size:18px!important}
  .page-heading .eyebrow{font-size:7px!important}
  .ut-header-logo-2{width:112px!important}
  .ut-header-logo-2 img{max-height:32px!important}
  .sidebar-toggle{width:42px!important;height:42px!important;min-height:42px!important}
  .sidebar{
    width:calc(100vw - 20px)!important;
    height:calc(100vh - 24px)!important;
    max-height:calc(100vh - 24px)!important;
    padding:16px!important;
    border-radius:18px!important;
  }
  .menu-panel-head{padding-bottom:14px;margin-bottom:12px}
  .menu-panel-head h2{font-size:19px!important}
  .sidebar nav{grid-template-columns:1fr!important;gap:10px!important;height:calc(100% - 132px);padding:6px 4px 18px!important}
  .sidebar button,.import-btn{min-height:48px!important;padding:10px 12px!important}
  .nav-label{margin-top:8px!important}
  .menu-panel-foot{left:16px;right:16px;bottom:12px;min-height:48px}
  .menu-panel-foot .btn{min-height:38px!important}
  .dashboard-kpis>.kpi{min-height:118px}
  .manual-time-grid.manual-single{grid-template-columns:1fr!important}
  .manual-time-grid.manual-single>#applyManualTime{min-height:42px!important}
}

/* =========================================================
   V4.5.1 — Command Center precision cleanup
   ========================================================= */

/* Keep the command-center itself perfectly crisp: no blur/filter on the panel. */
.sidebar{
  background:#fff!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  will-change:auto!important;
  transform:translate(-50%,-50%)!important;
  transition:opacity .20s ease,visibility .20s ease!important;
}
.app-shell.sidebar-open .sidebar{
  transform:translate(-50%,-50%)!important;
}

/* The dimmed application behind the panel may blur; the menu stays HD. */
.sidebar-backdrop{
  background:rgba(10,25,47,.30)!important;
  backdrop-filter:blur(8px)!important;
  -webkit-backdrop-filter:blur(8px)!important;
}

/* Upper-left page title and every Command Center menu label are uppercase. */
.page-heading h1,
.sidebar nav button,
.sidebar nav .import-btn{
  text-transform:uppercase!important;
}

/* Prevent the generic .sidebar button width rule from stretching X and Logout. */
.menu-panel-head .menu-close{
  flex:0 0 40px!important;
  width:40px!important;
  min-width:40px!important;
  max-width:40px!important;
  height:40px!important;
  min-height:40px!important;
  padding:0!important;
  margin:0!important;
  border:1px solid #fecaca!important;
  border-radius:10px!important;
  background:#fff!important;
  color:#dc2626!important;
  font-size:22px!important;
  line-height:1!important;
  display:grid!important;
  place-items:center!important;
  text-align:center!important;
  box-shadow:0 4px 12px rgba(220,38,38,.10)!important;
}
.menu-panel-head .menu-close:hover{
  background:#fef2f2!important;
  border-color:#ef4444!important;
  color:#b91c1c!important;
  transform:none!important;
}

/* Small, correctly proportioned Exit button. */
.menu-panel-foot .btn,
.menu-panel-foot #menuLogout{
  flex:0 0 auto!important;
  width:auto!important;
  min-width:0!important;
  max-width:max-content!important;
  min-height:38px!important;
  height:38px!important;
  padding:8px 13px!important;
  border:1px solid #fecaca!important;
  border-radius:10px!important;
  background:#fff!important;
  color:#dc2626!important;
  font-size:11px!important;
  font-weight:800!important;
  white-space:nowrap!important;
  box-shadow:0 4px 12px rgba(220,38,38,.09)!important;
}
.menu-panel-foot .btn:hover,
.menu-panel-foot #menuLogout:hover{
  background:#fef2f2!important;
  border-color:#ef4444!important;
  color:#b91c1c!important;
  transform:translateY(-1px)!important;
}

/* Crisp menu cards; only the selected item uses the dark UT treatment. */
.sidebar nav button,
.sidebar nav .import-btn{
  transform:translateZ(0);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Desktop Command Center: preserve four-column layout and compact action controls. */
@media(min-width:901px){
  .menu-panel-head .menu-close{margin-left:auto!important}
}

/* Mobile/tablet action controls remain compact. */
@media(max-width:900px){
  .menu-panel-head .menu-close{
    width:40px!important;min-width:40px!important;max-width:40px!important;
    height:40px!important;min-height:40px!important;
  }
  .menu-panel-foot .btn,
  .menu-panel-foot #menuLogout{
    width:auto!important;min-width:0!important;max-width:max-content!important;
  }
}

/* Keep reduced-motion accessibility while retaining crisp rendering. */
@media(prefers-reduced-motion:reduce){
  .sidebar,.sidebar-backdrop,.sidebar-toggle,.sidebar button,.card,.btn{transition:none!important}
}


/* =========================================================
   V4.5.2 — Command Center action/footer cleanup
   ========================================================= */
/* Keep all Command Center content above its footer; TOOLS can never hide behind it. */
.sidebar{
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
}
.sidebar nav{
  flex:1 1 auto!important;
  min-height:0!important;
  height:auto!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  align-content:start!important;
  padding-bottom:16px!important;
}
.menu-panel-foot{
  position:static!important;
  left:auto!important;
  right:auto!important;
  bottom:auto!important;
  flex:0 0 auto!important;
  width:100%!important;
  min-height:54px!important;
  margin-top:10px!important;
  padding:12px 2px 0!important;
  background:#fff!important;
  z-index:3!important;
}
/* Red action shape — white icon/text, not red typography. */
.menu-panel-head .menu-close{
  background:#dc2626!important;
  border-color:#dc2626!important;
  color:#fff!important;
  box-shadow:0 6px 14px rgba(220,38,38,.18)!important;
}
.menu-panel-head .menu-close:hover{
  background:#b91c1c!important;
  border-color:#b91c1c!important;
  color:#fff!important;
}
.menu-panel-foot .btn,
.menu-panel-foot #menuLogout{
  background:#dc2626!important;
  border-color:#dc2626!important;
  color:#fff!important;
  box-shadow:0 6px 14px rgba(220,38,38,.16)!important;
}
.menu-panel-foot .btn:hover,
.menu-panel-foot #menuLogout:hover{
  background:#b91c1c!important;
  border-color:#b91c1c!important;
  color:#fff!important;
}

/* Remove the old bottom-footer logout control completely; motto stays clean. */
.ut-bottom-footer{
  grid-template-columns:1fr!important;
  grid-template-rows:auto 3px!important;
  min-height:74px!important;
  padding:16px 34px 12px!important;
}
.ut-footer-motto{
  grid-column:1!important;
  grid-row:1!important;
  justify-self:end!important;
  width:auto!important;
}
.ut-footer-line{
  grid-column:1!important;
  grid-row:2!important;
  height:3px!important;
  background:#FFD100!important;
}

/* Refresh/session screen: blue → white, minimal, no card box. */
body.auth-booting .session-loader{
  background:
    linear-gradient(135deg,#0A5BA8 0%,#2F80C9 34%,#EAF4FC 72%,#FFFFFF 100%)!important;
  backdrop-filter:blur(12px)!important;
  -webkit-backdrop-filter:blur(12px)!important;
}
.session-loader-card{
  width:auto!important;
  min-height:0!important;
  padding:22px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.session-loader-logo{
  width:86px!important;
  height:86px!important;
  margin-bottom:16px!important;
  filter:drop-shadow(0 8px 16px rgba(10,25,47,.18))!important;
}
.session-loader-title{
  color:#0A192F!important;
  font-size:17px!important;
  font-weight:800!important;
  letter-spacing:.25px!important;
}
.session-loader-dots span{
  background:#0A5BA8!important;
  box-shadow:0 0 12px rgba(10,91,168,.24)!important;
}

@media(max-width:560px){
  .ut-bottom-footer{grid-template-columns:1fr!important;grid-template-rows:auto 2px!important;padding:14px 16px 10px!important;min-height:62px!important}
  .ut-footer-motto{grid-column:1!important;grid-row:1!important;justify-self:end!important}
  .ut-footer-line{grid-column:1!important;grid-row:2!important;height:2px!important}
}


/* =========================================================
   V4.5.3 — Manual Apply + Minimal White Session Loader
   ========================================================= */
/* Manual Observation: compact Apply button, centered and consistent with controls. */
.manual-time-grid.manual-single{
  grid-template-columns:minmax(260px,1fr) 120px!important;
  align-items:center!important;
}
.manual-time-grid.manual-single>#applyManualTime{
  width:120px!important;
  min-width:120px!important;
  max-width:120px!important;
  height:42px!important;
  min-height:42px!important;
  padding:9px 12px!important;
  margin:0 auto!important;
  align-self:center!important;
  justify-self:center!important;
  border-radius:10px!important;
  box-shadow:0 4px 12px rgba(10,25,47,.08)!important;
}

/* Pure-white, minimal refresh/session screen. No title, no card, no blue background. */
body.auth-booting::before{display:none!important;content:none!important}
body.auth-booting .session-loader{
  position:fixed!important;
  inset:0!important;
  z-index:9999!important;
  display:grid!important;
  place-items:center!important;
  background:#fff!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.session-loader-card{
  width:auto!important;
  min-height:0!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.session-loader-orbit{
  position:relative!important;
  width:112px!important;
  height:112px!important;
  display:grid!important;
  place-items:center!important;
}
.session-loader-logo{
  position:absolute!important;
  z-index:2!important;
  width:78px!important;
  height:78px!important;
  margin:0!important;
  object-fit:contain!important;
  filter:drop-shadow(0 5px 12px rgba(10,25,47,.12))!important;
}
.session-loader-orbit-dots{
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  animation:sessionOrbit 1.7s linear infinite!important;
}
.session-loader-orbit-dots span{
  position:absolute!important;
  width:8px!important;
  height:8px!important;
  border-radius:50%!important;
  background:#FFD100!important;
  box-shadow:0 2px 8px rgba(212,175,55,.28)!important;
}
.session-loader-orbit-dots span:nth-child(1){top:5px!important;left:calc(50% - 4px)!important}
.session-loader-orbit-dots span:nth-child(2){right:10px!important;bottom:20px!important}
.session-loader-orbit-dots span:nth-child(3){left:10px!important;bottom:20px!important}
@keyframes sessionOrbit{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}
.session-loader-title,.session-loader-dots{display:none!important}
@media(max-width:760px){
  .manual-time-grid.manual-single{grid-template-columns:1fr!important}
  .manual-time-grid.manual-single>#applyManualTime{
    width:120px!important;
    min-width:120px!important;
    max-width:120px!important;
    margin:0 auto!important;
  }
}
@media(prefers-reduced-motion:reduce){
  .session-loader-orbit-dots{animation:none!important}
}

/* =========================================================
   V4.5.4 — Proportional UI & 6-Dot Loader Refinement
   Balanced dimensions, symmetric rhythm and centered controls.
   ========================================================= */

/* Global visual rhythm: avoid oversized cards while keeping comfortable breathing room. */
:root{
  --ui-card-radius:14px;
  --ui-card-pad:20px;
  --ui-grid-gap:16px;
  --ui-section-gap:22px;
}

.content{
  padding:26px 30px 34px!important;
  max-width:1440px!important;
}
.grid{gap:var(--ui-grid-gap)!important}
.section{margin-top:var(--ui-section-gap)!important}
.card,
.dashboard-filter,
.chart-card,
.classify-card,
.video-card,
.tskk-table-card,
.tskk-chart-card{
  border-radius:var(--ui-card-radius)!important;
}
.card{padding:var(--ui-card-pad)!important}
.dashboard-filter{padding:20px 22px!important}
.chart-card{padding:20px!important}
.classify-card,.video-card{padding:20px!important}

/* Dashboard: four KPI cards stay compact and visually balanced. */
.dashboard-kpis{gap:16px!important}
.dashboard-kpis>.kpi{
  min-height:132px!important;
  padding:20px!important;
  border-left-width:4px!important;
}
.kpi .label{font-size:10.5px!important}
.kpi .value{font-size:26px!important;line-height:1.15!important;margin-top:7px!important}
.kpi .sub{font-size:11.5px!important;line-height:1.4!important;margin-top:5px!important}

/* Dashboard filter: symmetric fields and a compact centered action. */
.dashboard-filter-controls{gap:16px!important}
.dashboard-filter-grid{gap:14px!important}
.dashboard-filter-actions{min-width:126px!important;align-items:center!important;justify-content:center!important}
.dashboard-filter-actions .btn{
  width:126px!important;
  min-width:126px!important;
  min-height:42px!important;
  height:42px!important;
  padding:9px 12px!important;
  margin:0 auto!important;
  border-radius:10px!important;
}

/* Forms: consistent field height and alignment. */
input,select,textarea{
  min-height:40px;
  padding:9px 10px!important;
  border-radius:9px!important;
}
textarea{min-height:84px}
.form-grid{gap:14px!important}
label{gap:6px!important}

/* Tables: proportional rows, centered numeric columns and consistent header height. */
.table-wrap{border-radius:10px!important}
.data-table{font-size:12.5px!important}
.data-table th,
.data-table td{
  padding:10px 12px!important;
  line-height:1.3!important;
  vertical-align:middle!important;
}
.data-table th{text-align:left!important}
.data-table td.num,
.data-table th.num,
.data-table td:nth-child(n+2):has(.tskk-readonly-number){text-align:center!important}
.data-table tbody tr{height:40px}

/* Command Center: more breathing room and symmetric menu cards. */
.sidebar{
  width:min(1160px,calc(100vw - 72px))!important;
  height:min(720px,calc(100vh - 72px))!important;
  padding:22px!important;
  border-radius:22px!important;
}
.menu-panel-head{padding-bottom:16px!important;margin-bottom:16px!important}
.menu-panel-head h2{font-size:21px!important}
.sidebar nav{gap:9px!important;padding-bottom:12px!important}
.sidebar nav button,
.sidebar nav .import-btn{
  min-height:52px!important;
  padding:11px 14px!important;
  border-radius:12px!important;
  display:flex!important;
  align-items:center!important;
}
.nav-label{margin:7px 4px 1px!important}
.menu-panel-foot{
  min-height:50px!important;
  margin-top:8px!important;
  padding:10px 2px 0!important;
}
.menu-panel-foot .btn,
.menu-panel-foot #menuLogout{
  min-height:36px!important;
  height:36px!important;
  padding:7px 12px!important;
  border-radius:9px!important;
}
.menu-panel-head .menu-close{
  width:38px!important;
  min-width:38px!important;
  max-width:38px!important;
  height:38px!important;
  min-height:38px!important;
  border-radius:9px!important;
  font-size:20px!important;
}

/* Manual Observation Apply: same visual weight as adjacent controls, centered. */
.manual-time-grid.manual-single{
  grid-template-columns:minmax(0,1fr) 116px!important;
  gap:14px!important;
  align-items:center!important;
}
.manual-time-grid.manual-single>#applyManualTime{
  width:116px!important;
  min-width:116px!important;
  max-width:116px!important;
  height:40px!important;
  min-height:40px!important;
  padding:8px 11px!important;
  margin:0 auto!important;
  justify-self:center!important;
  align-self:center!important;
  border-radius:9px!important;
  font-size:12px!important;
}

/* Six-dot UT loader orbit: evenly spaced around the circular logo. */
.session-loader-orbit{width:118px!important;height:118px!important}
.session-loader-logo{width:76px!important;height:76px!important}
.session-loader-orbit-dots{inset:0!important}
.session-loader-orbit-dots span{
  width:7px!important;
  height:7px!important;
  left:auto!important;
  right:auto!important;
  top:auto!important;
  bottom:auto!important;
  transform-origin:59px 59px!important;
}
.session-loader-orbit-dots span:nth-child(1){top:4px!important;left:calc(50% - 3.5px)!important}
.session-loader-orbit-dots span:nth-child(2){top:29px!important;right:11px!important}
.session-loader-orbit-dots span:nth-child(3){bottom:29px!important;right:11px!important}
.session-loader-orbit-dots span:nth-child(4){bottom:4px!important;left:calc(50% - 3.5px)!important}
.session-loader-orbit-dots span:nth-child(5){bottom:29px!important;left:11px!important}
.session-loader-orbit-dots span:nth-child(6){top:29px!important;left:11px!important}

/* Symmetric desktop/tablet spacing. */
@media(max-width:1200px){
  .content{padding:24px 26px 32px!important}
  .dashboard-kpis{gap:14px!important}
}
@media(max-width:900px){
  .content{padding:20px 20px 28px!important}
  .card{padding:18px!important}
  .dashboard-filter{padding:18px!important}
  .dashboard-kpis>.kpi{min-height:124px!important;padding:18px!important}
  .dashboard-filter-actions{width:100%!important;min-width:0!important}
  .dashboard-filter-actions .btn{width:126px!important;min-width:126px!important}
  .sidebar{width:min(92vw,760px)!important;height:min(720px,calc(100vh - 40px))!important;padding:20px!important}
}
@media(max-width:760px){
  .content{padding:16px 14px 24px!important}
  .grid{gap:14px!important}
  .section{margin-top:18px!important}
  .card,.dashboard-filter,.chart-card,.classify-card,.video-card{padding:16px!important;border-radius:12px!important}
  .dashboard-kpis{gap:12px!important}
  .dashboard-kpis>.kpi{min-height:116px!important;padding:16px!important}
  .kpi .value{font-size:24px!important}
  .data-table th,.data-table td{padding:9px 10px!important}
  .sidebar{width:min(94vw,420px)!important;height:calc(100vh - 28px)!important;padding:16px!important;border-radius:18px!important}
  .sidebar nav{grid-template-columns:1fr!important;gap:8px!important}
  .sidebar nav button,.sidebar nav .import-btn{min-height:46px!important}
  .menu-panel-foot{padding-top:9px!important}
  .manual-time-grid.manual-single{grid-template-columns:1fr!important}
  .manual-time-grid.manual-single>#applyManualTime{width:116px!important;min-width:116px!important;max-width:116px!important}
}
@media(prefers-reduced-motion:reduce){
  .session-loader-orbit-dots{animation:none!important}
}

/* =========================================================
   V4.5.5 — Final Alignment / Six-Dot / Rating Table Cleanup
   ========================================================= */
.ut-topbar{display:flex!important;align-items:center!important;gap:14px!important;}
.ut-header-logo-1{flex:0 0 52px!important;width:52px!important;height:52px!important;display:grid!important;place-items:center!important;margin:0!important;}
.ut-header-logo-1 img{display:block!important;width:48px!important;height:48px!important;object-fit:contain!important;}
.ut-header-logo-2 img{box-shadow:none!important;}

.manual-time-grid.manual-single{display:block!important;max-width:700px!important;}
.manual-time-grid.manual-single>label{display:block!important;min-width:0!important;}
.manual-time-grid.manual-single .time-input-row{grid-template-columns:minmax(0,1fr) 92px 116px!important;gap:8px!important;align-items:stretch!important;}
.manual-time-grid.manual-single .time-input-row input,
.manual-time-grid.manual-single .time-input-row select,
.manual-time-grid.manual-single .time-input-row #applyManualTime{height:42px!important;min-height:42px!important;box-sizing:border-box!important;}
.manual-time-grid.manual-single .time-input-row #applyManualTime{width:116px!important;min-width:116px!important;max-width:116px!important;margin:0!important;padding:8px 12px!important;justify-self:center!important;align-self:stretch!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;border-radius:9px!important;}

/* Rating Factor: continuous separators; the RF column has no broken blank cell. */
.rating-table-wrap{overflow-x:auto!important;overflow-y:hidden!important;}
.rating-table{border-collapse:separate!important;border-spacing:0!important;}
.rating-table tbody tr{background:#fff!important;}
.rating-table tbody td{border-bottom:1px solid #E2E8F0!important;border-top:0!important;vertical-align:middle!important;}
.rating-table tbody tr:last-child td{border-bottom:0!important;}
.rating-table td.rf-result{display:table-cell!important;width:118px!important;min-width:118px!important;padding-left:12px!important;padding-right:12px!important;text-align:center!important;vertical-align:middle!important;white-space:nowrap!important;color:#0A192F!important;font-weight:800!important;border-left:1px solid #E2E8F0!important;border-right:1px solid #E2E8F0!important;}
.rating-table th:nth-child(7),.rating-table td:nth-child(7){min-width:118px!important;width:118px!important;text-align:center!important;}
.rating-table th:nth-child(7){border-left:1px solid rgba(255,255,255,.10)!important;border-right:1px solid rgba(255,255,255,.10)!important;}

.ut-footer-motto img{width:min(28vw,300px)!important;min-width:0!important;max-width:300px!important;height:auto!important;max-height:42px!important;object-fit:contain!important;}

/* Exactly six evenly spaced dots around the UT logo. */
.session-loader-orbit{width:122px!important;height:122px!important;}
.session-loader-logo{width:76px!important;height:76px!important;z-index:2!important;}
.session-loader-orbit-dots{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;animation:sessionOrbit 1.65s linear infinite!important;}
.session-loader-orbit-dots span{position:absolute!important;top:50%!important;left:50%!important;width:8px!important;height:8px!important;margin:-4px!important;border-radius:50%!important;background:#FFD100!important;box-shadow:0 2px 8px rgba(212,175,55,.28)!important;}
.session-loader-orbit-dots span:nth-child(1){transform:rotate(0deg) translateY(-55px)!important;}
.session-loader-orbit-dots span:nth-child(2){transform:rotate(60deg) translateY(-55px)!important;}
.session-loader-orbit-dots span:nth-child(3){transform:rotate(120deg) translateY(-55px)!important;}
.session-loader-orbit-dots span:nth-child(4){transform:rotate(180deg) translateY(-55px)!important;}
.session-loader-orbit-dots span:nth-child(5){transform:rotate(240deg) translateY(-55px)!important;}
.session-loader-orbit-dots span:nth-child(6){transform:rotate(300deg) translateY(-55px)!important;}
@keyframes sessionOrbit{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

@media(max-width:760px){
 .ut-header-logo-1{flex-basis:42px!important;width:42px!important;height:42px!important}.ut-header-logo-1 img{width:40px!important;height:40px!important}
 .manual-time-grid.manual-single .time-input-row{grid-template-columns:minmax(0,1fr) 82px 110px!important}.manual-time-grid.manual-single .time-input-row #applyManualTime{width:110px!important;min-width:110px!important;max-width:110px!important}
 .ut-footer-motto img{width:min(42vw,230px)!important;max-height:38px!important}
}
@media(max-width:520px){
 .manual-time-grid.manual-single .time-input-row{grid-template-columns:minmax(0,1fr) 82px!important}.manual-time-grid.manual-single .time-input-row #applyManualTime{grid-column:1/-1!important;width:110px!important;min-width:110px!important;max-width:110px!important;justify-self:center!important}
}
@media(prefers-reduced-motion:reduce){.session-loader-orbit-dots{animation:none!important;}}


/* =========================================================
   V4.5.6 — Final Visual QA / Rating Grid / Header Branding
   ========================================================= */
.ut-header-logo-1{
  text-decoration:none!important;
  cursor:pointer!important;
}
.ut-header-logo-1:focus-visible{
  outline:2px solid #FFD100!important;
  outline-offset:3px!important;
  border-radius:8px!important;
}

/* Rating Factor: every column owns the same separator; no broken vertical gaps. */
.rating-table{
  width:100%!important;
  border-collapse:collapse!important;
  border-spacing:0!important;
  table-layout:auto!important;
}
.rating-table th,
.rating-table td{
  border-right:1px solid #E2E8F0!important;
  border-left:0!important;
  box-sizing:border-box!important;
}
.rating-table th:last-child,
.rating-table td:last-child{border-right:0!important;}
.rating-table th:nth-child(1),.rating-table td:nth-child(1){min-width:120px!important;}
.rating-table th:nth-child(2),.rating-table td:nth-child(2){min-width:180px!important;}
.rating-table th:nth-child(3),.rating-table td:nth-child(3),
.rating-table th:nth-child(4),.rating-table td:nth-child(4),
.rating-table th:nth-child(5),.rating-table td:nth-child(5),
.rating-table th:nth-child(6),.rating-table td:nth-child(6){min-width:94px!important;text-align:center!important;}
.rating-table th:nth-child(7),.rating-table td:nth-child(7){min-width:125px!important;width:125px!important;text-align:center!important;}
.rating-table th:nth-child(8),.rating-table td:nth-child(8){min-width:82px!important;text-align:center!important;}
.rating-table td.rf-result{
  width:125px!important;min-width:125px!important;
  border-left:0!important;border-right:1px solid #E2E8F0!important;
  text-align:center!important;
}
.rating-table tbody tr:last-child td{border-bottom:1px solid #E2E8F0!important;}
.rating-table tbody tr:last-child td:first-child{border-bottom-left-radius:0!important;}
.rating-table tbody tr:last-child td:last-child{border-bottom-right-radius:0!important;}

/* Six dots: fixed six-point orbit, no accidental gaps or overlapping transforms. */
.session-loader-orbit{width:132px!important;height:132px!important;position:relative!important;}
.session-loader-logo{width:78px!important;height:78px!important;position:absolute!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;}
.session-loader-orbit-dots{
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
  animation:sessionOrbit 1.7s linear infinite!important;
}
.session-loader-orbit-dots span{
  position:absolute!important;
  width:8px!important;height:8px!important;margin:0!important;
  left:auto!important;top:auto!important;right:auto!important;bottom:auto!important;
  transform:none!important;
  border-radius:50%!important;background:#FFD100!important;
}
.session-loader-orbit-dots span:nth-child(1){left:calc(50% - 4px)!important;top:2px!important;}
.session-loader-orbit-dots span:nth-child(2){right:12px!important;top:calc(25% - 2px)!important;}
.session-loader-orbit-dots span:nth-child(3){right:12px!important;bottom:calc(25% - 2px)!important;}
.session-loader-orbit-dots span:nth-child(4){left:calc(50% - 4px)!important;bottom:2px!important;}
.session-loader-orbit-dots span:nth-child(5){left:12px!important;bottom:calc(25% - 2px)!important;}
.session-loader-orbit-dots span:nth-child(6){left:12px!important;top:calc(25% - 2px)!important;}

/* Header/footer branding: restrained and visually balanced. */
.ut-header-logo-1 img{width:44px!important;height:44px!important;object-fit:contain!important;}
.ut-header-logo-2{width:min(25vw,300px)!important;padding-left:10px!important;}
.ut-header-logo-2 img{width:100%!important;max-width:300px!important;max-height:46px!important;object-fit:contain!important;}
.ut-footer-motto img{width:min(22vw,250px)!important;max-width:250px!important;min-width:0!important;max-height:38px!important;object-fit:contain!important;}
.menu-panel-foot{justify-content:flex-start!important;}

@media(max-width:760px){
  .ut-header-logo-1 img{width:38px!important;height:38px!important;}
  .ut-header-logo-2{width:min(30vw,190px)!important;}
  .ut-header-logo-2 img{max-height:36px!important;}
  .ut-footer-motto img{width:min(42vw,210px)!important;max-height:34px!important;}
}
@media(max-width:480px){
  .ut-header-logo-1{flex-basis:40px!important;width:40px!important;}
  .ut-header-logo-1 img{width:36px!important;height:36px!important;}
  .ut-header-logo-2{width:110px!important;}
  .ut-header-logo-2 img{max-height:30px!important;}
}
@media(prefers-reduced-motion:reduce){.session-loader-orbit-dots{animation:none!important;}}

/* =========================================================
   V4.5.7 — Visual QA: Rating Grid / True 6-Point Loader / Compact Header
   ========================================================= */

/* Rating Factor: match the other table columns — no special vertical cage
   around Rating Factor. Keep only the same horizontal row separators. */
.rating-table{
  border-collapse:collapse!important;
  border-spacing:0!important;
  table-layout:auto!important;
}
.rating-table th,
.rating-table td{
  border-left:0!important;
  border-right:0!important;
  border-top:0!important;
  box-sizing:border-box!important;
}
.rating-table tbody td{
  border-bottom:1px solid #E2E8F0!important;
}
.rating-table tbody tr:last-child td{
  border-bottom:0!important;
}
.rating-table td.rf-result{
  border-left:0!important;
  border-right:0!important;
  background:#fff!important;
  text-align:center!important;
}
.rating-table th:nth-child(7),
.rating-table td:nth-child(7){
  border-left:0!important;
  border-right:0!important;
}

/* Header: compact, balanced like the supplied reference. */
.ut-topbar{
  height:74px!important;
  min-height:74px!important;
  padding:7px 16px 7px 30px!important;
  gap:14px!important;
  border-bottom:2px solid var(--ut-yellow,#FFD100)!important;
}
.ut-header-logo-1{
  flex:0 0 48px!important;
  width:48px!important;
  height:48px!important;
}
.ut-header-logo-1 img{
  width:46px!important;
  height:46px!important;
}
.page-heading{
  min-width:0!important;
  line-height:1!important;
}
.page-heading .eyebrow{
  margin:0 0 3px!important;
  font-size:9px!important;
  line-height:1.1!important;
  letter-spacing:1.25px!important;
}
.page-heading h1{
  margin:0!important;
  font-size:23px!important;
  line-height:1.05!important;
  letter-spacing:.15px!important;
}
.ut-header-actions{
  margin-left:auto!important;
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
}
.ut-header-logo-2{
  width:min(25vw,260px)!important;
  padding-left:0!important;
}
.ut-header-logo-2 img{
  max-width:260px!important;
  max-height:40px!important;
}
.sidebar-toggle{
  width:46px!important;
  height:46px!important;
  border-radius:12px!important;
}

/* True mathematical six-point orbit. Every dot is anchored from the exact
   center at 60-degree intervals, so there can be no missing/random point. */
.session-loader-orbit{
  width:132px!important;
  height:132px!important;
  position:relative!important;
}
.session-loader-logo{
  width:78px!important;
  height:78px!important;
  left:50%!important;
  top:50%!important;
  transform:translate(-50%,-50%)!important;
  z-index:3!important;
}
.session-loader-orbit-dots{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  z-index:2!important;
  animation:sessionOrbit 1.7s linear infinite!important;
}
.session-loader-orbit-dots span{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  right:auto!important;
  bottom:auto!important;
  width:8px!important;
  height:8px!important;
  margin:-4px!important;
  border-radius:50%!important;
  background:#FFD100!important;
  box-shadow:0 2px 8px rgba(212,175,55,.28)!important;
  transform-origin:center!important;
}
.session-loader-orbit-dots span:nth-child(1){transform:rotate(0deg) translateY(-57px)!important;}
.session-loader-orbit-dots span:nth-child(2){transform:rotate(60deg) translateY(-57px)!important;}
.session-loader-orbit-dots span:nth-child(3){transform:rotate(120deg) translateY(-57px)!important;}
.session-loader-orbit-dots span:nth-child(4){transform:rotate(180deg) translateY(-57px)!important;}
.session-loader-orbit-dots span:nth-child(5){transform:rotate(240deg) translateY(-57px)!important;}
.session-loader-orbit-dots span:nth-child(6){transform:rotate(300deg) translateY(-57px)!important;}

@media(max-width:760px){
  .ut-topbar{
    height:66px!important;
    min-height:66px!important;
    padding:6px 12px 6px 14px!important;
    gap:9px!important;
  }
  .ut-header-logo-1{
    flex-basis:40px!important;
    width:40px!important;
    height:40px!important;
  }
  .ut-header-logo-1 img{width:38px!important;height:38px!important;}
  .page-heading .eyebrow{font-size:8px!important;letter-spacing:1px!important;}
  .page-heading h1{font-size:19px!important;}
  .ut-header-actions{gap:7px!important;}
  .ut-header-logo-2{width:min(30vw,180px)!important;}
  .ut-header-logo-2 img{max-height:31px!important;}
  .sidebar-toggle{width:40px!important;height:40px!important;border-radius:10px!important;}
}
@media(max-width:480px){
  .ut-topbar{padding-left:10px!important;padding-right:10px!important;}
  .ut-header-logo-2{width:105px!important;}
  .ut-header-logo-2 img{max-height:28px!important;}
  .page-heading .eyebrow{font-size:7.5px!important;}
  .page-heading h1{font-size:17px!important;}
}
@media(prefers-reduced-motion:reduce){
  .session-loader-orbit-dots{animation:none!important;}
}


/* V4.5.8 — Loader: 7-dot tight orbit around the round UT logo.
   Seven dots are mathematically spaced at 360/7 degrees and sit directly
   against the logo edge. The ring rotates as one unit; the logo stays still. */
.session-loader-orbit{
  width:112px!important;
  height:112px!important;
  position:relative!important;
  overflow:visible!important;
}
.session-loader-logo{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:78px!important;
  height:78px!important;
  margin:0!important;
  transform:translate(-50%,-50%)!important;
  z-index:3!important;
}
.session-loader-orbit-dots{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  z-index:4!important;
  animation:sessionOrbit 1.25s linear infinite!important;
  transform-origin:50% 50%!important;
}
.session-loader-orbit-dots span{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  right:auto!important;
  bottom:auto!important;
  width:8px!important;
  height:8px!important;
  margin:-4px!important;
  padding:0!important;
  border:0!important;
  border-radius:50%!important;
  background:#FFD100!important;
  box-shadow:0 1px 5px rgba(212,175,55,.24)!important;
  transform-origin:50% 50%!important;
}
.session-loader-orbit-dots span:nth-child(1){transform:rotate(0deg) translateY(-43px)!important;}
.session-loader-orbit-dots span:nth-child(2){transform:rotate(51.428571deg) translateY(-43px)!important;}
.session-loader-orbit-dots span:nth-child(3){transform:rotate(102.857143deg) translateY(-43px)!important;}
.session-loader-orbit-dots span:nth-child(4){transform:rotate(154.285714deg) translateY(-43px)!important;}
.session-loader-orbit-dots span:nth-child(5){transform:rotate(205.714286deg) translateY(-43px)!important;}
.session-loader-orbit-dots span:nth-child(6){transform:rotate(257.142857deg) translateY(-43px)!important;}
.session-loader-orbit-dots span:nth-child(7){transform:rotate(308.571429deg) translateY(-43px)!important;}
@media(prefers-reduced-motion:reduce){
  .session-loader-orbit-dots{animation:none!important;}
}


/* V4.5.9 — Loader: 4-dot true circular orbit around UT logo */
.session-loader-orbit{
  width:132px!important;
  height:132px!important;
  position:relative!important;
  display:block!important;
}
.session-loader-logo{
  width:78px!important;
  height:78px!important;
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  margin:0!important;
  transform:translate(-50%,-50%)!important;
  z-index:2!important;
}
.session-loader-orbit-dots{
  position:absolute!important;
  left:0!important;
  top:0!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  animation:sessionOrbit 1.35s linear infinite!important;
  transform-origin:50% 50%!important;
  z-index:3!important;
}
.session-loader-orbit-dots span{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  right:auto!important;
  bottom:auto!important;
  width:8px!important;
  height:8px!important;
  margin:-4px!important;
  padding:0!important;
  border:0!important;
  border-radius:50%!important;
  background:#FFD100!important;
  box-shadow:none!important;
  transform-origin:50% 50%!important;
}
.session-loader-orbit-dots span:nth-child(1){transform:rotate(0deg) translateY(-43px)!important;}
.session-loader-orbit-dots span:nth-child(2){transform:rotate(90deg) translateY(-43px)!important;}
.session-loader-orbit-dots span:nth-child(3){transform:rotate(180deg) translateY(-43px)!important;}
.session-loader-orbit-dots span:nth-child(4){transform:rotate(270deg) translateY(-43px)!important;}
@media (prefers-reduced-motion:reduce){
  .session-loader-orbit-dots{animation:none!important;}
}


/* V4.5.10 — Loader: true 4-dot orbit, SVG geometry
   One circular path, four equally spaced dots, logo fixed at center. */
.session-loader-orbit{
  width:132px!important;
  height:132px!important;
  position:relative!important;
  overflow:visible!important;
}
.session-loader-logo{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:78px!important;
  height:78px!important;
  margin:0!important;
  transform:translate(-50%,-50%)!important;
  z-index:2!important;
}
.session-loader-orbit-dots{
  position:absolute!important;
  inset:0!important;
  width:132px!important;
  height:132px!important;
  margin:0!important;
  padding:0!important;
  z-index:3!important;
  animation:sessionOrbitTrue 1.35s linear infinite!important;
  transform-origin:66px 66px!important;
}
.session-loader-orbit-svg{
  display:block!important;
  width:132px!important;
  height:132px!important;
  overflow:visible!important;
}
.session-loader-orbit-ring{
  transform-origin:66px 66px;
}
.session-loader-orbit-ring circle{
  fill:#FFD100!important;
  stroke:none!important;
}
@keyframes sessionOrbitTrue{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}
@media(prefers-reduced-motion:reduce){
  .session-loader-orbit-dots{animation:none!important;}
}

/* V4.5.11 — Restore Command Center logout only */
.menu-panel-foot{
  justify-content:space-between!important;
  align-items:center!important;
}
.menu-panel-foot .menu-logout{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  min-height:36px!important;
  height:36px!important;
  padding:7px 12px!important;
  border:0!important;
  border-radius:9px!important;
  background:#DC2626!important;
  color:#fff!important;
  font:800 12px/1 Inter,system-ui,sans-serif!important;
  cursor:pointer!important;
  box-shadow:0 5px 12px rgba(220,38,38,.18)!important;
}
.menu-panel-foot .menu-logout span{font-size:16px!important;line-height:1!important;}
.menu-panel-foot .menu-logout:hover{background:#B91C1C!important;transform:translateY(-1px);}
.menu-panel-foot .menu-logout:active{transform:translateY(0);}
@media(max-width:760px){
  .menu-panel-foot .menu-logout{min-height:36px!important;height:36px!important;padding:7px 11px!important;}
}

/* V4.5.12 — Clean White Authentication Layout */
.login-screen{
  background:#fff!important;
  color:#111827!important;
}
.login-panel{
  min-height:100vh!important;
  min-height:100dvh!important;
  padding:28px 18px!important;
  background:#fff!important;
}
.login-card{
  width:100%!important;
  max-width:430px!important;
  background:#fff!important;
  border:1px solid #E2E8F0!important;
  border-radius:18px!important;
  padding:34px 32px 28px!important;
  box-shadow:0 14px 40px rgba(15,23,42,.10)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.login-badge{
  width:116px!important;
  height:auto!important;
  max-height:116px!important;
  object-fit:contain!important;
  margin:0 auto 20px!important;
  border-radius:0!important;
  background:transparent!important;
}
.login-card h1{
  color:#0A192F!important;
  font-size:25px!important;
  line-height:1.2!important;
  margin:0!important;
  letter-spacing:-.2px!important;
  font-weight:800!important;
}
.auth-subtitle{
  color:#64748B!important;
  font-size:13px!important;
  line-height:1.5!important;
  margin:7px 0 22px!important;
}
.login-card form{gap:14px!important}
.login-card label{color:#334155!important}
.login-card input{
  background:#fff!important;
  border:1px solid #CBD5E1!important;
  color:#111827!important;
  border-radius:9px!important;
}
.login-card input::placeholder{color:#94A3B8!important}
.login-card input:focus{outline:2px solid rgba(255,209,0,.25)!important;border-color:#D4AF37!important}
.login-switch{
  background:#F8FAFC!important;
  border:1px solid #E2E8F0!important;
}
.login-link{color:#64748B!important}
.login-link.active{color:#0A192F!important}
.login-error{color:#B91C1C!important}
@media(max-width:600px){
  .login-panel{padding:20px 14px!important}
  .login-card{max-width:420px!important;padding:28px 20px 24px!important}
  .login-badge{width:96px!important;max-height:96px!important;margin-bottom:17px!important}
  .login-card h1{font-size:22px!important}
}

/* V4.5.14 — Login building background with dedicated right-side login space */
.login-screen{
  background-color:#fff!important;
  background-image:url('login-building-bg.webp')!important;
  background-repeat:no-repeat!important;
  background-size:cover!important;
  background-position:center center!important;
}
.login-panel{
  min-height:100vh!important;
  min-height:100dvh!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  padding:28px clamp(28px,7vw,110px) 28px 28px!important;
  background:transparent!important;
}
.login-card{
  width:min(430px,100%)!important;
  max-width:430px!important;
  margin:0!important;
  background:rgba(255,255,255,.96)!important;
  border:1px solid rgba(226,232,240,.95)!important;
  border-radius:18px!important;
  padding:34px 32px 28px!important;
  box-shadow:0 18px 50px rgba(15,23,42,.12)!important;
  backdrop-filter:blur(3px)!important;
  -webkit-backdrop-filter:blur(3px)!important;
}
.login-badge{
  width:112px!important;
  max-height:112px!important;
  margin:0 auto 18px!important;
}
.login-card h1{font-size:25px!important;line-height:1.2!important}
.auth-subtitle{margin:7px 0 22px!important}
@media(max-width:900px){
  .login-panel{padding-right:34px!important}
}
@media(max-width:700px){
  .login-screen{
    background-size:auto 100%!important;
    background-position:left center!important;
  }
  .login-panel{
    justify-content:center!important;
    padding:22px 14px!important;
    background:rgba(255,255,255,.10)!important;
  }
  .login-card{
    max-width:430px!important;
    padding:28px 20px 24px!important;
    background:rgba(255,255,255,.97)!important;
  }
  .login-badge{width:96px!important;max-height:96px!important;margin-bottom:17px!important}
  .login-card h1{font-size:22px!important}
}

/* V4.5.15 — Tighten authentication heading spacing */
.login-card h1{
  margin:0!important;
  line-height:1.15!important;
}
.auth-subtitle{
  margin:3px 0 16px!important;
  line-height:1.35!important;
}
@media(max-width:700px){
  .login-card h1{line-height:1.15!important}
  .auth-subtitle{margin:3px 0 15px!important;line-height:1.35!important}
}


/* V4.5.17 — Dashboard KPI vertical centering fix
   Keep the four KPI cards visually symmetrical: the label sits in the upper
   text zone, the value remains centered, and the supporting line occupies the
   lower text zone. This prevents cards such as WASTE TERBESAR (which can wrap)
   from making the top/bottom spacing look uneven. */
.dashboard-kpis{
  align-items:stretch!important;
}
.dashboard-kpis>.kpi{
  min-height:132px!important;
  height:100%!important;
  box-sizing:border-box!important;
  display:grid!important;
  grid-template-rows:minmax(0,1fr) auto minmax(0,1fr)!important;
  align-items:center!important;
  text-align:center!important;
  padding:18px 20px!important;
}
.dashboard-kpis>.kpi .label{
  align-self:end!important;
  margin:0!important;
  line-height:1.2!important;
}
.dashboard-kpis>.kpi .value{
  align-self:center!important;
  margin:5px 0!important;
  line-height:1.15!important;
  max-width:100%!important;
}
.dashboard-kpis>.kpi .sub{
  align-self:start!important;
  margin:0!important;
  line-height:1.35!important;
  max-width:100%!important;
}

@media(max-width:900px){
  .dashboard-kpis>.kpi{
    min-height:124px!important;
    padding:16px 14px!important;
  }
}

@media(max-width:700px){
  .dashboard-kpis>.kpi{
    min-height:112px!important;
    padding:14px 12px!important;
  }
  .dashboard-kpis>.kpi .label{font-size:9px!important;}
  .dashboard-kpis>.kpi .value{font-size:19px!important;margin:4px 0!important;}
  .dashboard-kpis>.kpi .sub{font-size:9px!important;line-height:1.3!important;}
}

/* =========================================================
   V4.5.18 — Native Mobile Layout / Touch & Safe-Area QA
   Mobile is intentionally re-laid out rather than scaled from desktop.
   ========================================================= */
@media (max-width:760px){
  html,body{width:100%;max-width:100%;overflow-x:hidden;overscroll-behavior-x:none;}
  body{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
  button,input,select,textarea{font-size:16px!important;}
  button,.btn,.sidebar button,.import-btn,.sidebar-toggle,.menu-close{-webkit-tap-highlight-color:transparent;touch-action:manipulation;}

  /* Header: compact mobile composition with a real side rail for the menu toggle. */
  .ut-topbar{
    min-height:64px!important;height:64px!important;
    padding:6px 10px!important;
    gap:8px!important;
    padding-top:max(6px,env(safe-area-inset-top))!important;
  }
  .ut-header-logo-1{flex:0 0 38px!important;width:38px!important;height:38px!important;}
  .ut-header-logo-1 img{width:36px!important;height:36px!important;}
  .page-heading{min-width:0!important;flex:1 1 auto!important;overflow:hidden!important;}
  .page-heading .eyebrow{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;font-size:7px!important;letter-spacing:.85px!important;}
  .page-heading h1{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;font-size:17px!important;line-height:1.08!important;}
  .ut-header-actions{flex:0 0 auto!important;gap:6px!important;}
  .ut-header-logo-2{width:92px!important;min-width:0!important;}
  .ut-header-logo-2 img{width:100%!important;max-width:92px!important;max-height:26px!important;}

  /* The hamburger never sits under the backdrop/panel. When open it moves into
     a dedicated right-side rail beside the Command Center panel. */
  .sidebar-toggle{
    position:relative!important;z-index:140!important;
    flex:0 0 40px!important;width:40px!important;min-width:40px!important;
    height:40px!important;min-height:40px!important;
    padding:0!important;margin:0!important;
    display:grid!important;place-items:center!important;
    border-radius:10px!important;
  }
  .sidebar-toggle span{display:block!important;width:20px!important;height:2.5px!important;margin:0!important;}
  .app-shell.sidebar-open .sidebar-toggle{
    position:fixed!important;
    z-index:140!important;
    right:10px!important;
    top:50%!important;
    left:auto!important;
    transform:translateY(-50%)!important;
    width:40px!important;height:40px!important;
    box-shadow:0 8px 20px rgba(10,25,47,.16)!important;
  }

  /* Mobile Command Center: left panel + dedicated right rail. */
  .sidebar{
    z-index:120!important;
    left:12px!important;
    right:58px!important;
    top:max(12px,env(safe-area-inset-top))!important;
    bottom:max(12px,env(safe-area-inset-bottom))!important;
    width:auto!important;
    height:auto!important;
    max-height:none!important;
    padding:14px!important;
    transform:none!important;
    border-radius:18px!important;
    overflow:hidden!important;
  }
  .app-shell.sidebar-open .sidebar{transform:none!important;}
  .sidebar-backdrop{z-index:110!important;}
  .menu-panel-head{gap:10px!important;padding:0 0 12px!important;margin-bottom:12px!important;}
  .menu-panel-head h2{font-size:18px!important;line-height:1.08!important;}
  .menu-eyebrow{font-size:8px!important;letter-spacing:1.5px!important;margin-bottom:3px!important;}
  .menu-panel-head .menu-close{
    flex:0 0 36px!important;width:36px!important;min-width:36px!important;
    height:36px!important;min-height:36px!important;border-radius:9px!important;
    font-size:21px!important;
  }
  .sidebar nav{
    height:calc(100% - 118px)!important;
    min-height:0!important;
    grid-template-columns:1fr!important;
    gap:7px!important;
    padding:0 1px 10px!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior:contain!important;
  }
  .sidebar nav button,.sidebar nav .import-btn{
    width:100%!important;min-width:0!important;max-width:none!important;
    min-height:44px!important;height:auto!important;
    padding:10px 12px!important;
    border-radius:11px!important;
    font-size:11px!important;
    line-height:1.2!important;
    text-align:left!important;
  }
  .nav-label{margin:7px 3px 0!important;padding:0!important;font-size:8px!important;letter-spacing:1.5px!important;}
  .menu-panel-foot{
    left:14px!important;right:14px!important;bottom:max(10px,env(safe-area-inset-bottom))!important;
    min-height:48px!important;padding:8px 0 0!important;
    gap:8px!important;
  }
  .menu-panel-foot>span{font-size:7.5px!important;letter-spacing:1.2px!important;}
  .menu-panel-foot .menu-logout{min-height:38px!important;padding:8px 11px!important;border-radius:10px!important;font-size:10px!important;}

  /* Mobile content gets its own rhythm; no desktop grid is simply shrunk. */
  .content{width:100%!important;max-width:none!important;padding:14px 12px 24px!important;}
  .grid,.workspace,.form-grid,.form-grid.four,.grid.cols-4,.grid.cols-3,.grid.cols-2{grid-template-columns:1fr!important;gap:12px!important;}
  .section{margin-top:14px!important;}
  .card,.dashboard-filter,.chart-card,.classify-card,.video-card{width:100%!important;max-width:none!important;padding:14px!important;border-radius:12px!important;}

  /* Manual Observation: input, unit and Apply are separate mobile rows so the
     Apply control can never escape the input container. */
  .manual-time-grid.manual-single{display:block!important;width:100%!important;max-width:none!important;}
  .manual-time-grid.manual-single>label{width:100%!important;display:block!important;}
  .manual-time-grid.manual-single .time-input-row{
    width:100%!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 82px!important;
    gap:8px!important;
    align-items:stretch!important;
  }
  .manual-time-grid.manual-single .time-input-row input,
  .manual-time-grid.manual-single .time-input-row select{
    width:100%!important;min-width:0!important;height:44px!important;min-height:44px!important;
    margin:0!important;box-sizing:border-box!important;
  }
  .manual-time-grid.manual-single .time-input-row #applyManualTime{
    grid-column:1/-1!important;
    justify-self:stretch!important;
    width:100%!important;min-width:0!important;max-width:none!important;
    height:44px!important;min-height:44px!important;
    margin:0!important;padding:9px 14px!important;
    box-sizing:border-box!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    line-height:1!important;position:static!important;
    transform:none!important;
  }
  .manual-time-grid.manual-single .input-help{display:block!important;margin-top:7px!important;line-height:1.4!important;}

  .time-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;margin:10px 0!important;}
  .timebox{min-height:62px!important;padding:9px!important;}
  .seg-controls{grid-template-columns:1fr 1fr!important;gap:8px!important;margin:10px 0!important;}
  .seg-controls .btn{min-height:44px!important;}
  .seg-controls .btn:last-child{grid-column:1/-1!important;}

  /* Prevent chart/table children from creating page-level horizontal overflow. */
  .chart-row,.chart-wrap,.chart-card,.dashboard-chart,.table-wrap,.rating-table-wrap{max-width:100%!important;}
  .table-wrap,.rating-table-wrap{overflow-x:auto!important;-webkit-overflow-scrolling:touch!important;}
  .chart-label{width:105px!important;min-width:105px!important;}
  .data-table{min-width:max-content!important;}
  .toolbar,.filters,.summary-bar{gap:8px!important;}
  .filters select,.filters input{max-width:none!important;width:100%!important;}

  .ut-bottom-footer{padding-bottom:max(12px,env(safe-area-inset-bottom))!important;}
  .ut-footer-motto img{max-width:210px!important;width:min(55vw,210px)!important;max-height:34px!important;}
}

@media (max-width:390px){
  .ut-header-logo-2{width:76px!important;}
  .ut-header-logo-2 img{max-width:76px!important;max-height:23px!important;}
  .page-heading h1{font-size:16px!important;}
  .sidebar{left:10px!important;right:56px!important;padding:12px!important;}
  .sidebar nav{gap:6px!important;}
  .sidebar nav button,.sidebar nav .import-btn{min-height:42px!important;padding:9px 10px!important;font-size:10.5px!important;}
  .menu-panel-foot{left:12px!important;right:12px!important;}
  .content{padding-left:10px!important;padding-right:10px!important;}
}

@media (min-width:761px){
  /* Keep all mobile-specific positioning completely isolated from desktop. */
  .app-shell.sidebar-open .sidebar-toggle{position:relative!important;transform:none!important;right:auto!important;top:auto!important;}
}

/* V4.5.19 — Dashboard KPI outer-row spacing, not content centering
   The previous KPI fix centered the contents inside each card. That is not the
   intended layout: KPI contents should return to the normal top text flow.
   The centering belongs to the spacing of the KPI row between surrounding
   dashboard sections, which is controlled by --dashboard-vertical-gap. */
.dashboard-content .dashboard-kpis,
.dashboard-content .dashboard-kpis > .kpi{
  align-items:stretch!important;
}
.dashboard-content .dashboard-kpis > .kpi{
  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-start!important;
  text-align:center!important;
  height:auto!important;
  min-height:132px!important;
  padding:20px!important;
}
.dashboard-content .dashboard-kpis > .kpi .label{
  align-self:auto!important;
  margin:0!important;
  line-height:1.2!important;
}
.dashboard-content .dashboard-kpis > .kpi .value{
  align-self:auto!important;
  margin:7px 0 0!important;
  line-height:1.15!important;
  max-width:100%!important;
}
.dashboard-content .dashboard-kpis > .kpi .sub{
  align-self:auto!important;
  margin:5px 0 0!important;
  line-height:1.4!important;
  max-width:100%!important;
}

/* Keep equal outer spacing above and below the KPI row. */
.dashboard-content{
  row-gap:var(--dashboard-vertical-gap)!important;
}
.dashboard-content > #dashResults{
  row-gap:var(--dashboard-vertical-gap)!important;
}
.dashboard-content #dashResults > .dashboard-kpis{
  margin:0!important;
}
.dashboard-content #dashResults > .section,
.dashboard-content #dashResults > .card.section{
  margin:0!important;
}

@media(max-width:900px){
  .dashboard-content .dashboard-kpis > .kpi{
    min-height:124px!important;
    padding:18px!important;
  }
}
@media(max-width:760px){
  .dashboard-content .dashboard-kpis > .kpi{
    min-height:116px!important;
    padding:16px!important;
  }
}
@media(max-width:480px){
  .dashboard-content .dashboard-kpis > .kpi{
    min-height:112px!important;
    padding:14px!important;
  }
}

/* V4.5.20 — KPI content left alignment
   Keep the KPI row/card spacing unchanged; only the content inside each card
   returns to the intended left-aligned visual hierarchy. */
.dashboard-content .dashboard-kpis > .kpi{
  align-items:flex-start!important;
  text-align:left!important;
}
.dashboard-content .dashboard-kpis > .kpi .label,
.dashboard-content .dashboard-kpis > .kpi .value,
.dashboard-content .dashboard-kpis > .kpi .sub{
  align-self:flex-start!important;
  text-align:left!important;
  width:100%!important;
}

@media(max-width:760px){
  .dashboard-content .dashboard-kpis > .kpi{
    align-items:flex-start!important;
    text-align:left!important;
  }
}

/* V4.5.21: KPI content block centered as a group, while its text remains left-aligned.
   This keeps the visual center of each card balanced without centering the text itself. */
.dashboard-kpis .kpi{
  align-items:center;
}
.dashboard-kpis .kpi .kpi-content{
  width:max-content;
  max-width:100%;
  margin-inline:auto;
  text-align:left;
}
.dashboard-kpis .kpi .label,
.dashboard-kpis .kpi .value,
.dashboard-kpis .kpi .sub{
  text-align:left;
}
@media(max-width:760px){
  .dashboard-kpis .kpi .kpi-content{
    width:max-content;
    max-width:100%;
  }
}

/* V4.5.22 — Dashboard KPI final alignment
   Horizontal: left aligned inside the card.
   Vertical: the content group is centered so top/bottom breathing room is balanced. */
.dashboard-kpis .kpi{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;
  text-align:left!important;
}
.dashboard-kpis .kpi .kpi-content{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  text-align:left!important;
}
.dashboard-kpis .kpi .label,
.dashboard-kpis .kpi .value,
.dashboard-kpis .kpi .sub{
  width:100%!important;
  text-align:left!important;
}
@media(max-width:760px){
  .dashboard-kpis .kpi{
    align-items:flex-start!important;
    justify-content:center!important;
  }
  .dashboard-kpis .kpi .kpi-content{
    width:100%!important;
    margin:0!important;
  }
}

/* V4.5.23 — KPI exact vertical rhythm
   The content group stays LEFT aligned, while the GROUP itself is mathematically
   centered inside the equal-height card so the top and bottom outer spacing match. */
.dashboard-content .dashboard-kpis > .kpi{
  box-sizing:border-box!important;
  height:132px!important;
  min-height:132px!important;
  padding:20px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:flex-start!important;
  text-align:left!important;
}
.dashboard-content .dashboard-kpis > .kpi .kpi-content{
  flex:0 0 auto!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  align-self:stretch!important;
  text-align:left!important;
}
.dashboard-content .dashboard-kpis > .kpi .label,
.dashboard-content .dashboard-kpis > .kpi .value,
.dashboard-content .dashboard-kpis > .kpi .sub{
  display:block!important;
  width:100%!important;
  margin-left:0!important;
  margin-right:0!important;
  text-align:left!important;
}
@media(max-width:760px){
  .dashboard-content .dashboard-kpis > .kpi{
    height:auto!important;
    min-height:116px!important;
    padding:18px!important;
    justify-content:center!important;
  }
}
@media(max-width:390px){
  .dashboard-content .dashboard-kpis > .kpi{
    min-height:112px!important;
    padding:16px!important;
  }
}


/* =========================================================
   V4.5.24 — Dedicated Mobile UI / Two-Column KPI + No-Crop QA
   Mobile is designed as its own composition, not a shrunken desktop.
   ========================================================= */
@media (max-width:760px){
  /* viewport-safe content */
  .app-shell, .main, .content, .dashboard-content{min-width:0!important;width:100%!important;}
  .content{padding:12px 12px calc(24px + env(safe-area-inset-bottom))!important;}

  /* Header: keep the taskbar control on the right-side safe rail. */
  .ut-topbar{position:relative!important;display:flex!important;align-items:center!important;padding-left:12px!important;padding-right:10px!important;}
  .ut-header-actions{margin-left:auto!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:8px!important;}
  .sidebar-toggle{position:relative!important;inset:auto!important;transform:none!important;z-index:160!important;flex:0 0 42px!important;width:42px!important;height:42px!important;min-width:42px!important;min-height:42px!important;}
  .app-shell.sidebar-open .sidebar-toggle{position:fixed!important;right:max(10px,env(safe-area-inset-right))!important;left:auto!important;top:50%!important;transform:translateY(-50%)!important;z-index:160!important;}

  /* Dashboard KPI: desktop 4-up becomes a deliberate 2 x 2 mobile grid. */
  .dashboard-content .dashboard-kpis,
  .dashboard-kpis{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;width:100%!important;margin:0!important;}
  .dashboard-content .dashboard-kpis > .kpi,
  .dashboard-kpis > .kpi{
    width:100%!important;min-width:0!important;height:118px!important;min-height:118px!important;
    box-sizing:border-box!important;padding:14px 13px!important;border-radius:12px!important;
    overflow:hidden!important;display:flex!important;justify-content:center!important;align-items:flex-start!important;
  }
  .dashboard-content .dashboard-kpis > .kpi .kpi-content,
  .dashboard-kpis > .kpi .kpi-content{width:100%!important;min-width:0!important;max-width:100%!important;margin:0!important;padding:0!important;}
  .dashboard-content .dashboard-kpis > .kpi .label,
  .dashboard-kpis > .kpi .label{font-size:9px!important;line-height:1.25!important;letter-spacing:1px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
  .dashboard-content .dashboard-kpis > .kpi .value,
  .dashboard-kpis > .kpi .value{font-size:clamp(18px,5.2vw,23px)!important;line-height:1.15!important;margin:5px 0 0!important;white-space:normal!important;overflow-wrap:anywhere!important;word-break:normal!important;}
  .dashboard-content .dashboard-kpis > .kpi .sub,
  .dashboard-kpis > .kpi .sub{font-size:9px!important;line-height:1.35!important;margin:5px 0 0!important;white-space:normal!important;overflow-wrap:anywhere!important;}

  /* Every generic card gets enough internal breathing room without creating crop. */
  .card,.dashboard-filter,.chart-card,.classify-card,.video-card,.section-card{box-sizing:border-box!important;overflow:visible!important;}
  .card h1,.card h2,.card h3,.dashboard-filter h1,.dashboard-filter h2,.dashboard-filter h3,
  .chart-card h1,.chart-card h2,.chart-card h3{max-width:100%!important;overflow-wrap:anywhere!important;word-break:normal!important;}
  .dashboard-filter .filters,.filters{display:grid!important;grid-template-columns:1fr!important;gap:10px!important;}
  .dashboard-filter .filters>*{min-width:0!important;width:100%!important;}
  select,input,textarea{max-width:100%!important;box-sizing:border-box!important;}

  /* Buttons are full-size touch targets and their text never escapes the shape. */
  .btn,.toolbar button,.import-btn,.menu-logout,.menu-close,#applyManualTime{box-sizing:border-box!important;min-height:44px!important;max-width:100%!important;white-space:normal!important;overflow-wrap:anywhere!important;line-height:1.2!important;}

  /* Tables scroll inside their own frame, never push the viewport sideways. */
  .table-wrap,.rating-table-wrap,.data-table-wrap{width:100%!important;max-width:100%!important;overflow-x:auto!important;overflow-y:hidden!important;-webkit-overflow-scrolling:touch!important;}
  .table-wrap table,.rating-table-wrap table,.data-table-wrap table{min-width:720px!important;}

  /* Charts: own container, no text clipping at the page edge. */
  .chart-row{display:grid!important;grid-template-columns:1fr!important;gap:12px!important;width:100%!important;}
  .chart-card,.chart-wrap,.dashboard-chart{min-width:0!important;width:100%!important;}
  .chart-card canvas,.chart-card svg,.chart-wrap canvas,.chart-wrap svg{max-width:100%!important;}
}

@media (max-width:480px){
  .ut-topbar{min-height:62px!important;height:62px!important;padding-left:10px!important;padding-right:8px!important;gap:6px!important;}
  .ut-header-logo-1{flex-basis:34px!important;width:34px!important;height:34px!important;}
  .ut-header-logo-1 img{width:32px!important;height:32px!important;}
  .ut-header-logo-2{width:78px!important;}
  .ut-header-logo-2 img{max-width:78px!important;max-height:24px!important;}
  .page-heading h1{font-size:15px!important;line-height:1.1!important;}
  .page-heading .eyebrow{font-size:6.5px!important;letter-spacing:.65px!important;}
  .sidebar-toggle{width:40px!important;min-width:40px!important;height:40px!important;min-height:40px!important;border-radius:10px!important;}
  .dashboard-content .dashboard-kpis,.dashboard-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;}
  .dashboard-content .dashboard-kpis > .kpi,.dashboard-kpis > .kpi{height:116px!important;min-height:116px!important;padding:13px 11px!important;}
  .dashboard-content .dashboard-kpis > .kpi .label,.dashboard-kpis > .kpi .label{font-size:8.5px!important;}
  .dashboard-content .dashboard-kpis > .kpi .value,.dashboard-kpis > .kpi .value{font-size:18px!important;}
  .dashboard-content .dashboard-kpis > .kpi .sub,.dashboard-kpis > .kpi .sub{font-size:8.5px!important;}
  .content{padding-left:10px!important;padding-right:10px!important;}
}

@media (max-width:360px){
  .ut-header-logo-2{width:68px!important;}
  .ut-header-logo-2 img{max-width:68px!important;max-height:22px!important;}
  .page-heading h1{font-size:14px!important;}
  .dashboard-content .dashboard-kpis > .kpi,.dashboard-kpis > .kpi{height:112px!important;min-height:112px!important;padding:12px 10px!important;}
  .dashboard-content .dashboard-kpis > .kpi .value,.dashboard-kpis > .kpi .value{font-size:17px!important;}
}

/* ============================================================================
   BUGFIX — Session loader orbit dots
   The 6 dots had accumulated two conflicting positioning systems from past
   redesigns (fixed corner offsets AND a rotate+translate transform at the
   same time), so the ring was lopsided/uneven instead of a clean circle.
   This is the single source of truth going forward — six dots, evenly
   spaced every 60deg, positioned purely via transform from dead-center.
   ============================================================================ */
.session-loader-orbit-dots span{
  position:absolute!important;
  top:50%!important;left:50%!important;right:auto!important;bottom:auto!important;
  width:8px!important;height:8px!important;margin:-4px!important;
  border-radius:50%!important;background:#FFD100!important;
  box-shadow:0 2px 8px rgba(212,175,55,.3)!important;
  transform-origin:center!important;
}
.session-loader-orbit-dots span:nth-child(1){transform:rotate(0deg) translateY(-52px)!important}
.session-loader-orbit-dots span:nth-child(2){transform:rotate(60deg) translateY(-52px)!important}
.session-loader-orbit-dots span:nth-child(3){transform:rotate(120deg) translateY(-52px)!important}
.session-loader-orbit-dots span:nth-child(4){transform:rotate(180deg) translateY(-52px)!important}
.session-loader-orbit-dots span:nth-child(5){transform:rotate(240deg) translateY(-52px)!important}
.session-loader-orbit-dots span:nth-child(6){transform:rotate(300deg) translateY(-52px)!important}
.session-loader-orbit-dots{
  position:absolute!important;inset:0!important;width:132px!important;height:132px!important;
  margin:0!important;padding:0!important;left:0!important;top:0!important;
  transform-origin:66px 66px!important;
  animation:sessionOrbitTrue 1.35s linear infinite!important;
}
@media(prefers-reduced-motion:reduce){
  .session-loader-orbit-dots{animation:none!important}
  .session-loader-orbit-dots span{opacity:.85}
}



/* ============================================================
   V4.5.30 — MOBILE UI NORMALIZATION / iOS + ANDROID
   Final override: consistent spacing, compact controls, adaptive
   2-column cards, no accidental full-width action buttons.
   ============================================================ */

:root{
  --mobile-page-pad: 12px;
  --mobile-gap: 10px;
  --mobile-card-pad: 13px;
  --mobile-radius: 12px;
  --mobile-control-h: 40px;
  --mobile-control-font: 14px;
}

/* Keep every mobile section on a predictable vertical rhythm. */
@media (max-width: 760px){
  .content,
  .dashboard-content{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
    padding:var(--mobile-page-pad)!important;
  }

  .dashboard-content{
    display:flex!important;
    flex-direction:column!important;
    gap:var(--mobile-gap)!important;
  }

  .dashboard-content > *{
    margin:0!important;
  }

  .dashboard-content > #dashResults{
    display:flex!important;
    flex-direction:column!important;
    gap:var(--mobile-gap)!important;
    min-width:0!important;
    width:100%!important;
  }

  .dashboard-content #dashResults > *{
    margin:0!important;
  }

  .dashboard-content .section{
    margin-top:0!important;
  }

  /* Generic grids: predictable gap, no uneven margins. */
  .grid,
  .form-grid,
  .dashboard-filter-grid,
  .chart-row{
    gap:var(--mobile-gap)!important;
  }

  /* Dashboard filter: compact 2-column layout on normal phones. */
  .dashboard-filter{
    width:100%!important;
    box-sizing:border-box!important;
    padding:var(--mobile-card-pad)!important;
    border-radius:var(--mobile-radius)!important;
    overflow:visible!important;
  }

  .dashboard-filter-controls{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:var(--mobile-gap)!important;
    width:100%!important;
    min-width:0!important;
  }

  .dashboard-filter-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:var(--mobile-gap)!important;
    width:100%!important;
    min-width:0!important;
  }

  .dashboard-filter-grid label{
    min-width:0!important;
  }

  .dashboard-filter-grid select{
    width:100%!important;
    min-width:0!important;
  }

  /* Reset stays compact and does not consume the full phone width. */
  .dashboard-filter-actions{
    display:flex!important;
    justify-content:flex-end!important;
    align-items:center!important;
    width:100%!important;
    margin-top:var(--mobile-gap)!important;
  }

  .dashboard-filter-actions .btn{
    width:auto!important;
    min-width:110px!important;
    max-width:160px!important;
    flex:0 0 auto!important;
  }

  /* All form controls + buttons use one visual size.
     16px inputs/selects avoid iOS auto-zoom; buttons match visually. */
  .dashboard-content select,
  .dashboard-content input,
  .dashboard-content textarea{
    min-height:var(--mobile-control-h)!important;
    height:var(--mobile-control-h)!important;
    box-sizing:border-box!important;
    padding:8px 10px!important;
    font-size:var(--mobile-control-font)!important;
    line-height:1.2!important;
    border-radius:9px!important;
  }

  .dashboard-content .btn,
  .dashboard-content button.btn{
    min-height:var(--mobile-control-h)!important;
    height:var(--mobile-control-h)!important;
    padding:8px 12px!important;
    font-size:var(--mobile-control-font)!important;
    line-height:1.15!important;
    border-radius:9px!important;
    white-space:nowrap!important;
    box-sizing:border-box!important;
  }

  /* Headers and filter labels are compact but readable. */
  .dashboard-filter .filter-title h3{
    font-size:14px!important;
    line-height:1.25!important;
    margin:0!important;
  }

  .dashboard-filter .filter-title .muted{
    font-size:10px!important;
    line-height:1.4!important;
    margin:4px 0 0!important;
  }

  .dashboard-filter-grid label{
    font-size:10px!important;
    line-height:1.2!important;
    gap:5px!important;
  }

  /* KPI = 2 columns, equal dimensions and equal gaps. */
  .dashboard-content .dashboard-kpis,
  .dashboard-kpis{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:var(--mobile-gap)!important;
    width:100%!important;
    margin:0!important;
  }

  .dashboard-content .dashboard-kpis > .kpi,
  .dashboard-kpis > .kpi{
    width:100%!important;
    min-width:0!important;
    min-height:118px!important;
    height:118px!important;
    box-sizing:border-box!important;
    padding:14px!important;
    border-radius:var(--mobile-radius)!important;
    margin:0!important;
    overflow:hidden!important;
    display:flex!important;
    align-items:flex-start!important;
    justify-content:center!important;
  }

  .dashboard-content .dashboard-kpis > .kpi .kpi-content,
  .dashboard-kpis > .kpi .kpi-content{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    margin:0!important;
    padding:0!important;
  }

  .dashboard-content .dashboard-kpis > .kpi .label,
  .dashboard-kpis > .kpi .label{
    display:block!important;
    width:100%!important;
    font-size:10px!important;
    line-height:1.2!important;
    letter-spacing:.7px!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    margin:0!important;
  }

  .dashboard-content .dashboard-kpis > .kpi .value,
  .dashboard-kpis > .kpi .value{
    display:block!important;
    width:100%!important;
    margin:6px 0 0!important;
    font-size:clamp(19px,5.3vw,24px)!important;
    line-height:1.15!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }

  .dashboard-content .dashboard-kpis > .kpi .sub,
  .dashboard-kpis > .kpi .sub{
    display:block!important;
    width:100%!important;
    margin:5px 0 0!important;
    font-size:9.5px!important;
    line-height:1.3!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }

  /* Card sizing and section rhythm. */
  .dashboard-content .card,
  .dashboard-content .chart-card,
  .dashboard-content .section-card{
    width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
    padding:var(--mobile-card-pad)!important;
    border-radius:var(--mobile-radius)!important;
    margin:0!important;
  }

  .dashboard-content .chart-row,
  .dashboard-content .grid.cols-2,
  .dashboard-content .grid.cols-3{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    width:100%!important;
    min-width:0!important;
    margin:0!important;
  }

  /* If there are 3 charts, let them wrap cleanly instead of producing
     one very tall single-column stack. */
  .dashboard-content .grid.cols-3{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  .dashboard-content .chart-card h3{
    font-size:12px!important;
    line-height:1.25!important;
    margin:0 0 8px!important;
  }

  .dashboard-content .chart-note,
  .dashboard-content .analysis-note{
    font-size:10px!important;
    line-height:1.4!important;
  }

  .dashboard-content .table-wrap{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior-x:contain!important;
  }

  .dashboard-content .data-table{
    width:max-content!important;
    min-width:100%!important;
    font-size:10px!important;
  }

  .dashboard-content .data-table th,
  .dashboard-content .data-table td{
    padding:7px 8px!important;
    line-height:1.25!important;
  }

  /* Action/toolbars: fit controls to phone width, wrap only when necessary. */
  .dashboard-content .toolbar,
  .dashboard-content .top-actions,
  .dashboard-content .tskk-actions,
  .dashboard-content .modal-actions,
  .dashboard-content .page-actions{
    display:flex!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    gap:8px!important;
    width:100%!important;
    min-width:0!important;
    margin:0!important;
  }

  .dashboard-content .toolbar .btn,
  .dashboard-content .top-actions .btn,
  .dashboard-content .tskk-actions .btn,
  .dashboard-content .modal-actions .btn,
  .dashboard-content .page-actions .btn{
    width:auto!important;
    max-width:100%!important;
    flex:0 1 auto!important;
  }

  /* Header actions are compact and stay on one line where possible. */
  .ut-header-actions{
    gap:6px!important;
    min-width:0!important;
  }

  .ut-topbar{
    box-sizing:border-box!important;
    width:100%!important;
    min-width:0!important;
    gap:8px!important;
  }

  .ut-header-logo-1{
    flex:0 0 auto!important;
  }

  .ut-header-logo-2{
    flex:0 0 auto!important;
    min-width:0!important;
  }

  .sidebar-toggle{
    flex:0 0 40px!important;
    width:40px!important;
    min-width:40px!important;
    height:40px!important;
    min-height:40px!important;
    padding:0!important;
  }
}

/* Small phones: keep the same rhythm; only collapse the filter to one column
   to prevent squeezed labels/selects. */
@media (max-width: 430px){
  :root{
    --mobile-page-pad:10px;
    --mobile-gap:8px;
    --mobile-card-pad:11px;
    --mobile-control-h:40px;
    --mobile-control-font:14px;
  }

  .dashboard-filter-grid{
    grid-template-columns:1fr!important;
  }

  .dashboard-filter-controls{
    grid-template-columns:1fr!important;
  }

  .dashboard-content .grid.cols-2,
  .dashboard-content .grid.cols-3,
  .dashboard-content .chart-row{
    grid-template-columns:1fr!important;
  }

  .dashboard-content .dashboard-kpis,
  .dashboard-kpis{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }

  .dashboard-content .dashboard-kpis > .kpi,
  .dashboard-kpis > .kpi{
    height:112px!important;
    min-height:112px!important;
    padding:12px!important;
  }

  .dashboard-content .dashboard-kpis > .kpi .label,
  .dashboard-kpis > .kpi .label{
    font-size:9px!important;
  }

  .dashboard-content .dashboard-kpis > .kpi .value,
  .dashboard-kpis > .kpi .value{
    font-size:18px!important;
  }

  .dashboard-content .dashboard-kpis > .kpi .sub,
  .dashboard-kpis > .kpi .sub{
    font-size:9px!important;
  }

  .dashboard-filter-actions{
    justify-content:stretch!important;
  }

  .dashboard-filter-actions .btn{
    width:100%!important;
    max-width:none!important;
  }
}

/* Very narrow phones: protect text without shrinking controls into unreadable sizes. */
@media (max-width: 360px){
  .dashboard-content .dashboard-kpis > .kpi,
  .dashboard-kpis > .kpi{
    height:108px!important;
    min-height:108px!important;
    padding:10px!important;
  }

  .dashboard-content .dashboard-kpis > .kpi .value,
  .dashboard-kpis > .kpi .value{
    font-size:17px!important;
  }

  .dashboard-content .dashboard-filter .filter-title h3{
    font-size:13px!important;
  }
}

/* =========================================================
   V4.5.31 — MOBILE GLOBAL CONTROLS / MANUAL OBSERVATION / COMMAND CENTER
   Applies the mobile normalization to ALL dropdowns, not Dashboard only.
   ========================================================= */
@media (max-width:760px){
  /* Global mobile form controls: Observation, Data Waktu, Master, TSKK,
     Quality, Uniformity, Sufficiency, Rating, Standard Time, Waste, etc. */
  .content select,
  .content input,
  .content textarea,
  .card select,
  .card input,
  .card textarea,
  .form-grid select,
  .form-grid input,
  .form-grid textarea,
  .filters select,
  .filters input,
  .toolbar select,
  .toolbar input,
  .summary-bar select,
  .summary-bar input{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
    min-height:44px!important;
    height:44px!important;
    padding:8px 11px!important;
    font-size:16px!important;
    line-height:1.2!important;
    border-radius:9px!important;
  }

  /* Keep select text vertically centered and prevent browser-specific clipping. */
  .content select,
  .card select,
  .form-grid select,
  .filters select,
  .toolbar select{
    line-height:normal!important;
    padding-top:0!important;
    padding-bottom:0!important;
  }

  /* Labels containing controls get a consistent rhythm. */
  .content label,
  .card label,
  .form-grid label,
  .filters label,
  .toolbar label{
    min-width:0!important;
    line-height:1.25!important;
    gap:6px!important;
  }

  /* Buttons follow the same mobile scale as the dropdowns without taking the
     entire screen unless the layout explicitly needs a full-width action. */
  .content .btn,
  .content button.btn,
  .content .top-actions button,
  .content .toolbar button,
  .content .page-actions button{
    min-height:44px!important;
    height:44px!important;
    min-width:0!important;
    max-width:100%!important;
    box-sizing:border-box!important;
    padding:8px 13px!important;
    font-size:14px!important;
    line-height:1.15!important;
    border-radius:9px!important;
  }

  /* Manual observation card: give the title, input and helper text real
     breathing room so they do not hug the card border on phones. */
  #manualObservationPanel.manual-time{
    margin-top:12px!important;
    padding:16px!important;
    box-sizing:border-box!important;
    width:100%!important;
    max-width:100%!important;
    overflow:hidden!important;
  }

  #manualObservationPanel .manual-time-head{
    display:block!important;
    margin:0 0 12px!important;
    padding:0!important;
  }

  #manualObservationPanel .manual-time-head b{
    display:block!important;
    margin:0!important;
    font-size:13px!important;
    line-height:1.3!important;
  }

  #manualObservationPanel .manual-time-head span{
    display:block!important;
    margin:5px 0 0!important;
    font-size:11px!important;
    line-height:1.45!important;
  }

  #manualObservationPanel .manual-time-grid.manual-single{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
  }

  #manualObservationPanel .manual-time-grid.manual-single>label{
    display:block!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
    line-height:1.3!important;
  }

  #manualObservationPanel .manual-time-grid.manual-single .time-input-row{
    width:100%!important;
    margin-top:7px!important;
    gap:8px!important;
    box-sizing:border-box!important;
  }

  #manualObservationPanel .manual-time-grid.manual-single .time-input-row input,
  #manualObservationPanel .manual-time-grid.manual-single .time-input-row select{
    height:44px!important;
    min-height:44px!important;
    font-size:16px!important;
    margin:0!important;
  }

  #manualObservationPanel .manual-time-grid.manual-single .input-help{
    display:block!important;
    margin:9px 2px 0!important;
    padding:0!important;
    font-size:10.5px!important;
    line-height:1.45!important;
    color:#7b8491!important;
  }

  /* Command Center: make the panel visually centered instead of heavily
     weighted to the left. The close/hamburger rail remains usable. */
  .app-shell.sidebar-open .sidebar{
    left:14px!important;
    right:14px!important;
    width:auto!important;
    max-width:none!important;
    box-sizing:border-box!important;
  }

  .app-shell.sidebar-open .sidebar-toggle{
    position:fixed!important;
    top:max(18px,calc(env(safe-area-inset-top) + 8px))!important;
    right:20px!important;
    left:auto!important;
    transform:none!important;
    width:40px!important;
    min-width:40px!important;
    height:40px!important;
    min-height:40px!important;
    z-index:145!important;
  }

  .app-shell.sidebar-open .sidebar{
    padding-right:14px!important;
  }

  /* Keep menu content away from the edge on very narrow devices. */
  .app-shell.sidebar-open .sidebar nav,
  .app-shell.sidebar-open .menu-panel-head,
  .app-shell.sidebar-open .menu-panel-foot{
    min-width:0!important;
  }
}

@media (max-width:430px){
  .content select,
  .content input,
  .content textarea,
  .card select,
  .card input,
  .card textarea,
  .form-grid select,
  .form-grid input,
  .form-grid textarea,
  .filters select,
  .filters input{
    min-height:42px!important;
    height:42px!important;
    font-size:16px!important;
  }

  #manualObservationPanel.manual-time{
    padding:14px!important;
  }

  #manualObservationPanel .manual-time-grid.manual-single .input-help{
    font-size:10px!important;
  }

  .app-shell.sidebar-open .sidebar{
    left:10px!important;
    right:10px!important;
    padding:12px!important;
  }

  .app-shell.sidebar-open .sidebar-toggle{
    top:max(14px,calc(env(safe-area-inset-top) + 6px))!important;
    right:16px!important;
  }
}

/* =========================================================
   V4.5.32 — MOBILE ACTION BUTTON TEXT / TSKK FIX
   Keep action labels on one line. Buttons may move to another row,
   but the text inside the button must never wrap.
   ========================================================= */
@media (max-width:760px){
  /* Global action buttons: preserve label integrity on phones. */
  .content .btn,
  .card .btn,
  .modal .btn,
  .toolbar .btn,
  .page-actions .btn,
  button.btn{
    white-space:nowrap!important;
    word-break:keep-all!important;
    overflow-wrap:normal!important;
    text-align:center!important;
    line-height:1!important;
  }

  /* Do not let flex layouts squeeze buttons until their labels wrap. */
  .tskk-actions{
    display:flex!important;
    width:100%!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:8px!important;
  }
  .tskk-actions .btn{
    flex:0 0 auto!important;
    width:auto!important;
    min-width:max-content!important;
    max-width:none!important;
    padding-left:11px!important;
    padding-right:11px!important;
  }

  /* Observation/Data/Master/User table actions stay compact and single-line. */
  .table-wrap td:last-child,
  .data-table td:last-child{
    white-space:nowrap!important;
  }
  .table-wrap td:last-child .btn,
  .data-table td:last-child .btn,
  .user-management-table .btn,
  .editObs,
  .del,
  .editMaster,
  .delMaster,
  .tskk-open,
  .tskk-delete,
  .tskk-create-from-session{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:auto!important;
    min-width:max-content!important;
    max-width:none!important;
    min-height:40px!important;
    height:40px!important;
    padding:7px 11px!important;
    font-size:13px!important;
    white-space:nowrap!important;
    flex:0 0 auto!important;
  }

  /* Header/editor actions: allow buttons to fall to the next line,
     never split their text. */
  .section-head .tskk-actions{
    margin-top:10px!important;
  }

  /* Master modal actions: no squeezed equal-width buttons on small screens. */
  .modal-actions{
    display:flex!important;
    flex-wrap:wrap!important;
    justify-content:flex-end!important;
    gap:8px!important;
  }
  .modal-actions .btn{
    flex:0 0 auto!important;
    width:auto!important;
    min-width:max-content!important;
  }
}

@media (max-width:430px){
  /* Keep TSKK action row readable; buttons can stack, labels cannot. */
  .tskk-actions .btn{
    min-height:42px!important;
    height:42px!important;
    padding-left:10px!important;
    padding-right:10px!important;
    font-size:13px!important;
  }

  /* Table action buttons remain tappable but do not consume the full viewport. */
  .table-wrap td:last-child .btn,
  .data-table td:last-child .btn,
  .user-management-table .btn,
  .editObs,
  .del,
  .editMaster,
  .delMaster,
  .tskk-open,
  .tskk-delete,
  .tskk-create-from-session{
    min-height:40px!important;
    height:40px!important;
    padding-left:10px!important;
    padding-right:10px!important;
    font-size:12.5px!important;
  }
}

/* =========================================================
   V4.5.33 — UI/UX FULL RESPONSIVE AUDIT
   Global consistency pass for desktop + mobile.
   Scope: layout, spacing, controls, buttons, tables, cards,
   overlays, navigation and touch ergonomics. No calculation logic.
   ========================================================= */

:root{
  --ui-content-max:1500px;
  --ui-page-pad:clamp(16px,2.4vw,34px);
  --ui-card-pad:clamp(18px,1.7vw,24px);
  --ui-gap:clamp(12px,1.4vw,20px);
  --ui-radius:12px;
  --ui-control-h:42px;
  --ui-touch-min:44px;
}

/* ---------- Global layout rhythm ---------- */
.content{
  width:100%;
  max-width:var(--ui-content-max);
  margin-inline:auto;
  padding:clamp(22px,2.2vw,34px) var(--ui-page-pad) 40px;
}
.content > *{min-width:0}
.card,
.dashboard-filter,
.chart-card,
.classify-card,
.video-card,
.section-card,
.tskk-header-card,
.tskk-table-card,
.tskk-chart-card{
  min-width:0;
  border-radius:var(--ui-radius);
}
.grid,
.form-grid,
.workspace,
.dashboard-content #dashResults,
.dashboard-content .dashboard-kpis{
  min-width:0;
}

/* ---------- One button language everywhere ---------- */
button,
.btn,
.import-btn,
.video-skip,
.method-choice,
.login-link{
  box-sizing:border-box;
  font-family:inherit;
}
.btn,
.video-skip,
.method-choice{
  min-height:var(--ui-control-h);
}
.btn,
button.btn,
.video-skip{
  white-space:nowrap;
  word-break:keep-all;
  overflow-wrap:normal;
  line-height:1.15;
}
.btn:not(.full){
  width:auto;
  max-width:100%;
}

/* Action clusters must wrap as a group, never wrap button labels. */
.toolbar,
.top-actions,
.section-head > div:last-child,
.section-head .tskk-actions,
.tskk-actions,
.modal-actions,
.page-actions,
.seg-controls,
.dashboard-filter-actions,
.video-tools,
.observation-save-action{
  min-width:0;
}
.toolbar,
.top-actions,
.modal-actions,
.page-actions,
.seg-controls,
.tskk-actions{
  flex-wrap:wrap;
}

/* ---------- Form controls: predictable dimensions ---------- */
input,select,textarea{
  box-sizing:border-box;
  min-width:0;
  max-width:100%;
}
select,
input[type="date"],
input[type="number"],
input[type="text"],
input[type="email"],
input[type="password"]{
  min-height:var(--ui-control-h);
}

/* Keep utility/table controls compact on desktop. */
.data-table select,
.data-table input,
.data-table .btn{
  width:auto;
  min-width:0;
}
.data-table select{
  min-height:38px;
  height:38px;
  padding:6px 9px;
  font-size:12px;
}

/* ---------- Headers / section heads ---------- */
.section-head,
.video-card-head,
.filter-title{
  min-width:0;
}
.section-head > div:first-child,
.video-card-head > *,
.filter-title > *{
  min-width:0;
}
.section-head h2,
.section-head h3,
.video-card-head h2,
.video-card-head h3,
.filter-title h2,
.filter-title h3{
  overflow-wrap:anywhere;
}

/* ---------- Tables: horizontal scroll is intentional, not accidental ---------- */
.table-wrap{
  width:100%;
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
.data-table{
  width:max-content;
  min-width:100%;
}
.data-table th,
.data-table td{
  vertical-align:middle;
}
.data-table td:last-child{
  white-space:nowrap;
}

/* ---------- Dashboard controls ---------- */
.dashboard-filter-grid label,
.dashboard-filter-grid select{
  min-width:0;
}
.dashboard-filter-actions .btn{
  flex:0 0 auto;
}

/* ---------- Observation video area ---------- */
.video-stage,
.video-wrap,
.seek-panel,
.video-tools{
  min-width:0;
}
.video-tools .video-skip{
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ---------- Modal ergonomics ---------- */
.modal-backdrop{
  overscroll-behavior:contain;
}
.modal{
  box-sizing:border-box;
  width:min(760px,calc(100vw - 32px));
  min-width:0;
}
.modal-actions .btn{
  flex:0 0 auto;
}

/* =========================================================
   MOBILE — 761px and below
   ========================================================= */
@media(max-width:760px){
  :root{
    --ui-page-pad:14px;
    --ui-card-pad:14px;
    --ui-gap:10px;
    --ui-control-h:42px;
  }

  body{
    overflow-x:hidden;
    -webkit-text-size-adjust:100%;
  }
  .main,
  #app,
  .content,
  .dashboard-content{
    width:100%;
    min-width:0;
    max-width:none;
  }
  .content{
    padding:16px var(--ui-page-pad) 24px;
  }

  /* Mobile card spacing: same outer/inner rhythm across every view. */
  .card,
  .dashboard-filter,
  .chart-card,
  .classify-card,
  .video-card,
  .section-card,
  .tskk-header-card,
  .tskk-table-card,
  .tskk-chart-card{
    padding:var(--ui-card-pad);
    margin-inline:0;
  }

  .section{margin-top:var(--ui-gap)}
  .grid{gap:var(--ui-gap)}
  .form-grid{gap:var(--ui-gap)}
  .section-head{gap:12px}
  .section-head > div:last-child{margin-top:0}

  /* ALL app dropdowns / inputs, not dashboard-only. */
  .content select,
  .content input,
  .content textarea,
  .card select,
  .card input,
  .card textarea,
  .form-grid select,
  .form-grid input,
  .form-grid textarea,
  .filters select,
  .filters input,
  .filters textarea,
  .toolbar select,
  .toolbar input,
  .toolbar textarea,
  .summary-bar select,
  .summary-bar input,
  .summary-bar textarea,
  .tskk-meta-grid select,
  .tskk-meta-grid input,
  .tskk-meta-grid textarea{
    width:100%;
    max-width:100%;
    min-width:0;
    min-height:42px;
    height:42px;
    box-sizing:border-box;
    font-size:15px;
    line-height:1.2;
  }

  textarea{
    min-height:92px!important;
    height:auto!important;
    line-height:1.45!important;
  }

  select{
    padding-top:0!important;
    padding-bottom:0!important;
  }

  /* Table selects are the exception: keep them compact instead of making
     every row 44px wide/tall and creating unnecessary table growth. */
  .data-table select,
  .data-table input{
    min-height:38px!important;
    height:38px!important;
    width:auto!important;
    font-size:14px!important;
    padding:6px 9px!important;
  }

  /* Buttons: compact, tappable, single-line labels. */
  .content .btn,
  .card .btn,
  .modal .btn,
  .toolbar .btn,
  .page-actions .btn,
  .section-head .btn,
  .video-tools .video-skip,
  button.btn{
    min-height:42px;
    height:42px;
    width:auto;
    max-width:100%;
    padding:8px 13px;
    font-size:14px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    flex:0 0 auto;
  }
  .btn.full,
  .observation-save-action .btn.full{
    width:100%;
  }

  /* Action rows: wrap buttons, not their text. */
  .tskk-actions,
  .modal-actions,
  .toolbar,
  .page-actions,
  .seg-controls{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
  }

  .tskk-actions .btn,
  .modal-actions .btn,
  .toolbar .btn,
  .page-actions .btn,
  .seg-controls .btn{
    flex:0 0 auto;
    min-width:max-content;
  }

  /* When a control group gets too wide, distribute at 2-up instead of
     creating giant full-width controls. */
  .seg-controls .btn{
    flex:1 1 calc(50% - 8px);
  }
  .seg-controls .btn:last-child{
    flex:0 0 auto;
  }

  /* Manual observation: keep all content inside the card with clear inset. */
  #manualObservationPanel.manual-time{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    margin:12px 0 0!important;
    padding:15px!important;
    overflow:visible!important;
  }
  #manualObservationPanel .manual-time-head{
    margin:0 0 12px!important;
    padding:0!important;
    display:block!important;
  }
  #manualObservationPanel .manual-time-head b{
    display:block;
    font-size:13px;
    line-height:1.35;
  }
  #manualObservationPanel .manual-time-head span{
    display:block;
    margin-top:5px;
    font-size:11px;
    line-height:1.45;
  }
  #manualObservationPanel .manual-time-grid.manual-single{
    display:block!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
  }
  #manualObservationPanel .manual-time-grid.manual-single>label{
    width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
  }
  #manualObservationPanel .manual-time-grid.manual-single .time-input-row{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 76px!important;
    gap:8px!important;
    width:100%!important;
    margin-top:7px!important;
  }
  #manualObservationPanel .manual-time-grid.manual-single .time-input-row input,
  #manualObservationPanel .manual-time-grid.manual-single .time-input-row select{
    min-width:0!important;
    width:100%!important;
    height:44px!important;
    min-height:44px!important;
  }
  #manualObservationPanel .manual-time-grid.manual-single #applyManualTime{
    grid-column:1/-1!important;
    width:auto!important;
    min-width:108px!important;
    max-width:130px!important;
    justify-self:start!important;
    margin:0!important;
  }
  #manualObservationPanel .manual-time-grid.manual-single .input-help,
  #manualObservationPanel .input-help{
    display:block!important;
    width:100%!important;
    margin:9px 2px 0!important;
    padding:0!important;
    font-size:10.5px!important;
    line-height:1.45!important;
  }

  /* TSKK editor meta form stays readable instead of producing tiny fields. */
  .tskk-meta-grid{
    grid-template-columns:1fr 1fr;
  }
  .tskk-meta-grid .full{
    grid-column:1/-1;
  }
  .tskk-meta-grid .time-input-row{
    display:grid;
    grid-template-columns:minmax(0,1fr) 82px;
    gap:8px;
  }

  /* Observation method switch: same touch height as the rest of the app. */
  .observation-method-switch{
    min-height:50px;
  }
  .method-choice{
    min-height:42px;
    font-size:14px;
    white-space:nowrap;
  }

  /* Time summary: avoid a long 5-cell single-column stack. */
  .time-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }
  .timebox{
    min-width:0;
    min-height:64px;
  }
  .timebox:last-child{
    grid-column:1/-1;
  }

  /* Video tools: 2 + 1 layout on phone, not three squeezed buttons. */
  .video-tools{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
  .video-tools .video-skip{
    width:100%;
    min-width:0;
    padding-inline:8px;
  }
  .video-tools #fullVideo{
    grid-column:1/-1;
  }

  /* Dashboard: use the width intentionally, without excessive vertical scroll. */
  .dashboard-content .grid.cols-2,
  .dashboard-content .grid.cols-3,
  .dashboard-content .chart-row{
    grid-template-columns:1fr;
  }
  .dashboard-content .dashboard-kpis,
  .dashboard-kpis{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }
  .dashboard-content .dashboard-kpis>.kpi,
  .dashboard-kpis>.kpi{
    min-width:0;
    min-height:96px;
    height:auto;
    padding:12px!important;
  }

  /* Data Quality / Waste & Pareto / Uniformity / Sufficiency / Rating / Standard
     use the same compact KPI/card rhythm; do not special-case Dashboard only. */
  .content > .grid > .kpi{
    min-height:96px;
    padding:12px!important;
  }
  .content > .grid > .kpi .value{
    font-size:21px;
    line-height:1.15;
    margin-top:5px;
    overflow-wrap:anywhere;
  }
  .content > .grid > .kpi .sub{
    font-size:10px;
    line-height:1.3;
    margin-top:4px;
  }
  .content > .card.section{
    margin-top:var(--ui-gap);
  }
  .content > .card.section > h3{
    margin-bottom:10px;
  }
  .content > .card.section .analysis-note{
    margin-bottom:10px;
    padding:9px 11px;
    font-size:11px;
  }
  .content > .card.section .chart-row{
    gap:7px;
    margin-bottom:7px;
  }
  .content > .card.section .chart-label{
    width:100px;
    flex:0 0 100px;
    font-size:10px;
  }
  .content > .card.section .bar{
    height:20px;
  }

  /* Footer never creates horizontal overflow. */
  .ut-bottom-footer{
    width:100%;
    min-width:0;
    padding-inline:var(--ui-page-pad);
  }
  .ut-footer-motto img{
    min-width:0;
    max-width:100%;
  }

  /* Command center overlay: safe-area aware, centered and independently scrollable. */
  .sidebar-backdrop{
    position:fixed;
    inset:0;
    z-index:19;
  }
  .app-shell.sidebar-open .sidebar{
    position:fixed!important;
    top:max(10px,env(safe-area-inset-top))!important;
    left:10px!important;
    right:10px!important;
    bottom:max(10px,env(safe-area-inset-bottom))!important;
    width:auto!important;
    height:auto!important;
    max-height:none!important;
    margin:0!important;
    padding:14px!important;
    border-radius:16px;
    overflow:hidden;
    box-sizing:border-box;
    z-index:30;
  }
  .app-shell.sidebar-open .sidebar nav{
    min-height:0;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    padding:6px 6px 18px!important;
    gap:10px!important;
  }
  .app-shell.sidebar-open .sidebar button,
  .app-shell.sidebar-open .sidebar .import-btn{
    margin:0!important;
  }
  .app-shell.sidebar-open .menu-panel-head{
    flex:0 0 auto;
    padding-right:54px;
  }
  .app-shell.sidebar-open .sidebar-toggle{
    position:fixed!important;
    top:max(17px,calc(env(safe-area-inset-top) + 7px))!important;
    right:17px!important;
    width:40px!important;
    min-width:40px!important;
    height:40px!important;
    min-height:40px!important;
    padding:0!important;
    z-index:45!important;
  }

  /* Header: protect the title and menu from squeezing each other. */
  .ut-topbar,
  .topbar{
    min-width:0;
    gap:10px;
  }
  .page-heading{
    min-width:0;
    flex:1 1 auto;
  }
  .page-heading h1{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .ut-header-logo-1,
  .ut-header-logo-2{
    flex:0 0 auto;
  }

  /* Prevent accidental page-wide horizontal scroll from long helper text. */
  .muted,
  .analysis-note,
  .chart-note,
  .manual-time-head span,
  .input-help,
  .tskk-meta-helper,
  .tskk-insight{
    overflow-wrap:anywhere;
  }
}

/* ---------- Narrow phones ---------- */
@media(max-width:430px){
  :root{
    --ui-page-pad:11px;
    --ui-card-pad:12px;
  }
  .content{
    padding:13px var(--ui-page-pad) 20px;
  }
  .card,
  .dashboard-filter,
  .chart-card,
  .classify-card,
  .video-card,
  .section-card,
  .tskk-header-card,
  .tskk-table-card,
  .tskk-chart-card{
    padding:var(--ui-card-pad);
  }
  .dashboard-content .dashboard-kpis,
  .dashboard-kpis{
    gap:8px!important;
  }
  .dashboard-content .dashboard-kpis>.kpi,
  .dashboard-kpis>.kpi{
    min-height:94px;
  }
  .content .btn,
  .card .btn,
  .modal .btn,
  .toolbar .btn,
  .page-actions .btn,
  .section-head .btn,
  button.btn{
    min-height:42px;
    height:42px;
    padding-inline:11px;
    font-size:13px;
  }
  .tskk-meta-grid{
    grid-template-columns:1fr;
  }
  .tskk-meta-grid .full{
    grid-column:auto;
  }
  .tskk-actions .btn,
  .modal-actions .btn,
  .toolbar .btn,
  .page-actions .btn{
    flex:0 0 auto;
    max-width:100%;
  }
  #manualObservationPanel.manual-time{
    padding:13px!important;
  }
  #manualObservationPanel .manual-time-grid.manual-single .time-input-row{
    grid-template-columns:minmax(0,1fr) 72px!important;
  }
  #manualObservationPanel .manual-time-grid.manual-single #applyManualTime{
    min-width:104px!important;
  }
  .video-wrap{
    min-height:205px!important;
  }
  .video-tools .video-skip{
    font-size:12px;
  }
  .ut-footer-motto img{
    width:min(78vw,300px)!important;
  }
}

@media(max-width:360px){
  .content{
    padding-inline:9px;
  }
  .dashboard-content .dashboard-kpis,
  .dashboard-kpis{
    gap:7px!important;
  }
  .content .btn,
  .card .btn,
  .modal .btn,
  .toolbar .btn,
  .page-actions .btn,
  .section-head .btn,
  button.btn{
    padding-inline:9px;
    font-size:12.5px;
  }
}

/* ---------- Desktop/tablet sanity pass ---------- */
@media(min-width:761px){
  .content{
    overflow-x:visible;
  }
  .section-head .btn,
  .tskk-actions .btn,
  .modal-actions .btn,
  .toolbar .btn,
  .page-actions .btn{
    min-height:40px;
  }
  .table-wrap{
    scrollbar-gutter:stable;
  }
  .modal-backdrop{
    padding:24px;
  }
}

/* V4.5.33 — Mobile full-page compact audit: keep all modules compact without changing logic */
@media (max-width:760px){
  /* Dashboard filters: use two compact columns instead of a long single stack. */
  .dashboard-filter-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
  .dashboard-filter-grid label{min-width:0!important;}
  .dashboard-filter-actions{grid-column:1 / -1!important;margin-top:0!important;}

  /* Data Quality: four summary cards become a compact 2 x 2 block. */
  .content:has(.data-table th:nth-child(6)) > .grid.cols-4{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }

  /* Waste & Pareto: three summary cards become two columns, with the third
     naturally moving to the next row instead of creating a tall stack. */
  .content:has(.chart-row) > .grid.cols-3{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }

  /* Compact KPI dimensions consistently across Quality/Waste/other modules. */
  .content > .grid.cols-4 .kpi,
  .content > .grid.cols-3 .kpi{
    min-width:0!important;
    padding:9px!important;
    min-height:82px!important;
  }
  .content > .grid.cols-4 .kpi .value,
  .content > .grid.cols-3 .kpi .value{
    font-size:16px!important;
    line-height:1.1!important;
  }
  .content > .grid.cols-4 .kpi .sub,
  .content > .grid.cols-3 .kpi .sub{
    font-size:8.5px!important;
    line-height:1.2!important;
  }

  /* Quality/Waste content cards: remove unnecessary vertical breathing room. */
  .content:has(.data-table th:nth-child(6)) > .card.section,
  .content:has(.chart-row) > .card.section{
    margin-top:0!important;
    padding:11px!important;
  }
}

@media (max-width:560px){
  .dashboard-filter-grid{gap:7px!important;}
  .content:has(.data-table th:nth-child(6)) > .grid.cols-4,
  .content:has(.chart-row) > .grid.cols-3{gap:6px!important;}
  .content > .grid.cols-4 .kpi,
  .content > .grid.cols-3 .kpi{padding:8px!important;min-height:76px!important;}
  .content > .grid.cols-4 .kpi .value,
  .content > .grid.cols-3 .kpi .value{font-size:15px!important;}
}


/* V4.5.33 — FINAL MOBILE COMPACT FIX
   Explicit page scopes prevent older generic mobile rules from collapsing
   Dashboard Filter / Data Quality / Waste & Pareto back into one column. */
@media (max-width:760px){
  .dashboard-content .dashboard-filter-controls{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
  }
  .dashboard-content .dashboard-filter-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    width:100%!important;
  }
  .dashboard-content .dashboard-filter-grid label{min-width:0!important;}
  .dashboard-content .dashboard-filter-grid select{
    width:100%!important;
    min-width:0!important;
  }
  .dashboard-content .dashboard-filter-actions{
    grid-column:1 / -1!important;
    width:100%!important;
  }
  .dashboard-content .dashboard-filter-actions .btn{width:100%!important;}

  .page-quality > .grid.cols-4,
  .page-waste > .grid.cols-3{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }

  .page-quality > .grid.cols-4 > .kpi,
  .page-waste > .grid.cols-3 > .kpi{
    min-width:0!important;
    min-height:82px!important;
    height:auto!important;
    padding:9px!important;
  }

  .page-quality > .grid.cols-4 > .kpi .value,
  .page-waste > .grid.cols-3 > .kpi .value{
    font-size:16px!important;
    line-height:1.1!important;
    overflow-wrap:anywhere!important;
  }

  .page-quality > .grid.cols-4 > .kpi .sub,
  .page-waste > .grid.cols-3 > .kpi .sub{
    font-size:8.5px!important;
    line-height:1.2!important;
  }

  .page-quality > .card.section,
  .page-waste > .card.section{
    margin-top:8px!important;
    padding:11px!important;
  }
}

@media (max-width:430px){
  /* Keep two columns even on narrow phones; this is the requested compact layout. */
  .dashboard-content .dashboard-filter-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
  }
  .dashboard-content .dashboard-filter-controls{gap:7px!important;}
  .dashboard-content .dashboard-filter-actions{grid-column:1 / -1!important;}

  .page-quality > .grid.cols-4,
  .page-waste > .grid.cols-3{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
  }
  .page-quality > .grid.cols-4 > .kpi,
  .page-waste > .grid.cols-3 > .kpi{
    min-height:78px!important;
    padding:8px!important;
  }
  .page-quality > .grid.cols-4 > .kpi .label,
  .page-waste > .grid.cols-3 > .kpi .label{
    font-size:8px!important;
    letter-spacing:.55px!important;
  }
  .page-quality > .grid.cols-4 > .kpi .value,
  .page-waste > .grid.cols-3 > .kpi .value{
    font-size:15px!important;
    line-height:1.08!important;
  }
  .page-quality > .grid.cols-4 > .kpi .sub,
  .page-waste > .grid.cols-3 > .kpi .sub{
    font-size:8px!important;
  }
}

/* V4.5.33 — FINAL LOADER MOTION FIX
   Keep the UT orbit animated on mobile/refresh. Earlier reduced-motion rules
   could override the loader animation on some phones/browser accessibility settings.
   The loader is explicitly requested as a dynamic visual. */
.session-loader-orbit-dots{
  animation:sessionLoaderSpin 1.4s linear infinite!important;
  animation-play-state:running!important;
  transform-origin:66px 66px!important;
  will-change:transform;
}
.session-loader-orbit-svg{
  display:block!important;
  width:132px!important;
  height:132px!important;
  transform-origin:66px 66px!important;
}
@keyframes sessionLoaderSpin{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}
@media(max-width:760px){
  .session-loader-orbit-dots{
    animation:sessionLoaderSpin 1.4s linear infinite!important;
    animation-play-state:running!important;
  }
}