/*!
 * Font Awesome Free 7.2.0 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 * Copyright 2026 Fonticons, Inc.
 */
.fa,.fa-brands,.fa-classic,.fa-regular,.fa-solid,.fab,.far,.fas{--_fa-family:var(--fa-family,var(--fa-style-family,"Font Awesome 7 Free"));-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:var(--fa-display,inline-block);font-family:var(--_fa-family);font-feature-settings:normal;font-style:normal;font-synthesis:none;font-variant:normal;font-weight:var(--fa-style,900);line-height:1;text-align:center;text-rendering:auto;width:var(--fa-width,1.25em)}:is(.fas,.far,.fab,.fa-solid,.fa-regular,.fa-brands,.fa-classic,.fa):before{content:var(--fa)/""}@supports not (content:""/""){:is(.fas,.far,.fab,.fa-solid,.fa-regular,.fa-brands,.fa-classic,.fa):before{content:var(--fa)}}.fa-1x{font-size:1em}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-6x{font-size:6em}.fa-7x{font-size:7em}.fa-8x{font-size:8em}.fa-9x{font-size:9em}.fa-10x{font-size:10em}.fa-2xs{font-size:.625em;line-height:.1em;vertical-align:.225em}.fa-xs{font-size:.75em;line-height:.08333em;vertical-align:.125em}.fa-sm{font-size:.875em;line-height:.07143em;vertical-align:.05357em}.fa-lg{font-size:1.25em;line-height:.05em;vertical-align:-.075em}.fa-xl{font-size:1.5em;line-height:.04167em;vertical-align:-.125em}.fa-2xl{font-size:2em;line-height:.03125em;vertical-align:-.1875em}.fa-width-auto{--fa-width:auto}.fa-fw,.fa-width-fixed{--fa-width:1.25em}.fa-ul{list-style-type:none;margin-inline-start:var(--fa-li-margin,2.5em);padding-inline-start:0}.fa-ul>li{position:relative}.fa-li{inset-inline-start:calc(var(--fa-li-width, 2em)*-1);position:absolute;text-align:center;width:var(--fa-li-width,2em);line-height:inherit}.fa-border{border-radius:var(--fa-border-radius,.1em);border:var(--fa-border-width,.0625em) var(--fa-border-style,solid) var(--fa-border-color,#eee);box-sizing:var(--fa-border-box-sizing,content-box);padding:var(--fa-border-padding,.1875em .25em)}.fa-pull-left,.fa-pull-start{float:inline-start;margin-inline-end:var(--fa-pull-margin,.3em)}.fa-pull-end,.fa-pull-right{float:inline-end;margin-inline-start:var(--fa-pull-margin,.3em)}.fa-beat{animation-name:fa-beat;animation-delay:var(--fa-animation-delay,0s);animation-direction:var(--fa-animation-direction,normal);animation-duration:var(--fa-animation-duration,1s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,ease-in-out)}.fa-bounce{animation-name:fa-bounce;animation-delay:var(--fa-animation-delay,0s);animation-direction:var(--fa-animation-direction,normal);animation-duration:var(--fa-animation-duration,1s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,cubic-bezier(.28,.84,.42,1))}.fa-fade{animation-name:fa-fade;animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,cubic-bezier(.4,0,.6,1))}.fa-beat-fade,.fa-fade{animation-delay:var(--fa-animation-delay,0s);animation-direction:var(--fa-animation-direction,normal);animation-duration:var(--fa-animation-duration,1s)}.fa-beat-fade{animation-name:fa-beat-fade;animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,cubic-bezier(.4,0,.6,1))}.fa-flip{animation-name:fa-flip;animation-delay:var(--fa-animation-delay,0s);animation-direction:var(--fa-animation-direction,normal);animation-duration:var(--fa-animation-duration,1s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,ease-in-out)}.fa-shake{animation-name:fa-shake;animation-duration:var(--fa-animation-duration,1s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,linear)}.fa-shake,.fa-spin{animation-delay:var(--fa-animation-delay,0s);animation-direction:var(--fa-animation-direction,normal)}.fa-spin{animation-name:fa-spin;animation-duration:var(--fa-animation-duration,2s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,linear)}.fa-spin-reverse{--fa-animation-direction:reverse}.fa-pulse,.fa-spin-pulse{animation-name:fa-spin;animation-direction:var(--fa-animation-direction,normal);animation-duration:var(--fa-animation-duration,1s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,steps(8))}@media (prefers-reduced-motion:reduce){.fa-beat,.fa-beat-fade,.fa-bounce,.fa-fade,.fa-flip,.fa-pulse,.fa-shake,.fa-spin,.fa-spin-pulse{animation:none!important;transition:none!important}}@keyframes fa-beat{0%,90%{transform:scale(1)}45%{transform:scale(var(--fa-beat-scale,1.25))}}@keyframes fa-bounce{0%{transform:scale(1) translateY(0)}10%{transform:scale(var(--fa-bounce-start-scale-x,1.1),var(--fa-bounce-start-scale-y,.9)) translateY(0)}30%{transform:scale(var(--fa-bounce-jump-scale-x,.9),var(--fa-bounce-jump-scale-y,1.1)) translateY(var(--fa-bounce-height,-.5em))}50%{transform:scale(var(--fa-bounce-land-scale-x,1.05),var(--fa-bounce-land-scale-y,.95)) translateY(0)}57%{transform:scale(1) translateY(var(--fa-bounce-rebound,-.125em))}64%{transform:scale(1) translateY(0)}to{transform:scale(1) translateY(0)}}@keyframes fa-fade{50%{opacity:var(--fa-fade-opacity,.4)}}@keyframes fa-beat-fade{0%,to{opacity:var(--fa-beat-fade-opacity,.4);transform:scale(1)}50%{opacity:1;transform:scale(var(--fa-beat-fade-scale,1.125))}}@keyframes fa-flip{50%{transform:rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),var(--fa-flip-angle,-180deg))}}@keyframes fa-shake{0%{transform:rotate(-15deg)}4%{transform:rotate(15deg)}8%,24%{transform:rotate(-18deg)}12%,28%{transform:rotate(18deg)}16%{transform:rotate(-22deg)}20%{transform:rotate(22deg)}32%{transform:rotate(-12deg)}36%{transform:rotate(12deg)}40%,to{transform:rotate(0deg)}}@keyframes fa-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.fa-rotate-90{transform:rotate(90deg)}.fa-rotate-180{transform:rotate(180deg)}.fa-rotate-270{transform:rotate(270deg)}.fa-flip-horizontal{transform:scaleX(-1)}.fa-flip-vertical{transform:scaleY(-1)}.fa-flip-both,.fa-flip-horizontal.fa-flip-vertical{transform:scale(-1)}.fa-rotate-by{transform:rotate(var(--fa-rotate-angle,0))}.fa-stack{display:inline-block;height:2em;line-height:2em;position:relative;vertical-align:middle;width:2.5em}.fa-stack-1x,.fa-stack-2x{--fa-width:100%;inset:0;position:absolute;text-align:center;width:var(--fa-width);z-index:var(--fa-stack-z-index,auto)}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:var(--fa-inverse,#fff)}

.fa-0{--fa:"\30 "}.fa-1{--fa:"\31 "}.fa-2{--fa:"\32 "}.fa-3{--fa:"\33 "}.fa-4{--fa:"\34 "}.fa-5{--fa:"\35 "}.fa-6{--fa:"\36 "}.fa-7{--fa:"\37 "}.fa-8{--fa:"\38 "}.fa-9{--fa:"\39 "}.fa-exclamation{--fa:"\!"}.fa-hashtag{--fa:"\#"}.fa-dollar,.fa-dollar-sign,.fa-usd{--fa:"\$"}.fa-percent,.fa-percentage{--fa:"\%"}.fa-asterisk{--fa:"\*"}.fa-add,.fa-plus{--fa:"\+"}.fa-less-than{--fa:"\<"}.fa-equals{--fa:"\="}.fa-greater-than{--fa:"\>"}.fa-question{--fa:"\?"}.fa-at{--fa:"\@"}.fa-a{--fa:"A"}.fa-b{--fa:"B"}.fa-c{--fa:"C"}.fa-d{--fa:"D"}.fa-e{--fa:"E"}.fa-f{--fa:"F"}.fa-g{--fa:"G"}.fa-h{--fa:"H"}.fa-i{--fa:"I"}.fa-j{--fa:"J"}.fa-k{--fa:"K"}.fa-l{--fa:"L"}.fa-m{--fa:"M"}.fa-n{--fa:"N"}.fa-o{--fa:"O"}.fa-p{--fa:"P"}.fa-q{--fa:"Q"}.fa-r{--fa:"R"}.fa-s{--fa:"S"}.fa-t{--fa:"T"}.fa-u{--fa:"U"}.fa-v{--fa:"V"}.fa-w{--fa:"W"}.fa-x{--fa:"X"}.fa-y{--fa:"Y"}.fa-z{--fa:"Z"}.fa-faucet{--fa:"\e005"}.fa-faucet-drip{--fa:"\e006"}.fa-house-chimney-window{--fa:"\e00d"}.fa-house-signal{--fa:"\e012"}.fa-temperature-arrow-down,.fa-temperature-down{--fa:"\e03f"}.fa-temperature-arrow-up,.fa-temperature-up{--fa:"\e040"}.fa-trailer{--fa:"\e041"}.fa-bacteria{--fa:"\e059"}.fa-bacterium{--fa:"\e05a"}.fa-box-tissue{--fa:"\e05b"}.fa-hand-holding-medical{--fa:"\e05c"}.fa-hand-sparkles{--fa:"\e05d"}.fa-hands-bubbles,.fa-hands-wash{--fa:"\e05e"}.fa-handshake-alt-slash,.fa-handshake-simple-slash,.fa-handshake-slash{--fa:"\e060"}.fa-head-side-cough{--fa:"\e061"}.fa-head-side-cough-slash{--fa:"\e062"}.fa-head-side-mask{--fa:"\e063"}.fa-head-side-virus{--fa:"\e064"}.fa-house-chimney-user{--fa:"\e065"}.fa-house-laptop,.fa-laptop-house{--fa:"\e066"}.fa-lungs-virus{--fa:"\e067"}.fa-people-arrows,.fa-people-arrows-left-right{--fa:"\e068"}.fa-plane-slash{--fa:"\e069"}.fa-pump-medical{--fa:"\e06a"}.fa-pump-soap{--fa:"\e06b"}.fa-shield-virus{--fa:"\e06c"}.fa-sink{--fa:"\e06d"}.fa-soap{--fa:"\e06e"}.fa-stopwatch-20{--fa:"\e06f"}.fa-shop-slash,.fa-store-alt-slash{--fa:"\e070"}.fa-store-slash{--fa:"\e071"}.fa-toilet-paper-slash{--fa:"\e072"}.fa-users-slash{--fa:"\e073"}.fa-virus{--fa:"\e074"}.fa-virus-slash{--fa:"\e075"}.fa-viruses{--fa:"\e076"}.fa-vest{--fa:"\e085"}.fa-vest-patches{--fa:"\e086"}.fa-arrow-trend-down{--fa:"\e097"}.fa-arrow-trend-up{--fa:"\e098"}.fa-arrow-up-from-bracket{--fa:"\e09a"}.fa-austral-sign{--fa:"\e0a9"}.fa-baht-sign{--fa:"\e0ac"}.fa-bitcoin-sign{--fa:"\e0b4"}.fa-bolt-lightning{--fa:"\e0b7"}.fa-book-bookmark{--fa:"\e0bb"}.fa-camera-rotate{--fa:"\e0d8"}.fa-cedi-sign{--fa:"\e0df"}.fa-chart-column{--fa:"\e0e3"}.fa-chart-gantt{--fa:"\e0e4"}.fa-clapperboard{--fa:"\e131"}.fa-closed-captioning-slash{--fa:"\e135"}.fa-clover{--fa:"\e139"}.fa-code-compare{--fa:"\e13a"}.fa-code-fork{--fa:"\e13b"}.fa-code-pull-request{--fa:"\e13c"}.fa-colon-sign{--fa:"\e140"}.fa-cruzeiro-sign{--fa:"\e152"}.fa-display{--fa:"\e163"}.fa-dong-sign{--fa:"\e169"}.fa-elevator{--fa:"\e16d"}.fa-filter-circle-xmark{--fa:"\e17b"}.fa-florin-sign{--fa:"\e184"}.fa-folder-closed{--fa:"\e185"}.fa-franc-sign{--fa:"\e18f"}.fa-guarani-sign{--fa:"\e19a"}.fa-gun{--fa:"\e19b"}.fa-hands-clapping{--fa:"\e1a8"}.fa-home-user,.fa-house-user{--fa:"\e1b0"}.fa-indian-rupee,.fa-indian-rupee-sign,.fa-inr{--fa:"\e1bc"}.fa-kip-sign{--fa:"\e1c4"}.fa-lari-sign{--fa:"\e1c8"}.fa-litecoin-sign{--fa:"\e1d3"}.fa-manat-sign{--fa:"\e1d5"}.fa-mask-face{--fa:"\e1d7"}.fa-mill-sign{--fa:"\e1ed"}.fa-money-bills{--fa:"\e1f3"}.fa-naira-sign{--fa:"\e1f6"}.fa-notdef{--fa:"\e1fe"}.fa-panorama{--fa:"\e209"}.fa-peseta-sign{--fa:"\e221"}.fa-peso-sign{--fa:"\e222"}.fa-plane-up{--fa:"\e22d"}.fa-rupiah-sign{--fa:"\e23d"}.fa-stairs{--fa:"\e289"}.fa-timeline{--fa:"\e29c"}.fa-truck-front{--fa:"\e2b7"}.fa-try,.fa-turkish-lira,.fa-turkish-lira-sign{--fa:"\e2bb"}.fa-vault{--fa:"\e2c5"}.fa-magic-wand-sparkles,.fa-wand-magic-sparkles{--fa:"\e2ca"}.fa-wheat-alt,.fa-wheat-awn{--fa:"\e2cd"}.fa-wheelchair-alt,.fa-wheelchair-move{--fa:"\e2ce"}.fa-bangladeshi-taka-sign{--fa:"\e2e6"}.fa-bowl-rice{--fa:"\e2eb"}.fa-person-pregnant{--fa:"\e31e"}.fa-home-lg,.fa-house-chimney{--fa:"\e3af"}.fa-house-crack{--fa:"\e3b1"}.fa-house-medical{--fa:"\e3b2"}.fa-cent-sign{--fa:"\e3f5"}.fa-plus-minus{--fa:"\e43c"}.fa-sailboat{--fa:"\e445"}.fa-section{--fa:"\e447"}.fa-shrimp{--fa:"\e448"}.fa-brazilian-real-sign{--fa:"\e46c"}.fa-chart-simple{--fa:"\e473"}.fa-diagram-next{--fa:"\e476"}.fa-diagram-predecessor{--fa:"\e477"}.fa-diagram-successor{--fa:"\e47a"}.fa-earth-oceania,.fa-globe-oceania{--fa:"\e47b"}.fa-bug-slash{--fa:"\e490"}.fa-file-circle-plus{--fa:"\e494"}.fa-shop-lock{--fa:"\e4a5"}.fa-virus-covid{--fa:"\e4a8"}.fa-virus-covid-slash{--fa:"\e4a9"}.fa-anchor-circle-check{--fa:"\e4aa"}.fa-anchor-circle-exclamation{--fa:"\e4ab"}.fa-anchor-circle-xmark{--fa:"\e4ac"}.fa-anchor-lock{--fa:"\e4ad"}.fa-arrow-down-up-across-line{--fa:"\e4af"}.fa-arrow-down-up-lock{--fa:"\e4b0"}.fa-arrow-right-to-city{--fa:"\e4b3"}.fa-arrow-up-from-ground-water{--fa:"\e4b5"}.fa-arrow-up-from-water-pump{--fa:"\e4b6"}.fa-arrow-up-right-dots{--fa:"\e4b7"}.fa-arrows-down-to-line{--fa:"\e4b8"}.fa-arrows-down-to-people{--fa:"\e4b9"}.fa-arrows-left-right-to-line{--fa:"\e4ba"}.fa-arrows-spin{--fa:"\e4bb"}.fa-arrows-split-up-and-left{--fa:"\e4bc"}.fa-arrows-to-circle{--fa:"\e4bd"}.fa-arrows-to-dot{--fa:"\e4be"}.fa-arrows-to-eye{--fa:"\e4bf"}.fa-arrows-turn-right{--fa:"\e4c0"}.fa-arrows-turn-to-dots{--fa:"\e4c1"}.fa-arrows-up-to-line{--fa:"\e4c2"}.fa-bore-hole{--fa:"\e4c3"}.fa-bottle-droplet{--fa:"\e4c4"}.fa-bottle-water{--fa:"\e4c5"}.fa-bowl-food{--fa:"\e4c6"}.fa-boxes-packing{--fa:"\e4c7"}.fa-bridge{--fa:"\e4c8"}.fa-bridge-circle-check{--fa:"\e4c9"}.fa-bridge-circle-exclamation{--fa:"\e4ca"}.fa-bridge-circle-xmark{--fa:"\e4cb"}.fa-bridge-lock{--fa:"\e4cc"}.fa-bridge-water{--fa:"\e4ce"}.fa-bucket{--fa:"\e4cf"}.fa-bugs{--fa:"\e4d0"}.fa-building-circle-arrow-right{--fa:"\e4d1"}.fa-building-circle-check{--fa:"\e4d2"}.fa-building-circle-exclamation{--fa:"\e4d3"}.fa-building-circle-xmark{--fa:"\e4d4"}.fa-building-flag{--fa:"\e4d5"}.fa-building-lock{--fa:"\e4d6"}.fa-building-ngo{--fa:"\e4d7"}.fa-building-shield{--fa:"\e4d8"}.fa-building-un{--fa:"\e4d9"}.fa-building-user{--fa:"\e4da"}.fa-building-wheat{--fa:"\e4db"}.fa-burst{--fa:"\e4dc"}.fa-car-on{--fa:"\e4dd"}.fa-car-tunnel{--fa:"\e4de"}.fa-child-combatant,.fa-child-rifle{--fa:"\e4e0"}.fa-children{--fa:"\e4e1"}.fa-circle-nodes{--fa:"\e4e2"}.fa-clipboard-question{--fa:"\e4e3"}.fa-cloud-showers-water{--fa:"\e4e4"}.fa-computer{--fa:"\e4e5"}.fa-cubes-stacked{--fa:"\e4e6"}.fa-envelope-circle-check{--fa:"\e4e8"}.fa-explosion{--fa:"\e4e9"}.fa-ferry{--fa:"\e4ea"}.fa-file-circle-exclamation{--fa:"\e4eb"}.fa-file-circle-minus{--fa:"\e4ed"}.fa-file-circle-question{--fa:"\e4ef"}.fa-file-shield{--fa:"\e4f0"}.fa-fire-burner{--fa:"\e4f1"}.fa-fish-fins{--fa:"\e4f2"}.fa-flask-vial{--fa:"\e4f3"}.fa-glass-water{--fa:"\e4f4"}.fa-glass-water-droplet{--fa:"\e4f5"}.fa-group-arrows-rotate{--fa:"\e4f6"}.fa-hand-holding-hand{--fa:"\e4f7"}.fa-handcuffs{--fa:"\e4f8"}.fa-hands-bound{--fa:"\e4f9"}.fa-hands-holding-child{--fa:"\e4fa"}.fa-hands-holding-circle{--fa:"\e4fb"}.fa-heart-circle-bolt{--fa:"\e4fc"}.fa-heart-circle-check{--fa:"\e4fd"}.fa-heart-circle-exclamation{--fa:"\e4fe"}.fa-heart-circle-minus{--fa:"\e4ff"}.fa-heart-circle-plus{--fa:"\e500"}.fa-heart-circle-xmark{--fa:"\e501"}.fa-helicopter-symbol{--fa:"\e502"}.fa-helmet-un{--fa:"\e503"}.fa-hill-avalanche{--fa:"\e507"}.fa-hill-rockslide{--fa:"\e508"}.fa-house-circle-check{--fa:"\e509"}.fa-house-circle-exclamation{--fa:"\e50a"}.fa-house-circle-xmark{--fa:"\e50b"}.fa-house-fire{--fa:"\e50c"}.fa-house-flag{--fa:"\e50d"}.fa-house-flood-water{--fa:"\e50e"}.fa-house-flood-water-circle-arrow-right{--fa:"\e50f"}.fa-house-lock{--fa:"\e510"}.fa-house-medical-circle-check{--fa:"\e511"}.fa-house-medical-circle-exclamation{--fa:"\e512"}.fa-house-medical-circle-xmark{--fa:"\e513"}.fa-house-medical-flag{--fa:"\e514"}.fa-house-tsunami{--fa:"\e515"}.fa-jar{--fa:"\e516"}.fa-jar-wheat{--fa:"\e517"}.fa-jet-fighter-up{--fa:"\e518"}.fa-jug-detergent{--fa:"\e519"}.fa-kitchen-set{--fa:"\e51a"}.fa-land-mine-on{--fa:"\e51b"}.fa-landmark-flag{--fa:"\e51c"}.fa-laptop-file{--fa:"\e51d"}.fa-lines-leaning{--fa:"\e51e"}.fa-location-pin-lock{--fa:"\e51f"}.fa-locust{--fa:"\e520"}.fa-magnifying-glass-arrow-right{--fa:"\e521"}.fa-magnifying-glass-chart{--fa:"\e522"}.fa-mars-and-venus-burst{--fa:"\e523"}.fa-mask-ventilator{--fa:"\e524"}.fa-mattress-pillow{--fa:"\e525"}.fa-mobile-retro{--fa:"\e527"}.fa-money-bill-transfer{--fa:"\e528"}.fa-money-bill-trend-up{--fa:"\e529"}.fa-money-bill-wheat{--fa:"\e52a"}.fa-mosquito{--fa:"\e52b"}.fa-mosquito-net{--fa:"\e52c"}.fa-mound{--fa:"\e52d"}.fa-mountain-city{--fa:"\e52e"}.fa-mountain-sun{--fa:"\e52f"}.fa-oil-well{--fa:"\e532"}.fa-people-group{--fa:"\e533"}.fa-people-line{--fa:"\e534"}.fa-people-pulling{--fa:"\e535"}.fa-people-robbery{--fa:"\e536"}.fa-people-roof{--fa:"\e537"}.fa-person-arrow-down-to-line{--fa:"\e538"}.fa-person-arrow-up-from-line{--fa:"\e539"}.fa-person-breastfeeding{--fa:"\e53a"}.fa-person-burst{--fa:"\e53b"}.fa-person-cane{--fa:"\e53c"}.fa-person-chalkboard{--fa:"\e53d"}.fa-person-circle-check{--fa:"\e53e"}.fa-person-circle-exclamation{--fa:"\e53f"}.fa-person-circle-minus{--fa:"\e540"}.fa-person-circle-plus{--fa:"\e541"}.fa-person-circle-question{--fa:"\e542"}.fa-person-circle-xmark{--fa:"\e543"}.fa-person-dress-burst{--fa:"\e544"}.fa-person-drowning{--fa:"\e545"}.fa-person-falling{--fa:"\e546"}.fa-person-falling-burst{--fa:"\e547"}.fa-person-half-dress{--fa:"\e548"}.fa-person-harassing{--fa:"\e549"}.fa-person-military-pointing{--fa:"\e54a"}.fa-person-military-rifle{--fa:"\e54b"}.fa-person-military-to-person{--fa:"\e54c"}.fa-person-rays{--fa:"\e54d"}.fa-person-rifle{--fa:"\e54e"}.fa-person-shelter{--fa:"\e54f"}.fa-person-walking-arrow-loop-left{--fa:"\e551"}.fa-person-walking-arrow-right{--fa:"\e552"}.fa-person-walking-dashed-line-arrow-right{--fa:"\e553"}.fa-person-walking-luggage{--fa:"\e554"}.fa-plane-circle-check{--fa:"\e555"}.fa-plane-circle-exclamation{--fa:"\e556"}.fa-plane-circle-xmark{--fa:"\e557"}.fa-plane-lock{--fa:"\e558"}.fa-plate-wheat{--fa:"\e55a"}.fa-plug-circle-bolt{--fa:"\e55b"}.fa-plug-circle-check{--fa:"\e55c"}.fa-plug-circle-exclamation{--fa:"\e55d"}.fa-plug-circle-minus{--fa:"\e55e"}.fa-plug-circle-plus{--fa:"\e55f"}.fa-plug-circle-xmark{--fa:"\e560"}.fa-ranking-star{--fa:"\e561"}.fa-road-barrier{--fa:"\e562"}.fa-road-bridge{--fa:"\e563"}.fa-road-circle-check{--fa:"\e564"}.fa-road-circle-exclamation{--fa:"\e565"}.fa-road-circle-xmark{--fa:"\e566"}.fa-road-lock{--fa:"\e567"}.fa-road-spikes{--fa:"\e568"}.fa-rug{--fa:"\e569"}.fa-sack-xmark{--fa:"\e56a"}.fa-school-circle-check{--fa:"\e56b"}.fa-school-circle-exclamation{--fa:"\e56c"}.fa-school-circle-xmark{--fa:"\e56d"}.fa-school-flag{--fa:"\e56e"}.fa-school-lock{--fa:"\e56f"}.fa-sheet-plastic{--fa:"\e571"}.fa-shield-cat{--fa:"\e572"}.fa-shield-dog{--fa:"\e573"}.fa-shield-heart{--fa:"\e574"}.fa-square-nfi{--fa:"\e576"}.fa-square-person-confined{--fa:"\e577"}.fa-square-virus{--fa:"\e578"}.fa-rod-asclepius,.fa-rod-snake,.fa-staff-aesculapius,.fa-staff-snake{--fa:"\e579"}.fa-sun-plant-wilt{--fa:"\e57a"}.fa-tarp{--fa:"\e57b"}.fa-tarp-droplet{--fa:"\e57c"}.fa-tent{--fa:"\e57d"}.fa-tent-arrow-down-to-line{--fa:"\e57e"}.fa-tent-arrow-left-right{--fa:"\e57f"}.fa-tent-arrow-turn-left{--fa:"\e580"}.fa-tent-arrows-down{--fa:"\e581"}.fa-tents{--fa:"\e582"}.fa-toilet-portable{--fa:"\e583"}.fa-toilets-portable{--fa:"\e584"}.fa-tower-cell{--fa:"\e585"}.fa-tower-observation{--fa:"\e586"}.fa-tree-city{--fa:"\e587"}.fa-trowel{--fa:"\e589"}.fa-trowel-bricks{--fa:"\e58a"}.fa-truck-arrow-right{--fa:"\e58b"}.fa-truck-droplet{--fa:"\e58c"}.fa-truck-field{--fa:"\e58d"}.fa-truck-field-un{--fa:"\e58e"}.fa-truck-plane{--fa:"\e58f"}.fa-users-between-lines{--fa:"\e591"}.fa-users-line{--fa:"\e592"}.fa-users-rays{--fa:"\e593"}.fa-users-rectangle{--fa:"\e594"}.fa-users-viewfinder{--fa:"\e595"}.fa-vial-circle-check{--fa:"\e596"}.fa-vial-virus{--fa:"\e597"}.fa-wheat-awn-circle-exclamation{--fa:"\e598"}.fa-worm{--fa:"\e599"}.fa-xmarks-lines{--fa:"\e59a"}.fa-child-dress{--fa:"\e59c"}.fa-child-reaching{--fa:"\e59d"}.fa-file-circle-check{--fa:"\e5a0"}.fa-file-circle-xmark{--fa:"\e5a1"}.fa-person-through-window{--fa:"\e5a9"}.fa-plant-wilt{--fa:"\e5aa"}.fa-stapler{--fa:"\e5af"}.fa-train-tram{--fa:"\e5b4"}.fa-table-cells-column-lock{--fa:"\e678"}.fa-table-cells-row-lock{--fa:"\e67a"}.fa-web-awesome{--fa:"\e682"}.fa-thumb-tack-slash,.fa-thumbtack-slash{--fa:"\e68f"}.fa-table-cells-row-unlock{--fa:"\e691"}.fa-chart-diagram{--fa:"\e695"}.fa-comment-nodes{--fa:"\e696"}.fa-file-fragment{--fa:"\e697"}.fa-file-half-dashed{--fa:"\e698"}.fa-hexagon-nodes{--fa:"\e699"}.fa-hexagon-nodes-bolt{--fa:"\e69a"}.fa-square-binary{--fa:"\e69b"}.fa-pentagon{--fa:"\e790"}.fa-non-binary{--fa:"\e807"}.fa-spiral{--fa:"\e80a"}.fa-picture-in-picture{--fa:"\e80b"}.fa-mobile-vibrate{--fa:"\e816"}.fa-single-quote-left{--fa:"\e81b"}.fa-single-quote-right{--fa:"\e81c"}.fa-bus-side{--fa:"\e81d"}.fa-heptagon,.fa-septagon{--fa:"\e820"}.fa-aquarius{--fa:"\e845"}.fa-aries{--fa:"\e846"}.fa-cancer{--fa:"\e847"}.fa-capricorn{--fa:"\e848"}.fa-gemini{--fa:"\e849"}.fa-leo{--fa:"\e84a"}.fa-libra{--fa:"\e84b"}.fa-pisces{--fa:"\e84c"}.fa-sagittarius{--fa:"\e84d"}.fa-scorpio{--fa:"\e84e"}.fa-taurus{--fa:"\e84f"}.fa-virgo{--fa:"\e850"}.fa-glass-martini,.fa-martini-glass-empty{--fa:"\f000"}.fa-music{--fa:"\f001"}.fa-magnifying-glass,.fa-search{--fa:"\f002"}.fa-heart{--fa:"\f004"}.fa-star{--fa:"\f005"}.fa-user,.fa-user-alt,.fa-user-large{--fa:"\f007"}.fa-film,.fa-film-alt,.fa-film-simple{--fa:"\f008"}.fa-table-cells-large,.fa-th-large{--fa:"\f009"}.fa-table-cells,.fa-th{--fa:"\f00a"}.fa-table-list,.fa-th-list{--fa:"\f00b"}.fa-check{--fa:"\f00c"}.fa-close,.fa-multiply,.fa-remove,.fa-times,.fa-xmark{--fa:"\f00d"}.fa-magnifying-glass-plus,.fa-search-plus{--fa:"\f00e"}.fa-magnifying-glass-minus,.fa-search-minus{--fa:"\f010"}.fa-power-off{--fa:"\f011"}.fa-signal,.fa-signal-5,.fa-signal-perfect{--fa:"\f012"}.fa-cog,.fa-gear{--fa:"\f013"}.fa-home,.fa-home-alt,.fa-home-lg-alt,.fa-house{--fa:"\f015"}.fa-clock,.fa-clock-four{--fa:"\f017"}.fa-road{--fa:"\f018"}.fa-download{--fa:"\f019"}.fa-inbox{--fa:"\f01c"}.fa-arrow-right-rotate,.fa-arrow-rotate-forward,.fa-arrow-rotate-right,.fa-redo{--fa:"\f01e"}.fa-arrows-rotate,.fa-refresh,.fa-sync{--fa:"\f021"}.fa-list-alt,.fa-rectangle-list{--fa:"\f022"}.fa-lock{--fa:"\f023"}.fa-flag{--fa:"\f024"}.fa-headphones,.fa-headphones-alt,.fa-headphones-simple{--fa:"\f025"}.fa-volume-off{--fa:"\f026"}.fa-volume-down,.fa-volume-low{--fa:"\f027"}.fa-volume-high,.fa-volume-up{--fa:"\f028"}.fa-qrcode{--fa:"\f029"}.fa-barcode{--fa:"\f02a"}.fa-tag{--fa:"\f02b"}.fa-tags{--fa:"\f02c"}.fa-book{--fa:"\f02d"}.fa-bookmark{--fa:"\f02e"}.fa-print{--fa:"\f02f"}.fa-camera,.fa-camera-alt{--fa:"\f030"}.fa-font{--fa:"\f031"}.fa-bold{--fa:"\f032"}.fa-italic{--fa:"\f033"}.fa-text-height{--fa:"\f034"}.fa-text-width{--fa:"\f035"}.fa-align-left{--fa:"\f036"}.fa-align-center{--fa:"\f037"}.fa-align-right{--fa:"\f038"}.fa-align-justify{--fa:"\f039"}.fa-list,.fa-list-squares{--fa:"\f03a"}.fa-dedent,.fa-outdent{--fa:"\f03b"}.fa-indent{--fa:"\f03c"}.fa-video,.fa-video-camera{--fa:"\f03d"}.fa-image{--fa:"\f03e"}.fa-location-pin,.fa-map-marker{--fa:"\f041"}.fa-adjust,.fa-circle-half-stroke{--fa:"\f042"}.fa-droplet,.fa-tint{--fa:"\f043"}.fa-edit,.fa-pen-to-square{--fa:"\f044"}.fa-arrows,.fa-arrows-up-down-left-right{--fa:"\f047"}.fa-backward-step,.fa-step-backward{--fa:"\f048"}.fa-backward-fast,.fa-fast-backward{--fa:"\f049"}.fa-backward{--fa:"\f04a"}.fa-play{--fa:"\f04b"}.fa-pause{--fa:"\f04c"}.fa-stop{--fa:"\f04d"}.fa-forward{--fa:"\f04e"}.fa-fast-forward,.fa-forward-fast{--fa:"\f050"}.fa-forward-step,.fa-step-forward{--fa:"\f051"}.fa-eject{--fa:"\f052"}.fa-chevron-left{--fa:"\f053"}.fa-chevron-right{--fa:"\f054"}.fa-circle-plus,.fa-plus-circle{--fa:"\f055"}.fa-circle-minus,.fa-minus-circle{--fa:"\f056"}.fa-circle-xmark,.fa-times-circle,.fa-xmark-circle{--fa:"\f057"}.fa-check-circle,.fa-circle-check{--fa:"\f058"}.fa-circle-question,.fa-question-circle{--fa:"\f059"}.fa-circle-info,.fa-info-circle{--fa:"\f05a"}.fa-crosshairs{--fa:"\f05b"}.fa-ban,.fa-cancel{--fa:"\f05e"}.fa-arrow-left{--fa:"\f060"}.fa-arrow-right{--fa:"\f061"}.fa-arrow-up{--fa:"\f062"}.fa-arrow-down{--fa:"\f063"}.fa-mail-forward,.fa-share{--fa:"\f064"}.fa-expand{--fa:"\f065"}.fa-compress{--fa:"\f066"}.fa-minus,.fa-subtract{--fa:"\f068"}.fa-circle-exclamation,.fa-exclamation-circle{--fa:"\f06a"}.fa-gift{--fa:"\f06b"}.fa-leaf{--fa:"\f06c"}.fa-fire{--fa:"\f06d"}.fa-eye{--fa:"\f06e"}.fa-eye-slash{--fa:"\f070"}.fa-exclamation-triangle,.fa-triangle-exclamation,.fa-warning{--fa:"\f071"}.fa-plane{--fa:"\f072"}.fa-calendar-alt,.fa-calendar-days{--fa:"\f073"}.fa-random,.fa-shuffle{--fa:"\f074"}.fa-comment{--fa:"\f075"}.fa-magnet{--fa:"\f076"}.fa-chevron-up{--fa:"\f077"}.fa-chevron-down{--fa:"\f078"}.fa-retweet{--fa:"\f079"}.fa-cart-shopping,.fa-shopping-cart{--fa:"\f07a"}.fa-folder,.fa-folder-blank{--fa:"\f07b"}.fa-folder-open{--fa:"\f07c"}.fa-arrows-up-down,.fa-arrows-v{--fa:"\f07d"}.fa-arrows-h,.fa-arrows-left-right{--fa:"\f07e"}.fa-bar-chart,.fa-chart-bar{--fa:"\f080"}.fa-camera-retro{--fa:"\f083"}.fa-key{--fa:"\f084"}.fa-cogs,.fa-gears{--fa:"\f085"}.fa-comments{--fa:"\f086"}.fa-star-half{--fa:"\f089"}.fa-arrow-right-from-bracket,.fa-sign-out{--fa:"\f08b"}.fa-thumb-tack,.fa-thumbtack{--fa:"\f08d"}.fa-arrow-up-right-from-square,.fa-external-link{--fa:"\f08e"}.fa-arrow-right-to-bracket,.fa-sign-in{--fa:"\f090"}.fa-trophy{--fa:"\f091"}.fa-upload{--fa:"\f093"}.fa-lemon{--fa:"\f094"}.fa-phone{--fa:"\f095"}.fa-phone-square,.fa-square-phone{--fa:"\f098"}.fa-unlock{--fa:"\f09c"}.fa-credit-card,.fa-credit-card-alt{--fa:"\f09d"}.fa-feed,.fa-rss{--fa:"\f09e"}.fa-hard-drive,.fa-hdd{--fa:"\f0a0"}.fa-bullhorn{--fa:"\f0a1"}.fa-certificate{--fa:"\f0a3"}.fa-hand-point-right{--fa:"\f0a4"}.fa-hand-point-left{--fa:"\f0a5"}.fa-hand-point-up{--fa:"\f0a6"}.fa-hand-point-down{--fa:"\f0a7"}.fa-arrow-circle-left,.fa-circle-arrow-left{--fa:"\f0a8"}.fa-arrow-circle-right,.fa-circle-arrow-right{--fa:"\f0a9"}.fa-arrow-circle-up,.fa-circle-arrow-up{--fa:"\f0aa"}.fa-arrow-circle-down,.fa-circle-arrow-down{--fa:"\f0ab"}.fa-globe{--fa:"\f0ac"}.fa-wrench{--fa:"\f0ad"}.fa-list-check,.fa-tasks{--fa:"\f0ae"}.fa-filter{--fa:"\f0b0"}.fa-briefcase{--fa:"\f0b1"}.fa-arrows-alt,.fa-up-down-left-right{--fa:"\f0b2"}.fa-users{--fa:"\f0c0"}.fa-chain,.fa-link{--fa:"\f0c1"}.fa-cloud{--fa:"\f0c2"}.fa-flask{--fa:"\f0c3"}.fa-cut,.fa-scissors{--fa:"\f0c4"}.fa-copy{--fa:"\f0c5"}.fa-paperclip{--fa:"\f0c6"}.fa-floppy-disk,.fa-save{--fa:"\f0c7"}.fa-square{--fa:"\f0c8"}.fa-bars,.fa-navicon{--fa:"\f0c9"}.fa-list-dots,.fa-list-ul{--fa:"\f0ca"}.fa-list-1-2,.fa-list-numeric,.fa-list-ol{--fa:"\f0cb"}.fa-strikethrough{--fa:"\f0cc"}.fa-underline{--fa:"\f0cd"}.fa-table{--fa:"\f0ce"}.fa-magic,.fa-wand-magic{--fa:"\f0d0"}.fa-truck{--fa:"\f0d1"}.fa-money-bill{--fa:"\f0d6"}.fa-caret-down{--fa:"\f0d7"}.fa-caret-up{--fa:"\f0d8"}.fa-caret-left{--fa:"\f0d9"}.fa-caret-right{--fa:"\f0da"}.fa-columns,.fa-table-columns{--fa:"\f0db"}.fa-sort,.fa-unsorted{--fa:"\f0dc"}.fa-sort-desc,.fa-sort-down{--fa:"\f0dd"}.fa-sort-asc,.fa-sort-up{--fa:"\f0de"}.fa-envelope{--fa:"\f0e0"}.fa-arrow-left-rotate,.fa-arrow-rotate-back,.fa-arrow-rotate-backward,.fa-arrow-rotate-left,.fa-undo{--fa:"\f0e2"}.fa-gavel,.fa-legal{--fa:"\f0e3"}.fa-bolt,.fa-zap{--fa:"\f0e7"}.fa-sitemap{--fa:"\f0e8"}.fa-umbrella{--fa:"\f0e9"}.fa-file-clipboard,.fa-paste{--fa:"\f0ea"}.fa-lightbulb{--fa:"\f0eb"}.fa-arrow-right-arrow-left,.fa-exchange{--fa:"\f0ec"}.fa-cloud-arrow-down,.fa-cloud-download,.fa-cloud-download-alt{--fa:"\f0ed"}.fa-cloud-arrow-up,.fa-cloud-upload,.fa-cloud-upload-alt{--fa:"\f0ee"}.fa-user-doctor,.fa-user-md{--fa:"\f0f0"}.fa-stethoscope{--fa:"\f0f1"}.fa-suitcase{--fa:"\f0f2"}.fa-bell{--fa:"\f0f3"}.fa-coffee,.fa-mug-saucer{--fa:"\f0f4"}.fa-hospital,.fa-hospital-alt,.fa-hospital-wide{--fa:"\f0f8"}.fa-ambulance,.fa-truck-medical{--fa:"\f0f9"}.fa-medkit,.fa-suitcase-medical{--fa:"\f0fa"}.fa-fighter-jet,.fa-jet-fighter{--fa:"\f0fb"}.fa-beer,.fa-beer-mug-empty{--fa:"\f0fc"}.fa-h-square,.fa-square-h{--fa:"\f0fd"}.fa-plus-square,.fa-square-plus{--fa:"\f0fe"}.fa-angle-double-left,.fa-angles-left{--fa:"\f100"}.fa-angle-double-right,.fa-angles-right{--fa:"\f101"}.fa-angle-double-up,.fa-angles-up{--fa:"\f102"}.fa-angle-double-down,.fa-angles-down{--fa:"\f103"}.fa-angle-left{--fa:"\f104"}.fa-angle-right{--fa:"\f105"}.fa-angle-up{--fa:"\f106"}.fa-angle-down{--fa:"\f107"}.fa-laptop{--fa:"\f109"}.fa-tablet-button{--fa:"\f10a"}.fa-mobile-button{--fa:"\f10b"}.fa-quote-left,.fa-quote-left-alt{--fa:"\f10d"}.fa-quote-right,.fa-quote-right-alt{--fa:"\f10e"}.fa-spinner{--fa:"\f110"}.fa-circle{--fa:"\f111"}.fa-face-smile,.fa-smile{--fa:"\f118"}.fa-face-frown,.fa-frown{--fa:"\f119"}.fa-face-meh,.fa-meh{--fa:"\f11a"}.fa-gamepad{--fa:"\f11b"}.fa-keyboard{--fa:"\f11c"}.fa-flag-checkered{--fa:"\f11e"}.fa-terminal{--fa:"\f120"}.fa-code{--fa:"\f121"}.fa-mail-reply-all,.fa-reply-all{--fa:"\f122"}.fa-location-arrow{--fa:"\f124"}.fa-crop{--fa:"\f125"}.fa-code-branch{--fa:"\f126"}.fa-chain-broken,.fa-chain-slash,.fa-link-slash,.fa-unlink{--fa:"\f127"}.fa-info{--fa:"\f129"}.fa-superscript{--fa:"\f12b"}.fa-subscript{--fa:"\f12c"}.fa-eraser{--fa:"\f12d"}.fa-puzzle-piece{--fa:"\f12e"}.fa-microphone{--fa:"\f130"}.fa-microphone-slash{--fa:"\f131"}.fa-shield,.fa-shield-blank{--fa:"\f132"}.fa-calendar{--fa:"\f133"}.fa-fire-extinguisher{--fa:"\f134"}.fa-rocket{--fa:"\f135"}.fa-chevron-circle-left,.fa-circle-chevron-left{--fa:"\f137"}.fa-chevron-circle-right,.fa-circle-chevron-right{--fa:"\f138"}.fa-chevron-circle-up,.fa-circle-chevron-up{--fa:"\f139"}.fa-chevron-circle-down,.fa-circle-chevron-down{--fa:"\f13a"}.fa-anchor{--fa:"\f13d"}.fa-unlock-alt,.fa-unlock-keyhole{--fa:"\f13e"}.fa-bullseye{--fa:"\f140"}.fa-ellipsis,.fa-ellipsis-h{--fa:"\f141"}.fa-ellipsis-v,.fa-ellipsis-vertical{--fa:"\f142"}.fa-rss-square,.fa-square-rss{--fa:"\f143"}.fa-circle-play,.fa-play-circle{--fa:"\f144"}.fa-ticket{--fa:"\f145"}.fa-minus-square,.fa-square-minus{--fa:"\f146"}.fa-arrow-turn-up,.fa-level-up{--fa:"\f148"}.fa-arrow-turn-down,.fa-level-down{--fa:"\f149"}.fa-check-square,.fa-square-check{--fa:"\f14a"}.fa-pen-square,.fa-pencil-square,.fa-square-pen{--fa:"\f14b"}.fa-external-link-square,.fa-square-arrow-up-right{--fa:"\f14c"}.fa-share-from-square,.fa-share-square{--fa:"\f14d"}.fa-compass{--fa:"\f14e"}.fa-caret-square-down,.fa-square-caret-down{--fa:"\f150"}.fa-caret-square-up,.fa-square-caret-up{--fa:"\f151"}.fa-caret-square-right,.fa-square-caret-right{--fa:"\f152"}.fa-eur,.fa-euro,.fa-euro-sign{--fa:"\f153"}.fa-gbp,.fa-pound-sign,.fa-sterling-sign{--fa:"\f154"}.fa-rupee,.fa-rupee-sign{--fa:"\f156"}.fa-cny,.fa-jpy,.fa-rmb,.fa-yen,.fa-yen-sign{--fa:"\f157"}.fa-rouble,.fa-rub,.fa-ruble,.fa-ruble-sign{--fa:"\f158"}.fa-krw,.fa-won,.fa-won-sign{--fa:"\f159"}.fa-file{--fa:"\f15b"}.fa-file-alt,.fa-file-lines,.fa-file-text{--fa:"\f15c"}.fa-arrow-down-a-z,.fa-sort-alpha-asc,.fa-sort-alpha-down{--fa:"\f15d"}.fa-arrow-up-a-z,.fa-sort-alpha-up{--fa:"\f15e"}.fa-arrow-down-wide-short,.fa-sort-amount-asc,.fa-sort-amount-down{--fa:"\f160"}.fa-arrow-up-wide-short,.fa-sort-amount-up{--fa:"\f161"}.fa-arrow-down-1-9,.fa-sort-numeric-asc,.fa-sort-numeric-down{--fa:"\f162"}.fa-arrow-up-1-9,.fa-sort-numeric-up{--fa:"\f163"}.fa-thumbs-up{--fa:"\f164"}.fa-thumbs-down{--fa:"\f165"}.fa-arrow-down-long,.fa-long-arrow-down{--fa:"\f175"}.fa-arrow-up-long,.fa-long-arrow-up{--fa:"\f176"}.fa-arrow-left-long,.fa-long-arrow-left{--fa:"\f177"}.fa-arrow-right-long,.fa-long-arrow-right{--fa:"\f178"}.fa-female,.fa-person-dress{--fa:"\f182"}.fa-male,.fa-person{--fa:"\f183"}.fa-sun{--fa:"\f185"}.fa-moon{--fa:"\f186"}.fa-archive,.fa-box-archive{--fa:"\f187"}.fa-bug{--fa:"\f188"}.fa-caret-square-left,.fa-square-caret-left{--fa:"\f191"}.fa-circle-dot,.fa-dot-circle{--fa:"\f192"}.fa-wheelchair{--fa:"\f193"}.fa-lira-sign{--fa:"\f195"}.fa-shuttle-space,.fa-space-shuttle{--fa:"\f197"}.fa-envelope-square,.fa-square-envelope{--fa:"\f199"}.fa-bank,.fa-building-columns,.fa-institution,.fa-museum,.fa-university{--fa:"\f19c"}.fa-graduation-cap,.fa-mortar-board{--fa:"\f19d"}.fa-language{--fa:"\f1ab"}.fa-fax{--fa:"\f1ac"}.fa-building{--fa:"\f1ad"}.fa-child{--fa:"\f1ae"}.fa-paw{--fa:"\f1b0"}.fa-cube{--fa:"\f1b2"}.fa-cubes{--fa:"\f1b3"}.fa-recycle{--fa:"\f1b8"}.fa-automobile,.fa-car{--fa:"\f1b9"}.fa-cab,.fa-taxi{--fa:"\f1ba"}.fa-tree{--fa:"\f1bb"}.fa-database{--fa:"\f1c0"}.fa-file-pdf{--fa:"\f1c1"}.fa-file-word{--fa:"\f1c2"}.fa-file-excel{--fa:"\f1c3"}.fa-file-powerpoint{--fa:"\f1c4"}.fa-file-image{--fa:"\f1c5"}.fa-file-archive,.fa-file-zipper{--fa:"\f1c6"}.fa-file-audio{--fa:"\f1c7"}.fa-file-video{--fa:"\f1c8"}.fa-file-code{--fa:"\f1c9"}.fa-life-ring{--fa:"\f1cd"}.fa-circle-notch{--fa:"\f1ce"}.fa-paper-plane{--fa:"\f1d8"}.fa-clock-rotate-left,.fa-history{--fa:"\f1da"}.fa-header,.fa-heading{--fa:"\f1dc"}.fa-paragraph{--fa:"\f1dd"}.fa-sliders,.fa-sliders-h{--fa:"\f1de"}.fa-share-alt,.fa-share-nodes{--fa:"\f1e0"}.fa-share-alt-square,.fa-square-share-nodes{--fa:"\f1e1"}.fa-bomb{--fa:"\f1e2"}.fa-futbol,.fa-futbol-ball,.fa-soccer-ball{--fa:"\f1e3"}.fa-teletype,.fa-tty{--fa:"\f1e4"}.fa-binoculars{--fa:"\f1e5"}.fa-plug{--fa:"\f1e6"}.fa-newspaper{--fa:"\f1ea"}.fa-wifi,.fa-wifi-3,.fa-wifi-strong{--fa:"\f1eb"}.fa-calculator{--fa:"\f1ec"}.fa-bell-slash{--fa:"\f1f6"}.fa-trash{--fa:"\f1f8"}.fa-copyright{--fa:"\f1f9"}.fa-eye-dropper,.fa-eye-dropper-empty,.fa-eyedropper{--fa:"\f1fb"}.fa-paint-brush,.fa-paintbrush{--fa:"\f1fc"}.fa-birthday-cake,.fa-cake,.fa-cake-candles{--fa:"\f1fd"}.fa-area-chart,.fa-chart-area{--fa:"\f1fe"}.fa-chart-pie,.fa-pie-chart{--fa:"\f200"}.fa-chart-line,.fa-line-chart{--fa:"\f201"}.fa-toggle-off{--fa:"\f204"}.fa-toggle-on{--fa:"\f205"}.fa-bicycle{--fa:"\f206"}.fa-bus{--fa:"\f207"}.fa-closed-captioning{--fa:"\f20a"}.fa-ils,.fa-shekel,.fa-shekel-sign,.fa-sheqel,.fa-sheqel-sign{--fa:"\f20b"}.fa-cart-plus{--fa:"\f217"}.fa-cart-arrow-down{--fa:"\f218"}.fa-diamond{--fa:"\f219"}.fa-ship{--fa:"\f21a"}.fa-user-secret{--fa:"\f21b"}.fa-motorcycle{--fa:"\f21c"}.fa-street-view{--fa:"\f21d"}.fa-heart-pulse,.fa-heartbeat{--fa:"\f21e"}.fa-venus{--fa:"\f221"}.fa-mars{--fa:"\f222"}.fa-mercury{--fa:"\f223"}.fa-mars-and-venus{--fa:"\f224"}.fa-transgender,.fa-transgender-alt{--fa:"\f225"}.fa-venus-double{--fa:"\f226"}.fa-mars-double{--fa:"\f227"}.fa-venus-mars{--fa:"\f228"}.fa-mars-stroke{--fa:"\f229"}.fa-mars-stroke-up,.fa-mars-stroke-v{--fa:"\f22a"}.fa-mars-stroke-h,.fa-mars-stroke-right{--fa:"\f22b"}.fa-neuter{--fa:"\f22c"}.fa-genderless{--fa:"\f22d"}.fa-server{--fa:"\f233"}.fa-user-plus{--fa:"\f234"}.fa-user-times,.fa-user-xmark{--fa:"\f235"}.fa-bed{--fa:"\f236"}.fa-train{--fa:"\f238"}.fa-subway,.fa-train-subway{--fa:"\f239"}.fa-battery,.fa-battery-5,.fa-battery-full{--fa:"\f240"}.fa-battery-4,.fa-battery-three-quarters{--fa:"\f241"}.fa-battery-3,.fa-battery-half{--fa:"\f242"}.fa-battery-2,.fa-battery-quarter{--fa:"\f243"}.fa-battery-0,.fa-battery-empty{--fa:"\f244"}.fa-arrow-pointer,.fa-mouse-pointer{--fa:"\f245"}.fa-i-cursor{--fa:"\f246"}.fa-object-group{--fa:"\f247"}.fa-object-ungroup{--fa:"\f248"}.fa-note-sticky,.fa-sticky-note{--fa:"\f249"}.fa-clone{--fa:"\f24d"}.fa-balance-scale,.fa-scale-balanced{--fa:"\f24e"}.fa-hourglass-1,.fa-hourglass-start{--fa:"\f251"}.fa-hourglass-2,.fa-hourglass-half{--fa:"\f252"}.fa-hourglass-3,.fa-hourglass-end{--fa:"\f253"}.fa-hourglass,.fa-hourglass-empty{--fa:"\f254"}.fa-hand-back-fist,.fa-hand-rock{--fa:"\f255"}.fa-hand,.fa-hand-paper{--fa:"\f256"}.fa-hand-scissors{--fa:"\f257"}.fa-hand-lizard{--fa:"\f258"}.fa-hand-spock{--fa:"\f259"}.fa-hand-pointer{--fa:"\f25a"}.fa-hand-peace{--fa:"\f25b"}.fa-trademark{--fa:"\f25c"}.fa-registered{--fa:"\f25d"}.fa-television,.fa-tv,.fa-tv-alt{--fa:"\f26c"}.fa-calendar-plus{--fa:"\f271"}.fa-calendar-minus{--fa:"\f272"}.fa-calendar-times,.fa-calendar-xmark{--fa:"\f273"}.fa-calendar-check{--fa:"\f274"}.fa-industry{--fa:"\f275"}.fa-map-pin{--fa:"\f276"}.fa-map-signs,.fa-signs-post{--fa:"\f277"}.fa-map{--fa:"\f279"}.fa-comment-alt,.fa-message{--fa:"\f27a"}.fa-circle-pause,.fa-pause-circle{--fa:"\f28b"}.fa-circle-stop,.fa-stop-circle{--fa:"\f28d"}.fa-bag-shopping,.fa-shopping-bag{--fa:"\f290"}.fa-basket-shopping,.fa-shopping-basket{--fa:"\f291"}.fa-universal-access{--fa:"\f29a"}.fa-blind,.fa-person-walking-with-cane{--fa:"\f29d"}.fa-audio-description{--fa:"\f29e"}.fa-phone-volume,.fa-volume-control-phone{--fa:"\f2a0"}.fa-braille{--fa:"\f2a1"}.fa-assistive-listening-systems,.fa-ear-listen{--fa:"\f2a2"}.fa-american-sign-language-interpreting,.fa-asl-interpreting,.fa-hands-american-sign-language-interpreting,.fa-hands-asl-interpreting{--fa:"\f2a3"}.fa-deaf,.fa-deafness,.fa-ear-deaf,.fa-hard-of-hearing{--fa:"\f2a4"}.fa-hands,.fa-sign-language,.fa-signing{--fa:"\f2a7"}.fa-eye-low-vision,.fa-low-vision{--fa:"\f2a8"}.fa-font-awesome,.fa-font-awesome-flag,.fa-font-awesome-logo-full{--fa:"\f2b4"}.fa-handshake,.fa-handshake-alt,.fa-handshake-simple{--fa:"\f2b5"}.fa-envelope-open{--fa:"\f2b6"}.fa-address-book,.fa-contact-book{--fa:"\f2b9"}.fa-address-card,.fa-contact-card,.fa-vcard{--fa:"\f2bb"}.fa-circle-user,.fa-user-circle{--fa:"\f2bd"}.fa-id-badge{--fa:"\f2c1"}.fa-drivers-license,.fa-id-card{--fa:"\f2c2"}.fa-temperature-4,.fa-temperature-full,.fa-thermometer-4,.fa-thermometer-full{--fa:"\f2c7"}.fa-temperature-3,.fa-temperature-three-quarters,.fa-thermometer-3,.fa-thermometer-three-quarters{--fa:"\f2c8"}.fa-temperature-2,.fa-temperature-half,.fa-thermometer-2,.fa-thermometer-half{--fa:"\f2c9"}.fa-temperature-1,.fa-temperature-quarter,.fa-thermometer-1,.fa-thermometer-quarter{--fa:"\f2ca"}.fa-temperature-0,.fa-temperature-empty,.fa-thermometer-0,.fa-thermometer-empty{--fa:"\f2cb"}.fa-shower{--fa:"\f2cc"}.fa-bath,.fa-bathtub{--fa:"\f2cd"}.fa-podcast{--fa:"\f2ce"}.fa-window-maximize{--fa:"\f2d0"}.fa-window-minimize{--fa:"\f2d1"}.fa-window-restore{--fa:"\f2d2"}.fa-square-xmark,.fa-times-square,.fa-xmark-square{--fa:"\f2d3"}.fa-microchip{--fa:"\f2db"}.fa-snowflake{--fa:"\f2dc"}.fa-spoon,.fa-utensil-spoon{--fa:"\f2e5"}.fa-cutlery,.fa-utensils{--fa:"\f2e7"}.fa-rotate-back,.fa-rotate-backward,.fa-rotate-left,.fa-undo-alt{--fa:"\f2ea"}.fa-trash-alt,.fa-trash-can{--fa:"\f2ed"}.fa-rotate,.fa-sync-alt{--fa:"\f2f1"}.fa-stopwatch{--fa:"\f2f2"}.fa-right-from-bracket,.fa-sign-out-alt{--fa:"\f2f5"}.fa-right-to-bracket,.fa-sign-in-alt{--fa:"\f2f6"}.fa-redo-alt,.fa-rotate-forward,.fa-rotate-right{--fa:"\f2f9"}.fa-poo{--fa:"\f2fe"}.fa-images{--fa:"\f302"}.fa-pencil,.fa-pencil-alt{--fa:"\f303"}.fa-pen{--fa:"\f304"}.fa-pen-alt,.fa-pen-clip{--fa:"\f305"}.fa-octagon{--fa:"\f306"}.fa-down-long,.fa-long-arrow-alt-down{--fa:"\f309"}.fa-left-long,.fa-long-arrow-alt-left{--fa:"\f30a"}.fa-long-arrow-alt-right,.fa-right-long{--fa:"\f30b"}.fa-long-arrow-alt-up,.fa-up-long{--fa:"\f30c"}.fa-hexagon{--fa:"\f312"}.fa-file-edit,.fa-file-pen{--fa:"\f31c"}.fa-expand-arrows-alt,.fa-maximize{--fa:"\f31e"}.fa-clipboard{--fa:"\f328"}.fa-arrows-alt-h,.fa-left-right{--fa:"\f337"}.fa-arrows-alt-v,.fa-up-down{--fa:"\f338"}.fa-alarm-clock{--fa:"\f34e"}.fa-arrow-alt-circle-down,.fa-circle-down{--fa:"\f358"}.fa-arrow-alt-circle-left,.fa-circle-left{--fa:"\f359"}.fa-arrow-alt-circle-right,.fa-circle-right{--fa:"\f35a"}.fa-arrow-alt-circle-up,.fa-circle-up{--fa:"\f35b"}.fa-external-link-alt,.fa-up-right-from-square{--fa:"\f35d"}.fa-external-link-square-alt,.fa-square-up-right{--fa:"\f360"}.fa-exchange-alt,.fa-right-left{--fa:"\f362"}.fa-repeat{--fa:"\f363"}.fa-code-commit{--fa:"\f386"}.fa-code-merge{--fa:"\f387"}.fa-desktop,.fa-desktop-alt{--fa:"\f390"}.fa-gem{--fa:"\f3a5"}.fa-level-down-alt,.fa-turn-down{--fa:"\f3be"}.fa-level-up-alt,.fa-turn-up{--fa:"\f3bf"}.fa-lock-open{--fa:"\f3c1"}.fa-location-dot,.fa-map-marker-alt{--fa:"\f3c5"}.fa-microphone-alt,.fa-microphone-lines{--fa:"\f3c9"}.fa-mobile-alt,.fa-mobile-screen-button{--fa:"\f3cd"}.fa-mobile,.fa-mobile-android,.fa-mobile-phone{--fa:"\f3ce"}.fa-mobile-android-alt,.fa-mobile-screen{--fa:"\f3cf"}.fa-money-bill-1,.fa-money-bill-alt{--fa:"\f3d1"}.fa-phone-slash{--fa:"\f3dd"}.fa-image-portrait,.fa-portrait{--fa:"\f3e0"}.fa-mail-reply,.fa-reply{--fa:"\f3e5"}.fa-shield-alt,.fa-shield-halved{--fa:"\f3ed"}.fa-tablet-alt,.fa-tablet-screen-button{--fa:"\f3fa"}.fa-tablet,.fa-tablet-android{--fa:"\f3fb"}.fa-ticket-alt,.fa-ticket-simple{--fa:"\f3ff"}.fa-rectangle-times,.fa-rectangle-xmark,.fa-times-rectangle,.fa-window-close{--fa:"\f410"}.fa-compress-alt,.fa-down-left-and-up-right-to-center{--fa:"\f422"}.fa-expand-alt,.fa-up-right-and-down-left-from-center{--fa:"\f424"}.fa-baseball-bat-ball{--fa:"\f432"}.fa-baseball,.fa-baseball-ball{--fa:"\f433"}.fa-basketball,.fa-basketball-ball{--fa:"\f434"}.fa-bowling-ball{--fa:"\f436"}.fa-chess{--fa:"\f439"}.fa-chess-bishop{--fa:"\f43a"}.fa-chess-board{--fa:"\f43c"}.fa-chess-king{--fa:"\f43f"}.fa-chess-knight{--fa:"\f441"}.fa-chess-pawn{--fa:"\f443"}.fa-chess-queen{--fa:"\f445"}.fa-chess-rook{--fa:"\f447"}.fa-dumbbell{--fa:"\f44b"}.fa-football,.fa-football-ball{--fa:"\f44e"}.fa-golf-ball,.fa-golf-ball-tee{--fa:"\f450"}.fa-hockey-puck{--fa:"\f453"}.fa-broom-ball,.fa-quidditch,.fa-quidditch-broom-ball{--fa:"\f458"}.fa-square-full{--fa:"\f45c"}.fa-ping-pong-paddle-ball,.fa-table-tennis,.fa-table-tennis-paddle-ball{--fa:"\f45d"}.fa-volleyball,.fa-volleyball-ball{--fa:"\f45f"}.fa-allergies,.fa-hand-dots{--fa:"\f461"}.fa-band-aid,.fa-bandage{--fa:"\f462"}.fa-box{--fa:"\f466"}.fa-boxes,.fa-boxes-alt,.fa-boxes-stacked{--fa:"\f468"}.fa-briefcase-medical{--fa:"\f469"}.fa-burn,.fa-fire-flame-simple{--fa:"\f46a"}.fa-capsules{--fa:"\f46b"}.fa-clipboard-check{--fa:"\f46c"}.fa-clipboard-list{--fa:"\f46d"}.fa-diagnoses,.fa-person-dots-from-line{--fa:"\f470"}.fa-dna{--fa:"\f471"}.fa-dolly,.fa-dolly-box{--fa:"\f472"}.fa-cart-flatbed,.fa-dolly-flatbed{--fa:"\f474"}.fa-file-medical{--fa:"\f477"}.fa-file-medical-alt,.fa-file-waveform{--fa:"\f478"}.fa-first-aid,.fa-kit-medical{--fa:"\f479"}.fa-circle-h,.fa-hospital-symbol{--fa:"\f47e"}.fa-id-card-alt,.fa-id-card-clip{--fa:"\f47f"}.fa-notes-medical{--fa:"\f481"}.fa-pallet{--fa:"\f482"}.fa-pills{--fa:"\f484"}.fa-prescription-bottle{--fa:"\f485"}.fa-prescription-bottle-alt,.fa-prescription-bottle-medical{--fa:"\f486"}.fa-bed-pulse,.fa-procedures{--fa:"\f487"}.fa-shipping-fast,.fa-truck-fast{--fa:"\f48b"}.fa-smoking{--fa:"\f48d"}.fa-syringe{--fa:"\f48e"}.fa-tablets{--fa:"\f490"}.fa-thermometer{--fa:"\f491"}.fa-vial{--fa:"\f492"}.fa-vials{--fa:"\f493"}.fa-warehouse{--fa:"\f494"}.fa-weight,.fa-weight-scale{--fa:"\f496"}.fa-x-ray{--fa:"\f497"}.fa-box-open{--fa:"\f49e"}.fa-comment-dots,.fa-commenting{--fa:"\f4ad"}.fa-comment-slash{--fa:"\f4b3"}.fa-couch{--fa:"\f4b8"}.fa-circle-dollar-to-slot,.fa-donate{--fa:"\f4b9"}.fa-dove{--fa:"\f4ba"}.fa-hand-holding{--fa:"\f4bd"}.fa-hand-holding-heart{--fa:"\f4be"}.fa-hand-holding-dollar,.fa-hand-holding-usd{--fa:"\f4c0"}.fa-hand-holding-droplet,.fa-hand-holding-water{--fa:"\f4c1"}.fa-hands-holding{--fa:"\f4c2"}.fa-hands-helping,.fa-handshake-angle{--fa:"\f4c4"}.fa-parachute-box{--fa:"\f4cd"}.fa-people-carry,.fa-people-carry-box{--fa:"\f4ce"}.fa-piggy-bank{--fa:"\f4d3"}.fa-ribbon{--fa:"\f4d6"}.fa-route{--fa:"\f4d7"}.fa-seedling,.fa-sprout{--fa:"\f4d8"}.fa-sign,.fa-sign-hanging{--fa:"\f4d9"}.fa-face-smile-wink,.fa-smile-wink{--fa:"\f4da"}.fa-tape{--fa:"\f4db"}.fa-truck-loading,.fa-truck-ramp-box{--fa:"\f4de"}.fa-truck-moving{--fa:"\f4df"}.fa-video-slash{--fa:"\f4e2"}.fa-wine-glass{--fa:"\f4e3"}.fa-user-astronaut{--fa:"\f4fb"}.fa-user-check{--fa:"\f4fc"}.fa-user-clock{--fa:"\f4fd"}.fa-user-cog,.fa-user-gear{--fa:"\f4fe"}.fa-user-edit,.fa-user-pen{--fa:"\f4ff"}.fa-user-friends,.fa-user-group{--fa:"\f500"}.fa-user-graduate{--fa:"\f501"}.fa-user-lock{--fa:"\f502"}.fa-user-minus{--fa:"\f503"}.fa-user-ninja{--fa:"\f504"}.fa-user-shield{--fa:"\f505"}.fa-user-alt-slash,.fa-user-large-slash,.fa-user-slash{--fa:"\f506"}.fa-user-tag{--fa:"\f507"}.fa-user-tie{--fa:"\f508"}.fa-users-cog,.fa-users-gear{--fa:"\f509"}.fa-balance-scale-left,.fa-scale-unbalanced{--fa:"\f515"}.fa-balance-scale-right,.fa-scale-unbalanced-flip{--fa:"\f516"}.fa-blender{--fa:"\f517"}.fa-book-open{--fa:"\f518"}.fa-broadcast-tower,.fa-tower-broadcast{--fa:"\f519"}.fa-broom{--fa:"\f51a"}.fa-blackboard,.fa-chalkboard{--fa:"\f51b"}.fa-chalkboard-teacher,.fa-chalkboard-user{--fa:"\f51c"}.fa-church{--fa:"\f51d"}.fa-coins{--fa:"\f51e"}.fa-compact-disc{--fa:"\f51f"}.fa-crow{--fa:"\f520"}.fa-crown{--fa:"\f521"}.fa-dice{--fa:"\f522"}.fa-dice-five{--fa:"\f523"}.fa-dice-four{--fa:"\f524"}.fa-dice-one{--fa:"\f525"}.fa-dice-six{--fa:"\f526"}.fa-dice-three{--fa:"\f527"}.fa-dice-two{--fa:"\f528"}.fa-divide{--fa:"\f529"}.fa-door-closed{--fa:"\f52a"}.fa-door-open{--fa:"\f52b"}.fa-feather{--fa:"\f52d"}.fa-frog{--fa:"\f52e"}.fa-gas-pump{--fa:"\f52f"}.fa-glasses{--fa:"\f530"}.fa-greater-than-equal{--fa:"\f532"}.fa-helicopter{--fa:"\f533"}.fa-infinity{--fa:"\f534"}.fa-kiwi-bird{--fa:"\f535"}.fa-less-than-equal{--fa:"\f537"}.fa-memory{--fa:"\f538"}.fa-microphone-alt-slash,.fa-microphone-lines-slash{--fa:"\f539"}.fa-money-bill-wave{--fa:"\f53a"}.fa-money-bill-1-wave,.fa-money-bill-wave-alt{--fa:"\f53b"}.fa-money-check{--fa:"\f53c"}.fa-money-check-alt,.fa-money-check-dollar{--fa:"\f53d"}.fa-not-equal{--fa:"\f53e"}.fa-palette{--fa:"\f53f"}.fa-parking,.fa-square-parking{--fa:"\f540"}.fa-diagram-project,.fa-project-diagram{--fa:"\f542"}.fa-receipt{--fa:"\f543"}.fa-robot{--fa:"\f544"}.fa-ruler{--fa:"\f545"}.fa-ruler-combined{--fa:"\f546"}.fa-ruler-horizontal{--fa:"\f547"}.fa-ruler-vertical{--fa:"\f548"}.fa-school{--fa:"\f549"}.fa-screwdriver{--fa:"\f54a"}.fa-shoe-prints{--fa:"\f54b"}.fa-skull{--fa:"\f54c"}.fa-ban-smoking,.fa-smoking-ban{--fa:"\f54d"}.fa-store{--fa:"\f54e"}.fa-shop,.fa-store-alt{--fa:"\f54f"}.fa-bars-staggered,.fa-reorder,.fa-stream{--fa:"\f550"}.fa-stroopwafel{--fa:"\f551"}.fa-toolbox{--fa:"\f552"}.fa-shirt,.fa-t-shirt,.fa-tshirt{--fa:"\f553"}.fa-person-walking,.fa-walking{--fa:"\f554"}.fa-wallet{--fa:"\f555"}.fa-angry,.fa-face-angry{--fa:"\f556"}.fa-archway{--fa:"\f557"}.fa-atlas,.fa-book-atlas{--fa:"\f558"}.fa-award{--fa:"\f559"}.fa-backspace,.fa-delete-left{--fa:"\f55a"}.fa-bezier-curve{--fa:"\f55b"}.fa-bong{--fa:"\f55c"}.fa-brush{--fa:"\f55d"}.fa-bus-alt,.fa-bus-simple{--fa:"\f55e"}.fa-cannabis{--fa:"\f55f"}.fa-check-double{--fa:"\f560"}.fa-cocktail,.fa-martini-glass-citrus{--fa:"\f561"}.fa-bell-concierge,.fa-concierge-bell{--fa:"\f562"}.fa-cookie{--fa:"\f563"}.fa-cookie-bite{--fa:"\f564"}.fa-crop-alt,.fa-crop-simple{--fa:"\f565"}.fa-digital-tachograph,.fa-tachograph-digital{--fa:"\f566"}.fa-dizzy,.fa-face-dizzy{--fa:"\f567"}.fa-compass-drafting,.fa-drafting-compass{--fa:"\f568"}.fa-drum{--fa:"\f569"}.fa-drum-steelpan{--fa:"\f56a"}.fa-feather-alt,.fa-feather-pointed{--fa:"\f56b"}.fa-file-contract{--fa:"\f56c"}.fa-file-arrow-down,.fa-file-download{--fa:"\f56d"}.fa-arrow-right-from-file,.fa-file-export{--fa:"\f56e"}.fa-arrow-right-to-file,.fa-file-import{--fa:"\f56f"}.fa-file-invoice{--fa:"\f570"}.fa-file-invoice-dollar{--fa:"\f571"}.fa-file-prescription{--fa:"\f572"}.fa-file-signature{--fa:"\f573"}.fa-file-arrow-up,.fa-file-upload{--fa:"\f574"}.fa-fill{--fa:"\f575"}.fa-fill-drip{--fa:"\f576"}.fa-fingerprint{--fa:"\f577"}.fa-fish{--fa:"\f578"}.fa-face-flushed,.fa-flushed{--fa:"\f579"}.fa-face-frown-open,.fa-frown-open{--fa:"\f57a"}.fa-glass-martini-alt,.fa-martini-glass{--fa:"\f57b"}.fa-earth-africa,.fa-globe-africa{--fa:"\f57c"}.fa-earth,.fa-earth-america,.fa-earth-americas,.fa-globe-americas{--fa:"\f57d"}.fa-earth-asia,.fa-globe-asia{--fa:"\f57e"}.fa-face-grimace,.fa-grimace{--fa:"\f57f"}.fa-face-grin,.fa-grin{--fa:"\f580"}.fa-face-grin-wide,.fa-grin-alt{--fa:"\f581"}.fa-face-grin-beam,.fa-grin-beam{--fa:"\f582"}.fa-face-grin-beam-sweat,.fa-grin-beam-sweat{--fa:"\f583"}.fa-face-grin-hearts,.fa-grin-hearts{--fa:"\f584"}.fa-face-grin-squint,.fa-grin-squint{--fa:"\f585"}.fa-face-grin-squint-tears,.fa-grin-squint-tears{--fa:"\f586"}.fa-face-grin-stars,.fa-grin-stars{--fa:"\f587"}.fa-face-grin-tears,.fa-grin-tears{--fa:"\f588"}.fa-face-grin-tongue,.fa-grin-tongue{--fa:"\f589"}.fa-face-grin-tongue-squint,.fa-grin-tongue-squint{--fa:"\f58a"}.fa-face-grin-tongue-wink,.fa-grin-tongue-wink{--fa:"\f58b"}.fa-face-grin-wink,.fa-grin-wink{--fa:"\f58c"}.fa-grid-horizontal,.fa-grip,.fa-grip-horizontal{--fa:"\f58d"}.fa-grid-vertical,.fa-grip-vertical{--fa:"\f58e"}.fa-headset{--fa:"\f590"}.fa-highlighter{--fa:"\f591"}.fa-hot-tub,.fa-hot-tub-person{--fa:"\f593"}.fa-hotel{--fa:"\f594"}.fa-joint{--fa:"\f595"}.fa-face-kiss,.fa-kiss{--fa:"\f596"}.fa-face-kiss-beam,.fa-kiss-beam{--fa:"\f597"}.fa-face-kiss-wink-heart,.fa-kiss-wink-heart{--fa:"\f598"}.fa-face-laugh,.fa-laugh{--fa:"\f599"}.fa-face-laugh-beam,.fa-laugh-beam{--fa:"\f59a"}.fa-face-laugh-squint,.fa-laugh-squint{--fa:"\f59b"}.fa-face-laugh-wink,.fa-laugh-wink{--fa:"\f59c"}.fa-cart-flatbed-suitcase,.fa-luggage-cart{--fa:"\f59d"}.fa-map-location,.fa-map-marked{--fa:"\f59f"}.fa-map-location-dot,.fa-map-marked-alt{--fa:"\f5a0"}.fa-marker{--fa:"\f5a1"}.fa-medal{--fa:"\f5a2"}.fa-face-meh-blank,.fa-meh-blank{--fa:"\f5a4"}.fa-face-rolling-eyes,.fa-meh-rolling-eyes{--fa:"\f5a5"}.fa-monument{--fa:"\f5a6"}.fa-mortar-pestle{--fa:"\f5a7"}.fa-paint-roller{--fa:"\f5aa"}.fa-passport{--fa:"\f5ab"}.fa-pen-fancy{--fa:"\f5ac"}.fa-pen-nib{--fa:"\f5ad"}.fa-pen-ruler,.fa-pencil-ruler{--fa:"\f5ae"}.fa-plane-arrival{--fa:"\f5af"}.fa-plane-departure{--fa:"\f5b0"}.fa-prescription{--fa:"\f5b1"}.fa-face-sad-cry,.fa-sad-cry{--fa:"\f5b3"}.fa-face-sad-tear,.fa-sad-tear{--fa:"\f5b4"}.fa-shuttle-van,.fa-van-shuttle{--fa:"\f5b6"}.fa-signature{--fa:"\f5b7"}.fa-face-smile-beam,.fa-smile-beam{--fa:"\f5b8"}.fa-solar-panel{--fa:"\f5ba"}.fa-spa{--fa:"\f5bb"}.fa-splotch{--fa:"\f5bc"}.fa-spray-can{--fa:"\f5bd"}.fa-stamp{--fa:"\f5bf"}.fa-star-half-alt,.fa-star-half-stroke{--fa:"\f5c0"}.fa-suitcase-rolling{--fa:"\f5c1"}.fa-face-surprise,.fa-surprise{--fa:"\f5c2"}.fa-swatchbook{--fa:"\f5c3"}.fa-person-swimming,.fa-swimmer{--fa:"\f5c4"}.fa-ladder-water,.fa-swimming-pool,.fa-water-ladder{--fa:"\f5c5"}.fa-droplet-slash,.fa-tint-slash{--fa:"\f5c7"}.fa-face-tired,.fa-tired{--fa:"\f5c8"}.fa-tooth{--fa:"\f5c9"}.fa-umbrella-beach{--fa:"\f5ca"}.fa-weight-hanging{--fa:"\f5cd"}.fa-wine-glass-alt,.fa-wine-glass-empty{--fa:"\f5ce"}.fa-air-freshener,.fa-spray-can-sparkles{--fa:"\f5d0"}.fa-apple-alt,.fa-apple-whole{--fa:"\f5d1"}.fa-atom{--fa:"\f5d2"}.fa-bone{--fa:"\f5d7"}.fa-book-open-reader,.fa-book-reader{--fa:"\f5da"}.fa-brain{--fa:"\f5dc"}.fa-car-alt,.fa-car-rear{--fa:"\f5de"}.fa-battery-car,.fa-car-battery{--fa:"\f5df"}.fa-car-burst,.fa-car-crash{--fa:"\f5e1"}.fa-car-side{--fa:"\f5e4"}.fa-charging-station{--fa:"\f5e7"}.fa-diamond-turn-right,.fa-directions{--fa:"\f5eb"}.fa-draw-polygon,.fa-vector-polygon{--fa:"\f5ee"}.fa-laptop-code{--fa:"\f5fc"}.fa-layer-group{--fa:"\f5fd"}.fa-location,.fa-location-crosshairs{--fa:"\f601"}.fa-lungs{--fa:"\f604"}.fa-microscope{--fa:"\f610"}.fa-oil-can{--fa:"\f613"}.fa-poop{--fa:"\f619"}.fa-shapes,.fa-triangle-circle-square{--fa:"\f61f"}.fa-star-of-life{--fa:"\f621"}.fa-dashboard,.fa-gauge,.fa-gauge-med,.fa-tachometer-alt-average{--fa:"\f624"}.fa-gauge-high,.fa-tachometer-alt,.fa-tachometer-alt-fast{--fa:"\f625"}.fa-gauge-simple,.fa-gauge-simple-med,.fa-tachometer-average{--fa:"\f629"}.fa-gauge-simple-high,.fa-tachometer,.fa-tachometer-fast{--fa:"\f62a"}.fa-teeth{--fa:"\f62e"}.fa-teeth-open{--fa:"\f62f"}.fa-masks-theater,.fa-theater-masks{--fa:"\f630"}.fa-traffic-light{--fa:"\f637"}.fa-truck-monster{--fa:"\f63b"}.fa-truck-pickup{--fa:"\f63c"}.fa-ad,.fa-rectangle-ad{--fa:"\f641"}.fa-ankh{--fa:"\f644"}.fa-bible,.fa-book-bible{--fa:"\f647"}.fa-briefcase-clock,.fa-business-time{--fa:"\f64a"}.fa-city{--fa:"\f64f"}.fa-comment-dollar{--fa:"\f651"}.fa-comments-dollar{--fa:"\f653"}.fa-cross{--fa:"\f654"}.fa-dharmachakra{--fa:"\f655"}.fa-envelope-open-text{--fa:"\f658"}.fa-folder-minus{--fa:"\f65d"}.fa-folder-plus{--fa:"\f65e"}.fa-filter-circle-dollar,.fa-funnel-dollar{--fa:"\f662"}.fa-gopuram{--fa:"\f664"}.fa-hamsa{--fa:"\f665"}.fa-bahai,.fa-haykal{--fa:"\f666"}.fa-jedi{--fa:"\f669"}.fa-book-journal-whills,.fa-journal-whills{--fa:"\f66a"}.fa-kaaba{--fa:"\f66b"}.fa-khanda{--fa:"\f66d"}.fa-landmark{--fa:"\f66f"}.fa-envelopes-bulk,.fa-mail-bulk{--fa:"\f674"}.fa-menorah{--fa:"\f676"}.fa-mosque{--fa:"\f678"}.fa-om{--fa:"\f679"}.fa-pastafarianism,.fa-spaghetti-monster-flying{--fa:"\f67b"}.fa-peace{--fa:"\f67c"}.fa-place-of-worship{--fa:"\f67f"}.fa-poll,.fa-square-poll-vertical{--fa:"\f681"}.fa-poll-h,.fa-square-poll-horizontal{--fa:"\f682"}.fa-person-praying,.fa-pray{--fa:"\f683"}.fa-hands-praying,.fa-praying-hands{--fa:"\f684"}.fa-book-quran,.fa-quran{--fa:"\f687"}.fa-magnifying-glass-dollar,.fa-search-dollar{--fa:"\f688"}.fa-magnifying-glass-location,.fa-search-location{--fa:"\f689"}.fa-socks{--fa:"\f696"}.fa-square-root-alt,.fa-square-root-variable{--fa:"\f698"}.fa-star-and-crescent{--fa:"\f699"}.fa-star-of-david{--fa:"\f69a"}.fa-synagogue{--fa:"\f69b"}.fa-scroll-torah,.fa-torah{--fa:"\f6a0"}.fa-torii-gate{--fa:"\f6a1"}.fa-vihara{--fa:"\f6a7"}.fa-volume,.fa-volume-medium{--fa:"\f6a8"}.fa-volume-mute,.fa-volume-times,.fa-volume-xmark{--fa:"\f6a9"}.fa-yin-yang{--fa:"\f6ad"}.fa-blender-phone{--fa:"\f6b6"}.fa-book-dead,.fa-book-skull{--fa:"\f6b7"}.fa-campground{--fa:"\f6bb"}.fa-cat{--fa:"\f6be"}.fa-chair{--fa:"\f6c0"}.fa-cloud-moon{--fa:"\f6c3"}.fa-cloud-sun{--fa:"\f6c4"}.fa-cow{--fa:"\f6c8"}.fa-dice-d20{--fa:"\f6cf"}.fa-dice-d6{--fa:"\f6d1"}.fa-dog{--fa:"\f6d3"}.fa-dragon{--fa:"\f6d5"}.fa-drumstick-bite{--fa:"\f6d7"}.fa-dungeon{--fa:"\f6d9"}.fa-file-csv{--fa:"\f6dd"}.fa-fist-raised,.fa-hand-fist{--fa:"\f6de"}.fa-ghost{--fa:"\f6e2"}.fa-hammer{--fa:"\f6e3"}.fa-hanukiah{--fa:"\f6e6"}.fa-hat-wizard{--fa:"\f6e8"}.fa-hiking,.fa-person-hiking{--fa:"\f6ec"}.fa-hippo{--fa:"\f6ed"}.fa-horse{--fa:"\f6f0"}.fa-house-chimney-crack,.fa-house-damage{--fa:"\f6f1"}.fa-hryvnia,.fa-hryvnia-sign{--fa:"\f6f2"}.fa-mask{--fa:"\f6fa"}.fa-mountain{--fa:"\f6fc"}.fa-network-wired{--fa:"\f6ff"}.fa-otter{--fa:"\f700"}.fa-ring{--fa:"\f70b"}.fa-person-running,.fa-running{--fa:"\f70c"}.fa-scroll{--fa:"\f70e"}.fa-skull-crossbones{--fa:"\f714"}.fa-slash{--fa:"\f715"}.fa-spider{--fa:"\f717"}.fa-toilet-paper,.fa-toilet-paper-alt,.fa-toilet-paper-blank{--fa:"\f71e"}.fa-tractor{--fa:"\f722"}.fa-user-injured{--fa:"\f728"}.fa-vr-cardboard{--fa:"\f729"}.fa-wand-sparkles{--fa:"\f72b"}.fa-wind{--fa:"\f72e"}.fa-wine-bottle{--fa:"\f72f"}.fa-cloud-meatball{--fa:"\f73b"}.fa-cloud-moon-rain{--fa:"\f73c"}.fa-cloud-rain{--fa:"\f73d"}.fa-cloud-showers-heavy{--fa:"\f740"}.fa-cloud-sun-rain{--fa:"\f743"}.fa-democrat{--fa:"\f747"}.fa-flag-usa{--fa:"\f74d"}.fa-hurricane{--fa:"\f751"}.fa-landmark-alt,.fa-landmark-dome{--fa:"\f752"}.fa-meteor{--fa:"\f753"}.fa-person-booth{--fa:"\f756"}.fa-poo-bolt,.fa-poo-storm{--fa:"\f75a"}.fa-rainbow{--fa:"\f75b"}.fa-republican{--fa:"\f75e"}.fa-smog{--fa:"\f75f"}.fa-temperature-high{--fa:"\f769"}.fa-temperature-low{--fa:"\f76b"}.fa-cloud-bolt,.fa-thunderstorm{--fa:"\f76c"}.fa-tornado{--fa:"\f76f"}.fa-volcano{--fa:"\f770"}.fa-check-to-slot,.fa-vote-yea{--fa:"\f772"}.fa-water{--fa:"\f773"}.fa-baby{--fa:"\f77c"}.fa-baby-carriage,.fa-carriage-baby{--fa:"\f77d"}.fa-biohazard{--fa:"\f780"}.fa-blog{--fa:"\f781"}.fa-calendar-day{--fa:"\f783"}.fa-calendar-week{--fa:"\f784"}.fa-candy-cane{--fa:"\f786"}.fa-carrot{--fa:"\f787"}.fa-cash-register{--fa:"\f788"}.fa-compress-arrows-alt,.fa-minimize{--fa:"\f78c"}.fa-dumpster{--fa:"\f793"}.fa-dumpster-fire{--fa:"\f794"}.fa-ethernet{--fa:"\f796"}.fa-gifts{--fa:"\f79c"}.fa-champagne-glasses,.fa-glass-cheers{--fa:"\f79f"}.fa-glass-whiskey,.fa-whiskey-glass{--fa:"\f7a0"}.fa-earth-europe,.fa-globe-europe{--fa:"\f7a2"}.fa-grip-lines{--fa:"\f7a4"}.fa-grip-lines-vertical{--fa:"\f7a5"}.fa-guitar{--fa:"\f7a6"}.fa-heart-broken,.fa-heart-crack{--fa:"\f7a9"}.fa-holly-berry{--fa:"\f7aa"}.fa-horse-head{--fa:"\f7ab"}.fa-icicles{--fa:"\f7ad"}.fa-igloo{--fa:"\f7ae"}.fa-mitten{--fa:"\f7b5"}.fa-mug-hot{--fa:"\f7b6"}.fa-radiation{--fa:"\f7b9"}.fa-circle-radiation,.fa-radiation-alt{--fa:"\f7ba"}.fa-restroom{--fa:"\f7bd"}.fa-satellite{--fa:"\f7bf"}.fa-satellite-dish{--fa:"\f7c0"}.fa-sd-card{--fa:"\f7c2"}.fa-sim-card{--fa:"\f7c4"}.fa-person-skating,.fa-skating{--fa:"\f7c5"}.fa-person-skiing,.fa-skiing{--fa:"\f7c9"}.fa-person-skiing-nordic,.fa-skiing-nordic{--fa:"\f7ca"}.fa-sleigh{--fa:"\f7cc"}.fa-comment-sms,.fa-sms{--fa:"\f7cd"}.fa-person-snowboarding,.fa-snowboarding{--fa:"\f7ce"}.fa-snowman{--fa:"\f7d0"}.fa-snowplow{--fa:"\f7d2"}.fa-tenge,.fa-tenge-sign{--fa:"\f7d7"}.fa-toilet{--fa:"\f7d8"}.fa-screwdriver-wrench,.fa-tools{--fa:"\f7d9"}.fa-cable-car,.fa-tram{--fa:"\f7da"}.fa-fire-alt,.fa-fire-flame-curved{--fa:"\f7e4"}.fa-bacon{--fa:"\f7e5"}.fa-book-medical{--fa:"\f7e6"}.fa-bread-slice{--fa:"\f7ec"}.fa-cheese{--fa:"\f7ef"}.fa-clinic-medical,.fa-house-chimney-medical{--fa:"\f7f2"}.fa-clipboard-user{--fa:"\f7f3"}.fa-comment-medical{--fa:"\f7f5"}.fa-crutch{--fa:"\f7f7"}.fa-disease{--fa:"\f7fa"}.fa-egg{--fa:"\f7fb"}.fa-folder-tree{--fa:"\f802"}.fa-burger,.fa-hamburger{--fa:"\f805"}.fa-hand-middle-finger{--fa:"\f806"}.fa-hard-hat,.fa-hat-hard,.fa-helmet-safety{--fa:"\f807"}.fa-hospital-user{--fa:"\f80d"}.fa-hotdog{--fa:"\f80f"}.fa-ice-cream{--fa:"\f810"}.fa-laptop-medical{--fa:"\f812"}.fa-pager{--fa:"\f815"}.fa-pepper-hot{--fa:"\f816"}.fa-pizza-slice{--fa:"\f818"}.fa-sack-dollar{--fa:"\f81d"}.fa-book-tanakh,.fa-tanakh{--fa:"\f827"}.fa-bars-progress,.fa-tasks-alt{--fa:"\f828"}.fa-trash-arrow-up,.fa-trash-restore{--fa:"\f829"}.fa-trash-can-arrow-up,.fa-trash-restore-alt{--fa:"\f82a"}.fa-user-nurse{--fa:"\f82f"}.fa-wave-square{--fa:"\f83e"}.fa-biking,.fa-person-biking{--fa:"\f84a"}.fa-border-all{--fa:"\f84c"}.fa-border-none{--fa:"\f850"}.fa-border-style,.fa-border-top-left{--fa:"\f853"}.fa-digging,.fa-person-digging{--fa:"\f85e"}.fa-fan{--fa:"\f863"}.fa-heart-music-camera-bolt,.fa-icons{--fa:"\f86d"}.fa-phone-alt,.fa-phone-flip{--fa:"\f879"}.fa-phone-square-alt,.fa-square-phone-flip{--fa:"\f87b"}.fa-photo-film,.fa-photo-video{--fa:"\f87c"}.fa-remove-format,.fa-text-slash{--fa:"\f87d"}.fa-arrow-down-z-a,.fa-sort-alpha-desc,.fa-sort-alpha-down-alt{--fa:"\f881"}.fa-arrow-up-z-a,.fa-sort-alpha-up-alt{--fa:"\f882"}.fa-arrow-down-short-wide,.fa-sort-amount-desc,.fa-sort-amount-down-alt{--fa:"\f884"}.fa-arrow-up-short-wide,.fa-sort-amount-up-alt{--fa:"\f885"}.fa-arrow-down-9-1,.fa-sort-numeric-desc,.fa-sort-numeric-down-alt{--fa:"\f886"}.fa-arrow-up-9-1,.fa-sort-numeric-up-alt{--fa:"\f887"}.fa-spell-check{--fa:"\f891"}.fa-voicemail{--fa:"\f897"}.fa-hat-cowboy{--fa:"\f8c0"}.fa-hat-cowboy-side{--fa:"\f8c1"}.fa-computer-mouse,.fa-mouse{--fa:"\f8cc"}.fa-radio{--fa:"\f8d7"}.fa-record-vinyl{--fa:"\f8d9"}.fa-walkie-talkie{--fa:"\f8ef"}.fa-caravan{--fa:"\f8ff"}

/*!
 * Font Awesome Free 7.2.0 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 * Copyright 2026 Fonticons, Inc.
 */
:host,:root{--fa-family-classic:"Font Awesome 7 Free";--fa-font-solid:normal 900 1em/1 var(--fa-family-classic);--fa-style-family-classic:var(--fa-family-classic)}@font-face{font-family:"Font Awesome 7 Free";font-style:normal;font-weight:900;font-display:block;src:url(../webfonts/fa-solid-900.woff2)}.fas{--fa-style:900}.fa-classic,.fas{--fa-family:var(--fa-family-classic)}.fa-solid{--fa-style:900}
/* =============================================================================
   base.css — Reset, typography, and global design tokens
   All color/spacing variables live here. Import this first.
   ============================================================================= */

/* ── Reset ──────────────────────────────────────────────────────────────────── */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ── Design Tokens ───────────────────────────────────────────────────────────────
   Single source of truth. SEMANTIC role tokens (--text-*, --surface-*, --border-*,
   --brand-*) are re-valued under body.dark-mode (themes.css) so components that read
   them flip automatically — no per-component dark override needed. Legacy --color-*
   vars are kept because existing rules reference them; new work should prefer the
   semantic roles + scales below. Light values here == current app values (no visual
   change from introducing the vocabulary).
   ============================================================================= */
:root {
    /* ── Legacy (kept: still referenced by existing rules) — re-valued to the
       warm/crisp palette so anything not yet migrated to the semantic roles
       still looks consistent, not stuck on the old cool-slate hues. ── */
    --color-brand-primary:   #3480c9;
    --color-brand-secondary: #932fb0;
    --color-brand-purple:    #932fb0;
    --color-text-primary:   #1f1b16;
    --color-text-secondary: #56503e;
    --color-text-muted:     #7c7360;
    --color-bg-page:        #f7f4ee;
    --color-bg-card:        #ffffff;
    --color-border:         #ddd5c4;
    --color-success:  #4d7c3f;
    --color-danger:   #dc4440;
    --color-warning:  #b8791a;
    --color-info:     #3480c9;

    /* ── Neutral ramp (warm-tinted, absorbs the repeated greys) ── */
    --neutral-0:   #ffffff;
    --neutral-50:  #f7f4ee;
    --neutral-100: #f2ede2;
    --neutral-200: #ddd5c4;
    --neutral-300: #c9c0aa;
    --neutral-400: #a89f8c;
    --neutral-500: #7c7360;
    --neutral-600: #56503e;
    --neutral-700: #3c372a;
    --neutral-800: #26221a;
    --neutral-900: #15130f;

    /* ── Semantic roles (flip under body.dark-mode) ── */
    --text-primary:    #1f1b16;
    --text-secondary:  #56503e;
    --text-muted:      #7c7360;
    --text-disabled:   #a89f8c;
    --surface-page:    #f7f4ee;   /* calm warm solid; replaces the busy page gradient */
    --surface-card:    #ffffff;
    --surface-raised:  #f2ede2;
    --surface-overlay: rgba(21,17,13,0.5);
    --border-subtle:   #eae4d6;
    --border-default:  #ddd5c4;
    --border-strong:   #c9c0aa;

    /* ── Per-app brand (identity preserved in both modes, more saturated) ── */
    --brand-rr:        #3480c9;  --brand-rr-tint:  rgba(52,128,201,0.13);  --brand-rr-hover:  #1f5c8f;
    --brand-mit:       #dc4440;  --brand-mit-tint: rgba(220,68,64,0.13);   --brand-mit-hover: #b5322f;
    --brand-cal:       #932fb0;  --brand-cal-tint: rgba(147,47,176,0.13); --brand-cal-hover: #7a2792;
    --brand-watchlist: #1d9e75;  --brand-watchlist-tint: rgba(29,158,117,0.13); --brand-watchlist-hover: #146b50;

    /* ── Status roles ── */
    --success: #4d7c3f;  --success-tint: rgba(77,124,63,0.13);
    --danger:  #dc4440;  --danger-tint:  rgba(220,68,64,0.13);
    --warning: #b8791a;  --warning-tint: rgba(184,121,26,0.13);
    --warning-text: #a56616;  /* readable brown-on-tint text, darker than --warning itself */
    --info:    #3480c9;  --info-tint:    rgba(52,128,201,0.13);

    /* ── IPC brand mark (logo gradient only — not a semantic role) ── */
    --ipc-logo-start: #c0007b;
    --ipc-logo-start-hover: #a00068;

    /* ── Spacing scale ── */
    --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
    --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 48px;

    /* ── Type scale + weights ── */
    --text-xs: 11px; --text-sm: 12px; --text-base: 13px; --text-md: 14px;
    --text-lg: 16px; --text-xl: 18px; --text-2xl: 22px; --text-3xl: 26px;
    --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700;

    /* ── Radius (existing scale kept) ── */
    --radius-sm:  6px;
    --radius-md:  8px;
    --radius-lg:  10px;
    --radius-xl:  16px;

    /* ── Shadow scale ── */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    --shadow-lg: 0 20px 60px rgba(0,0,0,0.2);
    --shadow-card: 0 2px 10px rgba(0,0,0,0.1);       /* legacy alias */
    --shadow-elevated: 0 4px 12px rgba(0,0,0,0.15);  /* legacy alias */

    /* ── Motion ── */
    --dur-fast: 150ms; --dur-base: 200ms; --dur-slow: 300ms;
}

/* ── Body ────────────────────────────────────────────────────────────────────── */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif;
    background: var(--surface-page);
    color: var(--text-primary);
    min-height: 100vh;
    padding: 20px;
}

/* ── Typography ─────────────────────────────────────────────────────────────── */
h1 {
    font-size: 26px;
    color: var(--color-text-primary);
    margin: 0;
    letter-spacing: -0.5px;
}

/* ── Loading Spinner ─────────────────────────────────────────────────────────── */
.loading {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid var(--color-brand-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* =============================================================================
   layout.css — Page structure: header, grid, tabs, panels, responsive
   ============================================================================= */

/* ── Container ───────────────────────────────────────────────────────────────── */
.container {
    max-width: 1600px;
    margin: 0 auto;
}

/* ── App switcher rail (vertical) ─────────────────────────────────────────────── */
.app-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 60px;
    z-index: 40;
    display: none;              /* shown by renderAppSidebar() only inside an app */
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 0;
    background: var(--surface-card);
    border-right: 1px solid var(--border-default);
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.05);
    overflow-y: auto;
    overflow-x: hidden;
}
/* Shift app content right so the rail never overlaps it. These elements are
   box-sizing:border-box and carry their own max-width:1600px (.container /
   .personal-screen) — without the +60px compensation here, the padding below
   would eat directly into that budget, rendering 60px narrower than the Hub's
   header (which has no sidebar, hence no padding, hence the full 1600px). */
body.has-app-sidebar #main-app,
body.has-app-sidebar #mit-app,
body.has-app-sidebar #cal-app,
body.has-app-sidebar #watchlist-app,
body.has-app-sidebar #personal-view,
body.has-app-sidebar #admin-view {
    padding-left: 60px;
    max-width: 1660px;
}
.app-sidebar-sep {
    width: 34px;
    height: 1px;
    flex: 0 0 auto;
    background: var(--border-default);
    margin: 2px 0;
}
.app-sidebar-btn {
    width: 46px;
    min-height: 46px;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 5px 2px;
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.app-sidebar-btn:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-primary);
}
.app-sidebar-btn i { font-size: 15px; }
.app-sidebar-label {
    font-size: 7px;
    font-weight: 700;
    line-height: 1.1;
    max-width: 44px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.app-sidebar-btn.side-rr.active  { background: var(--brand-rr-tint); color: var(--brand-rr); }
.app-sidebar-btn.side-mit.active { background: var(--brand-mit-tint); color: var(--brand-mit); }
.app-sidebar-btn.side-cal.active { background: var(--brand-cal-tint); color: var(--brand-cal); }
/* Personal Area entry: same accent as its own left nav (brand-rr). */
.app-sidebar-btn.side-personal.active { background: var(--brand-rr-tint); color: var(--brand-rr); }
/* Admin Panel entry: amber (elevated/admin), distinct from the app brand colors, reusing the
   existing warning token rather than inventing a new admin brand. */
.app-sidebar-btn.side-admin.active { background: var(--warning-tint); color: var(--warning-text); }
/* Watchlist entry: its own brand color (matches the tab strip + hub badge), now that it's a
   real workspace type instead of the fixed-sidebar utility view it started as. */
.app-sidebar-btn.side-watchlist.active { background: var(--brand-watchlist-tint); color: var(--brand-watchlist); }
body.dark-mode .app-sidebar {
    background: var(--surface-card);
    border-right-color: var(--border-subtle);
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.4);
}
body.dark-mode .app-sidebar-btn           { color: var(--text-muted); }
body.dark-mode .app-sidebar-btn:hover     { background: var(--border-subtle); color: var(--text-secondary); }
body.dark-mode .app-sidebar-btn.side-rr.active  { background: var(--brand-rr-tint); color: var(--brand-rr); }
body.dark-mode .app-sidebar-btn.side-mit.active { background: var(--brand-mit-tint); color: var(--brand-mit); }
body.dark-mode .app-sidebar-btn.side-cal.active { background: var(--brand-cal-tint); color: var(--brand-cal); }
body.dark-mode .app-sidebar-btn.side-personal.active { background: var(--brand-rr-tint); color: var(--brand-rr); }
body.dark-mode .app-sidebar-btn.side-watchlist.active { background: var(--brand-watchlist-tint); color: var(--brand-watchlist); }
body.dark-mode .app-sidebar-sep { background: var(--border-subtle); }

/* ── Header ──────────────────────────────────────────────────────────────────── */
/* max-width/margin here (not just on .container) so the header bar is the same
   width everywhere it appears — Hub and Personal Area render it outside/instead
   of .container, so without its own cap it stretched to the full viewport. */
header {
    max-width: 1600px;
    margin: 0 auto;
    background: white;
    padding: 24px 28px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 100;
}

.header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.header-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-controls {
    display: flex;
    align-items: center;
    gap: 4px;
}

.controls-divider {
    width: 1px;
    height: 24px;
    background: var(--border-default);
    margin: 0 12px;
}

.btn-system {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: 8px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    transition: all 0.2s;
}

.btn-system:hover {
    background: rgba(0, 0, 0, 0.04);
    color: var(--text-primary);
}

.btn-system i {
    font-size: 14px;
}

/* ── Time / Status Bar ───────────────────────────────────────────────────────── */
.time-info {
    display: flex;
    align-items: center;
    background: white;
    padding: 4px 12px;
    border-radius: 12px;
    gap: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    border: none;
    height: 48px;
    transform: translateY(12px);
}

.header-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.controls-divider {
    width: 1px;
    height: 16px;
    background: rgba(0, 0, 0, 0.15);
    margin: 0 16px;
    flex-shrink: 0;
}

.time-badge {
    display: flex;
    align-items: center;
    padding: 6px 0;
    font-weight: 600;
    white-space: nowrap;
}

.timezone-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.tz-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    min-width: 48px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── View Tabs ───────────────────────────────────────────────────────────────── */
.view-tabs {
    display: inline-flex;
    gap: 0;
    margin-bottom: 24px;
    background: var(--surface-raised);
    padding: 0;
    border-radius: 0 0 12px 12px;
    border: 1px solid var(--border-default);
    border-top: none;
    margin-left: 20px;
    margin-top: 0; /* Remove overlap, align perfectly */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
    overflow: hidden;
    position: relative;
    z-index: 5;
}

.view-tab-btn {
    padding: 10px 24px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    border-radius: 0;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border-right: 1px solid var(--border-default);
}

.view-tab-btn:last-child {
    border-right: none;
}

.view-tab-btn:hover:not(.active) {
    background: var(--surface-raised);
    color: var(--text-primary);
}

.view-tab-btn.active {
    background: white;
    color: var(--brand-rr);
    position: relative;
}

.view-tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--brand-rr);
}

.view-panel.hidden {
    display: none;
}

/* ── Main Content Grid ───────────────────────────────────────────────────────── */
.main-content {
    display: grid;
    grid-template-columns: minmax(320px, 0.75fr) minmax(0, 1.25fr);
    gap: 20px;
    margin-bottom: 20px;
    width: 100%;
}

.assign-ticket-card {
    max-width: 560px;
}

/* ── Logs Layout ─────────────────────────────────────────────────────────────── */
.logs-content {
    display: grid;
    grid-template-columns: 1fr 450px;
    gap: 20px;
    align-items: start;
}

/* ── Responsive ──────────────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
    .main-content {
        grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.15fr);
    }

    .assign-ticket-card {
        max-width: 520px;
    }
}

@media (max-width: 900px) {
    .logs-content {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .main-content {
        grid-template-columns: 1fr;
    }

    .assign-ticket-card {
        max-width: none;
    }
}

/* ── Card ────────────────────────────────────────────────────────────────────── */
.card {
    background: white;
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
}

.card h2 {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 20px;
    letter-spacing: 0.01em;
}

/* ── Auth Section ────────────────────────────────────────────────────────────── */
.auth-section {
    display: flex;
    align-items: center;
    gap: 15px;
}

.auth-status {
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
}

.auth-status.logged-out {
    background: var(--danger-tint);
    color: var(--danger);
}

.auth-status.logged-in {
    background: var(--success-tint);
    color: var(--success);
}

/* ── User Info ───────────────────────────────────────────────────────────────── */
.user-info {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    border: none;
}

.user-info span {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 14px;
}

/* ── Sync status ─────────────────────────────────────────────────────────────── */
.sync-status {
    font-size: 12px;
    margin-top: 10px;
    padding: 8px;
    border-radius: 4px;
    background: var(--brand-rr-tint);
    color: var(--brand-rr-hover);
}
/* =============================================================================
   components.css — Reusable UI components: buttons, forms, team board,
   tables, login, status, about, logs, IPC logo.
   ============================================================================= */

/* ── IPC Logo ────────────────────────────────────────────────────────────────── */
.ipc-logo {
    width: 38px;
    height: 38px;
    background: linear-gradient(135deg, var(--ipc-logo-start) 0%, var(--brand-cal) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 13px;
    font-weight: 800;
    font-family: inherit;
    margin-right: 14px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
    user-select: none;
}

.ipc-logo-large {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--ipc-logo-start) 0%, var(--brand-cal) 100%);
    color: white;
    font-size: 28px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin: 0 auto 24px;
}

/* ── Toast (single notification system — see toast.js) ─────────────────────────
   Floating transient pill used by every app. Status tokens flip in dark mode on
   their own, so no dark override is needed. */
.app-toast {
    position: fixed;
    top: 70px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9998;
    padding: 8px 20px;
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: #fff;
    box-shadow: var(--shadow-elevated);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-slow);
}
.app-toast--visible { opacity: 1; }
.app-toast--success { background: var(--success); }
.app-toast--error   { background: var(--danger); }
.app-toast--warning { background: var(--warning); }
.app-toast--info    { background: var(--brand-rr); }

/* ── Buttons ─────────────────────────────────────────────────────────────────── */
button {
    padding: 10px 16px;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s;
}

.btn-primary { background: var(--info); color: white; }
.btn-primary:hover { background: var(--brand-rr-hover); transform: translateY(-2px); }
.btn-primary:disabled { background: var(--border-strong); cursor: not-allowed; }

.btn-danger { background: var(--danger); color: white; }
.btn-danger:hover { background: var(--brand-mit-hover); }

.btn-secondary { background: var(--text-secondary); color: white; }
.btn-secondary:hover { background: var(--neutral-700); }

/* Small-size + ghost variants (tokenized, for toolbars/inline actions) */
.btn--sm { padding: 4px 10px; font-size: var(--text-xs); border-radius: var(--radius-sm); }
/* Bordered-but-light — for pagination-style controls (Prev/Next) that shouldn't
   compete visually with a solid-fill .btn-secondary block. */
.btn--ghost {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-default);
    font-weight: var(--weight-medium);
}
.btn--ghost:hover { background: var(--surface-raised); color: var(--text-primary); border-color: var(--border-strong); }

/* ── Button Group ────────────────────────────────────────────────────────────── */
/* Secondary actions row: auto-fit reflows cleanly whether Reset data is hidden
   (agents without recovery rights) or shown — 2 or 3 buttons, no gap left over. */
.assign-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}
.assign-actions button { font-size: 12px; padding: 8px 10px; }

/* ── Forms ───────────────────────────────────────────────────────────────────── */
.form-group { margin-bottom: 15px; }

label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
    color: var(--text-primary);
    font-size: 14px;
}

/* Base styled-input geometry. Applied to `.table-input` too (not just input[type="text"]) so the
   class produces the same padded, rounded box on ANY input type — the time/number/email/date fields
   in the RR/MIT/CAL settings and the email composers all carry `.table-input` but never matched
   `input[type="text"]`, so they fell back to the browser's squashed default. The dense inline-edit
   tables intentionally override this via higher-specificity `.tickets-table .table-input` below. */
input[type="text"],
.table-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.3s;
}

input[type="text"]:focus,
.table-input:focus {
    outline: none;
    border-color: var(--brand-rr);
    box-shadow: 0 0 0 3px rgba(52, 128, 201, 0.1);
}

input[type="text"]:disabled,
.table-input:disabled { background: var(--surface-raised); cursor: not-allowed; }

/* ── Next Person Card ────────────────────────────────────────────────────────── */
/* Single calm surface (was a saturated blue block) — one border-left accent, no
   double tint. Border-left color is set inline (ui.js) to the person's own color —
   same accent language as the team card's color bar, fully rounded (not squared on
   the left) so it reads as one soft accent, not a flag/tab shape. */
.next-person {
    background: var(--surface-raised);
    border-left: 3px solid var(--border-strong);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 16px;
}

.next-person-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    margin-bottom: 6px;
}

.next-person-head { display: flex; align-items: center; gap: 8px; }

.next-person-name {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}
.next-person.is-empty .next-person-name { color: var(--text-muted); }

/* One title size for every header bar: RR/MIT/CAL (.app-header-title from the
   shared template), the Hub and the Personal Area (h1 inside .hub-header). */
.app-header-title, .hub-header h1 {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.next-person-role {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 4px;
    font-weight: 500;
}

/* One quiet line instead of a boxed callout — the rule rarely needs to shout. */
.rules-info {
    font-size: 11px;
    line-height: 1.5;
    color: var(--text-muted);
    margin: 10px 0 14px;
}

.reminder-box {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0;
    padding: 10px 14px;
    background: linear-gradient(90deg, #fff8e1, var(--warning-tint));
    border-left: 4px solid var(--warning);
    border-radius: 6px;
    font-size: 13px;
    color: var(--warning-text);
}

/* ── Team Board ──────────────────────────────────────────────────────────────── */
.team-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    width: 100%;
}

.team-columns > * { min-width: 0; }

/* Lightest of the three surface stops — the flattest, least "colored" option — so
   only the two card states (below) carry any real tint. */
.team-column {
    border: 1px solid var(--border-default);
    border-top: 3px solid var(--brand-rr);
    border-radius: 12px;
    padding: 16px;
    background: var(--surface-page);
    min-height: 400px;
}

.team-column h3 {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-secondary);
    margin: 0 0 20px;
    letter-spacing: 0.01em;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-subtle);
}

.team-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 6px;
}

/* ── Team Member Card ────────────────────────────────────────────────────────── */
/* Neutral surface + a thin left color bar (per-user people.color, set inline in
   ui.js, like CAL's border-top). No status is encoded in the card background any
   more — the .rr-status pill carries it, keeping the board calm. */
.team-member-item {
    background: var(--surface-card);
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--border-subtle);
    cursor: move;
    transition: box-shadow 0.2s, transform 0.2s, background 0.2s;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    position: relative;
    box-shadow: var(--shadow-sm);
}

.team-member-item:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.team-member-item.dragging { opacity: 0.5; background: var(--surface-raised); }

.team-member-item.drop-before { box-shadow: 0 -3px 0 0 var(--brand-rr); }
.team-member-item.drop-after  { box-shadow: 0  3px 0 0 var(--brand-rr); }

/* Effectively off (any rule): recede, don't shout. --surface-raised sits between
   the column's --surface-page and an ON card's --surface-card, so it never collides
   with either — visibly muted against the column, distinct from an available card. */
.team-member-item.is-off { background: var(--surface-raised); }
.team-member-item.is-off .member-name { color: var(--text-muted); }

/* NC seat position marker (which seat is the NC one) — quiet, independent of state. */
/* Caption, not a badge — only shown when the seat isn't actively NC-blocked (the
   status pill covers that case), so this is background info, not a status. */
.rr-nc-seat {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text-muted);
    text-transform: uppercase;
    flex-shrink: 0;
}

/* ── Pill (shared badge/status/chip shape) ──────────────────────────────────────
   One small rounded-label shape used everywhere a status, category or workspace
   type needs a colored tag: RR status (dot + reason), MIT category/severity/status
   chips, Hub workspace-type badges, Personal role badges. Only background+color
   vary per use — see the per-class rules below and in hub-styles.css/personal.css. */
.pill,
.rr-status,
.hub-card-badge,
.pa-badge,
.mit-cat-chip,
.mit-sev-pill,
.mit-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
/* Chip icon wants a touch more breathing room than a plain text pill. */
.mit-cat-chip { gap: 6px; }
/* Generic status-color modifiers for bare .pill usage (e.g. CAL's month badge,
   set via className in JS rather than a dedicated component-specific class). */
.pill--warning { background: var(--warning-tint); color: var(--warning-text); }
.pill--success { background: var(--success-tint); color: var(--success); }

.rr-status-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.rr-status--on    { background: var(--success-tint); color: var(--success); }
.rr-status--nc    { background: var(--warning-tint); color: var(--warning); }
.rr-status--cal   { background: var(--brand-rr-tint); color: var(--brand-rr-hover); }
.rr-status--break { background: var(--surface-raised); color: var(--text-secondary); }
.rr-status--off,
.rr-status--norr  { background: var(--surface-raised); color: var(--text-muted); }

/* Shift-inactive note in the column header. */
.team-shift-note { font-size: 11px; font-weight: 500; color: var(--text-muted); text-transform: none; letter-spacing: 0; }

/* ── Member Info ─────────────────────────────────────────────────────────────── */
.member-drag-handle { cursor: grab; color: var(--text-muted); font-size: 18px; user-select: none; }
.member-drag-handle:active { cursor: grabbing; }

/* min-content, not 0: refuses to shrink the name into an unreadable ellipsis —
   when a wide status pill (e.g. OFF · NC) doesn't leave room, the row wraps
   instead (flex-wrap on .team-member-item) and controls drop to their own line. */
.member-info { flex: 1; min-width: min-content; }

.member-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 14px;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.member-name-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-height: 18px;
    margin-bottom: 2px;
    min-width: 0;
}
/* NC SEAT is the widest of this row's optional captions — on narrow cards it was
   squeezing .member-name's flex:1/min-width:0 down to an unreadable ellipsis
   ("Alvaro" -> "Alv..."). Scoped to just the NC-seat case (:has) so a plain name
   row is untouched: the name refuses to shrink below its own text, so the row
   wraps and NC SEAT drops to its own line instead of eating the name's space. */
.member-name-row:has(.rr-nc-seat) .member-name { min-width: min-content; flex: 0 1 auto; }

.member-tickets { font-size: 11px; color: var(--text-muted); margin-top: 3px; font-weight: 600; }

.member-controls { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }

/* ── Toggle Switch ───────────────────────────────────────────────────────────── */

.break-switch {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
    align-items: center;
    width: 34px;
    height: 20px;
    cursor: pointer;
    margin: 0;
    line-height: 1;
}

.break-switch-input { opacity: 0; width: 0; height: 0; position: absolute; }

.break-switch-slider {
    position: absolute;
    inset: 0;
    background: var(--border-strong);
    border-radius: 999px;
    transition: background 0.2s ease;
}

.break-switch-slider::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    left: 2px;
    top: 2px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    transition: transform 0.2s ease;
}

.break-switch-input:checked + .break-switch-slider { background: var(--success); }
.break-switch-input:checked + .break-switch-slider::before { transform: translateX(14px); }
/* A rule (NC/CAL/off-shift/no-RR) already forces the state — the switch goes inert
   rather than pretending the manual toggle still decides anything. */
.break-switch-input:disabled + .break-switch-slider { background: var(--border-subtle); cursor: not-allowed; }
.break-switch-input:disabled ~ .break-switch-slider::before { box-shadow: none; }
.break-switch:has(.break-switch-input:disabled) { cursor: not-allowed; }

/* Timezone toggle variant */
.timezone-badge .break-switch-slider { background: var(--border-strong); }
.timezone-badge .break-switch-input:checked + .break-switch-slider { background: var(--neutral-500); }

.checkbox-label { font-size: 10px; color: var(--text-muted); white-space: nowrap; cursor: pointer; }

/* ── Empty State ─────────────────────────────────────────────────────────────── */
.empty-state { text-align: center; padding: 40px 20px; color: var(--text-muted); }
.empty-state-icon { font-size: 48px; margin-bottom: 10px; }

/* ── Delete Ticket Button ────────────────────────────────────────────────────── */
.btn-delete-ticket {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--border-strong);
    font-size: 13px;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.btn-delete-ticket:hover {
    background: var(--danger-tint);
    color: var(--danger);
}

body.dark-mode .btn-delete-ticket { color: var(--border-strong); }
body.dark-mode .btn-delete-ticket:hover {
    background: var(--danger-tint);
    color: var(--danger);
}

/* ── Tickets Table ───────────────────────────────────────────────────────────── */
.tickets-table-wrapper {
    max-height: calc(100vh - 360px);
    overflow: auto;
    border: 1px solid var(--border-default);
    border-radius: 8px;
}

.logs-table-wrapper {
    max-height: calc(100vh - 280px);
    overflow: auto;
    border: 1px solid var(--border-default);
    border-radius: 8px;
}

.table-filters {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin-bottom: 10px;
    align-items: center;
    overflow-x: auto;
    padding-bottom: 2px;
}

.table-filters > * { flex: 0 0 auto; }
.table-filters #filter-shift { width: 140px; }
.table-filters #filter-name,
.table-filters #filter-customer,
.table-filters #filter-ucn { width: 190px; }

.tickets-table { width: 100%; border-collapse: collapse; min-width: 940px; background: var(--surface-card); }

.tickets-table th,
.tickets-table td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 12px;
    text-align: left;
    color: var(--text-primary);
    white-space: nowrap;
}

/* .tickets-table td (0,2,0) otherwise beats the shared .empty-state (0,1,0) and
   silently forces left-align — same specificity-loss pattern as the table-input
   fix above. */
.tickets-table td.empty-state { text-align: center; white-space: normal; }

.tickets-table th {
    position: sticky;
    top: 0;
    background: var(--surface-raised);
    font-weight: 700;
    z-index: 1;
}

/* Same subdued inline-edit look as the Personal Area's .pa-inp: a faint tint instead of a
   bordered box, border only appears on hover, and focus swaps to a solid card surface — no
   heavy focus ring.
   Scoped as `.tickets-table .table-input` (not bare `.table-input`) on purpose: the UCN/Customer
   fields are `input[type="text"]`, and that generic selector above (0,1,1) otherwise beats a
   bare `.table-input` class (0,1,0) — this is why padding/font-size looked unchanged before. */
.tickets-table .table-input,
.tickets-table .table-select {
    width: 100%;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    padding: 4px 6px;
    font-size: 12px;
    color: var(--text-primary);
    background: rgba(52,128,201,0.05);
    transition: border-color 0.15s, background 0.15s;
}

.tickets-table .table-input:hover,
.tickets-table .table-select:hover { border-color: var(--border-default); }

.tickets-table .table-input:focus,
.tickets-table .table-select:focus {
    outline: none;
    border-color: var(--info);
    background: var(--surface-card);
}

.cell-saved {
    border-color: var(--success) !important;
    background: rgba(77,124,63,0.08) !important;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.notes-cell { min-width: 210px; }
.notes-custom-input { margin-top: 6px; }

.table-filters .table-input,
.table-filters .table-select { height: 34px; border-radius: 8px; }

/* Byte-identical inline styling used to be repeated on both the Action Logs and
   Data Recovery tables — only each <th>'s width genuinely varies per column,
   so that's the only thing still set inline in index.html. */
.logs-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 12px; }
.logs-table thead tr { background: var(--surface-raised); border-bottom: 2px solid var(--border-strong); }
.logs-table th { padding: 8px; text-align: left; }
.logs-table td, .logs-table th { word-break: break-word; overflow-wrap: break-word; }

/* ── Login Screen ────────────────────────────────────────────────────────────── */
.login-screen {
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, var(--neutral-800) 0%, var(--neutral-700) 100%);
    padding: 20px;
    overflow-y: auto;
}

.login-card {
    background: white;
    border-radius: 16px;
    padding: 48px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    max-width: 400px;
    width: 100%;
}

.login-card h1 { color: var(--text-primary); font-size: 28px; margin-bottom: 8px; }
.login-subtitle { color: var(--text-secondary); margin-bottom: 32px; }

.btn-microsoft {
    background: linear-gradient(135deg, var(--ipc-logo-start) 0%, var(--brand-cal) 100%);
    color: white;
    font-size: 16px;
    font-weight: 600;
    padding: 14px 24px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    transition: all 0.2s;
}

.btn-microsoft:hover {
    background: linear-gradient(135deg, var(--ipc-logo-start-hover) 0%, var(--brand-cal-hover) 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(192,0,123,0.4);
}

.microsoft-icon { font-size: 20px; }
.login-error { color: var(--danger); margin-top: 16px; font-size: 14px; }

/* ── Phrases Tab ─────────────────────────────────────────────────────────────── */
.phrases-card { max-width: 800px; margin: 0 auto; }
.phrases-header { border-bottom: 2px solid var(--brand-rr); padding-bottom: 14px; margin-bottom: 20px; }
.phrases-header h2 { margin: 0 0 8px; color: var(--text-primary); }
.phrases-count { background: var(--brand-rr); color: #fff; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 12px; vertical-align: middle; }
.phrases-subtitle { margin: 0 0 10px; font-size: 13px; color: var(--text-muted); line-height: 1.5; }
.phrases-disclaimer { margin: 0; font-size: 12px; color: var(--warning-text); background: var(--warning-tint); border: 1px solid var(--warning); border-radius: 6px; padding: 7px 10px; display: flex; align-items: flex-start; gap: 7px; }
.phrases-disclaimer i { margin-top: 1px; flex-shrink: 0; }
.phrases-list-section { margin-top: 24px; }
.phrases-list-title { margin: 0 0 14px; font-size: 14px; font-weight: 600; color: var(--text-secondary); display: flex; align-items: center; gap: 8px; }
.phrases-add-row { display: flex; gap: 10px; margin-bottom: 20px; }
.phrases-input { flex: 1; }
.phrases-list { display: flex; flex-direction: column; gap: 2px; }
.phrase-row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: 8px;
    transition: background 0.15s;
}
.phrase-row:hover { background: var(--surface-raised); }
.phrase-text { flex: 1; font-size: 14px; color: var(--text-secondary); line-height: 1.4; }
.phrase-meta { font-size: 11px; color: var(--text-disabled); white-space: nowrap; flex-shrink: 0; }
.phrase-delete-btn {
    background: none; border: none; cursor: pointer;
    color: var(--border-strong); font-size: 13px; padding: 3px 6px;
    border-radius: 4px; opacity: 0; transition: opacity 0.15s, color 0.15s, background 0.15s;
    flex-shrink: 0;
}
.phrase-row:hover .phrase-delete-btn { opacity: 1; }
.phrase-delete-btn:hover { color: var(--danger); background: var(--danger-tint); }
.phrases-empty { color: var(--text-disabled); font-size: 14px; text-align: center; padding: 40px 0; }

/* ── User Menu Dropdown ──────────────────────────────────────────────────────── */
.user-menu-container {
    position: relative;
    display: inline-block;
}

.user-menu-trigger {
    background: transparent;
    border: none;
    padding: 6px 8px;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    transition: all 0.2s;
}

.user-menu-trigger:hover {
    background: var(--surface-raised);
    color: var(--text-primary);
}

.user-menu-trigger i:first-child {
    font-size: 18px;
    color: var(--text-muted);
}

.user-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 240px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--border-default);
    display: none;
    flex-direction: column;
    z-index: 1000;
    padding: 8px 0;
    animation: dropdownFade 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes dropdownFade {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.user-dropdown.active {
    display: flex;
}

.dropdown-divider {
    height: 1px;
    background: var(--surface-raised);
    margin: 8px 0;
}

.dropdown-btn {
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    padding: 10px 16px;
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 0;
}

.dropdown-btn:hover {
    background: var(--surface-raised);
    color: var(--text-primary);
}

.logout-btn {
    color: var(--danger);
}

.logout-btn:hover {
    background: var(--danger-tint);
    color: var(--brand-mit-hover);
}

.logout-btn i {
    font-size: 14px;
}

/* ── Checkpoint rows ─────────────────────────────────────────────────────────── */
.checkpoint-row td { padding: 6px 8px; border-bottom: 1px solid var(--border-subtle); color: var(--text-secondary); }
.checkpoint-row { background: var(--surface-raised); }
.checkpoint-row-alt { background: var(--surface-card); }

.btn-xs { padding: 4px 10px !important; font-size: 11px !important; white-space: nowrap; }

/* ── MIT (event tracker) — typed event cards ─────────────────────────────────── */

.mit-card {
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.mit-card-resolved { opacity: 0.6; }
.mit-sep { color: var(--text-disabled); }

/* Top row: category chip · severity pill · status pill */
.mit-card-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }

.mit-cat-chip i { font-size: 12px; }

/* Uppercase text is the only thing that distinguishes a severity pill visually
   (shape/size come from the shared .pill rule above). */
.mit-sev-pill { text-transform: uppercase; }
.sev-p1 { background: var(--danger-tint);   color: var(--danger); }
.sev-p2 { background: var(--warning-tint);  color: var(--warning-text); }
.sev-p3 { background: var(--brand-rr-tint);  color: var(--brand-rr-hover); }

.mit-status-pill {
    margin-left: auto;
    /* Left side carries the status dot — needs a touch more room than the shared pill padding. */
    padding-left: 10px;
}
.mit-status-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.mit-status-pill.active     { background: var(--danger-tint);  color: var(--danger); }
.mit-status-pill.active     .mit-status-dot { background: var(--danger); }
.mit-status-pill.monitoring { background: var(--warning-tint); color: var(--warning); }
.mit-status-pill.monitoring .mit-status-dot { background: var(--warning); }
.mit-status-pill.resolved   { background: var(--success-tint); color: var(--success); }
.mit-status-pill.resolved   .mit-status-dot { background: var(--success); }
.mit-status-pill .mit-status-select {
    background: transparent; border: none; color: inherit;
    font-size: 12px; font-weight: 600; cursor: pointer;
    padding: 0 2px; appearance: none; -webkit-appearance: none;
}
.mit-status-pill .mit-status-select:focus { outline: none; }

/* Title + meta */
.mit-card-title-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.mit-card-title { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.mit-card-meta  { font-size: 13px; color: var(--text-secondary); }

/* Footer: timer · started · actions */
.mit-card-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; font-size: 12px; color: var(--text-muted); }
.mit-foot-timer { font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
.mit-foot-timer i { font-size: 12px; }
.mit-foot-timer.active     { color: var(--danger); }
.mit-foot-timer.monitoring { color: var(--warning); }
.mit-foot-timer.resolved   { color: var(--success); }
.mit-foot-timer .mit-timer { font-variant-numeric: tabular-nums; }
.mit-foot-time { color: var(--text-muted); }
.mit-foot-actions { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.mit-foot-actions .mit-notes-toggle { margin-left: 0; }

/* Category color swatches (shared by card chips and filter chips) */
.mit-cat--red    { background: var(--danger-tint);   color: var(--danger); }
.mit-cat--amber  { background: var(--warning-tint);  color: var(--warning-text); }
.mit-cat--blue   { background: var(--brand-rr-tint);  color: var(--brand-rr-hover); }
.mit-cat--green  { background: var(--success-tint);  color: var(--success); }
.mit-cat--purple { background: var(--brand-cal-tint); color: var(--brand-cal-hover); }
.mit-cat--teal   { background: rgba(29,158,117,0.14); color: #0f6e56; }
.mit-cat--gray   { background: var(--border-subtle);  color: var(--text-secondary); }

/* Category filter chips */
.mit-filter-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 0 16px 12px; }
.mit-filter-chip {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 600;
    padding: 4px 12px; border-radius: 999px;
    background: var(--surface-card); border: 1px solid var(--border-default);
    color: var(--text-secondary); cursor: pointer;
}
.mit-filter-chip i { font-size: 12px; }
.mit-filter-chip:hover { border-color: var(--border-strong); }
.mit-filter-chip.active { box-shadow: inset 0 0 0 1.5px currentColor; }
.mit-filter-count { font-size: 11px; opacity: 0.65; }

.mit-assignee { font-size: 12px; color: var(--text-muted); }
.mit-delete-btn { background: none; border: none; cursor: pointer; color: var(--text-disabled); font-size: 14px; padding: 2px 6px; border-radius: 4px; }
.mit-delete-btn:hover { color: var(--danger); background: var(--danger-tint); }
.mit-empty { color: var(--text-muted); font-size: 14px; text-align: center; padding: 40px 0; } /* matches .empty-state/.pa-empty's muted level */

/* ── List toolbar ────────────────────────────────────────────────────────────── */
.mit-list-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px 12px;
    gap: 12px;
}
.mit-sort-controls { display: flex; align-items: center; gap: 6px; }
.mit-sort-label { font-size: 12px; color: var(--text-disabled); margin-right: 2px; }
.mit-sort-btn {
    background: none;
    border: 1px solid var(--border-default);
    border-radius: 5px;
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
    color: var(--text-muted);
}
.mit-sort-btn:hover { border-color: var(--text-disabled); color: var(--text-secondary); }
.mit-sort-btn.active { background: var(--brand-rr); border-color: var(--brand-rr); color: #fff; }
.mit-log-btn { padding: 6px 14px; font-size: 13px; }

/* ── Edit button ─────────────────────────────────────────────────────────────── */
.mit-card-edit-btn {
    background: none; border: none; cursor: pointer;
    color: var(--text-disabled); font-size: 12px; padding: 2px 6px;
    border-radius: 4px; transition: color 0.15s, background 0.15s;
}
.mit-card-edit-btn:hover { color: var(--brand-rr); background: var(--brand-rr-tint); }

.mit-notes-toggle {
    margin-left: auto;
    background: none;
    border: 1px solid var(--border-default);
    border-radius: 5px;
    padding: 3px 10px;
    font-size: 12px;
    cursor: pointer;
    color: var(--text-muted);
}
.mit-notes-toggle:hover,
.mit-notes-toggle.active { border-color: var(--brand-rr); color: var(--brand-rr); background: var(--brand-rr-tint); }

.mit-notes-panel {
    border-top: 1px solid var(--surface-raised);
    margin-top: 10px;
    padding-top: 10px;
}
.mit-notes-list { margin-bottom: 8px; max-height: 160px; overflow-y: auto; }
.mit-note-item { display: flex; gap: 8px; align-items: baseline; padding: 4px 0; border-bottom: 1px solid var(--surface-raised); }
.mit-note-time { font-size: 11px; color: var(--text-disabled); white-space: nowrap; flex-shrink: 0; }
.mit-note-text { font-size: 13px; color: var(--text-secondary); }
.mit-no-notes { font-size: 12px; color: var(--text-disabled); margin: 0; padding: 4px 0; }
.mit-notes-add { display: flex; gap: 6px; align-items: center; }
.mit-notes-add .mit-note-input { flex: 1; font-size: 12px; padding: 4px 8px; }

/* =============================================================================
   Team Calendar (cal-app)
   ============================================================================= */

/* ── Schedule load/error state (backend-authoritative — no local fallback) ─────── */
.cal-schedule-state {
    padding: 40px 20px;
    text-align: center;
    color: var(--text-disabled);
    font-size: 13px;
}
.cal-schedule-state .btn-secondary { margin-left: 8px; }

/* ── Table layout ────────────────────────────────────────────────────────────── */
.cal-table { border-collapse: collapse; width: 100%; font-size: 12px; }
.cal-table thead { position: sticky; top: 0; z-index: 3; }
.cal-th {
    background: var(--surface-raised);
    border: 1px solid var(--border-default);
    padding: 6px 8px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
    white-space: nowrap;
    text-align: center;
}
.cal-th-member { min-width: 90px; cursor: pointer; }
.cal-th-member:hover { background: var(--brand-rr-tint); }
.cal-th-flag   { width: 36px; }
.cal-th-type   { width: 70px; }
.cal-table tbody tr:hover { background: var(--brand-rr-tint); }
/* Extend row hover to the sticky day/date cols — their opaque background otherwise
   masks the row tint. Tint layered over the sticky white base (kept opaque so
   scrolled content can't bleed through). Dark equivalent lives in themes.css. */
.cal-table tbody tr:hover .cal-td-day,
.cal-table tbody tr:hover .cal-td-date {
    background: linear-gradient(var(--brand-rr-tint), var(--brand-rr-tint)), var(--surface-card);
}

/* Today's row — same treatment as :hover above, but permanent, so today is
   identifiable at a glance without pointing at it. Dark equivalent in themes.css. */
.cal-row-today { background: var(--brand-rr-tint); }
.cal-row-today .cal-td-day,
.cal-row-today .cal-td-date {
    background: linear-gradient(var(--brand-rr-tint), var(--brand-rr-tint)), var(--surface-card);
}

/* ── CSS tooltip (data-tooltip attribute) ───────────────────────────────────── */
[data-tooltip] { position: relative; }
[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 5px);
    left: 50%;
    transform: translateX(-50%);
    /* Always-dark chip regardless of page theme (the neutral ramp doesn't flip in
       dark mode — unlike --text-primary, which becomes light-on-dark and would
       make this background near-white, leaving the white text unreadable). */
    background: var(--neutral-800);
    color: #fff;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    white-space: nowrap;
    z-index: 9999;
    pointer-events: none;
}

.cal-col-fixed {
    position: sticky;
    left: 0;
    background: var(--surface-card);
    z-index: 2;
}
thead .cal-col-fixed { z-index: 4; background: var(--surface-raised); }

/* ── Day / date cells ────────────────────────────────────────────────────────── */
.cal-td-day  { min-width: 80px; padding: 4px 8px; border: 1px solid var(--border-default); color: var(--text-muted); font-size: 11px; white-space: nowrap; }
.cal-td-date { min-width: 80px; padding: 4px 8px; border: 1px solid var(--border-default); color: var(--text-secondary); font-weight: 600; font-size: 11px; white-space: nowrap; }
.cal-td-flag { width: 36px; text-align: center; padding: 2px; border: 1px solid var(--border-default); font-size: 13px; }
.cal-td-type { width: 70px; text-align: center; padding: 4px; border: 1px solid var(--border-default); font-size: 10px; color: var(--text-disabled); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }

/* ── Data cells ──────────────────────────────────────────────────────────────── */
.cal-cell {
    min-width: 90px;
    padding: 4px 6px;
    border: 1px solid var(--border-default);
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: default;
    transition: background 0.1s;
    white-space: nowrap;
}
.cal-cell[onclick] { cursor: pointer; }
.cal-cell[onclick]:hover { background: var(--brand-rr-tint); }

.cal-cell.cover        { background: var(--brand-cal-tint); color: var(--brand-cal-hover); }
.cal-cell.off          { color: var(--text-disabled); font-size: 10px; }
/* Was --border-strong (a border-only token) used as text color — poor contrast. */
.cal-cell.weekend      { background: var(--surface-raised); color: var(--text-muted); }
.cal-cell.empty        { background: var(--surface-raised); }

/* ── Weekend rows ────────────────────────────────────────────────────────────── */
.cal-row-weekend .cal-td-day,
.cal-row-weekend .cal-td-date { background: var(--surface-raised); color: var(--text-disabled); }

/* ── Holiday flag cells ──────────────────────────────────────────────────────── */
.cal-holiday-uk { background: var(--danger-tint); }
.cal-holiday-us { background: var(--brand-rr-tint); }
.cal-holiday-sp { background: var(--warning-tint); }

/* ── Summary bar ─────────────────────────────────────────────────────────────── */
.cal-summary-item { font-size: 12px; padding: 3px 10px; background: var(--surface-raised); border-radius: 20px; }

/* ── Edit popover ────────────────────────────────────────────────────────────── */
.cal-popover {
    position: absolute;
    z-index: 9999;
    background: var(--surface-card);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    border: 1px solid var(--border-default);
    min-width: 260px;
}
.cal-popover-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-default);
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
}
.cal-popover-close { background: none; border: none; font-size: 18px; cursor: pointer; color: var(--text-disabled); }
.cal-popover-body  { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.cal-popover-actions { display: flex; gap: 8px; margin-top: 4px; }

/* ── Right-click context menu ────────────────────────────────────────────────── */
.cal-ctx-menu {
    position: absolute;
    z-index: 10000;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    min-width: 220px;
    max-width: 280px;
    overflow: hidden;
}
.cal-ctx-header {
    padding: 7px 12px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--surface-raised);
    border-bottom: 1px solid var(--border-default);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cal-ctx-body { padding: 4px; }
.cal-ctx-info {
    padding: 5px 8px;
    font-size: 12px;
    color: var(--text-muted);
}
.cal-ctx-divider { height: 1px; background: var(--border-default); margin: 3px 0; }
.cal-ctx-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 7px 10px;
    font-size: 13px;
    color: var(--text-primary);
    background: transparent;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.1s;
    box-sizing: border-box;
}
.cal-ctx-item:hover { background: var(--surface-raised); }
.cal-ctx-item.cal-ctx-primary { color: var(--brand-rr-hover); font-weight: 500; }
.cal-ctx-item.cal-ctx-danger  { color: var(--brand-mit); }
.dark-mode .cal-ctx-menu    { background: var(--surface-card); border-color: var(--border-default); }
.dark-mode .cal-ctx-header  { background: var(--surface-raised); border-color: var(--border-default); color: var(--text-muted); }
.dark-mode .cal-ctx-item    { color: var(--text-primary); }
.dark-mode .cal-ctx-item:hover { background: var(--surface-raised); }
.dark-mode .cal-ctx-divider { background: var(--border-default); }

/* ── Settings form helpers ───────────────────────────────────────────────────── */
.cfg-section { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--border-subtle); }
.cfg-section:last-child { border-bottom: none; margin-bottom: 0; }
.cfg-section-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--brand-rr);
    margin: 0 0 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.cfg-row {
    display: grid;
    gap: 8px;
    align-items: center;
    margin-bottom: 6px;
    padding: 6px 8px;
}
.cfg-row.cfg-header { font-size: 11px; font-weight: 700; color: var(--text-disabled); text-transform: uppercase; letter-spacing: 0.04em; background: none; padding: 0 8px 2px; }
.cfg-cal-member-item  { grid-template-columns: 22px 1.4fr 1.8fr 40px 120px auto; background: var(--surface-raised); border-radius: 6px; border: 1px solid var(--border-default); }
.cfg-mit-member-item  { grid-template-columns: 1.4fr 1.8fr auto; background: var(--surface-raised); border-radius: 6px; border: 1px solid var(--border-default); }
.cfg-cal-member-item.cal-drag-over { border: 2px dashed var(--brand-cal); background: var(--brand-cal-tint); }
.cfg-cal-member-item[draggable="true"] { cursor: default; }
.cal-drag-handle { cursor: grab; color: var(--border-strong); font-size: 15px; line-height: 1; user-select: none; padding: 0 2px; }
.cal-drag-handle:active { cursor: grabbing; }
.cfg-cal-shift-item   { grid-template-columns: 1fr 1fr 1.2fr auto; background: var(--surface-raised); border-radius: 6px; border: 1px solid var(--border-default); }
.cfg-cal-role-item    { grid-template-columns: 1fr auto; background: var(--surface-raised); border-radius: 6px; border: 1px solid var(--border-default); }
.cfg-cal-pair-item    { grid-template-columns: 22px 1fr auto 1fr auto; background: var(--surface-raised); border-radius: 6px; border: 1px solid var(--border-default); }
.cfg-cal-pair-item.cal-drag-over { border: 2px dashed var(--brand-cal); background: var(--brand-cal-tint); }
.cfg-cal-pair-item[draggable="true"] { cursor: default; }
.cfg-cal-holiday-item { grid-template-columns: 140px 1fr auto; background: var(--surface-raised); border-radius: 6px; border: 1px solid var(--border-default); }
/* Personal Area Settings — worksheet option rows (steps-taken tags, passed-to-team). Same
   draggable-row family as the .cfg-cal-*-item siblings above. */
.cfg-worksheet-item   { grid-template-columns: 20px 1fr auto; background: var(--surface-raised); border-radius: 6px; border: 1px solid var(--border-default); }
.cfg-worksheet-item[draggable="true"] { cursor: default; }
.cfg-cal-seed-row     { grid-template-columns: 120px 1fr; background: var(--surface-raised); border-radius: 6px; border: 1px solid var(--border-default); }
.cfg-add-btn { margin-top: 6px; font-size: 12px; padding: 4px 12px; }
.mit-notes-add .btn-primary { padding: 4px 12px; font-size: 12px; white-space: nowrap; }

/* ── Cal multi-select ── */
.cal-row-selected td { background: var(--brand-rr-tint) !important; }
.cal-row-selected .cal-td-day,
.cal-row-selected .cal-td-date { background: var(--brand-rr-tint) !important; font-weight: 600; color: var(--brand-rr-hover); }
.cal-td-day, .cal-td-date { user-select: none; }
/* Single-column cell selection (member-specific) */
.cal-cell-selected { background: var(--brand-rr-tint) !important; outline: 2px solid var(--brand-rr); outline-offset: -1px; }

/* ── Modal shell (toolbar-header variant) ────────────────────────────────────────
   Shared by every modal that has a distinct header bar + scrollable body (Team
   Directory, Import from Directory, Edit Member, Change Password, Add New
   Workspace). Per-modal max-width/max-height stay inline (they're genuinely
   different per modal), everything else was identical copy-paste across 6 modals. */
.modal-content {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    background: var(--surface-card);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    display: flex;
    flex-direction: column;
}
.modal-header {
    background: var(--surface-raised);
    padding: 15px 20px;
    border-bottom: 1px solid var(--border-default);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

/* ── Workspace-type picker card (Add New Workspace, step 2) ─────────────────────
   Light-mode base — dark overrides already existed in hub-styles.css waiting
   for this; the 3 instances previously carried the whole thing as inline style. */
.app-type-card {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    border: 2px solid var(--border-default);
    border-radius: 12px;
    cursor: pointer;
    background: var(--surface-card);
    transition: all 0.2s ease;
}
.app-type-card.active {
    border-color: var(--info);
    background: rgba(52, 152, 219, 0.05);
}

/* ── Modal overlay base ───────────────────────────────────────────────────────
   14 instances (12 in index.html, 2 built dynamically in watchlist.js/manual-tickets.js)
   each carried this whole block as inline style, with z-index already drifted apart
   (1000/1010/1100/1200) since there was no shared definition to keep it in sync. JS still
   toggles visibility via el.style.display — that part is unchanged, only the always-the-same
   positioning/background/centering moved here. Modals that stack above another modal keep
   their own inline z-index override (higher specificity than this class). */
.modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
}



/* =============================================================================
   themes.css — Dark mode overrides
   Warm/crisp 3-layer depth system (confirmed hybrid: warm-neutral base + sharper
   borders/accents than the original cool-slate palette):
     Layer 0 (page)    : #15130f
     Layer 1 (cards)   : #1f1c17
     Layer 2 (raised)  : #2a251d
   Accent per app: RR #6bacdf, MIT #ec7168, CAL #cd8fe0. Text: #f6f1e9 / #c2b6a2 / #91856f
   ============================================================================= */

/* ── Token value flips ───────────────────────────────────────────────────────────
   Re-value the semantic role tokens for dark. Any component that reads these
   (var(--surface-card), var(--text-secondary), var(--brand-rr)…) flips automatically,
   so it needs NO per-component dark override. This is the architecture that lets
   themes.css shrink over time as components migrate onto the tokens.
   ============================================================================= */
body.dark-mode {
    --text-primary:    #f6f1e9;
    --text-secondary:  #c2b6a2;
    --text-muted:      #91856f;
    --text-disabled:   #5c5646;
    --surface-page:    #15130f;
    --surface-card:    #1f1c17;
    --surface-raised:  #2a251d;
    --surface-overlay: rgba(10,8,6,0.65);
    --border-subtle:   rgba(255,255,255,0.07);
    --border-default:  rgba(255,255,255,0.13);
    --border-strong:   rgba(255,255,255,0.2);

    /* brand identity preserved (brighter + more saturated for dark legibility) */
    --brand-rr:  #6bacdf; --brand-rr-tint:  rgba(107,172,223,0.18); --brand-rr-hover:  #8ec4ea;
    --brand-mit: #ec7168; --brand-mit-tint: rgba(236,113,104,0.18); --brand-mit-hover: #f29088;
    --brand-cal: #cd8fe0; --brand-cal-tint: rgba(205,143,224,0.2);  --brand-cal-hover: #dba8e8;

    --success: #7cc274; --success-tint: rgba(124,194,116,0.18);
    --danger:  #ec7168; --danger-tint:  rgba(236,113,104,0.18);
    --warning: #e0a53d; --warning-tint: rgba(224,165,61,0.18);
    --warning-text: #e0a53d; /* light mode needs a darker brown for contrast on the pale tint; dark mode's tint is a translucent overlay on a dark surface, so the bright --warning itself already reads fine */
    --info:    #6bacdf; --info-tint:    rgba(107,172,223,0.18);

    --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.45);
    --shadow-lg: 0 20px 60px rgba(0,0,0,0.6);
}

/* ── Base ────────────────────────────────────────────────────────────────────── */
body.dark-mode {
    background: var(--surface-page);
    color: var(--text-primary);
}

/* ── Cards & Header ──────────────────────────────────────────────────────────── */
body.dark-mode header,
body.dark-mode .card,
body.dark-mode .login-card,
body.dark-mode .team-member-card {
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    box-shadow: var(--shadow-md);
}

/* ── Typography ──────────────────────────────────────────────────────────────── */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode .user-info span,
body.dark-mode .member-name { color: var(--text-primary); }

body.dark-mode p,
body.dark-mode .login-subtitle,
body.dark-mode label,
body.dark-mode .empty-state { color: var(--text-muted); }

/* ── Header elements ─────────────────────────────────────────────────────────── */
body.dark-mode #app-group-title,
body.dark-mode #hub-title { color: var(--text-primary); }

body.dark-mode .btn-system { color: var(--text-muted); }
body.dark-mode .btn-system:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
}

body.dark-mode .time-info,
body.dark-mode .stat-badge {
    background: transparent;
    border: none;
    color: var(--text-primary);
}

body.dark-mode .user-info {
    background: var(--surface-raised);
    border: none;
    color: var(--text-primary);
}

body.dark-mode .tz-label  { color: var(--text-muted); }

body.dark-mode .time-badge:not(:last-child) {
    border-right-color: rgba(255, 255, 255, 0.07);
}

/* ── Inputs & Selects ────────────────────────────────────────────────────────── */
body.dark-mode input,
body.dark-mode select {
    background: var(--surface-page) !important;
    border: 1px solid var(--border-default) !important;
    color: var(--text-primary) !important;
}

body.dark-mode input::placeholder { color: var(--text-disabled) !important; }

body.dark-mode input:focus,
body.dark-mode select:focus {
    border-color: var(--brand-rr) !important;
    box-shadow: 0 0 0 3px rgba(107,172,223,0.18) !important;
}

/* Browser autofill (e.g. a "To" field matching an address Chrome has seen before) paints its own
   background using an internal UA style that a normal `background` rule can't override — the
   giant inset box-shadow is the only reliable cross-browser way to replace it. Without this, an
   autofilled field visually clashes with every other input on the page (flat, often bold-looking,
   ignores our dark theme) even though its computed CSS is otherwise identical to a manually-typed
   one. The long transition delay stops Chrome's own color flashing for a frame first. */
body.dark-mode input:-webkit-autofill,
body.dark-mode input:-webkit-autofill:hover,
body.dark-mode input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text-primary) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--surface-page) inset !important;
    box-shadow: 0 0 0 1000px var(--surface-page) inset !important;
    transition: background-color 600000s ease-in-out 0s, color 600000s ease-in-out 0s;
}

/* Matches .pa-inp's dark treatment (Personal Area): faint tint at rest, border only
   on hover, solid raised surface on focus — no box-shadow ring. Needs !important on
   the focus rule to beat the generic `input:focus`/`select:focus` ring above. */
body.dark-mode .table-input,
body.dark-mode .table-select {
    background: var(--brand-rr-tint);
    color: var(--text-primary);
}
body.dark-mode .table-input:hover,
body.dark-mode .table-select:hover { border-color: var(--border-default); }
body.dark-mode .table-input:focus,
body.dark-mode .table-select:focus {
    background: var(--surface-raised) !important;
    border-color: var(--brand-rr) !important;
    box-shadow: none !important;
}

/* The MIT status <select> is meant to blend into its colored pill (transparent
   bg, no border, inherits the pill's text color) — needs !important to beat the
   generic `body.dark-mode select` rule above, which otherwise paints it solid. */
body.dark-mode .mit-status-pill .mit-status-select {
    background: transparent !important;
    border: none !important;
    color: inherit !important;
}

/* ── Tables ──────────────────────────────────────────────────────────────────── */
body.dark-mode table th {
    background: var(--surface-raised) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: var(--text-muted) !important;
}

body.dark-mode tbody tr:nth-child(odd)  { background: var(--surface-card) !important; }
body.dark-mode tbody tr:nth-child(even) { background: #1a1712 !important; }
body.dark-mode tbody tr:hover           { background: var(--surface-raised) !important; }
body.dark-mode table td { border-color: rgba(255, 255, 255, 0.05) !important; }
/* Was --border-strong (a 20%-opacity white meant for borders, not text) — washed-out and
   barely readable. Body text wants --text-primary, same as the Personal Area's .pa-table. */
body.dark-mode .tickets-table td { color: var(--text-primary) !important; }

body.dark-mode .tickets-table-wrapper,
body.dark-mode .logs-table-wrapper { border-color: rgba(255, 255, 255, 0.07); }

/* .email-preview renders a real, self-contained inline-styled email body verbatim (HO handover
   or ticket report) — deliberately fixed to a light background so it matches what the actual
   email will show. But the generic dark-mode rules above target bare tags (h3, table th, tbody
   tr, table td), and some carry !important, which overrides inline styles outright regardless
   of specificity: a colored header background/white text gets replaced by a dark surface color,
   table rows get a dark background while their text stays black (inherited, unreadable), and any
   heading with no inline color of its own picks up light text on the white preview. Restore the
   email's own inline values, matching/beating each rule's specificity via
   `body.dark-mode .email-preview …`. */
body.dark-mode .email-preview h1,
body.dark-mode .email-preview h2,
body.dark-mode .email-preview h3,
body.dark-mode .email-preview p { color: #000; }

body.dark-mode .email-preview table th {
    background: inherit !important;
    color: inherit !important;
    border-bottom: 1px solid #000 !important;
}
body.dark-mode .email-preview tbody tr:nth-child(odd),
body.dark-mode .email-preview tbody tr:nth-child(even),
body.dark-mode .email-preview tbody tr:hover { background: transparent !important; }
body.dark-mode .email-preview table td { border-color: #ccc !important; }

/* ── Tabs ────────────────────────────────────────────────────────────────────── */
body.dark-mode .view-tabs {
    background: var(--surface-page);
    box-shadow: none;
    border: none !important;
}

body.dark-mode .view-tab-btn {
    background: transparent;
    color: var(--text-disabled);
    border-color: transparent;
}

body.dark-mode .view-tab-btn:hover {
    color: var(--text-muted);
    background: transparent;
}

body.dark-mode .view-tab-btn.active {
    background: var(--surface-card);
    color: var(--brand-rr);
    border-bottom-color: var(--brand-rr);
}

/* ── Buttons ─────────────────────────────────────────────────────────────────── */
body.dark-mode .btn-secondary {
    background: var(--surface-raised);
    color: var(--text-muted);
    border-color: var(--border-default);
}

body.dark-mode .btn-secondary:hover {
    background: #332c22;
    color: var(--text-primary);
    border-color: var(--border-strong);
}

/* Next Person / rules-info: no override needed — every color they use
   (--surface-raised, --brand-rr, --border-strong, --text-primary/-muted) already
   flips via its own token definition above. */

body.dark-mode .sync-status { background: var(--surface-page); color: var(--brand-rr); }

/* ── Team Board ──────────────────────────────────────────────────────────────── */
/* Background (--surface-raised) flips on its own — only the low-opacity white
   border needs an explicit dark value. */
body.dark-mode .team-column {
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-top: 3px solid var(--brand-rr);
}

body.dark-mode .team-column h3 { color: var(--text-muted); border-bottom-color: var(--border-default); }

/* .team-member-item itself needs no override — background (--surface-card),
   box-shadow (--shadow-sm/md) and border (--border-subtle) all flip on their own;
   the left color bar is inline and untouched by any rule here. is-off stays
   --surface-card too (same as ON) — it never matches the column's --surface-raised
   in either theme, so a card can't visually merge into the column behind it. */
body.dark-mode .team-member-item:hover { border-color: rgba(107,172,223,0.3); }

body.dark-mode .member-tickets { color: var(--text-disabled); }

/* ── Misc ─────────────────────────────────────────────────────────────────────── */
body.dark-mode .member-header { border-bottom-color: var(--border-default); }

body.dark-mode .reminder-box {
    background: rgba(224,165,61,0.1);
    border-left-color: var(--warning);
    color: var(--warning);
}

/* ── Drag handle ─────────────────────────────────────────────────────────────── */
body.dark-mode .member-drag-handle { color: var(--border-default); }
body.dark-mode .team-member-item:hover .member-drag-handle { color: var(--text-disabled); }

/* ── Phrases ─────────────────────────────────────────────────────────────────── */
body.dark-mode .phrases-header      { border-bottom-color: var(--border-default); }
body.dark-mode .phrases-header h2   { color: var(--text-primary); }
body.dark-mode .phrases-subtitle    { color: var(--text-disabled); }
body.dark-mode .phrases-disclaimer  { background: rgba(224,165,61,0.1); border-color: rgba(224,165,61,0.3); color: var(--warning); }
body.dark-mode .phrases-list-title  { color: var(--text-disabled); }
body.dark-mode .phrase-row:hover    { background: var(--surface-raised); }
body.dark-mode .phrase-text         { color: var(--text-primary); }
body.dark-mode .phrase-meta         { color: var(--text-disabled); }

body.dark-mode .version-info     { color: var(--border-default); }

/* ── Hub dark mode (override hub-styles.css) ─────────────────────────────────── */
body.dark-mode .hub-screen { background: var(--surface-page); }

body.dark-mode .hub-header,
body.dark-mode .hub-card {
    background: var(--surface-card);
    border-color: rgba(255, 255, 255, 0.06);
}

body.dark-mode .hub-card:hover {
    border-color: var(--brand-rr);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}

body.dark-mode .hub-header h1,
body.dark-mode .hub-user-name,
body.dark-mode .hub-section-title,
body.dark-mode .hub-card-title { color: var(--text-primary); }

body.dark-mode .hub-card-info  { color: var(--text-disabled); }
body.dark-mode .hub-card-badge { background: rgba(107,172,223,0.12); color: var(--brand-rr); }
body.dark-mode .hub-section-title { border-bottom-color: var(--border-default); }

body.dark-mode .hub-card-delete {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-disabled);
}

body.dark-mode .hub-card-delete:hover {
    background: rgba(236,113,104,0.18);
    color: var(--danger);
}

body.dark-mode .hub-card.create-card {
    border-color: var(--border-default);
    background: rgba(255, 255, 255, 0.02);
    color: var(--text-disabled);
}

body.dark-mode .hub-card.create-card:hover {
    border-color: var(--brand-rr);
    color: var(--brand-rr);
}

/* ── Modals ──────────────────────────────────────────────────────────────────── */
body.dark-mode .modal-content {
    background: var(--surface-card) !important;
    color: var(--text-primary);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

body.dark-mode .modal-content h2,
body.dark-mode .modal-content h4 { color: var(--text-primary) !important; }
body.dark-mode .modal-content label { color: var(--text-muted) !important; }

/* .app-type-card dark overrides live in hub-styles.css (it loads after this
   file, so a copy here would be dead weight — was removed as a duplicate). */

/* ── Custom Dialogs ──────────────────────────────────────────────────────────── */
body.dark-mode .dialog-card {
    background: var(--surface-card);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

body.dark-mode .dialog-title   { color: var(--text-primary); }
body.dark-mode .dialog-message { color: var(--text-disabled); }

body.dark-mode .dialog-icon.danger  { background: rgba(236,113,104,0.15); }
body.dark-mode .dialog-icon.warning { background: rgba(224,165,61,0.15); }
body.dark-mode .dialog-icon.info    { background: rgba(107,172,223,0.15); }
body.dark-mode .dialog-icon.success { background: rgba(124,194,116,0.15); }

body.dark-mode .dialog-summary-table th { color: var(--text-disabled); border-bottom-color: var(--border-default); }
body.dark-mode .dialog-summary-table td { color: var(--text-muted); border-bottom-color: var(--surface-card); }

body.dark-mode .dialog-summary-total,
body.dark-mode .dialog-summary-text {
    background: var(--surface-page);
    color: var(--text-disabled);
    border-color: var(--border-default);
}

body.dark-mode .dialog-summary-total strong { color: var(--text-primary); }

/* ── Checkpoint rows ─────────────────────────────────────────────────────────── */
body.dark-mode .checkpoint-row     { background: var(--surface-card) !important; }
body.dark-mode .checkpoint-row-alt { background: #1a1712 !important; }
body.dark-mode .checkpoint-row td  { border-bottom-color: rgba(255,255,255,0.05) !important; color: var(--border-strong) !important; }

/* ── User Dropdown ───────────────────────────────────────────────────────────── */
body.dark-mode .user-menu-trigger {
    color: var(--text-muted);
}

body.dark-mode .user-menu-trigger:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
}

body.dark-mode .user-menu-trigger i:first-child { color: var(--text-muted); }

body.dark-mode .user-dropdown {
    background: var(--surface-card);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

body.dark-mode .dropdown-divider { background: var(--surface-raised); }

body.dark-mode .dropdown-btn {
    color: var(--text-muted);
}

body.dark-mode .dropdown-btn:hover {
    background: var(--surface-raised);
    color: var(--text-primary);
}

body.dark-mode .logout-btn { color: var(--danger); }

body.dark-mode .logout-btn:hover {
    background: rgba(236,113,104,0.15);
    color: var(--brand-mit-hover);
}

/* ── Tabs (dark) — mirror light mode shape, dark palette ─────────────────────── */
body.dark-mode .view-tabs {
    background: var(--surface-page);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-top: none !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

body.dark-mode .view-tab-btn {
    background: transparent;
    color: var(--text-disabled);
    border-color: rgba(255, 255, 255, 0.05);
}

body.dark-mode .view-tab-btn:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-muted);
}

body.dark-mode .view-tab-btn.active {
    background: var(--surface-card);
    color: var(--brand-rr);
    border-bottom-color: var(--brand-rr);
}

/* ── MIT dark mode ─────────────────────────────────────────────────────────── */

/* Typed cards: surfaces/text/status/timer/chips all read tokens that already flip,
   so dark mode only needs the card background and a couple of low-contrast tints. */
body.dark-mode .mit-card     { background: var(--surface-card); }
body.dark-mode .mit-assignee { color: var(--text-disabled); }
body.dark-mode .mit-sep      { color: var(--text-disabled); }

/* Amber/teal category text needs a lighter shade on the dark tint to stay legible. */
body.dark-mode .mit-cat--amber,
body.dark-mode .sev-p2        { color: var(--warning); }
body.dark-mode .mit-cat--teal { background: rgba(29,158,117,0.22); color: #5dcaa5; }

body.dark-mode .hub-badge-mit {
    background: rgba(236,113,104,0.15);
    color: var(--danger);
    border-color: rgba(236,113,104,0.3);
}
body.dark-mode .hub-badge-cal {
    background: rgba(205,143,224,0.15);
    color: var(--brand-cal);
    border-color: rgba(205,143,224,0.3);
}

body.dark-mode .mit-list-toolbar { border-bottom: 1px solid rgba(255,255,255,0.06); }
body.dark-mode .mit-sort-btn { border-color: rgba(255,255,255,0.1); color: var(--text-disabled); }
body.dark-mode .mit-sort-btn:hover { border-color: var(--text-disabled); color: var(--text-primary); }
body.dark-mode .mit-sort-btn.active { background: var(--brand-rr); border-color: var(--brand-rr); color: #fff; }
body.dark-mode .mit-card-edit-btn { color: var(--text-disabled); }
body.dark-mode .mit-card-edit-btn:hover { color: var(--brand-rr); background: rgba(107,172,223,0.1); }
body.dark-mode .mit-notes-toggle { border-color: rgba(255,255,255,0.1); color: var(--text-muted); background: transparent; }
body.dark-mode .mit-notes-toggle:hover,
body.dark-mode .mit-notes-toggle.active { border-color: var(--brand-rr); color: var(--brand-rr); background: rgba(107,172,223,0.1); }
body.dark-mode .mit-notes-panel { border-top-color: rgba(255,255,255,0.07); }
body.dark-mode .mit-note-item { border-bottom-color: rgba(255,255,255,0.04); }
body.dark-mode .mit-note-text { color: var(--border-strong); }
body.dark-mode .mit-note-time { color: var(--text-disabled); }

/* ── CAL dark mode ─────────────────────────────────────────────────────────── */

/* Navigation bar */
body.dark-mode #cal-nav {
    background: var(--surface-card) !important;
    border-bottom-color: rgba(255,255,255,0.07) !important;
}
body.dark-mode #cal-month-label { color: var(--text-primary) !important; }

/* Table headers. :not(.cal-th-member) on the shorthand rule matters: the
   border-color shorthand expands to all 4 longhands (incl. border-top-color)
   with !important, which would always beat the inline border-top each member
   column carries for its agent color (cal-app.js) — even though a later rule
   only re-overriding 3 sides still leaves that expanded border-top-color
   declaration in place. Excluding cal-th-member here, and setting only the
   other 3 sides for it below, is what actually leaves border-top-color free
   for the inline style to win, same as in light mode. */
body.dark-mode .cal-th:not(.cal-th-member) {
    background: var(--surface-raised) !important;
    border-color: rgba(255,255,255,0.07) !important;
    color: var(--text-disabled) !important;
}
body.dark-mode .cal-th-member {
    background: var(--surface-raised) !important;
    border-left-color: rgba(255,255,255,0.07) !important;
    border-right-color: rgba(255,255,255,0.07) !important;
    border-bottom-color: rgba(255,255,255,0.07) !important;
    color: var(--text-disabled) !important;
}
body.dark-mode .cal-th-member:hover { background: #332c22 !important; }

/* Sticky fixed column */
body.dark-mode .cal-col-fixed       { background: var(--surface-card) !important; }
body.dark-mode thead .cal-col-fixed { background: var(--surface-raised) !important; }

/* Day / date cells */
body.dark-mode .cal-td-day  { border-color: rgba(255,255,255,0.05) !important; color: var(--text-disabled) !important; }
body.dark-mode .cal-td-date { border-color: rgba(255,255,255,0.05) !important; color: var(--text-disabled)  !important; font-weight: 500 !important; }
body.dark-mode .cal-td-flag,
body.dark-mode .cal-td-type { border-color: rgba(255,255,255,0.05) !important; }
body.dark-mode .cal-td-type { color: var(--text-disabled) !important; }

/* Data cells */
/* Was --border-strong (a 20%-opacity white meant for borders, not text) — ~1.9:1
   contrast, nearly invisible. --text-secondary matches the light-mode base color's
   role and clears 8:1 against the row backgrounds here. */
body.dark-mode .cal-cell {
    border-color: rgba(255,255,255,0.05) !important;
    color: var(--text-secondary) !important;
}
body.dark-mode .cal-cell[onclick]:hover { background: #332c22 !important; }

/* Row hover — extend to sticky day/date cols */
body.dark-mode .cal-table tbody tr:hover .cal-td-day,
body.dark-mode .cal-table tbody tr:hover .cal-td-date { background: var(--surface-raised) !important; }

/* Today's row — same treatment as the generic dark tbody tr:hover, but permanent.
   Needs !important to beat the tbody tr:nth-child(odd/even) zebra-stripe rule above. */
body.dark-mode .cal-table tbody tr.cal-row-today { background: var(--surface-raised) !important; }
body.dark-mode .cal-row-today .cal-td-day,
body.dark-mode .cal-row-today .cal-td-date { background: var(--surface-raised) !important; }

/* Cell role variants */
body.dark-mode .cal-cell.cover   { background: rgba(205,143,224,0.22) !important; color: var(--brand-cal) !important; }
body.dark-mode .cal-cell.off     { color: var(--text-disabled) !important; }
/* Was --text-disabled (~2.6:1 here) — --text-muted keeps the muted weekend look
   readable (~5:1) without matching regular cells' full-strength text. */
body.dark-mode .cal-cell.weekend { background: var(--surface-page) !important; color: var(--text-muted) !important; }
body.dark-mode .cal-cell.empty   { background: var(--surface-page) !important; }

/* Weekend rows (day/date cols) */
body.dark-mode .cal-row-weekend .cal-td-day,
body.dark-mode .cal-row-weekend .cal-td-date {
    background: var(--surface-page) !important;
    color: var(--text-disabled) !important;
}

/* Holiday flag cells */
body.dark-mode .cal-holiday-uk { background: rgba(236,113,104,0.18)  !important; }
body.dark-mode .cal-holiday-us { background: rgba(107,172,223,0.18) !important; }
body.dark-mode .cal-holiday-sp { background: rgba(224,165,61,0.14)  !important; }

/* Summary bars */
body.dark-mode #cal-summary,
body.dark-mode #cal-cover-summary {
    background: #1a1712 !important;
    border-top-color: rgba(255,255,255,0.06) !important;
    color: var(--text-disabled) !important;
}
body.dark-mode .cal-summary-item { background: var(--surface-raised) !important; color: var(--text-muted) !important; }
body.dark-mode .cal-schedule-state { color: var(--text-disabled) !important; }

/* Edit popover */
body.dark-mode .cal-popover {
    background: var(--surface-card) !important;
    border-color: rgba(255,255,255,0.1) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.55) !important;
}
body.dark-mode .cal-popover-header {
    border-bottom-color: rgba(255,255,255,0.07) !important;
    color: var(--text-muted) !important;
}
body.dark-mode .cal-popover-close { color: var(--text-disabled) !important; }

/* Context menu */
body.dark-mode .cal-ctx-menu    { background: var(--surface-card) !important; border-color: rgba(255,255,255,0.1) !important; box-shadow: 0 8px 24px rgba(0,0,0,0.55) !important; }
body.dark-mode .cal-ctx-header  { background: #1a1712 !important; border-color: rgba(255,255,255,0.06) !important; color: var(--text-disabled) !important; }
body.dark-mode .cal-ctx-info    { color: var(--text-disabled) !important; }
body.dark-mode .cal-ctx-item    { color: var(--text-primary) !important; }
body.dark-mode .cal-ctx-item:hover { background: var(--surface-raised) !important; }
body.dark-mode .cal-ctx-item.cal-ctx-primary { color: var(--brand-rr) !important; }
body.dark-mode .cal-ctx-item.cal-ctx-danger  { color: var(--danger) !important; }
body.dark-mode .cal-ctx-divider { background: rgba(255,255,255,0.07) !important; }

/* CSS styles for the Hub View to append to layout.css */
/* ── Hub Layout ──────────────────────────────────────────────────────────────── */
/* No own padding: the 20px body gutter is the shared page frame, so the Hub
   header lines up exactly with the app/personal headers at every viewport. */
.hub-screen {
    min-height: 100vh;
    background: var(--surface-page);
    padding: 0;
}

.hub-header {
    margin-bottom: 32px;
}

.hub-content {
    max-width: 1200px;
    margin: 0 auto;
}

.hub-section-title {
    font-size: 20px;
    color: var(--text-primary);
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--border-default);
}

.hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
}

/* Hub Group Card */
.hub-card {
    background: var(--surface-card);
    border-radius: 16px;
    padding: 24px;
    box-shadow: var(--shadow-card);
    transition: all 0.3s ease;
    cursor: pointer;
    border: 2px solid transparent;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.hub-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-elevated);
    border-color: var(--info);
}

/* Admin drag&drop reordering */
.hub-card[draggable="true"] { cursor: grab; }
.hub-card-dragging { opacity: 0.45; transform: none; }

.hub-card-header {
    display: flex;
    align-items: center;
}

.hub-card-footer {
    display: flex;
    align-items: center;
    margin-top: auto;
    padding-top: 4px;
}

.hub-card-title {
    font-size: 22px;
    color: var(--text-primary);
    margin: 0;
}

/* Shape/size come from the shared .pill rule in components.css. */
.hub-card-badge {
    background: var(--brand-rr-tint);
    color: var(--brand-rr-hover);
}
.hub-badge-mit { background: var(--brand-mit-tint); color: var(--brand-mit-hover); }
.hub-badge-cal { background: var(--brand-cal-tint); color: var(--brand-cal-hover); }
.hub-badge-watchlist { background: var(--brand-watchlist-tint); color: var(--brand-watchlist-hover); }

.hub-card-info {
    color: var(--text-secondary);
    font-size: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hub-card-info span {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Dark mode for Hub — overrides live in themes.css */

/* Card Delete Button */
.hub-card { position: relative; }

.hub-card-delete {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    background: rgba(0,0,0,0.05);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-disabled);
    cursor: pointer;
    transition: all 0.2s ease;
    opacity: 0;
    z-index: 10;
}

.hub-card:hover .hub-card-delete {
    opacity: 1;
}

.hub-card-delete:hover {
    background: var(--danger-tint);
    color: var(--danger);
    transform: scale(1.1);
}

body.dark-mode .hub-card-delete {
    background: var(--border-subtle);
    color: var(--text-muted);
}

body.dark-mode .hub-card-delete:hover {
    background: var(--danger-tint);
    color: var(--danger);
}


/* Create New Group Card */
.hub-card.create-card {
    border: 2px dashed var(--border-strong);
    background: rgba(0, 0, 0, 0.02);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    color: var(--text-disabled);
    gap: 10px;
}

.hub-card.create-card:hover {
    background: var(--brand-rr-tint);
    border-style: solid;
    color: var(--info);
}

.hub-card.create-card i {
    font-size: 32px;
}

.hub-card.create-card span {
    font-weight: 600;
    font-size: 16px;
}

/* Most Hub dark mode overrides live in themes.css — these .app-type-card ones
   are kept here instead since this file loads after themes.css, so they're
   the ones that actually win (a themes.css copy with different values used
   to shadow-fight this one; removed as dead code). */

body.dark-mode .app-type-card {
    background: var(--surface-raised) !important;
    border-color: var(--border-default) !important;
}

body.dark-mode .app-type-card.active {
    border-color: var(--info) !important;
    background: var(--brand-rr-tint) !important;
}

body.dark-mode .app-type-card h4 { color: var(--text-primary) !important; }
body.dark-mode .app-type-card p { color: var(--text-disabled) !important; }

body.dark-mode .table-input {
    background: var(--surface-raised);
    border-color: var(--border-default);
    color: var(--text-primary);
}

/* Custom dialog system — replaces native confirm() and alert() */

.dialog-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: dialog-fade-in 0.15s ease;
}

@keyframes dialog-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.dialog-card {
    background: white;
    border-radius: 16px;
    width: 100%;
    max-width: 440px;
    padding: 32px 28px 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    animation: dialog-slide-in 0.18s ease;
}

@keyframes dialog-slide-in {
    from { transform: translateY(-12px); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}

.dialog-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 4px;
}

.dialog-icon.danger  { background: var(--danger-tint); color: var(--danger); }
.dialog-icon.warning { background: var(--warning-tint); color: var(--warning); }
.dialog-icon.info    { background: var(--brand-rr-tint); color: var(--brand-rr); }
.dialog-icon.success { background: var(--success-tint); color: var(--success); }

.dialog-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.dialog-message {
    margin: 0;
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.6;
    max-width: 360px;
}

.dialog-actions {
    display: flex;
    gap: 10px;
    margin-top: 8px;
    width: 100%;
    justify-content: center;
}

.dialog-actions button {
    flex: 1;
    max-width: 160px;
}

/* Summary modal — wider */
.dialog-card.dialog-summary {
    max-width: 520px;
    align-items: stretch;
    text-align: left;
}

.dialog-summary-header {
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 2px solid var(--brand-rr);
    padding-bottom: 12px;
    margin-bottom: 4px;
}

.dialog-summary-header h3 {
    margin: 0;
    color: var(--text-primary);
    font-size: 17px;
}

.dialog-summary-header i {
    color: var(--brand-rr);
    font-size: 18px;
}

.dialog-summary-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin: 8px 0;
}

.dialog-summary-table th {
    text-align: left;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-disabled);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--border-default);
}

.dialog-summary-table td {
    padding: 8px 10px;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--surface-raised);
}

.dialog-summary-table tr:last-child td { border-bottom: none; }
.dialog-summary-table .tickets-cell { font-weight: 700; color: var(--brand-rr); }

.dialog-summary-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--surface-raised);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 4px;
}

.dialog-summary-total strong { color: var(--text-primary); }

.dialog-summary-text {
    background: var(--surface-raised);
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 12px;
    line-height: 1.7;
    color: var(--text-secondary);
    white-space: pre-wrap;
    font-family: monospace;
    max-height: 180px;
    overflow-y: auto;
    margin-top: 4px;
    border: 1px solid var(--border-default);
}

.dialog-summary-actions {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    justify-content: flex-end;
}

/* Export preview rows (To/Subject/Range/Tickets) */
.dialog-export-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    padding: 4px 2px;
    color: var(--text-muted);
}
.dialog-export-row strong { color: var(--text-primary); font-weight: 600; text-align: right; }

/* Handover email composer (HO email button) — wider, left-aligned, scrolls if tall. */
.dialog-card.dialog-composer {
    max-width: 620px;
    align-items: stretch;
    text-align: left;
    max-height: 88vh;
    overflow-y: auto;
}
.dialog-composer-subject {
    margin: 0;
    font-size: 12px;
    color: var(--text-muted);
    font-family: monospace;
    word-break: break-word;
}
.dialog-composer-fields { display: flex; flex-direction: column; gap: 10px; }
.dialog-composer-fields label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}
.dialog-composer-fields .table-input { width: 100%; }
.dialog-composer-preview-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-disabled);
    margin-top: 4px;
}
/* Shared by both email composers (HO handover, ticket report): fixed white background + dark
   text so the preview looks like the actual email regardless of app theme. The body HTML uses
   inline styles per email-client convention; dark-mode overrides for the bare tags it uses
   (h3/table th/tbody tr/table td) live in themes.css, scoped to .email-preview, since several
   app-wide dark-mode rules would otherwise bleed into this foreign content. */
.email-preview {
    background: #fff;
    color: #111;
    border: 1px solid var(--border-default);
    border-radius: 8px;
    padding: 14px;
    max-height: 300px;
    overflow: auto;
}
.dialog-composer-hint {
    display: flex;
    gap: 6px;
    align-items: flex-start;
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-muted);
}
.dialog-composer-hint i { color: var(--brand-rr); margin-top: 2px; }

/* Dark mode */
body.dark-mode .dialog-card {
    background: var(--surface-card);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

body.dark-mode .dialog-title { color: var(--text-primary); }
body.dark-mode .dialog-message { color: var(--text-disabled); }
body.dark-mode .dialog-icon.danger  { background: var(--danger-tint); }
body.dark-mode .dialog-icon.warning { background: var(--warning-tint); }
body.dark-mode .dialog-icon.info    { background: var(--brand-rr-tint); }
body.dark-mode .dialog-icon.success { background: var(--success-tint); }
body.dark-mode .dialog-summary-table th { color: var(--text-muted); border-bottom-color: var(--border-default); }
body.dark-mode .dialog-summary-table td { color: var(--text-secondary); border-bottom-color: var(--surface-card); }
body.dark-mode .dialog-summary-total,
body.dark-mode .dialog-summary-text { background: var(--surface-raised); color: var(--text-disabled); border-color: var(--border-default); }
body.dark-mode .dialog-summary-total strong { color: var(--text-primary); }

/* =============================================================================
   personal.css — Personal area (cross-group dashboard). Uses base.css tokens.
   ============================================================================= */

.personal-screen {
    max-width: 1600px;
    margin: 0 auto;
}

.personal-screen .hub-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}
.personal-screen .header-brand {
    display: flex;
    align-items: center;
    gap: 8px;
}

.personal-body {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 20px;
    align-items: start;
}

/* ── Left nav ──────────────────────────────────────────────────────────────── */
.personal-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: 8px;
    box-shadow: var(--shadow-card);
    position: sticky;
    top: 20px;
}
.personal-nav-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    border-radius: var(--radius-md);
    cursor: pointer;
    text-align: left;
    transition: background 0.15s, color 0.15s;
}
.personal-nav-btn i { width: 16px; text-align: center; }
.personal-nav-btn:hover { background: var(--brand-rr-tint); color: var(--text-primary); }
.personal-nav-btn.active {
    background: var(--brand-rr-tint);
    color: var(--info);
}

/* ── Content ───────────────────────────────────────────────────────────────── */
.personal-content { min-width: 0; }

.pa-card {
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: 16px 18px;
    box-shadow: var(--shadow-card);
    margin-bottom: 16px;
}
.pa-card h3 {
    font-size: 15px;
    color: var(--text-primary);
    margin: 0 0 12px;
}

.pa-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px solid var(--border-default);
}
.pa-row:last-child { border-bottom: none; }
.pa-label { font-size: 13px; color: var(--text-secondary); }
.pa-value { font-size: 14px; color: var(--text-primary); font-weight: 500; }
.pa-actions { margin-top: 12px; }

/* Shape/size come from the shared .pill rule in components.css. */
.pa-badge {
    background: var(--brand-rr-tint);
    color: var(--info);
}
.pa-badge-rr  { background: var(--brand-rr-tint);  color: var(--brand-rr-hover); }
.pa-badge-mit { background: var(--brand-mit-tint); color: var(--brand-mit-hover); }
.pa-badge-cal { background: var(--brand-cal-tint); color: var(--brand-cal); }

.pa-empty { color: var(--text-muted); font-size: 14px; padding: 24px 0; text-align: center; }
.pa-hint  { color: var(--text-muted); font-size: 12px; margin-top: 10px; }

/* Color field: hint text left, swatch pinned to the far right (aligns with the toggle above). */
.pa-color-field { display: flex; align-items: center; gap: 10px; }
.pa-color-input {
    width: 36px; height: 28px; padding: 0; flex-shrink: 0;
    border: 1px solid var(--border-default); border-radius: 6px; cursor: pointer;
}

/* ── Tickets ───────────────────────────────────────────────────────────────── */
.pa-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.pa-toolbar input[type=date] {
    padding: 6px 10px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    font-size: 13px;
}
.pa-toolbar .btn--ghost.is-active {
    background: var(--brand-rr-tint); color: var(--brand-rr); border-color: var(--brand-rr);
}
/* Computed week/month range, shown since a single "pick any day in the period" date input
   doesn't otherwise make the resulting range obvious. */
.pa-period-label { font-size: 13px; color: var(--text-muted); white-space: nowrap; }
.pa-toolbar-spacer { flex: 1; }

/* Small dropdowns (NS/TS, Triage/Resolved Y/N) — same look as .pa-inp, just narrower. Actual
   column width comes from the table's <colgroup> (TICKET_COLS in personal-app.js); this just
   stops the select's own min-width from fighting a narrow column. */
.pa-inp-sm { min-width: 0; width: 100%; }

/* Steps-taken multi-select: compact trigger in the cell, floating checkbox panel on click. */
.pa-tagsel {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 4px 8px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: rgba(52,128,201,0.05);
    color: var(--text-primary);
    font-size: 12px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.pa-tagsel:hover { border-color: var(--border-default); }
.pa-tagsel.pa-tagsel-open { border-color: var(--brand-rr); background: var(--surface-card); }
.pa-tagsel-chips { display: flex; flex-wrap: wrap; gap: 3px; }
.pa-tagsel-chip {
    font-size: 10px; font-weight: 600; line-height: 1.4;
    padding: 1px 6px; border-radius: 999px;
    background: var(--brand-rr-tint); color: var(--brand-rr);
    white-space: nowrap;
}
.pa-tagsel-placeholder { color: var(--text-muted); }
.pa-tagsel-caret { margin-left: auto; font-size: 9px; color: var(--text-muted); }

.pa-tagmenu {
    position: fixed;
    z-index: 9500;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-elevated, 0 8px 24px rgba(0,0,0,0.18));
    padding: 6px;
    max-height: 260px;
    overflow-y: auto;
}
.pa-tagmenu-item {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 8px; border-radius: var(--radius-sm);
    font-size: 13px; color: var(--text-primary);
    cursor: pointer; white-space: nowrap;
}
.pa-tagmenu-item:hover { background: var(--surface-raised); }
.pa-tagmenu-item input { cursor: pointer; }
.pa-table-wrap { overflow-x: auto; border-radius: var(--radius-md); }
.pa-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    background: var(--surface-card);
}
.pa-table th {
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-muted);
    padding: 8px 8px;
    border-bottom: 2px solid var(--border-default);
    white-space: nowrap;
}
.pa-table td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--border-default);
    color: var(--text-primary);
    vertical-align: middle;
}
.pa-table tr.pa-past td { color: var(--text-secondary); }
.pa-when { white-space: nowrap; font-variant-numeric: tabular-nums; }
.pa-grp  { color: var(--text-muted); font-size: 12px; }
.pa-ck   { text-align: center; }

.pa-inp {
    width: 100%;
    min-width: 80px;
    padding: 4px 6px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-size: 13px;
    background: rgba(52,128,201,0.05);
    color: var(--text-primary);
    transition: border-color 0.15s, background 0.15s;
}
.pa-inp:hover  { border-color: var(--border-default); }
.pa-inp:focus  { outline: none; border-color: var(--info); background: var(--surface-card); }
.pa-inp.pa-saved { border-color: var(--success); background: rgba(77,124,63,0.08); }
.pa-inp.pa-error { border-color: var(--danger);  background: rgba(220,68,64,0.08); }

.pa-live-dot {
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--success);
    vertical-align: middle;
}

/* ── Stats ─────────────────────────────────────────────────────────────────── */
.pa-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
.pa-metric {
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    box-shadow: var(--shadow-card);
}
.pa-metric-label { display: block; font-size: 12px; color: var(--text-secondary); margin-bottom: 4px; }
.pa-metric-val   { display: block; font-size: 26px; font-weight: 600; color: var(--text-primary); }
.pa-metric-val.pa-metric-sm { font-size: 16px; }

.pa-stats-range { display: flex; align-items: center; gap: 6px; margin-bottom: 16px; }
.pa-stats-range .btn--ghost.is-active {
    background: var(--brand-rr-tint); color: var(--brand-rr); border-color: var(--brand-rr);
}

/* Two-up card grid — collapses to one column on narrow viewports. */
.pa-stats-2col { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.pa-stats-2col .pa-card { margin-bottom: 0; }
.pa-stats-2col + .pa-stats-2col,
.pa-card + .pa-stats-2col { margin-top: 16px; }

/* Proportional two-segment split bar (turn / triage / resolved / NS-TS). */
.pa-split-bar {
    display: flex; height: 12px; border-radius: 6px; overflow: hidden;
    background: var(--surface-raised); margin: 6px 0 10px;
}
.pa-split-seg { height: 100%; }
.pa-split-seg-0 { background: var(--brand-rr); }
.pa-split-seg-1 { background: var(--warning); }
.pa-split-seg-2 { background: var(--brand-cal); }
.pa-split-seg-3 { background: var(--text-muted); }
.pa-split-legends { display: flex; flex-wrap: wrap; gap: 12px; }
.pa-split-legend { font-size: 12px; color: var(--text-secondary); display: inline-flex; align-items: center; gap: 5px; }
.pa-split-legend strong { color: var(--text-primary); }
.pa-split-dot { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }

/* ── Shifts ────────────────────────────────────────────────────────────────── */
.pa-week-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 12px;
}
.pa-week-range   { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.pa-week-current { font-weight: 400; color: var(--text-muted); }

.pa-week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    margin-top: 10px;
}
.pa-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 8px 4px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-card);
}
.pa-day.pa-today { border-color: var(--info); background: rgba(52,128,201,0.06); }
.pa-day-name { font-size: 11px; color: var(--text-muted); text-transform: uppercase; }
.pa-day-num  { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.pa-day-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 3px;
    margin-top: 1px;
}
.pa-day-role {
    font-size: 9px;
    font-weight: 600;
    padding: 2px 5px;
    border-radius: 8px;
    background: var(--border-subtle);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.pa-shift {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 8px;
    text-transform: capitalize;
    white-space: nowrap;
}
.pa-shift-early { background: var(--warning-tint);  color: var(--warning); }
.pa-shift-late  { background: var(--brand-cal-tint); color: var(--brand-cal); }
.pa-shift-cover { background: var(--brand-cal-tint); color: var(--brand-cal); }
.pa-shift-off   { background: var(--border-subtle); color: var(--text-muted); }
.pa-shift-none  { background: var(--border-subtle); color: var(--text-muted); }

/* Week/Month toggle above the Shifts nav bar — same look as the Statistics range bar. */
.pa-view-toggle { display: flex; justify-content: center; gap: 6px; margin-bottom: 10px; }

/* Month view: a real 7-col calendar grid, reusing .pa-day/.pa-day-badges/.pa-shift for each
   cell so it stays visually consistent with the week view. Leading blanks align day 1 under
   its real weekday column. */
.pa-month-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
    margin-top: 10px;
}
.pa-month-dow {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    text-align: center;
    padding-bottom: 2px;
}
.pa-month-blank { background: transparent; }
.pa-month-grid .pa-day { padding: 6px 3px; gap: 2px; }
.pa-month-grid .pa-day-num { font-size: 13px; }

/* Email-signature editor (Info tab). White surface so the pasted signature reads as it will
   in the email, regardless of app theme; scrolls if the signature is tall. */
.pa-signature-editor {
    min-height: 90px;
    max-height: 260px;
    overflow-y: auto;
    padding: 10px 12px;
    border: 1px solid var(--border-default);
    border-radius: 8px;
    background: #fff;
    color: #111;
    font-size: 13px;
}
.pa-signature-editor:focus { outline: none; border-color: var(--brand-rr); }
.pa-signature-editor:empty::before {
    content: 'Paste your signature…';
    color: #9aa0a6;
}

/* Admin Settings modal — Statistics chart toggle list. */
.pcfg-checks { display: flex; flex-direction: column; gap: 8px; }
.pcfg-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-primary);
    cursor: pointer;
}
.pcfg-check input[type="checkbox"] { accent-color: var(--brand-rr); width: 15px; height: 15px; }

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
    .personal-body { grid-template-columns: 1fr; }
    .personal-nav { flex-direction: row; overflow-x: auto; position: static; }
}

/* ── Dark mode ─────────────────────────────────────────────────────────────── */
body.dark-mode .personal-nav,
body.dark-mode .pa-card,
body.dark-mode .pa-metric,
body.dark-mode .pa-table,
body.dark-mode .pa-day {
    background: var(--surface-card);
    border-color: var(--border-default);
}
body.dark-mode .pa-value,
body.dark-mode .pa-metric-val,
body.dark-mode .pa-day-num,
body.dark-mode .pa-card h3,
body.dark-mode .pa-table td { color: var(--text-primary); }
body.dark-mode .pa-label,
body.dark-mode .pa-table tr.pa-past td { color: var(--text-muted); }
body.dark-mode .personal-nav-btn { color: var(--text-muted); }
body.dark-mode .personal-nav-btn.active { color: var(--brand-rr); background: var(--brand-rr-tint); }
body.dark-mode .pa-inp { background: var(--brand-rr-tint); color: var(--text-primary); }
body.dark-mode .pa-inp:focus { background: var(--surface-raised); border-color: var(--brand-rr); }
body.dark-mode .pa-toolbar input[type=date] { background: var(--surface-raised); color: var(--text-primary); border-color: var(--border-default); }
body.dark-mode .pa-tagsel { background: var(--brand-rr-tint); }
body.dark-mode .pa-tagsel.pa-tagsel-open { background: var(--surface-raised); }
body.dark-mode .pa-split-bar { background: var(--surface-raised); }

/* manual-tickets.css — Personal Area "Add ticket" modal (manual-tickets.js) + the "Manual"
   badge it adds to the Tickets table. Reuses .modal-content/.modal-header (components.css)
   and .cfg-row/.table-input/.cfg-add-btn (the same row-editor vocabulary as the Personal Area
   Settings modal / MIT / CAL config editors) — only what's specific to this modal lives here. */

/* One ticket-number input + remove button per row, following the same grid-on-.cfg-row
   pattern as its siblings (.cfg-worksheet-item, .cfg-mit-member-item, …). */
.cfg-manual-item {
    grid-template-columns: 1fr auto;
    background: var(--surface-raised);
    border-radius: 6px;
    border: 1px solid var(--border-default);
}

/* Flags a row once its content stops matching validateTicketNumber (utils.js) — mirrors the
   .pa-inp.pa-error treatment used for failed saves elsewhere in the Personal Area. Compound
   selector (not a lone class) so it ties on specificity with .table-input's own rules instead
   of losing to them — same trick .pa-inp.pa-error uses in personal.css. */
.table-input.cfg-manual-invalid { border-color: var(--danger); background: rgba(220,68,64,0.08); }

.pa-manual-field-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 4px;
}
.pa-manual-field-label + .pa-manual-field-label { margin-top: 12px; }

/* "Manual" tag next to the ticket number in the Tickets table — distinct from the
   pa-badge-rr/mit/cal family (those name an app type; this flags how the row was created),
   so it reuses the warning tint instead of a brand color. */
.pa-badge-manual {
    background: var(--warning-tint);
    color: var(--warning-text);
    margin-left: 4px;
    vertical-align: middle;
}

body.dark-mode .cfg-manual-item { background: var(--surface-raised); border-color: var(--border-default); }
/* `body.dark-mode input, body.dark-mode select` (themes.css) sets border !important on every
   native input in dark mode — needs !important here too to win, same reason themes.css's own
   .table-input:focus rule already does (see its comment). Specificity (3 classes) still beats
   that blocker's (1 class + 2 types) once both are important. */
body.dark-mode .table-input.cfg-manual-invalid { border-color: var(--danger) !important; }

/* admin-panel.css
   Admin Panel view. It reuses the Personal Area's layout (.personal-screen/.personal-body/
   .personal-nav/.personal-content) and cards/tables (.pa-card, .pa-table, .dialog-summary-table,
   the .pa-metrics/.pa-split-* stats blocks). Only the per-tab filter bar and the CAL counter
   strips are admin-specific and live here. Colors come from base.css tokens; dark mode below. */

/* Filter/toolbar row above each tab's content. */
.admin-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 4px 0 14px;
}
.admin-filter-sel { width: auto; min-width: 150px; }
.admin-filter-date { width: auto; }
.admin-filters .pa-hint { display: inline-flex; align-items: center; gap: 6px; }

/* CAL tab month navigator. */
.admin-month-nav {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.admin-month-label {
    font-weight: 700;
    color: var(--text-primary);
    min-width: 130px;
    text-align: center;
}

/* Cover-weekend counter chips (one line, wraps). */
.admin-count-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    padding: 4px 0 2px;
}
.admin-count-chip { font-size: 13px; white-space: nowrap; }

/* The role matrix can be wide (one column per role) — let it scroll inside its card. */
#admin-content .pa-table-wrap { overflow-x: auto; }

/* Dark mode — the reused .pa-*/.dialog-summary-table classes already carry their own dark
   overrides (personal.css / themes.css); only the admin-specific label needs one here. */
body.dark-mode .admin-month-label { color: var(--text-primary); }

/* watchlist.css — chronic-circuit / stalled-ticket badges in the RR tickets table
   (watchlist.js) + the two ficha modals they open, plus the #watchlist-app workspace
   itself (chronic/stalled tabs). Badges reuse .pill's shape (components.css) since
   they're the same "small colored tag" family as rr-status/mit-cat-chip/pa-badge;
   .wl-badge only adds the button reset + its flag color (it's a clickable <button>,
   not the plain <span> the rest of that family uses). One flag color, not two — there's
   no active/historic verdict to color-code (no Remedy access, only what's logged
   through this app), so every badge/table row states the actual last-seen date instead
   of a red/amber judgment call. Fichas reuse .modal-content/.modal-header
   (components.css) — same visual family as the Settings modal and manual-tickets.js's
   Add Ticket modal. The workspace's own tab strip reuses RR's .view-tabs/.view-tab-btn
   (layout.css) — this file only retints the active tab to Watchlist's own brand color
   instead of RR's. */

/* ── Table cell wrapper ──────────────────────────────────────────────────────────
   Wraps the existing ticket-number/UCN cell content so the badge sits inline next
   to it without adding a table column or touching column widths. */
.wl-cell { display: flex; align-items: center; gap: 4px; }
.wl-cell .table-input { flex: 1; min-width: 0; }

/* ── Workspace tabs (Chronic circuits / Stalled tickets) ─────────────────────────── */
/* The #watchlist-app id already outweighs body.dark-mode's class-based specificity
   (layout.css/themes.css), so one rule retints the active tab in both modes. */
#watchlist-app .view-tab-btn.active { color: var(--brand-watchlist); border-bottom-color: var(--brand-watchlist); }
#watchlist-app .view-tab-btn.active::after { background: var(--brand-watchlist); }

/* ── Badge ────────────────────────────────────────────────────────────────────── */
.wl-badge {
    border: none;
    cursor: pointer;
    font-family: inherit;
    flex-shrink: 0;
}
.wl-badge:hover { filter: brightness(0.95); }
body.dark-mode .wl-badge:hover { filter: brightness(1.15); }

.wl-badge--flag { background: var(--warning-tint); color: var(--warning-text); }

/* ── Ficha modal ──────────────────────────────────────────────────────────────── */
.wl-modal { max-width: 560px; max-height: 90vh; }

.wl-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin-bottom: 20px;
    font-size: 13px;
    color: var(--text-secondary);
}
.wl-summary-item { display: inline-flex; align-items: center; gap: 6px; }
.wl-summary-item i { color: var(--text-muted); width: 14px; text-align: center; }
.wl-summary-item strong { color: var(--text-primary); }

.wl-section-title {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.wl-section-title:not(:first-child) { margin-top: 24px; }

.wl-ticket-list, .wl-trail-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 320px;
    overflow-y: auto;
}

.wl-ticket-row {
    background: var(--surface-raised);
    border: 1px solid var(--border-default);
    border-radius: 8px;
    padding: 10px 12px;
}
.wl-ticket-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.wl-ticket-dates { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.wl-ticket-meta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-secondary);
}
.wl-ticket-meta i { color: var(--text-muted); margin-right: 4px; }
.wl-ticket-notes {
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-secondary);
    font-style: italic;
}

/* Copy-for-Remedy button: looks like plain monospaced text until hovered, so the
   list reads as data first and an action second. */
.wl-copy {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    padding: 2px 4px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    color: var(--text-primary);
    cursor: pointer;
}
.wl-copy:hover { background: var(--surface-card); color: var(--brand-rr); }
.wl-copy code { font-family: monospace; font-weight: 600; }
.wl-copy i { font-size: 11px; color: var(--text-muted); }

/* ── Ticket trail ─────────────────────────────────────────────────────────────── */
.wl-trail-row { display: flex; gap: 12px; }
.wl-trail-marker {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--brand-rr-tint);
    color: var(--brand-rr-hover);
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}
.wl-trail-body {
    flex: 1;
    min-width: 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-subtle);
}
.wl-trail-row:last-child .wl-trail-body { border-bottom: none; padding-bottom: 0; }
.wl-trail-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--text-primary);
}
.wl-trail-head .wl-ticket-dates { font-size: 11px; }

body.dark-mode .wl-ticket-row { background: var(--surface-raised); border-color: var(--border-default); }

/* ── #watchlist-view tables (Chronic circuits / Stalled tickets tabs) ───────────────
   .pa-table (personal.css) supplies the shell; these only add the row hover affordance
   (rows open a ficha on click, same interaction as the badges) and monospace ticket/UCN. */
.wl-view-table code { font-family: monospace; font-weight: 600; }
.wl-row { cursor: pointer; }
.wl-row:hover td { background: var(--surface-raised); }
body.dark-mode .wl-row:hover td { background: var(--border-subtle); }

/* ── Period filter toolbar (Today/Week/Month/All) ────────────────────────────────
   Same .btn--ghost.btn--sm + .is-active pattern as personal.css's .pa-toolbar /
   .pa-stats-range (this is the established range-filter idiom, see admin-panel.js too) —
   only the active tint changes, to Watchlist's own brand color instead of RR's. */
.wl-toolbar-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.wl-period-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.wl-period-filters .btn--ghost.is-active {
    background: var(--brand-watchlist-tint); color: var(--brand-watchlist); border-color: var(--brand-watchlist);
}

/* ── "Add manually" modal ─────────────────────────────────────────────────────────
   For a circuit/ticket spotted outside the RR rotation. Same .cfg-row/.table-input/
   .cfg-add-btn vocabulary as manual-tickets.js's Personal Area "Add ticket" modal —
   .wl-manual-occurrence-item logs one INC per row (Chronic), .wl-manual-touch-item logs
   one dated touch of the same ticket per row (Stalled). */
.wl-manual-occurrence-item { grid-template-columns: 140px 150px 1fr 1.5fr auto; background: var(--surface-raised); border-radius: 6px; border: 1px solid var(--border-default); }
.wl-manual-touch-item      { grid-template-columns: 150px 1fr 1.5fr auto; background: var(--surface-raised); border-radius: 6px; border: 1px solid var(--border-default); }
body.dark-mode .wl-manual-occurrence-item,
body.dark-mode .wl-manual-touch-item { background: var(--surface-raised); border-color: var(--border-default); }