/* AutomaticTime technician app: focused, mobile-first workspace redesign. */ :root { color-scheme: light; --ui-bg: #f4f6f8; --ui-surface: #fff; --ui-surface-soft: #f8fafb; --ui-ink: #18232d; --ui-muted: #687783; --ui-line: #e4e9ed; --ui-yellow: #ffd600; --ui-green: #18864b; --ui-green-dark: #11683a; --ui-shadow: 0 5px 18px rgba(25, 42, 56, .055); --netto-yellow: var(--ui-yellow); --card-bg: var(--ui-surface); --input-bg: var(--ui-surface); --border-color: var(--ui-line); } html { min-height: 100%; background: var(--ui-bg); } body { min-height: 100vh; background: var(--ui-bg) !important; color: var(--ui-ink) !important; font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif; line-height: 1.5; } button, input, select, textarea { font: inherit; } button { -webkit-tap-highlight-color: transparent; } .hidden { display: none !important; } /* Draw interface icons with CSS so legacy page encoding cannot corrupt glyphs. */ .app-nav-icon, .more-tool-icon, .more-tool-arrow, .theme-toggle-icon { font-size: 0 !important; } .app-nav-icon::before, .more-tool-icon::before, .more-tool-arrow::before, .theme-toggle-icon::before { font-size: 20px; line-height: 1; } .app-nav-item:nth-child(1) .app-nav-icon::before { content: "\2302"; font-size: 23px; } .app-nav-item:nth-child(2) .app-nav-icon::before { content: "\25F7"; } .app-nav-item:nth-child(3) .app-nav-icon::before { content: "\2713"; } .app-nav-item:nth-child(4) .app-nav-icon::before { content: "\2026"; } .more-tool-card:nth-child(1) .more-tool-icon::before { content: "+"; } .more-tool-card:nth-child(2) .more-tool-icon::before { content: "\25A6"; } .more-tool-card:nth-child(3) .more-tool-icon::before { content: "\2637"; } .more-tool-card:nth-child(4) .more-tool-icon::before { content: "\2193"; } .more-tool-card:nth-child(5) .more-tool-icon::before { content: "\2709"; } .more-tool-card:nth-child(6) .more-tool-icon::before { content: "\2026"; } .more-tool-card:nth-child(7) .more-tool-icon::before { content: "\25C9"; } .more-tool-card:nth-child(8) .more-tool-icon::before { content: "\25A4"; } .more-tool-card:nth-child(9) .more-tool-icon::before { content: "\2197"; } .more-tool-card .more-tool-arrow::before { content: "\203A"; font-size: 24px; } .theme-toggle-icon::before { content: "\263E"; } #appInterface[data-theme="dark"] .theme-toggle-icon::before { content: "\2600"; } /* Theme switch */ .theme-toggle { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 7px 11px; border: 1px solid var(--ui-line); border-radius: 999px; background: var(--ui-surface-soft); color: var(--ui-ink); font-size: 12px; font-weight: 700; cursor: pointer; } .theme-toggle-icon { font-size: 16px; line-height: 1; } #appInterface[data-theme="dark"] { color-scheme: dark; --ui-bg: #11171b; --ui-surface: #1b242a; --ui-surface-soft: #222d34; --ui-ink: #e7edf0; --ui-muted: #a1afb7; --ui-line: #34424a; --ui-shadow: 0 5px 18px rgba(0,0,0,.22); --card-bg: var(--ui-surface); --input-bg: #151d22; --border-color: var(--ui-line); } #appInterface[data-theme="dark"] ~ * { color-scheme: dark; } html[data-app-theme="dark"], body:has(#appInterface[data-theme="dark"]) { background: #11171b !important; color: #e7edf0 !important; } body:has(#appInterface[data-theme="dark"]) #loginInterface { background: radial-gradient(ellipse at 50% 0,#302c1a 0,#171d21 48%,#11171b 100%) !important; } body:has(#appInterface[data-theme="dark"]) .login-card { background: #1b242a !important; color: #e7edf0 !important; border-color: #34424a !important; } body:has(#appInterface[data-theme="dark"]) .form-group label { color: #c5d0d6 !important; } body:has(#appInterface[data-theme="dark"]) .form-group input, body:has(#appInterface[data-theme="dark"]) .form-group select, body:has(#appInterface[data-theme="dark"]) .form-group textarea, #appInterface[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]), #appInterface[data-theme="dark"] select, #appInterface[data-theme="dark"] textarea { color: var(--ui-ink) !important; background-color: #151d22 !important; border-color: var(--ui-line) !important; } #appInterface[data-theme="dark"] .header.app-header { background: rgba(27,36,42,.96) !important; } #appInterface[data-theme="dark"] .app-brand h1 { color: var(--ui-ink) !important; } #appInterface[data-theme="dark"] #appLangSelector select { background: var(--ui-surface-soft) !important; color: var(--ui-ink) !important; border-color: var(--ui-line) !important; } #appInterface[data-theme="dark"] .app-main-nav { background: #202b31; border-color: var(--ui-line); } #appInterface[data-theme="dark"] .app-nav-item { color: #b3c0c7; } #appInterface[data-theme="dark"] .app-nav-item:hover { background: #303d45; } #appInterface[data-theme="dark"] .app-nav-item.active { color: #f1f4f6; background: #3a474f; box-shadow: 0 2px 8px rgba(0,0,0,.3); } #appInterface[data-theme="dark"] .app-nav-item.active .app-nav-icon { color: #ffdf54; } #appInterface[data-theme="dark"] #workTimeSection .timer-display, #appInterface[data-theme="dark"] #workTimeSection #workdayTypeChangePanel { background: #1e3028 !important; border-color: #315542 !important; color: var(--ui-ink) !important; } #appInterface[data-theme="dark"] #workTimeSection #workdayTimerValue { color: #d9f2e2 !important; } #appInterface[data-theme="dark"] #technicianWorkdayPanel > div:has(> #workdayStartBtn) > button:not(#workdayStartBtn) { background: var(--ui-surface-soft) !important; color: var(--ui-ink) !important; border-color: var(--ui-line) !important; } #appInterface[data-theme="dark"] #overviewDateControls button:nth-of-type(n+2) { background: #29353c !important; color: var(--ui-ink) !important; border-color: var(--ui-line) !important; } #appInterface[data-theme="dark"] #workOverviewContainer .work-overview { background: linear-gradient(140deg,#302d20,#20292e) !important; border-color: #574d22 !important; } #appInterface[data-theme="dark"] #workOverviewContainer .work-overview h3, #appInterface[data-theme="dark"] #workOverviewContainer .overview-time-unit, #appInterface[data-theme="dark"] #workOverviewContainer .task-breakdown-item .tb-hours, #appInterface[data-theme="dark"] #workOverviewContainer .overview-stat .val, #appInterface[data-theme="dark"] #workOverviewContainer .overview-time-number { color: #f4e9b4 !important; } #appInterface[data-theme="dark"] #workOverviewContainer .overview-stat .lbl, #appInterface[data-theme="dark"] #workOverviewContainer .payroll-breakdown-col, #appInterface[data-theme="dark"] #workOverviewContainer .norm160-foot, #appInterface[data-theme="dark"] #workOverviewContainer .chart-bar-row .bar-label { color: #b3c0c7 !important; } #appInterface[data-theme="dark"] #workOverviewContainer .norm160-panel { background: #202a30 !important; border-color: var(--ui-line) !important; } #appInterface[data-theme="dark"] #workOverviewContainer .norm160-panel-title { color: #bbd5e5 !important; } #appInterface[data-theme="dark"] #calendarContainer th { color: #c5d0d6 !important; background: #263239 !important; } #appInterface[data-theme="dark"] #calendarContainer td { color: #dce4e8 !important; } #appInterface[data-theme="dark"] #tasksContainer .task-card, #appInterface[data-theme="dark"] .more-tool-card { color: var(--ui-ink) !important; background: var(--ui-surface) !important; border-color: var(--ui-line) !important; } #appInterface[data-theme="dark"] #tasksContainer .task-card h3, #appInterface[data-theme="dark"] #tasksContainer .task-card h4 { color: var(--ui-ink) !important; } #appInterface[data-theme="dark"] #tasksContainer .task-card p, #appInterface[data-theme="dark"] #tasksContainer .task-card small { color: var(--ui-muted) !important; } #appInterface[data-theme="dark"] .more-tools-heading .eyebrow { color: #e2ca54; } #appInterface[data-theme="dark"] .more-tool-card:hover { border-color: #64747d !important; } #appInterface[data-theme="dark"] .icon-yellow { background: #39331c; color: #f5df78; } #appInterface[data-theme="dark"] .icon-blue { background: #20344c; color: #9fc8fa; } #appInterface[data-theme="dark"] .icon-violet { background: #322b48; color: #c0aff6; } #appInterface[data-theme="dark"] .icon-green { background: #203a2a; color: #a1ddb5; } #appInterface[data-theme="dark"] .icon-orange { background: #422e1e; color: #f2b783; } #appInterface[data-theme="dark"] .icon-gray { background: #2d383e; color: #becbd2; } #appInterface[data-theme="dark"] .more-tool-card .more-tool-logout { color: #ff9da0; } #appInterface[data-theme="dark"] .more-license-link { color: var(--ui-muted); } #appInterface[data-theme="dark"] #reminderDrawer, #appInterface[data-theme="dark"] #vacationDrawer, #appInterface[data-theme="dark"] #chatContainer:not(.chat-minimized) { background: var(--ui-surface) !important; border-color: var(--ui-line) !important; } #appInterface[data-theme="dark"] #reminderDrawer .reminder-header, #appInterface[data-theme="dark"] #vacationDrawer .vacation-header, #appInterface[data-theme="dark"] #chatContainer .chat-tabs, #appInterface[data-theme="dark"] #chatContainer .chat-popup-toggle, #appInterface[data-theme="dark"] #chatContainer .chat-input-area { background: var(--ui-surface-soft) !important; border-color: var(--ui-line) !important; } #appInterface[data-theme="dark"] #reminderDrawer .reminder-header button, #appInterface[data-theme="dark"] #vacationDrawer .vacation-header button { background: #303d45 !important; color: var(--ui-ink) !important; } #appInterface[data-theme="dark"] #reminderDrawer .reminder-item, #appInterface[data-theme="dark"] #vacationDrawer .vacation-item, #appInterface[data-theme="dark"] #vacationDrawer .calendar-appointment-item, #appInterface[data-theme="dark"] #vacationDrawer .team-vacation-item { background: #202a30 !important; border-color: var(--ui-line) !important; } #appInterface[data-theme="dark"] #reminderDrawer .reminder-input { background: #151d22 !important; color: var(--ui-ink) !important; border-color: var(--ui-line) !important; } #appInterface[data-theme="dark"] #vacationDrawer .calendar-section-title { color: #f0dc72 !important; } #appInterface[data-theme="dark"] #vacationDrawer .vacation-form label { color: #c5d0d6 !important; } #appInterface[data-theme="dark"] #vacationDrawer .vacation-preview { color: #f0dc72 !important; } #appInterface[data-theme="dark"] #chatContainer .chat-header { background: #263640 !important; } #appInterface[data-theme="dark"] #chatContainer .chat-tab { color: #a1afb7 !important; } #appInterface[data-theme="dark"] #chatContainer .chat-tab.active { color: #e7edf0 !important; background: #29353c !important; } #appInterface[data-theme="dark"] #chatContainer .chat-messages { background: #151d22 !important; } #appInterface[data-theme="dark"] #chatContainer .msg-received { color: var(--ui-ink) !important; background: #2a363d !important; } #appInterface[data-theme="dark"] #chatContainer .chat-input { color: var(--ui-ink) !important; background: #151d22 !important; border-color: var(--ui-line) !important; } #appInterface[data-theme="dark"] [id$="Modal"] > .login-card, #appInterface[data-theme="dark"] #licenseInfoModal > div { background: var(--ui-surface) !important; color: var(--ui-ink) !important; border-color: var(--ui-line) !important; } #appInterface[data-theme="dark"] [id$="Modal"] h3, #appInterface[data-theme="dark"] #profileModal #profileInfoContent, #appInterface[data-theme="dark"] #profileModal h4 { color: var(--ui-ink) !important; } #appInterface[data-theme="dark"] .login-card [style*="background:#111"], #appInterface[data-theme="dark"] .login-card [style*="background:#1a1a1a"], #appInterface[data-theme="dark"] #profileModal #profileInfo { background: #202a30 !important; border-color: var(--ui-line) !important; } #appInterface[data-theme="dark"] .login-card [style*="color:#ccc"], #appInterface[data-theme="dark"] .login-card [style*="color:#ddd"], #appInterface[data-theme="dark"] .login-card [style*="color:#bbb"], #appInterface[data-theme="dark"] .login-card [style*="color:#999"], #appInterface[data-theme="dark"] .login-card [style*="color:#888"] { color: #bdc8ce !important; } /* Sign-in */ #loginInterface { min-height: 100vh; padding: 24px; background: radial-gradient(ellipse at 50% 0, #fff5c1 0, #f7f8f8 48%, #eef2f4 100%) !important; } .login-card { background: var(--ui-surface) !important; color: var(--ui-ink) !important; border: 1px solid var(--ui-line) !important; border-radius: 20px !important; box-shadow: 0 20px 60px rgba(22, 34, 46, .12); } .login-card h2, .login-card h3 { color: var(--ui-ink); } .form-group label { color: #465560 !important; font-weight: 650; } .form-group input, .form-group select, .form-group textarea, #appInterface input:not([type="checkbox"]):not([type="radio"]), #appInterface select, #appInterface textarea { color: var(--ui-ink) !important; background-color: #fff !important; border: 1px solid #cfd8df !important; border-radius: 10px !important; } input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible { outline: 3px solid rgba(201, 166, 0, .38); outline-offset: 2px; } /* Compact global header */ .header.app-header { min-height: 66px; position: sticky; top: 0; z-index: 100; padding: 10px clamp(16px, 4vw, 48px) !important; background: rgba(255,255,255,.96) !important; color: var(--ui-ink) !important; border: 0 !important; border-bottom: 1px solid var(--ui-line) !important; box-shadow: 0 2px 12px rgba(20,32,44,.035); backdrop-filter: blur(12px); } .app-brand { min-width: 0 !important; } .app-brand h1 { color: #26343e !important; font-size: 15px !important; letter-spacing: .06em; } #appBrandLogoSlot { min-height: 42px !important; width: auto !important; justify-content: flex-start !important; } #appBrandLogo { max-height: 42px !important; max-width: 180px; } .app-header-actions { gap: 10px !important; } .app-header-actions > #dashboardHeaderLink, .app-header-actions > #licenseCompanyName, .app-header-actions > button[onclick="openProfileModal()"] { display: none !important; } #appLangSelector select { min-height: 38px; border: 1px solid var(--ui-line) !important; border-radius: 9px !important; background: #fff !important; color: var(--ui-ink) !important; } .container { width: 100%; max-width: 1120px; margin: 0 auto; padding: 22px 24px 50px !important; } #appInterface > .container > div:first-child { min-height: 38px; display: flex !important; align-items: center; margin: 0 0 10px !important; color: var(--ui-muted); font-size: 13px; } #userName { color: var(--ui-ink); font-size: 15px; font-weight: 750; } #workdayStatus { min-width: 190px; min-height: 48px; display: inline-flex; align-items: center; gap: 10px; margin-left: auto; padding: 6px 14px 6px 7px; border: 1px solid var(--ui-line); border-radius: 15px; color: var(--ui-ink); background: var(--ui-surface); box-shadow: var(--ui-shadow); text-align: left; } .workday-status-icon { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: 11px; } .workday-status-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .workday-status-copy { display: grid; gap: 1px; min-width: 0; } .workday-status-label { overflow: hidden; color: var(--ui-ink); font-size: 12px; font-weight: 800; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; } .workday-status-detail { color: var(--ui-muted); font-size: 10px; line-height: 1.2; } #workdayStatus[data-state="inactive"] { background: var(--ui-surface-soft); } #workdayStatus[data-state="inactive"] .workday-status-icon { color: #566671; background: #e8edf0; } #workdayStatus[data-state="active"] { border-color: #b8dfc6; background: #f1faf4; } #workdayStatus[data-state="active"] .workday-status-icon { color: #14763e; background: #d9f1e1; } #workdayStatus[data-state="vacation"] { border-color: #e7cf9b; background: #fff9e9; } #workdayStatus[data-state="vacation"] .workday-status-icon { color: #96701d; background: #f9edc9; } #appInterface[data-theme="dark"] #workdayStatus[data-state="inactive"] { background: #202a30; } #appInterface[data-theme="dark"] #workdayStatus[data-state="inactive"] .workday-status-icon { color: #c1ccd2; background: #35434a; } #appInterface[data-theme="dark"] #workdayStatus[data-state="active"] { border-color: #315c40; background: #1e3028; } #appInterface[data-theme="dark"] #workdayStatus[data-state="active"] .workday-status-icon { color: #a8e0b8; background: #294b35; } #appInterface[data-theme="dark"] #workdayStatus[data-state="vacation"] { border-color: #69572a; background: #342e20; } #appInterface[data-theme="dark"] #workdayStatus[data-state="vacation"] .workday-status-icon { color: #f1dc97; background: #514526; } /* Primary navigation: page-like destinations on desktop, thumb bar on mobile. */ .app-main-nav { display: flex; align-items: center; gap: 6px; width: fit-content; margin: 0 0 20px; padding: 5px; background: #e9edf0; border: 1px solid #e1e6e9; border-radius: 13px; } .app-nav-item { min-width: 104px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 15px; border: 0; border-radius: 9px; background: transparent; color: #5e6b76; font-size: 13px; font-weight: 650; cursor: pointer; transition: background .16s ease, color .16s ease, box-shadow .16s ease; } .app-nav-item:hover { color: var(--ui-ink); background: rgba(255,255,255,.65); } .app-nav-item.active { color: #19242c; background: #fff; box-shadow: 0 2px 6px rgba(25,42,56,.1); } .app-nav-icon { min-width: 18px; color: #596773; font-size: 20px; line-height: 1; text-align: center; } .app-nav-item.active .app-nav-icon { color: #735f00; } /* One destination at a time keeps the default screen focused. */ #appInterface[data-app-view="home"] #timeOverviewSection, #appInterface[data-app-view="home"] #tasksSection, #appInterface[data-app-view="home"] #moreToolsSection, #appInterface[data-app-view="time"] #workTimeSection, #appInterface[data-app-view="time"] #tasksSection, #appInterface[data-app-view="time"] #moreToolsSection, #appInterface[data-app-view="tasks"] #workTimeSection, #appInterface[data-app-view="tasks"] #timeOverviewSection, #appInterface[data-app-view="tasks"] #moreToolsSection, #appInterface[data-app-view="more"] #workTimeSection, #appInterface[data-app-view="more"] #timeOverviewSection, #appInterface[data-app-view="more"] #tasksSection { display: none !important; } #appInterface[data-app-view="more"] #moreToolsSection { display: block !important; } /* Main views */ .main-section { margin: 0 0 18px !important; padding: clamp(18px, 3vw, 28px) !important; color: var(--ui-ink) !important; background: var(--ui-surface) !important; border: 1px solid var(--ui-line); border-radius: 18px !important; box-shadow: var(--ui-shadow); } .section-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 20px !important; padding: 0 0 16px !important; border-bottom: 1px solid var(--ui-line); border-radius: 0 !important; background: transparent !important; color: var(--ui-ink) !important; text-align: left !important; font-size: 18px; font-weight: 750; letter-spacing: -.02em; } .section-header > span:first-child { display: inline-flex; align-items: center; gap: 11px; } .section-header > span:first-child::before { content: ""; width: 5px; height: 23px; border-radius: 5px; background: var(--ui-yellow); } .section-header button { min-height: 38px; padding: 8px 13px !important; border-radius: 9px !important; font-size: 12px !important; font-weight: 700; } .section-header button:hover, .btn:hover, .more-tool-card:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(24,38,50,.1); } .btn { min-height: 44px; border-radius: 10px !important; font-weight: 700; text-transform: none !important; } /* Shift action is the primary home-screen control. */ #workTimeSection .section-header > button { display: none !important; } #workTimeSection .section-header { margin-bottom: 20px !important; } #workTimeSection .timer-display { margin: 0 0 18px !important; padding: 18px !important; color: var(--ui-ink) !important; background: #f2f7f4 !important; border: 1px solid #dce9df !important; border-radius: 15px !important; } #workTimeSection #workdayTimer:not(.hidden) { display: grid !important; grid-template-columns: 184px minmax(0, 1fr); grid-template-rows: 1fr auto; align-items: center; column-gap: clamp(18px, 4vw, 36px); row-gap: 4px; } #workdayTimer:not(.hidden) #workdayStopBtn { grid-column: 1; grid-row: 1 / span 2; margin: 0 auto; text-align: center; white-space: normal; line-height: 1.25; } #workdayTimer:not(.hidden) #workdayTimerValue { grid-column: 2; grid-row: 1; align-self: end; text-align: left; } #workdayTimer:not(.hidden) #workdayCorrectStartArea { grid-column: 2; grid-row: 2; justify-content: flex-start !important; align-self: start; } #workTimeSection #workdayTimerValue { color: #172820 !important; font-size: clamp(36px, 8vw, 54px) !important; font-variant-numeric: tabular-nums; letter-spacing: .025em; } #workdayCorrectStartArea input { width: auto !important; } #workdayCorrectStartArea button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; } #workdayCorrectStartArea button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .workday-launch { display: grid; grid-template-columns: 196px minmax(0, 1fr); align-items: center; gap: clamp(22px, 5vw, 56px); min-height: 224px; margin: 0 !important; padding: 22px clamp(18px, 4vw, 42px); border: 1px solid #dbece0; border-radius: 20px; background: radial-gradient(ellipse at 11% 50%, #e5f7eb 0, #f7fbf8 36%, var(--ui-surface-soft) 100%); } #appInterface[data-theme="dark"] .workday-launch { border-color: #315542; background: radial-gradient(ellipse at 11% 50%, #20392b 0, #1c2b25 38%, var(--ui-surface-soft) 100%); } #workdayStartBtn.workday-start-button, #workdayStopBtn { position: relative; width: 184px; height: 184px; min-height: 184px; display: grid; place-items: center; padding: 10px !important; border: 6px solid rgba(255,255,255,.82) !important; border-radius: 50% !important; color: #fff !important; background: radial-gradient(circle at 32% 20%, #64d98b 0%, #27ad5c 28%, #18864b 68%, #0f6336 100%) !important; box-shadow: 0 5px 0 #0b5d32, 0 11px 20px rgba(17,104,58,.23), inset 0 2px 2px rgba(255,255,255,.54), inset 0 -5px 8px rgba(0,52,25,.28); cursor: pointer; transition: transform .16s ease, box-shadow .16s ease, filter .16s ease; } #workdayStartBtn.workday-start-button:hover { filter: brightness(1.06); transform: translateY(-2px); box-shadow: 0 7px 0 #0b5d32, 0 15px 25px rgba(17,104,58,.28), inset 0 2px 2px rgba(255,255,255,.6), inset 0 -5px 8px rgba(0,52,25,.25); } #workdayStartBtn.workday-start-button:active { transform: translateY(4px); box-shadow: 0 1px 0 #0b5d32, 0 5px 12px rgba(17,104,58,.2), inset 0 3px 8px rgba(0,52,25,.2); } .workday-start-face { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; text-align: center; text-shadow: 0 1px 2px rgba(0,55,25,.5); } .workday-power-icon { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 1px rgba(0,40,18,.25)); } .workday-start-face > span { max-width: 125px; font-size: 12px; font-weight: 850; line-height: 1.25; letter-spacing: .07em; } #workdayStopBtn { margin: 20px auto 18px; border-color: rgba(255,255,255,.82) !important; background: radial-gradient(circle at 32% 20%, #f48d8d 0%, #d94f53 30%, #b52d35 70%, #851e27 100%) !important; box-shadow: 0 5px 0 #7d2027, 0 11px 20px rgba(150,31,39,.23), inset 0 2px 2px rgba(255,255,255,.54), inset 0 -5px 8px rgba(65,0,4,.25); } .workday-launch-options { max-width: 390px; } .workday-launch-kicker { color: #477257; font-size: 11px; font-weight: 850; letter-spacing: .13em; } .workday-launch-options p { margin: 7px 0 18px; color: var(--ui-ink); font-size: clamp(17px, 2.4vw, 21px); font-weight: 650; letter-spacing: -.02em; } #appInterface[data-theme="dark"] .workday-launch-kicker { color: #99d4a9; } .workday-setup-button { min-height: 46px; display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--ui-line); border-radius: 12px; color: var(--ui-ink); background: var(--ui-surface); box-shadow: 0 3px 9px rgba(20,45,30,.06); font-size: 13px; font-weight: 700; cursor: pointer; transition: border-color .15s ease, transform .15s ease; } .workday-setup-button:hover { transform: translateY(-1px); border-color: #9eb6a5; } .workday-setup-button > svg { width: 18px; height: 18px; fill: none; stroke: #568267; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .workday-setup-arrow { margin-left: 10px; color: var(--ui-muted); font-size: 0; line-height: 1; } .workday-setup-arrow::before { content: "\203A"; font-size: 22px; } #workTimeSection #workdayTypeChangePanel { max-width: none !important; color: var(--ui-ink) !important; background: var(--ui-surface-soft) !important; border: 1px solid var(--ui-line) !important; border-radius: 13px !important; } #workdayTypeChangePanel p { color: var(--ui-muted) !important; } #supporterManualPanel { max-width: 560px; margin: 0 auto; padding: 14px 0 4px; } #supporterManualPanel p { color: var(--ui-muted) !important; font-size: 15px !important; } #supporterManualPanel .supporter-manual-btn { min-height: 68px; border-radius: 999px !important; background: var(--ui-green) !important; color: #fff !important; font-size: 17px !important; } /* Time and task destinations */ #overviewDateControls { display: flex; gap: 9px !important; align-items: center; margin-bottom: 16px !important; padding: 12px !important; background: var(--ui-surface-soft) !important; border: 1px solid var(--ui-line); border-radius: 12px !important; } #overviewDateControls label { color: var(--ui-muted) !important; font-size: 12px !important; font-weight: 650; } #overviewDateControls input { min-height: 40px; padding: 7px 10px !important; } #overviewDateControls button { min-height: 38px; padding: 7px 12px !important; border-radius: 9px !important; font-size: 12px !important; } #overviewDateControls button:nth-of-type(1) { background: #263640 !important; color: #fff !important; } #overviewDateControls button:nth-of-type(n+2) { background: #fff !important; color: #465560 !important; border: 1px solid #d8e0e5 !important; } #timeOverviewSection > .section-header > span:last-child { display: none !important; } #workOverviewContainer { color: var(--ui-ink); } #workOverviewContainer .work-overview { color: var(--ui-ink) !important; background: linear-gradient(140deg, #fffbed, #fff) !important; border: 1px solid #eee3b2 !important; border-radius: 15px !important; box-shadow: none !important; } #workOverviewContainer .work-overview h3, #workOverviewContainer .overview-time-unit, #workOverviewContainer .task-breakdown-item .tb-hours { color: #735f00 !important; } #workOverviewContainer .overview-stat .val, #workOverviewContainer .overview-time-number { color: #25323c !important; } #workOverviewContainer .overview-stat .lbl, #workOverviewContainer .payroll-breakdown-col, #workOverviewContainer .norm160-foot, #workOverviewContainer .chart-bar-row .bar-label { color: #66747f !important; } #workOverviewContainer .norm160-panel { background: #fff !important; border-color: var(--ui-line) !important; } #workOverviewContainer .norm160-panel-title { color: #4d687a !important; } #workOverviewContainer .norm160-pct-num, #workOverviewContainer .norm160-pct-suffix { color: #735f00 !important; } #calendarContainer { color: var(--ui-ink); } #calendarContainer table { border-collapse: separate; border-spacing: 0; } #calendarContainer th { color: #465560 !important; background: #f2f5f7 !important; border-color: var(--ui-line) !important; font-size: 12px; } #calendarContainer td { color: #293741 !important; border-color: var(--ui-line) !important; } /* Timer: calmer, graphical period overview and progressive disclosure for the log. */ #overviewDateControls { display: flex !important; flex-wrap: wrap; gap: 10px !important; padding: 14px !important; align-items: end !important; } #overviewDateControls label { display: block; margin: 0 0 4px; } #overviewDateControls input { border: 1px solid var(--ui-line) !important; border-radius: 10px !important; color: var(--ui-ink) !important; background: var(--ui-surface) !important; } #overviewDateControls button:nth-of-type(1) { background: var(--ui-green) !important; border: 0 !important; } #overviewDateControls button { width: auto !important; flex: 0 0 auto; } #overviewDateControls input { width: 155px; } #workOverviewContainer .work-overview { padding: clamp(18px,3vw,28px) !important; background: var(--ui-surface) !important; border: 1px solid var(--ui-line) !important; border-radius: 20px !important; box-shadow: var(--ui-shadow) !important; } #workOverviewContainer .work-overview h3 { margin: 0 0 20px !important; text-align: left !important; color: var(--ui-ink) !important; font-size: 15px !important; letter-spacing: .04em !important; } #workOverviewContainer .overview-stats { display: grid !important; grid-template-columns: repeat(auto-fit,minmax(145px,1fr)); gap: 10px !important; } #workOverviewContainer .overview-stat { min-width: 0; padding: 15px !important; border: 1px solid var(--ui-line) !important; border-radius: 15px !important; background: var(--ui-surface-soft) !important; text-align: left !important; } #workOverviewContainer .overview-stat:last-child { background: color-mix(in srgb,var(--ui-green) 12%,var(--ui-surface)) !important; border-color: color-mix(in srgb,var(--ui-green) 35%,var(--ui-line)) !important; } #workOverviewContainer .overview-stat .val { font-size: clamp(19px,2.5vw,26px) !important; line-height: 1.2; } #workOverviewContainer .overview-stat .lbl { margin-top: 7px; font-size: 12px !important; } #workOverviewContainer .overview-time-value { gap: 2px; } #workOverviewContainer .overview-split-payroll { margin: 16px 0 !important; } #workOverviewContainer .norm160-panel { display: grid; grid-template-columns: minmax(130px,.7fr) minmax(220px,2fr); column-gap: 8px; align-items: center; padding: 16px !important; border-radius: 15px !important; } #workOverviewContainer .norm160-panel-title { grid-column: 1/-1; margin-bottom: 6px; } #workOverviewContainer .norm160-sub, #workOverviewContainer .norm160-axis, #workOverviewContainer .norm160-delta, #workOverviewContainer .norm160-foot { display: none !important; } #workOverviewContainer .norm160-pct-wrap { grid-row: span 2; } #workOverviewContainer .norm160-pct-num { font-size: 34px !important; } #workOverviewContainer .norm160-sub { grid-column: 2; grid-row: 2; } #workOverviewContainer .norm160-bar-track { grid-column: 2; grid-row: 3; height: 12px !important; border-radius: 99px; overflow: hidden; } #workOverviewContainer .norm160-axis, #workOverviewContainer .norm160-delta, #workOverviewContainer .norm160-foot { grid-column: 1/-1; } #workOverviewContainer .work-overview > div[style*="border-top"] { border-top: 0 !important; padding-top: 8px !important; } #workOverviewContainer .work-overview > div[style*="border-top"] > div:first-child { color: var(--ui-muted) !important; letter-spacing: .08em; } #workOverviewContainer .activity-chart { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 9px; } #workOverviewContainer .chart-bar-row { display: grid; grid-template-columns: auto minmax(20px,1fr) auto; align-items: center; gap: 9px; margin: 0; padding: 11px 12px; border: 1px solid var(--ui-line); border-radius: 12px; background: var(--ui-surface-soft); font-size: 12px; } #workOverviewContainer .chart-bar-row .bar-label { width: auto; text-align: left; font-weight: 650; color: var(--ui-ink) !important; } #workOverviewContainer .chart-bar-row .bar-track { height: 9px; border-radius: 99px; background: color-mix(in srgb,var(--ui-green) 13%,var(--ui-surface)); } #workOverviewContainer .chart-bar-row .bar-fill.work { min-width: 5px; border-radius: 99px; background: linear-gradient(90deg,#168447,#57c785); } #workOverviewContainer .chart-bar-row .bar-val { width: auto; color: var(--ui-ink) !important; font-weight: 700; } #workOverviewContainer .activity-empty { grid-column: 1/-1; padding: 24px; border: 1px dashed var(--ui-line); border-radius: 14px; color: var(--ui-muted); text-align: center; } #calendarContainer .month-section { overflow: hidden; border: 1px solid var(--ui-line) !important; border-radius: 18px !important; background: var(--ui-surface) !important; box-shadow: var(--ui-shadow); } #calendarContainer .month-section > div:first-child { padding: 20px !important; color: var(--ui-ink) !important; background: linear-gradient(125deg,color-mix(in srgb,var(--ui-green) 14%,var(--ui-surface)),var(--ui-surface)) !important; border-bottom: 1px solid var(--ui-line) !important; } #calendarContainer .month-section > div:first-child > div:first-child { color: var(--ui-green) !important; letter-spacing: .09em; } #calendarContainer .month-section > div:first-child > div:nth-child(2) { color: var(--ui-ink) !important; font-size: 16px !important; } #calendarContainer .month-section > div:first-child > div:nth-child(3) { color: var(--ui-ink) !important; font-size: clamp(30px,5vw,42px) !important; } #calendarContainer .month-section > div:first-child > div:nth-child(4) { max-width: 700px; margin: 8px auto !important; color: var(--ui-muted) !important; } #calendarContainer .month-section > div:first-child > div:nth-child(5) { flex-wrap: wrap; gap: 8px !important; color: var(--ui-muted) !important; } #calendarContainer .time-day-details { margin: 0 0 8px; border: 1px solid var(--ui-line); border-radius: 13px; background: var(--ui-surface); overflow: hidden; } #calendarContainer .time-day-details[open] { background: var(--ui-surface-soft); } #calendarContainer .time-day-summary { display: flex; min-height: 56px; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 15px; cursor: pointer; list-style: none; } #calendarContainer .time-day-summary::-webkit-details-marker { display: none; } #calendarContainer .time-day-date { color: var(--ui-ink); font-size: 14px; font-weight: 700; text-transform: capitalize; } #calendarContainer .time-day-summary-right { display: flex; align-items: center; gap: 12px; } #calendarContainer .time-day-total { padding: 6px 10px; color: var(--ui-green-dark); background: color-mix(in srgb,var(--ui-green) 12%,var(--ui-surface)); border-radius: 99px; font-size: 12px; font-weight: 750; white-space: nowrap; } #calendarContainer .time-day-chevron { color: var(--ui-muted); transition: transform .2s; } #calendarContainer .time-day-details[open] .time-day-chevron { transform: rotate(180deg); } #calendarContainer .time-day-body { padding: 0 14px 14px; } #calendarContainer .time-day-breakdown { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; } #calendarContainer .time-day-breakdown span { padding: 7px 9px; border: 1px solid var(--ui-line); border-radius: 9px; color: var(--ui-muted); background: var(--ui-surface); font-size: 11px; } #calendarContainer .time-day-breakdown b { color: var(--ui-ink); } #calendarContainer .time-day-body > div[style*="background:rgba(255,255,255"] { border-color: var(--ui-line) !important; background: var(--ui-surface) !important; } #appInterface[data-theme="dark"] #workOverviewContainer .work-overview { background: var(--ui-surface) !important; border-color: var(--ui-line) !important; } #appInterface[data-theme="dark"] #workOverviewContainer .overview-stat { background: var(--ui-surface-soft) !important; border-color: var(--ui-line) !important; } #appInterface[data-theme="dark"] #workOverviewContainer .overview-stat:last-child { background: color-mix(in srgb,var(--ui-green) 20%,var(--ui-surface)) !important; } #appInterface[data-theme="dark"] #workOverviewContainer .overview-stat .val, #appInterface[data-theme="dark"] #workOverviewContainer .overview-time-number, #appInterface[data-theme="dark"] #workOverviewContainer .overview-time-unit { color: var(--ui-ink) !important; } #appInterface[data-theme="dark"] #calendarContainer .month-section > div:first-child { background: linear-gradient(125deg,#203a30,#202a30) !important; } #appInterface[data-theme="dark"] #calendarContainer .time-day-total { color: #a7edbf; } @media (max-width: 600px) { #overviewDateControls { display: grid !important; grid-template-columns: auto minmax(0,1fr); } #overviewDateControls label { grid-column: 1 !important; align-self: center; } #overviewDateControls input { grid-column: 2; width: 100%; min-width: 0; } #overviewDateControls button:nth-of-type(1) { grid-column: 1/-1 !important; width: 100% !important; } #workOverviewContainer .overview-stats { grid-template-columns: repeat(2,minmax(0,1fr)); } #workOverviewContainer .overview-stat { padding: 12px !important; } #workOverviewContainer .norm160-panel { grid-template-columns: 1fr; text-align: center; } #workOverviewContainer .norm160-pct-wrap, #workOverviewContainer .norm160-sub, #workOverviewContainer .norm160-bar-track { grid-column: 1; grid-row: auto; } #workOverviewContainer .activity-chart { grid-template-columns: 1fr; } #calendarContainer .month-section > div:first-child > div:nth-child(5) { justify-content: flex-start !important; } #calendarContainer .time-day-summary { align-items: flex-start; padding: 12px; } #calendarContainer .time-day-date { max-width: 70%; font-size: 13px; } #calendarContainer .time-day-summary-right { gap: 6px; } } #tasksContainer { color: var(--ui-ink); } #tasksContainer .task-card { color: var(--ui-ink) !important; background: #fff !important; border: 1px solid var(--ui-line) !important; border-radius: 14px !important; box-shadow: var(--ui-shadow); } #tasksContainer .task-card h3, #tasksContainer .task-card h4 { color: #202d37 !important; } #tasksContainer .task-card p, #tasksContainer .task-card small { color: #66747f; } #tasksContainer .task-card > div[style*="color:#888"], #tasksContainer .task-card > div[style*="color:#999"], #tasksContainer .task-card > div[style*="color:#bbb"] { color: #5b6974 !important; } #tasksContainer .task-card > div[style*="color:#ffd500"] { color: #725c00 !important; } #tasksContainer .task-card .task-badge-participants { color: #705a00 !important; background: #fff5c4 !important; border-color: #ead77a !important; } #tasksContainer > div > div[style*="color:var(--netto-yellow)"], #tasksContainer > div > div[style*="color:#999"] { color: #596772 !important; } /* More page replaces the persistent floating controls with a clear tool list. */ .more-tools-view { display: none; min-height: 50vh; } .more-tools-heading { margin: 10px 2px 22px; } .more-tools-heading .eyebrow { margin: 0 0 5px; color: #8a7700; font-size: 10px; font-weight: 800; letter-spacing: .12em; } .more-tools-heading h2 { margin: 0; color: var(--ui-ink); font-size: clamp(28px, 4vw, 36px); letter-spacing: -.04em; } .more-tools-heading > p:last-child { margin: 5px 0 0; color: var(--ui-muted); font-size: 14px; } .more-tools-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; } .more-tool-card { min-width: 0; display: flex; align-items: center; gap: 14px; padding: 17px; border: 1px solid var(--ui-line); border-radius: 14px; background: #fff; color: var(--ui-ink); box-shadow: 0 2px 8px rgba(25,42,56,.025); text-align: left; text-decoration: none; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .more-tool-card:hover { border-color: #d3dbe1; } .more-tool-card > span:nth-child(2) { display: grid; gap: 3px; min-width: 0; } .more-tool-card strong { font-size: 14px; font-weight: 750; } .more-tool-card small { color: var(--ui-muted); font-size: 12px; line-height: 1.35; } .more-tool-icon { width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center; border-radius: 12px; font-size: 22px; font-weight: 700; } .icon-yellow { background: #fff5c6; color: #755f00; } .icon-blue { background: #e9f2ff; color: #3167a6; } .icon-violet { background: #f1edff; color: #7356b6; } .icon-green { background: #e7f5ec; color: #237647; } .icon-orange { background: #fff0e4; color: #a75b1c; } .icon-gray { background: #edf1f3; color: #586773; } .more-tool-arrow { margin-left: auto; color: #94a0a9; font-size: 24px; } .more-tool-logout { color: #a83a3e; } .more-license-link { margin-top: 20px; padding: 6px 2px; border: 0; background: none; color: var(--ui-muted); font-size: 12px; text-decoration: underline; cursor: pointer; } /* No floating side tabs: navigation and More page are the entry points. */ #reminderDrawerTab, #vacationDrawerTab { display: none !important; } #chatContainer.chat-minimized { display: none !important; } #chatContainer:not(.chat-minimized) { z-index: 1200; } #reminderDrawer, #vacationDrawer { box-shadow: -12px 0 36px rgba(10,20,30,.16); background: #fff !important; border-left: 1px solid var(--ui-line) !important; } #reminderDrawer .reminder-header, #vacationDrawer .vacation-header { background: #f7f9fa !important; border-bottom-color: var(--ui-line) !important; } #reminderDrawer .reminder-body, #vacationDrawer .vacation-body { color: var(--ui-ink); } #reminderDrawer .reminder-header > div > div:first-child { color: #735f00 !important; } #reminderDrawer .reminder-header button, #vacationDrawer .vacation-header button { background: #edf1f3 !important; color: #35434d !important; } #reminderDrawer .reminder-item { color: var(--ui-ink); background: #fff !important; border-color: var(--ui-line) !important; } #reminderDrawer .reminder-title { color: var(--ui-ink); } #reminderDrawer .reminder-input { background: #fff !important; color: var(--ui-ink) !important; border-color: #cfd8df !important; } #reminderDrawer .reminder-empty, #vacationDrawer .vacation-empty { color: #687783 !important; } #vacationDrawer .calendar-section-title { color: #735f00 !important; border-color: var(--ui-line) !important; } #vacationDrawer .vacation-form label { color: #53616c !important; font-weight: 650; } #vacationDrawer .vacation-preview { color: #735f00 !important; } #vacationDrawer .vacation-submit-btn { background: var(--ui-green) !important; border-radius: 10px !important; } #vacationDrawer .vacation-item, #vacationDrawer .calendar-appointment-item, #vacationDrawer .team-vacation-item { background: #fff !important; border-color: var(--ui-line) !important; } #vacationDrawer .vacation-item-dates, #vacationDrawer .calendar-appointment-title { color: var(--ui-ink) !important; } #vacationDrawer .vacation-item-meta { color: #687783 !important; } #vacationDrawer .vacation-edit-btn { color: #365e9d !important; } #vacationDrawer [style*="color:#888"] { color: #65727c !important; } /* Floating chat opens only when selected from More (or from a task conversation). */ #chatContainer:not(.chat-minimized) { background: #fff !important; border-color: var(--ui-line) !important; box-shadow: 0 16px 44px rgba(20,32,44,.18) !important; } #chatContainer .chat-header { background: #263640 !important; color: #fff !important; } #chatContainer .chat-tabs, #chatContainer .chat-popup-toggle { background: #f2f5f6 !important; color: #53616c !important; border-color: var(--ui-line) !important; } #chatContainer .chat-tab { color: #687783 !important; } #chatContainer .chat-tab.active { background: #fff !important; color: #263640 !important; } #chatContainer .chat-messages { background: #fff !important; } #chatContainer .msg-received { background: #eef2f4 !important; color: #263640 !important; } #chatContainer .chat-input-area { background: #fff !important; border-color: var(--ui-line) !important; } #chatContainer .chat-input { background: #fff !important; color: var(--ui-ink) !important; border-color: #cfd8df !important; } #chatContainer .tech-item-chat { color: var(--ui-ink) !important; border-color: var(--ui-line) !important; } /* Modal surfaces retain the current forms and their existing behavior. */ [id$="Modal"] > .login-card, #licenseInfoModal > div { max-height: min(90dvh, 820px); overflow-y: auto; background: #fff !important; color: var(--ui-ink) !important; border: 1px solid var(--ui-line) !important; border-radius: 18px !important; box-shadow: 0 24px 70px rgba(10,20,30,.24); } [id$="Modal"] h3 { color: var(--ui-ink) !important; } .login-card [style*="background:#111"], .login-card [style*="background:#1a1a1a"] { background: #f6f8f9 !important; } .login-card [style*="border:1px solid #333"] { border-color: var(--ui-line) !important; } .login-card [style*="color:#ccc"], .login-card [style*="color:#ddd"], .login-card [style*="color:#bbb"] { color: #4b5964 !important; } .login-card [style*="color:#999"], .login-card [style*="color:#888"] { color: #687783 !important; } #profileModal #profileInfo { background: #f6f8f9 !important; border-color: var(--ui-line) !important; } #profileModal #profileInfoContent, #profileModal h4 { color: #35434d !important; } /* The stop-workday modal is outside #appInterface, so theme its native inputs at document level. */ html[data-app-theme="dark"] { color-scheme: dark; --ui-bg: #11171b; --ui-surface: #1b242a; --ui-surface-soft: #222d34; --ui-ink: #e7edf0; --ui-muted: #a1afb7; --ui-line: #34424a; --input-bg: #151d22; --border-color: #34424a; } html[data-app-theme="dark"] #stopWorkdayModal > .login-card { background: #1b242a !important; color: #e7edf0 !important; border-color: #46565f !important; } html[data-app-theme="dark"] #stopWorkdayModal h3 { color: #f0f4f6 !important; } html[data-app-theme="dark"] #stopWorkdayModal p { color: #b5c0c6 !important; } html[data-app-theme="dark"] #stopWorkdayModal .form-group label, html[data-app-theme="dark"] #stopWorkdayModal > .login-card > label { color: #d3dce1 !important; } html[data-app-theme="dark"] #stopWorkdayModal input:not([type="checkbox"]), html[data-app-theme="dark"] #stopWorkdayModal textarea, html[data-app-theme="dark"] #stopWorkdayModal select { color: #edf2f5 !important; background-color: #151d22 !important; border: 1px solid #71818a !important; } html[data-app-theme="dark"] #stopWorkdayModal input::placeholder, html[data-app-theme="dark"] #stopWorkdayModal textarea::placeholder { color: #a9b6bd !important; opacity: 1; } html[data-app-theme="dark"] #stopWorkdayModal input[type="datetime-local"]::-webkit-datetime-edit { color: #edf2f5; } html[data-app-theme="dark"] #stopWorkdayModal input[type="datetime-local"]::-webkit-calendar-picker-indicator { filter: invert(.88); } /* Mobile: app-like bottom navigation and generous touch controls. */ @media (max-width: 680px) { .header.app-header { min-height: 58px; padding: 8px 15px !important; } .app-brand h1 { font-size: 13px !important; } #appLangSelector select { max-width: 104px; min-height: 36px; font-size: 12px; } .theme-toggle { min-height: 36px; padding: 6px 9px; } .theme-toggle-label { display: none; } .container { padding: 15px 14px calc(100px + env(safe-area-inset-bottom, 0px)) !important; } #appInterface > .container > div:first-child { margin: 0 3px 12px !important; } #userName { font-size: 14px; } #workdayStatus { min-width: 0; max-width: min(64%, 235px); min-height: 45px; } .app-main-nav { position: fixed; z-index: 1300; right: 0; bottom: 0; left: 0; width: 100%; justify-content: space-around; gap: 2px; margin: 0; padding: 7px 8px calc(7px + env(safe-area-inset-bottom, 0px)); border: 0; border-top: 1px solid #e3e8eb; border-radius: 16px 16px 0 0; background: rgba(255,255,255,.97); box-shadow: 0 -5px 22px rgba(25,42,56,.09); backdrop-filter: blur(16px); } #appInterface[data-theme="dark"] .app-main-nav { background: rgba(27,36,42,.97); border-top-color: var(--ui-line); } .app-nav-item { min-width: 0; min-height: 56px; flex: 1 1 0; flex-direction: column; gap: 1px; padding: 6px 3px; border-radius: 11px; font-size: 10px; } .app-nav-icon { font-size: 21px; } .main-section { padding: 17px !important; margin-bottom: 13px !important; border-radius: 15px !important; } .section-header { gap: 8px; margin-bottom: 16px !important; padding-bottom: 13px !important; font-size: 16px; } .workday-launch { grid-template-columns: 1fr; justify-items: center; gap: 16px; padding: 20px 15px; } #workdayStartBtn.workday-start-button { width: 192px; height: 192px; min-height: 192px; } #workTimeSection #workdayTimer:not(.hidden) { grid-template-columns: 112px minmax(0, 1fr); column-gap: 12px; padding: 12px !important; } #workdayTimer:not(.hidden) #workdayStopBtn { width: 108px; height: 108px; min-height: 108px; padding: 5px !important; font-size: 11px !important; } #workdayTimer:not(.hidden) #workdayTimerValue { font-size: clamp(24px, 6.5vw, 30px) !important; } #workdayTimer:not(.hidden) #workdayCorrectStartArea { gap: 6px; } #workdayTimer:not(.hidden) #workdayCorrectStartArea input { width: 100% !important; max-width: 100%; min-width: 0; } .workday-launch-options { width: 100%; text-align: center; } .workday-launch-options p { margin: 5px 0 13px; font-size: 16px; } .workday-setup-button { width: min(100%, 300px); justify-content: center; } #overviewDateControls { display: grid !important; grid-template-columns: auto minmax(0,1fr); align-items: center; } #overviewDateControls label:nth-of-type(2) { grid-column: 1; } #overviewDateControls input { width: 100%; min-width: 0; } #overviewDateControls button { min-height: 42px; } #overviewDateControls button:nth-of-type(1) { grid-column: 1 / -1; } .more-tools-grid { grid-template-columns: minmax(0,1fr); gap: 9px; } .more-tool-card { min-height: 74px; padding: 13px; } #reminderDrawer, #vacationDrawer { top: auto !important; right: 0 !important; bottom: 0 !important; left: 0 !important; width: 100% !important; height: min(86dvh, 760px) !important; padding-bottom: env(safe-area-inset-bottom, 0px); border: 1px solid var(--ui-line) !important; border-radius: 20px 20px 0 0; transform: translateY(105%) !important; } #reminderDrawer.open, #vacationDrawer.open { transform: translateY(0) !important; } #chatContainer:not(.chat-minimized) { right: 8px !important; bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important; width: calc(100vw - 16px) !important; max-width: 440px; height: min(70dvh, 560px) !important; } [id$="Modal"] > .login-card { width: 100% !important; max-width: none !important; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }