/* WORKHOUR | Fil: workhouse.css | Version: 1.25.3 | Senast ändrad: 2026-10-02 */
/*
 * WORKHOUR
 * Fil: workhouse.css
 * Version: 1.25.2
 * Senast ändrad: 2026-10-01
 *
 * Ändring 1.25.2:
 * - Inställningar använder samma 900 px desktopbredd som övriga Workhour-översikter.
 * - ÄTA:s projektkontext fyller hela ÄTA-översiktens bredd.
 *
 * Ändring 1.25.1:
 * - SlideMotion-stacken fungerar även för kapslade vyer, exempelvis Projekt översikt -> detalj.
 * - Förhindrar att inkommande projektdetalj hamnar i dokumentflödet under översikten i PWA-läge.
 */
/* workhouse-web 1.25: static extraction overrides.
   The visual base above is the compiled CSS from Workhour version 42. */

@font-face { font-family: "Manrope"; font-style: normal; font-display: swap; font-weight: 200 800; src: url("../fonts/manrope-latin-ext-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Manrope"; font-style: normal; font-display: swap; font-weight: 200 800; src: url("../fonts/manrope-latin-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

.app-view { display: none; }
.app-view.active { display: block; }
.onboarding-shell { display:none; position:fixed; inset:0; z-index:5000; overflow:hidden; background:#65030d; color:#fff; }
.onboarding-shell.open { display:block; }
.onboarding-card { position:relative; width:100%; height:100dvh; min-height:100%; overflow:hidden; background:#65030d; }
.onboarding-visual { position:absolute; inset:0; z-index:0; overflow:hidden; background:#65030d; }
.onboarding-image { width:100%; height:100%; object-fit:cover; object-position:center top; display:block; transition:opacity .18s ease; }
.onboarding-card::after { content:""; position:absolute; z-index:1; inset:auto 0 0; height:58%; pointer-events:none; background:linear-gradient(180deg,rgba(83,0,9,0) 0%,rgba(91,0,10,.68) 18%,#65030d 48%,#4d0008 100%); }
.onboarding-language { position:absolute; z-index:5; top:max(22px,env(safe-area-inset-top)); right:max(20px,env(safe-area-inset-right)); }
.onboarding-language-trigger { display:inline-flex; align-items:center; gap:9px; min-height:42px; border:1px solid #ffffff55; background:rgba(53,0,8,.44); color:#fff; border-radius:999px; padding:9px 14px; font-size:13px; font-weight:800; backdrop-filter:blur(16px) saturate(120%); -webkit-backdrop-filter:blur(16px) saturate(120%); box-shadow:0 8px 28px #2600072b; }
.onboarding-language-trigger i:first-child { font-size:15px; }
.onboarding-language-trigger i:last-child { font-size:10px; opacity:.88; }
.onboarding-language-popup { position:absolute; top:50px; right:0; width:min(300px,calc(100vw - 36px)); padding:10px; border:1px solid #ffffff35; border-radius:18px; background:#fff; color:#17202a; text-align:left; box-shadow:0 22px 70px #12000470; }
.onboarding-language-popup[hidden] { display:none !important; }
.onboarding-language-popup-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:4px 4px 8px 8px; }
.onboarding-language-popup-head strong { font-size:13px; }
.onboarding-language-popup-head button { display:grid; place-items:center; width:30px; height:30px; border:0; border-radius:50%; background:#f2f4f6; color:#17202a; }
.onboarding-language-list { display:grid; gap:3px; }
.onboarding-language-list > button { width:100%; display:flex; align-items:center; gap:12px; border:0; border-radius:12px; background:transparent; color:#17202a; padding:10px 11px; text-align:left; }
.onboarding-language-list > button:hover { background:#f5f6f8; }
.onboarding-language-list > button > span { flex:1; display:flex; min-width:0; flex-direction:column; }
.onboarding-language-list strong { font-size:13px; }
.onboarding-language-list small { margin-top:1px; color:#707a83; font-size:10px; }
.onboarding-language-list > button > i { visibility:hidden; color:var(--primary); font-size:12px; }
.onboarding-language-list > button.selected { background:color-mix(in srgb,var(--primary) 9%,#fff); }
.onboarding-language-list > button.selected > i { visibility:visible; }
.onboarding-content { position:absolute; z-index:3; left:0; right:0; bottom:0; padding:0 8.5vw calc(env(safe-area-inset-bottom) + 24px); text-align:left; }
.onboarding-copy { max-width:670px; }
.onboarding-logo { display:block; width:min(215px,52vw); height:auto; margin:0 0 14px; object-fit:contain; object-position:left center; }
.onboarding-kicker { display:block; margin-bottom:13px; font-size:11px; letter-spacing:.42em; font-weight:700; opacity:.94; }
.onboarding-accent { display:block; width:38px; height:3px; margin:0 0 18px; border-radius:99px; background:#ff5b59; }
.onboarding-step { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.onboarding-copy h1 { max-width:720px; margin:0 0 15px; color:#fff; font-size:clamp(36px,5.7vw,64px); line-height:1.02; letter-spacing:-.045em; font-weight:800; }
.onboarding-copy p { max-width:690px; margin:0; color:#fff; opacity:.95; font-size:clamp(17px,2.2vw,24px); line-height:1.42; }
.onboarding-actions { margin-top:25px; }
.onboarding-shell .onboard-next { width:100%; min-height:60px; border:0; border-radius:999px; background:#fff; color:#5e0710; font-size:20px; font-weight:800; box-shadow:0 12px 30px #26000640; }
.onboarding-auth { display:flex; justify-content:center; align-items:center; gap:22px; margin-top:18px; }
.onboarding-link { border:0; background:transparent; color:#fff; padding:8px 4px; font-size:15px; font-weight:600; }
.onboarding-divider { width:1px; height:22px; background:#ffffff66; }
.onboarding-dots { display:flex; justify-content:center; gap:11px; margin:24px 0 0; }
.onboarding-dots button { width:11px; height:11px; padding:0; border:0; border-radius:50%; background:#ffffff4f; transition:transform .18s ease,background .18s ease; cursor:pointer; box-shadow:none; }
.onboarding-dots button:hover { background:#ffffff8a; transform:scale(1.12); }
.onboarding-dots button.active { background:#fff; transform:scale(1.08); }
.onboarding-dots button:focus-visible { outline:2px solid #fff; outline-offset:4px; }
.onboarding-shell > .onboarding-dots { position:absolute; z-index:8; left:50%; bottom:max(10px,calc(env(safe-area-inset-bottom) + 6px)); margin:0; transform:translateX(-50%)!important; }
.onboard-reset { display:none; }
@media (max-width:899px) {
  .onboarding-shell { min-height:100dvh; }
  .onboarding-card { min-height:100dvh; }
  .onboarding-card::after { height:64%; }
  .onboarding-content {
    top:46%;
    bottom:0;
    display:flex;
    flex-direction:column;
    padding:0 8.5vw calc(env(safe-area-inset-bottom) + 20px);
  }
  .onboarding-copy { flex:0 0 auto; }
  .onboarding-logo { width:min(180px,47vw); margin-bottom:10px; }
  .onboarding-accent { margin-bottom:13px; }
  .onboarding-copy h1 { margin-bottom:11px; font-size:clamp(31px,8.45vw,46px); }
  .onboarding-copy p { font-size:clamp(15px,3.9vw,19px); line-height:1.38; }
  .onboarding-actions { margin-top:auto; padding-top:26px; }
  .onboarding-shell .onboard-next { min-height:56px; font-size:18px; }
  .onboarding-auth { margin-top:14px; }
  .onboarding-dots { margin-top:14px; }
  .onboarding-language { top:max(18px,env(safe-area-inset-top)); right:max(16px,env(safe-area-inset-right)); }
  .onboarding-language-trigger { min-height:40px; padding:8px 13px; }
}
@media (min-width:900px) {
  .onboarding-card { display:grid; grid-template-columns:minmax(0,58%) minmax(420px,42%); }
  .onboarding-visual { position:relative; grid-column:1; grid-row:1; }
  .onboarding-image { object-position:center 28%; }
  .onboarding-card::after { display:none; }
  .onboarding-content { position:relative; grid-column:2; grid-row:1; align-self:stretch; display:flex; flex-direction:column; justify-content:center; padding:90px clamp(46px,5vw,88px) 54px; background:radial-gradient(circle at 20% 10%,#9d101f 0,#6f0712 42%,#4d0008 100%); }
  .onboarding-language { top:28px; right:34px; }
  .onboarding-copy h1 { font-size:clamp(42px,4vw,64px); }
  .onboarding-copy p { font-size:clamp(18px,1.55vw,23px); }
  .onboarding-actions { margin-top:34px; }
  .onboarding-dots { margin-top:28px; }
}
.js-auth-settings { width:100%; display:flex; align-items:center; gap:10px; padding:13px 0; border:0; background:transparent; color:var(--foreground); text-align:left; }
.js-auth-settings span { flex:1; }
.auth-shell { display:none; position:fixed; inset:0; z-index:5100; background:rgba(20,27,38,.62); align-items:flex-end; justify-content:center; padding:18px; }
.auth-shell.open { display:flex; }
.auth-card { width:min(520px,100%); max-height:min(760px,calc(100dvh - 28px)); overflow:auto; position:relative; border-radius:28px; background:var(--card); color:var(--foreground); padding:30px 28px 26px; box-shadow:0 20px 70px rgba(0,0,0,.25); }
.auth-close { position:absolute; top:16px; right:16px; width:42px; height:42px; border-radius:50%; border:1px solid var(--line); background:var(--card); color:var(--foreground); font-size:18px; }
.auth-brand { color:var(--primary); font-weight:800; letter-spacing:.04em; font-size:18px; margin-bottom:28px; }
.auth-view { display:none; }
.auth-view.active { display:block; }
.auth-eyebrow { color:var(--primary); text-transform:uppercase; letter-spacing:.08em; font-size:12px; font-weight:700; }
.auth-view h1 { margin:8px 0 4px; font-size:32px; }
.auth-muted { color:var(--muted); margin:0 0 22px; }
.auth-view label { display:block; font-weight:700; margin:14px 0; }
.auth-view input { display:block; width:100%; margin-top:7px; border:1px solid var(--line); border-radius:14px; background:var(--input); color:var(--foreground); padding:13px 14px; font:inherit; }
.auth-view .save-btn { width:100%; margin-top:10px; }
.auth-link { border:0; background:transparent; color:var(--primary); font-weight:700; padding:12px 4px; cursor:pointer; }
.auth-footer { display:flex; justify-content:space-between; gap:12px; margin-top:18px; border-top:1px solid var(--line); padding-top:12px; }
.otp-input { letter-spacing:.55em; text-align:center; font-size:24px !important; }
@media (max-width:899px) { .auth-shell { padding:0; align-items:flex-end; } .auth-card { border-radius:26px 26px 0 0; padding:28px 22px calc(env(safe-area-inset-bottom) + 22px); max-height:calc(100dvh - env(safe-area-inset-top) - 12px); } .auth-view h1 { font-size:28px; } }
.js-show-onboarding { width:100%; display:flex; align-items:center; gap:10px; padding:13px 0; border:0; background:transparent; color:var(--foreground); text-align:left; }
.js-show-onboarding span { flex:1; }
@media (max-width:899px) {
  .onboarding-actions { display:flex; }
  .onboarding-actions .onboard-prev { visibility:hidden; }
}
body { min-height: 100vh; }
body > .min-h-screen { min-height: 100vh; display: flex; flex-direction: column; }
.page-shell { flex: 1 0 auto; }
.site-footer { flex: 0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:20px; max-width:1200px; width:100%; margin:0 auto; padding:20px 28px 24px; color:var(--muted-foreground); font-size:11px; }
.site-footer nav { display:flex; gap:18px; }
.site-footer a { color:inherit; text-decoration:none; }
.site-footer a:hover { color:var(--primary); }

/* Bootstrap 4 also owns the name .custom-select. Reset only its native-select
   dimensions so Workhour's project picker keeps the original card height. */
.custom-select {
  height: auto;
  min-height: 70px;
  line-height: normal;
  background-image: none;
  background-size: auto;
  appearance: none;
  -webkit-appearance: none;
}
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.back-icon { display: none; }
.back-brand .back-icon { display: block; width: 22px; height: 22px; color: var(--primary); }
.back-brand .brand-logo { display: none; }
.dark .brand-logo { content: url("../images/logo-white.png"); }
.theme-sun { display: none; }
.dark .theme-sun { display: block; }
.dark .theme-moon { display: none; }

/* Keep the specification visually inside the hero while giving both text
   levels sufficient contrast in light and dark mode. */
.project-specification {
  border-color: color-mix(in srgb, var(--primary) 34%, var(--border));
  background: color-mix(in srgb, var(--card) 82%, var(--primary) 18%);
}
.project-specification > div:first-child > strong { color: var(--accent-foreground); }
.project-specification p { color: var(--foreground); }

/* Font Awesome 6 is used for standard UI symbols while preserving Workhour sizing. */
.round-btn > i { font-size: 17px; }
.desktop-primary > i, .secondary-btn > i { width: 18px; text-align: center; font-size: 16px; }
.bottom-nav i { width: 20px; text-align: center; font-size: 18px; }
.nav-plus > i { font-size: 22px; }

.field-group { display: flex; flex-direction: column; min-width: 0; gap: 6px; }
.field-group > span { font-size: 11px; font-weight: 700; }
.field-group select { width: 100%; }
.form-dialog .field-group { border: 0; background: transparent; border-radius: 10px; padding: 0; }
.date-time-grid { grid-template-columns: minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr); }
.form-grid.three { grid-template-columns: repeat(3,minmax(0,1fr)); }

.mini-budget > [data-slot="progress"] { display: block; position: relative; height: 7px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb,var(--primary) 18%,transparent); }
.mini-budget > [data-slot="progress"] > [data-slot="progress-indicator"] { width: 100%; height: 100%; margin: 0; transition: transform .2s ease; }

/* Select2 styled as the native Workhour field picker. */
.select2-container { width: 100% !important; font-size: 14px; }
.select2-container .select2-selection--single { height: 46px; border: 1px solid var(--input); border-radius: 14px; background: var(--card); }
.select2-container .select2-selection--single .select2-selection__rendered { height: 44px; line-height: 44px; padding: 0 38px 0 13px; color: var(--foreground); font-weight: 700; }
.select2-container .select2-selection--single .select2-selection__arrow { height: 44px; right: 9px; }
.select2-dropdown { z-index: 1200; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--card); color: var(--foreground); box-shadow: 0 16px 44px #17202a24; }
.select2-search--dropdown { padding: 9px; }
.select2-container--default .select2-search--dropdown .select2-search__field { border: 1px solid var(--input); border-radius: 10px; padding: 9px 11px; background: var(--background); color: var(--foreground); outline: 0; }
.select2-results__option { padding: 10px 13px; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--accent); color: var(--accent-foreground); }
.select2-container--default .select2-results__option[aria-selected=true] { background: var(--primary); color: var(--primary-foreground); }
.select2-container--open .select2-selection--single { border-color: var(--primary); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.select2-container--open .select2-selection--multiple { border-color: var(--primary); }
.select2-dropdown--below { margin-top: -1px; border-top-left-radius: 0; border-top-right-radius: 0; }
.select2-dropdown--above { margin-bottom: -1px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.select2-container .select2-selection--multiple { min-height: 46px; border: 1px solid var(--input); border-radius: 14px; background: var(--card); padding: 5px 34px 5px 7px; }
.select2-container--default.select2-container--focus .select2-selection--multiple { border-color: var(--primary); }
.select2-container--default .select2-selection--multiple .select2-selection__choice { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; margin: 2px 4px 2px 0; border: 0; border-radius: 999px; background: var(--accent); color: var(--accent-foreground); padding: 5px 9px; font-size: 11px; font-weight: 800; }
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove { position: static; order: 2; border: 0; color: currentColor; padding: 0; font-size: 15px; line-height: 1; }
.select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field { color: var(--foreground); margin-top: 7px; }

/* Generic reusable picker contract. Individual controls may add their own
   icon/content, but all share the same focus, border and sizing behavior. */
.wh-picker-control { box-sizing: border-box; border: 1px solid var(--input); border-radius: 14px; background: var(--card); color: var(--foreground); }
.wh-picker-control:not(.custom-select) { min-height: 46px; }
.wh-picker-control:focus-visible, .wh-picker-control:focus-within { border-color: var(--primary); outline: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent); }
.native-select-source { display: none !important; }
.select-popup-trigger { width: 100%; text-align: left; cursor: pointer; }
.select-popup-trigger > span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.select-popup-trigger strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.select-popup-trigger em { color: var(--muted-foreground); font-size: 11px; font-style: normal; }
.select-popup-trigger > .icon { flex: none; width: 18px; color: var(--muted-foreground); }

/* Consistent single-choice popup markers and spacing. */
.select-popup-dialog .select-popup-option,
#projectPickerDialog .picker-option { padding-left: 4px; padding-right: 4px; }
.select-popup-dialog .select-popup-option .check,
#projectPickerDialog .picker-option .check { visibility: hidden; }
.select-popup-dialog .select-popup-option:not(.selected) .check,
#projectPickerDialog .picker-option:not(.selected) .check { display: none; }
.select-popup-dialog .select-popup-option.selected .check,
#projectPickerDialog .picker-option.selected .check { visibility: visible; }
.picker-choice-chevron { flex: 0 0 18px; width: 18px; color: var(--muted-foreground); }
.select-popup-option.before-selected,
#projectPickerDialog .picker-option.before-selected { border-bottom-color: transparent; }
#projectPickerDialog .picker-option.selected { border-bottom-color: transparent; }

/* Keep one clean divider above dialog actions. */
#timeDialog .form-scroll, #projectDialog .form-scroll, #employeeDialog .form-scroll,
#reportSettingsDialog .form-scroll, #ataDialog .form-scroll { border-bottom: 0 !important; }
#timeDialog .dialog-actions, #projectDialog .dialog-actions, #employeeDialog .dialog-actions,
#reportSettingsDialog .dialog-actions, #ataDialog .dialog-actions { border-top: 1px solid var(--border); }

/* Accessible static dialogs with the same desktop card / mobile sheet geometry. */
.wh-dialog { display: none; position: fixed; inset: 0; z-index: 1000; }
.wh-dialog.open { display: block; }
.wh-dialog-backdrop { position: absolute; inset: 0; background: rgba(13,20,24,.48); backdrop-filter: blur(3px); }
.wh-dialog-panel { position: absolute; z-index: 1; left: 50%; top: 50%; translate: -50% -50%; margin: 0; border: 1px solid var(--border); background: var(--card); color: var(--foreground); box-shadow: 0 28px 90px rgba(18,26,29,.28); }
.wh-dialog-panel > header { padding: 0 48px 17px 0; }
.wh-dialog-panel > header h2 { margin: 0 0 4px; font-size: 22px; font-weight: 800; letter-spacing: -.45px; }
.wh-dialog-panel > header p { margin: 0; color: var(--muted-foreground); font-size: 13px; }
.wh-close { position: absolute; top: 17px; right: 17px; z-index: 4; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 50%; background: var(--card); color: var(--foreground); font-size: 24px; line-height: 1; box-shadow: 0 5px 15px #17202a12; }
body.dialog-open { overflow: hidden; }

.language-grid button > .check { visibility: hidden; }
.language-grid button.selected > .check { visibility: visible; }
.language-grid button > .language-copy { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.language-grid button > .check { display: grid; place-items: center; }
.language-grid button > .check .icon { width: 14px; height: 14px; }
.language-grid { max-height: min(610px, calc(100dvh - 180px)); overflow-y: auto; overscroll-behavior: contain; padding-right: 3px; scrollbar-width: thin; }

.entry-card { cursor: pointer; }
.entry-card .fa-pen { position: absolute; right: 17px; bottom: 17px; font-size: 12px; color: var(--muted-foreground); opacity: .48; }
.entry-meta i { font-size: 11px; }
.spinner-border { display: none; width: 1rem; height: 1rem; border-width: .15em; }
.is-saving .spinner-border { display: inline-block; }
.is-saving { pointer-events: none; opacity: .82; }

.approval-check > span { flex: 0 0 25px; }
.approval-check > span .icon { width: 14px; height: 14px; }
.report-clock { display: none !important; margin-top: 2px; color: inherit; font-size: inherit; line-height: inherit; }
.show-report-times .report-clock { display: block !important; }
.report-document table { width: 100%; min-width: 100%; table-layout: auto; }
.report-document th:first-child, .report-document td:first-child { width: 92px; }
.report-document th:nth-child(2), .report-document td:nth-child(2) { width: 92px; }
.report-document th:nth-child(3), .report-document td:nth-child(3) { width: 100%; }
.report-document th:last-child, .report-document td:last-child { width: 58px; }

.field-info { display: inline-grid; place-items: center; width: 19px; height: 19px; margin-left: 5px; padding: 0; border: 0; border-radius: 50%; background: #2d78c8; color: #fff; font: 800 11px/1 Arial,sans-serif; vertical-align: middle; }
.info-popover { display: none; position: fixed; z-index: 1400; max-width: 270px; padding: 11px 13px; border-radius: 11px; background: #216fbd; color: #fff; font-size: 12px; line-height: 1.45; box-shadow: 0 12px 34px rgba(22,77,132,.32); }
.info-popover.open { display: block; }
.wh-toast { position: fixed; z-index: 1600; top: 18px; left: 50%; translate: -50% -18px; opacity: 0; pointer-events: none; padding: 11px 16px; border-radius: 12px; background: #176b5b; color: #fff; font-size: 13px; font-weight: 700; box-shadow: 0 12px 35px rgba(0,0,0,.2); transition: .2s ease; }
.wh-toast.show { translate: -50% 0; opacity: 1; }

/* Reusable media picker for images, video and PDF. */
.media-picker { border: 1px dashed color-mix(in srgb, var(--primary) 46%, var(--border)); background: var(--accent); border-radius: 15px; padding: 13px; }
.media-picker-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.media-picker-copy { display: flex; align-items: baseline; gap: 5px; min-width: 0; white-space: nowrap; }
.media-picker-copy strong { font-size: 13px; }
.media-picker-copy small { color: var(--muted-foreground); font-size: 10px; }
.media-picker-copy small::before { content: "· "; }
.media-picker-action { position: relative; flex: none; overflow: hidden; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; border: 1px solid var(--border); background: var(--card); color: var(--foreground); border-radius: 11px; padding: 9px 12px; font-size: 11px; font-weight: 800; cursor: pointer; }
.media-picker-action input { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; opacity: 0; cursor: pointer; }
.media-picker-list { display: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 10px; }
.media-picker.has-files .media-picker-list { display: grid; }
.media-picker-file { display: flex; align-items: center; gap: 7px; min-width: 0; border-radius: 9px; padding: 8px; background: var(--card); font-size: 10px; }
.media-picker-file i { color: var(--primary); font-size: 15px; }
.media-picker-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-picker-file { position: relative; }
.demo-attachments { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:10px; }
.demo-attachments .media-picker-file { margin:0; }
.demo-video-file { flex-direction:column; align-items:stretch; }
.demo-video-file video { width:100%; max-height:90px; border-radius:7px; margin-top:5px; }
.media-thumb { width: 32px; height: 32px; object-fit: cover; border-radius: 6px; flex: 0 0 32px; }
.media-remove { margin-left: auto; border: 0; background: transparent; color: var(--muted-foreground); cursor: pointer; padding: 3px; }
.media-remove:hover { color: var(--primary); }
.report-document th:last-child, .report-document td:last-child { text-align: right; }
.rich-editor { border: 1px solid var(--input); border-radius: 14px; overflow: hidden; background: var(--card); }
.rich-editor-toolbar { display: flex; gap: 4px; padding: 7px 9px; border-bottom: 1px solid var(--border); background: color-mix(in srgb,var(--card) 88%,var(--primary) 12%); }
.rich-editor-toolbar button { width: 30px; height: 28px; border: 0; border-radius: 7px; color: var(--foreground); cursor: pointer; }
.rich-editor-toolbar button:hover { background: var(--accent); color: var(--accent-foreground); }
.rich-editor-surface { min-height: 150px; padding: 12px 13px; outline: 0; color: var(--foreground); }
.rich-editor textarea { display: none; }
.media-preview-dialog { display:none; position:fixed; inset:0; z-index:3000; background:#101514ee; align-items:center; justify-content:center; padding:30px; }
.media-preview-dialog.open { display:flex; }
.media-preview-dialog > img { max-width:94vw; max-height:92vh; object-fit:contain; border-radius:10px; user-select:none; }
.media-preview-close,.media-preview-prev,.media-preview-next { position:absolute; width:42px; height:42px; border:1px solid #ffffff55; border-radius:50%; background:#ffffff18; color:#fff; cursor:pointer; }
.media-preview-close { top:max(62px, calc(env(safe-area-inset-top) + 24px)); right:20px; } .media-preview-prev { left:20px; top:50%; } .media-preview-next { right:20px; top:50%; }
.media-preview-prev,.media-preview-next { background:#17202acc; border-color:#ffffff99; box-shadow:0 3px 12px #0008; }
.project-gallery { position:relative; display:flex; flex-wrap:nowrap; gap:8px; margin:14px 0; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x proximity; scrollbar-width:none; padding-right:22px; }
.project-gallery::-webkit-scrollbar { display:none; }
.project-gallery img,.project-video-thumb,.project-pdf-thumb { flex:0 0 150px; width:150px; aspect-ratio:3/5; object-fit:cover; border-radius:12px; scroll-snap-align:start; }
.project-pdf-thumb { background:var(--accent); color:var(--primary); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-decoration:none; font-weight:800; }
.project-pdf-thumb i { font-size:42px; }
.project-gallery:after { content:""; position:sticky; right:0; flex:0 0 12px; width:12px; height:100%; margin-left:-22px; pointer-events:none; background:linear-gradient(90deg,transparent,var(--background)); }
.project-video-thumb { position:relative; width:100%; aspect-ratio:3/5; border:0; border-radius:12px; background:linear-gradient(145deg,#233338,#9a4438); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; cursor:pointer; }
.project-video-thumb i { font-size:42px; filter:drop-shadow(0 3px 8px #0008); }
.project-video-thumb span { font-size:11px; font-weight:800; }
.media-preview-video { width:100%; height:100%; max-width:100vw; max-height:100dvh; object-fit:contain; }
.project-media-strip { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:10px 0 18px; }
.project-attachment { display:flex; align-items:center; gap:8px; min-width:0; padding:10px; border-radius:12px; background:var(--card); color:var(--foreground); text-decoration:none; font-size:11px; }
.project-attachment > i { color:var(--primary); font-size:17px; }
.project-attachment video { width:100%; max-height:80px; border-radius:7px; }
.select-popup-dialog{ z-index: 2200 !important; }
.team-crud-panel { margin-top:20px; padding-top:16px; border-top:1px solid var(--border); }
.team-crud-head { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:10px; }
.team-row { width:100%; display:flex; align-items:center; gap:12px; padding:13px 4px; border:0; border-bottom:1px solid var(--border); background:transparent; text-align:left; }
.team-row > span:nth-child(2) { min-width:0; flex:1; display:flex; flex-direction:column; gap:2px; }
.team-row > i { color:var(--muted-foreground); margin-left:auto; }
.team-members-summary { margin-top:8px; color:var(--muted-foreground); font-size:11px; }

/* People/team controls. Keep count chips circular and independently centered. */
.people-tabs button { align-items: center; }
.people-tabs button .people-count { display: inline-grid; place-items: center; flex: 0 0 22px; width: 22px; min-width: 22px; height: 22px; padding: 0; line-height: 1; border-radius: 50%; }
.people-pane[hidden] { display: none !important; }
.people-list > button { width: 100%; }
.employee-language-button { width: 100%; min-height: 46px; display: flex; align-items: center; gap: 9px; border: 1px solid var(--input); border-radius: 14px; background: var(--card); color: var(--foreground); padding: 10px 13px; text-align: left; }
.employee-language-button > span { flex: 1; font-weight: 700; }
.employee-language-button i { color: var(--primary); }
.delete-btn.is-hidden { display: none; }

/* Identical row geometry keeps picker marks from shifting the text column. */
.js-profile-choice, .multi-picker-option { padding: 12px 10px; }
.js-profile-choice.selected, .multi-picker-option.selected { padding: 12px 10px; }
.js-profile-choice > span:nth-child(2), .multi-picker-option > span:nth-child(2) { min-width: 0; flex: 1 1 auto; }
.js-profile-choice > .check, .multi-picker-option > .check { flex: 0 0 25px; width: 25px; height: 25px; margin-left: auto; visibility: hidden; }
.js-profile-choice.selected > .check, .multi-picker-option.selected > .check { visibility: visible; }
.multi-picker-list { max-height: min(55dvh, 470px); }

#projectPickerDialog .picker-option:last-child { border-bottom: 0; }
.select-popup-option:last-child { border-bottom: 0; }

/* Every Select2 single picker in the time form uses the same control box. */
#timeDialog .field-group { padding: 0; }
#timeDialog .select2-container { display: block; width: 100% !important; }
#timeDialog .select2-selection--single { width: 100%; min-height: 46px; border: 1px solid var(--input); border-radius: 14px; background: var(--card); }
#timeDialog .select2-selection__rendered { font-weight: 700; }
#ataDialog .form-dialog.wide { width: min(700px, calc(100% - 28px)); }

@media (min-width:900px) {
  .bottom-nav { transition: transform .22s ease, opacity .22s ease; }
  .bottom-nav.nav-hidden { transform: translate(-50%, -130%); opacity: 0; pointer-events: none; }
  .bottom-nav.nav-hidden { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
  .bottom-nav i { font-size: 15px; width: 17px; }
  .nav-plus > i { font-size: 16px; width: 18px; }
}

@media (max-width:700px) {
  .form-grid.three { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .form-grid.three > :first-child { grid-column: 1 / -1; }
  .date-time-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .date-time-grid > :first-child { grid-column: 1 / -1; }
  .date-time-grid input { font-size: 16px !important; }
  .wh-dialog-panel { top: max(12px, calc(env(safe-area-inset-top) + 8px)) !important; bottom: auto !important; left: 50% !important; translate: -50% 0 !important; width: calc(100% - 18px) !important; max-width: none !important; max-height: calc(100dvh - 30px) !important; border-radius: 25px !important; padding: 25px 17px calc(16px + env(safe-area-inset-bottom)) !important; }
  .wh-close { width: 38px; height: 38px; top: 14px; right: 14px; }
  .report-option { width: 100%; }
  #ataDialog .form-dialog.wide { width: calc(100% - 28px) !important; }
  .report-document th:first-child, .report-document td:first-child { width: 76px; }
  .report-document th:last-child, .report-document td:last-child { width: 46px; }
  .media-picker { padding: 10px; }
  .media-picker-head { align-items: center; }
  .media-picker-copy { gap: 4px; overflow: hidden; }
  .media-picker-copy strong, .media-picker-copy small { flex: none; font-size: 10px; }
  .media-picker-action { padding: 8px 9px; }
  .media-picker-list { grid-template-columns: 1fr 1fr; }
  .report-document th:nth-child(2), .report-document td:nth-child(2) { width: 0; }
}

/* JavaScript adds .pwa-mode as a cross-browser fallback because iOS and some
   Android shells do not consistently match the display-mode media query. */
@media (max-width:899px) {
  .bottom-nav .nav-item.active:after { top:auto !important; bottom:6px !important; }
  .media-preview-dialog { padding:0; }
  .media-preview-dialog > img { width:100vw; height:100dvh; max-width:none; max-height:none; object-fit:cover; border-radius:0; }
  .media-preview-dialog > img { touch-action:pinch-zoom; }
  .media-preview-close { top:max(62px, calc(env(safe-area-inset-top) + 24px)); right:16px; }
  .site-footer { display:none; }
  html.pwa-mode,
  html.pwa-mode body {
    min-height: 100%;
    background: var(--background);
  }

  html.pwa-mode body::before {
    content: "";
    position: fixed;
    z-index: 29;
    top: 0;
    right: 0;
    left: 0;
    height: max(25px, env(safe-area-inset-top));
    pointer-events: none;
    background: rgba(12, 20, 22, .07);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    -webkit-mask-image: linear-gradient(to bottom,#000 0,#000 82%,transparent 100%);
    mask-image: linear-gradient(to bottom,#000 0,#000 82%,transparent 100%);
  }

  html.pwa-mode .app-header {
    --pwa-top-inset: max(25px, env(safe-area-inset-top));
    height: calc(66px + var(--pwa-top-inset));
    padding-top: var(--pwa-top-inset);
  }

  html.pwa-mode .wh-dialog-panel {
    top: max(33px, calc(env(safe-area-inset-top) + 8px)) !important;
    max-height: calc(100dvh - 43px) !important;
  }

  html.pwa-mode .bottom-nav {
    bottom: 8px;
    padding-top: 6px;
    padding-bottom: 8px;
    margin-bottom: 10px;
  }
}
@media (max-width:899px) and (orientation:landscape) {
  .media-preview-dialog > img { object-fit:contain; width:100vw; height:100dvh; }
}

@media print {
  .wh-dialog-backdrop, .wh-close, .swipe-handle, .report-option, .dialog-actions { display: none !important; }
  
}

/* workhouse-web 1.30 onboarding/auth refinements */
.workhour-splash { position:fixed; inset:0; z-index:5300; display:grid; place-items:center; background:radial-gradient(circle at 50% 38%,#a71926 0,#720814 44%,#4c0008 100%); color:#fff; opacity:1; transition:opacity .52s ease,visibility .52s ease; }
.workhour-splash.leaving { opacity:0; visibility:hidden; }
.workhour-splash-inner { width:min(520px,82vw); text-align:center; transform:translateY(-2vh); }
.workhour-splash-inner img { display:block; width:min(390px,78vw); height:auto; margin:0 auto 24px; }
.workhour-splash-inner p { max-width:480px; margin:0 auto; color:#fff; font-size:clamp(17px,3.8vw,23px); line-height:1.45; font-weight:550; opacity:.92; }

.onboarding-feature-panel { position:absolute; z-index:2; top:18%; right:5.5%; width:min(330px,34vw); padding:14px; border:1px solid rgba(255,255,255,.7); border-radius:24px; background:rgba(255,250,247,.88); color:#182028; box-shadow:0 18px 54px rgba(51,0,7,.24); backdrop-filter:blur(14px) saturate(115%); -webkit-backdrop-filter:blur(14px) saturate(115%); font-size:12px; }
.onboarding-feature-panel strong { display:block; color:#182028; font-weight:800; }
.onboarding-feature-panel small { display:block; margin-top:2px; color:#59636d; font-size:10px; line-height:1.25; }
.feature-title,.feature-head,.feature-row,.feature-time,.feature-stats { display:flex; align-items:center; gap:10px; }
.feature-title { padding:2px 3px 10px; font-size:13px; }
.feature-title > i { display:grid; place-items:center; width:30px; height:30px; border-radius:10px; background:#fff0f0; color:#d51e2f; }
.feature-head { padding:2px 3px 10px; }
.feature-head > span:last-child { flex:1; }
.feature-head small i { display:inline-block; width:7px; height:7px; margin-right:4px; border-radius:50%; background:#25c755; }
.feature-ring { display:grid; place-items:center; width:55px; height:55px; border-radius:50%; background:conic-gradient(#cf1d2d 0 72%,#eadfe0 72% 100%); color:#182028; font-size:14px; font-weight:800; position:relative; }
.feature-ring::after { content:""; position:absolute; inset:6px; border-radius:50%; background:#fff8f5; z-index:0; }
.feature-ring { isolation:isolate; }
.feature-ring::before { content:attr(data-value); }
.feature-ring { color:transparent; }
.feature-ring::after { z-index:-1; }
.feature-ring { text-shadow:0 0 0 #182028; }
.feature-bars,.feature-chart { display:flex; height:42px; align-items:flex-end; gap:6px; padding:4px 6px 10px; border-bottom:1px solid #eadfe0; }
.feature-bars b,.feature-chart b { flex:1; min-width:5px; border-radius:4px 4px 1px 1px; background:#d94b58; opacity:.35; }
.feature-bars b:nth-child(1){height:18%}.feature-bars b:nth-child(2){height:28%}.feature-bars b:nth-child(3){height:42%}.feature-bars b:nth-child(4){height:55%}.feature-bars b:nth-child(5){height:72%}.feature-bars b:nth-child(6){height:92%;opacity:.9}
.feature-chart { height:58px; gap:10px; padding-top:8px; }
.feature-chart b:nth-child(1){height:45%}.feature-chart b:nth-child(2){height:62%}.feature-chart b:nth-child(3){height:52%}.feature-chart b:nth-child(4){height:75%}.feature-chart b:nth-child(5){height:94%;opacity:.9}
.feature-row { min-height:48px; padding:8px 3px; border-bottom:1px solid #eee2e2; }

/* Keep native date/time values fully visible in time-report dialogs. */
.form-dialog .date-control,
.form-dialog .time-control {
  min-height:58px;
}
.feature-row:last-child { border-bottom:0; }
.feature-row > i { display:grid; place-items:center; flex:0 0 30px; width:30px; height:30px; border-radius:10px; background:#fff0f0; color:#ce1a2b; font-size:14px; }
.feature-row > span { flex:1; min-width:0; }
.feature-row > b { color:#27313a; font-size:11px; white-space:nowrap; }
.feature-time { justify-content:space-between; padding:10px 4px 12px; border-top:1px solid #eee2e2; border-bottom:1px solid #eee2e2; }
.feature-time small { margin:0; }
.feature-time strong { font-size:23px; }
.feature-time span { padding:8px 10px; border-radius:10px; background:#f3eeee; font-weight:800; }
.feature-action { margin-top:10px; padding:11px; border-radius:11px; background:#c81727; color:#fff; text-align:center; font-weight:800; }
.feature-stats { justify-content:space-between; padding:8px 4px 2px; }
.feature-stats span { flex:1; }
.feature-stats strong { font-size:19px; }

.auth-shell { align-items:center; justify-content:center; }
.auth-muted,.auth-helper { color:#56616d; }
.dark .auth-muted,.dark .auth-helper { color:#b9c2cb; }
.auth-swipe-handle { display:none; }

@media (max-width:899px) {
  .onboarding-content { top:43%; }
  .onboarding-feature-panel { top:13.5%; right:4.5%; width:min(47vw,205px); padding:9px; border-radius:18px; font-size:10px; transform:scale(.94); transform-origin:top right; }
  .onboarding-feature-panel small { font-size:8px; }
  .feature-title { font-size:11px; padding-bottom:7px; }
  .feature-title > i,.feature-row > i { width:25px; height:25px; flex-basis:25px; border-radius:8px; font-size:11px; }
  .feature-head { gap:7px; padding-bottom:6px; }
  .feature-ring { width:43px; height:43px; font-size:11px; }
  .feature-bars { height:30px; gap:4px; padding-bottom:6px; }
  .feature-row { min-height:36px; gap:7px; padding:5px 2px; }
  .feature-time { padding:6px 2px 8px; }
  .feature-time strong { font-size:17px; }
  .feature-time span { padding:5px 7px; }
  .feature-action { margin-top:7px; padding:8px; border-radius:9px; }
  .feature-stats strong { font-size:15px; }
  .feature-chart { height:39px; gap:6px; padding:5px 4px 7px; }
  .auth-shell { padding:0; align-items:flex-end; }
  .auth-card { border-radius:26px 26px 0 0; padding:38px 22px calc(env(safe-area-inset-bottom) + 22px); max-height:calc(100dvh - env(safe-area-inset-top) - 12px); }
  .auth-swipe-handle { display:block; position:absolute; top:8px; left:50%; transform:translateX(-50%); width:70px; height:24px; border:0; background:transparent; padding:8px 0; }
  .auth-swipe-handle span { display:block; width:42px; height:5px; margin:auto; border-radius:999px; background:#c9cdd2; }
}

@media (min-width:900px) {
  .auth-shell { align-items:center; padding:28px; }
  .auth-card { margin:auto; }
  .onboarding-feature-panel { top:22%; right:5%; width:min(360px,31vw); }
}

/* workhouse-web 1.30 mobile onboarding composition
   Keep the photography in a dedicated upper stage instead of covering the
   full portrait viewport. This prevents the source image from being heavily
   cropped/zoomed on phones and matches the approved onboarding mockups. */
@media (max-width:899px) {
  .onboarding-visual {
    inset:0 0 auto 0;
    height:58dvh;
    min-height:430px;
    max-height:610px;
    background:#65030d;
  }

  .onboarding-image {
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
    transform:none;
  }

  /* Give each motif a slightly different focal point without zooming it. */

  .onboarding-card::after {
    inset:39dvh 0 0;
    height:auto;
    background:
      linear-gradient(180deg,rgba(101,3,13,0) 0%,rgba(112,5,16,.40) 9%,#790713 22%,#65030d 48%,#4d0008 100%);
  }

  .onboarding-content {
    top:54%;
  }

  .onboarding-feature-panel {
    top:14.5%;
    right:4.5%;
    width:min(46vw,200px);
    transform:scale(.90);
    transform-origin:top right;
  }
}

/* Short phones: retain the wider composition but reclaim a little vertical room. */
@media (max-width:899px) and (max-height:720px) {
  .onboarding-visual { height:54dvh; min-height:360px; }
  .onboarding-card::after { inset:36dvh 0 0; }
  .onboarding-content { top:49%; }
  .onboarding-feature-panel { top:13%; transform:scale(.82); }
  .onboarding-copy h1 { font-size:clamp(28px,7.8vw,40px); }
  .onboarding-copy p { font-size:clamp(14px,3.55vw,17px); }
  .onboarding-actions { padding-top:18px; }
}

/* Unified mobile portrait artwork: ALL onboarding slides share one geometry.
   The artwork contains its own red waves; no gradient overlay is added. */
@media (max-width:899px) {
  .onboarding-card .onboarding-visual {
    inset:0;
    width:100%;
    height:100dvh;
    min-height:100%;
    max-height:none;
    background:#65030d;
  }
  .onboarding-card .onboarding-image {
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center top;
    transform:none;
  }
  .onboarding-card::after { display:none; }
  .onboarding-card .onboarding-feature-panel {
    top:17.8dvh;
    right:4.5vw;
    width:min(45vw,195px);
    transform:scale(.88);
    transform-origin:top right;
  }
  .onboarding-card .onboarding-content { top:58%; }
  .onboarding-actions,.onboarding-auth,.onboarding-dots { transform:translateY(15px); }
}
@media (max-width:899px) and (max-height:720px) {
  .onboarding-card .onboarding-feature-panel { top:16.8dvh; transform:scale(.78); }
  .onboarding-card .onboarding-content { top:55%; }
  .onboarding-actions,.onboarding-auth,.onboarding-dots { transform:translateY(10px); }
}

/* Splash should be logo only. */
.workhour-splash-inner img { margin-bottom:0; }
.workhour-splash-inner p { display:none !important; }


/* 1.33: active project is the front card in a mobile snap carousel. */


/* 1.33: image and video share the same fullscreen preview surface. */
.media-preview-dialog > video { max-width:94vw; max-height:92vh; width:auto; height:auto; object-fit:contain; border-radius:10px; }

/* 1.34: mobile UX refinements -------------------------------------------------
   - Give the active project more room while keeping a subtle next-card peek.
   - Let the bottom navigation get out of the way while reading/scrolling.
   - Keep tall mobile dialogs visually detached from both screen edges. */
@media (max-width:899px) {

  .bottom-nav {
    transition: transform .2s ease, opacity .2s ease !important;
    will-change: transform, opacity;
  }
  html.pwa-mode .bottom-nav.nav-hidden {
    transform: translateY(calc(100% + 32px)) !important;
    opacity: 0;
    pointer-events: none;
  }

  /* Large sheets keep a small frame of backdrop visible above and below.
     Natural-height pickers (for example language) remain natural height. */
  html.pwa-mode .wh-dialog-panel {
    --wh-dialog-top-gap: max(33px, calc(env(safe-area-inset-top) + 8px));
    --wh-dialog-bottom-gap: max(10px, env(safe-area-inset-bottom));
    top: var(--wh-dialog-top-gap) !important;
    bottom: auto !important;
    height: auto !important;
    max-height: calc(100dvh - var(--wh-dialog-top-gap) - var(--wh-dialog-bottom-gap)) !important;
    overflow: hidden;
    border-radius: 25px !important;
  }

  html.pwa-mode #timeDialog .wh-dialog-panel,
  html.pwa-mode #ataDialog .wh-dialog-panel,
  html.pwa-mode #projectDialog .wh-dialog-panel,
  html.pwa-mode #employeeDialog .wh-dialog-panel,
  html.pwa-mode #reportSettingsDialog .wh-dialog-panel{
    max-height: calc(100dvh - var(--wh-dialog-top-gap) - var(--wh-dialog-bottom-gap)) !important;
  }

  html.pwa-mode .form-dialog .form-scroll {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}


/* 1.35: PWA scroll navigation ------------------------------------------------
   The bottom navigation returns when the user scrolls upward, but the top
   header stays out of the way until the page is back at the top. */
@media (max-width:899px) {
  html.pwa-mode .app-header {
    transition: transform .2s ease, opacity .2s ease;
    will-change: transform, opacity;
  }
  html.pwa-mode .app-header.header-hidden {
    transform: translateY(calc(-100% - 8px));
    opacity: 0;
    pointer-events: none;
  }

  /* Keep the bottom-nav animation strictly vertical in PWA mode. */
  html.pwa-mode .bottom-nav {
    /* Keep the existing horizontal centering while animating vertically. */
    transform: translate(-50%, 0) !important;
    transition: transform .2s ease, opacity .2s ease !important;
  }
  html.pwa-mode .bottom-nav.nav-hidden {
    transform: translate(-50%, calc(100% + 32px)) !important;
    opacity: 0;
    pointer-events: none;
  }
}


/* 1.36: keep bottom navigation centered and hidden during active scrolling.
   JS reveals it only after upward scrolling has settled, or at page edges. */

/* 1.37 UX refinements */
.back-brand { width:42px; height:42px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--border); background:var(--card); box-shadow:0 4px 14px #17202a12; }
.back-brand .back-icon { width:18px; height:18px; }
.project-gallery img,.project-gallery .project-video-thumb { flex:0 0 calc((100% - 20px)/2.2); width:calc((100% - 20px)/2.2); aspect-ratio:1/1; border-radius:11px; }
.project-gallery .project-pdf-thumb { flex:0 0 108px; width:108px; aspect-ratio:1/1; }
.profile-avatar-preview { width:88px; height:88px; border-radius:50%; object-fit:cover; display:grid; place-items:center; margin:4px auto 12px; background:var(--primary); color:#fff; font-size:30px; font-weight:900; overflow:hidden; }
.profile-avatar-preview img { width:100%; height:100%; object-fit:cover; }
.profile-avatar-actions { display:flex; justify-content:center; gap:8px; margin-bottom:18px; }
.profile-avatar-actions label,.profile-avatar-actions button { border:1px solid var(--border); background:var(--card); color:var(--foreground); border-radius:11px; padding:9px 12px; font-size:12px; font-weight:800; cursor:pointer; }
.help-list details { border-bottom:1px solid var(--border); padding:13px 0; }
.help-list summary { cursor:pointer; font-weight:800; }
.help-list p { margin:8px 0 0; color:var(--muted-foreground); font-size:13px; line-height:1.5; }
.app-info-grid { display:grid; gap:0; }
.app-info-row { display:flex; justify-content:space-between; gap:18px; padding:12px 0; border-bottom:1px solid var(--border); font-size:13px; }
.app-info-row span { color:var(--muted-foreground); }
.app-info-row strong { text-align:right; word-break:break-word; }
@media(max-width:899px){ .project-gallery { padding-right:18px; } }

/* 1.38 profile, project card and help center refinements */
.project-card-head{display:grid;grid-template-columns:1fr auto 30px;align-items:center;gap:8px;min-height:28px;margin-bottom:7px}
.project-card-head .project-counter{justify-self:end;margin:0;padding:4px 7px}
.project-more{width:30px;height:30px;display:grid;place-items:center;justify-self:end;border-radius:50%;background:#ffffff18;color:#fff;font-size:16px}
@media(max-width:899px){
  .project-gallery img,.project-gallery .project-video-thumb{flex:0 0 calc((100% - 18px)/2.28);width:calc((100% - 18px)/2.28);aspect-ratio:1/1;min-height:0;height:auto}
  .project-gallery{gap:8px;padding-right:12px}
}
.avatar{overflow:hidden;border-radius:50%}
.avatar img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%}
.profile-avatar-editor{position:relative;width:104px;height:104px;margin:5px auto 5px}
.profile-avatar-preview{width:104px;height:104px;margin:0;border-radius:50%;overflow:hidden}
.profile-avatar-preview img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%}
.profile-camera-button{position:absolute;right:-1px;bottom:2px;width:34px;height:34px;display:grid!important;place-items:center;border:3px solid var(--card)!important;border-radius:50%!important;background:var(--primary)!important;color:#fff!important;padding:0!important;box-shadow:0 4px 12px #0002;cursor:pointer}
.profile-camera-button i{font-size:13px}
.profile-avatar-remove{display:block;margin:7px auto 18px;border:0;background:transparent;color:var(--muted-foreground);font-size:12px;font-weight:700;padding:4px 8px;cursor:pointer}
.profile-avatar-remove.is-hidden{visibility:hidden;pointer-events:none}
.help-center-list{display:grid;gap:2px;padding:0 2px 10px}
.help-center-row{width:100%;display:grid;grid-template-columns:44px minmax(0,1fr) 18px;align-items:center;gap:12px;padding:13px 4px;border:0;border-bottom:1px solid var(--border);background:transparent;color:var(--foreground);text-align:left;cursor:pointer}
.help-center-row>span:nth-child(2){display:flex;flex-direction:column;min-width:0}
.help-center-row strong{font-size:13px}
.help-center-row small{margin-top:2px;color:var(--muted-foreground);font-size:11px;line-height:1.35}
.help-center-row>i:last-child{justify-self:end;color:var(--muted-foreground);font-size:12px}
.help-article-panel .form-scroll{padding-bottom:28px}
.help-article-content{font-size:13px;line-height:1.6;color:var(--foreground)}
.help-article-content h3{margin:18px 0 7px;font-size:15px}
.help-article-content p{margin:0 0 12px;color:var(--muted-foreground)}
.help-article-content ul{margin:0 0 14px;padding-left:20px}
.help-article-media{margin:16px 0;border-radius:14px;overflow:hidden;background:var(--muted);aspect-ratio:16/9;display:grid;place-items:center}
.help-article-media img,.help-article-media video{width:100%;height:100%;object-fit:cover}


/* 1.39 navigation and avatar consistency */
.profile-avatar-editor{width:104px!important;height:104px!important;min-width:104px!important;max-width:104px!important;min-height:104px!important;max-height:104px!important;aspect-ratio:1/1!important;box-sizing:border-box;flex:0 0 104px!important}
.profile-avatar-preview{width:104px!important;height:104px!important;min-width:104px!important;max-width:104px!important;min-height:104px!important;max-height:104px!important;aspect-ratio:1/1!important;border-radius:999px!important;box-sizing:border-box;padding:0!important;overflow:hidden!important}
.profile-avatar-preview img{width:104px!important;height:104px!important;min-width:104px!important;max-width:104px!important;aspect-ratio:1/1!important;border-radius:999px!important;object-fit:cover!important}
.profile-camera-button{width:34px!important;height:34px!important;min-width:34px!important;max-width:34px!important;min-height:34px!important;max-height:34px!important;aspect-ratio:1/1!important;border-radius:999px!important;box-sizing:border-box!important;padding:0!important;margin:0!important;line-height:1!important}
.entry-more{align-self:center;justify-self:end;font-size:17px;color:var(--muted-foreground);padding:10px 5px}
.help-article-panel{position:relative}
.help-article-panel .wh-back{position:absolute;z-index:5;top:16px;left:16px;width:38px;height:38px;min-width:38px;border:1px solid var(--border);border-radius:50%;background:var(--card);color:var(--foreground);display:grid;place-items:center;box-shadow:0 3px 10px #00000012;cursor:pointer}
.help-article-panel .wh-back i{font-size:13px}
.help-article-panel>header{padding-left:50px}


/* 1.40 UX and support refinements */
.entry-card{position:relative}
.entry-more{align-self:start;justify-self:end;margin-top:2px;padding:4px 5px;font-size:18px}
.project-card-top .icon-btn,.ata-card-head .icon-btn{display:grid;place-items:center}
.project-card-top .icon-btn .fa-ellipsis-vertical,.ata-card-head .icon-btn .fa-ellipsis-vertical{font-size:17px;color:var(--foreground)}
.media-picker-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px}
.media-picker-copy{min-width:0;white-space:normal;overflow:visible}
.media-picker-copy small{white-space:normal}
.media-picker-action{position:relative;z-index:2}
.wh-toast{top:auto!important;bottom:24px;left:auto;right:24px;translate:0 18px}
.wh-toast.show{translate:0 0}
.legal-dialog-panel{width:min(760px,calc(100% - 28px))}
.legal-content{font-size:13px;line-height:1.65}
.legal-content h3{margin:18px 0 6px;font-size:15px}
.legal-content p{margin:0 0 12px;color:var(--muted-foreground)}
.auth-invite-summary{display:flex;align-items:center;gap:10px;margin:4px 0 14px;padding:12px;border-radius:14px;background:rgba(255,255,255,.07)}.auth-invite-summary>i{color:#f08a7d}.auth-invite-summary>span{display:flex;flex-direction:column}.auth-invite-summary small{color:rgba(255,255,255,.65);font-size:10px}
.dark input[type="date"]{color-scheme:dark}.dark input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(1) brightness(1.4);opacity:.92}




.invite-qr canvas{display:block!important;width:134px!important;height:134px!important;image-rendering:auto}.invite-qr img{display:none!important}.invite-action-list{display:flex;flex-direction:column}.invite-action-list>button{display:flex;align-items:center;gap:11px;width:100%;padding:12px 2px;border:0;border-bottom:1px solid var(--border);background:transparent;color:var(--foreground);text-align:left}.invite-action-list>button>span:nth-child(2){display:flex;min-width:0;flex:1;flex-direction:column}.invite-action-list small{color:var(--muted-foreground)}.invite-action-list .destructive,.invite-action-list .destructive .settings-icon{color:#b42318}.invite-admin-row.is-revoked,.pending-invite-row.is-revoked{opacity:.58}.invite-admin-row.is-revoked .type-chip,.pending-invite-row.is-revoked .type-chip{background:var(--muted);color:var(--muted-foreground)}.pending-invite-row .icon-btn{margin-left:4px}.project-access-summary{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:13px;background:var(--muted);color:var(--muted-foreground);font-size:11px}

.control-crud-list{margin-top:12px}.control-crud-row{display:flex;align-items:center;gap:10px;width:100%;padding:13px 2px;border:0;border-top:1px solid var(--border);background:transparent;color:var(--foreground);text-align:left}.control-crud-row>span:first-child{display:flex;min-width:0;flex:1;flex-direction:column}.control-crud-row small{color:var(--muted-foreground)}.control-crud-row>i{color:var(--muted-foreground)}.project-access-list .multi-picker-option .check{visibility:hidden}.project-access-list .multi-picker-option.selected .check{visibility:visible}
.admin-panel[data-admin-panel="overview"]{padding:17px}.nav-settings-desktop{display:none}
.project-gallery>.project-image-thumb,.project-gallery>.project-video-thumb,.project-gallery>.project-pdf-thumb{position:relative;flex:0 0 calc((100% - 24px)/4)!important;width:calc((100% - 24px)/4)!important;min-width:0!important;aspect-ratio:1/1!important;border-radius:10px!important;overflow:hidden;scroll-snap-align:start}.project-image-thumb{display:block;padding:0;border:0;background:var(--muted);cursor:pointer}.project-gallery>.project-image-thumb>img{display:block;flex:none!important;width:100%!important;height:100%!important;min-height:0!important;aspect-ratio:1/1!important;object-fit:cover;border-radius:0!important}.media-zoom-icon{position:absolute;right:6px;bottom:6px;display:grid;place-items:center;width:24px;height:24px;border:1px solid #ffffffb8;border-radius:50%;background:#101817a8;color:#fff;font-size:10px;box-shadow:0 2px 8px #0004;pointer-events:none}.project-gallery>.project-video-thumb i{font-size:29px}.project-gallery>.project-video-thumb span,.project-gallery>.project-pdf-thumb span{max-width:90%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px}.project-gallery>.project-pdf-thumb i{font-size:27px}

@media (min-width:1100px){
  .app-view[data-view="more"]{max-width:900px;margin-left:auto;margin-right:auto}
  .settings-list{width:min(800px,100%);margin-left:auto;margin-right:auto}
  .bottom-nav{top:7px!important}
}
@media (max-width:899px){
  .wh-toast{left:50%;right:auto;bottom:calc(18px + env(safe-area-inset-bottom));translate:-50% 18px;max-width:calc(100% - 32px);text-align:center}
  .wh-toast.show{translate:-50% 0}
  .media-picker-copy small{display:block}
}

/* 1.41 project/ATA refinements */
.project-card-head{grid-template-columns:1fr 34px 34px}
.project-card-head .project-counter,.project-more{width:34px;height:34px;min-width:34px;box-sizing:border-box;display:grid;place-items:center;padding:0!important;border-radius:50%}
.project-card-head .project-counter{background:#ffffff14;color:#fff;font-size:11px;font-weight:800}
.project-more{font-size:16px}
.project-pdf-thumb{display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-decoration:none;background:#fff;color:#c94f3d;border-radius:11px;font-size:11px;font-weight:800;overflow:hidden}
.project-pdf-thumb i{font-size:24px}
.ata-project-context{width:100%;max-width:none;display:grid;grid-template-columns:42px 1fr 18px;align-items:center;gap:12px;margin:0 0 18px;padding:12px 14px;border:1px solid var(--border);border-radius:15px;background:var(--card);color:var(--foreground);text-align:left;cursor:pointer}
.ata-project-context>span:nth-child(2){display:flex;flex-direction:column;min-width:0}.ata-project-context small,.ata-project-context em{font-size:11px;color:var(--muted-foreground);font-style:normal}.ata-project-context strong{font-size:14px}.ata-project-context>svg{color:var(--muted-foreground)}
.ata-empty{padding:34px 18px;text-align:center;border:1px dashed var(--border);border-radius:16px;color:var(--muted-foreground)}.ata-empty i{display:block;font-size:25px;margin-bottom:10px}.ata-empty strong,.ata-empty span{display:block}.ata-empty strong{color:var(--foreground);margin-bottom:5px}
#ataDialog .js-ata-locked-project[readonly]{background:var(--muted);color:var(--foreground);font-weight:700;cursor:default}

/* 1.43: shared sheet, page and onboarding motion */
.wh-dialog.slide-motion-ready .wh-dialog-backdrop{opacity:0;transition:opacity .24s ease}
.wh-dialog.slide-motion-ready .wh-dialog-panel{--slide-motion-y:0px;opacity:0;transform:translate3d(0,var(--slide-motion-y),0) scale(.985);transition:transform .28s cubic-bezier(.22,.8,.28,1),opacity .2s ease;will-change:transform,opacity}
.wh-dialog.slide-motion-ready.slide-motion-visible .wh-dialog-backdrop{opacity:var(--slide-motion-opacity,1)}
.wh-dialog.slide-motion-ready.slide-motion-visible .wh-dialog-panel{opacity:1;transform:translate3d(0,var(--slide-motion-y),0) scale(1)}
.wh-dialog.slide-motion-closing .wh-dialog-panel{opacity:0;transform:translate3d(0,18px,0) scale(.985)}
.wh-dialog.slide-motion-closing .wh-dialog-panel{transition:transform .32s cubic-bezier(.22,.8,.28,1),opacity .24s ease!important}
.wh-dialog.slide-motion-closing .wh-dialog-backdrop{opacity:1!important;transition:none!important}
.wh-dialog-panel.slide-motion-dragging{transition:none!important}
.swipe-handle{cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}
.swipe-handle:active{cursor:grabbing}
.slide-motion-pager{transform:translate3d(0,0,0);will-change:transform}
.slide-motion-pager-dragging{transition:none!important}
.slide-motion-pager-animating{transition:transform .27s cubic-bezier(.22,.8,.28,1)!important}
.slide-motion-pager-prep{transition:none!important}
.onboarding-card.slide-motion-pager-neighbor{position:absolute!important;inset:0!important;z-index:3;width:100%!important;height:100dvh!important;pointer-events:none!important}
@keyframes slide-motion-page-forward{from{opacity:.72;transform:translate3d(28px,0,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes slide-motion-page-back{from{opacity:.72;transform:translate3d(-22px,0,0)}to{opacity:1;transform:translate3d(0,0,0)}}
.slide-motion-page-forward{animation:slide-motion-page-forward .28s cubic-bezier(.22,.8,.28,1)}
.slide-motion-page-back{animation:slide-motion-page-back .28s cubic-bezier(.22,.8,.28,1)}
body.dialog-open .bottom-nav{margin-left:calc(var(--dialog-scrollbar-width,0px) / -2)}

/* 1.58 resource relationships, invitations and desktop administration ------ */
.desktop-admin-trigger,.desktop-admin-nav,.desktop-settings-admin{display:none}
.project-team-summary{display:flex;align-items:center;gap:10px;width:100%;margin:16px 0 4px;padding:10px 0;border:0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:transparent;text-align:left;color:var(--foreground)}
.project-team-summary>span:nth-child(2){display:flex;flex:1;min-width:0;flex-direction:column}.project-team-summary small{color:var(--muted-foreground)}
.stacked-avatars{display:flex;padding-left:7px}.stacked-avatars i{display:grid;place-items:center;width:28px;height:28px;margin-left:-7px;border:2px solid var(--card);border-radius:50%;background:#fee8e5;color:var(--primary);font-size:10px;font-style:normal;font-weight:800}
.inline-invite{align-self:flex-start;margin-top:2px;padding:3px 0;border:0;background:transparent;color:var(--primary);font-size:12px;font-weight:750}.inline-invite i{margin-right:5px}
.invite-scope-note{display:flex;align-items:flex-start;gap:10px}.invite-scope-note>i{display:grid;place-items:center;width:34px;height:34px;flex:0 0 34px;border-radius:11px;background:#fee8e5;color:var(--primary)}.invite-scope-note>span{display:flex;flex-direction:column}.invite-scope-note small{color:var(--muted-foreground);line-height:1.4}
.entry-head>span:first-child{display:flex;min-width:0;flex-direction:column}.entry-person-detail{display:block;margin-top:2px;color:var(--muted-foreground);font-size:10px;font-weight:550}.entry-kind,.type-chip{display:inline-flex;align-items:center;width:max-content;padding:3px 7px;border-radius:999px;background:#e9f4ee;color:#26734a;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}.entry-kind.external,.type-chip.external{background:#fff0dc;color:#8a5411}.type-chip.internal{background:#e9f4ee;color:#26734a}.type-chip.pending{background:#fff4d4;color:#806000}
.invite-overview{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;padding:13px;border-radius:16px;background:var(--muted)}.invite-overview>div,.pending-invites .team-crud-head>span{display:flex;flex-direction:column}.invite-overview small,.pending-invites small{color:var(--muted-foreground)}
.pending-invites{margin-top:18px;padding-top:16px;border-top:1px solid var(--border)}.pending-invites .team-row .type-chip{margin-left:auto}.people-list .type-chip{margin-left:auto;margin-right:8px}
.member-group-label{margin:15px 0 7px;color:var(--muted-foreground);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.member-group-label:first-child{margin-top:0}.project-member-row{display:flex;align-items:center;gap:10px;padding:11px 2px;border-bottom:1px solid var(--border)}.project-member-row>span:nth-child(2){display:flex;min-width:0;flex:1;flex-direction:column}.project-member-row small{color:var(--muted-foreground)}
.invite-type-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.invite-type-grid button{display:flex;align-items:flex-start;flex-direction:column;gap:4px;padding:13px;border:1px solid var(--border);border-radius:16px;background:var(--card);color:var(--foreground);text-align:left}.invite-type-grid button.selected{border-color:var(--primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 12%,transparent)}.invite-type-grid i{color:var(--primary);font-size:18px}.invite-type-grid small{color:var(--muted-foreground);font-size:10px}.invite-scope-note{padding:12px;border-radius:14px;background:var(--muted)}
.invite-share-dialog header{text-align:center}.success-symbol{display:grid;place-items:center;width:42px;height:42px;margin:0 auto 9px;border-radius:50%;background:#def3e6;color:#237749}.invite-qr{display:grid;place-items:center;width:154px;height:154px;margin:18px auto;padding:10px;border:1px solid var(--border);border-radius:18px;background:#fff}.invite-qr span{width:100%;height:100%;background:repeating-conic-gradient(#17201f 0 25%,#fff 0 50%) 0 0/18px 18px;border:10px solid #fff;box-shadow:inset 0 0 0 7px #17201f}.invite-code{display:flex;align-items:center;flex-direction:column;gap:2px}.invite-code small{color:var(--muted-foreground);font-size:9px;font-weight:800;letter-spacing:.12em}.invite-code strong{font-size:28px;letter-spacing:.28em;text-indent:.28em}.invite-code span{color:var(--muted-foreground);font-size:11px}.share-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:16px}.share-actions button{justify-content:center}.security-caption{margin:14px 0 0;color:var(--muted-foreground);font-size:10px;text-align:center}
.employment-fields{display:grid;gap:12px}.admin-rate-fields{padding:13px;border:1px solid #ead9af;border-radius:16px;background:#fffaf0}.dark .admin-rate-fields{background:#272217}.sensitive-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}.sensitive-heading>span{display:flex;align-items:center;gap:7px;color:#7b5d16}.sensitive-heading small{max-width:210px;color:var(--muted-foreground);font-size:9px;text-align:right}
.admin-workspace{max-width:1280px!important}.admin-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:20px;padding:22px 25px;border-radius:24px;background:linear-gradient(135deg,#6d0611,#bd2634);color:#fff}.admin-hero .eyebrow,.admin-hero p{color:#fff}.admin-hero h1{font-size:30px;font-weight:800}.admin-layout{display:grid;grid-template-columns:235px minmax(0,1fr);gap:18px}.admin-sidebar{display:flex;align-self:start;flex-direction:column;gap:5px;padding:9px;border:1px solid var(--border);border-radius:20px;background:var(--card);box-shadow:var(--shadow)}.admin-sidebar button{display:flex;align-items:center;gap:10px;width:100%;padding:12px;border:0;border-radius:13px;background:transparent;color:var(--muted-foreground);font-size:12px;text-align:left;font-weight:700}.admin-sidebar button.active{background:color-mix(in srgb,var(--primary) 10%,var(--card));color:var(--primary)}.admin-sidebar button span{flex:1;white-space:nowrap}.admin-sidebar em{display:grid;place-items:center;min-width:22px;height:22px;border-radius:999px;background:var(--muted);font-size:10px;font-style:normal}.admin-panel{display:none}.admin-panel.active{display:block}.admin-content{min-width:0}.admin-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:15px}.admin-stat-grid article,.admin-card,.admin-panel[data-admin-panel]{border:1px solid var(--border);border-radius:18px;background:var(--card);box-shadow:var(--shadow)}.admin-stat-grid article{display:flex;flex-direction:column;padding:16px}.admin-stat-grid small{color:var(--muted-foreground)}.admin-stat-grid strong{margin:5px 0;font-size:24px}.admin-stat-grid span{color:var(--muted-foreground);font-size:10px}.admin-stat-grid article.sensitive{border-color:#ead9af;background:#fffaf0}.dark .admin-stat-grid article.sensitive{background:#272217}.admin-card{padding:16px}.admin-card-head{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:13px}.admin-card-head>div{display:flex;flex-direction:column}.admin-card-head small{color:var(--muted-foreground)}.admin-project-row,.invite-admin-row{display:flex;align-items:center;gap:11px;padding:13px 2px;border-top:1px solid var(--border)}.admin-project-row>span:nth-child(2),.invite-admin-row>span:nth-child(2){display:flex;min-width:0;flex:1;flex-direction:column}.admin-project-row small,.invite-admin-row small{color:var(--muted-foreground)}.admin-project-row b{font-size:12px}.admin-panel[data-admin-panel]:not([data-admin-panel=overview]){padding:17px}.admin-table-wrap{overflow-x:auto}.admin-table{width:100%;border-collapse:collapse}.admin-table th{padding:10px;color:var(--muted-foreground);font-size:9px;text-align:left;text-transform:uppercase;letter-spacing:.05em}.admin-table td{padding:12px 10px;border-top:1px solid var(--border);font-size:11px}.admin-table td:first-child{display:table-cell}.admin-table td strong,.admin-table td small{display:block}.admin-table td small{color:var(--muted-foreground)}.status-dot{display:inline-flex;align-items:center;gap:5px}.status-dot:before{content:"";width:7px;height:7px;border-radius:50%;background:#2d9a63}.admin-lock{padding:6px 9px;border-radius:999px;background:#fff3cf;color:#795a08;font-size:10px;font-weight:750}.rate-explainer{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}.rate-explainer>div{display:flex;flex-direction:column;padding:12px;border-radius:14px;background:var(--muted)}.rate-explainer span{color:var(--muted-foreground);font-size:10px}.control-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.control-grid button{display:flex;align-items:center;gap:12px;padding:15px;border:1px solid var(--border);border-radius:16px;background:var(--card);color:var(--foreground);text-align:left}.control-grid button>i:first-child{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:#fee8e5;color:var(--primary)}.control-grid button span{display:flex;min-width:0;flex:1;flex-direction:column}.control-grid small{color:var(--muted-foreground)}

@media (min-width:1100px){
  .desktop-admin-trigger{display:grid;place-items:center}
  .desktop-admin-trigger>i{width:auto;margin:0;line-height:1;text-align:center}
  .desktop-admin-nav,.desktop-settings-admin{display:flex}
  .bottom-nav .nav-more-mobile{display:none}
  .bottom-nav .nav-settings-desktop{display:inline-block}
  .bottom-nav{grid-template-columns:repeat(6,auto)!important}
}

@media (max-width:899px){
  .admin-workspace{display:none!important}
  .project-team-summary{margin-top:12px}
  .invite-type-grid,.share-actions{grid-template-columns:1fr 1fr}
  .sensitive-heading{flex-direction:column}.sensitive-heading small{max-width:none;text-align:left}
}

@media (max-width:480px){.invite-type-grid{grid-template-columns:1fr}.share-actions{grid-template-columns:1fr 1fr}}
@media (max-width:899px){
  .slide-motion-view-stack{position:relative;overflow:clip;overflow-anchor:none;isolation:isolate}
  .slide-motion-view-stack > .slide-motion-view-old{position:relative;z-index:1;width:100%;min-height:100dvh;background:var(--background);pointer-events:none;will-change:transform}
  .slide-motion-view-stack > .slide-motion-view-new{position:absolute;z-index:2;top:0;left:0;width:100%;min-height:100dvh;background:var(--background);will-change:transform;box-shadow:inset 16px 0 22px -24px rgba(16,21,20,.10)}
  .wh-dialog.slide-motion-ready .wh-dialog-panel{opacity:1;transform:translate3d(0,calc(var(--slide-motion-y) + 26px),0) scale(1)}
  .wh-dialog.slide-motion-ready.slide-motion-visible .wh-dialog-panel{transform:translate3d(0,var(--slide-motion-y),0) scale(1)}
  .wh-dialog.slide-motion-closing .wh-dialog-panel{opacity:1;transform:translate3d(0,calc(100dvh + 40px),0) scale(1);transition:transform .32s cubic-bezier(.22,.8,.28,1)!important}
  body.dialog-open .bottom-nav{margin-left:0}
  .wh-dialog-panel{padding-top:60px!important}
  .swipe-handle{position:absolute!important;z-index:6;top:0!important;right:auto!important;left:50%!important;display:flex!important;align-items:flex-start!important;justify-content:center!important;width:112px!important;height:52px!important;margin:0!important;padding:10px 0 0!important;translate:none!important;transform:translateX(-50%)!important;border:0!important;background:transparent!important;box-sizing:border-box!important}
  .swipe-handle span{display:block;flex:0 0 auto;width:42px;height:5px;margin:0;border-radius:999px;background:#c9cdd2}
  .onboarding-content{padding-bottom:calc(env(safe-area-inset-bottom) + 58px)!important}
}
@media (prefers-reduced-motion:reduce){
  .wh-dialog.slide-motion-ready .wh-dialog-backdrop,.wh-dialog.slide-motion-ready .wh-dialog-panel,.slide-motion-pager,.slide-motion-page-forward,.slide-motion-page-back{animation:none!important;transition:none!important}
}

/* 1.62: simplified time reporting and field blockers ----------------------- */
.time-report-dialog .wh-dialog-panel{width:min(560px,calc(100% - 28px))}






.field-label{display:block;margin-bottom:8px;font-size:12px;font-weight:800}














.work-blocker-trigger{border-color:color-mix(in srgb,var(--primary) 26%,var(--border))}
.work-blocker-trigger.has-active-blocker{border-color:#d7a82f;background:#fff9e9}.dark .work-blocker-trigger.has-active-blocker{background:#2a2518}





.blocker-choice-grid{display:grid;gap:8px}
.blocker-choice-grid>button{display:flex;align-items:center;gap:11px;width:100%;padding:12px;border:1px solid var(--border);border-radius:15px;background:var(--card);color:var(--foreground);text-align:left}
.blocker-choice-grid>button>i{display:grid;place-items:center;width:36px;height:36px;flex:0 0 36px;border-radius:11px;background:var(--muted);color:var(--muted-foreground)}
.blocker-choice-grid>button>span{display:flex;flex-direction:column}.blocker-choice-grid small{color:var(--muted-foreground);font-size:10px}
.blocker-choice-grid>button.selected{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 6%,var(--card))}.blocker-choice-grid>button.selected>i{background:var(--primary);color:#fff}
.blocker-impact{padding:13px;border:1px solid var(--border);border-radius:15px;background:var(--muted)}
.blocker-impact>strong{display:block;margin-bottom:9px;font-size:12px}.blocker-impact>div{display:flex;gap:6px}.blocker-impact button{flex:1;min-height:38px;padding:7px;border:1px solid var(--border);border-radius:10px;background:var(--card);color:var(--foreground);font-size:10px;font-weight:750}.blocker-impact button.selected{border-color:var(--primary);color:var(--primary)}.blocker-impact small{display:block;margin-top:8px;color:var(--muted-foreground);font-size:9px}
#workBlockerDialog .blocker-routing-grid label,#workBlockerDialog .blocker-routing-grid .field-group{box-sizing:border-box;width:100%;min-width:0;max-width:100%}
#workBlockerDialog input[type=date]{display:block;position:relative;box-sizing:border-box;width:100%!important;inline-size:100%!important;min-width:0!important;min-inline-size:0!important;max-width:100%!important;max-inline-size:100%!important;height:58px!important;min-height:58px!important;overflow:hidden}
#workBlockerDialog input[type=date]::-webkit-date-and-time-value{box-sizing:border-box;width:100%;min-width:0;margin:0;text-align:left}
#workBlockerDialog input[type=date]::-webkit-datetime-edit{min-width:0;padding:0}

#workBlockerDialog .select-popup-trigger em{display:none}
.blocker-routing-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;align-items:start!important;width:100%;min-width:0;overflow:visible}
.blocker-routing-grid>label,.blocker-routing-grid>.field-group{display:grid!important;grid-template-rows:20px 58px!important;align-self:start!important;align-items:stretch!important;gap:6px!important;box-sizing:border-box!important;width:100%;min-width:0;max-width:100%;margin:0!important;padding:0!important}
.blocker-routing-grid>label>span,.blocker-routing-grid>.field-group>span{display:flex!important;align-items:center!important;box-sizing:border-box!important;height:20px!important;min-height:20px!important;max-height:20px!important;margin:0!important;line-height:20px!important}
.blocker-routing-grid>label>input,.blocker-routing-grid>.field-group>.select-popup-trigger{align-self:start!important}
.blocker-routing-grid .select-popup-trigger{box-sizing:border-box;width:100%;min-width:0;max-width:100%;height:58px;min-height:58px}
.js-blocker-impact-toggle{margin-top:2px}

/* One geometry for native dates and Workhour picker controls shown side by side. */

#workBlockerDialog .blocker-routing-grid .select-popup-trigger{
  box-sizing:border-box!important;
  height:58px!important;
  min-height:58px!important;
  max-height:58px!important;
  margin:0!important;
  border-width:1px!important;
}

#workBlockerDialog input[type=date]{
  position:relative;
  box-sizing:border-box!important;
  height:58px!important;
  min-height:58px!important;
  max-height:58px!important;
  margin:0!important;
  padding-block:0!important;
  border-width:1px!important;
  line-height:56px!important;
}

#workBlockerDialog input[type=date]::-webkit-date-and-time-value{
  display:flex;
  align-items:center;
  box-sizing:border-box;
  width:100%;
  height:56px;
  min-height:56px;
  margin:0;
  line-height:normal;
}

@media (max-width:899px){
  #timeDialog .wh-dialog-panel{top:auto!important;bottom:0!important;left:0!important;width:100%!important;max-width:none!important;max-height:calc(100dvh - max(18px,env(safe-area-inset-top)))!important;translate:none!important;border-radius:25px 25px 0 0!important;padding-left:18px!important;padding-right:18px!important}
  #timeDialog .form-scroll{padding-bottom:10px}
  #timeDialog .dialog-actions{transform:translateY(8px)}
  .compact-sheet .wh-dialog-panel,.work-blocker-dialog .wh-dialog-panel,.select-popup-dialog .wh-dialog-panel{top:auto!important;bottom:0!important;left:0!important;width:100%!important;max-width:none!important;max-height:88dvh!important;translate:none!important;border-radius:25px 25px 0 0!important;padding:60px 18px calc(16px + env(safe-area-inset-bottom))!important}
  .compact-sheet .form-scroll,.work-blocker-dialog .form-scroll{overflow-y:auto;overscroll-behavior:contain}
  .select-popup-dialog .picker-list{overflow-y:auto;overscroll-behavior:contain}
  
  
  .work-blocker-dialog .wh-dialog-panel{max-height:94dvh!important}
  #workBlockerDialog input[type=date]{-webkit-appearance:none!important;appearance:none!important;padding:0 40px 0 12px!important;font-size:16px!important;line-height:56px!important}
  #workBlockerDialog input[type=date]::-webkit-calendar-picker-indicator{position:absolute;right:12px;width:20px;height:20px;margin:0;padding:0}
}


/* Workhour: unified desktop navigation and earlier mobile transition.
   Desktop nav switches on at 1100px (matching workhour-base.css). */
@media (min-width:1100px) {
  .app-header .brand,
  .app-header .header-actions { flex-shrink:0; }
  .bottom-nav {
    gap:0 !important;
    white-space:nowrap;
  }
  .bottom-nav .nav-item,
  .bottom-nav .nav-plus {
    padding-inline:9px;
    gap:6px;
    font-size:13px;
    font-weight:500;
    color:var(--foreground);
    white-space:nowrap;
    flex-shrink:0;
  }
  .bottom-nav .nav-item.active {
    color:var(--primary);
    font-weight:600;
  }
  .bottom-nav .nav-item:hover,
  .bottom-nav .nav-plus:hover {
    color:var(--foreground);
  }
}

/* Workhour: separated mobile primary action (four destinations + one action).
   Keep the existing nav buttons/JS unchanged; the pill is a background layer. */
@media (max-width:1099px) {
  .bottom-nav {
    box-sizing:border-box;
    width:calc(100% - 20px);
    max-width:540px;
    grid-template-columns:repeat(4,minmax(0,1fr)) 56px !important;
    gap:9px;
    align-items:center;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    isolation:isolate;
  }
  .bottom-nav::before {
    content:"";
    position:absolute;
    z-index:-1;
    inset:0 65px 0 0;
    border:1px solid var(--border);
    border-radius:50px;
    background:var(--card);
    box-shadow:0 12px 36px #17202a18;
    -webkit-backdrop-filter:blur(18px);
    backdrop-filter:blur(18px);
    pointer-events:none;
  }
  .bottom-nav > .nav-item {
    min-width:0;
    width:100%;
    padding-inline:1px;
    grid-row:1;
  }
  .bottom-nav > .nav-item[data-view-target="home"] {grid-column:1}
  .bottom-nav > .nav-item[data-view-target="projects"] {grid-column:2}
  .bottom-nav > .nav-item[data-view-target="ata"] {grid-column:3}
  .bottom-nav > .nav-item[data-view-target="more"] {grid-column:4}
  .bottom-nav > .nav-plus {
    grid-column:5;
    grid-row:1;
    width:56px;
    height:56px;
    margin:0;
    place-self:center;
    border-radius:50%;
    background:var(--primary);
    color:var(--primary-foreground);
    box-shadow:0 10px 25px #b94c3d33;
  }
  .bottom-nav > .nav-plus > i {font-size:23px;width:auto}
  .bottom-nav > .desktop-admin-nav {display:none !important}
}
@media (max-width:380px) {
  .bottom-nav {grid-template-columns:repeat(4,minmax(0,1fr)) 50px !important;gap:6px}
  .bottom-nav::before {right:56px}
  .bottom-nav > .nav-plus {width:50px;height:50px}
  .bottom-nav > .nav-item {font-size:9px}
}

/* Shorter mobile settings label; full wording remains on desktop. */
@media (max-width:1099px) {
  .bottom-nav .nav-settings-full {display:none}
  .bottom-nav .nav-settings-short {display:inline}
}
@media (min-width:1100px) {
  .bottom-nav .nav-settings-short {display:none}
  .bottom-nav .nav-settings-full {display:inline}
}

/* Workhour mobile navigation v3: light glass pill and clear menu destination.
   Desktop navigation, the red action button and existing JS remain unchanged. */
@media (max-width:1099px) {
  .bottom-nav::before {
    background:rgba(255,255,255,.92);
    border-color:rgba(209,217,225,.8);
    -webkit-backdrop-filter:blur(16px) saturate(125%);
    backdrop-filter:blur(16px) saturate(125%);
  }
  .bottom-nav > .nav-item {
    color:#202124;
    font-weight:500;
    font-size:11px;
    line-height:1.25;
  }
  .bottom-nav > .nav-item.active {color:var(--primary);font-weight:600}
  .bottom-nav > .nav-item > i {display:none}
  .bottom-nav .wh-mobile-nav-icon {
    display:block;
    flex:none;
    width:22px;
    height:22px;
    margin:0 auto;
    stroke-width:1.8;
  }
  .bottom-nav > .nav-plus {background:var(--primary);color:var(--primary-foreground)}
  .dark .bottom-nav::before {
    background:rgba(31,34,39,.88);
    border-color:rgba(255,255,255,.14);
  }
  .dark .bottom-nav > .nav-item {color:#f5f5f5}
  .dark .bottom-nav > .nav-item.active {color:var(--primary)}
}
@media (max-width:380px) {
  .bottom-nav > .nav-item {font-size:10px}
  .bottom-nav .wh-mobile-nav-icon {width:20px;height:20px}
}
@media (min-width:1100px) {
  .bottom-nav .wh-mobile-nav-icon {display:none}
}

/* Workhour mobile navigation v4: frosted pill, compact icons and selected tab.
   The four destinations share one capsule; the red action button stays solid. */
@media (max-width:1099px) {
  .bottom-nav::before {
    background:rgba(255,255,255,.92);
    border-color:rgba(209,217,225,.72);
    -webkit-backdrop-filter:blur(18px) saturate(125%);
    backdrop-filter:blur(18px) saturate(125%);
  }
  .bottom-nav > .nav-item {
    box-sizing:border-box;
    width:calc(100% - 12px);
    min-width:0;
    height:45px;
    margin:0 6px;
    padding:3px 1px;
    border-radius:999px;
    background:transparent;
    gap:2px;
    transition:background-color .16s ease,color .16s ease;
  }
  .bottom-nav > .nav-item.active {
    background:rgba(190,83,68,.09);
    color:var(--primary);
    font-weight:600;
  }
  .bottom-nav > .nav-item.active::after {content:none!important;display:none!important}
  .bottom-nav .wh-mobile-nav-icon {width:19px;height:19px;stroke-width:1.75}
  .dark .bottom-nav::before {
    background:rgba(31,34,39,.76);
    border-color:rgba(255,255,255,.16);
  }
  .dark .bottom-nav > .nav-item.active {
    background:rgba(220,116,100,.17);
    color:var(--primary);
  }
}
@media (max-width:380px) {
  .bottom-nav .wh-mobile-nav-icon {width:18px;height:18px}
  .bottom-nav > .nav-item {width:calc(100% - 10px);margin:0 5px}
}

/* Tidrapport: kort bekräftelse efter lyckat sparande */
.wh-time-complete{position:fixed;inset:0;z-index:2147483000;display:grid;place-items:center;padding:24px;background:rgba(24,28,35,.26);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);opacity:0;transition:opacity .2s ease;pointer-events:none}
.wh-time-complete.is-visible{opacity:1;pointer-events:auto}
.wh-time-complete-card{width:min(100%,350px);padding:38px 24px 34px;text-align:center;border-radius:28px;background:#fff;color:#202833;box-shadow:0 24px 70px rgba(21,26,35,.18);transform:translateY(12px) scale(.96);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.wh-time-complete.is-visible .wh-time-complete-card{transform:translateY(0) scale(1)}
.wh-time-complete-check{display:grid;place-items:center;width:80px;height:80px;margin:0 auto 20px;border-radius:50%;background:#bf5a4b;color:#fff;box-shadow:0 10px 30px rgba(191,90,75,.22);transform:scale(.75);transition:transform .38s cubic-bezier(.2,1.5,.3,1)}
.wh-time-complete.is-visible .wh-time-complete-check{transform:scale(1)}
.wh-time-complete-check svg{width:44px;height:44px;fill:none;stroke:currentColor;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.wh-time-complete-check path{stroke-dasharray:42;stroke-dashoffset:42;transition:stroke-dashoffset .42s ease .16s}
.wh-time-complete.is-visible .wh-time-complete-check path{stroke-dashoffset:0}
.wh-time-complete-card h2{font-size:23px;line-height:1.25;margin:0 0 12px;font-weight:700}
.wh-time-complete-duration{display:block;font-size:18px;margin-bottom:6px}
.wh-time-complete-project{margin:0 0 16px;font-size:14px;color:#606b78}
.wh-time-complete-card small{display:block;font-size:13px;color:#606b78}
.dark .wh-time-complete-card,[data-theme="dark"] .wh-time-complete-card{background:#24272e;color:#f5f5f6}
.dark .wh-time-complete-project,.dark .wh-time-complete-card small,[data-theme="dark"] .wh-time-complete-project,[data-theme="dark"] .wh-time-complete-card small{color:#bdc3cc}
@media(prefers-reduced-motion:reduce){.wh-time-complete,.wh-time-complete-card,.wh-time-complete-check,.wh-time-complete-check path{transition:none!important}.wh-time-complete-check path{stroke-dashoffset:0}}

/* Shared team-member selector; reporting uses its own server-backed filters. */
#peopleFilterDialog { z-index:2200!important; }
#peopleFilterDialog .dialog-actions { margin-top:12px; }

/* Project editor: the actual input and contenteditable own their focus. */
#projectDialog input, #projectDialog textarea, #projectDialog .rich-editor-surface { touch-action: auto; -webkit-user-select: text; user-select: text; }
#projectDialog .project-spec-field > span, #projectDialog .project-attachments > span { display:block; margin-bottom:8px; font-weight:600; }
#projectDialog .project-attachments { margin-top:20px; }
#projectDialog .rich-editor-surface { min-height:150px; cursor:text; }

/* Desktop main menu: text-only uppercase navigation and a soft active state.
   Mobile/PWA bottom navigation is intentionally unchanged. */
@media (min-width:1100px) {
  .bottom-nav {
    gap:5px !important;
    align-items:center;
  }
  .bottom-nav > .nav-item,
  .bottom-nav > .nav-plus {
    box-sizing:border-box;
    height:42px;
    padding-block:0;
    text-transform:uppercase;
    letter-spacing:.035em;
  }
  .bottom-nav > .nav-item > i,
  .bottom-nav > .nav-plus > i,
  .bottom-nav > .nav-item > .wh-mobile-nav-icon {
    display:none !important;
  }
  .bottom-nav > .nav-item.active {
    background:rgba(190,83,68,.10);
    color:var(--primary);
    border-radius:12px;
  }
  .bottom-nav > .nav-item.active::after {
    content:none !important;
    display:none !important;
  }
  .dark .bottom-nav > .nav-item.active,
  [data-theme="dark"] .bottom-nav > .nav-item.active {
    background:rgba(220,116,100,.17);
  }
}


/* Workhour mobile navigation: transparent outer layer and equal-height controls.
   The four destinations keep their own glass capsule; only the outer bar loses
   its rectangular backdrop/shadow. Match its 56px height to the plus button. */
@media (max-width:1099px) {
  .bottom-nav,
  html.pwa-mode .bottom-nav {
    box-sizing:border-box !important;
    height:56px !important;
    min-height:56px !important;
    max-height:56px !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    background-image:none !important;
    box-shadow:none !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
  }
  .bottom-nav::before {
    box-shadow:none !important;
  }
  .bottom-nav > .nav-plus {
    width:56px;
    height:56px;
    min-height:56px;
  }
}
@media (max-width:380px) {
  .bottom-nav,
  html.pwa-mode .bottom-nav {
    height:50px !important;
    min-height:50px !important;
    max-height:50px !important;
  }
  .bottom-nav > .nav-plus {
    width:50px;
    height:50px;
    min-height:50px;
  }
}

/* Workhour Picker: clearer selected state and balanced right-side spacing. */
.select-popup-dialog .select-popup-option.selected .person-dot {
  background: color-mix(in srgb, var(--primary) 18%, var(--card));
  color: var(--primary);
}
.select-popup-dialog .select-popup-option.selected .person-dot .fa-solid {
  color: var(--primary);
}
.select-popup-dialog .select-popup-option.selected .check {
  margin-right: 10px;
}

/* ADMIN / ANVÄNDARE
   Behåll varje tabellfält på en rad. Den befintliga admin-table-wrap
   hanterar horisontell scroll när tabellen inte ryms. */
.admin-panel[data-admin-panel="people"] .admin-table{
    min-width:1080px;
}
.admin-panel[data-admin-panel="people"] .admin-table th,
.admin-panel[data-admin-panel="people"] .admin-table td,
.admin-panel[data-admin-panel="people"] .admin-table td strong,
.admin-panel[data-admin-panel="people"] .admin-table td small,
.admin-panel[data-admin-panel="people"] .type-chip,
.admin-panel[data-admin-panel="people"] .status-dot{
    white-space:nowrap;
}