/* Worklog Pro — Phase 1 mobile-first shell & theme tokens. Additive & namespaced (.pwa-*) to avoid breaking existing page styles. */ :root { --pwa-brand: #0066CC; --pwa-brand-2: #0a84ff; --pwa-bg: #f4f6fb; --pwa-surface: #ffffff; --pwa-fg: #1f2937; --pwa-muted: #6b7280; --pwa-border: #e5e7eb; --pwa-nav-h: 64px; --pwa-safe-b: env(safe-area-inset-bottom, 0px); --pwa-shadow: 0 6px 20px rgba(17, 24, 39, .08); } /* Dark-mode architecture (opt-in via ; not auto-applied — light by default) */ html[data-theme="dark"] { --pwa-bg: #0f172a; --pwa-surface: #1e293b; --pwa-fg: #e5e7eb; --pwa-muted: #94a3b8; --pwa-border: #334155; --pwa-shadow: 0 6px 20px rgba(0, 0, 0, .4); } /* ---- Safe global touches (mobile-first, non-destructive) ---- */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } html, body { overflow-x: hidden; overscroll-behavior-y: none; } @media (max-width: 768px) { /* keep content clear of the bottom nav */ body.pwa-has-nav { padding-bottom: calc(var(--pwa-nav-h) + var(--pwa-safe-b) + 8px) !important; } /* comfortable tap targets on phones */ body.pwa-has-nav button, body.pwa-has-nav .btn, body.pwa-has-nav input:not([type="checkbox"]):not([type="radio"]), body.pwa-has-nav select, body.pwa-has-nav textarea { min-height: 44px; } } /* ---- Bottom navigation (mobile) ---- */ .pwa-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; display: none; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: stretch; background: var(--pwa-surface); border-top: 1px solid var(--pwa-border); padding-bottom: var(--pwa-safe-b); box-shadow: 0 -4px 16px rgba(17, 24, 39, .06); } .pwa-nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 8px 2px; min-height: var(--pwa-nav-h); color: var(--pwa-muted); text-decoration: none; font-size: 10.5px; font-weight: 600; transition: color .15s ease, transform .1s ease; -webkit-tap-highlight-color: transparent; } .pwa-nav-item svg { width: 23px; height: 23px; stroke: currentColor; fill: none; stroke-width: 1.9; } .pwa-nav-item:active { transform: scale(.94); } .pwa-nav-item.active { color: var(--pwa-brand); } .pwa-nav-item.active svg { stroke: var(--pwa-brand); } @media (max-width: 768px) { .pwa-nav { display: grid; } } /* Hide the legacy top menu for logged-in users (replaced by the PWA nav) */ body.pwa-has-nav .nav { display: none !important; } /* Secondary links (visible in the desktop sidebar only) */ .pwa-nav-more { display: none; } @media (min-width: 769px) { .pwa-nav-more { display: flex; flex-direction: column; gap: 2px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--pwa-border); } .pwa-nav-more a { color: var(--pwa-muted); font-size: 13px; text-decoration: none; padding: 8px 14px; border-radius: 10px; } .pwa-nav-more a:hover { background: var(--pwa-bg); color: var(--pwa-fg); } } /* Brand header (desktop sidebar only) */ .pwa-nav-brand { display: none; align-items: center; gap: 10px; padding: 6px 14px 14px; font-weight: 800; font-size: 17px; color: var(--pwa-fg); } .pwa-nav-brand .pwa-logo { width: 32px; height: 32px; border-radius: 9px; background: linear-gradient(135deg, var(--pwa-brand), var(--pwa-brand-2)); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 16px; } /* Desktop: left navigation sidebar */ @media (min-width: 769px) { .pwa-nav { display: flex; flex-direction: column; top: 0; bottom: 0; right: auto; width: 220px; border-top: 0; border-right: 1px solid var(--pwa-border); padding: 14px 10px; gap: 4px; box-shadow: 2px 0 16px rgba(17, 24, 39, .04); } .pwa-nav-brand { display: flex; } .pwa-nav-item { flex-direction: row; justify-content: flex-start; gap: 14px; min-height: 48px; padding: 10px 14px; border-radius: 12px; font-size: 14px; } .pwa-nav-item span { font-size: 14px; } .pwa-nav-item.active { background: rgba(0, 102, 204, .10); } body.pwa-has-nav { margin-left: 220px; margin-right: auto; } .wf-save { left: 220px; } } /* Legacy render() pages: light surface separation + button-styled links + tidy filter */ a.btn, a.btn-success, a.btn-danger, a.btn-primary { display: inline-block; padding: 9px 15px; border-radius: 10px; text-decoration: none; color: #fff; font-weight: 600; } a.btn { background: #2563eb; } .te-filter { background: var(--pwa-surface); border: 1px solid var(--pwa-border); border-radius: 14px; padding: 14px; margin: 12px 0 16px; box-shadow: var(--pwa-shadow); display: flex; flex-wrap: wrap; gap: 12px; align-items: end; } .te-filter label { display: flex; flex-direction: column; gap: 4px; margin: 0; font-size: 12px; font-weight: 600; color: var(--pwa-muted); } .te-filter input, .te-filter select { width: auto; min-width: 130px; margin: 0; padding: 9px 11px; } .te-filter .te-actions { display: flex; gap: 8px; align-items: center; } /* ---- Theme segmented control (Profile > Apparence) ---- */ .wp-theme-seg { display: inline-flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; } .wp-theme-seg button { padding: 9px 14px; border-radius: 10px; border: 1px solid var(--pwa-border); background: var(--pwa-surface); color: var(--pwa-fg); font-weight: 600; font-size: 13px; cursor: pointer; } .wp-theme-seg button.active { background: var(--pwa-brand); color: #fff; border-color: var(--pwa-brand); } /* ---- Full dark theming for legacy pages (hardcoded colors) ---- */ html[data-theme="dark"] body { background: #0f172a !important; color: #e5e7eb; } html[data-theme="dark"] .container-main, html[data-theme="dark"] .card, html[data-theme="dark"] .mfa-card, html[data-theme="dark"] .stat-card, html[data-theme="dark"] .counter, html[data-theme="dark"] .modal-content, html[data-theme="dark"] .dash-stat, html[data-theme="dark"] .dash-panel, html[data-theme="dark"] .dash-card, html[data-theme="dark"] .ui-card, html[data-theme="dark"] .ui-tile { background: #1e293b !important; color: #e5e7eb; border-color: #334155 !important; } html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] .value, html[data-theme="dark"] .stat-value, html[data-theme="dark"] .dash-num { color: #e5e7eb !important; } html[data-theme="dark"] .small, html[data-theme="dark"] .label, html[data-theme="dark"] .stat-label, html[data-theme="dark"] .dash-lbl, html[data-theme="dark"] .ui-tile-sub { color: #94a3b8 !important; } html[data-theme="dark"] .table { color: #e5e7eb; } html[data-theme="dark"] .table > :not(caption) > * > * { background: transparent; color: #e5e7eb; border-color: #334155; } html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * { background: rgba(255, 255, 255, .04); color: #e5e7eb; } html[data-theme="dark"] table thead th { background: #0b3d73 !important; color: #e5e7eb; } html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea, html[data-theme="dark"] .form-control, html[data-theme="dark"] .email-input { background: #0f172a !important; color: #e5e7eb !important; border-color: #334155 !important; } html[data-theme="dark"] .filters-bar input, html[data-theme="dark"] .quick-filters button { background: #0f172a; color: #e5e7eb; border-color: #334155; } html[data-theme="dark"] a { color: #7cb3ff; } html[data-theme="dark"] .resp-table tr { background: #1e293b; border-color: #334155; } /* ---- Mini bar chart (dashboard) ---- */ .dash-chart { display: flex; align-items: stretch; gap: 8px; height: 150px; padding: 8px 2px 0; } .dash-col { flex: 1; display: flex; flex-direction: column; align-items: center; } .dash-bar-wrap { width: 100%; flex: 1; display: flex; align-items: flex-end; } .dash-bar { width: 66%; margin: 0 auto; background: linear-gradient(180deg, var(--pwa-brand-2), var(--pwa-brand)); border-radius: 6px 6px 0 0; min-height: 3px; transition: height .5s ease; } .dash-bar-v { font-size: 11px; font-weight: 700; margin-top: 5px; } .dash-bar-lbl { font-size: 10px; color: var(--pwa-muted); } /* ---- Floating-label fields ---- */ .ff { position: relative; margin: 16px 0 0; } .ff input, .ff textarea { width: 100%; padding: 20px 14px 7px; border: 1px solid var(--pwa-border); border-radius: 12px; font-size: 16px; background: var(--pwa-surface); color: var(--pwa-fg); font-family: inherit; } .ff.ff-area textarea { padding-top: 24px; resize: vertical; } .ff label { position: absolute; left: 14px; top: 15px; margin: 0; color: var(--pwa-muted); font-size: 16px; font-weight: 400; pointer-events: none; transition: all .14s ease; } .ff input:focus, .ff textarea:focus { outline: 2px solid var(--pwa-brand); outline-offset: 0; border-color: var(--pwa-brand); } .ff input:focus + label, .ff input:not(:placeholder-shown) + label, .ff textarea:focus + label, .ff textarea:not(:placeholder-shown) + label { top: 6px; font-size: 11px; color: var(--pwa-brand); font-weight: 700; } /* ---- Floating action button ---- */ .pwa-fab { position: fixed; right: 16px; z-index: 1001; bottom: calc(var(--pwa-nav-h) + var(--pwa-safe-b) + 16px); width: 56px; height: 56px; border-radius: 18px; background: linear-gradient(135deg, var(--pwa-brand), var(--pwa-brand-2)); color: #fff; display: none; align-items: center; justify-content: center; text-decoration: none; box-shadow: 0 10px 24px rgba(0, 102, 204, .4); border: 0; transition: transform .12s ease; } .pwa-fab svg { width: 26px; height: 26px; stroke: #fff; fill: none; stroke-width: 2.4; } .pwa-fab:active { transform: scale(.92); } @media (max-width: 768px) { .pwa-fab.show { display: flex; } } /* ---- Offline banner ---- */ .pwa-offline { position: fixed; left: 50%; transform: translateX(-50%); top: calc(env(safe-area-inset-top, 0px) + 10px); z-index: 1100; background: #b91c1c; color: #fff; padding: 9px 16px; border-radius: 999px; font: 600 13px system-ui, sans-serif; box-shadow: var(--pwa-shadow); display: none; align-items: center; gap: 8px; } .pwa-offline.show { display: inline-flex; } .pwa-offline::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff; opacity: .85; } /* ---- Toasts ---- */ .pwa-toasts { position: fixed; left: 0; right: 0; z-index: 1200; bottom: calc(var(--pwa-nav-h) + var(--pwa-safe-b) + 20px); display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; padding: 0 12px; } .pwa-toast { pointer-events: auto; max-width: 480px; width: fit-content; background: #111827; color: #fff; padding: 12px 16px; border-radius: 12px; font: 500 14px system-ui, sans-serif; box-shadow: var(--pwa-shadow); display: flex; align-items: center; gap: 10px; animation: pwa-toast-in .22s ease; } .pwa-toast.success { background: #15803d; } .pwa-toast.error { background: #b91c1c; } .pwa-toast.warning { background: #b45309; } .pwa-toast.info { background: #1d4ed8; } .pwa-toast.hide { animation: pwa-toast-out .2s ease forwards; } @keyframes pwa-toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes pwa-toast-out { to { opacity: 0; transform: translateY(10px); } } /* ---- Install chip ---- */ .pwa-install { position: fixed; z-index: 1100; left: 50%; transform: translateX(-50%); bottom: calc(var(--pwa-nav-h) + var(--pwa-safe-b) + 20px); display: none; align-items: center; gap: 8px; background: var(--pwa-brand); color: #fff; border: 0; cursor: pointer; padding: 11px 18px; border-radius: 999px; font: 600 14px system-ui, sans-serif; box-shadow: var(--pwa-shadow); } .pwa-install.show { display: inline-flex; } .pwa-install svg { width: 18px; height: 18px; stroke: #fff; fill: none; stroke-width: 2; } @media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; transition-duration: .001ms !important; } } /* ---- Reusable mobile-first UI primitives (cards / lists / badges / timeline / camera) ---- */ .ui-list { display: flex; flex-direction: column; gap: 10px; } .ui-card { background: var(--pwa-surface); border: 1px solid var(--pwa-border); border-radius: 16px; padding: 16px; box-shadow: var(--pwa-shadow); margin-bottom: 14px; } .ui-tile { background: var(--pwa-surface); border: 1px solid var(--pwa-border); border-radius: 16px; padding: 14px 16px; box-shadow: var(--pwa-shadow); transition: transform .12s ease; } .ui-tile:active { transform: scale(.985); } .ui-tile-link { text-decoration: none; color: inherit; display: block; } .ui-tile-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; } .ui-tile-title { font-weight: 700; font-size: 15px; word-break: break-word; } .ui-tile-sub { color: var(--pwa-muted); font-size: 12.5px; margin-top: 2px; } .ui-tile-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; } .ui-amount { font-weight: 800; font-size: 16px; } .ui-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; } .ui-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: var(--pwa-bg); border: 1px solid var(--pwa-border); color: var(--pwa-fg); font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer; } .ui-chip.primary { background: var(--pwa-brand); color: #fff; border-color: var(--pwa-brand); } .ui-chip.danger { background: #dc2626; color: #fff; border-color: #dc2626; } .ui-chip.green { background: #16a34a; color: #fff; border-color: #16a34a; } .ui-thumbs { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .ui-thumb { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; border: 1px solid var(--pwa-border); background: var(--pwa-bg); display: block; } .ui-file { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 9px; background: var(--pwa-bg); font-size: 12px; color: var(--pwa-muted); text-decoration: none; } .ui-tl { list-style: none; margin: 6px 0 0; padding: 0; } .ui-tl li { position: relative; padding: 0 0 16px 22px; } .ui-tl li::before { content: ""; position: absolute; left: 3px; top: 3px; width: 11px; height: 11px; border-radius: 50%; background: var(--pwa-brand); } .ui-tl li::after { content: ""; position: absolute; left: 8px; top: 14px; bottom: 0; width: 2px; background: var(--pwa-border); } .ui-tl li:last-child::after { display: none; } .ui-tl b { font-size: 13.5px; } .ui-tl .t { color: var(--pwa-muted); font-size: 12px; margin-top: 1px; } .ui-cam { display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border-radius: 12px; background: var(--pwa-brand); color: #fff; font-weight: 600; font-size: 14px; border: 0; cursor: pointer; } .ui-cam input { display: none; } /* ---- Work/entry forms (large touch fields + sticky save bar) ---- */ .wf-form { padding-bottom: 92px; } .wf-fields label { display: block; font-weight: 600; font-size: 13px; color: var(--pwa-muted); margin: 14px 0 6px; } .wf-fields input, .wf-fields textarea, .wf-fields select { width: 100%; padding: 13px 14px; border: 1px solid var(--pwa-border); border-radius: 12px; font-size: 16px; background: var(--pwa-surface); color: var(--pwa-fg); font-family: inherit; } .wf-fields input:focus, .wf-fields textarea:focus, .wf-fields select:focus { outline: 2px solid var(--pwa-brand); outline-offset: 0; border-color: var(--pwa-brand); } .wf-fields input:invalid:not(:placeholder-shown) { border-color: #dc2626; } .wf-save { position: fixed; left: 0; right: 0; bottom: calc(var(--pwa-nav-h) + var(--pwa-safe-b)); z-index: 900; padding: 12px 16px; background: var(--pwa-surface); border-top: 1px solid var(--pwa-border); box-shadow: 0 -4px 16px rgba(17, 24, 39, .07); display: flex; justify-content: center; } @media (min-width: 769px) { .wf-save { bottom: 0; padding-bottom: 12px; } } .wf-save button { width: 100%; max-width: 520px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 15px; border: 0; border-radius: 14px; background: #16a34a; color: #fff; font-size: 16px; font-weight: 700; cursor: pointer; } .wf-save button:active { transform: scale(.99); } .wf-spin { width: 18px; height: 18px; border: 2px solid rgba(255, 255, 255, .4); border-top-color: #fff; border-radius: 50%; animation: wf-spin .7s linear infinite; display: none; } button.loading .wf-spin { display: inline-block; } @keyframes wf-spin { to { transform: rotate(360deg); } } /* ---- Responsive tables: real table on desktop, cards on mobile (needs td[data-label]) ---- */ @media (max-width: 768px) { .resp-table thead { position: absolute; left: -9999px; top: -9999px; } .resp-table, .resp-table tbody, .resp-table tr, .resp-table td { display: block; width: 100%; } .resp-table tr { background: var(--pwa-surface); border: 1px solid var(--pwa-border); border-radius: 14px; box-shadow: var(--pwa-shadow); margin-bottom: 10px; padding: 6px 4px; } .resp-table td { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 9px 12px; border: 0 !important; text-align: right; word-break: break-word; } .resp-table td + td { border-top: 1px solid var(--pwa-border) !important; } .resp-table td::before { content: attr(data-label); font-weight: 700; color: var(--pwa-muted); text-align: left; flex: 0 0 38%; white-space: nowrap; } .resp-table td:empty { display: none; } }