/* =========================================================================== AICE HRS — design system v3 RULES: • Page background = white (light) / black (dark). Top + bottom bars match. • All section backgrounds = full-saturation SECONDARY brand colors only (green/yellow/orange/purple/red/pink). Blue is PRIMARY → reserved for accents/CTAs, never a section background. • Cards sit on sections in a DIFFERENT brand color from their section. • Heading chips behind headings sit in YET ANOTHER brand color. • ALL text on brand colors = white. No grey. No overlays. No alpha mixes. =========================================================================== */ /* Poppins (self-hosted) */ @font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:local('Poppins'),url('/assets/fonts/Poppins-Regular.woff2') format('woff2');} @font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:local('Poppins Medium'),url('/assets/fonts/Poppins-Medium.woff2') format('woff2');} @font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:local('Poppins SemiBold'),url('/assets/fonts/Poppins-SemiBold.woff2') format('woff2');} @font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:local('Poppins Bold'),url('/assets/fonts/Poppins-Bold.woff2') format('woff2');} /* ── COLOR SCHEMES ────────────────────────────────────────────────────────── Default scheme = AICE. Other schemes apply via [data-scheme=""] on the element. Each scheme only redefines the 7 brand color tokens; the rest of the stylesheet keeps referring to --blue / --green / --yellow / --orange / --purple / --red / --pink semantically. --blue (PRIMARY) = accents / CTAs, never a section background. The other six SECONDARIES = section / card / chip backgrounds. =========================================================================== */ :root, :root[data-scheme="aice"]{ /* AICE palette — swapped from the previous build so PRIMARY is now the purple hex and the old primary blue is used as a secondary. The CSS rule names ("--blue" = primary, etc.) stay the same so no downstream changes. */ --black:#000000; --white:#FFFFFF; --blue:#864EC9; /* PRIMARY — was #0000FF */ --purple:#0000FF; /* secondary — was #864EC9 */ --green:#24C15F; --yellow:#FAB500; --orange:#FF6600; --red:#B30E0F; --pink:#D23668; } /* Ocean — cool teals + deep navy + warm coral counterpoint */ :root[data-scheme="ocean"]{ --black:#000000; --white:#FFFFFF; --blue:#0EA5E9; /* PRIMARY — bright teal */ --purple:#1E3A8A; /* deep navy */ --green:#06B6D4; /* aqua */ --yellow:#F59E0B; /* warm sand */ --orange:#F97316; /* coral */ --red:#1E40AF; /* deep cobalt */ --pink:#EC4899; /* warm pink */ } /* Tropical — vivid jungle / Caribbean palette */ :root[data-scheme="tropical"]{ --black:#000000; --white:#FFFFFF; --blue:#0891B2; /* PRIMARY — turquoise */ --purple:#15803D; /* jungle green */ --green:#84CC16; /* lime */ --yellow:#F59E0B; /* mango */ --orange:#EA580C; /* tropical sunset */ --red:#BE123C; /* hibiscus */ --pink:#EC4899; /* orchid */ } /* Aurora — northern lights: magenta + electric blues/greens + hot pink */ :root[data-scheme="aurora"]{ --black:#000000; --white:#FFFFFF; --blue:#C026D3; /* PRIMARY — vibrant aurora magenta */ --purple:#4338CA; /* indigo sky */ --green:#14B8A6; /* jade aurora band */ --yellow:#06B6D4; /* electric cyan band */ --orange:#EC4899; /* aurora pink */ --red:#1E40AF; /* deep midnight */ --pink:#10B981; /* emerald peak */ } /* Citrus — zesty fruit market: lime, mango, lemon, grapefruit, peach */ :root[data-scheme="citrus"]{ --black:#000000; --white:#FFFFFF; --blue:#84CC16; /* PRIMARY — lime green */ --purple:#F97316; /* tangerine */ --green:#16A34A; /* key lime */ --yellow:#EAB308; /* lemon */ --orange:#FBBF24; /* mango */ --red:#DB2777; /* grapefruit pink */ --pink:#FB923C; /* peach */ } /* Berry — raspberry, blueberry, mulberry, plus mint + lemon highlights */ :root[data-scheme="berry"]{ --black:#000000; --white:#FFFFFF; --blue:#BE185D; /* PRIMARY — raspberry */ --purple:#4C1D95; /* blueberry purple */ --green:#16A34A; /* mint leaf */ --yellow:#FACC15; /* lemon zest */ --orange:#9333EA; /* boysenberry */ --red:#BE123C; /* cranberry */ --pink:#FB7185; /* strawberry */ } /* Coral — reef-bright: live coral primary on a turquoise + magenta sea */ :root[data-scheme="coral"]{ --black:#000000; --white:#FFFFFF; --blue:#FB7185; /* PRIMARY — live coral */ --purple:#1E40AF; /* deep ocean */ --green:#14B8A6; /* sea turquoise */ --yellow:#FBBF24; /* sun-dappled sand */ --orange:#FB923C; /* peach coral */ --red:#BE185D; /* anemone magenta */ --pink:#06B6D4; /* lagoon aqua */ } /* Galaxy — cosmic: nebula purple, electric cyan, gold stars, red giant */ :root[data-scheme="galaxy"]{ --black:#000000; --white:#FFFFFF; --blue:#9333EA; /* PRIMARY — nebula violet */ --purple:#4338CA; /* deep cosmos indigo */ --green:#06B6D4; /* alien cyan */ --yellow:#F59E0B; /* golden star */ --orange:#EC4899; /* cosmic pink */ --red:#DC2626; /* red giant */ --pink:#10B981; /* emerald nebula */ } /* Meadow — spring wildflower field: lavender, dandelion, poppy, sage */ :root[data-scheme="meadow"]{ --black:#000000; --white:#FFFFFF; --blue:#8B5CF6; /* PRIMARY — lavender */ --purple:#4338CA; /* cornflower */ --green:#65A30D; /* meadow grass */ --yellow:#EAB308; /* dandelion */ --orange:#F97316; /* marigold */ --red:#DC2626; /* poppy */ --pink:#EC4899; /* wild rose */ } /* Sunset — sky gradient at golden hour: orange primary, gold, peach, deep horizon red, twilight purple, night-blue */ :root[data-scheme="sunset"]{ --black:#000000; --white:#FFFFFF; --blue:#F97316; /* PRIMARY — warm sunset orange */ --purple:#6B21A8; /* twilight purple */ --green:#1E40AF; /* deep night sky */ --yellow:#FBBF24; /* gold sun */ --orange:#FB923C; /* peach horizon */ --red:#DC2626; /* red glow */ --pink:#DB2777; /* pink cloud */ } /* ── MINIMAL SCHEMES ───────────────────────────────────────────────────── Three colors each: one PRIMARY (accent) plus two alternating section colors. Sections cycle between just two hexes instead of six, for a restrained, editorial feel. */ /* Ink — deep indigo + bright cyan + gold accent */ :root[data-scheme="ink"]{ --black:#000000; --white:#FFFFFF; --blue:#F59E0B; /* PRIMARY — gold */ --purple:#312E81; /* deep indigo */ --green:#0EA5E9; /* bright cyan */ --yellow:#312E81; --orange:#0EA5E9; --red:#312E81; --pink:#0EA5E9; } /* Wine — burgundy + deep teal + amber accent (darkened from champagne so white text is legible) */ :root[data-scheme="wine"]{ --black:#000000; --white:#FFFFFF; --blue:#B45309; /* PRIMARY — warm amber */ --purple:#831843; /* burgundy */ --green:#134E4A; /* deep teal */ --yellow:#831843; --orange:#134E4A; --red:#831843; --pink:#134E4A; } /* Pine — forest pine + chocolate brown + mustard accent (darkened from cream-gold so white text is legible) */ :root[data-scheme="pine"]{ --black:#000000; --white:#FFFFFF; --blue:#A16207; /* PRIMARY — deep mustard */ --purple:#064E3B; /* pine green */ --green:#78350F; /* chocolate brown */ --yellow:#064E3B; --orange:#78350F; --red:#064E3B; --pink:#78350F; } /* Slate — navy + mid-teal + cyan accent */ :root[data-scheme="slate"]{ --black:#000000; --white:#FFFFFF; --blue:#06B6D4; /* PRIMARY — bright cyan */ --purple:#1E3A8A; /* navy */ --green:#075985; /* mid teal */ --yellow:#1E3A8A; --orange:#075985; --red:#1E3A8A; --pink:#075985; } /* Velvet — deep purple + fuchsia + gold accent */ :root[data-scheme="velvet"]{ --black:#000000; --white:#FFFFFF; --blue:#F59E0B; /* PRIMARY — gold */ --purple:#4C1D95; /* deep purple */ --green:#BE185D; /* fuchsia */ --yellow:#4C1D95; --orange:#BE185D; --red:#4C1D95; --pink:#BE185D; } /* ── DUO SCHEMES ───────────────────────────────────────────────────────── Two colors per scheme: one for the section background, one for everything that sits on top (cards, heading chips, primary CTAs). The per-section palette is overridden so every section bg + every child tile uses the same two hexes. */ /* Cobalt — navy sections + cyan foreground */ :root[data-scheme="cobalt"]{ --black:#000000; --white:#FFFFFF; --blue:#06B6D4; /* PRIMARY — cyan (foreground) */ --purple:#1E3A8A; --green:#1E3A8A; --yellow:#1E3A8A; --orange:#1E3A8A; --red:#1E3A8A; --pink:#1E3A8A; } :root[data-scheme="cobalt"] .pwa-section, :root[data-scheme="cobalt"] .pwa-section[class*="sect-"]{ --section:#1E3A8A; --chip:#06B6D4; --c1:#06B6D4; --c2:#06B6D4; --c3:#06B6D4; --c4:#06B6D4; --c5:#06B6D4; --c6:#06B6D4; } /* Maroon — burgundy sections + warm gold foreground */ :root[data-scheme="maroon"]{ --black:#000000; --white:#FFFFFF; --blue:#F59E0B; /* PRIMARY — warm gold (foreground) */ --purple:#831843; --green:#831843; --yellow:#831843; --orange:#831843; --red:#831843; --pink:#831843; } :root[data-scheme="maroon"] .pwa-section, :root[data-scheme="maroon"] .pwa-section[class*="sect-"]{ --section:#831843; --chip:#F59E0B; --c1:#F59E0B; --c2:#F59E0B; --c3:#F59E0B; --c4:#F59E0B; --c5:#F59E0B; --c6:#F59E0B; } /* Iris — deep purple sections + lime foreground */ :root[data-scheme="iris"]{ --black:#000000; --white:#FFFFFF; --blue:#84CC16; /* PRIMARY — lime (foreground) */ --purple:#4C1D95; --green:#4C1D95; --yellow:#4C1D95; --orange:#4C1D95; --red:#4C1D95; --pink:#4C1D95; } :root[data-scheme="iris"] .pwa-section, :root[data-scheme="iris"] .pwa-section[class*="sect-"]{ --section:#4C1D95; --chip:#84CC16; --c1:#84CC16; --c2:#84CC16; --c3:#84CC16; --c4:#84CC16; --c5:#84CC16; --c6:#84CC16; } /* ── PER-SCHEME (section, card) COLLISION FIXES ───────────────────────── A few multi-color schemes have brand slots that happen to put two warm colors adjacent — the section bg and the assigned card color end up looking nearly the same hex. These overrides pick a different slot for those specific (scheme, section) pairs so cards are clearly distinct from the section bg. */ /* Citrus — sect-pink (Today) section=peach, default cards=tangerine (both orange). Force cards to --green (key lime) for high contrast. */ :root[data-scheme="citrus"] .pwa-section.sect-pink{ --c1:var(--green); --c2:var(--green); --c3:var(--green); --c4:var(--green); --c5:var(--green); --c6:var(--green); } /* Sunset — sect-orange (Organization) section=peach, default cards=sunset orange (both orange). Force cards to --green (deep night blue) for high contrast. */ :root[data-scheme="sunset"] .pwa-section.sect-orange{ --c1:var(--green); --c2:var(--green); --c3:var(--green); --c4:var(--green); --c5:var(--green); --c6:var(--green); } /* Meadow — sect-pink (Today) cards=cornflower and sect-orange (Org) cards=lavender. Both are blue-violet shades, so the two sections feel similar. Push Org cards to --pink (wild rose) for variety. */ :root[data-scheme="meadow"] .pwa-section.sect-orange{ --c1:var(--pink); --c2:var(--pink); --c3:var(--pink); --c4:var(--pink); --c5:var(--pink); --c6:var(--pink); } /* ── LIMITED-PALETTE OVERRIDES ────────────────────────────────────────── For the 3-color and 2-color schemes, the .pwa-counter.c-* and .counter.* / .mini.r-* classes pull from individual brand-color tokens that mostly resolve to the same hex as the parent section bg, which would make tile boxes invisible. Force them all to the FOREGROUND color (var(--blue) = the scheme's accent / primary) so every tile is visible and the duo aesthetic stays consistent. */ :root[data-scheme="ink"] .pwa-counter, :root[data-scheme="ink"] .counter, :root[data-scheme="wine"] .pwa-counter, :root[data-scheme="wine"] .counter, :root[data-scheme="pine"] .pwa-counter, :root[data-scheme="pine"] .counter, :root[data-scheme="slate"] .pwa-counter, :root[data-scheme="slate"] .counter, :root[data-scheme="velvet"] .pwa-counter, :root[data-scheme="velvet"] .counter, :root[data-scheme="cobalt"] .pwa-counter, :root[data-scheme="cobalt"] .counter, :root[data-scheme="maroon"] .pwa-counter, :root[data-scheme="maroon"] .counter, :root[data-scheme="iris"] .pwa-counter, :root[data-scheme="iris"] .counter, :root[data-scheme="ink"] .mini, :root[data-scheme="ink"] .more-item.mini-org, :root[data-scheme="wine"] .mini, :root[data-scheme="wine"] .more-item.mini-org, :root[data-scheme="pine"] .mini, :root[data-scheme="pine"] .more-item.mini-org, :root[data-scheme="slate"] .mini, :root[data-scheme="slate"] .more-item.mini-org, :root[data-scheme="velvet"] .mini, :root[data-scheme="velvet"] .more-item.mini-org, :root[data-scheme="cobalt"] .mini, :root[data-scheme="cobalt"] .more-item.mini-org, :root[data-scheme="maroon"] .mini, :root[data-scheme="maroon"] .more-item.mini-org, :root[data-scheme="iris"] .mini, :root[data-scheme="iris"] .more-item.mini-org{ background:var(--blue); color:var(--white); } :root[data-scheme="ink"] .pwa-counter .n, :root[data-scheme="ink"] .pwa-counter .lbl, :root[data-scheme="wine"] .pwa-counter .n, :root[data-scheme="wine"] .pwa-counter .lbl, :root[data-scheme="pine"] .pwa-counter .n, :root[data-scheme="pine"] .pwa-counter .lbl, :root[data-scheme="slate"] .pwa-counter .n, :root[data-scheme="slate"] .pwa-counter .lbl, :root[data-scheme="velvet"] .pwa-counter .n, :root[data-scheme="velvet"] .pwa-counter .lbl, :root[data-scheme="cobalt"] .pwa-counter .n, :root[data-scheme="cobalt"] .pwa-counter .lbl, :root[data-scheme="maroon"] .pwa-counter .n, :root[data-scheme="maroon"] .pwa-counter .lbl, :root[data-scheme="iris"] .pwa-counter .n, :root[data-scheme="iris"] .pwa-counter .lbl, :root[data-scheme="ink"] .counter .n, :root[data-scheme="ink"] .counter .lbl, :root[data-scheme="wine"] .counter .n, :root[data-scheme="wine"] .counter .lbl, :root[data-scheme="pine"] .counter .n, :root[data-scheme="pine"] .counter .lbl, :root[data-scheme="slate"] .counter .n, :root[data-scheme="slate"] .counter .lbl, :root[data-scheme="velvet"] .counter .n, :root[data-scheme="velvet"] .counter .lbl, :root[data-scheme="cobalt"] .counter .n, :root[data-scheme="cobalt"] .counter .lbl, :root[data-scheme="maroon"] .counter .n, :root[data-scheme="maroon"] .counter .lbl, :root[data-scheme="iris"] .counter .n, :root[data-scheme="iris"] .counter .lbl, :root[data-scheme="ink"] .mini .n, :root[data-scheme="ink"] .mini .lbl, :root[data-scheme="wine"] .mini .n, :root[data-scheme="wine"] .mini .lbl, :root[data-scheme="pine"] .mini .n, :root[data-scheme="pine"] .mini .lbl, :root[data-scheme="slate"] .mini .n, :root[data-scheme="slate"] .mini .lbl, :root[data-scheme="velvet"] .mini .n, :root[data-scheme="velvet"] .mini .lbl, :root[data-scheme="cobalt"] .mini .n, :root[data-scheme="cobalt"] .mini .lbl, :root[data-scheme="maroon"] .mini .n, :root[data-scheme="maroon"] .mini .lbl, :root[data-scheme="iris"] .mini .n, :root[data-scheme="iris"] .mini .lbl{ color:var(--white); } :root{ /* Status mapping */ --st-in:var(--green); --st-break:var(--yellow); --st-out:var(--orange); --st-leave:var(--blue); --st-absent:var(--red); --st-holiday:var(--purple); /* Light theme (default) */ --bg:var(--white); /* page bg */ --fg:var(--black); /* text on page bg only */ --on-color:var(--white); /* text on any brand color */ --surface:var(--purple); /* default "card" color — gets overridden by .card.accent-* */ --section:var(--green); /* default "section" color — overridden by .sect-* */ --chip:var(--orange); /* default heading chip color */ --border:var(--white); /* solid white edge for any panel divider */ --muted:var(--white); /* muted text on brand bg — same color, differentiated by size/weight */ --faint:transparent; /* legacy variable kept for compat; resolves to nothing */ --shadow:none; --accent:var(--blue); /* Default 6-slot palette for tiles inside a section. Each .sect-* class + pwa-section:nth-of-type rule overrides these so the section's own color is never in the palette. */ --c1:var(--blue); --c2:var(--purple); --c3:var(--green); --c4:var(--orange);--c5:var(--yellow); --c6:var(--pink); color-scheme:light; } [data-theme="dark"]{ --bg:var(--black); --fg:var(--white); --border:var(--white); --shadow:none; color-scheme:dark; } /* Reset */ *{box-sizing:border-box;} html,body{margin:0;padding:0;} body{ font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,sans-serif; background:var(--bg); color:var(--fg); font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased; } a{color:var(--accent);text-decoration:none;} h1,h2,h3,h4{font-weight:700;margin:0 0 .5em;color:inherit;} /* ── BUTTONS ──────────────────────────────────────────────────────────────── */ .btn{ font-family:inherit;font-weight:700;font-size:14px; background:var(--white);color:var(--black); border:2px solid var(--white); padding:10px 16px;border-radius:10px;cursor:pointer; transition:transform .05s ease,filter .15s ease; } .btn:hover{filter:brightness(.95);} .btn:active{transform:translateY(1px);} .btn:disabled{opacity:.55;cursor:not-allowed;} .btn-primary{background:var(--blue);color:var(--white);border-color:var(--blue);} .btn-block{width:100%;} /* ── INPUTS ──────────────────────────────────────────────────────────────── */ .field{margin-bottom:14px;color:var(--white);} .field label{display:block;font-size:13px;font-weight:700;margin-bottom:6px;color:var(--white);} .input{ width:100%;font-family:inherit;font-size:15px; color:var(--black);background:var(--white); border:2px solid var(--white);border-radius:10px; padding:11px 13px;outline:none; } .input::placeholder{color:var(--black);opacity:.55;} .input:focus{border-color:var(--yellow);} /* ── SECTION COLOR PANELS ────────────────────────────────────────────────── */ /* Default section: green. Sections force one of the secondary brand colors. */ .pwa-section, .section{ background:var(--section); color:var(--white); border-radius:18px; padding:18px; margin-bottom:18px; } .pwa-section > h3, .section > h3, .pwa-section > h2, .section > h2, .pwa-section > h4, .section > h4{ display:inline-block; background:var(--chip); color:var(--white); padding:7px 14px; border-radius:10px; font-size:15px; font-weight:700; margin:0 0 14px; } /* Auto-cycle if the author didn't pick a color: pick by position. Each section gets a single CARD-BG color that all its child tiles use, so the eye sees one section bg + one tile color per section (NOT six). Pairs are designed so the card color is always distinct from the section bg. */ .pwa-section:nth-of-type(6n+1){--section:var(--purple);--chip:var(--yellow); --c1:var(--pink); --c2:var(--pink); --c3:var(--pink); --c4:var(--pink); --c5:var(--pink); --c6:var(--pink);} .pwa-section:nth-of-type(6n+2){--section:var(--orange);--chip:var(--purple); --c1:var(--blue); --c2:var(--blue); --c3:var(--blue); --c4:var(--blue); --c5:var(--blue); --c6:var(--blue);} .pwa-section:nth-of-type(6n+3){--section:var(--green); --chip:var(--orange); --c1:var(--red); --c2:var(--red); --c3:var(--red); --c4:var(--red); --c5:var(--red); --c6:var(--red);} .pwa-section:nth-of-type(6n+4){--section:var(--pink); --chip:var(--green); --c1:var(--purple);--c2:var(--purple);--c3:var(--purple);--c4:var(--purple);--c5:var(--purple);--c6:var(--purple);} .pwa-section:nth-of-type(6n+5){--section:var(--red); --chip:var(--yellow); --c1:var(--blue); --c2:var(--blue); --c3:var(--blue); --c4:var(--blue); --c5:var(--blue); --c6:var(--blue);} .pwa-section:nth-of-type(6n+6){--section:var(--yellow);--chip:var(--purple); --c1:var(--red); --c2:var(--red); --c3:var(--red); --c4:var(--red); --c5:var(--red); --c6:var(--red);} /* Explicit per-section color. Declared AFTER the auto-rotation so equal- specificity (0,2,0) ties resolve in favor of the explicit choice. Each section uses a single card color that contrasts with its bg. */ .pwa-section.sect-green {--section:var(--green); --chip:var(--orange); --c1:var(--red); --c2:var(--red); --c3:var(--red); --c4:var(--red); --c5:var(--red); --c6:var(--red);} .pwa-section.sect-orange {--section:var(--orange); --chip:var(--purple); --c1:var(--blue); --c2:var(--blue); --c3:var(--blue); --c4:var(--blue); --c5:var(--blue); --c6:var(--blue);} .pwa-section.sect-purple {--section:var(--purple); --chip:var(--yellow); --c1:var(--pink); --c2:var(--pink); --c3:var(--pink); --c4:var(--pink); --c5:var(--pink); --c6:var(--pink);} .pwa-section.sect-pink {--section:var(--pink); --chip:var(--green); --c1:var(--purple);--c2:var(--purple);--c3:var(--purple);--c4:var(--purple);--c5:var(--purple);--c6:var(--purple);} .pwa-section.sect-red {--section:var(--red); --chip:var(--yellow); --c1:var(--blue); --c2:var(--blue); --c3:var(--blue); --c4:var(--blue); --c5:var(--blue); --c6:var(--blue);} .pwa-section.sect-yellow {--section:var(--yellow); --chip:var(--purple); --c1:var(--red); --c2:var(--red); --c3:var(--red); --c4:var(--red); --c5:var(--red); --c6:var(--red);} /* ── CARDS ──────────────────────────────────────────────────────────────── */ /* Cards sit on top of sections in a CONTRASTING brand color. White text. Each section's nth-of-type card rotation is designed so no card ever resolves to the same hex as its parent section bg. */ .card{ background:var(--surface); color:var(--white); border:none; border-radius:14px; padding:18px; margin-bottom:12px; overflow:hidden; } .card > h3{color:var(--white);margin:0 0 12px;font-size:15px;font-weight:700;} /* Heading chip variant — colored box behind the heading */ .card > h3.chip, .card.chip-head > h3{ display:inline-block; background:var(--chip); color:var(--white); padding:6px 12px;border-radius:8px; } /* Explicit card color variants */ .card.accent-blue {background:var(--blue);} .card.accent-purple {background:var(--purple);} .card.accent-green {background:var(--green);} .card.accent-orange {background:var(--orange);} .card.accent-red {background:var(--red);} .card.accent-pink {background:var(--pink);} .card.accent-yellow {background:var(--yellow);color:var(--white);} .card.accent-blue > h3, .card.accent-purple > h3, .card.accent-green > h3, .card.accent-orange > h3, .card.accent-red > h3, .card.accent-pink > h3, .card.accent-yellow > h3{color:var(--white);} /* Auto-rotate card color when no accent is set (cards stacked in a section) */ /* Cards use the same per-section palette as more-item tiles, so no card ever resolves to the same hex as its parent section bg. */ .pwa-section .card:not([class*="accent-"]):nth-of-type(6n+1){background:var(--c1);} .pwa-section .card:not([class*="accent-"]):nth-of-type(6n+2){background:var(--c2);} .pwa-section .card:not([class*="accent-"]):nth-of-type(6n+3){background:var(--c3);} .pwa-section .card:not([class*="accent-"]):nth-of-type(6n+4){background:var(--c4);} .pwa-section .card:not([class*="accent-"]):nth-of-type(6n+5){background:var(--c5);} .pwa-section .card:not([class*="accent-"]):nth-of-type(6n+6){background:var(--c6);} /* ── TABLES ──────────────────────────────────────────────────────────────── */ .hr-tbl{width:100%;border-collapse:collapse;color:var(--white);} .hr-tbl th,.hr-tbl td{ text-align:left;padding:11px 12px; border-bottom:2px solid var(--white); vertical-align:middle;font-size:14px;color:var(--white); } .hr-tbl thead th{ font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase; color:var(--white);border-bottom:3px solid var(--white); } .hr-tbl tbody tr{transition:filter .12s;} .hr-tbl tbody tr:hover{filter:brightness(1.1);} /* ── TABS ──────────────────────────────────────────────────────────────── */ .up-tabs,.set-tabs{ display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px; padding-bottom:10px;border-bottom:2px solid var(--white); } .up-tabs button,.set-tabs button{ padding:8px 14px; border:2px solid var(--white); background:transparent;color:var(--white); font:inherit;font-size:13px;font-weight:700; border-radius:999px;cursor:pointer; } .up-tabs button:hover,.set-tabs button:hover{filter:brightness(1.1);} .up-tabs button.active,.set-tabs button.active{ background:var(--white);color:var(--black); } /* ── PILLS / CHIPS ──────────────────────────────────────────────────────── */ .pill{ display:inline-flex;align-items:center;gap:6px; font-size:12px;font-weight:700; padding:3px 10px;border-radius:999px; background:var(--white);color:var(--black); } .pill.in {background:var(--green); color:var(--white);} .pill.break {background:var(--yellow);color:var(--white);} .pill.out {background:var(--orange);color:var(--white);} .pill.leave {background:var(--blue); color:var(--white);} .pill.absent {background:var(--red); color:var(--white);} .pill.holiday{background:var(--purple);color:var(--white);} .cat-pill{ display:inline-flex;align-items:center; padding:3px 9px;border-radius:999px; font-size:11px;font-weight:800;letter-spacing:.3px; text-transform:uppercase;color:var(--white); } .cat-pill.cat-auth {background:var(--blue);} .cat-pill.cat-clock {background:var(--green);} .cat-pill.cat-break {background:var(--yellow);} .cat-pill.cat-leave {background:var(--blue);} .cat-pill.cat-penalty {background:var(--red);} .cat-pill.cat-reopen {background:var(--orange);} .cat-pill.cat-training {background:var(--purple);} .cat-pill.cat-extra_time {background:var(--pink);} .cat-pill.cat-timesheet_edit{background:var(--orange);} .cat-pill.cat-settings {background:var(--purple);} .cat-pill.cat-feedback {background:var(--pink);} .cat-pill.cat-announcement {background:var(--purple);} .cat-pill.cat-chat {background:var(--blue);} .cat-pill.cat-salary {background:var(--green);} .cat-pill.cat-project {background:var(--orange);} .cat-pill.cat-user_admin {background:var(--red);} .cat-pill.cat-caretaker {background:var(--green);} /* ── ALERTS ─────────────────────────────────────────────────────────────── */ .alert{border-radius:10px;padding:10px 13px;font-size:14px;margin-bottom:14px;font-weight:600;} .alert-error{background:var(--red);color:var(--white);} .alert-ok {background:var(--green);color:var(--white);} /* ── AMOUNT ────────────────────────────────────────────────────────────── */ .amount{font-variant-numeric:tabular-nums;font-weight:800;color:var(--white);} /* ── TOAST ─────────────────────────────────────────────────────────────── */ .toast{ display:none;position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:200; padding:12px 18px;border-radius:11px;font-size:14px;font-weight:700; color:var(--white);max-width:90vw; } .toast.ok{background:var(--green);} .toast.err{background:var(--red);} /* ── ICON BUTTON ───────────────────────────────────────────────────────── */ .iconbtn{ display:inline-grid;place-items:center;width:38px;height:38px;border-radius:10px; border:2px solid var(--white);background:transparent;color:var(--white);cursor:pointer; } .iconbtn:hover{filter:brightness(1.1);} .iconbtn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;} /* ── LOGIN ─────────────────────────────────────────────────────────────── */ .login-wrap{ min-height:100vh;display:grid;place-items:center;padding:24px; background:var(--purple); } .login-card{ width:100%;max-width:380px;padding:28px; background:var(--pink); border-radius:18px;color:var(--white); } .login-card .input{background:var(--white);color:var(--black);border-color:var(--white);} .login-card .field label{color:var(--white);} .brand{font-weight:800;font-size:24px;letter-spacing:-.5px;text-align:center;margin-bottom:18px;color:var(--white);} .brand .dot{color:var(--yellow);} .login-sub{text-align:center;color:var(--white);font-size:13px;margin-bottom:24px;opacity:1;font-weight:500;} .login-logo{display:block;width:76px;height:76px;object-fit:contain;border-radius:18px;margin:0 auto 12px;} .sidebar-logo{max-height:34px;max-width:184px;object-fit:contain;display:block;} /* ── PORTAL SHELL ──────────────────────────────────────────────────────── */ .shell{display:grid;grid-template-columns:240px 1fr;min-height:100vh;background:var(--bg);transition:grid-template-columns .2s ease;} .shell.sb-collapsed{grid-template-columns:64px 1fr;} .sidebar{ background:var(--purple); border:none; padding:18px 12px;position:sticky;top:0;height:100vh;overflow:auto; color:var(--white); display:flex;flex-direction:column; } .sidebar .brand{font-size:20px;text-align:left;margin:4px 8px 18px;color:var(--white);white-space:nowrap;overflow:hidden;} .nav{flex:1;} .nav a{ display:flex;align-items:center;gap:10px; padding:10px 12px;border-radius:9px; color:var(--white);font-size:14px;font-weight:600;margin-bottom:2px; white-space:nowrap;overflow:hidden; } .nav a:hover{background:var(--pink);} .nav a.active{background:var(--yellow);color:var(--white);} .nav-ic{display:inline-grid;place-items:center;width:22px;height:22px;flex:0 0 22px;} .nav-ic svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;} .nav-lbl{flex:1;overflow:hidden;text-overflow:ellipsis;} /* Collapse toggle (bottom of sidebar) */ .sb-collapse{ margin-top:auto;display:flex;align-items:center;justify-content:center; width:100%;height:38px;border-radius:9px; background:transparent;color:var(--white);border:2px solid var(--white); cursor:pointer; } .sb-collapse svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;transition:transform .2s;} .sb-collapse:hover{background:var(--pink);} /* Collapsed state — icons only */ .shell.sb-collapsed .sidebar{padding:18px 8px;} .shell.sb-collapsed .sidebar .brand{font-size:0;text-align:center;margin:4px 0 18px;} .shell.sb-collapsed .sidebar .brand img{max-height:28px;max-width:36px;margin:0 auto;} .shell.sb-collapsed .nav a{justify-content:center;padding:11px 6px;gap:0;} .shell.sb-collapsed .nav-lbl{display:none;} .shell.sb-collapsed .sb-collapse svg{transform:rotate(180deg);} .main{display:flex;flex-direction:column;min-width:0;background:var(--bg);} .topbar{ display:flex;align-items:center;justify-content:space-between; padding:14px 22px; background:var(--bg); color:var(--fg); border-bottom:2px solid var(--fg); position:sticky;top:0;z-index:5; } .topbar .title{font-weight:800;font-size:17px;color:var(--fg);} .topbar .actions{display:flex;gap:8px;} .topbar .iconbtn{border-color:var(--fg);color:var(--fg);} .content{padding:24px;background:var(--bg);} .muted{color:var(--white);font-weight:500;opacity:1;} .nav-toggle{display:none;} @media(max-width:820px){ .shell{grid-template-columns:1fr;} .sidebar{display:block;position:fixed;top:0;left:0;bottom:0;width:260px;height:100vh;z-index:60;transform:translateX(-100%);transition:transform .25s ease;} .sidebar.open{transform:translateX(0);} .nav-toggle{display:inline-flex;} .sidebar-overlay{position:fixed;inset:0;background:var(--black);opacity:.5;z-index:55;} } /* ── PWA SHELL ─────────────────────────────────────────────────────────── */ .pwa{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:var(--bg);} .pwa-top{ display:flex;justify-content:space-between;align-items:center;gap:10px; padding:14px 16px;padding-top:max(14px,env(safe-area-inset-top)); background:var(--bg);color:var(--fg); border-bottom:2px solid var(--fg); position:sticky;top:0;z-index:10; } .pwa-top .brand{font-size:18px;font-weight:800;margin:0;text-align:left;color:var(--fg);} .pwa-top .pwa-logo{height:30px;max-width:150px;object-fit:contain;} .pwa-top .iconbtn{border-color:var(--fg);color:var(--fg);} .pwa-body{flex:1;padding:18px 16px 96px;max-width:680px;margin:0 auto;width:100%;background:var(--bg);} .tabbar{ position:fixed;left:0;right:0;bottom:0;display:flex; background:var(--bg); border-top:2px solid var(--fg); padding-bottom:env(safe-area-inset-bottom);z-index:20; } .tabbar button{ flex:1;background:transparent;border:0;color:var(--fg);cursor:pointer; font:inherit;font-size:11px;font-weight:700;padding:9px 2px 8px; display:flex;flex-direction:column;align-items:center;gap:3px;opacity:.65; } .tabbar button.active{opacity:1;color:var(--fg);} .tabbar svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;} .tabbar button.active svg{stroke:var(--fg);} /* progress bar */ .bar{height:8px;border-radius:5px;background:var(--white);overflow:hidden;} .bar>span{display:block;height:100%;background:var(--green);} /* bottom sheet */ .sheet-ov{position:fixed;inset:0;background:var(--black);z-index:60;display:flex;align-items:flex-end;} .sheet{ background:var(--purple);color:var(--white); width:100%;border-radius:18px 18px 0 0; padding:20px 18px calc(20px + env(safe-area-inset-bottom)); max-height:82vh;overflow-y:auto; } .sheet h3{margin-top:0;color:var(--white);} .sheet .opt{ display:flex;align-items:center;gap:12px;padding:13px 6px; border-bottom:2px solid var(--white); font-size:15px;font-weight:600;cursor:pointer;width:100%; background:transparent;border-left:0;border-right:0;border-top:0; color:var(--white);text-align:left; } .sheet .opt svg{width:22px;height:22px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:2;} .sheet .opt input[type=checkbox]{flex:0 0 auto;} .list-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 0;border-bottom:2px solid var(--white);color:var(--white);} .list-row:last-child{border-bottom:0;} /* ── CALENDAR (Holidays) ───────────────────────────────────────────────── */ .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;} .cal-grid .hdr{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--white);text-align:center;padding:4px 0;} .cal-grid .cell{ position:relative;min-height:54px;border:2px solid var(--white);border-radius:8px; padding:5px 6px;font-size:12px;cursor:pointer;transition:filter .12s; background:var(--blue);color:var(--white); } @media(min-width:820px){.cal-grid .cell{min-height:64px;padding:6px 8px;font-size:13px;}.cal-grid .cell .lbl{font-size:10px;margin-top:3px;}.cal-grid .hdr{font-size:11px;padding:6px 0;}} .cal-grid .cell:hover{filter:brightness(1.15);} .cal-grid .cell.dim{opacity:.45;border:none;} .cal-grid .cell.today{box-shadow:inset 0 0 0 3px var(--yellow);} .cal-grid .cell .num{font-weight:800;} .cal-grid .cell .lbl{font-size:9px;margin-top:2px;font-weight:700;} .cal-grid .cell.holiday{background:var(--purple);} .cal-grid .cell.off-override{background:var(--orange);} .cal-grid .cell.work-override{background:var(--green);} .cal-grid .cell.default-off{background:var(--red);} .cal-sw{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:middle;margin-right:4px;} .cal-sw.holiday{background:var(--purple);} .cal-sw.off-override{background:var(--orange);} .cal-sw.work-override{background:var(--green);} .cal-sw.default-off{background:var(--red);} /* ── PWA admin home — counter chips ────────────────────────────────────── */ .pwa-counters{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;} .pwa-counter{border-radius:12px;padding:14px 8px;text-align:center;color:var(--white);} .pwa-counter .n{font-size:24px;font-weight:800;line-height:1;color:var(--white);} .pwa-counter .lbl{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;margin-top:4px;color:var(--white);} /* All counters in a section share ONE color (--c1 = the section's card-bg). */ .pwa-counter.c-in, .pwa-counter.c-break, .pwa-counter.c-out, .pwa-counter.c-leave, .pwa-counter.c-absent, .pwa-counter.c-done {background:var(--c1);} /* PWA admin home — needs-attention rows */ .attn-row{ display:flex;align-items:center;gap:10px;padding:12px 14px; background:var(--orange);color:var(--white); border:none;border-radius:12px; text-decoration:none;font-size:14px;font-weight:600;margin-bottom:8px; } .attn-row .n{ display:grid;place-items:center;min-width:28px;height:28px;border-radius:8px; background:var(--white);color:var(--orange);font-weight:800;padding:0 8px; } .attn-row .lbl{flex:1;} .attn-row .arrow{font-size:22px;color:var(--white);} /* ── MORE-PAGE TILES ────────────────────────────────────────────────────── */ .more-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:6px;} @media(min-width:600px){.more-grid{grid-template-columns:repeat(3,1fr);}} .more-item{ display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px; padding:18px 12px; background:var(--blue);color:var(--white); border:none;border-radius:14px; cursor:pointer;text-decoration:none;font:inherit; transition:transform .12s,filter .12s; position:relative; } .more-item:hover{transform:translateY(-2px);filter:brightness(1.08);} .more-item:active{transform:translateY(0);} .more-item .more-icon{ display:grid;place-items:center;width:46px;height:46px;border-radius:12px; background:var(--white);color:var(--blue); } .more-item .more-icon svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2;color:inherit;} .more-item .more-label{font-size:13px;font-weight:800;text-align:center;color:var(--white);} /* Auto-rotate color across the grid */ /* Six-slot palette rotation. The actual hex for each slot is set by the parent .sect-* / pwa-section nth-of-type rule, so a tile inside a purple section can never land on purple. */ .more-item:nth-child(6n+1){background:var(--c1);} .more-item:nth-child(6n+1) .more-icon{color:var(--c1);} .more-item:nth-child(6n+2){background:var(--c2);} .more-item:nth-child(6n+2) .more-icon{color:var(--c2);} .more-item:nth-child(6n+3){background:var(--c3);} .more-item:nth-child(6n+3) .more-icon{color:var(--c3);} .more-item:nth-child(6n+4){background:var(--c4);} .more-item:nth-child(6n+4) .more-icon{color:var(--c4);} .more-item:nth-child(6n+5){background:var(--c5);} .more-item:nth-child(6n+5) .more-icon{color:var(--c5);} .more-item:nth-child(6n+6){background:var(--c6);} .more-item:nth-child(6n+6) .more-icon{color:var(--c6);} .more-item.logout{background:var(--red);}.more-item.logout .more-icon{color:var(--red);} /* Organization mini-cards on PWA admin home — solid backgrounds with role color */ .more-item.mini-org{color:var(--white);} .more-item.mini-org .more-label{color:var(--white);} /* Org tile colors come from the section palette (--c1..--c6) via the .more-item nth-child rules above — no per-role color overrides, so a tile can never collide with its parent section bg. */ .recent-row{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:2px solid var(--white);color:var(--white);} .recent-row:last-child{border-bottom:none;} .recent-row .act{font-weight:700;} .recent-row .when{margin-left:auto;color:var(--white);opacity:.85;} .more-item.portal::after{content:"↗";position:absolute;font-size:11px;color:var(--white);top:8px;right:10px;} /* ── SAVE BAR ──────────────────────────────────────────────────────────── */ .savebar{margin-top:14px;padding-top:14px;border-top:2px solid var(--white);} /* ── MULTI-PICK (checkbox list, replaces