:root{ --bg:#F3F4F7; --panel:#FFFFFF; --ink:#1B2130; --ink-soft:#606A7A; --line:#E3E6EB; --line-strong:#C7CCD6; --navy:#1B2A44; --navy-dark:#0E1A30; --navy-light:#EBEFF6; --navy-2:#24365A; --accent:#3E6FD9; --accent-dark:#2F58B3; --slate:#5B6472; --red:#C0392B; --red-bg:#FBEAE7; --amber:#8F6407; --amber-bg:#FBF0DA; --green:#227A4E; --green-bg:#E3F3E9; --blue:#2A5185; --blue-bg:#E3E9F3; --purple:#6B4FA0; --purple-bg:#F1ECF8; --gray-bg:#EEF0F3; /* Surface tints — barely-there panel/row washes. Consolidated from #FAFBFC / #F7F9FC / #F0F2F6 (row hover) and #F3F5F8 / #F9FAFB (sunk panels); all sat within ~3-6/255 of each other. */ --row-hover:#F7F9FC; --surface-sunk:#F3F5F8; /* Text ramp for dark (navy) surfaces — sidebar, banners, modal heads. Tokenised at their current values so a later contrast bump is a one-line change here rather than a sweep. */ --on-navy:#C3CBDA; --on-navy-soft:#9FB0CC; --on-navy-dim:#8EA0BE; /* Extra navy gradient stop shared by .page-banner / .um-head / .fp-head. */ --navy-3:#1E2C46; /* Checklist "topic" bar — deliberately off the semantic palette (it's a section divider inside the fill-in form, not a status). */ --checklist-topic-bg:#D9D24A; --checklist-topic-ink:#2B2A12; /* Radius + elevation. These are the FINAL values — earlier passes of the sheet defined --radius:10px / softer shadows and then a later :root overrode them; that override is now folded in here so there is one source of truth. */ --radius:12px; --radius-sm:9px; --shadow:0 1px 2px rgba(15,22,40,0.05), 0 1px 1px rgba(15,22,40,0.03); --shadow-hover:0 10px 24px rgba(15,22,40,0.09), 0 2px 6px rgba(15,22,40,0.05); --shadow-lg:0 24px 48px rgba(10,15,28,0.16), 0 6px 16px rgba(10,15,28,0.08); /* Motion easings (were a separate :root under "MOTION LAYER"). */ --ease-out:cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out:cubic-bezier(0.77, 0, 0.175, 1); /* 4px spacing scale (was a separate :root under "REDESIGN PASS"). */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-7:32px; --sp-8:40px; /* Type scale — the ONLY set of font sizes the app uses. Every rule below references one of these tokens; no raw px font-size anywhere in the sheet. --fs-2xs is the floor and is reserved for uppercase, letter-spaced micro-labels (eyebrows, table headers, badges); nothing set in sentence case should go below --fs-xs. */ --fs-2xs:10px; /* was 8-10.5px: badges, eyebrows, table th, meta */ --fs-xs:11px; /* was 11-11.5px: secondary text, hints, captions */ --fs-sm:12px; /* was 12-12.5px: dense body — rows, table cells */ --fs-base:13px; /* was 13-13.5px: default body, buttons, inputs */ --fs-md:15px; /* was 14-15px: emphasised body, card/list titles */ --fs-lg:18px; /* was 16-18px: page/section/modal titles */ --fs-xl:22px; /* was 19-23px: banner + dashboard headlines */ --fs-2xl:28px; /* was 24-28px: KPI numbers */ --fs-3xl:34px; /* login hero headline only */ } *{box-sizing:border-box;} html,body{margin:0;padding:0;height:100%;background:var(--bg);color:var(--ink);font-family:'Inter',sans-serif;-webkit-font-smoothing:antialiased;color-scheme:light;} .app{max-width:1160px;margin:0 auto;padding:0 24px 90px;} /* Shell layout — horizontal top nav */ .shell{display:flex;flex-direction:column;min-height:100vh;} .sidebar{width:100%;flex-shrink:0;background:var(--navy);color:#fff;display:flex;align-items:center;position:sticky;top:0;z-index:200;padding:0 20px;height:60px;box-sizing:border-box;} .sidebar-header{display:flex;align-items:center;gap:10px;padding-right:22px;margin-right:16px;border-right:1px solid rgba(255,255,255,0.12);flex-shrink:0;} .sidebar-logo{width:30px;height:30px;object-fit:contain;flex-shrink:0;} .sidebar-title{font-family:'IBM Plex Sans',sans-serif;font-weight:700;font-size:var(--fs-base);letter-spacing:0.4px;line-height:1.3;} .sidebar-sub{font-size:var(--fs-2xs);color:var(--on-navy-soft);line-height:1.3;} .sidebar-nav{position:relative;flex:1;min-width:0;display:flex;align-items:center;gap:2px;height:100%;} .nav-item{display:flex;align-items:center;gap:8px;padding:8px 12px;cursor:pointer;color:var(--on-navy);font-size:var(--fs-base);font-weight:600;border-radius:8px;white-space:nowrap;} .nav-item:hover{background:rgba(255,255,255,0.06);color:#fff;} .nav-item.active{background:rgba(255,255,255,0.12);color:#fff;} .nav-item .nav-label{min-width:0;} .nav-chevron{width:12px;height:12px;flex-shrink:0;opacity:0.55;transition:transform .18s;} .nav-item.expanded .nav-chevron{transform:rotate(180deg);} .nav-group{position:relative;} .nav-subgroup{position:absolute;top:calc(100% + 10px);left:0;min-width:200px;background:var(--navy-2);border:1px solid rgba(255,255,255,0.1);border-radius:12px;box-shadow:0 16px 40px rgba(5,8,16,0.45), 0 2px 8px rgba(5,8,16,0.3);padding:7px;opacity:0;visibility:hidden;transform:translateY(-8px) scale(0.97);transform-origin:top left;transition:opacity .16s ease, transform .16s ease, visibility 0s linear .16s;z-index:150;} .nav-subgroup.open{opacity:1;visibility:visible;transform:translateY(0) scale(1);transition:opacity .16s ease, transform .16s ease;} .nav-subgroup::before{content:'';position:absolute;top:-6px;left:22px;width:12px;height:12px;background:var(--navy-2);border-left:1px solid rgba(255,255,255,0.1);border-top:1px solid rgba(255,255,255,0.1);transform:rotate(45deg);border-radius:2px 0 0 0;} .nav-subitem{display:block;padding:9px 14px;font-size:var(--fs-sm);font-weight:500;color:var(--on-navy);cursor:pointer;border-radius:8px;white-space:nowrap;} .nav-subitem:hover{background:rgba(255,255,255,0.08);color:#fff;} .nav-subitem.active{background:rgba(90,140,230,0.22);color:#fff;font-weight:600;} /* A nav-subitem that reveals a second-level flyout on hover instead of navigating itself - e.g. QA's "Sites Visits" grouping Sites Check and Check List. Positioned beside (not below) the subgroup panel it lives in, matching how the subgroup itself opens beside the top-level nav. */ .nav-subitem.nav-flyout-trigger{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;} .nav-flyout-arrow{font-size:var(--fs-2xs);opacity:0.55;flex-shrink:0;transition:opacity .12s ease;} .nav-subitem.nav-flyout-trigger:hover .nav-flyout-arrow, .nav-subitem.nav-flyout-trigger.active .nav-flyout-arrow{opacity:0.9;} .nav-flyout{ position:absolute;top:-7px;left:calc(100% + 10px);min-width:180px; background:var(--navy-2);border:1px solid rgba(255,255,255,0.1);border-radius:12px; box-shadow:0 16px 40px rgba(5,8,16,0.45), 0 2px 8px rgba(5,8,16,0.3); padding:7px;opacity:0;visibility:hidden;transform:translateX(-6px); transition:opacity .14s ease, transform .14s ease, visibility 0s linear .14s; z-index:160; } .nav-subitem.nav-flyout-trigger:hover .nav-flyout, .nav-subitem.nav-flyout-trigger:focus-within .nav-flyout, .nav-subitem.nav-flyout-trigger.open .nav-flyout{ opacity:1;visibility:visible;transform:translateX(0); transition:opacity .14s ease, transform .14s ease; } .nav-flyout::before{ content:'';position:absolute;top:14px;left:-6px;width:12px;height:12px; background:var(--navy-2);border-left:1px solid rgba(255,255,255,0.1);border-bottom:1px solid rgba(255,255,255,0.1); transform:rotate(45deg);border-radius:0 0 0 2px; } .nav-icon{width:16px;height:16px;flex-shrink:0;} #topnavIndicator{position:absolute;left:0;bottom:0;height:2px;border-radius:2px;background:linear-gradient(90deg, var(--accent), #8fb4ff);box-shadow:0 0 10px rgba(90,140,230,0.7);transition:transform .32s cubic-bezier(.4,0,.2,1), width .32s cubic-bezier(.4,0,.2,1), opacity .2s;opacity:0;pointer-events:none;} .sidebar-footer{display:flex;align-items:center;gap:10px;margin-left:auto;padding-left:16px;border-left:1px solid rgba(255,255,255,0.12);flex-shrink:0;position:relative;} .topnav-user{text-align:right;line-height:1.25;} .sidebar-signout{background:transparent;border:1px solid rgba(255,255,255,0.25);border-radius:var(--radius-sm);color:var(--on-navy);font-size:var(--fs-sm);font-weight:600;padding:7px 11px;cursor:pointer;white-space:nowrap;} .sidebar-signout:hover{border-color:#fff;color:#fff;} #fullBackupStatus{position:absolute;top:100%;right:0;margin-top:6px;font-size:var(--fs-2xs);color:var(--on-navy-soft);white-space:nowrap;} .nav-hamburger{display:none;margin-left:auto;background:transparent;border:1px solid rgba(255,255,255,0.25);border-radius:var(--radius-sm);color:#fff;font-size:var(--fs-lg);line-height:1;width:38px;height:38px;cursor:pointer;flex-shrink:0;} .nav-hamburger:hover{border-color:#fff;} .nav-backdrop{display:none;position:fixed;inset:0;top:60px;background:rgba(5,8,16,0.45);z-index:190;} .main-content{flex:1;min-width:0;padding:22px 28px 90px;} .content-header{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-bottom:16px;} .page-title{font-family:'IBM Plex Sans',sans-serif;font-weight:700;font-size:var(--fs-lg);color:var(--navy);letter-spacing:-0.2px;} .content-header .date{font-family:'IBM Plex Mono',monospace;font-size:var(--fs-sm);color:var(--ink-soft);} /* Lightweight uppercase heading that separates sections inside a pane (e.g. the Tracker dashboard's Overview / Project Health / Most Urgent). Was an inline style block repeated by sectionTitle() in tracker.js. */ .section-heading{font-family:'IBM Plex Sans',sans-serif;font-weight:700;font-size:var(--fs-sm);color:var(--navy);text-transform:uppercase;letter-spacing:0.5px;margin:22px 0 10px;} .subtabs{display:flex;gap:18px;border-bottom:2px solid var(--line);margin-bottom:18px;} .subtab{padding:8px 2px;font-size:var(--fs-base);font-weight:600;color:var(--ink-soft);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;} .subtab.active{color:var(--navy);border-bottom-color:var(--navy);} .subtab:hover:not(.active){color:var(--ink);} /* Mobile/tablet nav (<=1024px): the horizontal top-nav row (logo + 7 nav groups + user info, all inline in one 60px bar) has no room to breathe below desktop widths, so it collapses into a hamburger-triggered off-canvas drawer. .sidebar-nav/.sidebar-footer keep every existing id and are driven by the SAME .open/.active classes JS already sets above this breakpoint - only their positioning changes here. */ @media (max-width:1024px){ .nav-hamburger{display:flex;align-items:center;justify-content:center;} #topnavIndicator{display:none;} body.mobile-nav-open .nav-backdrop{display:block;} .sidebar-nav{ position:fixed;top:60px;left:0;bottom:64px;width:82vw;max-width:320px; flex-direction:column;align-items:stretch;gap:0;overflow-y:auto; background:var(--navy);padding:10px;box-shadow:4px 0 24px rgba(5,8,16,0.35); transform:translateX(-100%);transition:transform .25s var(--ease-out);z-index:195; } body.mobile-nav-open .sidebar-nav{transform:translateX(0);} .sidebar-nav .nav-group{width:100%;} .sidebar-nav .nav-item{width:100%;justify-content:space-between;box-sizing:border-box;} /* Re-skin the existing open/close classes as an inline accordion instead of a floating dropdown/flyout - same JS-driven classes, new geometry. */ .sidebar-nav .nav-subgroup{ position:static;opacity:1;visibility:visible;transform:none; width:100%;box-shadow:none;border:none;background:rgba(0,0,0,0.18); max-height:0;overflow:hidden;padding:0;margin:0;transition:max-height .2s ease, padding .2s ease; } .sidebar-nav .nav-subgroup::before{display:none;} .sidebar-nav .nav-subgroup.open{max-height:600px;padding:6px;margin-top:2px;} .sidebar-nav .nav-flyout{ position:static;opacity:1;visibility:visible;transform:none; width:100%;box-shadow:none;border:none;background:rgba(0,0,0,0.18); max-height:0;overflow:hidden;padding:0;margin:0;transition:max-height .2s ease, padding .2s ease; } .sidebar-nav .nav-flyout::before{display:none;} .sidebar-nav .nav-subitem.nav-flyout-trigger.open .nav-flyout{max-height:400px;padding:6px;margin-top:2px;padding-left:14px;} .sidebar-nav .nav-flyout-arrow{transition:transform .15s ease;} .sidebar-nav .nav-subitem.nav-flyout-trigger.open .nav-flyout-arrow{transform:rotate(90deg);} .sidebar-footer{ position:fixed;left:0;bottom:0;width:82vw;max-width:320px; transform:translateX(-100%);transition:transform .25s var(--ease-out); margin:0;border-left:none;border-top:1px solid rgba(255,255,255,0.12); background:var(--navy);padding:14px;box-sizing:border-box;z-index:195; justify-content:space-between; } body.mobile-nav-open .sidebar-footer{transform:translateX(0);} } /* Login — split-screen hero with interactive glow */ #loginScreen{display:flex;min-height:100vh;background:linear-gradient(135deg,#1a2436 0%,#232f45 45%,#2c3a54 100%);overflow:hidden;position:relative;} .login-hero{position:relative;flex:1.35;min-width:0;padding:64px 60px;display:flex;align-items:center;overflow:hidden;} .login-glow{position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle, rgba(90,140,230,0.28) 0%, rgba(90,140,230,0.08) 45%, transparent 70%);pointer-events:none;transform:translate(-50%,-50%);left:30%;top:35%;transition:left .35s ease-out, top .35s ease-out;filter:blur(4px);} .login-grid-overlay{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);background-size:46px 46px;pointer-events:none;mask-image:radial-gradient(ellipse 800px 500px at 30% 40%, #000 0%, transparent 75%);} .login-hero-content{position:relative;z-index:2;max-width:560px;} .login-logo-wrap{position:relative;width:96px;height:96px;margin-bottom:30px;display:flex;align-items:center;justify-content:center;} .login-logo-ring{position:absolute;inset:-14px;border-radius:50%;background:conic-gradient(from 0deg, transparent 0%, rgba(120,175,255,0.9) 8%, transparent 22%, transparent 100%);animation:logoRingSpin 4.5s linear infinite;filter:blur(3px);opacity:0.9;} .login-logo-ring::after{content:'';position:absolute;inset:8px;border-radius:50%;background:radial-gradient(circle, rgba(26,36,54,1) 55%, rgba(26,36,54,0) 100%);} @keyframes logoRingSpin{ to{ transform:rotate(360deg); } } .login-logo-glow{position:absolute;inset:-24px;border-radius:50%;background:radial-gradient(circle, rgba(90,140,230,0.35) 0%, transparent 70%);animation:logoGlowPulse 3s ease-in-out infinite;pointer-events:none;} @keyframes logoGlowPulse{ 0%,100%{opacity:0.55;transform:scale(1);} 50%{opacity:0.9;transform:scale(1.08);} } .login-logo-img{position:relative;z-index:2;width:78px;height:78px;object-fit:contain;filter:drop-shadow(0 4px 16px rgba(0,0,0,0.35));} .login-headline{font-family:'IBM Plex Sans',sans-serif;font-weight:700;font-size:var(--fs-3xl);line-height:1.2;color:#fff;margin:0 0 16px;letter-spacing:-0.3px;} .login-tagline{font-size:var(--fs-md);color:#B9C4D6;margin:0 0 4px;font-weight:500;} .login-sub{font-size:var(--fs-base);color:#8A96AC;margin:0 0 34px;line-height:1.6;max-width:380px;} .login-diagram{position:relative;height:170px;margin-bottom:34px;} .login-tile-grid{display:grid;grid-template-columns:repeat(2,84px);grid-template-rows:repeat(2,84px);gap:14px;position:relative;z-index:2;} .login-tile{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.12);border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:default;transition:all .25s ease;animation:tileFadeIn .6s ease backwards;animation-delay:var(--tile-delay);} @keyframes tileFadeIn{ from{opacity:0;transform:translateY(8px);} to{opacity:1;transform:translateY(0);} } .login-tile:hover{background:rgba(90,140,230,0.14);border-color:rgba(120,165,255,0.55);box-shadow:0 0 0 1px rgba(120,165,255,0.25), 0 8px 24px rgba(60,100,200,0.35), 0 0 28px rgba(90,140,230,0.35);transform:translateY(-3px);} .login-tile-icon{width:26px;height:26px;color:#9DB0D6;transition:color .25s ease, transform .25s ease;} .login-tile-icon svg{width:100%;height:100%;stroke:currentColor;fill:currentColor;} .login-tile:hover .login-tile-icon{color:#BFD4FF;transform:scale(1.1);} .login-tile-label{font-size:var(--fs-2xs);font-weight:700;text-transform:uppercase;letter-spacing:0.4px;color:#7C8AA3;text-align:center;line-height:1.3;transition:color .25s ease;} .login-tile:hover .login-tile-label{color:#D6E1FA;} .login-flow-svg{position:absolute;top:0;left:190px;width:calc(100% - 190px);height:100%;color:#7C8AA3;overflow:visible;} .flow-path{stroke-dasharray:6 5;animation:flowDash 3.5s linear infinite;} @keyframes flowDash{ to{ stroke-dashoffset:-220; } } .login-radar{animation:radarSpin 26s linear infinite;transform-origin:center;} @keyframes radarSpin{ to{ transform:translate(330px,140px) rotate(360deg); } } .login-mission-btn{background:transparent;border:1px solid rgba(255,255,255,0.35);color:#fff;font-size:var(--fs-xs);font-weight:700;letter-spacing:0.6px;text-transform:uppercase;padding:13px 22px;border-radius:var(--radius-sm);cursor:pointer;} .login-mission-btn:hover{background:rgba(255,255,255,0.1);border-color:#fff;box-shadow:0 0 20px rgba(255,255,255,0.15);} .login-panel{flex:1;min-width:340px;max-width:460px;display:flex;align-items:center;justify-content:center;position:relative;background:rgba(210,220,235,0.08);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);border-left:1px solid rgba(255,255,255,0.12);} .login-card{width:100%;max-width:340px;padding:0 40px;} .login-card-logo-wrap{position:relative;width:96px;height:96px;margin-bottom:18px;display:flex;align-items:center;justify-content:center;} .login-card-logo-ring{position:absolute;inset:-14px;border-radius:50%;background:conic-gradient(from 0deg, transparent 0%, rgba(120,175,255,0.85) 8%, transparent 22%, transparent 100%);animation:logoRingSpin 4.5s linear infinite;filter:blur(2px);opacity:0.85;} .login-card-logo-ring::after{content:'';position:absolute;inset:8px;border-radius:50%;background:radial-gradient(circle, rgba(30,42,66,1) 55%, rgba(30,42,66,0) 100%);} .login-card-logo-glow{position:absolute;inset:-24px;border-radius:50%;background:radial-gradient(circle, rgba(90,140,230,0.32) 0%, transparent 70%);animation:logoGlowPulse 3s ease-in-out infinite;pointer-events:none;} .login-card-badge{position:relative;z-index:2;width:78px;height:78px;object-fit:contain;filter:drop-shadow(0 3px 10px rgba(0,0,0,0.3));} .login-card-title{font-family:'IBM Plex Sans',sans-serif;font-weight:700;font-size:var(--fs-lg);color:#fff;} .login-card-sub{font-size:var(--fs-sm);color:var(--on-navy-soft);margin-bottom:26px;} .login-card-heading{font-family:'IBM Plex Sans',sans-serif;font-weight:700;font-size:var(--fs-xl);color:#fff;margin-bottom:22px;letter-spacing:-0.2px;} #loginScreen label{display:block;font-size:var(--fs-2xs);font-weight:700;text-transform:uppercase;letter-spacing:0.5px;color:var(--on-navy-soft);margin-bottom:6px;margin-top:16px;} #loginScreen input, #loginScreen select{width:100%;padding:11px 13px;font-size:var(--fs-base);border:1px solid rgba(255,255,255,0.18);border-radius:var(--radius-sm);background:rgba(255,255,255,0.06);color:#fff;transition:all .18s ease;} #loginScreen input::placeholder{color:#66738D;} #loginScreen input:focus, #loginScreen select:focus{outline:none;border-color:var(--accent);background:rgba(255,255,255,0.09);box-shadow:0 0 0 3px rgba(62,111,217,0.22);} #loginScreen select option{background:var(--navy-dark, #0E1A30);color:#fff;} .login-remember-row{margin-top:14px;} .login-remember-row label{display:flex;align-items:center;gap:7px;font-size:var(--fs-sm);font-weight:500;text-transform:none;letter-spacing:normal;color:#B9C4D6;margin:0;cursor:pointer;} .login-remember-row input{width:auto;accent-color:var(--accent);} #loginScreen button#loginBtn{width:100%;margin-top:22px;background:linear-gradient(135deg, var(--accent), var(--navy));border:none;box-shadow:0 4px 16px rgba(62,111,217,0.35);} #loginScreen button#loginBtn:hover{box-shadow:0 6px 22px rgba(62,111,217,0.5);transform:translateY(-1px);} #loginError{color:#FF9B8A;font-size:var(--fs-sm);margin-top:10px;min-height:16px;} .login-forgot-link{display:block;text-align:center;font-size:var(--fs-sm);color:#8FA8E0;text-decoration:none;margin-top:18px;transition:color .15s;} .login-forgot-link:hover{color:#BFD4FF;text-decoration:underline;} .login-forgot-msg{font-size:var(--fs-xs);color:var(--on-navy-soft);text-align:center;margin-top:8px;min-height:14px;} @media (max-width:900px){ #loginScreen{flex-direction:column;} .login-hero{padding:48px 28px;min-height:auto;} .login-headline{font-size:var(--fs-2xl);} .login-diagram{display:none;} .login-panel{border-left:none;border-top:1px solid rgba(255,255,255,0.12);padding:40px 0;} } /* Top bar */ .topbar{background:var(--navy);color:#fff;padding:20px 24px;margin-bottom:22px;} .topbar-inner{max-width:1160px;margin:0 auto;display:flex;justify-content:space-between;align-items:flex-start;} .topbar h1{font-family:'IBM Plex Sans',sans-serif;font-weight:700;font-size:var(--fs-xl);margin:0;letter-spacing:0.2px;} .topbar .sub{font-size:var(--fs-sm);color:var(--on-navy);margin-top:5px;} .topbar .date{font-family:'IBM Plex Mono',monospace;font-size:var(--fs-sm);color:var(--on-navy);text-align:right;} .save-status{font-family:'IBM Plex Mono',monospace;font-size:var(--fs-xs);margin-top:5px;text-align:right;transition:color 140ms var(--ease-out);} .save-status.ok{color:#8FD3A8;} .save-status.pending{color:var(--on-navy);} .save-status.fail{color:#F0A69C;font-weight:600;} .topline{display:flex;justify-content:flex-end;margin-bottom:14px;} .topline button{font-size:var(--fs-xs);background:none;border:1px solid var(--line-strong);border-radius:var(--radius-sm);color:var(--ink-soft);cursor:pointer;font-weight:600;padding:5px 10px;} .topline button:hover{border-color:var(--navy);color:var(--navy);} .summary{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:22px;} .summary .card{background:var(--panel);padding:16px 18px;} .summary .card .n{font-family:'IBM Plex Sans',sans-serif;font-size:var(--fs-2xl);font-weight:700;line-height:1;} .summary .card .l{font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:0.6px;color:var(--ink-soft);margin-top:6px;font-weight:600;} .summary .card.overdue .n{color:var(--red);} .summary .card.today .n{color:var(--amber);} .summary .card.open .n{color:var(--navy);} .summary .card.closed .n{color:var(--green);} .controls{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:0;} .tabs{display:flex;gap:0;border:1px solid var(--line);flex-wrap:wrap;} .tab{position:relative;padding:9px 15px;font-size:var(--fs-sm);font-weight:600;cursor:pointer;color:var(--ink-soft);user-select:none;white-space:nowrap;border-right:1px solid var(--line);} /* Every small floating count badge on an icon/tab shares one design - size, shape, offset, color, ring - so they read as the same UI element wherever they show up (notification bell, tab counts, comment/subtask counts, Sites Check comments/photos/dates/raised-by). .tab-badge/.count-badge/.obs-icon-badge only differ in *when* they're shown: .tab-badge starts hidden and is toggled via JS (setTabBadge), the other two are simply not rendered into the DOM until count > 0. */ .tab-badge, .count-badge, .obs-icon-badge{position:absolute;top:-6px;right:-6px;background:var(--red);color:#fff;font-size:var(--fs-2xs);font-weight:800;min-width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:0 3px;box-shadow:0 0 0 2px var(--panel);} .tab-badge{display:none;} .tab:last-child{border-right:none;} .tab.active{background:var(--navy);color:#fff;} .tab:hover:not(.active){background:var(--gray-bg);color:var(--ink);} .right-controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap;} select, input[type=text], input[type=date], input[type=search]{ font-family:'Inter',sans-serif;font-size:var(--fs-base);padding:8px 10px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--panel);color:var(--ink);transition:border-color .15s; } select:focus, input:focus{outline:none;border-color:var(--navy);} /* Buttons — the whole system in one place. Primary = filled --accent (reserved for actionable elements, so it reads apart from the navy structural chrome); .secondary = navy outline. Earlier passes of the sheet set the base here and then re-touched .btn depth / press-motion / colour in three later blocks; those are all folded back in below. */ .btn{ font-family:'IBM Plex Sans',sans-serif;font-size:var(--fs-base);font-weight:600; padding:9px 16px;border-radius:var(--radius-sm);border:1px solid var(--navy); background:var(--navy);color:#fff;cursor:pointer; box-shadow:0 1px 2px rgba(20,30,50,0.12), 0 2px 6px rgba(27,42,68,0.18); transition:transform .12s, box-shadow .12s, background .12s; } .btn:hover{ background:var(--navy-dark);border-color:var(--navy-dark); transform:translateY(-1px);box-shadow:0 3px 10px rgba(27,42,68,0.28); } .btn:active{ transform:translateY(0) scale(0.95); transition-duration:90ms; } .btn:disabled{ opacity:0.5; cursor:not-allowed; box-shadow:none; transform:none; } .btn:not(.secondary){ background:var(--accent);border-color:var(--accent); box-shadow:0 1px 2px rgba(62,111,217,0.18), 0 4px 12px rgba(62,111,217,0.22); } .btn:not(.secondary):hover{ background:var(--accent-dark);border-color:var(--accent-dark); box-shadow:0 2px 6px rgba(62,111,217,0.22), 0 6px 18px rgba(62,111,217,0.3); } .btn.secondary{ background:transparent;color:var(--navy);border-color:var(--line-strong); box-shadow:none;font-weight:600; } .btn.secondary:hover{ background:var(--navy-light);border-color:var(--navy);box-shadow:var(--shadow); } .btn.secondary:disabled:hover{ background:transparent; } .btn.small{ padding:6px 11px;font-size:var(--fs-sm);letter-spacing:0.1px; } /* Last of the equal-specificity :hover rules on purpose — a disabled button being hovered keeps the flat accent fill (matches the pre-merge cascade order). */ .btn:disabled:hover{ background:var(--accent); border-color:var(--accent); transform:none; } .search-wrap{position:relative;flex:1;min-width:200px;max-width:340px;} .search-wrap input{width:100%;padding-left:32px;} .search-wrap .icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--ink-soft);font-size:var(--fs-base);pointer-events:none;} .search-note{font-size:var(--fs-xs);color:var(--ink-soft);padding:8px 2px;} .form-panel{background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--navy);padding:20px;margin:16px 0 20px;display:none;} .form-panel.open{display:block;} .form-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:12px;margin-bottom:12px;} .form-grid label{display:block;font-size:var(--fs-xs);font-weight:600;text-transform:uppercase;letter-spacing:0.3px;color:var(--ink-soft);margin-bottom:5px;} .form-grid .full{grid-column:1/-1;} .form-grid input, .form-grid select, .form-grid textarea{width:100%;} .form-actions{display:flex;gap:8px;justify-content:flex-end;} .empty{padding:44px 10px;text-align:center;color:var(--ink-soft);font-size:var(--fs-md);background:var(--panel);border:1px solid var(--line);border-top:none;} .list-container{border:1px solid var(--line);border-top:none;margin-bottom:20px;} .row-header{display:grid;grid-template-columns:5px 1fr 148px 100px 105px 95px 152px 115px 125px;background:var(--navy-light);border-top:1px solid var(--line);} .row-header .cell{padding:9px 12px;font-size:var(--fs-2xs);font-weight:700;text-transform:uppercase;letter-spacing:0.4px;color:var(--navy);} .task-group{border-top:1px solid var(--line);} .row{ display:grid;grid-template-columns:5px 1fr 148px 100px 105px 95px 152px 115px 125px;gap:0;align-items:center; background:var(--panel);transition:background .1s; } .row:hover{background:var(--row-hover);} .row .flag{align-self:stretch;} .row .cell{padding:8px 12px;font-size:var(--fs-base);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .row .action-cell{white-space:normal;overflow:visible;} .action-title-row{display:flex;align-items:baseline;gap:10px;justify-content:space-between;} .row .action-text{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1;} .row .subtitle{font-size:var(--fs-sm);color:var(--ink-soft);margin-top:1px;font-style:italic;} .row .meta{font-size:var(--fs-xs);color:var(--ink-soft);margin-top:0;flex-shrink:0;white-space:nowrap;display:flex;align-items:center;gap:6px;} .badge{display:inline-block;font-size:var(--fs-2xs);font-weight:700;text-transform:uppercase;letter-spacing:0.3px;padding:3px 7px;border-radius:var(--radius-sm);} .badge.High{background:var(--red-bg);color:var(--red);} .badge.Medium{background:var(--amber-bg);color:var(--amber);} .badge.Low{background:var(--gray-bg);color:var(--slate);} .due-wrap{border-radius:var(--radius-sm);padding:2px;} .due-wrap.overdue{background:var(--red-bg);} .due-wrap.today{background:var(--amber-bg);} .due-input{font-family:'IBM Plex Mono',monospace;font-size:var(--fs-sm);border:none;background:transparent;width:100%;padding:5px 4px;cursor:pointer;} .due-input:focus{outline:1px solid var(--navy);border-radius:2px;} .due-input:disabled{cursor:not-allowed;color:var(--ink-soft);} .row-actions{display:flex;gap:5px;justify-content:flex-end;padding-right:10px;} .icon-btn{position:relative;background:var(--panel);border:1px solid var(--line-strong);border-radius:var(--radius-sm);min-width:27px;height:27px;padding:0 7px;cursor:pointer;color:var(--ink-soft);font-size:var(--fs-sm);line-height:1;} .icon-btn:hover{border-color:var(--navy);color:var(--navy);} .icon-btn.active{border-color:var(--navy);color:var(--navy);background:var(--navy-light);} .icon-btn.del:hover{border-color:var(--red);color:var(--red);} .count-badge.sub{background:var(--blue);} .flag.overdue{background:var(--red);} .flag.today{background:var(--amber);} .flag.upcoming{background:var(--navy);} .flag.closed{background:var(--green);} .flag.none{background:var(--line-strong);} .status-select{font-size:var(--fs-xs);padding:6px 5px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--panel);color:var(--ink);font-weight:600;width:100%;text-transform:uppercase;letter-spacing:0.3px;} .company-tag{font-size:var(--fs-sm);color:var(--slate);} .area-tag{font-size:var(--fs-sm);color:var(--slate);} .co-badge{display:inline-block;font-size:var(--fs-2xs);font-weight:700;text-transform:uppercase;letter-spacing:0.3px;padding:3px 7px;border-radius:var(--radius-sm);} .co-badge.palestine{background:var(--blue-bg);color:var(--blue);} .co-badge.jordan{background:var(--green-bg);color:var(--green);} .co-badge.ctc{background:var(--red-bg);color:var(--red);} .comment-item{padding:8px 0;border-bottom:1px dashed var(--line);font-size:var(--fs-sm);} .comment-item:last-child{border-bottom:none;} .comment-time{font-family:'IBM Plex Mono',monospace;font-size:var(--fs-2xs);color:var(--ink-soft);margin-bottom:3px;} .comment-add{display:flex;gap:8px;margin-top:10px;} .comment-add textarea{flex:1;font-family:'Inter',sans-serif;font-size:var(--fs-sm);padding:8px 10px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);resize:vertical;min-height:34px;} .no-comments{font-size:var(--fs-sm);color:var(--ink-soft);font-style:italic;} .loading{padding:34px;text-align:center;color:var(--ink-soft);font-family:'IBM Plex Mono',monospace;font-size:var(--fs-base);} /* Comments popover - shared by every 💬 button (task/subtask/project task). Floats above the page, anchored near the button that opened it, instead of expanding inline in the row - see openCommentsPopover in tracker.js. */ .comment-popover{ position:fixed; z-index:1000; width:300px; max-height:380px; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-lg); display:flex; flex-direction:column; overflow:hidden; animation: motionScaleIn 180ms var(--ease-out) both; } .comment-popover-head{ display:flex; align-items:center; justify-content:space-between; flex-shrink:0; padding:10px 14px; border-bottom:1px solid var(--line); font-family:'IBM Plex Sans',sans-serif; font-size:var(--fs-sm); font-weight:700; color:var(--navy); } .comment-popover-close{ background:transparent; border:none; cursor:pointer; color:var(--ink-soft); font-size:var(--fs-base); line-height:1; padding:4px 7px; border-radius:6px; } .comment-popover-close:hover{ background:var(--gray-bg); color:var(--ink); } .comment-popover-body{ padding:12px 14px; overflow-y:auto; } .comment-popover-body .comment-add{ margin-top:8px; } /* Subtasks */ .subtasks-panel{background:var(--surface-sunk);border-top:1px solid var(--line);height:0;overflow:hidden;} .subtasks-panel.open{height:auto;} .subtasks-panel.open .panel-inner{padding:12px 16px 14px;max-height:900px;overflow-y:auto;} .subtask-block{margin-bottom:8px;} .subtask-block:last-child{margin-bottom:0;} .subtask-row{display:grid;grid-template-columns:1fr 132px 122px 40px;gap:8px;align-items:center;background:var(--panel);border:1px solid var(--line);padding:8px 10px;} .subtask-row.closed{opacity:0.55;} .subtask-row.closed .subtask-text{text-decoration:line-through;color:var(--ink-soft);} .subtask-text{font-size:var(--fs-base);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .no-subtasks{font-size:var(--fs-sm);color:var(--ink-soft);font-style:italic;margin-bottom:6px;} .subtask-add{display:flex;gap:8px;margin-top:10px;} .subtask-add input{flex:1;font-family:'Inter',sans-serif;font-size:var(--fs-sm);padding:8px 10px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);} .subtask-edit-row{display:grid;grid-template-columns:1fr 132px 122px 30px;gap:6px;margin-bottom:6px;align-items:center;} .subtask-edit-row input, .subtask-edit-row select{width:100%;} .filter-field{display:flex;flex-direction:column;gap:4px;} .filter-field label{font-size:var(--fs-2xs);font-weight:600;color:var(--ink-soft);text-transform:uppercase;letter-spacing:0.3px;} /* User Management */ .role-badge{display:inline-block;font-size:var(--fs-2xs);font-weight:700;text-transform:uppercase;letter-spacing:0.3px;padding:3px 8px;border-radius:20px;} .role-badge.superadmin{background:var(--purple-bg, #EFE9F7);color:var(--purple, #6B4FA0);} .role-badge.admin{background:var(--blue-bg);color:var(--blue);} .role-badge.user{background:var(--gray-bg);color:var(--slate);} .status-badge{display:inline-block;font-size:var(--fs-2xs);font-weight:700;text-transform:uppercase;letter-spacing:0.3px;padding:3px 8px;border-radius:20px;} .status-badge.active, .status-badge.accepted{background:var(--green-bg);color:var(--green);} .status-badge.inactive{background:var(--red-bg);color:var(--red);} .status-badge.pending{background:var(--amber-bg);color:var(--amber);} .cp-modal-grid label.perm-label{display:flex;align-items:center;gap:6px;font-size:var(--fs-sm);font-weight:500;color:var(--ink);text-transform:none;letter-spacing:normal;margin-bottom:0;cursor:pointer;} /* Page Management (Admin: Regions, Warehouses & Areas, Departments) */ .pm-section{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;margin-bottom:16px;} .pm-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:14px;} .pm-section-title{font-family:'IBM Plex Sans',sans-serif;font-weight:700;font-size:var(--fs-md);color:var(--navy);} .pm-section-hint{font-size:var(--fs-xs);color:var(--ink-soft);margin-top:2px;max-width:520px;} .pm-section-head .btn{flex-shrink:0;} /* Warehouses/departments saved before Companies existed - still shown by their old region, but flagged so the admin knows to attach a company. */ .pm-needs-company{color:var(--amber);font-style:italic;} /* Add/Edit popups (Region, Company, Warehouse, Department) - a compact dialog rather than the wide default .cp-modal, since these forms only ever hold a couple of fields and 680px left them looking sparse. */ .pm-modal{max-width:440px;} .pm-modal-head{margin-bottom:20px;} .pm-modal-eyebrow{ display:flex; align-items:center; gap:8px; font-size:var(--fs-2xs); font-weight:700; letter-spacing:1.1px; text-transform:uppercase; color:var(--ink-soft); margin-bottom:8px; } .pm-modal-head h3{margin:0;} .pm-modal-sub{font-size:var(--fs-sm);color:var(--ink-soft);margin-top:5px;line-height:1.5;} .pm-modal-field{margin-bottom:16px;} .pm-modal-field label{display:block;font-size:var(--fs-2xs);font-weight:600;color:var(--ink-soft);text-transform:uppercase;letter-spacing:0.3px;margin-bottom:5px;} .pm-modal-field input, .pm-modal-field select{width:100%;} .wh-areas-list{display:flex;flex-wrap:wrap;gap:6px;min-height:26px;margin-bottom:10px;} .wh-areas-empty{font-size:var(--fs-xs);color:var(--ink-soft);font-style:italic;} .wh-area-chip{display:inline-flex;align-items:center;gap:6px;background:var(--gray-bg);border:1px solid var(--line-strong);color:var(--ink);border-radius:20px;padding:4px 6px 4px 11px;font-size:var(--fs-xs);} .wh-area-chip button{background:none;border:none;color:var(--ink-soft);cursor:pointer;font-size:var(--fs-xs);line-height:1;padding:2px 4px;border-radius:50%;} .wh-area-chip button:hover{color:var(--red);background:var(--red-bg);} .wh-area-add{display:flex;gap:6px;} .wh-area-add input{flex:1;font-size:var(--fs-sm);padding:7px 9px;} /* Checklist form */ .cl-modal-overlay{position:fixed;inset:0;background:rgba(10,14,20,0.6);display:flex;align-items:flex-start;justify-content:center;z-index:1000;padding:24px;overflow-y:auto;} .cl-modal{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-lg);max-width:820px;width:100%;padding:0;border-top:4px solid var(--navy);margin-bottom:40px;} .cl-modal-header{padding:20px 24px 4px;position:relative;} .cl-modal-header h3{margin:0 0 14px;font-family:'IBM Plex Sans',sans-serif;color:var(--navy);font-size:var(--fs-lg);padding-right:60px;} .cl-qr-btn{position:absolute;top:18px;right:22px;width:48px;height:48px;border-radius:var(--radius-sm);border:1.5px solid var(--navy);background:var(--navy-light);color:var(--navy);font-weight:700;font-size:var(--fs-xs);letter-spacing:0.3px;cursor:pointer;} .cl-qr-btn:hover{background:var(--navy);color:#fff;} .cl-locked-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:10px;} /* Read-only submission view shows 4 locked fields (Date/Time/Warehouse/Filled By) instead of the fill-in form's 3 - kept as its OWN single-class selector (not a compound .cl-locked-grid.cl-locked-grid-4, which would out-specificity the max-width:640px rule below and break the mobile collapse to 1 column) so that rule still wins when it's active. */ .cl-locked-grid-4{grid-template-columns:1fr 1fr 1fr 1fr;} .cl-locked-field label{display:block;font-size:var(--fs-2xs);font-weight:600;color:var(--ink-soft);text-transform:uppercase;letter-spacing:0.3px;margin-bottom:3px;} .cl-locked-field .val{font-size:var(--fs-base);font-weight:600;color:var(--ink);background:var(--gray-bg);padding:8px 10px;border-radius:var(--radius-sm);} .cl-name-field{margin-bottom:16px;} .cl-name-field label{display:block;font-size:var(--fs-2xs);font-weight:600;color:var(--ink-soft);text-transform:uppercase;letter-spacing:0.3px;margin-bottom:3px;} .cl-name-field input{width:100%;} .cl-topic-bar{background:var(--checklist-topic-bg);color:var(--checklist-topic-ink);font-weight:700;font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:0.3px;padding:9px 24px;position:sticky;top:0;z-index:2;} .cl-point-row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:11px 24px;border-bottom:1px solid var(--line);} .cl-point-row:hover{background:var(--row-hover);} .cl-point-text{font-size:var(--fs-base);line-height:1.4;} .cl-point-controls{display:flex;gap:8px;align-items:center;flex-shrink:0;} .cl-yn-btn{border:1.5px solid var(--line-strong);background:var(--panel);border-radius:20px;padding:5px 14px;font-size:var(--fs-xs);font-weight:700;cursor:pointer;color:var(--ink-soft);} .cl-yn-btn.yes.active{background:var(--green);border-color:var(--green);color:#fff;} .cl-yn-btn.no.active{background:var(--red);border-color:var(--red);color:#fff;} .cl-attach-btn{width:30px;height:30px;border-radius:var(--radius-sm);border:1.5px solid var(--line-strong);background:var(--panel);cursor:pointer;color:var(--ink-soft);font-size:var(--fs-base);} .cl-attach-btn.has-photo{border-color:var(--green);color:var(--green);} .cl-comment-wrap{grid-column:1/-1;padding-top:2px;} .cl-comment-wrap textarea{width:100%;font-size:var(--fs-sm);padding:8px 10px;border:1px solid var(--line);border-radius:var(--radius-sm);resize:vertical;min-height:44px;} .cl-footer{padding:18px 24px 22px;display:flex;justify-content:space-between;align-items:center;gap:12px;position:sticky;bottom:0;background:#fff;border-top:1px solid var(--line);} .cl-progress{font-size:var(--fs-xs);color:var(--ink-soft);} .checklist-tag{display:inline-block;font-size:var(--fs-2xs);font-weight:700;text-transform:uppercase;letter-spacing:0.3px;padding:3px 7px;border-radius:20px;background:var(--navy-light);color:var(--navy);white-space:nowrap;} .obs-locked select, .obs-locked input, input.obs-locked-input{background:var(--gray-bg)!important;color:var(--ink-soft)!important;cursor:not-allowed;} /* position:fixed (with top/left set in JS from the bell button's own rect) rather than absolute - .page-banner, its positioned ancestor, has overflow:hidden for its own rounded-corner gradient, which would otherwise clip this popover down to a sliver the moment its content grows past the banner's own height. */ #obsNotifPanel{position:fixed;width:320px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-lg);z-index:210;overflow:hidden;} .obs-notif-row{position:relative;padding:10px 14px 10px 20px;border-bottom:1px solid var(--line);font-size:var(--fs-sm);} .obs-notif-row:last-child{border-bottom:none;} .obs-notif-title{line-height:1.4;} .obs-notif-meta{font-size:var(--fs-xs);color:var(--ink-soft);margin-top:2px;} .obs-notif-dot{position:absolute;top:14px;left:8px;width:6px;height:6px;border-radius:50%;background:var(--green);} .obs-notif-showall-btn{width:100%;border-radius:0;border:none;border-bottom:1px solid var(--line);} #publicChecklistScreen{min-height:100vh;background:var(--bg);} @media (max-width:640px){ .cl-modal-overlay{padding:0;align-items:stretch;} .cl-modal{max-width:100%;border-radius:0;min-height:100vh;margin-bottom:0;} .cl-modal-header{padding:16px 16px 4px;} .cl-modal-header h3{padding-right:56px;font-size:var(--fs-md);} .cl-qr-btn{top:14px;right:14px;width:42px;height:42px;font-size:var(--fs-2xs);} .cl-locked-grid{grid-template-columns:1fr;gap:8px;} .cl-topic-bar{padding:9px 16px;font-size:var(--fs-xs);} .cl-point-row{grid-template-columns:1fr;padding:12px 16px;gap:8px;} .cl-point-controls{flex-wrap:wrap;} .cl-footer{padding:14px 16px 18px;flex-direction:column;align-items:stretch;gap:10px;} .cl-footer > div{width:100%;} .cl-footer > div[style*="flex"]{display:flex;gap:8px;} .cl-footer .btn{flex:1;} } /* Quality Incidents dashboard */ .qi-header{background:var(--navy);color:#fff;border-radius:var(--radius);padding:var(--sp-6);display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:var(--sp-5);} .qi-eyebrow{font-size:var(--fs-2xs);font-weight:700;letter-spacing:0.6px;color:var(--on-navy-soft);text-transform:uppercase;margin-bottom:8px;} .qi-title{font-family:'IBM Plex Sans',sans-serif;font-weight:700;font-size:var(--fs-xl);margin-bottom:4px;} .qi-subtitle{font-size:var(--fs-sm);color:var(--on-navy);} .qi-header-right{display:flex;align-items:center;gap:12px;} .qi-synced{font-size:var(--fs-xs);color:var(--on-navy-soft);font-style:italic;} .qi-header .btn.secondary{background:transparent;border:1px solid rgba(255,255,255,0.3);color:#fff;} .qi-header .btn.secondary:hover{background:rgba(255,255,255,0.1);} .qi-header .btn{background:var(--accent);} .qi-kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px;} .qi-kpi-card{background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--navy);border-radius:var(--radius);padding:16px 18px;} .qi-kpi-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;} .qi-kpi-label{font-size:var(--fs-2xs);font-weight:700;text-transform:uppercase;letter-spacing:0.4px;color:var(--ink-soft);} .qi-kpi-icon{font-size:var(--fs-md);opacity:0.7;} .qi-kpi-value{font-family:'IBM Plex Sans',sans-serif;font-weight:700;font-size:var(--fs-2xl);color:var(--navy);} .qi-kpi-sub{font-size:var(--fs-xs);color:var(--ink-soft);margin-top:3px;} .qi-chart-row{display:flex;gap:14px;margin-bottom:18px;align-items:stretch;} .qi-chart-card{flex:1;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;min-width:0;} .qi-chart-title{font-size:var(--fs-2xs);font-weight:700;text-transform:uppercase;letter-spacing:0.4px;color:var(--ink-soft);margin-bottom:14px;} .qi-filters-row{display:flex;gap:10px;align-items:center;margin-bottom:14px;flex-wrap:wrap;} .qi-filters-row input[type="text"]{flex:1;min-width:220px;padding:9px 12px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);font-size:var(--fs-base);} .qi-filters-row select{padding:9px 10px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);font-size:var(--fs-sm);background:var(--panel);} .qi-count{font-size:var(--fs-xs);color:var(--ink-soft);white-space:nowrap;margin-left:auto;} /* ===================== Non-Conformity KPI page ===================== */ .qi-kpi2-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:16px;} .qi-kpi2-title{font-family:'IBM Plex Sans',sans-serif;font-weight:700;font-size:var(--fs-xl);color:var(--navy);margin:0 0 4px;} .qi-kpi2-sub{font-size:var(--fs-sm);color:var(--ink-soft);max-width:560px;line-height:1.5;} .qi-kpi2-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;} .qi-kpi2-updated{font-size:var(--fs-xs);color:var(--ink-soft);white-space:nowrap;font-family:'IBM Plex Mono',monospace;} .qi-kpi2-filterbar{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;margin-bottom:10px;} .qi-kpi2-filter-field{display:flex;flex-direction:column;gap:4px;min-width:130px;} .qi-kpi2-filter-field label{font-size:var(--fs-2xs);font-weight:700;text-transform:uppercase;letter-spacing:0.3px;color:var(--ink-soft);} .qi-kpi2-filter-field select, .qi-kpi2-filter-field input[type="date"]{padding:8px 10px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);font-size:var(--fs-sm);background:var(--panel);color:var(--ink);} .qi-kpi2-custom-dates{display:flex;gap:6px;} .qi-kpi2-quickdates{display:flex;gap:6px;flex-wrap:wrap;} .qi-kpi2-quickdate{padding:7px 11px;font-size:var(--fs-xs);font-weight:600;border:1px solid var(--line-strong);border-radius:20px;background:var(--panel);color:var(--ink-soft);cursor:pointer;white-space:nowrap;} .qi-kpi2-quickdate:hover{border-color:var(--navy);color:var(--navy);} .qi-kpi2-quickdate.active{background:var(--navy);border-color:var(--navy);color:#fff;} .qi-kpi2-chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px;min-height:1px;} .qi-kpi2-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 8px 4px 11px;border-radius:20px;background:var(--navy-light);color:var(--navy);font-size:var(--fs-xs);font-weight:600;} .qi-kpi2-chip button{border:none;background:rgba(27,42,68,0.12);color:var(--navy);width:16px;height:16px;border-radius:50%;font-size:var(--fs-2xs);line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;} .qi-kpi2-chip button:hover{background:var(--navy);color:#fff;} .qi-kpi-row-8{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px;} .qi-kpi-card.clickable{cursor:pointer;transition:transform 120ms var(--ease-out), box-shadow 120ms var(--ease-out);} .qi-kpi-card.clickable:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(20,30,50,0.1);} .qi-kpi-card.unavailable{background:var(--navy-light);border-style:dashed;} .qi-kpi-card .qi-kpi-value-row{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;} .qi-kpi-delta{font-size:var(--fs-xs);font-weight:700;padding:1px 6px;border-radius:5px;} .qi-kpi-delta.up{color:var(--green);background:var(--green-bg);} .qi-kpi-delta.down{color:var(--red);background:var(--red-bg);} .qi-kpi-delta.flat{color:var(--ink-soft);background:var(--navy-light);} /* KPI Dashboard (Facility > Daily Production > Dashboard tab) */ .fac-kpi-filterbar{position:sticky;top:0;z-index:40;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;margin-bottom:18px;box-shadow:0 2px 10px rgba(20,30,50,0.06);} .fac-kpi-section{margin-top:28px;} .fac-kpi-section:first-of-type{margin-top:0;} .fac-kpi-section-title{font-size:var(--fs-sm);font-weight:700;color:var(--navy);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:12px;padding-bottom:8px;border-bottom:2px solid var(--line-strong);} .qi-status-pill.fac-green{color:var(--green);border-color:var(--green);background:var(--green-bg);} .qi-status-pill.fac-amber{color:var(--amber);border-color:var(--amber);background:var(--amber-bg);} .qi-status-pill.fac-red{color:var(--red);border-color:var(--red);background:var(--red-bg);} .qi-status-pill.fac-gray{color:var(--slate);border-color:var(--slate);background:var(--gray-bg);} .fac-kpi-target-track{position:relative;background:var(--navy-light);border-radius:4px;height:6px;margin:8px 0 4px;} .fac-kpi-target-fill{height:100%;border-radius:4px;} .fac-kpi-target-marker{position:absolute;top:-2px;width:2px;height:10px;background:var(--navy);} .fac-kpi-formula-tip{cursor:help;color:var(--ink-soft);font-size:var(--fs-2xs);border-bottom:1px dotted var(--ink-soft);} .qi-kpi-target{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-2xs);font-weight:700;padding:2px 7px;border-radius:5px;margin-top:6px;} .qi-kpi-target.ok{color:var(--green);background:var(--green-bg);} .qi-kpi-target.warn{color:var(--amber);background:var(--amber-bg);} .qi-kpi-target.bad{color:var(--red);background:var(--red-bg);} .qi-kpi-spark{display:block;margin-top:8px;} .qi-info-tip{position:relative;display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;border-radius:50%;background:var(--navy-light);color:var(--ink-soft);font-size:var(--fs-2xs);font-weight:700;font-style:normal;cursor:help;} .qi-info-tip:hover::after, .qi-info-tip:focus::after{ content:attr(data-tip);position:absolute;bottom:120%;left:50%;transform:translateX(-50%); width:210px;background:var(--navy-dark, var(--navy));color:#fff;font-size:var(--fs-xs);font-weight:500;line-height:1.4; padding:8px 10px;border-radius:7px;box-shadow:0 8px 20px rgba(5,8,16,0.3);z-index:20;white-space:normal;text-align:left; } .qi-kpi2-section-title{font-family:'IBM Plex Sans',sans-serif;font-weight:700;font-size:var(--fs-md);color:var(--navy);margin:26px 0 12px;padding-bottom:8px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;} .qi-kpi2-donut-wrap{position:relative;display:flex;align-items:center;justify-content:center;} .qi-kpi2-donut-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none;} .qi-kpi2-donut-center .n{font-family:'IBM Plex Sans',sans-serif;font-weight:700;font-size:var(--fs-xl);color:var(--navy);line-height:1;} .qi-kpi2-donut-center .l{font-size:var(--fs-2xs);color:var(--ink-soft);text-transform:uppercase;letter-spacing:0.3px;margin-top:2px;} .qi-kpi2-legend-item{cursor:pointer;border-radius:6px;padding:2px 5px;transition:background 100ms;} .qi-kpi2-legend-item:hover{background:var(--navy-light);} .qi-kpi2-aging-row{display:grid;grid-template-columns:80px 1fr 34px;align-items:center;gap:8px;margin-bottom:10px;} .qi-kpi2-aging-row .lbl{font-size:var(--fs-xs);color:var(--ink-soft);} .qi-kpi2-aging-row .track{background:var(--navy-light);border-radius:4px;height:16px;overflow:hidden;} .qi-kpi2-aging-row .fill{height:100%;border-radius:4px;} .qi-kpi2-aging-row .n{font-size:var(--fs-xs);font-weight:600;text-align:right;} .qi-kpi2-rank-tabs{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap;} .qi-kpi2-rank-tab{padding:6px 13px;font-size:var(--fs-sm);font-weight:600;border:1px solid var(--line-strong);border-radius:20px;background:var(--panel);color:var(--ink-soft);cursor:pointer;} .qi-kpi2-rank-tab:hover{border-color:var(--navy);color:var(--navy);} .qi-kpi2-rank-tab.active{background:var(--navy);border-color:var(--navy);color:#fff;} .qi-kpi2-unavailable{color:var(--ink-soft);font-size:var(--fs-sm);padding:22px 16px;text-align:center;background:var(--navy-light);border-radius:8px;line-height:1.6;} .qi-kpi2-unavailable b{color:var(--ink);} .qi-kpi2-uom-row{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid var(--line);font-size:var(--fs-sm);} .qi-kpi2-uom-row:last-child{border-bottom:none;} .qi-kpi2-uom-row .uom-tag{font-family:'IBM Plex Mono',monospace;font-size:var(--fs-2xs);font-weight:700;color:var(--navy);background:var(--navy-light);border-radius:5px;padding:2px 7px;margin-right:8px;} .qi-kpi2-table-toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap;} .qi-kpi2-table-toolbar input[type="text"]{padding:8px 12px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);font-size:var(--fs-sm);min-width:240px;} .qi-kpi2-pagination{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:12px;font-size:var(--fs-sm);color:var(--ink-soft);} .qi-kpi2-pagination button{padding:5px 10px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--panel);color:var(--ink);cursor:pointer;font-size:var(--fs-sm);} .qi-kpi2-pagination button:disabled{opacity:0.4;cursor:not-allowed;} .qi-table th.sortable{cursor:pointer;user-select:none;} .qi-table th.sortable .arrow{opacity:0.5;margin-left:3px;font-size:var(--fs-2xs);} .qi-table tbody tr.qi-kpi2-row-clickable{cursor:pointer;} .qi-table tbody tr.qi-kpi2-row-clickable:hover{background:var(--navy-light);} .qi-kpi2-skel{background:linear-gradient(90deg, var(--navy-light) 25%, var(--row-hover) 37%, var(--navy-light) 63%);background-size:400% 100%;animation:qiKpiShimmer 1.4s ease infinite;border-radius:6px;} @keyframes qiKpiShimmer{0%{background-position:100% 0;}100%{background-position:0 0;}} @media (max-width:1180px){ .qi-kpi-row-8{grid-template-columns:repeat(3,1fr);} } @media (max-width:900px){ #qiKpiView .qi-chart-row{flex-wrap:wrap;} #qiKpiView .qi-chart-card{flex:1 1 260px;} .qi-kpi-row-8{grid-template-columns:repeat(2,1fr);} } @media (max-width:560px){ .qi-kpi-row-8{grid-template-columns:1fr;} .qi-kpi2-head{flex-direction:column;} .qi-kpi2-actions{width:100%;justify-content:space-between;} } @media print{ body *{visibility:hidden;} #qiKpiView, #qiKpiView *{visibility:visible;} #qiKpiView{position:absolute;left:0;top:0;width:100%;padding:20px;} #qiKpiView .no-print{display:none !important;} } .qi-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);} .qi-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm);} .qi-table th{text-align:left;font-size:var(--fs-2xs);font-weight:700;text-transform:uppercase;letter-spacing:0.4px;color:var(--ink-soft);padding:10px 14px;border-bottom:1px solid var(--line);background:var(--navy-light);white-space:nowrap;} .qi-table td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top;} .qi-table tr:last-child td{border-bottom:none;} .qi-table tr:hover td{background:var(--row-hover);} /* Inline add/edit row (Facility Daily Log): a row of real inputs sized to their column instead of a popup. */ #fac-draft-row td{padding:6px 8px;} #fac-draft-row input, #fac-draft-row select{width:100%;padding:5px 6px;font-size:var(--fs-sm);border:1px solid var(--line-strong);border-radius:4px;} /* Column-group band above the Daily Log's individual column headers, mirroring the Excel's own merged section headers (Batch Info / Rice / Finished Output / Filling Film / Bundle Nylon / Shrink Wrap / etc). */ .qi-table th.fac-group-th{background:var(--navy);color:#fff;text-align:center;font-size:var(--fs-2xs);letter-spacing:0.4px;padding:6px 8px;white-space:nowrap;} /* Vertical divider at the first column of each topic band, carried down through the column headers and every row, so it's clear at a glance which columns the band above them belongs to. */ .qi-table th.fac-group-start, .qi-table td.fac-group-start{border-left:2px solid var(--navy);} /* Per-row completeness dot: green once every required field is filled, red while something's still missing - reuses --green/--red like every other status signal in the app (see .qi-status-pill etc). */ .fac-status-th{width:30px;} .fac-status-cell{text-align:center;} .fac-status-dot{display:inline-block;width:10px;height:10px;border-radius:50%;} .fac-status-dot.ok{background:var(--green);} .fac-status-dot.bad{background:var(--red);} /* Formula-derived cells: shaded so it's obvious at a glance which columns are typed vs auto-calculated - same gray already used for locked/system fields elsewhere (.obs-locked-input). */ .qi-table td.fac-computed-cell{background:var(--gray-bg);color:var(--ink-soft);} .qi-issue-badge{display:inline-block;border:1px solid var(--line-strong);border-radius:5px;padding:2px 8px;font-family:'IBM Plex Mono',monospace;font-size:var(--fs-xs);font-weight:600;color:var(--navy);} .qi-item-name{font-weight:600;color:var(--ink);margin-bottom:2px;} .qi-item-desc{font-size:var(--fs-xs);color:var(--ink-soft);max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .qi-type-badge{display:inline-block;border:1px solid;border-radius:5px;padding:2px 7px;font-size:var(--fs-2xs);font-weight:700;letter-spacing:0.3px;} .qi-type-badge.SQI{color:var(--red);border-color:var(--red);background:var(--red-bg);} .qi-type-badge.QI{color:var(--blue);border-color:var(--blue);background:var(--blue-bg);} .qi-type-badge.QA{color:var(--purple);border-color:var(--purple);background:var(--purple-bg);} /* Neutral variant for badge-shaped labels that carry no red/blue/purple status meaning (e.g. a free-text complaint "type" field). */ .qi-type-badge.slate{color:var(--slate);border-color:var(--line-strong);background:var(--gray-bg);} .qi-status-pill{display:inline-flex;align-items:center;gap:4px;border-radius:20px;padding:3px 10px;font-size:var(--fs-xs);font-weight:700;border:1px solid;} .qi-status-pill.Closed{color:var(--green);border-color:var(--green);background:var(--green-bg);} .qi-status-pill.Open{color:var(--red);border-color:var(--red);background:var(--red-bg);} /* "In progress"/"pending verification" states use purple, not amber - a deliberate 4th semantic color for "actively being worked on" (distinct from amber's "not yet started/due soon"), consistent everywhere it's used (this pill, the QA type badge above, and chart legends). */ .qi-status-pill.In-Progress{color:var(--purple);border-color:var(--purple);background:var(--purple-bg);} /* Audit lifecycle statuses */ .qi-status-pill.Planned{color:var(--amber);border-color:var(--amber);background:var(--amber-bg);} .qi-status-pill.Completed{color:var(--green);border-color:var(--green);background:var(--green-bg);} .qi-status-pill.Cancelled{color:var(--slate);border-color:var(--slate);background:var(--gray-bg);} /* CAPA verification stage */ .qi-status-pill.Pending-Verification{color:var(--purple);border-color:var(--purple);background:var(--purple-bg);} /* Dept. Tracker owner initial */ .dept-avatar{ width:30px; height:30px; border-radius:50%; flex-shrink:0; background:linear-gradient(160deg, var(--accent), var(--navy)); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'IBM Plex Sans',sans-serif; font-weight:700; font-size:var(--fs-sm); } /* User Management — permission picker */ .cp-modal-wide{ max-width:900px; } /* Invite / Edit user modal */ .um-modal{ padding:0; display:flex; flex-direction:column; max-height:88vh; } .um-head{ background:linear-gradient(160deg, var(--navy-3) 0%, var(--navy) 100%); padding:18px 24px; display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-shrink:0; } .um-eyebrow{ display:flex; align-items:center; gap:8px; font-size:var(--fs-2xs); font-weight:700; letter-spacing:1.1px; text-transform:uppercase; color:var(--on-navy-dim); } .um-title{ font-family:'IBM Plex Sans',sans-serif; font-weight:700; font-size:var(--fs-xl); color:#fff; letter-spacing:-0.3px; margin-top:6px; } .um-sub{ font-size:var(--fs-sm); color:var(--on-navy-soft); margin-top:4px; } .um-body{ padding:6px 24px 4px; overflow-y:auto; flex:1; min-height:0; } .um-section{ padding:18px 0; border-bottom:1px solid var(--line); } .um-section:last-child{ border-bottom:none; } .um-section-head{ display:flex; align-items:flex-start; gap:11px; margin-bottom:13px; } .um-step{ width:22px; height:22px; border-radius:50%; flex-shrink:0; background:var(--navy-light); color:var(--navy); display:flex; align-items:center; justify-content:center; font-family:'IBM Plex Mono',monospace; font-size:var(--fs-xs); font-weight:700; } .um-section-title{ font-size:var(--fs-base); font-weight:700; color:var(--navy); letter-spacing:-0.1px; } .um-section-hint{ font-size:var(--fs-xs); color:var(--ink-soft); margin-top:2px; line-height:1.5; } .um-section-actions{ margin-left:auto; display:flex; gap:8px; flex-shrink:0; } .um-fields{ display:grid; grid-template-columns:1fr 1fr; gap:14px; } .um-fields label{ display:block; font-size:var(--fs-xs); font-weight:600; color:var(--ink-soft); margin-bottom:5px; } .um-fields input, .um-fields select{ width:100%; padding:9px 11px; font-size:var(--fs-base); border-radius:var(--radius-sm); } .um-req{ font-weight:500; color:var(--accent); letter-spacing:0; } .um-hint{ font-size:var(--fs-xs); color:var(--ink-soft); margin-top:6px; } .um-pass-row{ display:flex; gap:8px; } .um-pass-row input{ flex:1; padding:9px 11px; font-size:var(--fs-base); font-family:'IBM Plex Mono',monospace; border-radius:var(--radius-sm); } .um-strength{ height:4px; border-radius:3px; background:var(--line); margin-top:9px; overflow:hidden; } .um-strength span{ display:block; height:100%; width:0; border-radius:3px; background:var(--line-strong); transition:width .2s ease, background .2s ease; } .um-strength span.weak{ background:var(--red); } .um-strength span.ok{ background:var(--amber); } .um-strength span.good{ background:var(--green); } .um-fields-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; } /* Multi-select fields (Region/Company/Department): a button that opens a checkbox panel beneath it instead of a native