/* HUBIBU common shell. Colours: brand (tile, top line), action (text and buttons on white), tint (selected backgrounds). */
:root{--hb-brand:#102d4e;--hb-action:#102d4e;--hb-tint:#eef2f6;--hb-ink:#17211f;--hb-muted:#56645f;--hb-line:#d8e0dd;--hb-surface:#fff;--hb-shadow:0 12px 32px rgba(16,45,78,.16)}
[data-hb-app=work]{--hb-brand:#0078d4;--hb-action:#0067c0;--hb-tint:#e9f3fa}[data-hb-app=design]{--hb-brand:#7826c7;--hb-action:#7826c7;--hb-tint:#f3ecf9}[data-hb-app=portal]{--hb-brand:#009e9f;--hb-action:#007f80;--hb-tint:#e2f4f2}[data-hb-app=share]{--hb-brand:#00b5ea;--hb-action:#006b9b;--hb-tint:#e5f7fc}[data-hb-app=time]{--hb-brand:#d82987;--hb-action:#b51a6e;--hb-tint:#fbe9f3}[data-hb-app=field]{--hb-brand:#3f9b45;--hb-action:#2e7d32;--hb-tint:#e8f4e9}[data-hb-app=connect]{--hb-brand:#925835;--hb-action:#925835;--hb-tint:#f6ece6}[data-hb-app=insights]{--hb-brand:#636e7a;--hb-action:#636e7a;--hb-tint:#eef0f3}
.suite-shell-header{display:flex;align-items:center;gap:16px;min-height:64px;padding:8px 24px;background:var(--hb-surface);color:var(--hb-ink);border-top:3px solid var(--hb-brand);border-bottom:1px solid var(--hb-line);position:relative;z-index:30;box-sizing:border-box;flex-wrap:wrap}
.topbar.suite-shell-header{height:auto;min-height:64px}
.suite-shell-brand{display:inline-flex!important;align-items:center!important;gap:10px;flex-shrink:0;text-decoration:none;color:var(--hb-action)!important}
.suite-shell-brand .suite-shell-tile{width:36px!important;height:36px!important;border-radius:9px;display:block;object-fit:cover}
.suite-shell-name{font-weight:700;font-size:22px;line-height:1;letter-spacing:-.01em;text-transform:lowercase;color:var(--hb-action)}
.suite-shell-hubibu{width:76px;height:26px;object-fit:contain}
.suite-shell-header nav{display:flex;align-items:center;gap:4px 18px;flex-wrap:wrap;margin-left:8px}
.suite-shell-header nav a{text-decoration:none;color:var(--hb-muted);font-weight:600;font-size:14px;padding:6px 2px;border-bottom:2px solid transparent}
.suite-shell-header nav a:hover{color:var(--hb-ink)}.suite-shell-header nav a[aria-current]{color:var(--hb-action);border-bottom-color:var(--hb-brand)}
.suite-shell-apps,.suite-shell-account{position:relative;min-width:0}
.suite-shell-apps>summary,.suite-shell-account>summary{list-style:none;cursor:pointer}.suite-shell-apps>summary::-webkit-details-marker,.suite-shell-account>summary::-webkit-details-marker{display:none}
.suite-shell-iconbtn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:8px;color:var(--hb-muted)}
.suite-shell-iconbtn:hover,.suite-shell-apps[open]>.suite-shell-iconbtn{background:var(--hb-tint);color:var(--hb-action)}
.suite-shell-apps-menu{position:absolute;left:0;top:calc(100% + 8px);width:min(420px,calc(100vw - 32px));box-sizing:border-box;background:var(--hb-surface);color:var(--hb-ink);border:1px solid var(--hb-line);border-radius:12px;padding:14px;box-shadow:var(--hb-shadow);z-index:60}
.suite-shell-menu-title{margin:0 4px 8px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--hb-muted)}
.suite-shell-apps-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
.suite-shell-app{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 4px;border-radius:8px;text-decoration:none;color:var(--hb-ink);text-align:center;min-width:0}
.suite-shell-app:hover,.suite-shell-app[aria-current]{background:var(--hb-tint)}
.suite-shell-app .suite-shell-tile{width:44px;height:44px;border-radius:11px;margin-bottom:4px}
.suite-shell-app strong{font-size:14px}.suite-shell-app span{font-size:12px;color:var(--hb-muted);overflow-wrap:anywhere}
.suite-shell-soon{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:10px 4px 0;padding-top:10px;border-top:1px solid var(--hb-line);font-size:13px;color:var(--hb-muted)}
.suite-shell-soon>span:first-child{font-weight:600}
.suite-shell-soon-app{display:inline-flex;align-items:center;gap:6px;color:var(--hb-muted);text-decoration:none}
.suite-shell-soon-app .suite-shell-tile{width:24px;height:24px;border-radius:6px;opacity:.8}
.suite-shell-allapps{display:block;margin:10px 4px 0;font-size:13px;font-weight:600;color:var(--hb-action)}
.suite-shell-controls{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-left:auto;min-width:0}
.suite-shell-controls select{width:auto;max-width:110px;min-height:36px;border:1px solid var(--hb-line);border-radius:6px;background:var(--hb-surface);color:inherit;padding:6px;font:inherit;font-size:13px}
.suite-shell-account>summary{display:flex;align-items:center;gap:8px;border:1px solid var(--hb-line);border-radius:999px;padding:4px 14px 4px 4px;max-width:240px;min-height:40px;box-sizing:border-box;font:inherit;font-size:14px;font-weight:600}
.suite-shell-account[open]>summary,.suite-shell-account>summary:hover{border-color:var(--hb-action)}
.suite-shell-account-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.suite-shell-avatar{display:inline-flex;align-items:center;justify-content:center;flex:none;width:30px;height:30px;border-radius:50%;background:var(--hb-action);color:#fff;font-size:12px;font-weight:700;overflow:hidden}
.suite-shell-avatar[hidden]{display:none}.suite-shell-avatar img{width:100%;height:100%;object-fit:cover}
.suite-shell-account:has(.suite-shell-avatar[hidden])>summary{padding-left:14px}
.suite-shell-account-menu{position:absolute;right:0;top:calc(100% + 8px);width:min(290px,calc(100vw - 32px));box-sizing:border-box;background:var(--hb-surface);color:var(--hb-ink);border:1px solid var(--hb-line);border-radius:12px;padding:10px;box-shadow:var(--hb-shadow);z-index:60}
.suite-shell-account:not([open])>.suite-shell-account-menu,.suite-shell-apps:not([open])>.suite-shell-apps-menu{display:none}
.suite-shell-account-menu>a,.suite-shell-account-menu>button,.suite-shell-account-menu>form{display:flex;width:100%;box-sizing:border-box;margin:2px 0;min-height:38px;align-items:center;gap:8px;padding:0 10px;border-radius:6px;text-decoration:none;font-size:14px;color:var(--hb-ink)}
.suite-shell-account-menu>a:hover,.suite-shell-account-menu>button:hover{background:var(--hb-tint)}
.suite-shell-account-menu>button{border:0;background:none;font:inherit;text-align:left;cursor:pointer}
.suite-shell-account-menu>#logout,.suite-shell-account-menu>#suite-shell-logout{color:#b23a2e;border-top:1px solid var(--hb-line);border-radius:0 0 6px 6px;margin-top:6px}
.suite-shell-account-menu [hidden]{display:none!important}
.suite-shell-account-menu .hubibu-identity{max-width:100%;margin:0 0 6px;padding:6px 10px 10px;border-bottom:1px solid var(--hb-line)}
.suite-shell-account-menu .hubibu-account-avatar{display:none}.suite-shell-account-menu .hubibu-identity-label{display:grid}
.suite-shell-header :focus-visible{outline:3px solid var(--hb-brand);outline-offset:2px}
.site-header.suite-shell-header{background:var(--hb-surface);color:var(--hb-ink)}.site-header.suite-shell-header>.wrap{display:contents}.site-header.suite-shell-header .header-actions{position:static;display:contents;pointer-events:auto;padding:0}.site-header.suite-shell-header .brand{align-items:center}.site-header.suite-shell-header .brand img{border-radius:9px}.site-header.suite-shell-header .profile-menu-wrap{pointer-events:auto}.portal-project-count{color:#007f80;font-weight:600}.work-suite-footer .work-powered{display:inline-flex;align-items:center;gap:7px}.suite-shell-portal-account .profile-menu{right:0}
@media(max-width:700px){.suite-shell-header{padding:8px 16px;gap:10px}.suite-shell-header nav{order:3;width:100%;gap:4px 14px}.suite-shell-controls{gap:8px;max-width:100%}.suite-shell-account>summary{max-width:170px}.suite-shell-account-name{max-width:96px}.suite-shell-name{font-size:20px}.suite-shell-header .header-actions .user-pill{max-width:160px}.suite-shell-apps-menu{position:fixed;left:16px;right:16px;top:72px;width:auto}.projects-header h2{white-space:normal}}