/* IMB DIGITAL HUB · Institutional Aurora Design System v0.10.35 · Reference-inspired Prism refinement Presentation only. Shared by Digital Hub and HiwiLog. */ :root{ --ia-blue:#00549f; --ia-blue-2:#1677c8; --ia-cyan:#00a6d6; --ia-red:#c8102e; --ia-bg:#f2f6fb; --ia-bg-deep:#eaf0f7; --ia-panel:rgba(255,255,255,.78); --ia-panel-strong:rgba(255,255,255,.94); --ia-panel-soft:rgba(248,251,254,.68); --ia-line:rgba(31,56,82,.12); --ia-line-strong:rgba(0,84,159,.24); --ia-ink:#102235; --ia-muted:#637486; --ia-radius-xs:.65rem; --ia-radius-sm:.85rem; --ia-radius-md:1.05rem; --ia-radius-lg:1.35rem; --ia-radius-xl:1.75rem; --ia-shadow-1:0 1px 2px rgba(20,43,67,.05),0 7px 18px rgba(20,43,67,.05); --ia-shadow-2:0 12px 32px rgba(20,43,67,.09),0 1px 0 rgba(255,255,255,.75) inset; --ia-shadow-3:0 24px 64px rgba(15,38,60,.16),0 1px 0 rgba(255,255,255,.82) inset; --ia-control-shadow:0 6px 16px rgba(20,43,67,.07),0 1px 0 rgba(255,255,255,.78) inset; --ia-primary:linear-gradient(135deg,#075ca7 0%,#0b6fbd 58%,#098eb7 100%); --ia-primary-hover:linear-gradient(135deg,#004b91 0%,#075fa8 56%,#067f9f 100%); --ia-ambient-1:rgba(0,84,159,.11); --ia-ambient-2:rgba(0,166,214,.08); --ia-ambient-3:rgba(200,16,46,.035); --ia-focus:0 0 0 3px rgba(0,84,159,.2),0 0 0 1px rgba(0,84,159,.55); } [data-theme="dark"]{ --ia-bg:#08131f; --ia-bg-deep:#0b1724; --ia-panel:rgba(18,31,45,.76); --ia-panel-strong:rgba(21,36,52,.94); --ia-panel-soft:rgba(15,29,42,.72); --ia-line:rgba(188,216,239,.13); --ia-line-strong:rgba(91,174,232,.28); --ia-ink:#eef5fb; --ia-muted:#9eb0c0; --ia-shadow-1:0 1px 2px rgba(0,0,0,.18),0 8px 22px rgba(0,0,0,.16); --ia-shadow-2:0 18px 44px rgba(0,0,0,.25),0 1px 0 rgba(255,255,255,.055) inset; --ia-shadow-3:0 28px 72px rgba(0,0,0,.38),0 1px 0 rgba(255,255,255,.07) inset; --ia-control-shadow:0 7px 18px rgba(0,0,0,.2),0 1px 0 rgba(255,255,255,.055) inset; --ia-primary:linear-gradient(135deg,#247fc4 0%,#3197d3 56%,#23b0ca 100%); --ia-primary-hover:linear-gradient(135deg,#3596db 0%,#44aae0 56%,#35bfd6 100%); --ia-ambient-1:rgba(28,132,210,.17); --ia-ambient-2:rgba(0,184,220,.10); --ia-ambient-3:rgba(225,48,78,.045); --ia-focus:0 0 0 3px rgba(79,163,224,.18),0 0 0 1px rgba(111,182,232,.7); } body.imb-institutional-aurora{ --bg:var(--ia-bg); --surface:var(--ia-panel-strong); --surface-raised:var(--ia-panel-strong); --surface-soft:var(--ia-panel-soft); --glass:var(--ia-panel); --glass-strong:var(--ia-panel-strong); --glass-line:var(--ia-line); --line:var(--ia-line); --line-strong:var(--ia-line-strong); --ink:var(--ia-ink); --ink-secondary:color-mix(in srgb,var(--ia-ink) 86%,var(--ia-muted)); --muted:var(--ia-muted); --accent:var(--ia-blue); --accent-hover:#00427c; --focus:var(--ia-focus); background: radial-gradient(circle at 9% 3%,var(--ia-ambient-1),transparent 28rem), radial-gradient(circle at 92% 8%,var(--ia-ambient-2),transparent 26rem), radial-gradient(circle at 70% 100%,var(--ia-ambient-3),transparent 24rem), linear-gradient(180deg,var(--ia-bg),var(--ia-bg-deep)); color:var(--ia-ink); } [data-theme="dark"] body.imb-institutional-aurora{--accent:#4fa3e0;--accent-hover:#7abce8} body.imb-institutional-aurora::selection{background:color-mix(in srgb,var(--accent) 26%,transparent)} /* Shells */ body.imb-institutional-aurora .app-sidebar{ background:linear-gradient(180deg,color-mix(in srgb,var(--ia-panel-strong) 94%,transparent),color-mix(in srgb,var(--ia-panel) 90%,transparent)); border-right:1px solid var(--ia-line); box-shadow:8px 0 32px rgba(20,43,67,.035); backdrop-filter:blur(24px) saturate(125%); } body.imb-institutional-aurora .topbar{ background:color-mix(in srgb,var(--ia-panel-strong) 86%,transparent); border-bottom:1px solid var(--ia-line); box-shadow:0 8px 28px rgba(20,43,67,.045); backdrop-filter:blur(24px) saturate(135%); } body.imb-institutional-aurora .brand-row{border-bottom-color:var(--ia-line)} body.imb-institutional-aurora .sidebar-footer, body.imb-institutional-aurora .profile-card{background:var(--ia-panel);border-color:var(--ia-line);box-shadow:var(--ia-shadow-1);backdrop-filter:blur(18px)} /* Navigation */ body.imb-institutional-aurora .nav-link{position:relative;border-radius:var(--ia-radius-sm);min-height:2.9rem;padding:.62rem .72rem;transition:.18s ease} body.imb-institutional-aurora .nav-link:hover{background:color-mix(in srgb,var(--accent) 7%,var(--ia-panel));transform:translateX(2px)} body.imb-institutional-aurora .nav-link.active{background:linear-gradient(100deg,color-mix(in srgb,var(--accent) 15%,var(--ia-panel-strong)),color-mix(in srgb,var(--accent) 5%,var(--ia-panel)));color:var(--accent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 18%,transparent),var(--ia-shadow-1)} body.imb-institutional-aurora .nav-link.active::before{content:"";position:absolute;left:-.18rem;top:.7rem;bottom:.7rem;width:3px;border-radius:999px;background:linear-gradient(180deg,var(--accent),var(--ia-cyan))} body.imb-institutional-aurora .nav-icon{border:1px solid color-mix(in srgb,var(--accent) 12%,var(--ia-line));background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 10%,var(--ia-panel-strong)),var(--ia-panel));box-shadow:var(--ia-control-shadow)} /* Page hierarchy */ body.imb-institutional-aurora h1,body.imb-institutional-aurora h2,body.imb-institutional-aurora h3{letter-spacing:-.025em} body.imb-institutional-aurora .page-intro{border-bottom-color:var(--ia-line);padding-bottom:1.35rem} body.imb-institutional-aurora .eyebrow{color:var(--accent);font-weight:750;letter-spacing:.09em} body.imb-institutional-aurora .surface, body.imb-institutional-aurora .metric-card, body.imb-institutional-aurora .person-row, body.imb-institutional-aurora .registry-card, body.imb-institutional-aurora .hub-app-launcher, body.imb-institutional-aurora .workspace-launcher, body.imb-institutional-aurora .project-card, body.imb-institutional-aurora .approval-card, body.imb-institutional-aurora .work-plan-card, body.imb-institutional-aurora .manager-plan-card, body.imb-institutional-aurora .report-launch-card, body.imb-institutional-aurora .saved-report-card, body.imb-institutional-aurora .register-card, body.imb-institutional-aurora .relationship-card, body.imb-institutional-aurora .command-tile, body.imb-institutional-aurora .mini-launcher, body.imb-institutional-aurora .exchange-card, body.imb-institutional-aurora .picker-card{ background:linear-gradient(145deg,color-mix(in srgb,var(--ia-panel-strong) 96%,transparent),color-mix(in srgb,var(--ia-panel) 90%,transparent)); border-color:var(--ia-line); box-shadow:var(--ia-shadow-2); backdrop-filter:blur(18px) saturate(125%); } body.imb-institutional-aurora .surface{border-radius:var(--ia-radius-lg)} body.imb-institutional-aurora .metric-card{border-radius:var(--ia-radius-md)} body.imb-institutional-aurora .metric-card::before{background:linear-gradient(180deg,var(--accent),var(--ia-cyan))!important;width:3px!important} body.imb-institutional-aurora .metric-card::after{background:radial-gradient(circle,color-mix(in srgb,var(--accent) 9%,transparent),transparent 66%)!important} /* Interactive cards */ body.imb-institutional-aurora .hub-app-launcher, body.imb-institutional-aurora .workspace-launcher, body.imb-institutional-aurora .report-launch-card, body.imb-institutional-aurora .person-card, body.imb-institutional-aurora .register-card, body.imb-institutional-aurora .command-tile, body.imb-institutional-aurora .mini-launcher{transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease} body.imb-institutional-aurora .hub-app-launcher:hover, body.imb-institutional-aurora .workspace-launcher:hover, body.imb-institutional-aurora .report-launch-card:hover, body.imb-institutional-aurora .person-card:hover, body.imb-institutional-aurora .register-card:hover, body.imb-institutional-aurora .command-tile:hover, body.imb-institutional-aurora .mini-launcher:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--accent) 35%,var(--ia-line));box-shadow:var(--ia-shadow-3)} /* Buttons and controls */ body.imb-institutional-aurora .btn{border-radius:.82rem;min-height:2.65rem;font-weight:650;box-shadow:var(--ia-control-shadow);border-color:var(--ia-line);transition:.16s ease} body.imb-institutional-aurora .btn-primary{background:var(--ia-primary);border-color:color-mix(in srgb,var(--accent) 75%,transparent);color:#fff;box-shadow:0 10px 22px rgba(0,84,159,.18),0 1px 0 rgba(255,255,255,.24) inset} body.imb-institutional-aurora .btn-primary:hover{background:var(--ia-primary-hover);transform:translateY(-1px);box-shadow:0 14px 28px rgba(0,84,159,.22),0 1px 0 rgba(255,255,255,.24) inset} body.imb-institutional-aurora .btn-secondary, body.imb-institutional-aurora .btn-quiet, body.imb-institutional-aurora .btn-ghost{background:var(--ia-panel-strong);border-color:var(--ia-line);color:var(--ia-ink)} body.imb-institutional-aurora .field input, body.imb-institutional-aurora .field select, body.imb-institutional-aurora .field textarea, body.imb-institutional-aurora .search-box, body.imb-institutional-aurora .filter-cluster input, body.imb-institutional-aurora .filter-cluster select{background:color-mix(in srgb,var(--ia-panel-strong) 95%,transparent);border-color:var(--ia-line);box-shadow:0 1px 0 rgba(255,255,255,.55) inset,0 4px 12px rgba(20,43,67,.035);border-radius:.82rem} body.imb-institutional-aurora .field input:focus, body.imb-institutional-aurora .field select:focus, body.imb-institutional-aurora .field textarea:focus, body.imb-institutional-aurora .search-box:focus-within{border-color:color-mix(in srgb,var(--accent) 55%,var(--ia-line));box-shadow:var(--ia-focus)} body.imb-institutional-aurora .pill, body.imb-institutional-aurora .signal{border-color:var(--ia-line);background:color-mix(in srgb,var(--ia-panel) 84%,var(--ia-bg));box-shadow:0 1px 0 rgba(255,255,255,.45) inset} body.imb-institutional-aurora .ui-theme-toggle, body.imb-institutional-aurora .ui-language-toggle, body.imb-institutional-aurora .segmented-control{background:color-mix(in srgb,var(--ia-panel) 92%,transparent);border-color:var(--ia-line);box-shadow:var(--ia-control-shadow);backdrop-filter:blur(18px)} /* Tables: less glass, more legibility. */ body.imb-institutional-aurora .table-wrap, body.imb-institutional-aurora .report-table-wrap{background:color-mix(in srgb,var(--ia-panel-strong) 97%,transparent);border-color:var(--ia-line);border-radius:var(--ia-radius-md);box-shadow:var(--ia-shadow-1)} body.imb-institutional-aurora th{background:color-mix(in srgb,var(--ia-bg-deep) 74%,var(--ia-panel-strong));color:var(--ia-muted);border-bottom-color:var(--ia-line)} body.imb-institutional-aurora td{border-bottom-color:var(--ia-line)} body.imb-institutional-aurora tbody tr:hover{background:color-mix(in srgb,var(--accent) 4%,transparent)} /* Modals / overlays */ body.imb-institutional-aurora .modal-backdrop, body.imb-institutional-aurora .management-backdrop, body.imb-institutional-aurora .adaptive-picker-backdrop, body.imb-institutional-aurora .mobile-more-backdrop{background:rgba(7,19,31,.48);backdrop-filter:blur(14px) saturate(110%)} body.imb-institutional-aurora .modal, body.imb-institutional-aurora .management-modal, body.imb-institutional-aurora .adaptive-picker-sheet, body.imb-institutional-aurora .mobile-more-sheet{background:linear-gradient(155deg,var(--ia-panel-strong),color-mix(in srgb,var(--ia-panel) 94%,transparent));border:1px solid var(--ia-line);border-radius:var(--ia-radius-xl);box-shadow:var(--ia-shadow-3);backdrop-filter:blur(30px) saturate(135%)} body.imb-institutional-aurora .modal-header, body.imb-institutional-aurora .modal-actions{background:color-mix(in srgb,var(--ia-panel-strong) 90%,transparent);border-color:var(--ia-line)} body.imb-institutional-aurora .modal-close{background:var(--ia-panel);border-color:var(--ia-line);box-shadow:var(--ia-control-shadow)} /* Digital Hub specifics */ body.imb-institutional-aurora .hub-app-launcher{border-radius:1.55rem!important;overflow:hidden} body.imb-institutional-aurora .launcher-window-bar{background:color-mix(in srgb,var(--ia-bg-deep) 72%,var(--ia-panel));border-bottom-color:var(--ia-line)} body.imb-institutional-aurora .launcher-stage{background:transparent} body.imb-institutional-aurora .launcher-open-pill{background:var(--ia-primary)!important;color:#fff!important;border-color:transparent!important;box-shadow:0 8px 18px rgba(0,84,159,.17)} body.imb-institutional-aurora .launcher-feature-row span{background:color-mix(in srgb,var(--ia-panel) 85%,var(--ia-bg));border-color:var(--ia-line)} body.imb-institutional-aurora .access-request-callout{background:linear-gradient(110deg,color-mix(in srgb,var(--warning-soft) 82%,var(--ia-panel-strong)),var(--ia-panel));border-color:color-mix(in srgb,var(--warning) 26%,var(--ia-line));box-shadow:var(--ia-shadow-1)} body.imb-institutional-aurora .access-role-option{background:linear-gradient(145deg,var(--ia-panel-strong),var(--ia-panel));border-color:var(--ia-line);box-shadow:var(--ia-shadow-1)} body.imb-institutional-aurora .access-role-option.is-active{background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 12%,var(--ia-panel-strong)),var(--ia-panel-strong));border-color:color-mix(in srgb,var(--accent) 42%,var(--ia-line))} /* HiwiLog specifics */ body.imb-institutional-aurora .workspace-hero, body.imb-institutional-aurora .project-workspace-hero, body.imb-institutional-aurora .report-builder, body.imb-institutional-aurora .exchange-trust-strip, body.imb-institutional-aurora .planner-help-strip, body.imb-institutional-aurora .readiness-banner{background:linear-gradient(145deg,var(--ia-panel-strong),color-mix(in srgb,var(--accent) 3%,var(--ia-panel)));border-color:var(--ia-line);box-shadow:var(--ia-shadow-2)} body.imb-institutional-aurora .mobile-bottom-nav{background:color-mix(in srgb,var(--ia-panel-strong) 90%,transparent)!important;border-color:var(--ia-line)!important;box-shadow:0 18px 46px rgba(15,38,60,.16)!important;backdrop-filter:blur(28px) saturate(140%)!important} body.imb-institutional-aurora .mobile-bottom-nav>a.active, body.imb-institutional-aurora .mobile-bottom-nav>button.active{background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 12%,var(--ia-panel-strong)),color-mix(in srgb,var(--accent) 5%,var(--ia-panel)));color:var(--accent)!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 15%,transparent)} body.imb-institutional-aurora .quick-add, body.imb-institutional-aurora #quickAddTop{background:var(--ia-primary)!important;border-color:rgba(255,255,255,.72)!important;box-shadow:0 13px 28px rgba(0,84,159,.28),0 0 0 5px color-mix(in srgb,var(--accent) 9%,transparent)!important} /* Login: institutional rather than consumer-neon. */ body.imb-institutional-aurora .login-page{background:radial-gradient(circle at 14% 12%,var(--ia-ambient-1),transparent 28rem),radial-gradient(circle at 86% 15%,var(--ia-ambient-2),transparent 26rem),linear-gradient(180deg,var(--ia-bg),var(--ia-bg-deep))} body.imb-institutional-aurora .login-shell{border:1px solid var(--ia-line);box-shadow:var(--ia-shadow-3);background:var(--ia-panel-strong)} body.imb-institutional-aurora .login-story{background:linear-gradient(145deg,#07345a 0%,#075fa9 58%,#098fa7 100%)} body.imb-institutional-aurora .login-form-panel{background:linear-gradient(160deg,var(--ia-panel-strong),var(--ia-panel));backdrop-filter:blur(22px)} @media(max-width:820px){ body.imb-institutional-aurora .content{padding-inline:max(.8rem,env(safe-area-inset-left));} body.imb-institutional-aurora .topbar{background:color-mix(in srgb,var(--ia-panel-strong) 92%,transparent)} body.imb-institutional-aurora .surface{border-radius:1.2rem} } @media(prefers-reduced-motion:reduce){ body.imb-institutional-aurora *,body.imb-institutional-aurora *::before,body.imb-institutional-aurora *::after{transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important} } @media print{ body.imb-institutional-aurora{background:#fff!important} body.imb-institutional-aurora .surface,body.imb-institutional-aurora .metric-card,body.imb-institutional-aurora .table-wrap{box-shadow:none!important;backdrop-filter:none!important;background:#fff!important} } /* Suite bar shared by HiwiLog and Hub-integrated apps. */ body.imb-institutional-aurora .imb-suite-bar{background:linear-gradient(90deg,#0a3153,#0a426f 60%,#07506a)!important;box-shadow:0 1px 0 rgba(255,255,255,.12),0 8px 30px rgba(5,28,47,.16)!important;backdrop-filter:blur(18px)} body.imb-institutional-aurora .imb-suite-brand,body.imb-institutional-aurora .imb-suite-signout{border-radius:.72rem!important} body.imb-institutional-aurora .imb-suite-signout{background:rgba(5,27,46,.18)!important;border-color:rgba(255,255,255,.22)!important} body.imb-institutional-aurora .imb-suite-signout:hover,body.imb-institutional-aurora .imb-suite-brand:hover{background:rgba(255,255,255,.12)!important} /* ===================================================================== v0.10.35 · Institutional Aurora Prism Reference-inspired refinement: restrained neumorphism + gradient glass. Presentation-only. No workflow or data semantics are changed. ===================================================================== */ :root{ --ia-prism-blue:#0b63b6; --ia-prism-cyan:#13b8d7; --ia-prism-sky:#5da9e9; --ia-prism-red:#c8102e; --ia-prism-wash:rgba(91,169,233,.12); --ia-prism-cyan-wash:rgba(19,184,215,.10); --ia-prism-red-wash:rgba(200,16,46,.035); --ia-raised-shadow:-5px -5px 14px rgba(255,255,255,.78),7px 9px 22px rgba(65,91,118,.13); --ia-pressed-shadow:inset 3px 3px 8px rgba(72,98,124,.11),inset -3px -3px 7px rgba(255,255,255,.78); --ia-prism-border:rgba(255,255,255,.68); --ia-prism-gradient:linear-gradient(135deg,#07579f 0%,#127bc9 54%,#17acc7 100%); --ia-prism-gradient-soft:linear-gradient(135deg,rgba(7,87,159,.12),rgba(23,172,199,.07)); } [data-theme="dark"]{ --ia-prism-wash:rgba(62,155,222,.18); --ia-prism-cyan-wash:rgba(20,196,220,.12); --ia-prism-red-wash:rgba(225,48,78,.05); --ia-raised-shadow:-5px -5px 14px rgba(70,101,128,.045),7px 10px 24px rgba(0,0,0,.28); --ia-pressed-shadow:inset 3px 3px 9px rgba(0,0,0,.28),inset -3px -3px 8px rgba(107,157,195,.055); --ia-prism-border:rgba(194,226,246,.12); --ia-prism-gradient:linear-gradient(135deg,#1d74bd 0%,#2697d0 54%,#26bfd0 100%); --ia-prism-gradient-soft:linear-gradient(135deg,rgba(50,151,216,.16),rgba(38,191,208,.08)); } body.imb-institutional-aurora{ background: radial-gradient(ellipse 42rem 29rem at 4% 0%,var(--ia-prism-wash),transparent 68%), radial-gradient(ellipse 38rem 26rem at 96% 8%,var(--ia-prism-cyan-wash),transparent 70%), radial-gradient(ellipse 32rem 22rem at 72% 100%,var(--ia-prism-red-wash),transparent 72%), linear-gradient(180deg,var(--ia-bg),var(--ia-bg-deep)); background-attachment:fixed; } /* More sculpted shell, inspired by the soft raised UI references. */ body.imb-institutional-aurora .app-sidebar{ background:linear-gradient(162deg,color-mix(in srgb,var(--ia-panel-strong) 97%,transparent),color-mix(in srgb,var(--ia-panel) 91%,transparent)); box-shadow:9px 0 36px rgba(38,68,96,.055),inset -1px 0 0 rgba(255,255,255,.42); } body.imb-institutional-aurora .topbar{ background:linear-gradient(110deg,color-mix(in srgb,var(--ia-panel-strong) 93%,transparent),color-mix(in srgb,var(--ia-panel) 84%,transparent)); box-shadow:0 12px 34px rgba(35,65,94,.06),inset 0 -1px 0 rgba(255,255,255,.46); } body.imb-institutional-aurora .imb-suite-bar{ background:linear-gradient(105deg,#092f52 0%,#0b4f86 58%,#087b91 100%)!important; box-shadow:0 1px 0 rgba(255,255,255,.16) inset,0 11px 30px rgba(5,39,67,.19)!important; } /* Navigation takes cues from the floating/raised controls in the references. */ body.imb-institutional-aurora .nav-link{ border:1px solid transparent; border-radius:1rem; } body.imb-institutional-aurora .nav-link:hover{ background:linear-gradient(145deg,color-mix(in srgb,var(--ia-panel-strong) 96%,var(--accent) 4%),color-mix(in srgb,var(--ia-panel) 92%,transparent)); border-color:color-mix(in srgb,var(--accent) 12%,var(--ia-line)); box-shadow:var(--ia-raised-shadow); } body.imb-institutional-aurora .nav-link.active{ background:linear-gradient(125deg,color-mix(in srgb,var(--accent) 16%,var(--ia-panel-strong)),color-mix(in srgb,var(--ia-cyan) 7%,var(--ia-panel-strong)))!important; border-color:color-mix(in srgb,var(--accent) 22%,var(--ia-line)); box-shadow:var(--ia-raised-shadow),inset 0 1px 0 rgba(255,255,255,.6)!important; } body.imb-institutional-aurora .nav-icon{ border-radius:.85rem; background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 12%,var(--ia-panel-strong)),color-mix(in srgb,var(--ia-cyan) 5%,var(--ia-panel)))!important; box-shadow:var(--ia-raised-shadow)!important; } body.imb-institutional-aurora .nav-link.active .nav-icon{ color:#fff; background:var(--ia-prism-gradient)!important; border-color:transparent!important; box-shadow:0 8px 18px color-mix(in srgb,var(--accent) 23%,transparent),inset 0 1px 0 rgba(255,255,255,.27)!important; } /* Raised glass cards: stronger resemblance to the supplied UI kits without becoming toy-like. */ body.imb-institutional-aurora .surface, body.imb-institutional-aurora .metric-card, body.imb-institutional-aurora .hub-app-launcher, body.imb-institutional-aurora .workspace-launcher, body.imb-institutional-aurora .person-card, body.imb-institutional-aurora .project-card, body.imb-institutional-aurora .approval-card, body.imb-institutional-aurora .work-plan-card, body.imb-institutional-aurora .manager-plan-card, body.imb-institutional-aurora .report-launch-card, body.imb-institutional-aurora .saved-report-card, body.imb-institutional-aurora .register-card, body.imb-institutional-aurora .relationship-card, body.imb-institutional-aurora .command-tile, body.imb-institutional-aurora .mini-launcher, body.imb-institutional-aurora .picker-card, body.imb-institutional-aurora .governance-panel, body.imb-institutional-aurora .workflow-panel{ border:1px solid color-mix(in srgb,var(--ia-line) 62%,var(--ia-prism-border)); background: linear-gradient(145deg,color-mix(in srgb,var(--ia-panel-strong) 98%,transparent),color-mix(in srgb,var(--ia-panel) 91%,var(--ia-prism-sky) 9%)); box-shadow:var(--ia-raised-shadow),inset 0 1px 0 rgba(255,255,255,.64); } [data-theme="dark"] body.imb-institutional-aurora .surface, [data-theme="dark"] body.imb-institutional-aurora .metric-card, [data-theme="dark"] body.imb-institutional-aurora .hub-app-launcher, [data-theme="dark"] body.imb-institutional-aurora .workspace-launcher, [data-theme="dark"] body.imb-institutional-aurora .person-card, [data-theme="dark"] body.imb-institutional-aurora .project-card, [data-theme="dark"] body.imb-institutional-aurora .report-launch-card, [data-theme="dark"] body.imb-institutional-aurora .command-tile{ background:linear-gradient(145deg,rgba(27,45,63,.94),rgba(15,30,45,.86)); box-shadow:var(--ia-raised-shadow),inset 0 1px 0 rgba(177,221,247,.055); } /* KPI cards receive a restrained luminous halo like the gradient dashboard references. */ body.imb-institutional-aurora .metric-card{overflow:hidden;isolation:isolate} body.imb-institutional-aurora .metric-card::after{ width:7.5rem!important;height:7.5rem!important;right:-3.6rem!important;top:-3.8rem!important; background:radial-gradient(circle at 35% 35%,color-mix(in srgb,var(--ia-cyan) 23%,transparent),color-mix(in srgb,var(--accent) 10%,transparent) 42%,transparent 70%)!important; filter:blur(.1px); } body.imb-institutional-aurora .metric-value{position:relative;z-index:1;font-weight:760;letter-spacing:-.045em} body.imb-institutional-aurora .metric-label{position:relative;z-index:1} /* Buttons: raised secondary controls + luminous gradient primary controls. */ body.imb-institutional-aurora .btn{ border-radius:1rem; box-shadow:var(--ia-raised-shadow); border-color:color-mix(in srgb,var(--ia-line) 68%,var(--ia-prism-border)); } body.imb-institutional-aurora .btn-primary{ background:var(--ia-prism-gradient)!important; border-color:rgba(255,255,255,.12)!important; box-shadow:0 13px 27px rgba(0,84,159,.21),inset 0 1px 0 rgba(255,255,255,.31)!important; } body.imb-institutional-aurora .btn-primary:hover{filter:saturate(1.08) brightness(1.02);transform:translateY(-2px)} body.imb-institutional-aurora .btn-primary:active{transform:translateY(0);box-shadow:var(--ia-pressed-shadow)!important} body.imb-institutional-aurora .btn-secondary, body.imb-institutional-aurora .btn-quiet, body.imb-institutional-aurora .btn-ghost{ background:linear-gradient(145deg,color-mix(in srgb,var(--ia-panel-strong) 98%,transparent),color-mix(in srgb,var(--ia-panel) 91%,transparent)); } body.imb-institutional-aurora .btn-secondary:active, body.imb-institutional-aurora .btn-quiet:active{box-shadow:var(--ia-pressed-shadow);transform:none} /* Form controls feel inset rather than flat, a direct neumorphic cue. */ body.imb-institutional-aurora .field input, body.imb-institutional-aurora .field select, body.imb-institutional-aurora .field textarea, body.imb-institutional-aurora .search-box, body.imb-institutional-aurora .filter-cluster input, body.imb-institutional-aurora .filter-cluster select{ border-radius:1rem; background:color-mix(in srgb,var(--ia-panel-strong) 95%,var(--ia-bg-deep)); box-shadow:var(--ia-pressed-shadow); } body.imb-institutional-aurora .field input:focus, body.imb-institutional-aurora .field select:focus, body.imb-institutional-aurora .field textarea:focus, body.imb-institutional-aurora .search-box:focus-within{ background:var(--ia-panel-strong); box-shadow:var(--ia-focus),inset 0 1px 0 rgba(255,255,255,.55); } /* Segmented controls mimic the reference toggle language while remaining accessible. */ body.imb-institutional-aurora .segmented-control, body.imb-institutional-aurora .ui-language-toggle, body.imb-institutional-aurora .ui-theme-toggle{ padding:.28rem; border-radius:999px; background:color-mix(in srgb,var(--ia-bg-deep) 72%,var(--ia-panel)); box-shadow:var(--ia-pressed-shadow); } body.imb-institutional-aurora .segmented-control button.active, body.imb-institutional-aurora .segmented-control button[aria-pressed="true"], body.imb-institutional-aurora .ui-language-toggle button.active, body.imb-institutional-aurora .ui-language-toggle button[aria-pressed="true"], body.imb-institutional-aurora .ui-theme-toggle button.active, body.imb-institutional-aurora .ui-theme-toggle button[aria-pressed="true"]{ background:linear-gradient(145deg,var(--ia-panel-strong),color-mix(in srgb,var(--ia-panel) 92%,var(--ia-prism-sky) 8%)); box-shadow:var(--ia-raised-shadow)!important; } /* App/workspace cards receive a subtle colored light edge, reminiscent of the gradient kits. */ body.imb-institutional-aurora .hub-app-launcher, body.imb-institutional-aurora .workspace-launcher, body.imb-institutional-aurora .report-launch-card{position:relative;isolation:isolate} body.imb-institutional-aurora .hub-app-launcher::after, body.imb-institutional-aurora .workspace-launcher::after, body.imb-institutional-aurora .report-launch-card::after{ content:"";position:absolute;z-index:-1;right:-3.5rem;bottom:-4rem;width:9rem;height:9rem;border-radius:50%; background:radial-gradient(circle,color-mix(in srgb,var(--ia-cyan) 15%,transparent),color-mix(in srgb,var(--accent) 5%,transparent) 46%,transparent 70%); pointer-events:none; } body.imb-institutional-aurora .launcher-open-pill, body.imb-institutional-aurora .quick-add, body.imb-institutional-aurora #quickAddTop{ background:var(--ia-prism-gradient)!important; box-shadow:0 13px 30px rgba(0,84,159,.27),0 0 0 6px color-mix(in srgb,var(--accent) 8%,transparent),inset 0 1px 0 rgba(255,255,255,.29)!important; } /* Tables stay sober but gain a dimensional container and soft gradient header. */ body.imb-institutional-aurora .table-wrap, body.imb-institutional-aurora .report-table-wrap{ border-radius:1.25rem; box-shadow:var(--ia-raised-shadow); overflow:hidden; } body.imb-institutional-aurora th{ background:linear-gradient(180deg,color-mix(in srgb,var(--ia-bg-deep) 84%,var(--ia-panel-strong)),color-mix(in srgb,var(--ia-bg-deep) 64%,var(--ia-panel-strong))); } /* Modals are visually closer to the glassmorphism mobile reference. */ body.imb-institutional-aurora .modal-backdrop, body.imb-institutional-aurora .management-backdrop, body.imb-institutional-aurora .adaptive-picker-backdrop, body.imb-institutional-aurora .mobile-more-backdrop{ background:linear-gradient(135deg,rgba(7,21,36,.48),rgba(16,54,78,.36)); backdrop-filter:blur(18px) saturate(120%); } body.imb-institutional-aurora .modal, body.imb-institutional-aurora .management-modal, body.imb-institutional-aurora .adaptive-picker-sheet, body.imb-institutional-aurora .mobile-more-sheet{ border-color:color-mix(in srgb,var(--ia-line) 56%,var(--ia-prism-border)); background:linear-gradient(155deg,color-mix(in srgb,var(--ia-panel-strong) 98%,transparent),color-mix(in srgb,var(--ia-panel) 91%,var(--ia-prism-sky) 9%)); box-shadow:0 30px 85px rgba(7,28,47,.24),inset 0 1px 0 rgba(255,255,255,.68); } /* Mobile dock deliberately echoes the floating navigation in the supplied mobile kit. */ body.imb-institutional-aurora .mobile-bottom-nav{ border-radius:1.55rem!important; background:color-mix(in srgb,var(--ia-panel-strong) 88%,transparent)!important; box-shadow:0 20px 50px rgba(15,38,60,.19),inset 0 1px 0 rgba(255,255,255,.68)!important; } body.imb-institutional-aurora .mobile-bottom-nav>a.active, body.imb-institutional-aurora .mobile-bottom-nav>button.active{ background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 16%,var(--ia-panel-strong)),color-mix(in srgb,var(--ia-cyan) 9%,var(--ia-panel-strong)))!important; box-shadow:var(--ia-raised-shadow)!important; } /* Hub presentation gets a little more dashboard personality without changing markup. */ body.imb-institutional-aurora .access-request-callout{ background:linear-gradient(120deg,color-mix(in srgb,var(--warning-soft) 86%,var(--ia-panel-strong)),color-mix(in srgb,var(--ia-panel-strong) 95%,transparent)); box-shadow:var(--ia-raised-shadow); } body.imb-institutional-aurora .governance-action-icon, body.imb-institutional-aurora .request-icon, body.imb-institutional-aurora .status-symbol{ border-radius:1rem; box-shadow:var(--ia-raised-shadow); } /* Dark mode keeps the same dimensional language, with luminous cyan edges instead of bright white shadows. */ [data-theme="dark"] body.imb-institutional-aurora .btn-secondary, [data-theme="dark"] body.imb-institutional-aurora .btn-quiet, [data-theme="dark"] body.imb-institutional-aurora .btn-ghost, [data-theme="dark"] body.imb-institutional-aurora .segmented-control button.active, [data-theme="dark"] body.imb-institutional-aurora .ui-language-toggle button.active, [data-theme="dark"] body.imb-institutional-aurora .ui-theme-toggle button.active{ background:linear-gradient(145deg,rgba(31,51,69,.96),rgba(17,32,47,.92)); border-color:rgba(132,194,231,.14); } @media(max-width:820px){ body.imb-institutional-aurora .surface, body.imb-institutional-aurora .metric-card, body.imb-institutional-aurora .workspace-launcher, body.imb-institutional-aurora .hub-app-launcher{box-shadow:-3px -3px 10px rgba(255,255,255,.64),5px 7px 16px rgba(65,91,118,.11),inset 0 1px 0 rgba(255,255,255,.55)} [data-theme="dark"] body.imb-institutional-aurora .surface, [data-theme="dark"] body.imb-institutional-aurora .metric-card, [data-theme="dark"] body.imb-institutional-aurora .workspace-launcher{box-shadow:0 12px 30px rgba(0,0,0,.24),inset 0 1px 0 rgba(116,185,226,.055)} } /* ===================================================================== v0.10.35 · Institutional Aurora Cobalt Modernized institutional palette. Presentation only. ===================================================================== */ :root{ --ia-blue:#0A5DBB; --ia-blue-2:#267FC8; --ia-cyan:#00B8D4; --ia-red:#C8102E; --ia-bg:#F4F7FB; --ia-bg-deep:#EAF1F7; --ia-panel:rgba(255,255,255,.80); --ia-panel-strong:rgba(255,255,255,.95); --ia-panel-soft:rgba(247,251,254,.72); --ia-line:rgba(24,55,83,.12); --ia-line-strong:rgba(10,93,187,.24); --ia-ink:#10263B; --ia-muted:#65788A; --ia-primary:linear-gradient(135deg,#0A5DBB 0%,#187ED0 56%,#00AFCB 100%); --ia-primary-hover:linear-gradient(135deg,#074E9D 0%,#116BB8 56%,#009AB4 100%); --ia-ambient-1:rgba(10,93,187,.12); --ia-ambient-2:rgba(0,184,212,.09); --ia-ambient-3:rgba(200,16,46,.032); --ia-focus:0 0 0 3px rgba(10,93,187,.18),0 0 0 1px rgba(10,93,187,.58); --ia-prism-blue:#0A5DBB; --ia-prism-cyan:#00B8D4; --ia-prism-sky:#62AFE5; --ia-prism-gradient:linear-gradient(135deg,#0A5DBB 0%,#1B82CF 52%,#00B8D4 100%); } [data-theme="dark"]{ --ia-bg:#071522; --ia-bg-deep:#0B1B2A; --ia-panel:rgba(13,30,45,.80); --ia-panel-strong:rgba(16,35,52,.95); --ia-panel-soft:rgba(11,27,41,.76); --ia-line:rgba(178,215,240,.14); --ia-line-strong:rgba(98,180,235,.30); --ia-ink:#F0F7FC; --ia-muted:#9DB2C3; --ia-primary:linear-gradient(135deg,#3188CC 0%,#43A9DC 54%,#2AC6D4 100%); --ia-primary-hover:linear-gradient(135deg,#48A0DD 0%,#57B8E6 54%,#40D3DF 100%); --ia-ambient-1:rgba(48,143,211,.18); --ia-ambient-2:rgba(0,199,222,.11); --ia-ambient-3:rgba(225,48,78,.045); --ia-prism-gradient:linear-gradient(135deg,#3188CC 0%,#43A9DC 54%,#2AC6D4 100%); } body.imb-institutional-aurora{--accent:var(--ia-blue);--accent-hover:#074E9D} [data-theme="dark"] body.imb-institutional-aurora{--accent:#63B7ED;--accent-hover:#8CCCF3} /* v0.10.35 · Canonical desktop sidebar geometry for Hub and HiwiLog. */ @media(min-width:821px){ body.imb-institutional-aurora .app-shell{grid-template-columns:16rem minmax(0,1fr)!important;transition:grid-template-columns .18s ease} body.imb-institutional-aurora .app-shell.sidebar-collapsed{grid-template-columns:4.9rem minmax(0,1fr)!important} body.imb-institutional-aurora .app-sidebar{padding:.75rem .65rem .6rem!important;gap:.65rem!important} body.imb-institutional-aurora .sidebar-top{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:.55rem!important;min-width:0} body.imb-institutional-aurora .sidebar-brand-block{display:block;min-width:0;flex:1} body.imb-institutional-aurora .sidebar-toggle{width:2.35rem!important;height:2.35rem!important;min-width:2.35rem!important;display:grid!important;place-items:center!important;border-radius:.8rem!important;transform:none!important} body.imb-institutional-aurora .brand-logo-mini{display:none} body.imb-institutional-aurora .app-shell.sidebar-collapsed .app-sidebar{padding:.6rem .45rem!important} body.imb-institutional-aurora .app-shell.sidebar-collapsed .sidebar-top{flex-direction:column-reverse!important;align-items:center!important} body.imb-institutional-aurora .app-shell.sidebar-collapsed .sidebar-brand-block{display:grid!important;place-items:center!important;width:100%!important} body.imb-institutional-aurora .app-shell.sidebar-collapsed .brand-row{display:grid!important;place-items:center!important;width:3rem!important;height:3rem!important;padding:0!important;border:0!important} body.imb-institutional-aurora .app-shell.sidebar-collapsed .brand-logo-full{display:none!important} body.imb-institutional-aurora .app-shell.sidebar-collapsed .brand-logo-mini{display:block!important;width:2.55rem!important;height:2.55rem!important;object-fit:contain!important} body.imb-institutional-aurora .app-shell.sidebar-collapsed .brand-copy, body.imb-institutional-aurora .app-shell.sidebar-collapsed .sidebar-section-label, body.imb-institutional-aurora .app-shell.sidebar-collapsed .nav-link>span:not(.nav-icon):not(.nav-count){display:none!important} body.imb-institutional-aurora .app-shell.sidebar-collapsed .nav-link{justify-content:center!important;padding:.4rem!important;margin:.08rem 0!important;min-height:3rem!important;font-size:0!important} body.imb-institutional-aurora .app-shell.sidebar-collapsed .nav-icon{margin:0!important;width:2.25rem!important;height:2.25rem!important;flex:0 0 2.25rem!important;font-size:.95rem!important} body.imb-institutional-aurora .app-shell.sidebar-collapsed .sidebar-footer{display:block!important;padding:.32rem!important} body.imb-institutional-aurora .app-shell.sidebar-collapsed .sidebar-footer>.btn{display:none!important} body.imb-institutional-aurora .app-shell.sidebar-collapsed .profile-card{display:flex!important;justify-content:center!important;padding:.3rem!important;min-height:3rem!important} body.imb-institutional-aurora .app-shell.sidebar-collapsed .profile-card>div:not(.avatar){display:none!important} } @media(max-width:820px){body.imb-institutional-aurora .sidebar-toggle{display:none!important}} /* ===================================================================== v0.10.47 · Canonical suite sidebar behavior One layout grammar for Digital Hub and HiwiLog. Event Navigator mirrors this contract in its integration adapter. Wide screens start expanded; medium laptop/large-tablet screens start as an icon rail unless the user has saved a preference; phones switch to app bottom navigation. ===================================================================== */ @media(min-width:821px){ body.imb-institutional-aurora .app-shell{grid-template-columns:16rem minmax(0,1fr)!important;transition:grid-template-columns .18s ease!important} body.imb-institutional-aurora .app-shell.sidebar-collapsed{grid-template-columns:4.9rem minmax(0,1fr)!important} body.imb-institutional-aurora .app-sidebar{position:sticky!important;top:0!important;height:100dvh!important;min-height:0!important;overflow:hidden!important;padding:.75rem .65rem .6rem!important;gap:.65rem!important} body.imb-suite-active.imb-institutional-aurora .app-sidebar{top:var(--imb-suite-height)!important;height:calc(100dvh - var(--imb-suite-height))!important} body.imb-institutional-aurora .sidebar-nav{flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain!important;scrollbar-width:thin!important;padding-right:.08rem} body.imb-institutional-aurora .sidebar-spacer{display:none!important} body.imb-institutional-aurora .sidebar-footer{flex:0 0 auto!important} body.imb-institutional-aurora .sidebar-toggle{display:grid!important;width:2.35rem!important;height:2.35rem!important;min-width:2.35rem!important;place-items:center!important;transform:none!important} body.imb-institutional-aurora .app-shell.sidebar-collapsed .app-sidebar{padding:.6rem .45rem!important} body.imb-institutional-aurora .app-shell.sidebar-collapsed .sidebar-nav{padding-right:0!important;scrollbar-width:none!important} body.imb-institutional-aurora .app-shell.sidebar-collapsed .sidebar-nav::-webkit-scrollbar{display:none!important} body.imb-institutional-aurora .app-shell.sidebar-collapsed .profile-card{display:flex!important;justify-content:center!important;align-items:center!important;min-height:3rem!important;padding:.3rem!important} } @media(max-width:820px){ body.imb-institutional-aurora .app-sidebar{display:none!important} body.imb-institutional-aurora .sidebar-toggle{display:none!important} body.imb-institutional-aurora .app-shell,body.imb-institutional-aurora .app-shell.sidebar-collapsed{grid-template-columns:minmax(0,1fr)!important} } /* ===================================================================== Lean design foundation · pass 01 Flat action colour + canonical appearance toggle. Presentation only: no navigation, permissions, data, or workflow logic. ===================================================================== */ :root{ --ia-action-bg:#0A5DBB; --ia-action-hover:#084F9E; --ia-action-text:#FFFFFF; --ia-primary:var(--ia-action-bg); --ia-primary-hover:var(--ia-action-hover); --ia-prism-gradient:var(--ia-action-bg); } [data-theme="dark"]{ --ia-action-bg:#63B7ED; --ia-action-hover:#7CC6F0; --ia-action-text:#071522; --ia-primary:var(--ia-action-bg); --ia-primary-hover:var(--ia-action-hover); --ia-prism-gradient:var(--ia-action-bg); } /* Primary actions are intentionally flat across Hub and HiwiLog. */ body.imb-institutional-aurora .btn-primary, body.imb-institutional-aurora .launcher-open-pill, body.imb-institutional-aurora .quick-add, body.imb-institutional-aurora #quickAddTop{ background:var(--ia-action-bg)!important; color:var(--ia-action-text)!important; border-color:var(--ia-action-bg)!important; filter:none!important; box-shadow:0 7px 18px color-mix(in srgb,var(--ia-action-bg) 22%,transparent)!important; } body.imb-institutional-aurora .btn-primary:hover, body.imb-institutional-aurora .launcher-open-pill:hover, body.imb-institutional-aurora .quick-add:hover, body.imb-institutional-aurora #quickAddTop:hover{ background:var(--ia-action-hover)!important; color:var(--ia-action-text)!important; border-color:var(--ia-action-hover)!important; filter:none!important; } /* Strong selected-button states use one flat accent instead of a two-colour fill. */ body.imb-institutional-aurora .adaptive-date-day.selected, body.imb-institutional-aurora .timesheet-month-grid button.active{ background:var(--ia-action-bg)!important; color:var(--ia-action-text)!important; border-color:var(--ia-action-bg)!important; } body.imb-institutional-aurora #planMonitorTabs button.active, body.imb-institutional-aurora #projectLifecycleToggle button.active, body.imb-institutional-aurora .segmented-control button.active, body.imb-institutional-aurora .segmented-control button[aria-pressed="true"], body.imb-institutional-aurora .ui-language-toggle button.active, body.imb-institutional-aurora .ui-language-toggle button[aria-pressed="true"]{ background:var(--ia-panel-strong)!important; } body.imb-institutional-aurora .mobile-bottom-nav>a.active, body.imb-institutional-aurora .mobile-bottom-nav>button.active{ background:color-mix(in srgb,var(--accent) 11%,var(--ia-panel-strong))!important; } /* Sign-in hero label must stay white in light mode as well as dark mode. */ body.imb-institutional-aurora .login-story .eyebrow.light{ color:#FFFFFF!important; } /* Appearance toggle intentionally inherits the accepted baseline styling unchanged. */ /* ===================================================================== Lean design foundation · pass 02 Role-adaptive Digital Hub shell + quiet Material 3 navigation language. The visual system deliberately removes filled navigation tiles and glow shadows from action buttons while keeping authorization logic untouched. ===================================================================== */ /* Primary/launcher actions are flat and shadow-free across Hub + HiwiLog. */ body.imb-institutional-aurora .btn-primary, body.imb-institutional-aurora .launcher-open-pill, body.imb-institutional-aurora .quick-add, body.imb-institutional-aurora #quickAddTop{ box-shadow:none!important; } /* Canonical lean sidebar navigation: no filled tiles and no icon bubbles. */ @media(min-width:821px){ body.imb-institutional-aurora .sidebar-nav{gap:.12rem!important} body.imb-institutional-aurora .nav-link{ position:relative!important; min-height:2.9rem!important; margin:0!important; padding:.56rem .68rem!important; border:0!important; border-radius:.7rem!important; background:transparent!important; box-shadow:none!important; color:var(--ink-secondary,var(--ia-muted))!important; transform:none!important; } body.imb-institutional-aurora .nav-link::before{ content:""; position:absolute; left:0; top:50%; width:2px; height:1.35rem; border-radius:999px; background:transparent; transform:translateY(-50%); } body.imb-institutional-aurora .nav-link:hover{ background:color-mix(in srgb,var(--accent) 5%,transparent)!important; color:var(--ink)!important; box-shadow:none!important; transform:none!important; } body.imb-institutional-aurora .nav-link.active{ background:transparent!important; color:var(--accent)!important; box-shadow:none!important; font-weight:720!important; } body.imb-institutional-aurora .nav-link.active::before{background:var(--accent)} body.imb-institutional-aurora .nav-icon{ width:1.75rem!important; height:1.75rem!important; flex:0 0 1.75rem!important; margin:0!important; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; color:color-mix(in srgb,var(--ink-secondary,var(--ia-muted)) 84%,var(--accent))!important; font-size:0!important; } body.imb-institutional-aurora .nav-link.active .nav-icon{color:var(--accent)!important} body.imb-institutional-aurora .nav-icon .m3-nav-svg, body.imb-institutional-aurora .nav-icon svg{width:1.3rem!important;height:1.3rem!important;display:block!important} body.imb-institutional-aurora .sidebar-section-label{ padding:.75rem .68rem .32rem!important; color:var(--muted)!important; font-size:.61rem!important; letter-spacing:.11em!important; font-weight:760!important; } /* The account area is part of the sidebar, not a card sitting inside it. */ body.imb-institutional-aurora .sidebar-footer{ gap:.25rem!important; padding:.7rem .12rem 0!important; border:0!important; border-top:1px solid var(--line)!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; backdrop-filter:none!important; } body.imb-institutional-aurora .profile-card{ padding:.55rem .5rem!important; border:0!important; border-radius:.75rem!important; background:transparent!important; box-shadow:none!important; backdrop-filter:none!important; } body.imb-institutional-aurora .sidebar-footer>.btn, body.imb-institutional-aurora .sidebar-footer>.sidebar-signout{ justify-content:flex-start!important; min-height:2.45rem!important; padding:.45rem .55rem!important; border:0!important; border-radius:.65rem!important; background:transparent!important; color:var(--muted)!important; box-shadow:none!important; } body.imb-institutional-aurora .sidebar-footer>.btn:hover, body.imb-institutional-aurora .sidebar-footer>.sidebar-signout:hover{ background:color-mix(in srgb,var(--accent) 5%,transparent)!important; color:var(--ink)!important; } } /* Digital Hub role adaptation. Standard members have no Hub management destinations, so a permanent one-item sidebar is visual dead weight. */ .hub-member-topbar-logo{display:none;height:2.05rem;width:auto;max-width:12.5rem;object-fit:contain;object-position:left center} @media(min-width:821px){ body.hub-member-mode #appView.app-shell, body.hub-member-mode #appView.app-shell.sidebar-collapsed{grid-template-columns:minmax(0,1fr)!important} body.hub-member-mode #hubSidebar{display:none!important} body.hub-member-mode .hub-tablet-menu-button{display:none!important} body.hub-member-mode .hub-member-topbar-logo{display:block} body.hub-member-mode .hub-topbar-leading{gap:1rem!important} body.hub-member-mode #hubMobileAccountButton{display:grid!important;border-color:var(--line)!important;background:var(--ia-panel-strong)!important;color:var(--accent)!important;box-shadow:none!important} body.hub-member-mode .hub-content{max-width:80rem!important} body.hub-manager-mode .hub-member-topbar-logo{display:none!important} } body.hub-member-mode #hubMobileNav{display:none!important} body.hub-member-mode .hub-tablet-drawer-backdrop{display:none!important} /* Manager sidebar is a compact command list, not a table of oversized cells. */ @media(min-width:821px){ body.hub-manager-mode #hubSidebar .sidebar-nav{margin-top:.45rem!important} body.hub-manager-mode #hubSidebar .hub-management-label{margin-top:.45rem!important} body.hub-manager-mode #hubSidebar .nav-link{min-height:3rem!important} } /* Collapsed rail keeps the same quiet icon language. */ @media(min-width:821px){ body.imb-institutional-aurora .app-shell.sidebar-collapsed .nav-link{background:transparent!important;box-shadow:none!important} body.imb-institutional-aurora .app-shell.sidebar-collapsed .nav-link::before{left:1px!important;height:1.2rem!important} body.imb-institutional-aurora .app-shell.sidebar-collapsed .nav-icon{width:2.25rem!important;height:2.25rem!important;flex:0 0 2.25rem!important} } /* Hub mobile navigation uses the same SVG grammar when management navigation exists. */ body.imb-institutional-aurora .hub-mobile-nav .mobile-nav-svg{display:grid;place-items:center} body.imb-institutional-aurora .hub-mobile-nav .mobile-nav-svg .m3-nav-svg{width:1.15rem;height:1.15rem} /* Remove the old cyan/blue corner halo behind workspace launch actions. */ body.imb-institutional-aurora .hub-app-launcher::after, body.imb-institutional-aurora .workspace-launcher::after{display:none!important} @media(max-width:820px){ body.hub-member-mode .hub-content{padding-bottom:1.25rem!important} } /* ===================================================================== Lean design foundation · pass 03 Reference-locked navigation states from the approved Hub mock-up. Resting, hovered and selected destinations are deliberately recognizable as controls, but use restrained neutral depth rather than filled colour. ===================================================================== */ :root{ --ia-nav-rest-bg:rgba(255,255,255,.54); --ia-nav-rest-border:rgba(24,55,83,.105); --ia-nav-rest-shadow:0 2px 5px rgba(19,40,61,.025),0 6px 15px rgba(19,40,61,.038),inset 0 1px 0 rgba(255,255,255,.80); --ia-nav-hover-bg:rgba(255,255,255,.78); --ia-nav-hover-border:rgba(10,93,187,.18); --ia-nav-hover-shadow:0 3px 7px rgba(19,40,61,.035),0 9px 20px rgba(19,40,61,.065),inset 0 1px 0 rgba(255,255,255,.88); --ia-nav-active-bg:rgba(255,255,255,.86); --ia-nav-active-border:rgba(10,93,187,.19); --ia-nav-active-shadow:0 2px 5px rgba(19,40,61,.028),0 7px 17px rgba(19,40,61,.052),inset 0 1px 0 rgba(255,255,255,.90); --ia-nav-pressed-shadow:inset 0 1px 3px rgba(19,40,61,.10),0 1px 2px rgba(19,40,61,.025); --ia-nav-icon:#173B5C; --ia-nav-text:#18324A; --ia-nav-hover-ink:#0A5DBB; --ia-nav-active-ink:#0A5DBB; --ia-nav-active-rule:#0A5DBB; } [data-theme="dark"]{ --ia-nav-rest-bg:rgba(19,39,57,.62); --ia-nav-rest-border:rgba(176,210,234,.13); --ia-nav-rest-shadow:0 3px 8px rgba(0,0,0,.16),0 8px 18px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.045); --ia-nav-hover-bg:rgba(23,46,67,.78); --ia-nav-hover-border:rgba(99,183,237,.22); --ia-nav-hover-shadow:0 4px 10px rgba(0,0,0,.20),0 10px 22px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.06); --ia-nav-active-bg:rgba(22,43,63,.88); --ia-nav-active-border:rgba(99,183,237,.25); --ia-nav-active-shadow:0 3px 8px rgba(0,0,0,.18),0 8px 19px rgba(0,0,0,.15),inset 0 1px 0 rgba(255,255,255,.065); --ia-nav-pressed-shadow:inset 0 1px 4px rgba(0,0,0,.36),0 1px 1px rgba(255,255,255,.025); --ia-nav-icon:#D2E2EF; --ia-nav-text:#E7F0F7; --ia-nav-hover-ink:#8CCCF3; --ia-nav-active-ink:#F2F7FB; --ia-nav-active-rule:#63B7ED; } @media(min-width:821px){ body.imb-institutional-aurora .sidebar-nav{gap:.24rem!important} body.imb-institutional-aurora .nav-link{ position:relative!important; min-height:2.9rem!important; margin:0!important; padding:.58rem .72rem!important; border:1px solid var(--ia-nav-rest-border)!important; border-radius:.76rem!important; background:var(--ia-nav-rest-bg)!important; color:var(--ia-nav-text)!important; box-shadow:var(--ia-nav-rest-shadow)!important; transform:translateY(0)!important; transition:background .16s ease,border-color .16s ease,box-shadow .16s ease,color .16s ease,transform .16s ease!important; } body.imb-institutional-aurora .nav-link::before{ content:""!important; position:absolute!important; left:-1px!important; top:.42rem!important; bottom:.42rem!important; width:3px!important; height:auto!important; border-radius:0 999px 999px 0!important; background:transparent!important; transform:none!important; } body.imb-institutional-aurora .nav-link:hover{ background:var(--ia-nav-hover-bg)!important; border-color:var(--ia-nav-hover-border)!important; color:var(--ia-nav-hover-ink)!important; box-shadow:var(--ia-nav-hover-shadow)!important; transform:translateY(-1px)!important; } body.imb-institutional-aurora .nav-link:active{ transform:translateY(0)!important; box-shadow:var(--ia-nav-pressed-shadow)!important; } body.imb-institutional-aurora .nav-link.active{ background:var(--ia-nav-active-bg)!important; border-color:var(--ia-nav-active-border)!important; color:var(--ia-nav-active-ink)!important; box-shadow:var(--ia-nav-active-shadow)!important; font-weight:730!important; } body.imb-institutional-aurora .nav-link.active::before{background:var(--ia-nav-active-rule)!important} body.imb-institutional-aurora .nav-link:focus-visible{ outline:none!important; border-color:color-mix(in srgb,var(--ia-nav-active-rule) 48%,var(--ia-nav-rest-border))!important; box-shadow:var(--ia-nav-hover-shadow),var(--focus)!important; } body.imb-institutional-aurora .nav-icon, body.imb-institutional-aurora .nav-link.active .nav-icon, body.imb-institutional-aurora .nav-link:hover .nav-icon{ width:1.8rem!important; height:1.8rem!important; flex:0 0 1.8rem!important; margin:0!important; padding:0!important; border:0!important; border-radius:0!important; background:none!important; background-color:transparent!important; background-image:none!important; box-shadow:none!important; } body.imb-institutional-aurora .nav-icon{color:var(--ia-nav-icon)!important} body.imb-institutional-aurora .nav-link:hover .nav-icon{color:var(--ia-nav-hover-ink)!important} body.imb-institutional-aurora .nav-link.active .nav-icon{color:var(--ia-nav-active-ink)!important} body.imb-institutional-aurora .nav-icon .m3-nav-svg, body.imb-institutional-aurora .nav-icon svg{ width:1.32rem!important; height:1.32rem!important; display:block!important; fill:none!important; stroke:currentColor!important; stroke-width:1.8!important; stroke-linecap:round!important; stroke-linejoin:round!important; } /* The Hub has only four manager destinations, so its controls can breathe more without becoming oversized. HiwiLog keeps the same state language at the denser application-navigation rhythm. */ body.hub-manager-mode #hubSidebar .sidebar-nav{gap:.55rem!important} body.hub-manager-mode #hubSidebar .nav-link{ min-height:3.45rem!important; padding:.72rem .82rem!important; } body.hub-manager-mode #hubSidebar .hub-management-label{ margin-top:.72rem!important; margin-bottom:.08rem!important; } } /* The workspace CTA is intentionally flat. Remove both generations of the former cyan/blue halo, including the older ::before implementation. */ body.imb-institutional-aurora .hub-app-launcher::before, body.imb-institutional-aurora .hub-app-launcher::after, body.imb-institutional-aurora .launcher-key-academic_event_navigator::before, body.imb-institutional-aurora .launcher-key-hiwilog::before{ content:none!important; display:none!important; background:none!important; box-shadow:none!important; } body.imb-institutional-aurora .launcher-open-pill, body.imb-institutional-aurora .launcher-open-pill:hover, body.imb-institutional-aurora .launcher-open-pill:focus-visible{ box-shadow:none!important; filter:none!important; } /* ===================================================================== Lean design foundation · pass 04 Sidebar alignment + canonical account/footer controls. One spacing, profile and sign-out grammar across Digital Hub + HiwiLog. ===================================================================== */ :root{ --ia-account-bg:rgba(255,255,255,.56); --ia-account-border:rgba(24,55,83,.11); --ia-account-shadow:0 2px 5px rgba(19,40,61,.022),0 5px 13px rgba(19,40,61,.034),inset 0 1px 0 rgba(255,255,255,.78); } [data-theme="dark"]{ --ia-account-bg:rgba(18,38,56,.62); --ia-account-border:rgba(176,210,234,.13); --ia-account-shadow:0 3px 8px rgba(0,0,0,.13),0 7px 16px rgba(0,0,0,.10),inset 0 1px 0 rgba(255,255,255,.04); } /* Desktop account actions belong to the sidebar. The existing compact account control remains available at responsive breakpoints through the suite shell. */ body.imb-institutional-aurora .imb-suite-signout{display:none!important} @media(min-width:821px){ /* Give the institutional logo divider and the app identity room to breathe. */ body.imb-institutional-aurora .sidebar-brand-block .brand-row{ padding-bottom:.78rem!important; border-bottom:1px solid var(--line)!important; } body.imb-institutional-aurora .sidebar-brand-block .brand-copy{ padding-top:.62rem!important; padding-bottom:.12rem!important; } /* Section labels belong visually to the controls below them, not halfway between two groups. */ body.imb-institutional-aurora .sidebar-section-label{ margin:0!important; padding:.68rem .72rem .14rem!important; line-height:1.1!important; } body.imb-institutional-aurora .sidebar-section-label + .nav-link{margin-top:0!important} body.hub-manager-mode #hubSidebar .sidebar-nav{gap:.42rem!important} body.hub-manager-mode #hubSidebar .hub-management-label{ /* Lower the Management heading into the visual group while keeping the first management control close beneath it. */ margin-top:2.5rem!important; margin-bottom:-1.78rem!important; } /* Canonical account block. Digital Hub and HiwiLog now share the exact same dimensions, depth and type hierarchy. */ body.imb-institutional-aurora .sidebar-footer{ display:grid!important; gap:.45rem!important; padding:.72rem 0 0!important; border-top:1px solid var(--line)!important; background:transparent!important; box-shadow:none!important; } body.imb-institutional-aurora .sidebar-footer .profile-card{ display:flex!important; align-items:center!important; justify-content:flex-start!important; gap:.66rem!important; min-height:3.25rem!important; margin:0!important; padding:.55rem .62rem!important; border:1px solid var(--ia-account-border)!important; border-radius:.8rem!important; background:var(--ia-account-bg)!important; box-shadow:var(--ia-account-shadow)!important; backdrop-filter:none!important; } body.imb-institutional-aurora .sidebar-footer .profile-card .avatar{ width:2.28rem!important;height:2.28rem!important;flex:0 0 2.28rem!important; border:1px solid color-mix(in srgb,var(--accent) 12%,var(--line))!important; box-shadow:none!important; } body.imb-institutional-aurora .sidebar-footer .profile-name{font-size:.78rem!important;line-height:1.2!important} body.imb-institutional-aurora .sidebar-footer .profile-role{font-size:.61rem!important;line-height:1.2!important} body.imb-institutional-aurora .sidebar-footer .suite-sidebar-signout{ width:100%!important; min-height:2.72rem!important; display:flex!important; align-items:center!important; justify-content:flex-start!important; gap:.62rem!important; margin:0!important; padding:.54rem .68rem!important; border:1px solid var(--ia-nav-rest-border)!important; border-radius:.76rem!important; background:var(--ia-nav-rest-bg)!important; color:var(--ia-nav-text)!important; box-shadow:var(--ia-nav-rest-shadow)!important; text-decoration:none!important; font-size:.74rem!important; font-weight:700!important; line-height:1!important; cursor:pointer!important; transition:background .16s ease,border-color .16s ease,box-shadow .16s ease,color .16s ease,transform .16s ease!important; } body.imb-institutional-aurora .sidebar-footer .suite-sidebar-signout:hover{ background:var(--ia-nav-hover-bg)!important; border-color:var(--ia-nav-hover-border)!important; color:var(--ia-nav-hover-ink)!important; box-shadow:var(--ia-nav-hover-shadow)!important; transform:translateY(-1px)!important; } body.imb-institutional-aurora .sidebar-footer .suite-sidebar-signout:active{ transform:translateY(0)!important; box-shadow:var(--ia-nav-pressed-shadow)!important; } body.imb-institutional-aurora .sidebar-footer .suite-sidebar-signout:focus-visible{ outline:none!important; border-color:color-mix(in srgb,var(--ia-nav-active-rule) 48%,var(--ia-nav-rest-border))!important; box-shadow:var(--ia-nav-hover-shadow),var(--focus)!important; } body.imb-institutional-aurora .suite-signout-icon{ display:grid!important;place-items:center!important;width:1.7rem!important;height:1.7rem!important;flex:0 0 1.7rem!important; color:currentColor!important; } body.imb-institutional-aurora .suite-signout-icon svg{width:1.18rem!important;height:1.18rem!important;display:block!important} /* A collapsed rail is navigation, not a tiny app launcher. Remove all app mini-icons so Hub and HiwiLog collapse to the same geometry. */ body.imb-institutional-aurora .app-shell.sidebar-collapsed .sidebar-brand-block{display:none!important} body.imb-institutional-aurora .app-shell.sidebar-collapsed .sidebar-top{ flex-direction:column!important; align-items:center!important; justify-content:flex-start!important; gap:0!important; } body.imb-institutional-aurora .app-shell.sidebar-collapsed .brand-logo-mini{display:none!important} body.imb-institutional-aurora .app-shell.sidebar-collapsed .sidebar-nav{margin-top:.7rem!important} body.imb-institutional-aurora .app-shell.sidebar-collapsed .sidebar-footer .suite-sidebar-signout{display:none!important} } @media(min-width:821px){ /* Hub has ID-scoped responsive rules in hub.css, so repeat the canonical pass-04 spacing with equal/higher specificity here. */ body.imb-institutional-aurora #hubSidebar .sidebar-brand-block .brand-row{ padding:0 0 .78rem!important; border-bottom:1px solid var(--line)!important; } body.imb-institutional-aurora #hubSidebar .sidebar-brand-block .brand-copy{ padding:.62rem .15rem .12rem!important; } body.imb-institutional-aurora #appView.app-shell.sidebar-collapsed #hubSidebar .sidebar-brand-block{display:none!important} body.imb-institutional-aurora #appView.app-shell.sidebar-collapsed #hubSidebar .brand-logo-mini{display:none!important} } /* v0.10.57 · Sidebar rail integrity and shared brand-copy support */ body.imb-institutional-aurora .brand-copy span{display:block} @media(min-width:821px){ body.imb-institutional-aurora .app-shell.sidebar-collapsed{grid-template-columns:5.1rem minmax(0,1fr)!important} body.imb-institutional-aurora .app-shell.sidebar-collapsed .app-sidebar{ padding:.6rem .5rem!important; overflow:visible!important; } body.imb-institutional-aurora .app-shell.sidebar-collapsed .sidebar-nav, body.imb-institutional-aurora .app-shell.sidebar-collapsed .sidebar-footer{overflow:visible!important} body.imb-institutional-aurora .app-shell.sidebar-collapsed .nav-link{ width:100%!important; max-width:100%!important; min-width:0!important; box-sizing:border-box!important; } } /* v0.10.58 · Sidebar micro-parity pass Final rail/identity corrections shared by Digital Hub and HiwiLog. */ :root{ --imb-sidebar-avatar-bg:color-mix(in srgb,var(--accent) 9%,var(--surface)); --imb-sidebar-avatar-border:color-mix(in srgb,var(--accent) 22%,var(--line)); --imb-sidebar-avatar-ink:var(--accent); } [data-theme="dark"]{ --imb-sidebar-avatar-bg:color-mix(in srgb,var(--accent) 16%,var(--surface-raised)); --imb-sidebar-avatar-border:color-mix(in srgb,var(--accent) 28%,var(--line)); --imb-sidebar-avatar-ink:var(--accent); } body.imb-institutional-aurora .sidebar-footer .profile-card .avatar{ background:var(--imb-sidebar-avatar-bg)!important; border:1px solid var(--imb-sidebar-avatar-border)!important; color:var(--imb-sidebar-avatar-ink)!important; box-shadow:none!important; } @media(min-width:821px){ /* Keep the active rail identical in expanded and collapsed states. */ body.imb-institutional-aurora .app-shell.sidebar-collapsed .nav-link.active::before{ top:.45rem!important; bottom:.45rem!important; height:auto!important; min-height:0!important; left:-.12rem!important; width:3px!important; border-radius:999px!important; } } /* v0.10.56 · HiwiLog flat-depth pass 11 HiwiLog follows the same lean depth language as Digital Hub and Event Navigator: flat theme-aware fills, no colored halos/gradients, and neutral low-elevation shadows. Role-based visibility and application behavior are intentionally untouched. */ body#hiwiLogApp{ --hiwi-flat-shadow:0 3px 10px rgba(19,40,61,.055); --hiwi-flat-shadow-hover:0 6px 16px rgba(19,40,61,.075); --hiwi-flat-shadow-strong:0 8px 20px rgba(19,40,61,.085); } [data-theme="dark"] body#hiwiLogApp, html[data-theme="dark"] body#hiwiLogApp{ --hiwi-flat-shadow:0 3px 10px rgba(0,0,0,.18); --hiwi-flat-shadow-hover:0 6px 16px rgba(0,0,0,.24); --hiwi-flat-shadow-strong:0 8px 20px rgba(0,0,0,.28); } /* KPI cards: retain the useful blue edge, remove the decorative colored corner. */ body#hiwiLogApp .metric-card{ background:var(--surface-raised)!important; background-image:none!important; border-color:var(--line)!important; box-shadow:var(--hiwi-flat-shadow)!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; } body#hiwiLogApp .metric-card::before{ background:var(--accent)!important; } body#hiwiLogApp .metric-card::after{ display:none!important; content:none!important; background:none!important; } /* Remove decorative colored light pools from page hero/action areas. */ body#hiwiLogApp .workspace-hero, body#hiwiLogApp .page-intro{ background:var(--surface-raised)!important; background-image:none!important; box-shadow:var(--hiwi-flat-shadow)!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; } body#hiwiLogApp .workspace-hero::after, body#hiwiLogApp .page-intro::after{ display:none!important; content:none!important; background:none!important; } /* Workspace/report cards: flat surfaces, no cyan light blobs on their edges. */ body#hiwiLogApp .workspace-launcher, body#hiwiLogApp .report-launch-card, body#hiwiLogApp .person-card, body#hiwiLogApp .register-card, body#hiwiLogApp .project-card, body#hiwiLogApp .approval-card, body#hiwiLogApp .work-plan-card, body#hiwiLogApp .manager-plan-card, body#hiwiLogApp .command-tile, body#hiwiLogApp .mini-launcher, body#hiwiLogApp .saved-report-card{ background:var(--surface-raised)!important; background-image:none!important; box-shadow:var(--hiwi-flat-shadow)!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; } body#hiwiLogApp .workspace-launcher::after, body#hiwiLogApp .report-launch-card::after{ display:none!important; content:none!important; background:none!important; } body#hiwiLogApp .workspace-launcher:hover, body#hiwiLogApp .report-launch-card:hover, body#hiwiLogApp .person-card:hover, body#hiwiLogApp .register-card:hover, body#hiwiLogApp .project-card:hover, body#hiwiLogApp .approval-card:hover, body#hiwiLogApp .work-plan-card:hover, body#hiwiLogApp .manager-plan-card:hover, body#hiwiLogApp .command-tile:hover, body#hiwiLogApp .mini-launcher:hover{ box-shadow:var(--hiwi-flat-shadow-hover)!important; } body#hiwiLogApp .workspace-launcher.primary, body#hiwiLogApp .workspace-launcher.attention{ background:var(--surface-raised)!important; background-image:none!important; } body#hiwiLogApp .report-launch-card.selected{ background:var(--accent-soft)!important; background-image:none!important; border-color:color-mix(in srgb,var(--accent) 48%,var(--line))!important; box-shadow:var(--hiwi-flat-shadow-hover)!important; } /* Icon tiles may use a flat accent-soft fill, never a colored glow. */ body#hiwiLogApp .workspace-launcher-icon, body#hiwiLogApp .report-launch-icon, body#hiwiLogApp .mini-launcher-icon, body#hiwiLogApp .empty-icon, body#hiwiLogApp .attention-icon, body#hiwiLogApp .planner-help-icon{ background:var(--accent-soft)!important; background-image:none!important; box-shadow:none!important; } /* Canonical button language: flat fills + neutral depth only. */ body#hiwiLogApp .btn, body#hiwiLogApp .icon-button, body#hiwiLogApp .day-carousel-nav, body#hiwiLogApp .modal-close, body#hiwiLogApp .sidebar-toggle{ background-image:none!important; filter:none!important; text-shadow:none!important; box-shadow:var(--hiwi-flat-shadow)!important; } body#hiwiLogApp .btn:hover, body#hiwiLogApp .icon-button:hover, body#hiwiLogApp .day-carousel-nav:hover, body#hiwiLogApp .modal-close:hover, body#hiwiLogApp .sidebar-toggle:hover{ box-shadow:var(--hiwi-flat-shadow-hover)!important; } body#hiwiLogApp .btn-primary, body#hiwiLogApp .quick-add, body#hiwiLogApp #quickAddTop, body#hiwiLogApp .launcher-open-pill{ background:var(--accent)!important; background-image:none!important; border-color:var(--accent)!important; box-shadow:var(--hiwi-flat-shadow)!important; } body#hiwiLogApp .btn-primary:hover, body#hiwiLogApp .quick-add:hover, body#hiwiLogApp #quickAddTop:hover, body#hiwiLogApp .launcher-open-pill:hover{ background:var(--accent-hover)!important; border-color:var(--accent-hover)!important; box-shadow:var(--hiwi-flat-shadow-hover)!important; } body#hiwiLogApp .btn-secondary, body#hiwiLogApp .btn-ghost, body#hiwiLogApp .btn-quiet{ background:var(--surface-raised)!important; background-image:none!important; box-shadow:var(--hiwi-flat-shadow)!important; } body#hiwiLogApp .btn-danger{ background-image:none!important; box-shadow:var(--hiwi-flat-shadow)!important; } body#hiwiLogApp .btn:focus-visible, body#hiwiLogApp .icon-button:focus-visible, body#hiwiLogApp .workspace-launcher:focus-visible, body#hiwiLogApp .report-launch-card:focus-visible{ outline:2px solid var(--accent)!important; outline-offset:2px!important; box-shadow:var(--hiwi-flat-shadow)!important; } /* Controls that previously used blue/teal glow shadows keep state color but neutral depth. */ body#hiwiLogApp .segmented-control button.active, body#hiwiLogApp .segmented-control button[aria-pressed="true"], body#hiwiLogApp .ui-language-toggle button.active, body#hiwiLogApp .ui-language-toggle button[aria-pressed="true"], body#hiwiLogApp .ui-theme-toggle button.active, body#hiwiLogApp .ui-theme-toggle button[aria-pressed="true"], body#hiwiLogApp .adaptive-date-day.selected, body#hiwiLogApp .calendar-day.selected, body#hiwiLogApp .day-chip.selected, body#hiwiLogApp .timesheet-month-grid button.active, body#hiwiLogApp .adaptive-month-grid button.active, body#hiwiLogApp .calendar-month-grid button.active, body#hiwiLogApp .project-choice.active, body#hiwiLogApp .reviewer-choice.selected, body#hiwiLogApp .plan-block-summary-card.active{ box-shadow:var(--hiwi-flat-shadow)!important; } body#hiwiLogApp .segmented-control button.active, body#hiwiLogApp .segmented-control button[aria-pressed="true"]{ background:var(--surface-raised)!important; background-image:none!important; } /* Neutralize color-mixed control halos while preserving semantic borders/fills. */ body#hiwiLogApp .timer-card.running, body#hiwiLogApp .week-day.today, body#hiwiLogApp .calendar-day.today, body#hiwiLogApp .adaptive-date-day.today:not(.selected), body#hiwiLogApp .checkbox-filter input[type="checkbox"]:checked{ box-shadow:none!important; } /* v0.10.56 · HiwiLog hierarchy pass 12 Final refinement of HiwiLog depth language: - action controls use only very small neutral shadows - no colored halos/light pools on interactive cards - nested information tiles use flat grouped bands with separators instead of card-on-card shadows - semantic state colors remain available for status communication Role-based navigation and workflow behavior are intentionally untouched. */ body#hiwiLogApp{ --hiwi-action-shadow:0 1px 2px rgba(19,40,61,.08),0 2px 5px rgba(19,40,61,.045); --hiwi-action-shadow-hover:0 2px 5px rgba(19,40,61,.09),0 4px 9px rgba(19,40,61,.045); --hiwi-parent-shadow:0 2px 7px rgba(19,40,61,.055); --hiwi-group-fill:color-mix(in srgb,var(--surface-sunken) 46%,var(--surface-raised)); } [data-theme="dark"] body#hiwiLogApp, html[data-theme="dark"] body#hiwiLogApp{ --hiwi-action-shadow:0 1px 2px rgba(0,0,0,.22),0 2px 5px rgba(0,0,0,.12); --hiwi-action-shadow-hover:0 2px 5px rgba(0,0,0,.24),0 4px 9px rgba(0,0,0,.14); --hiwi-parent-shadow:0 2px 7px rgba(0,0,0,.18); --hiwi-group-fill:color-mix(in srgb,var(--surface-sunken) 58%,var(--surface-raised)); } /* Action controls: preserve depth, but make it tiny and strictly neutral. */ body#hiwiLogApp .content .btn, body#hiwiLogApp .workspace-hero .btn, body#hiwiLogApp .page-intro .btn, body#hiwiLogApp .report-builder-actions .btn, body#hiwiLogApp .button-row .btn, body#hiwiLogApp .work-plan-actions .btn, body#hiwiLogApp .approval-actions .btn, body#hiwiLogApp .hiwi-log-actions .btn, body#hiwiLogApp .management-actions .btn, body#hiwiLogApp .plan-editor-actions .btn, body#hiwiLogApp .adaptive-date-shortcuts .btn, body#hiwiLogApp .day-carousel-nav, body#hiwiLogApp .icon-button, body#hiwiLogApp .modal-close{ background-image:none!important; filter:none!important; text-shadow:none!important; box-shadow:var(--hiwi-action-shadow)!important; } body#hiwiLogApp .content .btn:hover, body#hiwiLogApp .workspace-hero .btn:hover, body#hiwiLogApp .page-intro .btn:hover, body#hiwiLogApp .report-builder-actions .btn:hover, body#hiwiLogApp .button-row .btn:hover, body#hiwiLogApp .work-plan-actions .btn:hover, body#hiwiLogApp .approval-actions .btn:hover, body#hiwiLogApp .hiwi-log-actions .btn:hover, body#hiwiLogApp .management-actions .btn:hover, body#hiwiLogApp .plan-editor-actions .btn:hover, body#hiwiLogApp .adaptive-date-shortcuts .btn:hover, body#hiwiLogApp .day-carousel-nav:hover, body#hiwiLogApp .icon-button:hover, body#hiwiLogApp .modal-close:hover{ box-shadow:var(--hiwi-action-shadow-hover)!important; filter:none!important; } body#hiwiLogApp .content .btn::before, body#hiwiLogApp .content .btn::after, body#hiwiLogApp .workspace-hero .btn::before, body#hiwiLogApp .workspace-hero .btn::after, body#hiwiLogApp .page-intro .btn::before, body#hiwiLogApp .page-intro .btn::after{ display:none!important; content:none!important; box-shadow:none!important; background:none!important; filter:none!important; } body#hiwiLogApp .btn-primary, body#hiwiLogApp .quick-add, body#hiwiLogApp #quickAddTop, body#hiwiLogApp .launcher-open-pill{ background:var(--accent)!important; background-image:none!important; border-color:var(--accent)!important; box-shadow:var(--hiwi-action-shadow)!important; } body#hiwiLogApp .btn-primary:hover, body#hiwiLogApp .quick-add:hover, body#hiwiLogApp #quickAddTop:hover, body#hiwiLogApp .launcher-open-pill:hover{ background:var(--accent-hover)!important; background-image:none!important; border-color:var(--accent-hover)!important; box-shadow:var(--hiwi-action-shadow-hover)!important; } /* Interactive launcher/report cards: no colored light pools and very restrained neutral depth. */ body#hiwiLogApp .workspace-launcher, body#hiwiLogApp .report-launch-card, body#hiwiLogApp .command-tile, body#hiwiLogApp .mini-launcher{ background:var(--surface-raised)!important; background-image:none!important; box-shadow:var(--hiwi-parent-shadow)!important; filter:none!important; } body#hiwiLogApp .workspace-launcher::before, body#hiwiLogApp .workspace-launcher::after, body#hiwiLogApp .report-launch-card::before, body#hiwiLogApp .report-launch-card::after, body#hiwiLogApp .command-tile::after, body#hiwiLogApp .mini-launcher::after{ box-shadow:none!important; filter:none!important; } body#hiwiLogApp .workspace-launcher:hover, body#hiwiLogApp .report-launch-card:hover, body#hiwiLogApp .command-tile:hover, body#hiwiLogApp .mini-launcher:hover{ box-shadow:var(--hiwi-action-shadow-hover)!important; transform:translateY(-1px)!important; } /* Card-on-card hierarchy replacement. One quiet information band + 1px separators is clearer than many floating mini-cards. */ body#hiwiLogApp .person-card-metrics, body#hiwiLogApp .register-card-facts, body#hiwiLogApp .work-plan-metrics, body#hiwiLogApp .manager-plan-summary, body#hiwiLogApp .detail-fact-grid, body#hiwiLogApp .approval-review-summary, body#hiwiLogApp .manager-session-summary, body#hiwiLogApp .progress-copy, body#hiwiLogApp .report-result-meta, body#hiwiLogApp .picker-overview, body#hiwiLogApp .time-preview{ gap:1px!important; padding:0!important; overflow:hidden!important; border:1px solid var(--line)!important; border-radius:.82rem!important; background:var(--line)!important; box-shadow:none!important; } body#hiwiLogApp .person-card-metrics>div, body#hiwiLogApp .register-card-facts>div, body#hiwiLogApp .work-plan-metrics>div, body#hiwiLogApp .manager-plan-summary>div, body#hiwiLogApp .detail-fact-grid>div, body#hiwiLogApp .approval-review-summary>div, body#hiwiLogApp .manager-session-summary>div, body#hiwiLogApp .progress-copy>div, body#hiwiLogApp .report-result-meta>div, body#hiwiLogApp .picker-overview>div, body#hiwiLogApp .time-preview>div{ margin:0!important; border:0!important; border-radius:0!important; background:var(--hiwi-group-fill)!important; background-image:none!important; box-shadow:none!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; } /* Parent cards remain the only elevated object in a card group. */ body#hiwiLogApp .person-card, body#hiwiLogApp .register-card, body#hiwiLogApp .work-plan-card, body#hiwiLogApp .manager-plan-card, body#hiwiLogApp .project-card, body#hiwiLogApp .approval-card, body#hiwiLogApp .approval-row, body#hiwiLogApp .manager-session-card{ box-shadow:var(--hiwi-parent-shadow)!important; } body#hiwiLogApp .person-card:hover, body#hiwiLogApp .register-card:hover, body#hiwiLogApp .work-plan-card:hover, body#hiwiLogApp .manager-plan-card:hover, body#hiwiLogApp .project-card:hover, body#hiwiLogApp .approval-card:hover, body#hiwiLogApp .manager-session-card:hover{ box-shadow:var(--hiwi-action-shadow-hover)!important; transform:translateY(-1px)!important; } /* Small chips are identified by border/fill, not inset shadow. */ body#hiwiLogApp .pill, body#hiwiLogApp .signal, body#hiwiLogApp .plan-project-chip, body#hiwiLogApp .register-card-codes strong, body#hiwiLogApp .register-card-codes span{ box-shadow:none!important; filter:none!important; } /* Selected segmented controls rely on fill + border, not floating mini-card shadows. */ body#hiwiLogApp .segmented-control button.active, body#hiwiLogApp .segmented-control button[aria-pressed="true"], body#hiwiLogApp #planMonitorTabs button.active, body#hiwiLogApp #projectLifecycleToggle button.active, body#hiwiLogApp .timesheet-month-grid button.active, body#hiwiLogApp .adaptive-picker-option.active, body#hiwiLogApp .project-choice.active{ box-shadow:none!important; filter:none!important; } /* Responsive grouped bands keep the same hierarchy when they stack. */ @media(max-width:720px){ body#hiwiLogApp .person-card-metrics, body#hiwiLogApp .person-card.operational .person-card-metrics, body#hiwiLogApp .register-card-facts, body#hiwiLogApp .detail-fact-grid, body#hiwiLogApp .work-plan-metrics, body#hiwiLogApp .manager-plan-summary, body#hiwiLogApp .approval-review-summary, body#hiwiLogApp .manager-session-summary, body#hiwiLogApp .report-result-meta{ gap:1px!important; } }