/* JRC Assignment System — App Styles */ /* Loaded via */ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap'); /* Hide login screen instantly when in partner mode — no flash */ .partner-mode #login-screen { display: none !important; } .partner-mode #main-app { display: block !important; } .partner-mode #partner-header { display: none !important; } .partner-mode #main-header { display: none !important; } .partner-mode .app { background: transparent !important; padding: 0 !important; max-width: 100% !important; } .partner-mode body { background: #001F40 !important; overflow: hidden; margin: 0; padding: 0; } #partner-orbs .orb { position: absolute; } .partner-mode #panel-reqform { z-index: 1; } .partner-mode #panel-reqform .card { position: relative; z-index: 2; } .partner-mode #main-app { padding: 0 !important; margin: 0 !important; } .partner-mode .app-layout { padding: 0 !important; margin: 0 !important; } .partner-mode .app-content { padding: 0 !important; margin: 0 !important; } .partner-mode .tab-bar-wrap { display: none !important; height: 0 !important; } .partner-mode #tab-bar { display: none !important; height: 0 !important; } .partner-mode #partner-header { display: none !important; height: 0 !important; } .partner-mode #main-header { display: none !important; height: 0 !important; } .partner-mode #logout-wrap-inner { display: none !important; height: 0 !important; } .partner-mode #panel-reqform { min-height: 100vh; padding: 16px 20px; position: relative; z-index: 1; } .partner-mode #panel-reqform .card { max-width: 720px; margin: 0 auto; position: relative; z-index: 2; } *{box-sizing:border-box;margin:0;padding:0} /* DM Sans loaded via Google Fonts */ :root{ /* ── Brand primitives ── */ --navy:#002E5D;--navy-dk:#001F40;--navy-md:#003d7a;--navy-lt:#E8EEF5;--navy-glass:rgba(0,46,93,.72); --orange:#EF7622;--orange-dk:#C85F10;--orange-lt:#FDF0E6;--orange-glow:rgba(239,118,34,.25); --green:#27AE60;--green-lt:#E8F8EF;--red:#C0392B;--red-lt:#FDEDED;--gold:#F0A500;--gold-lt:#FFF8E1; --gray-50:#F8F9FA;--gray-100:#F0F4F8;--gray-150:#E6ECF3;--gray-200:#D0D9E4; --gray-400:#8899AA;--gray-600:#556677;--gray-700:#334455;--white:#fff; /* ── Semantic aliases ── */ --surface:var(--white); --surface-raised:#FFFFFF; --surface-overlay:rgba(255,255,255,.92); --ink:var(--gray-700); --ink-subtle:var(--gray-400); --ink-on-dark:#fff; --accent:var(--orange); --accent-dk:var(--orange-dk); --focus-ring:0 0 0 3px var(--orange-glow); /* ── Elevation shadows ── */ --sh-1:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04); --sh-2:0 2px 6px rgba(0,0,0,.08),0 1px 3px rgba(0,0,0,.05); --sh-3:0 4px 14px rgba(0,0,0,.10),0 2px 6px rgba(0,0,0,.06); --sh-4:0 8px 28px rgba(0,0,0,.13),0 4px 10px rgba(0,0,0,.08); --sh-5:0 20px 60px rgba(0,0,0,.18),0 8px 24px rgba(0,0,0,.10); /* ── Radius scale ── */ --r-sm:4px;--r-md:4px;--r-lg:4px;--r-xl:4px;--r-2xl:4px;--r-pill:4px; /* ── Motion ── */ --dur-fast:120ms;--dur-base:200ms;--dur-slow:350ms; --ease-out:cubic-bezier(.16,1,.3,1); --ease-spring:cubic-bezier(.34,1.56,.64,1); --ease-in-out:cubic-bezier(.4,0,.2,1); /* ── Type ── */ --font:'DM Sans','Source Sans 3','Segoe UI',system-ui,sans-serif; --font-display:'DM Sans','Oswald',sans-serif; --text-xs:11px;--text-sm:12px;--text-base:13px;--text-md:14px;--text-lg:16px;--text-xl:20px;--text-2xl:26px; --leading-tight:1.2;--leading-base:1.5; --tracking-tight:-.02em;--tracking-wide:.05em;--tracking-wider:.08em; } body{font-family:var(--font);font-weight:400;font-size:14px;color:rgba(255,255,255,.9);min-height:100vh; background:#091A35; background-image: radial-gradient(ellipse 80% 50% at 10% 0%, rgba(0,61,122,.7) 0%, transparent 60%), radial-gradient(ellipse 60% 40% at 90% 100%, rgba(239,118,34,.07) 0%, transparent 55%); background-attachment:fixed; -webkit-font-smoothing:antialiased; } .app{max-width:1100px;margin:0 auto;padding:12px} /* HEADER */ .header{ background:linear-gradient(135deg,var(--navy-dk) 0%,var(--navy) 60%,var(--navy-md) 100%); border-radius:4px;padding:14px 20px;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:8px;margin-bottom:16px; box-shadow:var(--sh-4),inset 0 1px 0 rgba(255,255,255,.08); border-bottom:3px solid var(--orange); position:sticky;top:0;z-index:200; backdrop-filter:blur(12px); /* subtle noise texture */ background-image:linear-gradient(135deg,var(--navy-dk) 0%,var(--navy) 60%,var(--navy-md) 100%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E"); background-blend-mode:normal,overlay; } .header::after{ content:'';position:absolute;inset:0;border-radius:4px; background:linear-gradient(180deg,rgba(255,255,255,.06) 0%,transparent 50%); pointer-events:none; } .header-logo{width:56px;height:50px;object-fit:contain;flex-shrink:0} .header-text{flex:1} .header-title{font-size:18px;font-weight:700;color:#fff;letter-spacing:.04em;font-family:'DM Sans',sans-serif;font-weight:700;text-transform:uppercase} .header-sub{font-size:11px;color:#99BBDD;margin-top:1px;letter-spacing:.03em;font-family:'DM Sans',sans-serif;font-weight:700} .header-date{font-size:12px;color:#667788;text-align:right;line-height:1.5} /* TABS */ .tab-bar{display:flex;gap:2px;margin-bottom:14px;flex-wrap:wrap;background:rgba(0,0,0,.3);border-radius:4px;padding:4px;border:1px solid rgba(255,255,255,.06);} .tab{padding:7px 14px;font-size:11px;font-weight:700;cursor:pointer;border:none;background:transparent;color:rgba(255,255,255,.6);border-radius:4px;white-space:nowrap;transition:all var(--dur-base) var(--ease-out);letter-spacing:.07em;text-transform:uppercase;font-family:'DM Sans',sans-serif;} .tab:hover{color:rgba(255,255,255,.9);background:rgba(255,255,255,.07);} .tab.active{color:#fff;background:linear-gradient(135deg,var(--navy-md) 0%,var(--navy) 100%);box-shadow:0 0 0 1px rgba(239,118,34,.4),var(--sh-2);border-bottom:2px solid var(--orange);} .panel{display:none} .panel.active{display:block;animation:panelFade .15s ease forwards} @keyframes panelFade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}} .app{padding-top:0} /* STATS */ .stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:16px;} .stat{background:rgba(0,46,93,.6);border-radius:4px;padding:14px 16px;border:1px solid rgba(255,255,255,.08);border-top:3px solid var(--orange);box-shadow:var(--sh-2);transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)} .stat-lbl{font-size:12px;color:rgba(255,255,255,.55);text-transform:uppercase;letter-spacing:.1em;margin-bottom:4px;font-family:'DM Sans',sans-serif;font-weight:700} .stat-val{font-size:30px;font-weight:800;color:#fff;line-height:1;font-family:var(--font-display);letter-spacing:-.03em} /* BUTTONS */ .btn{padding:8px 16px;font-size:12px;font-weight:700;border:1px solid rgba(255,255,255,.12);border-radius:4px;cursor:pointer;background:rgba(255,255,255,.06);color:rgba(255,255,255,.8);transition:all .15s;display:inline-flex;align-items:center;gap:5px;font-family:var(--font);} .btn:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2);color:#fff;} .btn:active{transform:scale(.97)} .btn-primary{background:var(--navy-md);color:#fff;border-color:rgba(255,255,255,.15);} .btn-primary:hover{background:var(--navy);} .btn-orange{background:linear-gradient(135deg,var(--orange),var(--orange-dk));color:#fff;border-color:transparent;box-shadow:0 2px 12px rgba(239,118,34,.35);} .btn-orange:hover{box-shadow:0 0 20px rgba(239,118,34,.5);transform:translateY(-1px);} .btn-sm{padding:7px 10px;font-size:12px;min-height:32px} .btn-danger{border-color:rgba(239,68,68,.4);color:#FCA5A5;background:rgba(239,68,68,.08);} .btn-danger:hover{background:rgba(239,68,68,.18);border-color:rgba(239,68,68,.6);} .action-row{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap;align-items:center} /* BADGES */ .badge{display:inline-block;font-size:12px;font-weight:700;padding:2px 7px;border-radius:4px;white-space:nowrap;text-transform:uppercase;letter-spacing:.04em} .b-ageout{background:rgba(245,158,11,.15);color:#FCD34D;border:1px solid rgba(245,158,11,.3);} .b-full{background:rgba(34,197,94,.15);color:#86EFAC;border:1px solid rgba(34,197,94,.3);} .b-open{background:rgba(59,130,246,.12);color:#93C5FD;border:1px solid rgba(59,130,246,.25);} .b-hat{background:rgba(255,255,255,.08);color:rgba(255,255,255,.6);} .b-shift{background:var(--navy-md);color:#fff;} .b-title{background:rgba(239,118,34,.15);color:#FDBA74;border:1px solid rgba(239,118,34,.3);} .b-all20{background:var(--navy);color:var(--white);font-size:11px} /* CARDS */ .card{background:rgba(0,30,60,.55);border:1px solid rgba(255,255,255,.08);border-radius:4px;padding:14px 16px;box-shadow:var(--sh-2)} .section-lbl{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.4);margin-bottom:10px;font-family:'DM Sans',sans-serif;} /* SLOT CARDS */ .slot-card{background:rgba(0,40,90,.5);border:1px solid rgba(255,255,255,.08);border-left:3px solid var(--navy-md);border-radius:4px;padding:14px 16px;box-shadow:var(--sh-2);transition:box-shadow .2s,transform .2s} .slot-card.sent{background:rgba(239,118,34,.08);border:1px solid rgba(239,118,34,.4) !important;border-left:3px solid var(--orange) !important;box-shadow:var(--sh-2);} .slot-card.sent .slot-name{color:#FDBA74;font-weight:700} .slot-card.sent .slot-status-tag{font-weight:800;letter-spacing:.04em} .slot-card:hover{box-shadow:var(--sh-3);transform:translateY(-2px);border-color:rgba(255,255,255,.15);} .slot-card.full{border-left-color:var(--green);background:rgba(0,60,20,.25);} .slot-name{font-size:13px;font-weight:800;color:rgba(255,255,255,.92);font-family:'DM Sans',sans-serif;text-transform:uppercase;letter-spacing:.04em} .slot-meta{font-size:11px;color:rgba(255,255,255,.5);margin:4px 0 8px;display:flex;gap:8px;flex-wrap:wrap;align-items:center} .prog-bar{height:5px;background:var(--gray-100);border-radius:4px;overflow:hidden;margin-bottom:7px} .prog-fill{height:100%;background:var(--navy-md);border-radius:4px;transition:width .4s} .prog-fill.warn{background:var(--orange)} .prog-fill.done{background:var(--green)} .assignees{display:flex;flex-wrap:wrap;gap:5px;min-height:24px} .pill{font-size:12px;padding:4px 10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:4px;color:rgba(255,255,255,.88);display:flex;align-items:center;gap:4px;cursor:grab;user-select:none;transition:opacity .15s,box-shadow .15s} .pill:active{cursor:grabbing} .pill.dragging{opacity:.35;pointer-events:none} .slot-card.drag-over{border-left-color:var(--orange) !important;background:#FFFBF5;box-shadow:0 0 0 2px var(--orange)} .pill.ao{background:#FFF3CD;border-color:var(--gold);color:#7D4E00;font-weight:600} .pill-x{cursor:pointer;color:var(--gray-400);font-size:14px;line-height:1;background:none;border:none;padding:0;transition:color .1s} .pill-x:hover{color:var(--red)} /* POOL */ .pool{display:flex;flex-wrap:wrap;gap:6px;min-height:40px;padding:10px;background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.07);border-radius:4px;margin-bottom:14px} .chip{font-size:12px;padding:5px 12px;background:rgba(0,40,90,.5);border:1px solid rgba(255,255,255,.1);border-radius:4px;box-shadow:0 1px 3px rgba(0,0,0,.2);cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:all .15s;color:rgba(255,255,255,.85);} .chip.ao{background:#FFF3CD;border-color:var(--gold);color:#7D4E00;font-weight:700} .chip-nohat{border-style:dashed} .empty-note{font-size:13px;color:var(--gray-400)} /* ALERTS */ .alert{padding:9px 14px;border-radius:4px;font-size:13px;margin-bottom:12px;font-weight:500;border:1px solid} .alert-success{background:rgba(34,197,94,.12);color:#86EFAC;border-color:rgba(34,197,94,.3);} .alert-warn{background:rgba(245,158,11,.12);color:#FCD34D;border-color:rgba(245,158,11,.3);} .alert-info{background:rgba(59,130,246,.12);color:#93C5FD;border-color:rgba(59,130,246,.3);} .alert-danger{background:rgba(239,68,68,.12);color:#FCA5A5;border-color:rgba(239,68,68,.3);} /* SHIFT TABS */ .shift-tabs{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap} .shift-tab{padding:8px 20px;font-size:12px;font-weight:700;border:1px solid rgba(255,255,255,.1);border-radius:4px;cursor:pointer;background:rgba(255,255,255,.04);color:rgba(255,255,255,.55);text-transform:uppercase;letter-spacing:.06em;transition:all .15s} .shift-tab:hover{background:rgba(255,255,255,.09);color:rgba(255,255,255,.85);} .shift-tab.active{background:linear-gradient(135deg,var(--orange),var(--orange-dk));color:#fff;border-color:transparent;box-shadow:0 2px 16px rgba(239,118,34,.45);} /* AGE-OUT QUEUE */ .ao-card{background:rgba(239,118,34,.06);border:1px solid rgba(239,118,34,.25);border-radius:4px;padding:12px 16px;margin-bottom:14px} .ao-title{font-size:12px;font-weight:800;color:#FDBA74;margin-bottom:10px;display:flex;align-items:center;gap:8px;text-transform:uppercase;letter-spacing:.08em;flex-wrap:wrap} .ao-btn{padding:8px 14px;font-size:12px;font-weight:700;background:rgba(255,255,255,.04);border:1px solid rgba(239,118,34,.3);border-radius:4px;cursor:pointer;color:#FDBA74;white-space:nowrap;transition:all .15s;font-family:var(--font);} .ao-btn:hover{background:rgba(239,118,34,.12);border-color:rgba(239,118,34,.5);color:#fff;} .ao-btn.active{background:linear-gradient(135deg,var(--orange),var(--orange-dk));color:#fff;border-color:transparent;box-shadow:0 2px 12px rgba(239,118,34,.4);} .ao-btn.done{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.08);color:rgba(255,255,255,.2);cursor:default;text-decoration:line-through} .order-badge{width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,var(--orange),var(--orange-dk));color:#fff;font-size:12px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;margin-right:4px;flex-shrink:0;box-shadow:0 0 8px rgba(239,118,34,.4);} /* PICK PANEL */ .pick-panel{background:rgba(0,30,60,.7);border:1px solid rgba(239,118,34,.3);border-radius:4px;padding:14px 16px;margin-bottom:14px;box-shadow:0 0 30px rgba(239,118,34,.1);} .pick-header{font-size:16px;font-weight:800;color:#fff;margin-bottom:4px} .pick-sub{font-size:13px;color:rgba(255,255,255,.45);margin-bottom:12px} .pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(185px,1fr));gap:8px} .pick-btn{padding:10px 14px;text-align:left;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:4px;cursor:pointer;transition:all .15s} .pick-btn:hover{background:rgba(255,255,255,.08);border-color:rgba(34,197,94,.4);} .pick-btn.repeat{border-color:rgba(239,118,34,.35);background:rgba(239,118,34,.07);} .pick-btn-name{font-weight:700;color:rgba(255,255,255,.92);margin-bottom:3px;font-size:13px} .pick-btn-cap{font-size:11px;color:rgba(255,255,255,.4);} /* FORMS */ .finput{width:100%;padding:9px 12px;border:1px solid rgba(255,255,255,.12);border-radius:4px;font-size:13px;font-family:var(--font);background:rgba(0,0,0,.3);color:rgba(255,255,255,.9);transition:border-color var(--dur-fast),box-shadow var(--dur-fast);} .finput::placeholder{color:rgba(255,255,255,.25);} .finput:focus{outline:none;border-color:rgba(239,118,34,.6);box-shadow:0 0 0 3px rgba(239,118,34,.2);} select.finput{cursor:pointer;} select.finput option{background:#1a2b45;color:#fff;} /* TABLE */ .tbl{width:100%;font-size:12px;border-collapse:collapse;table-layout:fixed} .tbl th{text-align:left;padding:8px 7px;color:rgba(255,255,255,.5);font-weight:700;border-bottom:1px solid rgba(255,255,255,.12);font-size:11px;text-transform:uppercase;letter-spacing:.06em} .tbl td{padding:7px 7px;border-bottom:1px solid rgba(255,255,255,.05);vertical-align:middle;color:rgba(255,255,255,.85);} .tbl tr:hover td{background:rgba(255,255,255,.03);} .tbl tr.ao-row td{background:none} .tbl tr.ao-row:hover td{background:var(--surface-2,#F8F9FA)} /* HISTORY PILLS */ .hist-pill{font-size:12px;padding:2px 7px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:4px;color:rgba(255,255,255,.45);white-space:nowrap;display:inline-block;margin:1px} .hist-pill.current{background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.3);color:#86EFAC;font-weight:700} /* KIOSK */ .kiosk-wrap{max-width:440px;margin:0 auto;text-align:center;padding:1rem 0} .kiosk-title{font-size:26px;font-weight:800;color:#fff;margin-bottom:4px;font-family:'DM Sans',sans-serif;text-transform:uppercase;letter-spacing:.05em} .kiosk-sub{font-size:14px;color:rgba(255,255,255,.55);margin-bottom:1.5rem} .kiosk-input{width:100%;font-size:36px;text-align:center;padding:16px;border:1px solid rgba(255,255,255,.1);border-radius:4px;background:rgba(0,0,0,.4);color:#fff;letter-spacing:8px;margin-bottom:14px;font-weight:700;transition:border-color .2s,box-shadow .2s;} .kiosk-input:focus{outline:none;border-color:rgba(239,118,34,.6);box-shadow:0 0 20px rgba(239,118,34,.3);} .kiosk-btn{width:100%;padding:16px;font-size:15px;font-weight:800;border:1px solid rgba(255,255,255,.12);border-radius:4px;background:rgba(255,255,255,.06);color:rgba(255,255,255,.85);cursor:pointer;margin-bottom:10px;text-transform:uppercase;letter-spacing:.06em;transition:all .15s;font-family:var(--font);} .kiosk-btn:hover{background:rgba(255,255,255,.12);color:#fff;} .kiosk-btn:active{transform:scale(.98)} .confirm-box{background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.1);border-left:4px solid var(--orange);border-radius:4px;padding:16px;margin-bottom:14px;text-align:left;backdrop-filter:blur(10px);} .confirm-name{font-size:22px;font-weight:800;color:#fff;margin-bottom:4px} .confirm-detail{font-size:13px;color:rgba(255,255,255,.5);margin-bottom:4px} .check-icon{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,#16a34a,var(--green));display:flex;align-items:center;justify-content:center;margin:0 auto 16px;font-size:36px;color:#fff;box-shadow:0 0 20px rgba(34,197,94,.3);} /* SETUP */ .setup-section{background:rgba(0,30,60,.5);border:1px solid rgba(255,255,255,.07);border-radius:4px;padding:14px 16px;margin-bottom:12px} .lib-row{display:grid;grid-template-columns:2fr 70px 1fr 55px 60px;gap:6px;align-items:center;padding:8px 0;border-bottom:1px solid var(--gray-100)} .lib-row:last-child{border-bottom:none} /* DATE SIMULATOR */ .date-sim{background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.25);border-radius:4px;padding:8px 14px;margin-bottom:14px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:12px;color:#FCD34D} .date-sim strong{font-weight:700} /* SHIFT PREVIEW */ .shift-preview{background:var(--white);border:1px solid var(--gray-200);border-radius:4px;margin-top:12px;overflow:hidden} .shift-preview-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--gray-200)} .shift-preview-title{font-size:13px;font-weight:700;color:var(--navy)} .shift-preview-count{font-size:11px;color:var(--gray-400);font-weight:600} .shift-block{border-bottom:1px solid var(--gray-100)} .shift-block:last-child{border-bottom:none} .shift-block-header{display:flex;align-items:center;justify-content:space-between;padding:8px 14px;background:var(--gray-50);border-bottom:1px solid var(--gray-100)} .shift-block-title{font-size:12px;font-weight:700;color:var(--navy);text-transform:uppercase;letter-spacing:.05em} .shift-block-meta{font-size:11px;color:var(--gray-400)} .shift-block-actions{display:flex;gap:6px;align-items:center} .preview-row{display:grid;grid-template-columns:1fr 50px 80px;gap:0;align-items:center;padding:6px 14px;border-bottom:1px solid var(--gray-50);font-size:13px} .preview-row:last-child{border-bottom:none} .preview-row:hover{background:var(--gray-50)} .preview-row.added{background:#F0FAF0} .preview-name{color:var(--navy);font-weight:500} .preview-cap{text-align:center;font-weight:700;color:var(--orange)} .preview-status{text-align:right;font-size:11px} .btn-add-one{font-size:11px;padding:2px 8px;border-color:var(--navy);color:var(--navy)} .btn-add-one.added{border-color:var(--green);color:#155724;background:#F0FAF0} /* FORM LABELS */ .form-lbl{font-size:12px;color:rgba(255,255,255,.55);margin-bottom:4px;font-weight:600} .phone-err{font-size:11px;color:var(--red);margin-top:3px;display:none} .finput.input-err{border-color:var(--red)} .finput.input-ok{border-color:var(--green)} .req-card{background:rgba(0,30,60,.5);border:1px solid rgba(255,255,255,.07);border-left:3px solid var(--orange);border-radius:4px;padding:14px 16px;margin-bottom:10px} .req-card.approved{border-left-color:var(--green)} .req-card.rejected{border-left-color:var(--red);opacity:.6} .req-badge{display:inline-block;font-size:12px;font-weight:700;padding:2px 8px;border-radius:4px;text-transform:uppercase;letter-spacing:.05em} .req-badge.pending{background:rgba(245,158,11,.12);color:#FCD34D;border:1px solid rgba(245,158,11,.3);} .req-badge.approved{background:rgba(34,197,94,.12);color:#86EFAC;} .req-badge.rejected{background:rgba(239,68,68,.12);color:#FCA5A5;} .shift-pill{display:inline-flex;align-items:center;gap:4px;font-size:11px;padding:3px 8px;background:var(--navy-lt);color:var(--navy);border-radius:4px;font-weight:600;margin:2px} .specific-shift-row{display:grid;grid-template-columns:140px 1fr 1fr 80px 32px;gap:8px;align-items:center;margin-bottom:8px;padding:8px 10px;background:var(--gray-50);border-radius:4px;border:1px solid var(--gray-200)} /* STATUS BOARD */ /* ── STATUS BOARD — TV-optimized, 60" screen readable at 6ft ── */ .board-wrap{padding:0;background:var(--navy);min-height:100%;color:#fff;display:flex;flex-direction:column} .board-header{padding:10px 24px 8px;border-bottom:2px solid var(--orange);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;position:sticky;top:0;z-index:10;background:var(--navy);} .board-title{font-size:20px;font-weight:800;color:#fff;letter-spacing:.06em;text-transform:uppercase;} /* Body: left=CI, right=Assigned+Out stacked */ .board-body{ display:grid; grid-template-columns:180px 1fr; /* CI always fixed narrow width */ gap:0;flex:1;min-height:0;overflow:hidden; height:calc(100vh - 120px); } /* Left: checked-in panel */ .board-waiting-col{border-right:2px solid rgba(255,255,255,.15);display:flex;flex-direction:column;overflow:hidden;min-height:0} .board-ci-section{flex:0 0 50%;overflow-y:auto;overflow-x:hidden;padding:8px 10px 4px;min-height:0} /* Right panel: assigned stacked above out-on-shift */ .board-right-col{display:flex;flex-direction:column;overflow:hidden;min-height:0;flex:1} .board-ass-section{flex:0 0 50%;overflow-y:auto;overflow-x:hidden;padding:4px 10px 8px;border-top:1px solid rgba(255,255,255,.15);min-height:0} .board-out-col{flex:1;overflow-y:auto;padding:8px 14px;min-height:0;scroll-behavior:auto} /* Column headers */ .board-col-hdr{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px;padding-bottom:3px;border-bottom:1px solid rgba(255,255,255,.15);position:sticky;top:0;background:var(--navy);z-index:1;white-space:nowrap} .board-col-hdr.ci{color:#60A5FA} .board-col-hdr.assigned{color:var(--orange)} .board-col-hdr.out{color:var(--orange)} .board-col-hdr.pending{color:#FBBF24} /* Names */ .board-name{font-size:15px;padding:1px 2px;color:#fff;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .board-name.out{color:var(--orange);font-weight:700;line-height:1.15} .board-name.pending{color:#F5A623;font-style:italic} .board-name.late{color:#FF6B6B;font-weight:700} .board-empty{font-size:12px;color:rgba(255,255,255,.3);font-style:italic;padding:2px 0} .board-col-gap{height:8px} /* Shift pill */ .board-shift-pill{display:inline-block;font-size:11px;font-weight:700;padding:0 4px;border-radius:4px;color:#001F40;margin-right:3px;vertical-align:middle} /* Out-on-shift committee groups in CSS columns */ .board-out-inner{column-gap:6px} .board-out-inner.cols1{column-count:1} .board-out-inner.cols2{column-count:2} .board-out-inner.cols3{column-count:3} .board-out-inner.cols4{column-count:4} .board-out-inner.cols5{column-count:5} .board-committee-group{break-inside:avoid;margin-bottom:3px} .board-committee-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--orange);margin-bottom:0;display:flex;align-items:center;gap:4px} .board-committee-label.late{color:#FF6B6B} .board-shift-divider{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#99BBDD;margin:4px 0 2px;padding-bottom:1px;border-bottom:1px solid rgba(255,255,255,.12);break-after:avoid} /* Hide scrollbars on board — content scrolls via JS, no visible bar */ .board-ci-section::-webkit-scrollbar, .board-ass-section::-webkit-scrollbar, .board-out-col::-webkit-scrollbar{display:none} .board-ci-section, .board-ass-section, .board-out-col{-ms-overflow-style:none;scrollbar-width:none} /* Board header sticks — content scrolls underneath but header stays on top */ .board-wrap{position:relative} .board-header{position:sticky;top:0;z-index:10;flex-shrink:0} .board-body{overflow:hidden} /* prevents content bleeding into header */ /* ── TV MODE (?tv=1) ── */ .tv-mode *{pointer-events:none !important;cursor:none !important;user-select:none !important} .tv-mode body,.tv-mode html{overflow:hidden;height:100%} .tv-mode .board-wrap{height:100vh;overflow:hidden} .tv-mode #main-header,.tv-mode #logout-wrap,.tv-mode .tab-bar,.tv-mode #tab-bar{display:none!important} .tv-mode .app{padding:0!important;max-width:100%!important} .tv-mode #main-app{padding:0!important} .tv-mode .panel{padding:0!important} .tv-mode .board-header{padding:10px 32px 8px} .tv-mode .board-title{font-size:clamp(18px,1.8vw,26px)} .tv-mode #board-date-lbl{font-size:clamp(12px,1.1vw,16px)} .tv-mode #board-clock{font-size:clamp(28px,3vw,48px)!important;font-weight:700} .tv-mode .board-body{height:calc(100vh - 62px) !important;overflow:hidden;grid-template-columns:200px 1fr !important} .tv-mode .board-name{font-size:clamp(15px,1.4vw,20px);padding:clamp(1px,.12vh,2px) 2px;line-height:1.2} .tv-mode .board-col-hdr{font-size:clamp(10px,.9vw,14px)} .tv-mode .board-committee-label{font-size:clamp(9px,.85vw,12px)} .tv-mode .board-shift-pill{font-size:clamp(9px,.8vw,11px)} /* Mobile fallback */ @media(max-width:640px){ .board-body{grid-template-columns:1fr;overflow-y:auto;height:auto} .board-waiting-col{border-right:none;border-bottom:2px solid rgba(255,255,255,.12)} } /* ============================================================ MOBILE — phones (max-width: 640px) ============================================================ */ @media (max-width: 640px) { /* App container */ .app { padding: 8px; } /* Header */ .header { padding: 12px; gap: 6px; border-radius:4px; margin-bottom: 10px; } .header img { max-width: 180px !important; } .header img[style*="height:28px"] { height: 20px !important; } #hdr-info { font-size: 10px; } /* Tab bar — scrollable single row */ .tab-bar { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 0; padding-bottom: 2px; } .tab-bar::-webkit-scrollbar { display: none; } .tab { padding: 8px 12px; font-size: 10px; white-space: nowrap; } /* Stats grid — 2x2 on phone */ .stats { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px; } .stat-card { padding: 10px 12px; } .stat-val { font-size: 22px; } /* Kiosk */ .kiosk-wrap { padding: 0.5rem 0; } .kiosk-title { font-size: 20px; } .kiosk-input { font-size: 26px; padding: 12px; letter-spacing: 4px; } .kiosk-btn { font-size: 15px; padding: 14px; } /* Slot cards — full width, tighter */ .slot-card { padding: 10px 10px; } .slot-name { font-size: 13px; } /* Officer dashboard — stack buttons */ .action-row { flex-wrap: wrap; gap: 6px; } .action-row .btn { font-size: 12px; padding: 7px 10px; } /* Shift tabs */ .shift-tabs { gap: 4px; } .shift-tab { font-size: 11px; padding: 6px 10px; } /* Roster table — hide less important columns */ .r-col-contact { display: none; } .r-col-log { display: none; } #r-body td:nth-child(4), #r-body td:nth-child(6), thead tr th:nth-child(4), thead tr th:nth-child(6) { display: none; } /* Status board — stack columns vertically */ .board-cols { grid-template-columns: 1fr; } .board-col { border-right: none; border-bottom: 1px solid rgba(255,255,255,.08); } .board-body { padding: 8px; } .board-shift-header { padding: 8px 12px; } /* Cards / forms */ .card { padding: 12px; } .finput { font-size: 16px !important; } /* prevent iOS zoom on focus */ /* Login screen */ .login-card { padding: 20px 16px; } /* Sign out button */ #logout-btn { font-size: 11px; padding: 4px 8px; } #user-badge { font-size: 11px; } /* Pill names — allow wrap */ .pill { font-size: 11px; padding: 3px 6px; } /* Report modal */ #report-wrap { margin: 0 !important; } } /* PRINT */ .print-view{background:var(--white);border:2px solid var(--navy);border-radius:4px;padding:20px;margin-top:12px} .print-header{border-bottom:2px solid var(--navy);padding-bottom:10px;margin-bottom:16px} .print-slot{margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--gray-200)} .print-line{padding:5px 0;border-bottom:1px solid var(--gray-100);font-size:13px} .print-line.empty{color:var(--gray-400)} @media print{ .no-print{display:none!important} } /* LOGIN */ @keyframes rise { 0% { transform:translateY(0) scale(1); opacity:.9; } 100% { transform:translateY(-110vh) scale(.6); opacity:0; } } @keyframes rise { 0% { transform:translateY(0) scale(1); opacity:.9; } 100% { transform:translateY(-110vh) scale(.6); opacity:0; } } .login-screen{ display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px; background:#001F40; position:relative; overflow:hidden; } .login-screen .orb{ position:absolute;border-radius:50%;background:#EF7622; animation:rise linear infinite;pointer-events:none;filter:blur(1px); } .login-screen .orb{ position:absolute; border-radius:50%; background:#EF7622; animation:rise linear infinite; pointer-events:none; filter:blur(1px); } .login-card{ background:rgba(5,15,35,.92); border:1px solid rgba(255,255,255,.1); border-radius:4px;padding:28px 32px;width:calc(100% - 32px);max-width:420px; box-shadow:0 16px 60px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.06); text-align:center; backdrop-filter:blur(20px); position:relative;z-index:1} .login-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(239,118,34,.6),transparent);border-radius:4px;} .login-logos{display:flex;align-items:center;justify-content:center;gap:20px;margin-bottom:16px} .login-logo{height:72px;width:auto;object-fit:contain} .login-logo-hlsr{width:90px;height:80px;object-fit:contain} .login-divider{width:1px;height:60px;background:var(--gray-200)} .login-title{font-size:clamp(13px,4vw,20px);font-weight:800;color:#fff;margin-bottom:4px;letter-spacing:.02em;white-space:nowrap;text-align:center;width:100%;font-family:var(--font-display);} .login-sub{font-size:13px;color:rgba(255,255,255,.4);margin-bottom:24px;line-height:1.5} .role-btn{width:100%;padding:13px 16px;margin-bottom:8px;border:1px solid rgba(255,255,255,.1);border-radius:4px;background:rgba(255,255,255,.04);cursor:pointer;text-align:left;display:flex;align-items:center;gap:14px;transition:all .15s} .role-btn:hover{border-color:rgba(239,118,34,.4);background:rgba(239,118,34,.06);box-shadow:0 0 20px rgba(239,118,34,.1);} .role-btn:active{transform:scale(.99)} .role-icon{width:40px;height:40px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;background:rgba(255,255,255,.05);} .role-name{font-size:14px;font-weight:700;color:rgba(255,255,255,.9);} .role-desc{font-size:11px;color:rgba(255,255,255,.4);margin-top:2px} .pin-screen{display:none} .pin-input{width:100%;font-size:28px;text-align:center;padding:12px;border:2px solid var(--gray-200);border-radius:4px;letter-spacing:8px;font-weight:700;color:var(--navy);margin-bottom:12px;background:var(--white)} .pin-input:focus{outline:none;border-color:var(--orange)} .login-err{font-size:13px;color:var(--red);font-weight:600;min-height:20px;margin-bottom:10px} .logout-wrap{position:fixed;top:18px;left:0;right:0;z-index:999;display:flex;align-items:center;justify-content:space-between;padding:0 20px;pointer-events:none} .logout-btn{font-size:11px;padding:4px 8px;white-space:nowrap;flex-shrink:0;color:rgba(255,255,255,.7);background:none;border:1px solid rgba(255,255,255,.3);border-radius:4px;cursor:pointer;pointer-events:auto} .logout-btn:hover{color:#fff;border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.1)} .user-badge{font-size:11px;color:rgba(255,255,255,.55);white-space:nowrap;letter-spacing:.03em;pointer-events:auto} /* HAT HIGHLIGHTING */ .chip.has-hat{background:#FFF8E1;border-color:#F9A825;color:#5D3B00;font-weight:700} .pill.has-hat{background:#FFF8E1;border-color:#F9A825;color:#5D3B00;font-weight:700} .pill.has-hat.ao{background:#FFF0A0;border-color:#E6920A;color:#5D3B00} .hat-icon{font-size:13px;margin-left:2px} /* NOTES QUEUE */ .notes-card{background:rgba(74,108,247,.08);border:1px solid rgba(74,108,247,.25);border-radius:4px;padding:12px 16px;margin-bottom:14px} .notes-card-title{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#818CF8;margin-bottom:10px;display:flex;align-items:center;gap:8px;flex-wrap:wrap} .notes-item{background:rgba(255,255,255,.04);border:1px solid rgba(74,108,247,.2);border-radius:4px;padding:10px 12px;margin-bottom:8px} .notes-item:last-child{margin-bottom:0} .notes-item-name{font-size:13px;font-weight:700;color:rgba(255,255,255,.9);margin-bottom:3px} .notes-item-text{font-size:12px;color:rgba(255,255,255,.6);background:rgba(74,108,247,.08);border-radius:4px;padding:5px 8px;margin-bottom:8px;font-style:italic} .notes-item-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap} .notes-item.dismissed{opacity:.45;pointer-events:none} .notes-item.locked{border-color:var(--green);background:#F0FAF0} .btn-lock{background:#D4EDDA;color:#155724;border-color:#97C459;font-size:12px;padding:4px 10px;font-weight:600} .btn-lock:hover{background:#C3E6CB} .btn-dismiss{background:#F8D7DA;color:var(--red);border-color:#F5C6CB;font-size:12px;padding:4px 10px;font-weight:600} .btn-dismiss:hover{background:#F5C6CB} .locked-tag{font-size:11px;font-weight:700;color:#155724;background:#D4EDDA;border:1px solid #97C459;border-radius:4px;padding:2px 8px} /* DROP-OFF REPORT */ .report-modal-bg{background:rgba(0,0,0,.55);padding:20px;display:flex;align-items:flex-start;justify-content:center;min-height:400px} .report-modal{background:var(--white);border-radius:4px;width:100%;max-width:700px;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,.2)} .rpt-header{background:var(--navy);padding:14px 20px;display:flex;align-items:center;justify-content:space-between;-webkit-print-color-adjust:exact;print-color-adjust:exact} .rpt-body{padding:0} .rpt-page{padding:20px 24px;border-bottom:2px dashed var(--gray-200)} .rpt-page:last-child{border-bottom:none} .rpt-ph{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px;padding-bottom:10px;border-bottom:2px solid var(--navy)} .rpt-org{font-size:12px;font-weight:700;color:var(--orange);text-transform:uppercase;letter-spacing:.06em} .rpt-cname{font-size:18px;font-weight:700;color:var(--navy);margin:2px 0} .rpt-shift{font-size:12px;color:#667788} .rpt-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 20px;margin-bottom:12px;font-size:12px} .rpt-field label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--gray-400);display:block;margin-bottom:2px} .rpt-field p{color:var(--gray-700);margin:0;line-height:1.4} .rpt-field.full{grid-column:1/-1} .rpt-hat{display:inline-flex;align-items:center;gap:5px;background:#FFF3CD;color:#7D4E00;border:1px solid var(--gold);border-radius:4px;padding:3px 10px;font-size:11px;font-weight:700;margin-bottom:10px} .rpt-jlist{margin-top:10px} .rpt-jlabel{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--navy);margin-bottom:6px} .rpt-jrow{display:flex;align-items:center;padding:5px 0;border-bottom:1px solid var(--gray-100);font-size:13px;gap:8px} .rpt-num{font-size:11px;font-weight:700;color:var(--gray-400);width:20px;flex-shrink:0} .rpt-name{flex:1;font-weight:600;color:var(--navy)} .rpt-sig{flex:1;border-bottom:1px solid var(--gray-200);height:18px;margin:0 8px} .rpt-siglbl{font-size:12px;color:var(--gray-400);white-space:nowrap} .rpt-foot{font-size:12px;color:#667788;margin-top:10px;padding-top:8px;border-top:1px solid var(--gray-100);text-align:center} /* ── Accessibility ── */ @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} } :focus-visible{outline:none;box-shadow:var(--focus-ring)} button:focus-visible,a:focus-visible,.btn:focus-visible,.role-btn:focus-visible{box-shadow:var(--focus-ring)} /* ── Scrollbars ── */ ::-webkit-scrollbar{width:6px;height:6px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:var(--gray-200);border-radius:4px} ::-webkit-scrollbar-thumb:hover{background:var(--gray-400)} ::selection{background:var(--orange-lt);color:var(--orange-dk)} /* ── Footer ──────────────────────────────────────────────────── */ /* Alert animations */ .alert{padding:10px 14px;border-radius:4px;font-size:13px;margin-bottom:12px;position:relative;overflow:hidden} .alert::after{content:'';position:absolute;bottom:0;left:0;height:3px;background:rgba(0,0,0,.15);animation:alertTimer 4s linear forwards} @keyframes alertTimer{from{width:100%}to{width:0%}} @keyframes alertSlideIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}} /* ── Toast system ── */ #off-alert{border-radius:4px;font-size:13px;padding:11px 16px; box-shadow:var(--sh-3);border:none;animation:toastSlide var(--dur-base) var(--ease-spring)} @keyframes scrimIn{from{opacity:0}to{opacity:1}} @keyframes modalScale{from{opacity:0;transform:scale(.95) translateY(8px)}to{opacity:1;transform:none}} @keyframes toastSlide{from{opacity:0;transform:translateY(-10px) scale(.97)}to{opacity:1;transform:none}} .app-footer{ display:flex;align-items:center;justify-content:space-between; padding:10px 20px;margin-top:32px; border-top:1px solid var(--gray-150); font-size:11px;color:var(--ink-subtle); background:rgba(255,255,255,.7);backdrop-filter:blur(8px); border-radius:4px; } .app-footer .footer-copy{ opacity:.7; } .app-footer .footer-ver{ font-weight:600;color:rgba(255,255,255,.6); } /* ============================================================ /* Alert animations */ .alert{padding:10px 14px;border-radius:4px;font-size:13px;margin-bottom:12px;position:relative;overflow:hidden} .alert::after{content:'';position:absolute;bottom:0;left:0;height:3px;background:rgba(0,0,0,.15);animation:alertTimer 4s linear forwards} @keyframes alertTimer{from{width:100%}to{width:0%}} @keyframes alertSlideIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}} /* ── Toast system ── */ #off-alert{border-radius:4px;font-size:13px;padding:11px 16px; box-shadow:var(--sh-3);border:none;animation:toastSlide var(--dur-base) var(--ease-spring)} @keyframes scrimIn{from{opacity:0}to{opacity:1}} @keyframes modalScale{from{opacity:0;transform:scale(.95) translateY(8px)}to{opacity:1;transform:none}} @keyframes toastSlide{from{opacity:0;transform:translateY(-10px) scale(.97)}to{opacity:1;transform:none}} .app-footer{display:flex;align-items:center;justify-content:space-between;padding:10px 20px;margin-top:32px;border-top:1px solid rgba(255,255,255,.06);font-size:11px;color:rgba(255,255,255,.3);background:rgba(0,0,0,.2);border-radius:4px;} .footer-copy{opacity:.7} .footer-ver{font-weight:600;color:rgba(255,255,255,.6)} RESPONSIVE — Mobile first, tablet, desktop ============================================================ */ /* Base responsive meta adjustments */ :root { --sidebar-w: 0px; } /* ── Tab bar ───────────────────────────────────────────────── */ .tab-bar-wrap{ display:flex;flex-wrap:wrap;gap:0; overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none; } .tab-bar-wrap::-webkit-scrollbar{display:none} .tab{white-space:nowrap;flex-shrink:0;} /* ── Cards & panels ─────────────────────────────────────────── */ /* (responsive overrides below in @media blocks) */ .roster-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch} .roster-table{min-width:600px} /* ── Login screen ────────────────────────────────────────────── */ .login-card{padding:20px 20px} .role-btn{padding:12px 10px} /* ── Header ──────────────────────────────────────────────────── */ .header{padding:10px 12px} .header-title{font-size:clamp(16px,3vw,24px)} /* ── Action rows ─────────────────────────────────────────────── */ .action-row{flex-wrap:wrap;gap:6px} /* ── Status board — single column on mobile ─────────────────── */ .board-body{flex-direction:column!important;gap:8px!important} .board{min-width:unset!important;flex:1 1 100%!important} /* ── Pool chips — wrap nicely ────────────────────────────────── */ #off-pool{display:flex;flex-wrap:wrap;gap:6px} /* ── Age-out queue buttons ───────────────────────────────────── */ .ao-card{padding:12px} .ao-btn{font-size:12px;padding:8px 10px} /* ── Tablet (768px+) ─────────────────────────────────────────── */ @media(min-width:768px){ .panel{padding:0 16px 60px} .card{padding:20px} .stats{grid-template-columns:repeat(4,1fr)!important} #slots-container{grid-template-columns:repeat(2,1fr)} .board-body{flex-direction:row!important} .board{flex:1 1 calc(33% - 8px)!important} .kiosk-inner{max-width:480px!important;padding:32px!important} } /* ── Desktop (1100px+) ───────────────────────────────────────── */ @media(min-width:1100px){ .panel{padding:0 24px 40px} #slots-container{grid-template-columns:repeat(3,1fr)} } /* ── Large desktop (1440px+) ─────────────────────────────────── */ @media(min-width:1440px){ #slots-container{grid-template-columns:repeat(4,1fr)} } /* ── Touch-friendly tap targets ─────────────────────────────── */ @media(pointer:coarse){ .btn{min-height:44px;padding:10px 16px} .tab{padding:12px 16px} .pill-x{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center} select.finput, input.finput{min-height:44px;font-size:16px!important} /* prevents iOS zoom */ } /* ── Status board TV mode (landscape tablet/desktop) ─────────── */ @media(min-width:900px) and (orientation:landscape){ .board-body{flex-direction:row!important;align-items:flex-start} .board{flex:1!important} } /* Request filter chips */ .req-chip{padding:5px 14px;border-radius:4px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:rgba(255,255,255,.5);font-size:12px;font-weight:600;cursor:pointer;transition:all .15s;font-family:var(--font);} .req-chip:hover{border-color:rgba(255,255,255,.25);color:rgba(255,255,255,.85);} .req-chip.active{background:var(--navy-md);color:#fff;border-color:rgba(59,130,246,.4);box-shadow:0 0 12px rgba(59,130,246,.2);} .req-name-tag{display:inline-flex;align-items:center;gap:4px;background:var(--navy);color:#fff;font-size:11px;font-weight:600;padding:2px 8px;border-radius:4px;white-space:nowrap} .req-name-tag button{background:none;border:none;color:#fff;cursor:pointer;font-size:13px;line-height:1;padding:0;opacity:.7} .req-name-tag button:hover{opacity:1} .req-name-option{display:flex;align-items:center;gap:8px;padding:7px 12px;font-size:13px;cursor:pointer;color:var(--gray-700)} .req-name-option:hover{background:var(--gray-50)} .req-name-option input[type=checkbox]{accent-color:var(--navy);width:15px;height:15px;flex-shrink:0} /* switchTab sets an inline display:block on the active panel, which would break the flex chain — so the active-state rule uses !important to win. */ #panel-board{padding:0 !important;overflow:hidden;} #panel-board.active{ display:flex !important; flex-direction:column; height:calc(100vh - 150px); min-height:420px; } #panel-board.active #board-content{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;} #panel-board.active .board-wrap{flex:1;min-height:0;height:auto;} #panel-board.active .board-body{height:auto !important;flex:1;min-height:0;} @keyframes boardTicker{ 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} } .tv-mode #board-ticker{font-size:clamp(14px,1.3vw,20px)} /* Board tab in-app — full screen, no interaction except escape button */ /* board-tab-active: keep the 2-column grid, let flex handle the height */ body.board-tab-active .board-body{grid-template-columns:200px 1fr !important} body.board-tab-active .board-name{font-size:clamp(15px,1.4vw,20px);padding:clamp(1px,.12vh,2px) 2px;line-height:1.2} body.board-tab-active .board-col-hdr{font-size:clamp(10px,.9vw,14px)} body.board-tab-active .board-committee-label{font-size:clamp(9px,.85vw,12px)} body.board-tab-active .board-shift-pill{font-size:clamp(9px,.8vw,11px)} body.board-tab-active #board-clock{font-size:clamp(28px,3vw,48px) !important;font-weight:700} body.board-tab-active #board-date-lbl{font-size:clamp(12px,1.1vw,16px)} body.board-tab-active #board-ticker{font-size:clamp(14px,1.3vw,20px)} /* ================================================================ BOARD ESCAPE BUTTON ================================================================ */ #board-escape-btn { position:fixed;top:10px;right:14px;z-index:9999; display:none; background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.2); border-radius:4px;color:rgba(255,255,255,.7); font-size:11px;font-weight:700;letter-spacing:.06em; padding:5px 12px;cursor:pointer;font-family:var(--font); text-transform:uppercase;backdrop-filter:blur(8px);transition:all .15s; } #board-escape-btn:hover{background:rgba(239,118,34,.4);color:#fff;border-color:rgba(239,118,34,.5);} /* No pointer lockdown in tab mode — user needs to click other tabs to navigate */ /* ================================================================ LIGHT THEME html[data-theme="light"] restores the original look ================================================================ */ html[data-theme="light"] body { color:var(--gray-700); background:#EEF2F9; background-image:radial-gradient(ellipse at 20% 20%,rgba(0,46,93,.06) 0%,transparent 60%),radial-gradient(ellipse at 80% 80%,rgba(239,118,34,.04) 0%,transparent 60%); } html[data-theme="light"] .stats { --surface:var(--white); } html[data-theme="light"] .stat { background:var(--white);border:1px solid var(--gray-150);border-top:3px solid var(--orange);} html[data-theme="light"] .stat-lbl { color:var(--gray-400); } html[data-theme="light"] .stat-val { color:var(--navy); } html[data-theme="light"] .tab-bar { background:rgba(238,242,247,.85);border:none;border-bottom:3px solid var(--navy);border-radius:4px;padding:0; } html[data-theme="light"] .tab { color:var(--ink-subtle); } html[data-theme="light"] .tab:hover { color:var(--navy);background:var(--navy-lt); } html[data-theme="light"] .tab.active { color:var(--navy);background:rgba(255,255,255,.7);border-bottom:2px solid var(--orange);box-shadow:none; } html[data-theme="light"] .card { background:var(--white);border:1px solid var(--gray-150); } html[data-theme="light"] .slot-card { background:var(--white);border:1px solid var(--gray-150);border-left:4px solid var(--navy); } html[data-theme="light"] .slot-card.sent { background:#F0FBF3;border:3px solid #27AE60 !important;border-left:3px solid #27AE60 !important; } html[data-theme="light"] .slot-card.sent .slot-name { color:#155724; } html[data-theme="light"] .slot-card.full { background:linear-gradient(to right,rgba(39,174,96,.04),var(--white) 30%); } html[data-theme="light"] .slot-name { color:var(--navy); } html[data-theme="light"] .slot-meta { color:#667788; } html[data-theme="light"] .prog-fill { background:var(--navy); } html[data-theme="light"] .pill { background:var(--gray-100);border-color:var(--gray-150);color:var(--navy); } html[data-theme="light"] .pill.ao { background:#FFF3CD;border-color:var(--gold);color:#7D4E00; } html[data-theme="light"] .pill.has-hat { background:#FFF8E1;border-color:#F9A825;color:#5D3B00; } html[data-theme="light"] .pill-x { color:var(--gray-400); } html[data-theme="light"] .pill-x:hover { color:var(--red); } html[data-theme="light"] .pool { background:var(--gray-50);border-color:var(--gray-200); } html[data-theme="light"] .chip { background:var(--white);border-color:var(--gray-150);color:var(--navy); } html[data-theme="light"] .chip:hover { background:var(--gray-50); } html[data-theme="light"] .chip.ao { background:#FFF3CD;border-color:var(--gold);color:#7D4E00; } html[data-theme="light"] .chip.has-hat { background:#FFF8E1;border-color:#F9A825;color:#5D3B00; } html[data-theme="light"] .alert-success { background:#D4EDDA;color:#155724;border-color:#C3E6CB; } html[data-theme="light"] .alert-warn { background:#FFF3CD;color:#7D4E00;border-color:var(--gold); } html[data-theme="light"] .alert-info { background:var(--navy-lt);color:var(--navy);border-color:#B8CCE0; } html[data-theme="light"] .alert-danger { background:#F8D7DA;color:var(--red);border-color:#F5C6CB; } html[data-theme="light"] .shift-tab { background:var(--white);border:2px solid var(--gray-200);color:#667788; } html[data-theme="light"] .shift-tab:hover { background:var(--navy-lt);border-color:var(--navy);color:var(--navy); } html[data-theme="light"] .shift-tab.active { background:var(--navy);color:#fff;border-color:var(--navy);box-shadow:none; } html[data-theme="light"] .btn { background:var(--white);border-color:var(--gray-200);color:var(--gray-700); } html[data-theme="light"] .btn:hover { background:var(--navy-lt); } html[data-theme="light"] .btn-primary { background:var(--navy);color:#fff; } html[data-theme="light"] .btn-orange { background:var(--orange);color:#fff;box-shadow:none; } html[data-theme="light"] .btn-danger { border-color:var(--red);color:var(--red);background:transparent; } html[data-theme="light"] .btn-danger:hover { background:#FFF0EE; } html[data-theme="light"] .b-ageout { background:#FFF3CD;color:#7D4E00;border:1px solid var(--gold); } html[data-theme="light"] .b-full { background:#D4EDDA;color:#155724;border:none; } html[data-theme="light"] .b-open { background:var(--navy-lt);color:var(--navy);border:none; } html[data-theme="light"] .b-hat { background:#F1EFE8;color:#555;border:none; } html[data-theme="light"] .b-shift { background:var(--navy);color:#fff; } html[data-theme="light"] .b-title { background:var(--orange-lt);color:var(--orange-dk);border:1px solid var(--orange); } html[data-theme="light"] .finput { background:var(--white);border-color:var(--gray-200);color:var(--ink); } html[data-theme="light"] .finput::placeholder { color:var(--gray-400); } html[data-theme="light"] .finput:focus { border-color:var(--navy);box-shadow:var(--focus-ring); } html[data-theme="light"] select.finput option { background:#fff;color:var(--navy); } html[data-theme="light"] .tbl th { color:var(--navy);border-bottom-color:var(--navy); } html[data-theme="light"] .tbl td { color:var(--ink);border-bottom-color:var(--gray-100); } html[data-theme="light"] .tbl tr:hover td { background:var(--gray-50); } html[data-theme="light"] .hist-pill { background:var(--gray-100);border-color:var(--gray-200);color:#667788; } html[data-theme="light"] .hist-pill.current { background:#D4EDDA;border-color:var(--green);color:#155724; } html[data-theme="light"] .kiosk-title { color:var(--navy); } html[data-theme="light"] .kiosk-sub { color:#667788; } html[data-theme="light"] .kiosk-input { background:var(--white);border:2px solid var(--gray-200);color:var(--navy); } html[data-theme="light"] .kiosk-input:focus { border-color:var(--orange);box-shadow:none; } html[data-theme="light"] .kiosk-btn { background:var(--white);border:2px solid var(--navy);color:var(--navy); } html[data-theme="light"] .kiosk-btn:hover { background:var(--navy-lt); } html[data-theme="light"] .confirm-box { background:var(--navy-lt);border-color:#B8CCE0;border-left-color:var(--orange); } html[data-theme="light"] .confirm-name { color:var(--navy); } html[data-theme="light"] .setup-section { background:var(--white);border-color:var(--gray-200); } html[data-theme="light"] .ao-card { background:#FFFBF0;border:2px solid var(--orange); } html[data-theme="light"] .ao-title { color:var(--orange-dk); } html[data-theme="light"] .ao-btn { background:var(--white);border:2px solid var(--orange);color:var(--orange-dk); } html[data-theme="light"] .ao-btn:hover { background:var(--orange-lt); } html[data-theme="light"] .ao-btn.active { background:var(--orange);color:#fff;box-shadow:none; } html[data-theme="light"] .ao-btn.done { background:var(--gray-100);border-color:var(--gray-200);color:var(--gray-400); } html[data-theme="light"] .order-badge { box-shadow:none; } html[data-theme="light"] .pick-panel { background:var(--white);border:2px solid var(--orange);box-shadow:none; } html[data-theme="light"] .pick-header { color:var(--navy); } html[data-theme="light"] .pick-sub { color:#667788; } html[data-theme="light"] .pick-btn { background:var(--gray-50);border-color:var(--gray-200); } html[data-theme="light"] .pick-btn:hover { background:#E8F4E8;border-color:var(--green); } html[data-theme="light"] .pick-btn.repeat { background:var(--orange-lt);border-color:var(--orange); } html[data-theme="light"] .pick-btn-name { color:var(--navy); } html[data-theme="light"] .pick-btn-cap { color:#667788; } html[data-theme="light"] .notes-card { background:#F0F4FF;border:2px solid #4A6CF7; } html[data-theme="light"] .notes-card-title { color:#2A3DB5; } html[data-theme="light"] .notes-item { background:var(--white);border-color:#B8C8F8; } html[data-theme="light"] .notes-item-name { color:var(--navy); } html[data-theme="light"] .notes-item-text { color:#334;background:#F0F4FF; } html[data-theme="light"] .section-lbl { color:var(--gray-400); } html[data-theme="light"] .form-lbl { color:#667788; } html[data-theme="light"] .req-card { background:var(--white);border-color:var(--gray-200);border-left-color:var(--orange); } html[data-theme="light"] .req-badge.pending { background:#FFF3CD;color:#7D4E00;border:1px solid var(--gold); } html[data-theme="light"] .req-badge.approved { background:#D4EDDA;color:#155724; } html[data-theme="light"] .req-badge.rejected { background:#F8D7DA;color:var(--red); } html[data-theme="light"] .req-chip { background:#fff;border:1.5px solid var(--gray-200);color:#667788; } html[data-theme="light"] .req-chip:hover { border-color:var(--navy);color:var(--navy); } html[data-theme="light"] .req-chip.active { background:var(--navy);color:#fff;border-color:var(--navy);box-shadow:none; } html[data-theme="light"] .date-sim { background:#FFF3CD;border-color:var(--gold);color:#7D4E00; } html[data-theme="light"] .login-card { background:rgba(255,255,255,.96);border:none;box-shadow:0 8px 40px rgba(0,0,0,.3); } html[data-theme="light"] .login-card::before { display:none; } html[data-theme="light"] .login-title { color:var(--navy); } html[data-theme="light"] .login-sub { color:#667788; } html[data-theme="light"] .role-btn { background:var(--white);border:2px solid var(--gray-200); } html[data-theme="light"] .role-btn:hover { border-color:var(--navy);background:var(--navy-lt);box-shadow:none; } html[data-theme="light"] .role-name { color:var(--navy); } html[data-theme="light"] .role-desc { color:#667788; } html[data-theme="light"] .role-icon { background:var(--navy-lt); } html[data-theme="light"] .app-footer { background:var(--white);border-top-color:var(--gray-100);color:#aab; } html[data-theme="light"] .empty-note { color:var(--gray-400); } html[data-theme="light"] .btn-lock { background:#D4EDDA;color:#155724;border-color:#97C459; } html[data-theme="light"] .btn-dismiss { background:#F8D7DA;color:var(--red);border-color:#F5C6CB; } html[data-theme="light"] .locked-tag { color:#155724;background:#D4EDDA;border-color:#97C459; } /* ── THEME TOGGLE ─────────────────────────────────────────── */ #theme-toggle { width:32px;height:18px;border-radius:4px; border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.1); cursor:pointer;position:relative;transition:background .2s;flex-shrink:0;padding:0; } #theme-toggle::after { content:'';position:absolute;top:2px;left:2px; width:12px;height:12px;border-radius:50%; background:rgba(255,255,255,.7);transition:transform .2s,background .2s; } html[data-theme="light"] #theme-toggle { background:rgba(0,46,93,.12);border-color:rgba(0,46,93,.2); } html[data-theme="light"] #theme-toggle::after { transform:translateX(14px);background:var(--navy); } #theme-toggle-label { font-size:12px;color:rgba(255,255,255,.45);white-space:nowrap;letter-spacing:.04em;font-weight:600;cursor:pointer;user-select:none; } html[data-theme="light"] #theme-toggle-label { color:rgba(0,46,93,.5); } /* ================================================================ CHECK-INS TAB — DARK MODE OVERRIDES Many rows/sections use hardcoded light inline styles. These CSS rules override the worst offenders. ================================================================ */ /* Table rows with hardcoded white/cream backgrounds */ #panel-checkins tr[style*="background:#FFF8F0"], #panel-checkins tr[style*="background: #FFF8F0"] { background: rgba(239,118,34,.06) !important; } #panel-checkins tr[style*="background:#FFF5F5"], #panel-checkins tr[style*="background: #FFF5F5"] { background: rgba(239,68,68,.1) !important; } /* All td text in the table */ #panel-checkins table td { color: rgba(255,255,255,.85) !important; } #panel-checkins table th { color: rgba(255,255,255,.9) !important; } /* Table hover */ #panel-checkins table tr:hover td { background: rgba(255,255,255,.04) !important; } /* Summary bar */ #checkins-summary { color: rgba(255,255,255,.6) !important; } #checkins-summary strong { color: #fff !important; } /* Roster section headers */ #panel-checkins [style*="color:var(--navy)"] { color: rgba(255,255,255,.88) !important; } #panel-checkins [style*="color:#667788"], #panel-checkins [style*="color: #667788"] { color: rgba(255,255,255,.45) !important; } /* Adult roster header background */ #panel-checkins [style*="background:#FFF8F0"], #panel-checkins [style*="background: #FFF8F0"] { background: rgba(239,118,34,.08) !important; } /* Roster drawer backgrounds */ #ci-roster-body, #ci-adult-roster-body { background: rgba(0,0,0,.2); } /* Light mode — restore */ html[data-theme="light"] #panel-checkins tr[style*="background:#FFF8F0"], html[data-theme="light"] #panel-checkins tr[style*="background: #FFF8F0"] { background: #FFF8F0 !important; } html[data-theme="light"] #panel-checkins tr[style*="background:#FFF5F5"], html[data-theme="light"] #panel-checkins tr[style*="background: #FFF5F5"] { background: #FFF5F5 !important; } html[data-theme="light"] #panel-checkins table td { color: var(--ink) !important; } html[data-theme="light"] #panel-checkins table th { color: var(--navy) !important; } html[data-theme="light"] #panel-checkins table tr:hover td { background: var(--gray-50) !important; } html[data-theme="light"] #checkins-summary { color: #667788 !important; } html[data-theme="light"] #panel-checkins [style*="color:var(--navy)"] { color: var(--navy) !important; } html[data-theme="light"] #panel-checkins [style*="color:#667788"] { color: #667788 !important; } html[data-theme="light"] #panel-checkins [style*="background:#FFF8F0"] { background: #FFF8F0 !important; } html[data-theme="light"] #ci-roster-body, html[data-theme="light"] #ci-adult-roster-body { background: transparent; } /* ================================================================ ACCESSIBILITY & DARK MODE FIXES — appended block Fixes images, hardcoded JS colors, contrast, touch targets ================================================================ */ /* ── IMAGE FILTERS: dark-on-transparent assets → white in dark mode ── */ /* hat.png: navy cowboy hat outline — invisible on dark surfaces */ img[src*="hat.png"] { filter: brightness(0) invert(1); opacity: .85; } /* edit.png / edit2.png: navy pencil icon */ img[src*="edit.png"], img[src*="edit2.png"] { filter: brightness(0) invert(1); opacity: .75; } /* jrc-logo-navy.png: navy JRC mark on role buttons and request panel */ img[src*="jrc-logo-navy.png"] { filter: brightness(0) invert(1); opacity: .9; } /* Light mode: restore original colors */ html[data-theme="light"] img[src*="hat.png"], html[data-theme="light"] img[src*="edit.png"], html[data-theme="light"] img[src*="edit2.png"], html[data-theme="light"] img[src*="jrc-logo-navy.png"] { filter: none; opacity: 1; } /* ── HARDCODED LIGHT COLORS IN JS-GENERATED HTML ───────────────── These selectors catch inline style attributes that JS hardcodes with light-mode colors. Scoped to .panel so reports/print unaffected. ──────────────────────────────────────────────────────────────── */ /* Navy text (#002E5D, #334455) → near-white */ .panel [style*="color:#002E5D"], .panel [style*="color:#334455"], .panel [style*="color:#002e5d"] { color: rgba(255,255,255,.9) !important; } /* Muted gray text (#667788, #8899AA, #99AABB, #999, #AAA, #888, #ccc) → readable white */ .panel [style*="color:#667788"], .panel [style*="color:#8899AA"], .panel [style*="color:#99AABB"], .panel [style*="color:#999"], .panel [style*="color:#AAA"], .panel [style*="color:#888"], .panel [style*="color:#ccc"], .panel [style*="color:#CCC"] { color: rgba(255,255,255,.6) !important; } /* Dark red (#CC0000, #7B0000) → soft red for dark backgrounds */ .panel [style*="color:#CC0000"], .panel [style*="color:#7B0000"] { color: #FCA5A5 !important; } /* Dark green (#155724, #2A7D2A) → soft green */ .panel [style*="color:#155724"], .panel [style*="color:#2A7D2A"] { color: #86EFAC !important; } /* Dark blue text (#2A3DB5, #4A6CF7) → light blue */ .panel [style*="color:#2A3DB5"], .panel [style*="color:#4A6CF7"] { color: #818CF8 !important; } /* Amber/gold (#856404, #7D4E00, #A05000, #CC6600) → light amber */ .panel [style*="color:#856404"], .panel [style*="color:#7D4E00"], .panel [style*="color:#A05000"], .panel [style*="color:#CC6600"] { color: #FCD34D !important; } /* White backgrounds in JS cards → dark surface */ .panel [style*="background:#fff"], .panel [style*="background:#FFF"], .panel [style*="background:#FFFFFF"], .panel [style*="background:#ffffff"], .panel [style*="background:#FAFBFC"], .panel [style*="background:#F8F9FA"], .panel [style*="background:#F5F6F8"], .panel [style*="background:#F8FAFC"], .panel [style*="background:#F0F0F0"], .panel [style*="background:#F0F4F8"] { background: rgba(255,255,255,.05) !important; } /* Cream/warm white backgrounds → dark warm tint */ .panel [style*="background:#FFF8F0"], .panel [style*="background:#FFF8F8"], .panel [style*="background:#FFF0F0"], .panel [style*="background:#FFFDF0"], .panel [style*="background:#FFF5F5"] { background: rgba(239,118,34,.06) !important; } /* Yellow/amber backgrounds (#FFF3CD) → dark amber tint */ .panel [style*="background:#FFF3CD"] { background: rgba(245,158,11,.1) !important; } /* Green backgrounds (#D4EDDA, #F0FAF0) → dark green tint */ .panel [style*="background:#D4EDDA"], .panel [style*="background:#F0FAF0"], .panel [style*="background:#F0F4FF"] { background: rgba(34,197,94,.08) !important; } /* Text inside those remapped backgrounds needs to be readable too */ .panel [style*="background:#FFF3CD"] *, .panel [style*="background:#FFF8F0"] *, .panel [style*="background:#FFF5F5"] * { color: rgba(255,255,255,.85); } /* ── BOARD: 9px shift pills → readable ───────────────────────── */ .board-shift-pill { font-size: 11px !important; } /* ── BOARD NAMES: slightly larger for older eyes ──────────────── */ .board-name { font-size: 16px; } /* ── SECTION LABELS: boost from dim to readable ──────────────── */ .section-lbl { color: rgba(255,255,255,.6) !important; font-size: 11px !important; } /* ── STAT LABELS: ensure readable ───────────────────────────────*/ .stat-lbl { color: rgba(255,255,255,.65) !important; } /* ── SLOT META: bump contrast ────────────────────────────────── */ .slot-meta { color: rgba(255,255,255,.65) !important; } /* ── FORM LABELS: readable ───────────────────────────────────── */ .form-lbl { color: rgba(255,255,255,.7) !important; font-size: 13px !important; } /* ── PICK BUTTON CAP TEXT: readable ─────────────────────────── */ .pick-btn-cap { color: rgba(255,255,255,.6) !important; } /* ── BADGE: min font size ────────────────────────────────────── */ .badge { font-size: 11px !important; } .req-badge { font-size: 11px !important; } .b-all20 { font-size: 11px !important; } /* ── LIGHT MODE RESTORES ─────────────────────────────────────── */ html[data-theme="light"] .panel [style*="color:#002E5D"], html[data-theme="light"] .panel [style*="color:#334455"], html[data-theme="light"] .panel [style*="color:#002e5d"] { color: #002E5D !important; } html[data-theme="light"] .panel [style*="color:#667788"], html[data-theme="light"] .panel [style*="color:#8899AA"], html[data-theme="light"] .panel [style*="color:#999"], html[data-theme="light"] .panel [style*="color:#AAA"], html[data-theme="light"] .panel [style*="color:#888"], html[data-theme="light"] .panel [style*="color:#ccc"] { color: #667788 !important; } html[data-theme="light"] .panel [style*="color:#CC0000"], html[data-theme="light"] .panel [style*="color:#7B0000"] { color: #CC0000 !important; } html[data-theme="light"] .panel [style*="color:#155724"], html[data-theme="light"] .panel [style*="color:#2A7D2A"] { color: #155724 !important; } html[data-theme="light"] .panel [style*="color:#2A3DB5"], html[data-theme="light"] .panel [style*="color:#4A6CF7"] { color: #4A6CF7 !important; } html[data-theme="light"] .panel [style*="color:#856404"], html[data-theme="light"] .panel [style*="color:#7D4E00"], html[data-theme="light"] .panel [style*="color:#A05000"] { color: #856404 !important; } html[data-theme="light"] .panel [style*="background:#fff"], html[data-theme="light"] .panel [style*="background:#FFF"], html[data-theme="light"] .panel [style*="background:#FAFBFC"], html[data-theme="light"] .panel [style*="background:#F8F9FA"], html[data-theme="light"] .panel [style*="background:#F0F0F0"], html[data-theme="light"] .panel [style*="background:#F0F4F8"] { background: revert !important; } html[data-theme="light"] .panel [style*="background:#FFF8F0"], html[data-theme="light"] .panel [style*="background:#FFF8F8"], html[data-theme="light"] .panel [style*="background:#FFF0F0"], html[data-theme="light"] .panel [style*="background:#FFF5F5"] { background: revert !important; } html[data-theme="light"] .panel [style*="background:#FFF3CD"] { background: #FFF3CD !important; } html[data-theme="light"] .panel [style*="background:#D4EDDA"], html[data-theme="light"] .panel [style*="background:#F0FAF0"], html[data-theme="light"] .panel [style*="background:#F0F4FF"] { background: revert !important; } html[data-theme="light"] .panel [style*="background:#FFF3CD"] *, html[data-theme="light"] .panel [style*="background:#FFF8F0"] *, html[data-theme="light"] .panel [style*="background:#FFF5F5"] * { color: revert; } html[data-theme="light"] .section-lbl { color: #667788 !important; font-size: 11px !important; } html[data-theme="light"] .stat-lbl { color: #667788 !important; } html[data-theme="light"] .slot-meta { color: #667788 !important; } html[data-theme="light"] .form-lbl { color: #667788 !important; font-size: 12px !important; } html[data-theme="light"] .pick-btn-cap { color: #667788 !important; } html[data-theme="light"] .badge { font-size: 10px !important; } html[data-theme="light"] .hist-pill { color: #667788 !important; } html[data-theme="light"] .board-name { font-size: 15px; } html[data-theme="light"] .board-shift-pill { font-size: 9px !important; } /* ================================================================ EXTENDED DARK MODE OVERRIDES — requests, roster, hours panels Covers color:var(--navy) and remaining hardcoded colors that the earlier .panel block missed. ================================================================ */ /* color:var(--navy) resolves to #002E5D — invisible on dark. Override it to white in all panels and the login area. */ .panel [style*="color:var(--navy)"], .panel [style*="color: var(--navy)"], #panel-hours [style*="color:var(--navy)"], #panel-roster [style*="color:var(--navy)"], #panel-requests [style*="color:var(--navy)"], #panel-reqform [style*="color:var(--navy)"] { color: rgba(255,255,255,.9) !important; } /* Links with color:var(--navy) */ .panel a[style*="color:var(--navy)"], .panel a[style*="color: var(--navy)"] { color: #93C5FD !important; /* light blue — visible and recognizable as a link */ } /* Table headers in hours/roster/settings using color:var(--navy) */ .panel th[style*="color:var(--navy)"], .panel th[style*="color: var(--navy)"] { color: rgba(255,255,255,.7) !important; } /* Table cells with font-weight:600 and color:var(--navy) (name columns) */ .panel td[style*="color:var(--navy)"], .panel td[style*="color: var(--navy)"] { color: rgba(255,255,255,.9) !important; } /* Gray borders using var(--gray-150) in table headers — remap to dark border */ .panel th[style*="border-bottom:2px solid var(--gray-150)"], .panel th[style*="border-bottom: 2px solid var(--gray-150)"] { border-bottom-color: rgba(255,255,255,.12) !important; } /* Remaining problem colors in requests/db modules */ /* #721c24 (dark crimson error) → soft red */ .panel [style*="color:#721c24"] { color: #FCA5A5 !important; } /* #99BBDD (muted blue in board header) — already readable, leave */ /* #001F40 (very dark navy) → white */ .panel [style*="color:#001F40"] { color: rgba(255,255,255,.9) !important; } /* F8F9FA / F8FAFC backgrounds (roster, hours table rows) → dark surface */ .panel [style*="background:#F8FAFC"], .panel [style*="background:#F8F9FA"], .panel [style*="background:#FAFBFC"] { background: rgba(255,255,255,.04) !important; } /* Partner request form — reqform sits outside normal .panel in partner mode */ #panel-reqform [style*="color:var(--navy)"], #panel-reqform [style*="color: var(--navy)"] { color: rgba(255,255,255,.9) !important; } #panel-reqform [style*="color:#667788"], #panel-reqform [style*="color:#8899AA"], #panel-reqform [style*="color:#99AABB"], #panel-reqform [style*="color:#999"] { color: rgba(255,255,255,.6) !important; } #panel-reqform [style*="background:#F8F9FA"], #panel-reqform [style*="background:#fff"], #panel-reqform [style*="background:#FFF"] { background: rgba(255,255,255,.05) !important; } /* Request submitted success message */ #panel-reqform [style*="color:var(--navy)"][style*="font-size:18px"] { color: #fff !important; } /* Roster name column specifically (font-weight:600 names in dark table) */ #r-body td, #a-body td { color: rgba(255,255,255,.88); } /* Hours table */ #hours-body td, #adult-hours-body td { color: rgba(255,255,255,.88); } /* ── LIGHT MODE RESTORES ─────────────────────────────────────── */ html[data-theme="light"] .panel [style*="color:var(--navy)"], html[data-theme="light"] .panel [style*="color: var(--navy)"], html[data-theme="light"] #panel-hours [style*="color:var(--navy)"], html[data-theme="light"] #panel-roster [style*="color:var(--navy)"], html[data-theme="light"] #panel-requests [style*="color:var(--navy)"], html[data-theme="light"] #panel-reqform [style*="color:var(--navy)"] { color: var(--navy) !important; } html[data-theme="light"] .panel a[style*="color:var(--navy)"] { color: var(--navy) !important; } html[data-theme="light"] .panel th[style*="color:var(--navy)"] { color: var(--navy) !important; } html[data-theme="light"] .panel td[style*="color:var(--navy)"] { color: var(--navy) !important; } html[data-theme="light"] .panel th[style*="border-bottom:2px solid var(--gray-150)"] { border-bottom-color: var(--gray-150) !important; } html[data-theme="light"] .panel [style*="color:#721c24"] { color: #721c24 !important; } html[data-theme="light"] .panel [style*="background:#F8FAFC"], html[data-theme="light"] .panel [style*="background:#F8F9FA"], html[data-theme="light"] .panel [style*="background:#FAFBFC"] { background: revert !important; } html[data-theme="light"] #panel-reqform [style*="color:var(--navy)"] { color: var(--navy) !important; } html[data-theme="light"] #panel-reqform [style*="color:#667788"] { color: #667788 !important; } html[data-theme="light"] #panel-reqform [style*="background:#F8F9FA"], html[data-theme="light"] #panel-reqform [style*="background:#fff"] { background: revert !important; } html[data-theme="light"] #r-body td, html[data-theme="light"] #a-body td { color: var(--navy); } html[data-theme="light"] #hours-body td, html[data-theme="light"] #adult-hours-body td { color: var(--navy); } /* ================================================================ LOGIN VIDEO BACKGROUND ================================================================ */ .login-video-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; pointer-events: none; } .login-video-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient( 135deg, rgba(0,10,25,.75) 0%, rgba(0,20,50,.65) 50%, rgba(0,10,30,.75) 100% ); pointer-events: none; } /* Login card sits above video + overlay */ .login-screen .login-card { position: relative; z-index: 2; } /* Login screen no longer needs its own bg gradient — video covers it */ .login-screen { background: #000C1E; } /* ═══════════════════════════════════════════════════════════════════════════ V24 CONTRAST FIXES ═══════════════════════════════════════════════════════════════════════════ */ :root{ --orange-ink:#002E5D; /* brand navy — ink for orange surfaces */ --orange-grad-lt:#F28A2E; /* gradient light end; keeps navy above 4.5:1 */ } /* ── Orange surfaces get navy ink ───────────────────────────────────────── White on #EF7622 is 2.88:1 and fails WCAG AA. Brand navy on it is 4.70:1. The old gradients ran #EF7622 -> #C85F10 and navy on that dark end is only 3.29:1, so they now run #F28A2E -> #EF7622: 5.46:1 light end, 4.70:1 dark end, passing across the whole sweep. Navy ink on the dark page background is 1.28:1 — every rule below is tied to an actually-orange background. Do not generalise it. */ .btn-orange, .shift-tab.active, .ao-btn.active, .order-badge{ background:linear-gradient(135deg,var(--orange-grad-lt),var(--orange)) !important; color:var(--orange-ink) !important; border-color:transparent !important; } html[data-theme="light"] .btn-orange, html[data-theme="light"] .shift-tab.active, html[data-theme="light"] .ao-btn.active, html[data-theme="light"] .order-badge{ background:var(--orange) !important; color:var(--orange-ink) !important; } .btn-orange *, .shift-tab.active *, .ao-btn.active *, .order-badge *{ color:inherit !important; } .panel [style*="background:var(--orange)"], .panel [style*="background: var(--orange)"]{ color:var(--orange-ink) !important; } .panel [style*="background:var(--orange)"] *, .panel [style*="background: var(--orange)"] *{ color:inherit !important; } /* Left alone on purpose: .b-title, .ao-btn:hover, .pick-btn.repeat, .slot-card.sent, #board-escape-btn:hover use translucent orange over the dark page, so their effective background is dark navy. Navy ink would be invisible there. */ /* ── BUG: Priority pill invisible ──────────────────────────────────────── app-requests.js emits background:#FAFAFA for the "Priority" toggle on every request row. The override map covers #FAFBFC, #F8F9FA and #F5F6F8 but not #FAFAFA, so the pill rendered white-on-white in dark mode. */ .panel [style*="background:#FAFAFA"], .panel [style*="background:#fafafa"], .panel [style*="background:#E8F0FF"], .panel [style*="background:#e8f0ff"], .panel [style*="background:#F8D7DA"], .panel [style*="background:#FDEDED"], .panel [style*="background:#F5C6CB"]{ background:rgba(255,255,255,.05) !important; } html[data-theme="light"] .panel [style*="background:#FAFAFA"], html[data-theme="light"] .panel [style*="background:#fafafa"], html[data-theme="light"] .panel [style*="background:#E8F0FF"], html[data-theme="light"] .panel [style*="background:#e8f0ff"], html[data-theme="light"] .panel [style*="background:#F8D7DA"], html[data-theme="light"] .panel [style*="background:#FDEDED"], html[data-theme="light"] .panel [style*="background:#F5C6CB"]{ background:revert !important; } /* ── BUG: rgb() serialisation gap ──────────────────────────────────────── When JS sets a style via the DOM API — btn.style.background = '#fff' — the browser rewrites the attribute as background: rgb(255, 255, 255). The hex is gone, so every [style*="background:#fff"] selector in this file stops matching that element. setReqType() in app-requests.js does this to the "Pre-Show" button. Its colour keeps var() form so it IS caught and turned white, but the background serialises to rgb() and is NOT caught, so it stays white. White on white: the button renders as a blank rectangle in dark mode. */ /* NOTE: these must say "background: rgb(...)", never a bare "rgb(...)". A bare match also catches color: rgb(255, 255, 255), which setReqType() writes onto the Showtime button — and then the light-mode revert below wiped that button's navy background, leaving white text on the browser's default grey. Same substring collision as border-color vs color. */ .panel [style*="background: rgb(255, 255, 255)"], .panel [style*="background:rgb(255, 255, 255)"], .panel [style*="background: rgb(250, 250, 250)"], .panel [style*="background:rgb(250, 250, 250)"], .panel [style*="background: rgb(248, 249, 250)"], .panel [style*="background:rgb(248, 249, 250)"], .panel [style*="background: rgb(232, 238, 245)"], .panel [style*="background:rgb(232, 238, 245)"]{ background:rgba(255,255,255,.05) !important; } html[data-theme="light"] .panel [style*="background: rgb(255, 255, 255)"], html[data-theme="light"] .panel [style*="background:rgb(255, 255, 255)"], html[data-theme="light"] .panel [style*="background: rgb(250, 250, 250)"], html[data-theme="light"] .panel [style*="background:rgb(250, 250, 250)"], html[data-theme="light"] .panel [style*="background: rgb(248, 249, 250)"], html[data-theme="light"] .panel [style*="background:rgb(248, 249, 250)"], html[data-theme="light"] .panel [style*="background: rgb(232, 238, 245)"], html[data-theme="light"] .panel [style*="background:rgb(232, 238, 245)"]{ background:revert !important; } /* ── Print guard for the icon filters ──────────────────────────────────── The img[src*=] filters near line 980 are not scoped to .panel and have no print reset, unlike the colour overrides. No print path emits these icons today, so this prevents a latent white-on-white print rather than fixing a live fault. */ @media print{ img[src*="hat.png"], img[src*="edit.png"], img[src*="edit2.png"], img[src*="jrc-logo-navy.png"]{ filter:none !important; opacity:1 !important; } .btn-orange,.shift-tab.active,.ao-btn.active,.order-badge{ background:var(--orange) !important; color:var(--orange-ink) !important; } } /* ═══════════════════════════════════════════════════════════════════════════ CHECK-INS PAGE — two pre-existing defects ═══════════════════════════════════════════════════════════════════════════ */ /* ── BUG: "+ Check In" buttons unreadable in light mode ─────────────────── The button carries style="background:var(--navy);color:#fff;border-color:var(--navy);..." and app.css has html[data-theme="light"] #panel-checkins [style*="color:var(--navy)"] { color: var(--navy) !important; } [style*=] is a plain substring match, and "border-color:var(--navy)" CONTAINS "color:var(--navy)". So the selector catches buttons that never set a text colour of navy, and forces navy ink onto a navy background. Dark mode maps the same selector to white, which is why only light mode showed it. Fix: an element that explicitly declares its own colour keeps it, in both themes. Listed after the offending rules so it wins at equal specificity. Applies to three buttons that share this shape (Check In, adult Check In, and the sent-slot toggle). */ #panel-checkins [style*="color:#fff"], #panel-checkins [style*="color: #fff"], html[data-theme="light"] #panel-checkins [style*="color:#fff"], html[data-theme="light"] #panel-checkins [style*="color: #fff"]{ color:#fff !important; } /* ── BUG: "Junior Roster (n not yet checked in)" is a white slab in dark ── The collapsible header bar uses background:var(--gray-50), which is #F8F9FA and has no dark-mode value. Nothing in app.css overrides inline backgrounds that reference the grey vars — only the raw hexes were mapped. The text inside is color:var(--navy), which the dark rules correctly turn white, so the result was white on near-white. Covers the Adult Roster bar and the two other var(--gray-*) inline backgrounds that have the same problem. */ .panel [style*="background:var(--gray-50)"], .panel [style*="background:var(--gray-100)"], .panel [style*="background:var(--white)"]{ background:rgba(255,255,255,.05) !important; } html[data-theme="light"] .panel [style*="background:var(--gray-50)"]{ background:var(--gray-50) !important; } html[data-theme="light"] .panel [style*="background:var(--gray-100)"]{ background:var(--gray-100) !important; } html[data-theme="light"] .panel [style*="background:var(--white)"]{ background:var(--white) !important; } /* ═══════════════════════════════════════════════════════════════════════════ PARTNER PORTAL BACKGROUND — navy with rising orange orbs, matching login ═══════════════════════════════════════════════════════════════════════════ */ /* The orb markup already existed in index.html and enterPartnerMode() already revealed it, but the only rule it ever got was #partner-orbs .orb { position: absolute; } The orange fill, blur and rise animation are scoped to `.login-screen .orb`, so the partner orbs rendered as invisible empty divs. This gives them the same treatment. */ #partner-orbs .orb{ position:absolute; border-radius:50%; background:#EF7622; animation:rise linear infinite; pointer-events:none; filter:blur(1px); } /* Deep navy behind the form in both themes, with the same radial accents the login screen uses. `.partner-mode body` already sets #001F40 !important, so this only adds the gradient wash and guards against the light-theme body rule. */ .partner-mode body{ background:#001F40 !important; background-image: radial-gradient(ellipse at 20% 15%, rgba(0,61,122,.55) 0%, transparent 60%), radial-gradient(ellipse at 80% 85%, rgba(239,118,34,.10) 0%, transparent 60%) !important; } /* The form card stays a light surface so the dark form text reads — the same relationship the login card has to the login background. */ .partner-mode #panel-reqform .card{ background:rgba(255,255,255,.97) !important; border:1px solid rgba(255,255,255,.25) !important; box-shadow:0 16px 60px rgba(0,0,0,.45) !important; } /* Orbs sit behind the form, never over it. */ #partner-orbs{ z-index:0 !important; } .partner-mode #panel-reqform{ position:relative; z-index:1; } .partner-mode #panel-reqform .card{ position:relative; z-index:2; } @media (prefers-reduced-motion:reduce){ #partner-orbs .orb{ animation:none; } } /* ── Partner form card: frosted glass ───────────────────────────────────── Translucent so the orbs read through it, matching .login-card's treatment. Contrast maths behind the 0.85: navy labels and body text stay above 8:1 even at 60% opacity, so they were never the constraint. The muted helper grey #667788 was — it measures only 4.61:1 on plain white, so any translucency at all pushed it under the 4.5 floor. Darkening it to #556677 (--gray-600) restores 5.07:1 against the worst-case composite, which is an orange orb sitting directly behind the text. */ .partner-mode #panel-reqform .card{ background:rgba(255,255,255,.85) !important; -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,.35) !important; box-shadow:0 18px 60px rgba(0,0,0,.45) !important; } /* Muted text inside the partner card: #667788 -> #556677 */ .partner-mode #panel-reqform [style*="color:#667788"], .partner-mode #panel-reqform [style*="color: #667788"]{ color:#556677 !important; } .partner-mode #panel-reqform .finput::placeholder{ color:#556677; } /* Inputs need to stay opaque — a translucent field over a drifting orb makes typed text swim. Solid white against the frosted card still reads as glass. */ .partner-mode #panel-reqform .finput, .partner-mode #panel-reqform input, .partner-mode #panel-reqform select, .partner-mode #panel-reqform textarea{ background:#fff !important; } /* Safari and older Firefox without backdrop-filter get a more opaque card so the orbs never sit unblurred behind small text. */ @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .partner-mode #panel-reqform .card{ background:rgba(255,255,255,.94) !important; } } /* ── Showtime / Pre-Show toggle: pin both states ────────────────────────── setReqType() rewrites these through the DOM API, so their inline styles serialise to rgb() form and slip past hex-based selectors. Pinning both states here means neither can end up with unreadable ink. */ .partner-mode #rf-btn-showtime, .partner-mode #rf-btn-preshow, #panel-reqform #rf-btn-showtime, #panel-reqform #rf-btn-preshow{ color:var(--navy) !important; background:rgba(255,255,255,.92) !important; border:2px solid var(--gray-200) !important; } .partner-mode #rf-btn-showtime[style*="var(--navy)"], #panel-reqform #rf-btn-showtime[style*="var(--navy)"], .partner-mode #rf-btn-preshow[style*="var(--navy)"], #panel-reqform #rf-btn-preshow[style*="var(--navy)"]{ background:var(--orange) !important; border-color:var(--orange) !important; color:var(--navy) !important; } .partner-mode #rf-btn-showtime *, .partner-mode #rf-btn-preshow *, #panel-reqform #rf-btn-showtime *, #panel-reqform #rf-btn-preshow *{ color:inherit !important; opacity:1 !important; } /* Bigger, softer orbs on the partner page. The `rise` keyframes animate transform, so a CSS scale() here would be overridden — the sizes are scaled in the markup instead. This only widens the blur so the larger dots read as glows rather than hard circles. */ #partner-orbs .orb{ filter:blur(6px); } /* ================================================================ MODAL DARK MODE — #9 note-log-modal and member-report-modal are built with hardcoded light-mode inline styles. These rules override the outer container and inner surfaces so they match the dark design system. Light-mode restores follow each block. ================================================================ */ /* ── Note Log Modal ──────────────────────────────────────────── */ #note-log-modal > div { background: #122445 !important; box-shadow: 0 20px 60px rgba(0,0,0,.6) !important; } /* Outer log container (scrollable entries) */ #note-log-modal > div > div:nth-child(2) { background: #122445 !important; } /* Entry cards: background:#F8FAFC → dark surface */ #note-log-modal [style*="background:#F8FAFC"], #note-log-modal [style*="background:#F8FAFC"] { background: rgba(255,255,255,.06) !important; border-left-color: inherit; } /* "No entries yet" muted text */ #note-log-modal [style*="color:#aaa"] { color: rgba(255,255,255,.4) !important; } /* Author / date timestamp text */ #note-log-modal [style*="color:#8899AA"] { color: rgba(255,255,255,.45) !important; } /* Entry body text */ #note-log-modal [style*="color:#334455"] { color: rgba(255,255,255,.88) !important; } /* Bottom form strip */ #note-log-modal [style*="border-top:1px solid #eee"], #note-log-modal [style*="border-top: 1px solid #eee"] { background: rgba(0,0,0,.3) !important; border-top-color: rgba(255,255,255,.1) !important; } /* Label text inside form strip */ #note-log-modal [style*="color:#667788"] { color: rgba(255,255,255,.5) !important; } /* Link inside form strip */ #note-log-modal a[style*="color:var(--navy)"] { color: #93C5FD !important; } /* Light mode: restore */ html[data-theme="light"] #note-log-modal > div { background: #fff !important; } html[data-theme="light"] #note-log-modal > div > div:nth-child(2) { background: #fff !important; } html[data-theme="light"] #note-log-modal [style*="background:#F8FAFC"] { background: #F8FAFC !important; } html[data-theme="light"] #note-log-modal [style*="color:#aaa"] { color: #aaa !important; } html[data-theme="light"] #note-log-modal [style*="color:#8899AA"] { color: #8899AA !important; } html[data-theme="light"] #note-log-modal [style*="color:#334455"] { color: #334455 !important; } html[data-theme="light"] #note-log-modal [style*="border-top:1px solid #eee"] { background: #F8FAFC !important; border-top-color: #eee !important; } html[data-theme="light"] #note-log-modal [style*="color:#667788"] { color: #667788 !important; } /* ── Member Report Picker Modal ──────────────────────────────── */ #member-report-modal > div { background: #122445 !important; box-shadow: 0 20px 60px rgba(0,0,0,.6) !important; } /* Inner body (padding:20px) */ #member-report-modal [style*="padding:20px"] { background: #122445 !important; } /* "Select member:" label */ #member-report-modal [style*="color:var(--navy)"] { color: rgba(255,255,255,.9) !important; } /* Label text */ #member-report-modal label[style*="font-size:13px"] { color: rgba(255,255,255,.85) !important; } /* Light mode: restore */ html[data-theme="light"] #member-report-modal > div { background: #fff !important; } html[data-theme="light"] #member-report-modal [style*="padding:20px"] { background: #fff !important; } html[data-theme="light"] #member-report-modal [style*="color:var(--navy)"] { color: var(--navy) !important; } html[data-theme="light"] #member-report-modal label[style*="font-size:13px"] { color: var(--gray-700) !important; } /* ================================================================ CLASS-BASED DARK MODE GAPS — #10 These CSS classes use light-mode values (var(--white), var(--navy), var(--gray-*)) with no dark-mode override. The [style*=] map in app.css only catches inline styles; class-based rules need their own dark-mode selectors. ================================================================ */ /* ── Shift Preview (night-before planner) ────────────────────── */ .shift-preview { background: rgba(0,30,60,.6) !important; border-color: rgba(255,255,255,.1) !important; } .shift-preview-header { border-bottom-color: rgba(255,255,255,.08) !important; } .shift-preview-title { color: rgba(255,255,255,.9) !important; } .shift-preview-count { color: rgba(255,255,255,.45) !important; } .shift-block { border-bottom-color: rgba(255,255,255,.06) !important; } .shift-block-header { background: rgba(0,0,0,.25) !important; border-bottom-color: rgba(255,255,255,.06) !important; } .shift-block-title { color: rgba(255,255,255,.8) !important; } .shift-block-meta { color: rgba(255,255,255,.4) !important; } .preview-row { border-bottom-color: rgba(255,255,255,.04) !important; } .preview-row:hover { background: rgba(255,255,255,.04) !important; } .preview-row.added { background: rgba(34,197,94,.07) !important; } .preview-name { color: rgba(255,255,255,.88) !important; } .btn-add-one { border-color: rgba(255,255,255,.2) !important; color: rgba(255,255,255,.7) !important; } .btn-add-one.added { border-color: var(--green) !important; color: #86EFAC !important; background: rgba(34,197,94,.08) !important; } /* Light mode: restore */ html[data-theme="light"] .shift-preview { background: var(--white) !important; border-color: var(--gray-200) !important; } html[data-theme="light"] .shift-preview-header { border-bottom-color: var(--gray-200) !important; } html[data-theme="light"] .shift-preview-title { color: var(--navy) !important; } html[data-theme="light"] .shift-preview-count { color: var(--gray-400) !important; } html[data-theme="light"] .shift-block { border-bottom-color: var(--gray-100) !important; } html[data-theme="light"] .shift-block-header { background: var(--gray-50) !important; border-bottom-color: var(--gray-100) !important; } html[data-theme="light"] .shift-block-title { color: var(--navy) !important; } html[data-theme="light"] .shift-block-meta { color: var(--gray-400) !important; } html[data-theme="light"] .preview-row { border-bottom-color: var(--gray-50) !important; } html[data-theme="light"] .preview-row:hover { background: var(--gray-50) !important; } html[data-theme="light"] .preview-row.added { background: #F0FAF0 !important; } html[data-theme="light"] .preview-name { color: var(--navy) !important; } html[data-theme="light"] .btn-add-one { border-color: var(--navy) !important; color: var(--navy) !important; } html[data-theme="light"] .btn-add-one.added { border-color: var(--green) !important; color: #155724 !important; background: #F0FAF0 !important; } /* ── Notes item: locked state ────────────────────────────────── */ .notes-item.locked { border-color: var(--green) !important; background: rgba(34,197,94,.08) !important; } .locked-tag { color: #86EFAC !important; background: rgba(34,197,94,.12) !important; border-color: rgba(34,197,94,.3) !important; } /* Light mode: restore */ html[data-theme="light"] .notes-item.locked { background: #F0FAF0 !important; } html[data-theme="light"] .locked-tag { color: #155724 !important; background: #D4EDDA !important; border-color: #97C459 !important; } /* ── Lock / Dismiss action buttons ───────────────────────────── */ .btn-lock { background: rgba(34,197,94,.12) !important; color: #86EFAC !important; border-color: rgba(34,197,94,.3) !important; } .btn-lock:hover { background: rgba(34,197,94,.2) !important; } .btn-dismiss { background: rgba(239,68,68,.1) !important; color: #FCA5A5 !important; border-color: rgba(239,68,68,.25) !important; } .btn-dismiss:hover { background: rgba(239,68,68,.18) !important; } /* Light mode: restore */ html[data-theme="light"] .btn-lock { background: #D4EDDA !important; color: #155724 !important; border-color: #97C459 !important; } html[data-theme="light"] .btn-lock:hover { background: #C3E6CB !important; } html[data-theme="light"] .btn-dismiss { background: #F8D7DA !important; color: var(--red) !important; border-color: #F5C6CB !important; } html[data-theme="light"] .btn-dismiss:hover { background: #F5C6CB !important; } /* ── Request name dropdown ───────────────────────────────────── */ .req-name-option { color: rgba(255,255,255,.8) !important; } .req-name-option:hover { background: rgba(255,255,255,.06) !important; } /* Light mode: restore */ html[data-theme="light"] .req-name-option { color: var(--gray-700) !important; } html[data-theme="light"] .req-name-option:hover { background: var(--gray-50) !important; } /* ── BUG: age-out roster rows flash white-on-white on hover ─────────────── .tbl tr.ao-row:hover td sets background:var(--surface-2,#F8F9FA) — a near-white fill inherited from the light-mode design. Roster text is white in dark mode, so hovering an age-out row made the name unreadable. Regular juniors were fine because they use the normal .tbl tr:hover td rule (rgba(255,255,255,.03)). Age-out rows now get the same subtle hover as every other row in dark mode, and keep the pale highlight in light mode where it reads correctly. */ .tbl tr.ao-row:hover td{ background:rgba(255,255,255,.05) !important; } html[data-theme="light"] .tbl tr.ao-row:hover td{ background:var(--gray-50) !important; }