.toast.toast-alert { background: var(--theme-raised, #fff0f0); border: 1px solid var(--theme-border, #efc8c8); color: var(--theme-danger-text, #a33f48); font-weight: 650; } :root { --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --color-primary: #1a2340; --color-primary-hover: #283463; --color-primary-soft: #e7e9f2; --color-neutral-50: #fbfaf8; --color-neutral-100: #f5f4f1; --color-neutral-200: #e8e7e4; --color-neutral-400: #a3a39d; --color-neutral-600: #62645f; --color-neutral-800: #30312e; --color-background: #fbfaf8; --color-surface: #ffffff; --color-border: #e8e7e4; --color-text-primary: #171717; --color-text-secondary: #62645f; --color-success: #187443; --color-success-soft: #eaf4ed; --color-warning: #985b12; --color-warning-soft: #fbf2e3; --color-danger: #ad343d; --color-danger-soft: #faeeee; --color-info: #2f6f9f; --color-info-soft: #eaf2f8; --status-to-apply: #69717d; --status-applied: #2563a6; --status-replied: #16756f; --status-interview: #7550a3; --status-offer: #187443; --status-rejected: #ad343d; --status-ghosted: #8a6331; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --shadow-sm: 0 1px 2px rgba(23, 26, 22, .06); --shadow-md: 0 4px 12px rgba(23, 26, 22, .08); --shadow-lg: 0 12px 30px rgba(23, 26, 22, .14); --type-page-title: 24px; --type-section-title: 18px; --type-card-title: 14px; --type-body: 14px; --type-caption: 12px; --type-stat: 30px; --ink: var(--color-text-primary); --muted: var(--color-text-secondary); --line: var(--color-border); --paper: var(--color-background); --navy: var(--color-primary); --navy-deep: #121a33; --navy-soft: var(--color-primary-soft); --green: var(--color-success); --green-soft: var(--color-success-soft); --sand: #f5f0e7; --orange: var(--color-warning); --rose: var(--color-danger); --violet: var(--status-interview); --blue: var(--status-applied); font-family: var(--font-ui); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: var(--ink); background: var(--paper); } * { box-sizing: border-box; } [hidden] { display: none !important; } html { min-height: 100%; } body { margin: 0; min-width: 0; min-height: 100vh; background: var(--paper); } button, input, select, textarea { font: inherit; } dialog, .modal, [role="dialog"], [role="alertdialog"] { font-family: var(--font-ui); } :is(dialog, .modal, [role="dialog"], [role="alertdialog"]) :is(button, input, select, textarea) { font-family: var(--font-ui); } button, label { -webkit-tap-highlight-color: transparent; } button { cursor: pointer; } .app-shell { min-height: 100vh; display: grid; grid-template-columns: 256px minmax(0, 1fr); transition: grid-template-columns .2s ease; } .sidebar-brand-row { display: flex; align-items: center; gap: 8px; margin-bottom: 22px; padding: 0 4px 18px; border-bottom: 1px solid rgba(255,255,255,.13); } .sidebar { position: sticky; z-index: 20; top: 0; align-self: start; height: 100vh; overflow: visible; border-right: 1px solid rgba(255,255,255,.08); background: var(--theme-action, var(--navy)); color: #f2f3f8; padding: 22px 15px 16px; display: flex; flex-direction: column; min-height: 100vh; } .sidebar-backdrop, .mobile-sidebar-close { display: none; } .brand { color: #f2f3f8; text-decoration: none; display: flex; align-items: center; gap: 10px; margin: 0 4px; font-size: 16px; font-weight: 700; min-width: 0; } .sidebar-toggle { width: 29px; height: 29px; flex: 0 0 29px; border: 1px solid rgba(255,255,255,.16); border-radius: 6px; background: rgba(255,255,255,.06); color: #dce0ef; font-size: 19px; line-height: 1; } .sidebar-toggle:hover { border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.14); color: #fff; } .brand-mark { width: 31px; height: 31px; background: var(--navy-soft); color: var(--navy); display: grid; place-items: center; border-radius: 7px; font-weight: 700; font-size: 15px; overflow: hidden; } .brand-mark img { width: 100%; height: 100%; object-fit: contain; display: block; } .main-nav { display: grid; flex: 0 1 auto; gap: 19px; min-height: 0; overflow-y: auto; } .nav-group { display: grid; gap: 5px; } .nav-group-label { margin: 0 11px 5px; color: var(--theme-info-text, #aeb8d0); font-size: 10px; font-weight: 750; letter-spacing: .1em; } .nav-group + .nav-group { border-top: 1px solid rgba(255,255,255,.13); padding-top: 15px; } .nav-link, .sidebar-action { color: var(--theme-info-text, #b6bdd1); border: 0; background: transparent; padding: 10px 12px; min-height: 44px; display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 550; border-radius: 7px; text-decoration: none; text-align: left; transition: background .14s ease, color .14s ease, box-shadow .14s ease; } .nav-link:hover, .sidebar-action:hover { color: #fff; background: rgba(255,255,255,.07); } .nav-link.active { color: #fff; background: rgba(255,255,255,.1); box-shadow: inset 3px 0 0 #b9cec1; font-weight: 700; } .nav-link.to-apply-attention { color: #fff; background: rgba(190, 74, 79, .42); animation: to-apply-attention 1.8s ease-in-out infinite; } .nav-link.to-apply-attention:hover, .nav-link.to-apply-attention.active { background: rgba(205, 82, 87, .58); } @keyframes to-apply-attention { 0%, 100% { box-shadow: inset 3px 0 0 rgba(255, 160, 160, .72); } 50% { box-shadow: inset 3px 0 0 rgba(255, 220, 220, .98); } } .nav-link > span:first-child, .sidebar-action > span:first-child { width: 19px; flex: 0 0 19px; text-align: center; color: var(--theme-info-text, #b7c1d8); font-size: 14px; } .nav-link.active > span:first-child { color: #fff; } .nav-icon { display: inline-grid; place-items: center; font-size: 14px; line-height: 1; } .sidebar .nav-icon { position: relative; } .sidebar .nav-email-dot { position: absolute; top: -3px; right: -4px; width: 7px; height: 7px; border: 1px solid var(--theme-info-border, #1b2340); border-radius: 50%; background: var(--theme-danger-soft, #ef5264); box-shadow: 0 0 0 1px #1b2340; pointer-events: none; } .sidebar .nav-email-dot[hidden] { display: none; } .sidebar-label { font-size: 11px; } .nav-count { color: #e2e9e3; background: rgba(255,255,255,.12); padding: 3px 8px; min-width: 24px; text-align: center; font-size: 10px; font-weight: 700; border-radius: 10px; margin-left: auto; font-variant-numeric: tabular-nums; } .nav-link.active .nav-count { color: #fff; background: rgba(255,255,255,.16); } .sidebar-bottom { border-top: 1px solid rgba(255,255,255,.13); padding-top: 12px; margin-top: auto; display: grid; gap: 3px; } .sidebar-action { width: 100%; } .import-label { cursor: pointer; } .sidebar-utility-menu { position: relative; } .sidebar-utility-trigger { justify-content: flex-start; color: #dce1ed; } .sidebar-utility-trigger:hover, .sidebar-utility-trigger[aria-expanded="true"] { background: rgba(255,255,255,.1); color: #fff; } .sidebar-utility-trigger > span:first-child { letter-spacing: 0; } .sidebar-utility-trigger .sidebar-label { flex: 1; color: inherit; font-size: 12px; font-weight: 650; } .sidebar-utility-chevron { margin-left: auto; color: var(--theme-info-text, #9da8c2); font-size: 10px; transition: transform .14s ease; } .sidebar-utility-trigger[aria-expanded="true"] .sidebar-utility-chevron { transform: rotate(180deg); } .sidebar-utility-panel { position: absolute; z-index: 35; right: 0; bottom: calc(100% + 8px); width: 210px; padding: 7px; border: 1px solid rgba(255,255,255,.13); border-radius: 8px; background: var(--navy-deep); box-shadow: 0 12px 30px rgba(0,0,0,.28); } .sidebar-utility-panel .sidebar-action { display: flex; justify-content: flex-start; align-items: center; gap: 10px; min-height: 38px; padding: 8px 10px; border-radius: 5px; color: #e1e5f0; font-size: 12px; font-weight: 550; } .sidebar-utility-panel .sidebar-action > span:first-child { display: grid; place-items: center; width: 18px; flex: 0 0 18px; color: var(--theme-info-text, #aeb9d2); font-size: 13px; } .sidebar-utility-panel .sidebar-label { display: block; min-width: 0; color: inherit; font-size: 12px; line-height: 1.2; } .sidebar-utility-panel .sidebar-action:hover { background: rgba(255,255,255,.09); color: #fff; } .sidebar-utility-panel .sidebar-action:focus-visible { outline: 2px solid var(--theme-info-border, #aeb9d2); outline-offset: -2px; } .sidebar-utility-separator { display: block; height: 1px; margin: 5px 8px; background: rgba(255,255,255,.13); } .sidebar-utility-panel #logoutButton { color: #edc3c6; } .sidebar-utility-panel #logoutButton > span:first-child { color: var(--theme-danger-text, #d9959a); } .sidebar-utility-panel #logoutButton:hover { background: rgba(183,100,105,.16); color: #ffe8e9; } @media (min-width: 721px) { .sidebar-collapsed .app-shell { grid-template-columns: 76px minmax(0, 1fr); } .sidebar-collapsed .sidebar { padding-left: 12px; padding-right: 12px; } .sidebar-collapsed .sidebar-brand-row { justify-content: center; } .sidebar-collapsed .brand { margin: 0; display: none; } .sidebar-collapsed .brand-label, .sidebar-collapsed .nav-label, .sidebar-collapsed .sidebar-label { display: none; } .sidebar-collapsed .nav-group-label { display: none; } .sidebar-collapsed .sidebar-utility-panel .sidebar-label { display: inline; } .sidebar-collapsed .sidebar-utility-trigger .sidebar-label, .sidebar-collapsed .sidebar-utility-chevron { display: none; } .sidebar-collapsed .sidebar-utility-panel .sidebar-action { justify-content: flex-start; padding-left: 10px; padding-right: 10px; } .sidebar-collapsed .sidebar-utility-panel { right: auto; bottom: 0; left: calc(100% + 20px); } .sidebar-collapsed .sidebar-toggle { margin-left: 0; } .sidebar-collapsed .nav-link, .sidebar-collapsed .sidebar-action { justify-content: center; padding-left: 8px; padding-right: 8px; } .sidebar-collapsed .nav-link > span:first-child, .sidebar-collapsed .sidebar-action > span { margin: 0; } .sidebar-collapsed .nav-count { display: none; } .sidebar-collapsed .nav-group + .nav-group { padding-top: 13px; } html:has(dialog[open]) .sidebar { position: fixed; inset: 0 auto 0 0; width: 256px; height: 100vh; height: 100dvh; min-height: 100vh; min-height: 100dvh; } html:has(dialog[open]) .content { grid-column: 2; } html:has(dialog[open]) body.sidebar-collapsed .sidebar { width: 76px; } } .content { min-width: 0; padding: 0 42px 46px; max-width: 1560px; width: 100%; margin: 0 auto; } .topbar { min-height: 132px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); margin-bottom: 32px; gap: 16px; } .topbar h1 { margin: 3px 0 0; font-size: clamp(27px, 2.5vw, 36px); font-weight: 650; letter-spacing: -.03em; } .page-context { margin: 4px 0 0; color: var(--theme-muted, #777973); font-size: 11px; } .eyebrow { letter-spacing: .12em; color: var(--theme-muted, #81817d); font-size: 10px; font-weight: 750; margin: 0; } .topbar-actions { display: flex; align-items: center; gap: 17px; } .local-indicator { color: var(--theme-muted, #696b66); font-size: 12px; margin: 0; display: flex; align-items: center; gap: 7px; } .local-indicator > span:first-child { width: 7px; height: 7px; flex: 0 0 auto; background: var(--green); border-radius: 100%; } .local-indicator[hidden] { display: none; } .local-indicator.is-saving span:first-child { background: var(--theme-warning-strong, #b77b28); animation: save-indicator-pulse 1s ease-in-out infinite; } .local-indicator.is-saved span:first-child { background: var(--green); } .local-indicator.is-error { color: var(--rose); } .local-indicator.is-error span:first-child { background: var(--rose); } @keyframes save-indicator-pulse { 50% { opacity: .35; } } .button { border: 1px solid transparent; padding: 10px 15px; min-height: 39px; border-radius: 7px; font-weight: 650; font-size: 13px; line-height: 1.3; display: inline-flex; justify-content: center; align-items: center; text-decoration: none; transition: .15s ease; } .button-primary { background: var(--theme-action, var(--navy)); color: white; box-shadow: 0 1px 1px rgba(0,0,0,.08); } .button-primary:hover { background: var(--theme-info-strong, #283463); transform: translateY(-1px); } .button-secondary { background: var(--theme-surface, white); color: var(--theme-text, #3b3d39); border-color: var(--theme-border, #deded9); } .button-secondary:hover { border-color: var(--theme-border, #9c9c96); background: var(--theme-surface, #fff); } .text-button { border: 0; background: transparent; color: var(--navy); font-size: 12px; font-weight: 700; padding: 5px 0; } .text-button:hover { text-decoration: underline; } .mobile-menu { display: none; background: transparent; border: 0; font-size: 22px; padding: 4px; } .view { display: none; } .view.active { display: block; animation: enter .22s ease both; } @keyframes enter { from { opacity: .25; transform: translateY(4px); } to { opacity: 1; transform: none; } } .dashboard-switcher { display: flex; gap: 8px; margin: 0 0 22px; padding-bottom: 10px; border-bottom: 1px solid var(--line); } .dashboard-switcher-tab { padding: 9px 13px; border: 1px solid rgb(26, 35, 64); border-radius: 6px; background: var(--theme-surface, #fff); color: rgb(26, 35, 64); font-size: 12px; font-weight: 650; cursor: pointer; } .dashboard-switcher-tab:hover, .dashboard-switcher-tab.active { background: rgb(26, 35, 64); color: #fff; } .dashboard-switcher-tab:focus-visible { outline: 2px solid rgba(26, 35, 64, .55); outline-offset: 2px; } .dashboard-tab-panel[hidden] { display: none; } .stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 15px; margin-bottom: 28px; } .client-dashboard-stat-grid { grid-template-columns: repeat(auto-fit, minmax(210px, 280px)); } .client-dashboard-stat-grid .stat-card { border-color: rgb(26, 35, 64); } .client-dashboard-stat-grid .stat-card-link { width: 100%; color: #fff; font-family: inherit; text-align: left; cursor: pointer; } .client-dashboard-stat-grid .stat-card-link:focus-visible { outline: 2px solid rgba(26, 35, 64, .55); outline-offset: 2px; } .client-dashboard-stat-grid .client-dashboard-ended-card { background: var(--theme-surface, #fff); color: rgb(26, 35, 64); } .client-dashboard-ended-card .stat-label { color: rgb(26, 35, 64); } .client-dashboard-ended-card > strong { color: rgb(26, 35, 64); } .client-dashboard-ended-card > p { color: var(--theme-muted, #696b66); } .weekly-report-banner { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 18px; padding: 17px 20px; border: 1px solid var(--theme-border, #d9e1e9); border-radius: 10px; background: var(--theme-raised, #f6f9fb); } .weekly-report-banner h2 { margin: 3px 0 4px; color: var(--theme-info-text, #29445a); font-size: 17px; } .weekly-report-banner p:not(.eyebrow) { margin: 0; color: var(--theme-muted, #71808a); font-size: 11px; } .stat-card { background: var(--theme-surface, #fff); border: 1px solid var(--line); border-radius: 10px; min-height: 164px; padding: 20px 20px 16px; display: flex; flex-direction: column; } .stat-card-primary { background: var(--theme-action, var(--navy)); border-color: var(--navy); color: #fff; } .stat-label { display: flex; align-items: center; gap: 7px; color: var(--theme-muted, #6f716e); font-size: 12px; font-weight: 650; } .stat-card-primary .stat-label { color: #c7cbe2; } .stat-icon { font-size: 14px; } .stat-card strong { font-weight: 650; font-size: 42px; letter-spacing: -.03em; line-height: 1.05; margin: auto 0 8px; } .stat-card p { color: var(--theme-muted, #868782); font-size: 11px; margin: 0; line-height: 1.4; } .stat-card-primary p { color: var(--theme-info-text, #aeb3d0); } .dashboard-grid { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(290px,.65fr); gap: 16px; margin-bottom: 16px; } .application-weekly-trend { flex: 0 0 auto; min-width: 0; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--theme-border, #e6e8f0); } .application-weekly-trend > header { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; } .application-weekly-trend h3 { margin: 0; color: var(--navy); font-size: 13px; font-weight: 650; } .application-weekly-trend header > span { color: var(--theme-info-text, #748096); font-size: 10px; } .application-weekly-trend-chart { min-width: 0; height: 96px; margin-top: 4px; } .application-weekly-trend-chart svg { display: block; width: 100%; height: 100%; overflow: visible; } .application-weekly-trend-chart text { fill: var(--theme-info-text, #748096); font: 11px var(--font-ui); } .weekly-trend-grid { stroke: #edf0f5; stroke-width: 1; } .weekly-trend-area { fill: #edf1fa; stroke: none; } .weekly-trend-line { fill: none; stroke: var(--theme-info-text, #405887); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; } .weekly-trend-point { fill: var(--theme-info-text, #405887); stroke: #fff; stroke-width: 1; } .application-weekly-trend-empty { display: grid; place-content: center; height: 100%; margin: 0; color: var(--theme-info-text, #748096); text-align: center; font-size: 11px; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) #applicationDashboardPanel > .dashboard-grid.dashboard-overview-carousel { display: flex; flex-direction: column; gap: 7px; min-width: 0; min-height: 0; margin: 0; } .dashboard-overview-navigation { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex: 0 0 28px; } .dashboard-overview-tabs, .dashboard-overview-arrows { display: flex; align-items: center; gap: 4px; } .dashboard-overview-tabs button { border: 0; border-radius: 6px; padding: 5px 9px; background: transparent; color: var(--theme-info-text, #748096); font-size: 11px; font-weight: 600; cursor: pointer; } .dashboard-overview-tabs button[aria-pressed="true"] { background: var(--theme-raised, #e8ecf5); color: var(--navy); } .dashboard-overview-arrows button { width: 28px; height: 28px; padding: 0; border: 1px solid var(--theme-border, #dfe4ee); border-radius: 6px; background: var(--theme-surface, #fff); color: var(--navy); font-size: 20px; line-height: 1; cursor: pointer; } .dashboard-overview-navigation button:focus-visible { outline: 2px solid var(--theme-info-border, #6c7fa8); outline-offset: 2px; } .dashboard-overview-viewport { flex: 1; min-height: 0; min-width: 0; overflow: hidden; border-radius: 12px; } .dashboard-overview-track { display: flex; width: 100%; height: 100%; transition: transform 260ms ease; } #applicationOverviewCarousel[data-section="1"] .dashboard-overview-track { transform: translateX(-100%); } .dashboard-overview-track > .dashboard-overview-page { flex: 0 0 100%; width: 100%; min-width: 0; min-height: 0; margin: 0; box-sizing: border-box; } .dashboard-overview-sources { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr); gap: 12px; } #applicationOverviewCarousel .platform-panel, #applicationOverviewCarousel .status-panel { min-height: 0; overflow: hidden; } #applicationOverviewCarousel .application-weekly-trend { display: flex; flex-direction: column; padding: 12px 16px; border: 1px solid var(--theme-border, #e6e8f0); border-radius: 12px; background: var(--theme-surface, #fff); } #applicationOverviewCarousel .application-weekly-trend-chart { flex: 1; min-height: 0; height: auto; } @media (min-width: 1100px) { body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) #applicationOverviewCarousel .platform-panel, body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) #applicationOverviewCarousel .status-panel { padding: 10px 14px; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) #applicationOverviewCarousel .platform-list { gap: 6px; margin-top: 7px; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) #applicationOverviewCarousel .platform-row { font-size: 11px; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) #applicationOverviewCarousel .donut { width: 88px; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) #applicationOverviewCarousel .status-donut-row { gap: 10px; margin-top: 7px; } } @media (max-width: 1099px) { #applicationOverviewCarousel .dashboard-overview-viewport { flex: none; height: 210px; transition: height 260ms ease; } } @media (max-width: 720px) { #applicationOverviewCarousel .dashboard-overview-sources { grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr 1fr; gap: 10px; } #applicationOverviewCarousel .dashboard-overview-viewport { height: 440px; } #applicationOverviewCarousel[data-section="1"] .dashboard-overview-viewport { height: 210px; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) #applicationOverviewCarousel .platform-panel, body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) #applicationOverviewCarousel .status-panel { min-height: 0; } } @media (prefers-reduced-motion: reduce) { #applicationOverviewCarousel .dashboard-overview-track, #applicationOverviewCarousel .dashboard-overview-viewport { transition: none; } } @media (min-width: 1100px) { body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .recent-panel > .table-wrap { flex: 1 1 0; min-height: 0; overflow: auto; scrollbar-width: thin; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .recent-panel > .table-wrap table { height: auto; } } @media (max-width: 600px) { .application-weekly-trend-chart { height: 96px; } } .interview-calendar-panel { padding: 22px 24px; margin-bottom: 16px; } .calendar-controls { display: flex; align-items: center; gap: 8px; } .calendar-controls strong { min-width: 116px; color: var(--theme-text, #454742); font-size: 12px; text-align: center; } .calendar-controls .icon-button { font-size: 22px; line-height: 1; padding: 1px 6px 4px; } .interview-calendar { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); margin-top: 18px; } .calendar-weekday { padding: 9px 8px; color: var(--theme-muted, #858681); font-size: 9px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); } .calendar-day { min-height: 82px; padding: 8px; background: var(--theme-surface, #fff); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); } .calendar-day.other-month { background: var(--theme-raised, #fafaf8); } .calendar-day-number { color: var(--theme-muted, #666862); font-size: 11px; font-weight: 700; } .calendar-day.today .calendar-day-number { display: inline-grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; background: var(--theme-action, var(--navy)); color: #fff; } .calendar-interviews { display: grid; gap: 4px; margin-top: 7px; } .calendar-interview { display: block; width: 100%; overflow: hidden; border: 0; border-left: 3px solid var(--theme-warning-border, #c28a52); border-radius: 3px; padding: 4px 5px; background: var(--theme-raised, #fff4e8); color: var(--theme-warning-text, #805d36); font-size: 10px; font-weight: 700; text-align: left; text-overflow: ellipsis; white-space: nowrap; } .calendar-interview:hover { background: var(--theme-warning-soft, #fbe8cf); } .calendar-empty { grid-column: 1 / -1; color: var(--theme-muted, #8a8c86); padding: 18px 4px 2px; font-size: 12px; } .panel { background: var(--theme-surface, #fff); border: 1px solid var(--line); border-radius: 10px; } .platform-panel, .status-panel { min-height: 288px; padding: 22px 24px; } .panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; } .panel-heading h2, .email-intro h2 { font-weight: 650; letter-spacing: -.02em; font-size: 23px; margin: 5px 0 0; } .platform-list { margin-top: 26px; display: grid; gap: 13px; } .platform-row { display: grid; grid-template-columns: minmax(85px, 1fr) minmax(120px, 2.2fr) 22px; gap: 12px; align-items: center; font-size: 12px; } .platform-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--theme-text, #4a4b48); } .platform-track { height: 7px; border-radius: 10px; background: var(--theme-raised, #f0f0ed); overflow: hidden; } .platform-track > i { display: block; height: 100%; background: var(--theme-info-strong, #556090); border-radius: inherit; min-width: 4px; } .platform-row strong { font-size: 12px; text-align: right; font-weight: 700; } .empty-chart { color: var(--theme-muted, #8a8c86); font-size: 13px; padding: 39px 0; text-align: center; border: 1px dashed var(--theme-border, #e0e0db); border-radius: 8px; } .status-donut-row { min-height: 190px; display: flex; align-items: center; justify-content: center; gap: 27px; } .donut { width: 126px; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(var(--theme-raised, #eff0ec) 0 100%); position: relative; display: grid; place-items: center; flex: 0 0 auto; } .donut::after { content: ""; position: absolute; inset: 18px; background: var(--theme-surface, white); border-radius: 50%; } .donut span { font-weight: 650; font-size: 25px; z-index: 1; } .status-legend { display: grid; gap: 8px; min-width: 116px; } .legend-item { display: grid; grid-template-columns: 8px 1fr auto; gap: 7px; align-items: center; font-size: 11px; color: var(--theme-muted, #5f605c); } .legend-dot { width: 8px; height: 8px; border-radius: 50%; } .legend-item strong { color: var(--theme-text, #32332f); } .recent-panel { padding: 22px 24px 10px; } .table-wrap { overflow-x: auto; margin: 15px -5px 0; } table { width: 100%; border-collapse: collapse; min-width: 620px; } th { color: var(--theme-muted, #858681); font-weight: 700; letter-spacing: .08em; font-size: 9px; text-align: left; padding: 0 8px 10px; } td { border-top: 1px solid var(--theme-border, #efefec); color: var(--theme-muted, #565752); padding: 13px 8px; font-size: 12px; } tbody tr:hover { background: var(--theme-raised, #f1f2f0); } td:first-child { color: var(--theme-text, #242522); font-weight: 650; } .table-client { display: grid; gap: 2px; } /* Wallet: scoped layout keeps account balances and the ledger readable at every width. */ #walletView { color: var(--theme-info-text, #20283f); } .wallet-intro, .wallet-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .wallet-intro { margin-bottom: 22px; justify-content: flex-end; } .wallet-intro h2 { margin: 0 0 7px; font-size: 20px; } .wallet-intro p, .wallet-section-heading > span, .wallet-hint { color: var(--theme-info-text, #737b8d); font-size: 12px; line-height: 1.6; } .wallet-intro p { margin: 0; } .wallet-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 14px; } .wallet-stat { display: flex; flex-direction: column; gap: 14px; padding: 22px; border: 1px solid var(--theme-border, #e4e7ef); border-radius: 14px; background: var(--theme-surface, #fff); min-width: 0; } .wallet-stat > span { font-size: 12px; font-weight: 600; color: var(--theme-info-text, #626c80); } .wallet-stat i { margin-right: 5px; } .wallet-stat > strong { font-size: clamp(20px, 2vw, 29px); letter-spacing: -.04em; overflow-wrap: anywhere; } .wallet-stat > small { color: var(--theme-info-text, #7b8495); font-size: 11px; } .wallet-stat-balance { background: var(--theme-info-strong, #202a50); border-color: var(--theme-info-border, #202a50); color: #fff; } .wallet-stat-balance > span, .wallet-stat-balance > small { color: #d8dff5; } .wallet-stat-income > strong, .wallet-stat-salary > strong { color: var(--theme-success-text, #24785b); } .wallet-stat-expense > strong { color: var(--theme-danger-text, #ac4960); } .wallet-stat-payable > strong, .wallet-pending { color: var(--theme-warning-text, #9a681f); } .wallet-deadline-overdue { color: var(--theme-danger-text, #ac4960) !important; font-weight: 700; } .wallet-section { margin: 27px 0; } .wallet-section-heading { margin-bottom: 14px; } .wallet-section-heading h3, .wallet-entry-panel h3 { margin: 0; font-size: 16px; } .wallet-accounts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .wallet-account { display: flex; flex-direction: column; gap: 12px; padding: 20px; background: var(--theme-surface, #fff); border: 1px solid var(--theme-border, #e4e7ef); border-radius: 12px; min-width: 0; } .wallet-account > div { display: flex; align-items: center; gap: 10px; } .wallet-account h4 { margin: 0; font-size: 14px; } .wallet-account-mark { display: grid; place-items: center; height: 34px; width: 34px; border-radius: 10px; background: var(--theme-raised, #fff0e6); color: var(--theme-warning-text, #b75c25); font-weight: 750; } .wallet-account-gcash .wallet-account-mark { background: var(--theme-raised, #e9f0ff); color: var(--theme-info-text, #275dcd); } .wallet-account-wise .wallet-account-mark { background: var(--theme-success-soft, #e7f4da); color: var(--theme-success-text, #4c6f22); } .wallet-account > strong { font-size: 23px; overflow-wrap: anywhere; } .wallet-account > span { color: var(--theme-info-text, #7b8495); font-size: 11px; } #walletView .wallet-entry-panel, #walletView .wallet-transactions { padding: 22px; border: 1px solid var(--theme-border, #e4e7ef); border-radius: 14px; background: var(--theme-surface, #fff); margin-bottom: 20px; } .wallet-form-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 20px; } .wallet-form-grid .form-field { min-width: 0; } .wallet-description { grid-column: 1 / -1; } .wallet-form-actions { display: flex; justify-content: flex-end; gap: 10px; } .wallet-actions-panel { position: fixed; inset: 0 0 0 auto; display: flex; flex-direction: column; width: min(420px, 100vw); height: 100dvh; max-width: 100vw; max-height: none; margin: 0; padding: 0; overflow: hidden; border: 1px solid var(--theme-border, #e4e7ef); border-right: 0; border-radius: 16px 0 0 16px; background: var(--theme-surface, #fff); color: var(--ink); box-shadow: -12px 0 36px rgba(17,24,39,.16); } .wallet-actions-panel:not([open]) { display: none; } .wallet-actions-panel[open] { display: flex; } .wallet-actions-panel::backdrop { background: rgba(20,24,20,.43); } .wallet-actions-header { padding: 26px 22px 20px; border-bottom: 1px solid var(--theme-border, #e6e8f0); } .wallet-actions-header h3 { margin: 0; color: var(--navy); font-size: 22px; } .wallet-actions-header p:last-child { margin: 6px 0 0; color: var(--theme-muted, #6b7280); font-size: 13px; overflow-wrap: anywhere; } .wallet-actions-list { display: grid; align-content: start; gap: 10px; padding: 20px; } .wallet-action-button { display: grid; grid-template-columns: 38px minmax(0, 1fr) 16px; align-items: center; gap: 12px; width: 100%; min-height: 72px; padding: 12px 14px; border: 1px solid var(--theme-border, #e4e7ef); border-radius: 10px; background: var(--theme-surface, #fff); color: var(--navy); text-align: left; cursor: pointer; } .wallet-action-button:hover, .wallet-action-button:focus-visible { border-color: var(--theme-info-border, #b9c4e0); background: var(--theme-surface, #f8f9ff); outline: 0; } .wallet-action-button > span:nth-child(2) { display: grid; gap: 4px; min-width: 0; } .wallet-action-button strong { font-size: 12px; } .wallet-action-button small { color: var(--theme-muted, #72798a); font-size: 10px; } .wallet-action-button > i:last-child { color: var(--theme-subtle, #9aa2b2); font-size: 12px; } .wallet-action-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; background: var(--theme-raised, #f0f1fa); color: var(--theme-info-text, #4f5aa3); font-size: 15px; } .wallet-action-button.is-danger { border-color: var(--theme-border, #f0d7d9); color: var(--theme-danger-text, #8f2e38); } .wallet-action-button.is-danger:hover, .wallet-action-button.is-danger:focus-visible { border-color: var(--theme-danger-border, #e5aeb3); background: var(--theme-surface, #fff8f8); } .wallet-actions-footer { margin-top: auto; padding: 16px 20px max(16px, env(safe-area-inset-bottom)); border-top: 1px solid var(--theme-border, #e6e8f0); } .wallet-filter { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--theme-info-text, #626c80); } .wallet-filter select { width: auto; min-height: 36px; } .wallet-table-scroll { overflow-x: auto; } .wallet-table { width: 100%; border-collapse: collapse; text-align: left; } .wallet-table th { padding: 12px 10px; background: var(--theme-raised, #f7f8fc); color: var(--theme-info-text, #737b8d); font-size: 11px; font-weight: 600; } .wallet-table td { padding: 15px 10px; border-bottom: 1px solid var(--theme-border, #edf0f5); font-size: 12px; } .wallet-table td:first-child { min-width: 160px; max-width: 340px; overflow-wrap: anywhere; } .wallet-table td strong, .wallet-table td small { display: block; } .wallet-table td small { margin-top: 5px; color: var(--theme-info-text, #7b8495); } .wallet-amount { white-space: nowrap; font-weight: 650; } .wallet-incoming { color: var(--theme-success-text, #24785b); } .wallet-outgoing { color: var(--theme-danger-text, #ac4960); } .wallet-row-actions { display: flex; gap: 6px; } .wallet-row-actions .button { padding: 6px 9px; font-size: 11px; } .wallet-empty { padding: 40px 16px; text-align: center; color: var(--theme-info-text, #7b8495); } .wallet-empty > i { font-size: 25px; color: var(--theme-info-text, #949db8); } .wallet-empty h4 { margin: 14px 0 8px; color: var(--theme-info-text, #39435c); } .wallet-empty p { font-size: 12px; } @media (max-width: 1100px) { .wallet-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .wallet-summary { gap: 9px; } .wallet-stat { padding: 15px; } .wallet-accounts, .wallet-form-grid { grid-template-columns: minmax(0, 1fr); } #walletView .wallet-entry-panel, #walletView .wallet-transactions { padding: 15px; } } .table-client small { color: var(--theme-muted, #878883); font-weight: 450; font-size: 10px; } .status-pill { display: inline-flex; align-items: center; background: var(--theme-raised, #eff4ef); color: var(--theme-success-text, #507157); font-size: 10px; font-weight: 700; padding: 4px 7px; border-radius: 30px; white-space: nowrap; } .weekly-report-modal { width: min(780px, calc(100% - 32px)); } .weekly-report-period-controls { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 14px; } .weekly-report-period-controls label { color: var(--theme-muted, #777973); font-size: 10px; } .weekly-report-period-controls select { min-width: 190px; padding: 8px 28px 8px 10px; border: 1px solid var(--theme-border, #d7d9d4); border-radius: 6px; background: var(--theme-surface, #fff); color: var(--theme-text, #454742); font: inherit; font-size: 11px; } .weekly-report-date { margin: 5px 0 0; color: var(--theme-muted, #777973); font-size: 12px; } .weekly-report-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 9px; margin: 18px 0; } .weekly-report-metric { min-width: 0; padding: 12px; border: 1px solid var(--theme-border, #e1e2dd); border-radius: 8px; background: var(--theme-raised, #fbfbf8); } .weekly-report-metric strong { display: block; color: var(--theme-info-text, #263e54); font-size: 24px; line-height: 1; } .weekly-report-metric span { display: block; margin-top: 6px; color: var(--theme-muted, #777973); font-size: 10px; line-height: 1.3; } .weekly-report-platform strong { overflow-wrap: anywhere; font-size: 14px; line-height: 1.2; } .weekly-report-chart-section, .weekly-report-email-section, .weekly-report-activity-section { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--theme-border, #ededeb); } .weekly-report-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .weekly-report-section-heading h3 { margin: 0; color: var(--theme-text, #353733); font-size: 13px; } .weekly-report-section-heading span { color: var(--theme-muted, #858681); font-size: 10px; } .weekly-report-chart { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 10px; min-height: 145px; margin-top: 12px; padding: 10px 8px 0; border-bottom: 1px solid var(--theme-border, #e4e5e1); } .weekly-report-bar { display: grid; grid-template-rows: 1fr auto auto; gap: 6px; height: 135px; text-align: center; } .weekly-report-bar i { display: block; align-self: end; min-height: 3px; border-radius: 5px 5px 0 0; background: var(--theme-info-strong, #556090); } .weekly-report-bar:nth-child(2) i { background: var(--theme-success-strong, #5a956a); } .weekly-report-bar:nth-child(3) i { background: var(--theme-warning-strong, #c28a52); } .weekly-report-bar:nth-child(4) i { background: var(--theme-violet-strong, #8b6fa8); } .weekly-report-bar strong { color: var(--theme-text, #3c3e3a); font-size: 12px; } .weekly-report-bar span { color: var(--theme-muted, #777973); font-size: 9px; } .weekly-report-email-list { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; } .weekly-report-email-list span { padding: 5px 7px; border-radius: 999px; background: var(--theme-raised, #f1f2f0); color: var(--theme-muted, #5f615d); font-size: 10px; } .weekly-report-activity-list { display: grid; gap: 6px; max-height: 190px; overflow: auto; margin-top: 11px; } .weekly-report-activity { display: flex; justify-content: space-between; gap: 12px; padding: 8px 9px; border: 1px solid var(--theme-border, #ededeb); border-radius: 6px; background: var(--theme-raised, #fbfbf8); color: var(--theme-muted, #565752); font-size: 11px; } .weekly-report-activity small { flex: 0 0 auto; color: var(--theme-muted, #858681); font-size: 10px; } .weekly-report-empty { margin: 12px 0 0; color: var(--theme-muted, #858681); font-size: 11px; } .weekly-report-export-document { position: fixed; left: -9999px; top: 0; width: 820px; padding: 0; margin: 0; background: var(--theme-surface, #ffffff); color: var(--theme-info-text, #1e2d39); box-sizing: border-box; font-family: var(--font-ui); box-shadow: none; } .weekly-report-export-document * { box-sizing: border-box; } .weekly-report-export-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 12px 14px 0; } .weekly-report-export-header .eyebrow { margin: 0 0 8px; color: var(--theme-info-text, #6f7e8b); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; } .weekly-report-export-header h1 { margin: 0; color: var(--theme-info-text, #243b4d); font-size: 32px; line-height: 1.15; } .weekly-report-export-header .weekly-report-date { margin: 8px 0 0; color: var(--theme-info-text, #697783); font-size: 13px; } .weekly-report-export-badge { flex: 0 0 auto; padding: 8px 12px; border: 1px solid var(--theme-border, #dfe5e7); border-radius: 999px; background: var(--theme-raised, #f4f8fa); color: var(--theme-info-text, #315267); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } .weekly-report-export-rule { height: 2px; margin: 12px 14px 0; background: var(--theme-raised, #dfe5e7); } .weekly-report-export-body { margin-top: 12px; padding: 0 14px 12px; } .weekly-report-export-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 18px; } .weekly-report-export-metric { min-width: 0; padding: 12px 10px; border: 1px solid var(--theme-border, #e4e7e2); border-radius: 10px; background: var(--theme-raised, #f9faf9); } .weekly-report-export-metric strong { display: block; color: var(--theme-info-text, #1a3348); font-size: 26px; line-height: 1; } .weekly-report-export-metric span { display: block; margin-top: 8px; color: var(--theme-muted, #6d7578); font-size: 11px; line-height: 1.3; } .weekly-report-export-platform strong { overflow-wrap: anywhere; font-size: 16px; } .weekly-report-export-section { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--theme-border, #edf0ec); } .weekly-report-export-section .weekly-report-section-heading { margin-bottom: 8px; } .weekly-report-export-chart { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 10px; min-height: 150px; padding: 12px 8px 4px; border: 1px solid var(--theme-border, #edf0ec); border-radius: 10px; background: linear-gradient(180deg, var(--theme-surface, #ffffff) 0%, var(--theme-raised, #f9faf8) 100%); } .weekly-report-export-chart .weekly-report-bar { height: 130px; } .weekly-report-export-chart .weekly-report-bar i { border-radius: 8px 8px 0 0; } .weekly-report-export-email-list, .weekly-report-export-activity-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .weekly-report-export-email-list span { padding: 7px 10px; border-radius: 999px; background: var(--theme-raised, #eef3f7); color: var(--theme-info-text, #374c5a); font-size: 11px; font-weight: 600; } .weekly-report-export-activity-list { display: grid; gap: 8px; flex-wrap: nowrap; } .weekly-report-export-activity { display: flex; justify-content: space-between; gap: 12px; padding: 9px 10px; border: 1px solid var(--theme-border, #edf0ec); border-radius: 8px; background: var(--theme-surface, #fbfcfb); color: var(--theme-text, #404c55); font-size: 11px; } .weekly-report-export-activity small { flex: 0 0 auto; color: var(--theme-muted, #72818b); font-size: 10px; } .weekly-report-export-empty { margin: 12px 0 0; color: var(--theme-muted, #72818b); font-size: 11px; } .weekly-report-export-table-wrap { margin-top: 10px; border: 1px solid var(--theme-border, #edf0ec); border-radius: 10px; overflow: hidden; background: var(--theme-surface, #ffffff); } .weekly-report-export-table { width: 100%; border-collapse: collapse; table-layout: fixed; } .weekly-report-export-table th, .weekly-report-export-table td { padding: 8px 9px; border-bottom: 1px solid var(--theme-border, #edf0ec); text-align: left; vertical-align: top; color: var(--theme-text, #3f4c57); font-size: 10px; line-height: 1.35; word-break: break-word; } .weekly-report-export-table th { background: var(--theme-raised, #f6f8f8); color: var(--theme-info-text, #455a68); font-size: 9px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .weekly-report-export-table tbody tr:last-child td { border-bottom: 0; } .weekly-report-export-company { display: block; color: var(--theme-info-text, #213648); font-weight: 700; } .weekly-report-export-table td small { display: block; margin-top: 2px; color: var(--theme-muted, #72818b); font-size: 9px; } .weekly-report-export-empty-row { padding: 12px 10px; color: var(--theme-muted, #72818b); text-align: center; } .application-history-grid { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 13px; min-width: 0; } .application-history-grid:not(:has(> :not(.hidden))) { display: none; } #clientForm:not(.view-details-form) .application-history-grid { display: none; } .application-history-grid > section { grid-column: auto; min-width: 0; } .application-history-grid > section:only-child, .application-history-grid > section:first-child.hidden + section { grid-column: 1 / -1; } .application-history-grid .client-email-history-head { align-items: center; flex-wrap: wrap; gap: 5px 8px; padding: 9px 10px; } .application-history-grid .client-email-history-head .eyebrow { margin: 0; font-size: 9px; } .application-history-grid .client-email-history-head h3 { margin: 3px 0 0; font-size: 11px; } .application-history-grid .client-email-history-head > strong { font-size: 10px; } .application-history-grid .client-email-history-list { max-height: 164px; } .application-history-grid .client-email-history-item { gap: 6px; padding: 9px 10px; flex-wrap: wrap; } .application-history-grid .client-email-history-copy { flex: 1 1 110px; } .application-history-grid .client-email-history-list > p { padding: 10px; } @media (max-width: 600px) { .application-history-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; } } .client-follow-up-history { margin-top: 4px; border: 1px solid var(--theme-border, #dce6dc); border-radius: 8px; overflow: hidden; background: var(--theme-raised, #f8fbf8); } .client-follow-up-history-head { display: flex; justify-content: space-between; gap: 12px; padding: 9px 10px; border-bottom: 1px solid var(--theme-border, #dce6dc); color: var(--theme-muted, #59715d); font-size: 9px; font-weight: 750; letter-spacing: .08em; } .client-follow-up-history-head strong { color: var(--theme-success-text, #3f5e46); font-size: 10px; letter-spacing: 0; } .client-follow-up-history-list { display: grid; grid-auto-rows: 41px; max-height: 164px; gap: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; } .client-follow-up-history-list > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; padding: 0 10px; border-bottom: 1px solid var(--theme-border, #e7eee7); color: var(--theme-muted, #4e504c); font-size: 11px; } .client-follow-up-history-list > div:last-child { border-bottom: 0; } .client-follow-up-history-list span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .client-follow-up-history-list small { flex: 0 0 auto; color: var(--theme-muted, #7e887f); font-size: 10px; } .client-follow-up-history > p { margin: 0; padding: 10px; color: var(--theme-muted, #6d7c70); font-size: 11px; } .client-email-history { grid-column: 1 / -1; min-width: 0; margin-top: 4px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--theme-surface, #fff); display: flex; flex-direction: column; } .client-email-history-head { display: flex; align-items: end; justify-content: space-between; gap: 12px; padding: 13px 14px 10px; border-bottom: 1px solid var(--line); background: var(--theme-raised, #fbfbf8); } .client-email-history-head h3 { margin: 3px 0 0; color: var(--ink); font-size: 14px; } .client-email-history-head > strong { color: var(--muted); font-size: 11px; font-weight: 650; } .client-email-history-list { display: grid; min-height: 0; overflow-y: auto; } .client-email-history-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; width: 100%; padding: 12px 14px; border: 0; border-bottom: 1px solid var(--theme-border, #ededeb); background: var(--theme-surface, #fff); color: var(--ink); text-align: left; cursor: pointer; } .client-email-history-item:last-child { border-bottom: 0; } .client-email-history-item:hover, .client-email-history-item:focus-visible { background: var(--theme-raised, #f5f6f2); outline: 0; } .client-email-history-item span { display: grid; gap: 4px; min-width: 0; } .client-email-history-item strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; } .client-email-history-item small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 11px; } .client-email-history-item time { flex: 0 0 auto; color: var(--muted); font-size: 10px; } .client-email-history-list > p { margin: 0; padding: 14px; color: var(--muted); font-size: 11px; } #clientEmailHistory { border-color: var(--theme-border, #dce2ec); box-shadow: 0 2px 5px rgba(26, 35, 64, .04); } #clientEmailHistory .client-email-history-head { background: var(--theme-raised, #f2f5fa); border-bottom-color: #e0e5ef; } #clientEmailHistory .client-email-history-head .eyebrow { color: var(--theme-info-text, #62708a); font-weight: 700; letter-spacing: .08em; } #clientEmailHistory .client-email-history-head h3 { color: var(--navy); font-weight: 650; line-height: 1.4; } #clientEmailHistoryCount { padding: 3px 6px; border-radius: 12px; background: var(--theme-raised, #e4eaf5); color: var(--theme-info-text, #495a7a); white-space: nowrap; } #clientEmailHistoryList { overscroll-behavior: contain; scrollbar-width: thin; scrollbar-gutter: stable; } #clientEmailHistory .client-email-history-item { flex-direction: column; align-items: stretch; gap: 7px; padding: 10px; border-bottom-color: #edf0f5; } #clientEmailHistory .client-email-history-copy { flex: none; gap: 4px; } #clientEmailHistory .client-email-history-copy strong { color: var(--navy); font-size: 11px; font-weight: 600; line-height: 1.45; } #clientEmailHistory .client-email-history-copy small { color: var(--theme-info-text, #748096); font-size: 10px; line-height: 1.4; } #clientEmailHistory .client-email-history-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; } #clientEmailHistory .client-email-direction { display: inline-flex; padding: 2px 6px; border-radius: 4px; background: var(--theme-raised, #edf5ef); color: var(--theme-success-text, #48715a); font-size: 9px; font-weight: 600; line-height: 1.4; } #clientEmailHistory time { font-size: 9px; color: var(--theme-info-text, #7b8596); } #clientEmailHistory .client-email-history-item:hover { background: var(--theme-raised, #f7f9fc); } #clientEmailHistory .client-email-history-item:focus-visible { outline: 2px solid var(--theme-info-border, #6c7fa8); outline-offset: -2px; background: var(--theme-raised, #f7f9fc); } #clientForm .client-notes-field { margin-bottom: 18px; } #closeClientDetailsButton { background: var(--theme-action, var(--navy)); border-color: var(--navy); color: #fff; } #closeClientDetailsButton:hover { background: var(--theme-action-hover, var(--color-primary-hover)); border-color: var(--color-primary-hover); color: #fff; } #closeClientDetailsButton:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; } .application-history-grid .client-follow-up-history-head > span { font-size: 11px; font-weight: 650; letter-spacing: 0; line-height: 1.4; } #clientEmailHistory .client-email-history-head h3 { margin: 0; } .status-pill.responded, .status-pill.interview { color: var(--theme-info-text, #6e5d9d); background: var(--theme-raised, #f1eff8); } .status-pill.on-hold { color: var(--theme-warning-text, #a3733d); background: var(--theme-raised, #faf2e6); } .status-pill.not-selected { color: var(--theme-danger-text, #a75d61); background: var(--theme-raised, #faeeee); } .status-pill.active-client { color: var(--theme-success-text, #33764e); background: var(--theme-raised, #e8f4eb); } .interview-priority-badge { display: inline-flex; align-items: center; margin-left: 5px; padding: 4px 7px; border-radius: 20px; background: var(--theme-warning-soft, #fff0c9); color: var(--theme-warning-text, #956c20); font-size: 9px; font-weight: 800; letter-spacing: .04em; } .row-menu { border: 0; background: transparent; color: var(--theme-muted, #787a75); font-size: 18px; letter-spacing: 1px; } .row-menu:hover { color: var(--theme-text, #243d2c); } .toolbar { display: flex; gap: 10px; margin-bottom: 17px; align-items: center; } .search-field { height: 40px; background: var(--theme-surface, white); border: 1px solid var(--theme-border, #dfdfda); border-radius: 7px; display: flex; align-items: center; padding: 0 11px; gap: 8px; flex: 1; min-width: 180px; color: var(--theme-muted, #8b8d88); } .search-field input { border: 0; outline: 0; width: 100%; color: var(--ink); font-size: 13px; background: transparent; } .search-field input::placeholder { color: var(--theme-subtle, #aaa9a4); } .date-filter { display: block; } .date-filter input { height: 40px; color: var(--theme-muted, #4f514d); background: var(--theme-surface, white); border: 1px solid var(--theme-border, #dfdfda); outline: 0; border-radius: 7px; padding: 0 10px; font: inherit; font-size: 12px; } .date-filter input:focus { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(26,35,64,.13); } .select-field select { height: 40px; color: var(--theme-muted, #4f514d); background: var(--theme-surface, white); border: 1px solid var(--theme-border, #dfdfda); outline: 0; border-radius: 7px; padding: 0 29px 0 10px; font-size: 12px; max-width: 140px; } .toolbar-add { display: none; white-space: nowrap; } .application-panel { overflow: hidden; } .to-apply-panel { margin-bottom: 17px; padding: 20px 23px 0; } .to-apply-page-panel { height: 520px; display: flex; flex-direction: column; padding: 0; } .to-apply-page-panel .to-apply-list { flex: 1; min-height: 0; overflow-y: auto; margin-top: 0; } .to-apply-page-panel .to-apply-list.is-empty { display: flex; align-items: center; justify-content: center; margin-top: 0; } .to-apply-panel .panel-heading { align-items: center; } .to-apply-panel h2 { margin: 5px 0 0; font-size: 21px; } .to-apply-list { margin: 17px -23px 0; } .to-apply-list-head { position: sticky; top: 0; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto 88px; gap: 16px; align-items: center; padding: 13px 23px; border-bottom: 1px solid var(--theme-border, #e6e9e5); background: var(--theme-raised, #f8faf8); color: var(--theme-muted, #778078); font-size: 10px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; } .to-apply-list-head span:first-child { display: inline-flex; align-items: center; gap: 7px; color: var(--theme-muted, #4d5d52); } .to-apply-list-head span:first-child i { color: var(--theme-warning-text, #8b7838); } .to-apply-list-head span:nth-child(2), .to-apply-list-head span:nth-child(3) { text-align: right; } .to-apply-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 16px; align-items: center; padding: 17px 23px; border-top: 1px solid var(--theme-border, #edf0ed); transition: background .15s ease, border-color .15s ease; } .to-apply-row:hover, .to-apply-row:focus-within { background: var(--theme-raised, #f7faf7); border-top-color: #dfe8e0; } .to-apply-row.overdue { background: var(--theme-raised, #fff1f1); border-left: 4px solid var(--rose); padding-left: 19px; } .to-apply-row.overdue:hover, .to-apply-row.overdue:focus-within { background: var(--theme-raised, #fce4e4); } .to-apply-row.due-today { background: var(--theme-raised, #fff0f0); border-left: 4px solid var(--theme-danger-border, #d86d72); padding-left: 19px; } .to-apply-row.due-today:hover, .to-apply-row.due-today:focus-within { background: var(--theme-danger-soft, #fbdede); } .to-apply-row.due-today .to-apply-date, .to-apply-row.due-today .to-apply-date span { color: var(--theme-danger-text, #bd5058); } .to-apply-title { min-width: 0; display: grid; gap: 4px; } .to-apply-title strong { color: var(--theme-text, #253129); font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .to-apply-title a { color: var(--theme-muted, #5c7062); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .to-apply-date { color: var(--theme-muted, #4e5c53); font-size: 11px; text-align: right; white-space: nowrap; } .to-apply-date span { display: block; color: var(--theme-muted, #858681); font-size: 9px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; margin-bottom: 3px; } .to-apply-row.overdue .to-apply-date, .to-apply-row.overdue .to-apply-date span { color: var(--rose); } .to-apply-actions { display: flex; justify-content: flex-end; } .list-icon-button { width: 31px; height: 31px; padding: 0; font-size: 18px; } .to-apply-row-menu { position: relative; } .to-apply-actions-trigger { min-width: 80px; min-height: 32px; padding: 0 10px; border-color: var(--theme-border, #dce4dd); color: var(--theme-muted, #53665a); background: var(--theme-surface, #fff); font-size: 11px; } .to-apply-actions-trigger:hover, .to-apply-actions-trigger:focus-visible { border-color: var(--theme-border, #9eb5a3); color: var(--theme-success-text, #294631); background: var(--theme-raised, #f3f8f3); } .to-apply-menu-panel { position: absolute; top: calc(100% + 5px); right: 0; z-index: 6; min-width: 120px; padding: 4px; border: 1px solid var(--line); border-radius: 7px; background: var(--theme-surface, #fff); box-shadow: 0 10px 26px rgba(23,26,22,.14); } .to-apply-menu-panel.opens-up { top: auto; bottom: calc(100% + 5px); } .to-apply-menu-panel button { display: block; width: 100%; border: 0; border-radius: 5px; background: transparent; color: var(--theme-muted, #4e504c); padding: 8px 9px; text-align: left; font-size: 11px; cursor: pointer; } .to-apply-menu-panel button:hover, .to-apply-menu-panel button:focus-visible { background: var(--theme-raised, #f1f2f0); outline: 0; } .to-apply-menu-panel button[data-delete-to-apply] { color: var(--rose); } .to-apply-empty { display: grid; justify-items: center; gap: 8px; padding: 56px 20px; color: var(--theme-muted, #858681); font-size: 12px; text-align: center; } .to-apply-empty::before { content: '\f0ae'; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: var(--theme-raised, #f5f1df); color: var(--theme-warning-text, #9b8740); font-family: 'Font Awesome 6 Free'; font-size: 17px; font-weight: 900; } .to-apply-title { min-width: 0; } .to-apply-title .to-apply-notes { margin: 8px 0 0; color: var(--theme-muted, #5f615c); font-size: 11px; line-height: 1.5; white-space: pre-line; } .work-links-section { margin: 0 0 20px; padding: 0 0 14px; border-bottom: 1px solid var(--line); } .documents-subsection-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .documents-subsection-head h3 { margin: 5px 0 0; font-size: 18px; color: var(--theme-text, #2f332d); } .work-link-form { display: grid; gap: 16px; margin: 0; padding: 0; border: 0; background: transparent; } .work-link-form .form-field { margin: 0; } .work-link-form .form-field span { display: block; margin-bottom: 6px; color: var(--muted); font-size: 11px; font-weight: 700; } .work-link-form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; } .script-form { display: grid; gap: 12px; margin-bottom: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--theme-raised, #f9faf8); } .script-form .form-field { margin: 0; } .script-form .form-field span { display: block; margin-bottom: 6px; color: var(--muted); font-size: 11px; font-weight: 700; } .script-form textarea { min-height: 190px; resize: vertical; } .script-form-actions { display: flex; justify-content: flex-end; gap: 8px; } .script-list { display: grid; gap: 9px; } .script-item { padding: 13px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--theme-surface, #fff); cursor: pointer; transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; } .script-item:hover, .script-item:focus-visible { border-color: var(--theme-border, #aab8ac); background: var(--theme-surface, #fbfdfb); box-shadow: 0 3px 12px rgba(23,26,22,.06); outline: 0; } .script-item-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; } .script-item-head h3 { margin: 0; color: var(--theme-text, #303630); font-size: 14px; } .script-item-head small { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; } .script-item-actions { display: flex; align-items: center; gap: 7px; } .script-item-actions .button { padding: 7px 10px; font-size: 10px; } .script-detail-modal { width: min(700px, calc(100vw - 28px)); } .script-detail-shell { padding: 24px; } .script-detail-shell .modal-heading { margin-bottom: 15px; } .script-detail-shell .modal-heading h2 { overflow-wrap: anywhere; } .script-detail-updated { margin: 5px 0 0; color: var(--muted); font-size: 11px; } .script-detail-content { max-height: min(55vh, 500px); overflow: auto; margin: 0; padding: 16px; border: 1px solid var(--theme-border, #e7e8e3); border-radius: 8px; background: var(--theme-raised, #fbfaf8); color: var(--theme-text, #3f433d); font: inherit; font-size: 13px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; } .work-link-list { display: grid; gap: 8px; } .template-tester { display: grid; gap: 16px; margin-top: 18px; } .template-tester-actions { display: flex; flex-wrap: wrap; gap: 8px; } .template-preview { white-space: normal; border: 1px solid var(--line); border-radius: 8px; background: var(--theme-raised, #fbfaf8); color: var(--theme-text, #2d312d); padding: 16px; font-size: 12px; line-height: 1.7; min-height: 210px; } .template-preview strong { color: var(--theme-info-text, #1d2438); } .work-link-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--theme-surface, #fff); } .work-link-copy { min-width: 0; display: grid; gap: 2px; } .work-link-copy strong { color: var(--theme-text, #303630); font-size: 12px; } .work-link-copy a { color: var(--navy); font-size: 11px; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .work-link-copy a:hover { text-decoration: underline; } .small-empty { padding: 12px 0; } .documents-page-panel { padding: 0; overflow: hidden; } .documents-page-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-bottom: 20px; border-bottom: 1px solid var(--line); } .documents-page-heading h2 { margin: 5px 0 0; font-size: 24px; } .documents-page-heading p:not(.eyebrow) { color: var(--muted); font-size: 13px; margin: 8px 0 0; } .documents-tabs { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 7px; border-bottom: 1px solid var(--theme-border, #e5e8e3); background: var(--theme-raised, #f4f6f3); } .documents-tab { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; min-height: 40px; padding: 8px 10px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--theme-muted, #656d66); font-size: 11px; font-weight: 650; cursor: pointer; white-space: nowrap; } .documents-tab i { color: var(--theme-muted, #748078); font-size: 12px; } .documents-tab:hover { background: var(--theme-translucent-surface, rgba(255,255,255,.65)); color: var(--theme-text, #35473a); } .documents-tab.active { border-color: var(--theme-border, #e1e5e0); background: var(--theme-surface, #fff); color: var(--theme-success-text, #365a40); box-shadow: 0 1px 3px rgba(28,42,31,.1); } .documents-tab.active i { color: var(--theme-success-text, #54745b); } .documents-tab-panel { padding: 22px 24px 25px; } .documents-tab-panel[hidden], .documents-tab-panel.hidden { display: none; } .cover-letter-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 0 16px; border-bottom: 1px solid var(--theme-border, #e7ebe7); } .cover-letter-heading h3 { margin: 4px 0 0; color: var(--theme-text, #303631); font-size: 18px; } .cover-letter-downloads { display: flex; gap: 8px; } .cover-letter-downloads .button { min-height: 36px; } .cover-letter-download-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; } .cover-letter-download-button i { font-size: 13px; line-height: 1; } .cover-letter-workspace { display: grid; grid-template-columns: minmax(230px, 300px) minmax(0, 1fr); gap: 24px; align-items: start; padding-top: 20px; } .cover-letter-editor { min-width: 0; } .cover-letter-editor-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 14px; } .cover-letter-editor-heading h4 { margin: 0; color: var(--theme-text, #343b35); font-size: 13px; } .cover-letter-editor-heading span { color: var(--theme-muted, #7b837d); font-size: 10px; white-space: nowrap; } .cover-letter-fixed-contact { margin: -2px 0 2px; padding: 9px 10px; border: 1px solid var(--theme-border, #e0e7e1); border-radius: 5px; background: var(--theme-raised, #f6faf6); color: var(--theme-muted, #637066); font-size: 10px; line-height: 1.45; } .cover-letter-editor-fields { display: grid; gap: 11px; } .cover-letter-editor-fields .form-field { display: grid; gap: 5px; color: var(--theme-muted, #4a514b); font-size: 11px; font-weight: 650; } .cover-letter-editor-fields input, .cover-letter-editor-fields textarea { width: 100%; border: 1px solid var(--theme-border, #d9dfda); border-radius: 4px; background: var(--theme-surface, #fff); color: var(--theme-text, #303631); padding: 9px 10px; font: 12px/1.45 var(--font-ui); } .cover-letter-editor-fields input:focus, .cover-letter-editor-fields textarea:focus { outline: 0; border-color: var(--theme-success-border, #6c9275); box-shadow: 0 0 0 2px rgba(75, 112, 83, .13); } .cover-letter-editor-fields textarea { min-height: 250px; resize: vertical; } .cover-letter-editor-fields textarea[data-cover-letter-field="body"] { text-align: justify; text-justify: inter-word; } .cover-letter-preview-area { min-width: 0; overflow: auto; padding: 0 4px 8px; background: var(--theme-raised, #f0f2ef); } .cover-letter-preview-label { display: flex; justify-content: space-between; padding: 10px 12px; color: var(--theme-muted, #747d76); font-size: 9px; font-weight: 750; letter-spacing: .08em; } .cover-letter-page { width: min(100%, 794px); min-height: 1123px; margin: 0 auto; padding: 48px 52px; background: var(--theme-surface, #fff); color: var(--theme-text, #252925); box-shadow: 0 2px 12px rgba(27, 35, 29, .12); font: 13px/1.55 var(--font-ui); } .cover-letter-page-header { display: flex; align-items: center; gap: 15px; padding-bottom: 17px; border-bottom: 1px solid var(--theme-border, #dce3dd); } .cover-letter-page-header img { width: 56px; height: 56px; object-fit: contain; flex: 0 0 56px; } .cover-letter-page-header h1 { margin: 0 0 4px; color: var(--theme-text, #1f3525); font-size: 20px; line-height: 1.2; } .cover-letter-contact { color: var(--theme-muted, #505952); font-size: 11px; line-height: 1.5; } .cover-letter-date { margin: 22px 0 16px; color: var(--theme-muted, #555d56); font-size: 12px; } .cover-letter-recipient { margin: 0 0 16px; font-size: 13px; } .cover-letter-greeting { margin: 0 0 11px; font-size: 13px; } .cover-letter-copy { text-align: justify; text-justify: inter-word; } .cover-letter-copy p { margin: 0 0 11px; font-size: 13px; line-height: 1.5; text-align: justify; text-justify: inter-word; } .cover-letter-signoff { margin: 18px 0 0; font-size: 13px; line-height: 1.6; } .cover-letter-signoff strong { display: inline-block; margin-top: 8px; color: var(--theme-text, #1f3525); } .salary-calculator { max-width: 760px; } .salary-rate-note { color: var(--muted); font-size: 11px; font-weight: 650; } .salary-calculator-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px 13px; max-width: 620px; } .salary-calculator-result { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-top: 24px; border: 1px solid var(--theme-border, #dce6dc); border-radius: 8px; overflow: hidden; background: var(--theme-raised, #dce6dc); } .salary-calculator-result div { display: grid; gap: 7px; padding: 15px; background: var(--theme-raised, #f6faf6); } .salary-calculator-result span { color: var(--muted); font-size: 11px; font-weight: 650; } .salary-calculator-result strong { color: var(--theme-success-text, #203b28); font-size: 18px; font-weight: 750; } .salary-calculator-help { margin: 12px 0 0; color: var(--muted); font-size: 11px; } .invoice-list { display: grid; gap: 8px; max-height: 430px; overflow-y: auto; padding: 1px 4px 10px 1px; } .invoice-email-row { display: grid; grid-template-columns: 42px minmax(150px, .8fr) minmax(250px, 1.6fr) minmax(150px, .8fr); gap: 14px; align-items: center; min-height: 68px; border: 1px solid var(--theme-border, #dadce0); border-radius: 8px; background: var(--theme-surface, #fff); padding: 10px 13px; } .invoice-email-icon { width: 36px; height: 30px; display: grid; place-items: center; border: 1px solid var(--theme-border, #d7dbe0); border-radius: 5px; background: var(--theme-raised, #f8f9fa); color: var(--navy); font-size: 9px; font-weight: 800; } .invoice-email-main, .invoice-email-subject, .invoice-email-meta { min-width: 0; display: grid; gap: 3px; } .invoice-email-row strong, .invoice-email-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .invoice-email-row strong { color: var(--theme-text, #3c4043); font-size: 12px; } .invoice-email-row span { color: var(--theme-muted, #858681); font-size: 10.5px; } .invoice-email-meta { text-align: right; } .invoice-card { min-width: 190px; border: 1px solid var(--theme-border, #dadce0); border-radius: 8px; background: var(--theme-surface, #fff); padding: 13px; } .invoice-card-head { display: flex; align-items: flex-start; gap: 9px; min-width: 0; padding-bottom: 11px; border-bottom: 1px solid var(--theme-border, #f0f1ef); } .invoice-card-head h3 { margin: 2px 0 0; color: var(--theme-text, #3c4043); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .invoice-card-details { display: grid; gap: 9px; margin: 12px 0 0; } .invoice-card-details dt { color: var(--theme-muted, #8a8c86); font-size: 9px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; } .invoice-card-details dd { margin: 2px 0 0; color: var(--theme-text, #3c4043); font-size: 11px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .personal-document-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; } .personal-document-empty { grid-column: 1 / -1; min-height: 280px; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 34px 20px; border: 1px dashed var(--theme-border, #cbd5cd); border-radius: 8px; background: var(--theme-raised, #f8faf8); text-align: center; } .personal-document-empty-icon { width: 50px; height: 50px; display: grid; place-items: center; margin-bottom: 14px; border-radius: 8px; background: var(--theme-raised, #eaf2eb); color: var(--theme-success-text, #52775a); font-size: 20px; } .personal-document-empty h3 { margin: 0 0 6px; color: var(--theme-text, #303830); font-size: 16px; font-weight: 650; } .personal-document-empty p { margin: 0 0 16px; color: var(--theme-muted, #747c75); font-size: 12px; line-height: 1.5; } .personal-document-empty-upload { gap: 8px; } .personal-document-card { min-width: 0; border: 1px solid var(--theme-border, #dadce0); border-radius: 8px; overflow: hidden; background: var(--theme-surface, #fff); transition: box-shadow .15s ease, border-color .15s ease; } .personal-document-card:hover { border-color: var(--theme-border, #c5c8cc); box-shadow: 0 2px 7px rgba(60,64,67,.18); } .personal-document-card:focus-visible { border-color: var(--theme-info-border, #1a73e8); box-shadow: 0 0 0 2px rgba(26,115,232,.2); outline: 0; } .personal-document-card.selected { border-color: var(--theme-info-border, #1a73e8); box-shadow: 0 0 0 2px rgba(26,115,232,.18); } .personal-document-card .document-preview-head { padding: 10px 10px 9px; display: block; border-bottom: 0; } .personal-document-card .document-preview-title { gap: 8px; } .personal-document-card .document-preview-title > div { min-width: 0; } .personal-document-card .document-preview-title { position: relative; padding-right: 24px; } .personal-document-delete { position: absolute; top: -4px; right: -4px; width: 24px; height: 24px; border: 0; border-radius: 50%; background: transparent; color: var(--theme-muted, #5f6368); font-size: 18px; line-height: 1; cursor: pointer; } .personal-document-delete:hover, .personal-document-delete:focus-visible { background: var(--theme-raised, #fce8e6); color: var(--theme-danger-text, #c5221f); outline: 0; } .personal-document-card .document-preview-title .eyebrow { display: none; } .personal-document-card .document-preview-title h3 { margin: 0; font-size: 12px; font-weight: 500; color: var(--theme-text, #3c4043); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .personal-document-card .document-preview-title p:not(.eyebrow) { margin-top: 3px; color: var(--theme-muted, #70757a); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .personal-document-thumbnail { height: 155px; display: grid; place-items: center; border-top: 1px solid var(--theme-border, #f1f3f4); background: var(--theme-raised, #f8f9fa); } .personal-document-file-icon { width: 70px; height: 82px; display: grid; place-items: center; border: 1px solid var(--theme-border, #d7dbe0); border-radius: 5px; background: var(--theme-surface, #fff); color: var(--theme-muted, #5f6368); font-size: 12px; font-weight: 700; box-shadow: 0 1px 2px rgba(60,64,67,.12); } .personal-document-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 2px; border-bottom: 1px solid var(--theme-border, #efefec); transition: background .12s ease; } .personal-document-row:hover, .personal-document-row:focus-within { background: var(--theme-raised, #f1f2f0); } .personal-document-row strong, .personal-document-row small { display: block; } .personal-document-row strong { color: var(--theme-text, #343631); font-size: 13px; } .personal-document-row small { color: var(--muted); font-size: 11px; margin-top: 4px; } .personal-document-actions { display: flex; align-items: center; gap: 8px; } .field-help { color: var(--muted); font-size: 10px; font-weight: 450; } .client-document-picker-list { display: grid; gap: 7px; margin: 18px 0 12px; max-height: 300px; overflow-y: auto; } .client-document-picker-item { width: 100%; display: flex; justify-content: space-between; gap: 12px; text-align: left; border: 1px solid var(--line); border-radius: 7px; background: var(--theme-surface, #fff); padding: 11px 12px; color: var(--navy); } .client-document-picker-item:hover, .client-document-picker-item:focus-visible { border-color: var(--theme-border, #b9bbb5); background: var(--theme-raised, #f1f2f0); outline: 0; } .client-document-picker-item:active { border-color: var(--theme-border, #9aa19c); background: var(--theme-raised, #e9ebe9); transform: translateY(1px); } .client-document-picker-item strong, .client-document-picker-item small { display: block; } .client-document-picker-item strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; } .client-document-picker-item small { color: var(--muted); font-size: 10px; margin-top: 4px; } .client-document-picker-item > span:last-child { flex: 0 0 auto; font-size: 11px; font-weight: 700; } .picker-upload { width: 100%; justify-content: center; } #applicationListLabel { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: linear-gradient(180deg, var(--theme-raised, #edf7ff) 0%, var(--theme-info-soft, #dfeefb) 100%); color: var(--theme-info-text, #1f5d88); border: 1px solid var(--theme-border, #cfe4f6); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .application-workspace-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 4px 2px 20px; border-bottom: 1px solid var(--line); } .application-workspace-title .eyebrow { display: flex; align-items: center; gap: 7px; color: var(--theme-muted, #65766e); } .application-workspace-title .eyebrow i { font-size: 11px; } .application-workspace-title h2 { margin: 6px 0 5px; color: var(--theme-text, #242824); font-size: 23px; line-height: 1.2; font-weight: 650; } .application-workspace-title > p:last-child { margin: 0; color: var(--theme-muted, #737872); font-size: 12px; line-height: 1.45; } .application-workspace-count { display: flex; align-items: center; gap: 11px; min-width: 160px; padding: 11px 13px; border: 1px solid var(--theme-border, #e1e5e1); border-radius: 7px; background: var(--theme-surface, #fff); } .application-workspace-count-icon { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; border-radius: 6px; background: var(--theme-raised, #edf4ef); color: var(--theme-success-text, #476c53); font-size: 14px; } .application-workspace-count small { display: block; margin-bottom: 3px; color: var(--theme-muted, #777d77); font-size: 10px; } #applicationListLabel, #toApplyCountLabel { display: block; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--theme-text, #2e3931); font-size: 13px; font-weight: 700; letter-spacing: 0; text-transform: capitalize; } .application-workspace-count-summary { display: grid; gap: 6px; min-width: 0; } #applicationsView .application-workspace-count-summary { position: relative; width: max-content; max-width: 100%; gap: 0; } #applicationPlatformCounts { position: absolute; top: calc(100% + 10px); left: 0; z-index: 30; display: block; width: min(300px, calc(100vw - 80px)); box-sizing: border-box; padding: 14px; border: 1px solid var(--theme-border, #e0e6ed); border-radius: 10px; background: var(--theme-surface, #fff); box-shadow: 0 10px 30px #1c29401f, 0 2px 6px #1c294009; color: var(--theme-info-text, #344054); font-size: 11px; line-height: 1.5; text-align: left; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .12s ease; } #applicationPlatformCounts::before { content: ''; position: absolute; top: -11px; left: 0; width: 100%; height: 11px; } #applicationsView .application-workspace-count-summary:hover #applicationPlatformCounts, #applicationsView .application-workspace-count-summary:focus-within #applicationPlatformCounts { visibility: visible; opacity: 1; pointer-events: auto; } #applicationPlatformCounts .application-source-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--theme-info-text, #28364d); font-size: 12px; font-weight: 650; } #applicationPlatformCounts .application-source-heading > strong { padding: 2px 7px; border-radius: 5px; background: var(--theme-raised, #edf4ef); color: var(--theme-success-text, #41654b); font-size: 11px; font-variant-numeric: tabular-nums; } #applicationPlatformCounts .application-source-caption { display: block; margin: 3px 0 10px; color: var(--theme-info-text, #8994a3); font-size: 10px; } #applicationPlatformCounts .application-source-list { display: grid; gap: 2px; max-height: 260px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; border-top: 1px solid var(--theme-border, #edf0f4); padding-top: 7px; } #applicationPlatformCounts .application-source-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 6px 7px; border-radius: 5px; } #applicationPlatformCounts .application-source-row:nth-child(even) { background: var(--theme-raised, #f7f9fb); } #applicationPlatformCounts .application-source-row > span { min-width: 0; overflow-wrap: anywhere; } #applicationPlatformCounts .application-source-row > strong { flex-shrink: 0; min-width: 24px; padding: 1px 5px; border: 1px solid var(--theme-border, #e4e9ef); border-radius: 5px; background: var(--theme-surface, #fff); color: var(--theme-info-text, #53647c); font-size: 10px; text-align: center; font-variant-numeric: tabular-nums; } #applicationPlatformCounts .application-source-empty { padding: 9px 0; color: var(--theme-info-text, #8994a3); } @media (prefers-reduced-motion: reduce) { #applicationPlatformCounts { transition: none; } } .application-platform-count { padding: 3px 7px; border: 1px solid var(--theme-border, #dce5de); border-radius: 999px; background: var(--theme-raised, #f5f8f5); color: var(--theme-muted, #53675a); font-size: 10px; font-weight: 600; white-space: nowrap; } .news-view.active { display: grid; gap: 18px; } .news-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 4px 2px 18px; border-bottom: 1px solid var(--line); } .news-page-head h2 { margin: 5px 0 5px; color: var(--theme-text, #242824); font-size: 22px; font-weight: 650; } .news-page-head p:last-child { margin: 0; color: var(--theme-muted, #737872); font-size: 12px; line-height: 1.45; } .news-free-badge { display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border: 1px solid var(--theme-border, #d6e8d9); border-radius: 999px; background: var(--theme-raised, #f1f9f2); color: var(--theme-success-text, #3e7049); font-size: 10px; font-weight: 700; white-space: nowrap; } .news-live-panel { display: grid; gap: 14px; padding: 16px; border: 1px solid var(--theme-border, #e1e6e1); border-radius: 12px; background: var(--theme-surface, #fff); box-shadow: 0 8px 22px rgba(38,48,40,.05); } .news-live-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .news-live-toolbar h3 { margin: 0 0 3px; color: var(--theme-text, #2b352d); font-size: 15px; } .news-live-toolbar span { color: var(--theme-muted, #7a837b); font-size: 10px; } .news-live-controls { display: flex; align-items: center; gap: 7px; } .news-search { width: 210px; min-width: 150px; height: 34px; } .news-search input { font-size: 11px; } .news-category-select select { height: 34px; min-width: 150px; padding: 0 8px; border: 1px solid var(--theme-border, #dfe2dd); border-radius: 6px; background: var(--theme-surface, #fff); color: var(--theme-text, #373c37); font: inherit; font-size: 11px; } .news-live-status { color: var(--theme-muted, #687269); font-size: 11px; } .news-topic-focus { margin: 12px 20px; color: var(--muted); font-size: 12px; line-height: 1.5; } .news-card-grid { display: grid; gap: 16px; } .news-live-grid { grid-template-columns: minmax(0, 1fr); margin: 0; } .news-featured-story { grid-column: span 2; min-width: 0; } .news-side-stories { display: grid; gap: 10px; min-width: 0; } .news-card-compact { display: grid; grid-template-columns: 92px minmax(0, 1fr); min-height: 96px; } .news-card-compact .news-card-media { height: 100%; min-height: 96px; } .news-card-compact .news-card-body { gap: 4px; padding: 9px 10px; } .news-card-compact .news-card-body p, .news-card-compact .news-card-category, .news-card-compact .news-card-link { display: none; } .news-card-compact h3 { font-size: 11px; line-height: 1.3; } .news-trending-heading { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; margin-top: 7px; } .news-trending-heading h4 { margin: 0; color: var(--theme-text, #2c352e); font-size: 14px; } .news-trending-heading span { color: var(--theme-muted, #849087); font-size: 10px; } .news-trending-grid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .news-card-featured .news-card-media { height: 230px; } .news-card-featured .news-card-body { padding: 15px; } .news-card-featured h3 { font-size: 17px; line-height: 1.3; } .news-card-trending .news-card-media { height: 125px; } .news-card { overflow: hidden; border: 1px solid var(--theme-border, #e3e8e3); border-radius: 10px; background: var(--theme-surface, #fff); transition: transform .15s ease, box-shadow .15s ease; } .news-card:hover { transform: translateY(-2px); box-shadow: 0 9px 20px rgba(38,48,40,.1); } .news-card-media { display: block; height: 130px; background: var(--theme-raised, #eef3ee); } .news-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; } .news-card-fallback { display: grid; place-items: center; width: 100%; height: 100%; background: linear-gradient(135deg, var(--theme-raised, #e9f1e9), var(--theme-raised, #f5f1df)); color: var(--theme-muted, #6d7e6e); font-size: 28px; } .news-card-body { display: grid; gap: 8px; padding: 13px; } .news-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .news-card-meta time { color: var(--theme-muted, #8b938c); font-size: 9px; white-space: nowrap; } .news-card-source { color: var(--theme-muted, #5c7461); font-size: 9px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; } .news-card h3 { margin: 0; color: var(--theme-text, #29332c); font-size: 13px; line-height: 1.35; } .news-card h3 a { color: inherit; text-decoration: none; } .news-card h3 a:hover { text-decoration: underline; } .news-card p { min-height: 34px; margin: 0; color: var(--theme-muted, #737c74); font-size: 11px; line-height: 1.45; } .news-card-category { justify-self: start; padding: 3px 7px; border-radius: 999px; background: var(--theme-raised, #f3f6ed); color: var(--theme-success-text, #6f783d); font-size: 9px; font-weight: 700; } .news-card-link { display: inline-flex; align-items: center; gap: 6px; color: var(--theme-success-text, #365d42); font-size: 10px; font-weight: 750; text-decoration: none; } .news-card-link:hover { text-decoration: underline; } .news-load-more { justify-self: center; } .news-empty { grid-column: 1 / -1; display: grid; justify-items: center; gap: 7px; padding: 32px 16px; color: var(--theme-muted, #7a837b); text-align: center; } .news-empty i { color: var(--theme-warning-text, #a18e4b); font-size: 22px; } .news-empty h4 { margin: 0; color: var(--theme-muted, #46534a); font-size: 13px; } .news-empty h2 { margin: 0; color: var(--theme-muted, #46534a); font-size: 16px; font-weight: 600; } .news-empty p { min-height: 0; margin: 0; font-size: 11px; } .news-tool-media { height: 100px; } .news-tools-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; } /* Editorial News layout: lead headline, supporting stories, image highlights. */ #newsView .news-live-panel { padding: 0; overflow: hidden; box-shadow: none; } #newsView .news-live-toolbar { padding: 16px 20px; border-bottom: 1px solid var(--line); } #newsView .news-live-status { padding: 0 20px; } #newsView .news-live-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; } .news-lead-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 26px; padding: 24px 20px; background: var(--theme-raised, #f5f6f7); } .news-lead-layout .news-featured-story { grid-column: auto; } .news-lead-layout .news-card { border: 0; border-radius: 0; background: transparent; box-shadow: none; transform: none; } .news-lead-layout .news-card-featured { display: grid; gap: 12px; } .news-lead-layout .news-card-featured .news-card-body { display: contents; } .news-lead-layout .news-card-featured .news-card-meta { order: 0; } .news-lead-layout .news-card-featured h3 { order: 1; font-size: clamp(18px, 1.8vw, 25px); line-height: 1.25; letter-spacing: -.025em; } .news-lead-layout .news-card-featured .news-card-media { order: 2; height: auto; aspect-ratio: 1.9; overflow: hidden; border-radius: 7px; } .news-lead-layout .news-card-featured .news-card-category { order: 3; } .news-lead-layout .news-card-featured .news-card-link { order: 4; } .news-lead-layout .news-card-featured p { display: none; } .news-lead-layout .news-side-stories { grid-column: auto; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 18px; } .news-lead-layout .news-card-compact { grid-template-columns: minmax(0, 1fr) 36%; gap: 12px; } .news-lead-layout .news-card-compact .news-card-media { grid-column: 2; grid-row: 1; height: 100%; min-height: 100px; border-radius: 6px; overflow: hidden; } .news-lead-layout .news-card-compact .news-card-body { grid-column: 1; grid-row: 1; align-content: start; padding: 0; gap: 7px; } .news-lead-layout .news-card-compact h3 { font-size: 12px; } .news-lead-layout .news-card-compact p { display: -webkit-box; min-height: 0; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 10px; } .news-lead-layout .news-card-compact .news-card-meta { flex-wrap: wrap; justify-content: flex-start; } .news-highlights { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 0 20px; } .news-card-highlight { position: relative; isolation: isolate; min-height: 210px; display: flex; align-items: flex-end; border: 0; background: var(--theme-action, #26313c); } .news-card-highlight .news-card-media { position: absolute; inset: 0; height: 100%; z-index: -1; } .news-card-highlight .news-card-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 20%, rgba(0,0,0,.86)); pointer-events: none; } .news-card-highlight .news-card-body { padding: 18px; pointer-events: none; } .news-card-highlight .news-card-body a { pointer-events: auto; color: #fff; } .news-card-highlight h3 { color: #fff; font-size: 16px; line-height: 1.3; } .news-card-highlight .news-card-source, .news-card-highlight time { color: #eee; } .news-card-highlight p, .news-card-highlight .news-card-category { display: none; } #newsView .news-trending-heading { margin: 0 20px; } #newsView .news-trending-grid, #newsView .news-tools-grid { padding: 0 20px 20px; } #newsView .news-load-more { margin-bottom: 18px; } @media (max-width: 760px) { .news-lead-layout { grid-template-columns: minmax(0, 1fr); gap: 22px; } .news-lead-layout .news-card-featured .news-card-media { aspect-ratio: 1.8; } } @media (max-width: 480px) { .news-highlights { grid-template-columns: minmax(0, 1fr); } .news-lead-layout { padding: 16px; } #newsView .news-live-toolbar { padding: 16px; } } .news-source-table { overflow: hidden; border: 1px solid var(--theme-border, #e1e6e1); border-radius: 12px; background: var(--theme-surface, #fff); box-shadow: 0 8px 22px rgba(38,48,40,.05); } .news-source-table-head { display: grid; grid-template-columns: 74px minmax(0, 1fr) 170px; gap: 16px; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--theme-border, #e5e9e5); background: var(--theme-raised, #f8faf8); color: var(--theme-muted, #748078); font-size: 10px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; } .news-source-list { display: grid; } .news-source-row { display: grid; grid-template-columns: 74px minmax(0, 1fr) 170px; gap: 16px; align-items: center; padding: 17px 18px; border-top: 1px solid var(--theme-border, #edf0ed); } .news-source-row:first-child { border-top: 0; } .news-source-row:hover { background: var(--theme-raised, #f8fbf8); } .news-priority { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--theme-raised, #f3f5e9); color: var(--theme-warning-text, #817231); font-size: 12px; } .news-source-row h3 { margin: 0 0 4px; color: var(--theme-text, #29332c); font-size: 13px; } .news-source-row p { margin: 0; color: var(--theme-muted, #7a817b); font-size: 11px; line-height: 1.45; } .news-source-pill { justify-self: end; display: inline-flex; flex-direction: column; align-items: flex-end; gap: 3px; color: var(--theme-muted, #435c4a); font-size: 11px; font-weight: 700; text-align: right; } .news-source-pill small { color: var(--theme-muted, #8a938b); font-size: 9px; font-weight: 500; } @media (max-width: 720px) { .news-page-head { align-items: flex-start; flex-direction: column; } .news-source-table-head { display: none; } .news-source-row { grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding: 15px; } .news-source-pill { grid-column: 2; justify-self: start; align-items: flex-start; text-align: left; } } @media (max-width: 900px) { .news-live-toolbar { align-items: stretch; flex-direction: column; } .news-live-controls { flex-wrap: wrap; } .news-search { flex: 1 1 180px; width: auto; } .news-live-grid, .news-tools-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .news-featured-story { grid-column: 1 / -1; } .news-side-stories { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); } .news-trending-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .news-live-controls { display: grid; grid-template-columns: 1fr 1fr; } .news-search { grid-column: 1 / -1; width: auto; } .news-live-controls .button { width: 100%; } .news-live-grid, .news-tools-grid, .news-trending-grid { grid-template-columns: 1fr; } .news-side-stories { grid-template-columns: 1fr; } .news-card-featured .news-card-media { height: 180px; } } .to-apply-workspace-head { justify-content: space-between; padding-top: 4px; padding-bottom: 18px; } .to-apply-workspace-title { min-width: 0; } .to-apply-workspace-title .eyebrow { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 3px; color: var(--theme-warning-text, #7a7045); font-size: 9px; letter-spacing: .1em; } .to-apply-workspace-title .eyebrow i { color: var(--theme-warning-text, #a28f4a); font-size: 11px; } .to-apply-workspace-title h2 { margin: 4px 0 5px; color: var(--theme-text, #202a23); font-size: 22px; letter-spacing: -.01em; } .to-apply-workspace-title > p:last-child { max-width: 430px; color: var(--theme-muted, #6e776f); font-size: 11px; } .to-apply-head-actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; } .to-apply-count-card { min-width: 172px; padding: 10px 12px; border-color: var(--theme-border, #e5e7df); background: var(--theme-surface, #fffef9); } .to-apply-workspace-count-icon { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 9px; background: var(--theme-raised, #f5f1df); color: var(--theme-warning-text, #8b7838); } .to-apply-count-copy { display: grid; gap: 3px; min-width: 0; } .to-apply-count-copy small { margin: 0; color: var(--theme-muted, #7b817b); font-size: 10px; } .to-apply-count-copy strong { color: var(--theme-text, #2e3a31); font-size: 13px; white-space: nowrap; } .to-apply-head-actions > .button { white-space: nowrap; } .to-apply-add-button { display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding-inline: 16px; box-shadow: 0 7px 15px rgba(33, 54, 42, .14); } .to-apply-filters { margin-top: 18px; padding: 11px 13px; background: var(--theme-translucent-surface, rgba(255,255,255,.82)); box-shadow: 0 4px 14px rgba(39,47,39,.04); } .to-apply-filters .application-filter-field > span { color: var(--theme-muted, #68716b); } .to-apply-page-panel { height: 520px; padding: 0; overflow: hidden; border-color: var(--theme-border, #e3e7e2); box-shadow: 0 8px 24px rgba(39,47,39,.05); } .application-filters { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 2fr); gap: 16px; align-items: end; margin: 16px 0; padding: 14px; border: 1px solid var(--theme-border, #e3e5e1); border-radius: 8px; background: var(--theme-surface, #fff); } .application-search-field { height: 39px; min-width: 0; border-color: var(--theme-border, #dcdfda); border-radius: 6px; } .application-search-field > i { flex: 0 0 auto; color: var(--theme-muted, #818781); font-size: 12px; } .application-search-field input { font-size: 12px; } .application-filter-controls { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; } @media (min-width: 721px) { #applicationsView .application-filter-controls { grid-template-columns: repeat(5, minmax(0, 1fr)); } } .application-duplicate-notice { margin: 0; padding: 10px 12px; border: 1px solid var(--theme-warning-border, #ded7bb); border-radius: 7px; background: var(--theme-raised, #fffaf0); color: var(--theme-warning-text, #72551f); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; } .application-duplicate-notice[data-kind="duplicate"] { border-color: var(--theme-border, #ebc5c9); background: var(--theme-raised, #fff3f4); color: var(--theme-danger-text, #922f3c); } .application-filter-field { display: grid; gap: 5px; min-width: 0; color: var(--theme-muted, #626862); font-size: 10px; font-weight: 650; } .application-filter-field > span { display: flex; align-items: center; gap: 5px; white-space: nowrap; } .application-filter-field > span i { width: 12px; color: var(--theme-muted, #758078); text-align: center; } .application-filter-field input, .application-filter-field select { width: 100%; min-width: 0; height: 34px; padding: 0 8px; border: 1px solid var(--theme-border, #dfe2dd); border-radius: 5px; background: var(--theme-surface, #fff); color: var(--theme-text, #373c37); font: inherit; font-size: 11px; outline: 0; } .application-filter-field input:focus, .application-filter-field select:focus { border-color: var(--theme-success-border, #718c78); box-shadow: 0 0 0 3px rgba(93,128,105,.12); } .to-apply-filter-controls { grid-template-columns: minmax(180px, 240px); justify-content: end; } .email-filter-controls { grid-template-columns: repeat(2, minmax(140px, 180px)); justify-content: end; } .application-list-head { display: grid; grid-template-columns: minmax(180px, 1.55fr) minmax(150px, 1fr) minmax(130px, .8fr) minmax(180px, 1fr) minmax(70px, auto); gap: 14px; align-items: center; padding: 12px 23px; border-bottom: 1px solid var(--theme-border, #e5e7e3); background: var(--theme-raised, #f8f9f7); color: var(--theme-muted, #747b75); font-size: 9px; font-weight: 700; } .application-list-head > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .application-list-head > span:first-child { display: inline-flex; align-items: center; gap: 7px; color: var(--theme-text, #434d45); font-size: 10px; } .application-list-head > span:first-child i { color: var(--theme-success-text, #62806a); } .application-list { display: grid; } .application-group + .application-group { border-top: 8px solid var(--paper); } .application-group-heading { padding: 12px 23px; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--theme-raised, #fbfbf8); border-bottom: 1px solid var(--line); } .application-group-heading h3 { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--theme-text, #343a35); font-size: 13px; font-weight: 650; } .application-group-heading h3 i { width: 15px; color: var(--theme-muted, #718078); font-size: 12px; text-align: center; } .application-group-heading span { color: var(--theme-muted, #747a74); font-size: 10px; white-space: nowrap; } .status-pill.ongoing { background: var(--theme-raised, #e7f7f5); color: var(--theme-info-text, #1d6f6b); } .status-pill.interview { background: var(--theme-warning-soft, #fff0dc); color: var(--theme-warning-text, #8a5a20); } .status-pill.to-proceed { background: var(--theme-raised, #e5f1f7); color: var(--theme-info-text, #2f6f8f); } .application-group-ongoing .application-group-heading { background: var(--theme-raised, #edf9f8); } .application-group-to-proceed .application-group-heading { background: var(--theme-raised, #eef7fb); } .application-group-to-proceed { background: linear-gradient(180deg, var(--theme-raised, #f5fafe) 0%, var(--theme-surface, #f9fbfd) 100%); border-radius: 0 0 14px 14px; } .application-row { padding: 15px 23px; display: grid; grid-template-columns: minmax(180px, 1.55fr) minmax(150px, 1fr) minmax(130px, .8fr) minmax(180px, 1fr) minmax(70px, auto); gap: 14px; align-items: center; border-bottom: 1px solid var(--theme-border, #efefec); cursor: pointer; transition: background .12s ease, box-shadow .12s ease, transform .12s ease; } .application-row:hover, .application-row:focus-visible { background: var(--theme-raised, #f1f2f0); outline: 0; } .application-row:active { background: var(--theme-raised, #e9ebe9); box-shadow: inset 3px 0 0 #9aa19c; transform: translateY(1px); } .application-row.interview-today { background: var(--theme-raised, #fff0f0); border-left: 4px solid var(--theme-danger-border, #c34f57); padding-left: 19px; } .application-row.interview-today:hover, .application-row.interview-today:focus-visible { background: var(--theme-danger-soft, #ffe5e6); } .application-row:last-child { border: 0; } .client-card-title { font-size: 13px; font-weight: 650; margin: 0 0 4px; color: var(--theme-text, #282d29); } .client-card-subtitle { margin: 0; color: var(--theme-muted, #737a74); font-size: 11px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .client-card-website, .hired-card-website a { display: inline-block; margin-top: 5px; color: var(--navy); font-size: 11px; text-decoration: none; overflow: hidden; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; } .client-card-website:hover, .hired-card-website a:hover { text-decoration: underline; } .interview-link-button { display: inline-flex; align-items: center; gap: 4px; margin-top: 7px; padding: 5px 8px; border: 1px solid var(--theme-danger-border, #d8a4a7); border-radius: 6px; background: var(--theme-surface, #fff); color: var(--theme-danger-text, #a33f48); font-size: 10px; font-weight: 750; text-decoration: none; } .interview-link-button:hover { border-color: var(--theme-danger-border, #a33f48); background: var(--theme-surface, #fff8f8); } .application-meta { font-size: 12px; color: var(--theme-muted, #575853); } .application-meta small { display: block; margin-top: 4px; color: var(--theme-muted, #969690); font-size: 10px; } .application-meta .application-salary { color: var(--navy); font-weight: 700; } .application-row .update-row-button { width: auto; min-width: 70px; height: 31px; padding: 0 10px; border: 1px solid var(--theme-border, #c5ccd8); border-radius: 6px; background: var(--theme-raised, #f1f4f8); color: var(--navy); font-size: 11px; font-weight: 700; } .application-row .update-row-button:hover { border-color: var(--navy); background: var(--theme-raised, #e3e9f1); color: var(--navy); } .application-status-stack { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .application-salary { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; color: var(--theme-info-text, #2f3f4f); font-size: 11px; line-height: 1.45; } .application-salary strong { color: var(--theme-info-text, #23384d); font-weight: 700; } .application-salary .empty-salary { color: var(--theme-muted, #8a8e87); font-style: italic; } .background-follow-up-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; } .background-follow-up-history { list-style: none; margin: 12px 0 0; padding: 0; max-height: 220px; overflow: auto; } .background-follow-up-history:empty { display: none; } .background-follow-up-history li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 12px; padding: 10px 0; border-top: 1px solid var(--theme-border, #dfe3ec); font-size: 12px; } .background-follow-up-history small { grid-column: 1 / -1; color: var(--theme-muted, #74756f); overflow-wrap: anywhere; } .application-empty, .email-empty { padding: 54px 22px; text-align: center; color: var(--theme-muted, #74756f); } .application-empty h3, .email-empty h3 { margin: 0 0 7px; color: var(--theme-text, #343531); font-size: 21px; font-weight: 650; } .application-empty p, .email-empty p { margin: 0 auto 17px; font-size: 13px; max-width: 370px; line-height: 1.55; } #applicationsView #applicationList:has(> .application-empty) { display: flex; align-items: center; justify-content: center; } #applicationsView #applicationList > .application-empty { box-sizing: border-box; width: 100%; } .application-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; } .view-details-button { padding: 7px 9px; font-size: 11px; white-space: nowrap; } .list-action { color: var(--navy); font-weight: 700; border: 0; background: transparent; font-size: 11px; padding: 4px 0; } .stat-card-link { cursor: pointer; transition: border-color .15s ease, transform .15s ease; } .stat-card-link:hover { border-color: var(--navy); transform: translateY(-1px); } .hired-workspace-head { margin-bottom: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--line); } .hired-workspace-head .application-workspace-title p:not(.eyebrow) { max-width: 520px; } .hired-panel { padding: 18px; border: 1px solid var(--theme-border, #e4e7e1); border-radius: 14px; background: linear-gradient(180deg, var(--theme-surface, #fdfdfc) 0%, var(--theme-raised, #f5f7f4) 100%); box-shadow: 0 8px 22px rgba(23, 26, 22, 0.03); } .hired-detail-panel { margin-top: 18px; padding: 22px 22px 20px; border: 1px solid var(--theme-border, #e3e5e1); border-radius: 14px; background: linear-gradient(180deg, var(--theme-surface, #ffffff) 0%, var(--theme-raised, #f9faf8) 100%); box-shadow: 0 10px 28px rgba(23, 26, 22, 0.04); scroll-margin-top: 20px; } .hired-detail-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--theme-border, #ededeb); } .hired-detail-heading h2 { margin: 3px 0 4px; font-size: 25px; } .hired-detail-salary { display: inline-block; margin-left: 8px; padding: 4px 8px; border: 1px solid var(--theme-border, #cbd8e5); border-radius: 5px; background: var(--theme-raised, #f1f5f9); color: var(--navy); font-size: 11px; font-weight: 750; vertical-align: middle; white-space: nowrap; } .hired-detail-subtitle { margin: 0; color: var(--theme-muted, #7c7d78); font-size: 12px; } .hired-detail-grid-large { padding: 20px 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px 22px; } .hired-detail-grid-large dd { white-space: normal; overflow: visible; } .hired-notes { line-height: 1.55; } .hired-upload-section { border-top: 1px solid var(--theme-border, #ededeb); padding-top: 20px; } .active-client-two-column { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(230px, .8fr); gap: 18px; align-items: start; } .active-document-box, .invoice-send-panel { border: 1px solid var(--theme-border, #e1e2dd); border-radius: 10px; background: var(--theme-surface, #fff); } .active-document-box-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 16px; border-bottom: 1px solid var(--theme-border, #ededeb); } .active-document-box-head h3 { margin: 2px 0 0; font-size: 15px; } .active-document-upload-button { border-color: rgb(26, 35, 64); background: rgb(26, 35, 64); color: #fff; } .active-document-upload-button:hover { border-color: var(--theme-info-border, #283463); background: var(--theme-info-strong, #283463); color: #fff; } .active-document-list { display: grid; gap: 8px; padding: 12px; } .document-version-section { border: 1px solid var(--theme-border, #e7e1d9); border-radius: 12px; background: var(--theme-raised, #faf7f3); padding: 12px; margin-bottom: 12px; } .document-version-label { display: inline-flex; align-items: center; padding: 5px 10px; margin-bottom: 10px; border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .newest-version-section { background: linear-gradient(180deg, var(--theme-raised, #f0f8f2) 0%, var(--theme-surface, #f9fbfa) 100%); border-color: var(--theme-border, #cfe4d6); } .newest-version-section .document-version-label { background: var(--theme-raised, #dff1e4); color: var(--theme-success-text, #1c5d3d); } .oldest-version-section { background: linear-gradient(180deg, var(--theme-raised, #f7f1ed) 0%, var(--theme-raised, #fbfaf8) 100%); border-color: var(--theme-border, #e5d6ca); } .oldest-version-section .document-version-label { background: var(--theme-raised, #f0e4db); color: var(--theme-warning-text, #7a4f38); } .other-version-section { background: linear-gradient(180deg, var(--theme-raised, #f3f5f8) 0%, var(--theme-surface, #fbfbfc) 100%); border-color: var(--theme-border, #dfe4ec); } .other-version-section .document-version-label { background: var(--theme-raised, #e6ebf4); color: var(--theme-info-text, #4a5d7d); } .active-document-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--theme-border, #ededeb); border-radius: 9px; background: var(--theme-surface, #fff); } .newest-version-row { border-color: var(--theme-success-border, #bfdac7); background: linear-gradient(180deg, var(--theme-surface, #ffffff) 0%, var(--theme-raised, #f4faf6) 100%); } .oldest-version-row { border-color: var(--theme-border, #e5d9cf); background: linear-gradient(180deg, var(--theme-surface, #ffffff) 0%, var(--theme-raised, #fdf9f6) 100%); } .other-version-row { border-color: var(--theme-border, #e3e7ee); background: linear-gradient(180deg, var(--theme-surface, #ffffff) 0%, var(--theme-surface, #f9fafb) 100%); } .active-document-name { min-width: 0; } .active-document-name strong, .active-document-name small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .active-document-name strong { color: var(--theme-text, #3c4043); font-size: 12px; } .active-document-name small { margin-top: 3px; color: var(--theme-muted, #858681); font-size: 10px; } .active-document-pending { border-color: var(--theme-border, #c9d7e3); background: var(--theme-raised, #f5f9fc); } .invoice-send-panel { padding: 18px; } .invoice-send-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .invoice-send-heading .eyebrow { margin-bottom: 2px; } .invoice-send-panel h3 { margin: 3px 0 7px; font-size: 16px; } .invoice-sent-count { flex: 0 0 auto; padding: 4px 8px; border: 1px solid var(--theme-border, #d6e1d2); border-radius: 999px; background: var(--theme-raised, #f5faf2); color: var(--theme-success-text, #496344); font-size: 10px; font-weight: 700; white-space: nowrap; } .invoice-send-panel p:not(.eyebrow) { margin: 0 0 16px; color: var(--theme-muted, #7c7d78); font-size: 11.5px; line-height: 1.5; } .invoice-send-panel .button { width: 100%; } .client-invoice-history { margin-top: 22px; border-top: 1px solid var(--theme-border, #ededeb); padding-top: 16px; } .client-invoice-history > .eyebrow { margin-bottom: 9px; } .client-invoice-list { display: grid; gap: 6px; } .client-invoice-item { display: grid; gap: 2px; border: 1px solid var(--theme-border, #ededeb); border-radius: 6px; background: var(--theme-raised, #fbfbf8); padding: 8px 9px; } .client-invoice-item strong { color: var(--theme-text, #3c4043); font-size: 11px; } .client-invoice-item span, .client-invoice-item small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .client-invoice-item span { color: var(--theme-muted, #5e625d); font-size: 10px; } .client-invoice-item small, .client-invoice-empty, .client-invoice-more { color: var(--theme-muted, #858681); font-size: 9.5px; } .client-invoice-empty { margin: 0 !important; } .client-invoice-more { display: block; margin-top: 8px; } .active-document-name { min-width: 0; border: 0; background: transparent; padding: 0; text-align: left; cursor: pointer; } .active-document-name:hover strong { color: var(--navy); text-decoration: underline; } .active-document-open { padding: 5px 8px; font-size: 10px; } .active-document-box .doc-type-icon { flex: 0 0 auto; } .document-row-menu { position: relative; } .document-menu-button { width: 18px; height: 18px; padding: 0; font-size: 8px; line-height: 1; } .document-menu { position: absolute; z-index: 4; top: calc(100% + 4px); right: 0; min-width: 128px; padding: 4px; border: 1px solid var(--line); border-radius: 7px; background: var(--theme-surface, #fff); box-shadow: 0 8px 22px rgba(23,26,22,.14); } .document-menu button { display: block; width: 100%; border: 0; border-radius: 5px; background: transparent; color: var(--theme-muted, #4e504c); padding: 8px 9px; text-align: left; font-size: 11px; cursor: pointer; } .document-menu button:hover, .document-menu button:focus-visible { background: var(--theme-raised, #f1f2f0); outline: 0; } .document-menu .document-menu-danger { color: var(--rose); } .document-update-prompt { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px; padding: 12px; border: 1px solid var(--theme-border, #dce5eb); border-radius: 8px; background: var(--theme-raised, #f6f9fb); color: var(--theme-muted, #56636d); font-size: 11px; } .document-update-prompt > div:first-child { display: grid; gap: 3px; } .document-update-prompt strong { color: var(--theme-info-text, #29445a); font-size: 11px; } .document-update-prompt span { color: var(--theme-muted, #71808a); font-size: 10px; } .document-update-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; } .document-update-prompt .button { min-height: 32px; padding: 7px 10px; font-size: 10px; white-space: nowrap; } .document-update-scheduled { border-color: var(--theme-border, #d8e2d6); background: var(--theme-raised, #f7faf5); } .document-update-scheduled strong { color: var(--theme-success-text, #496344); } .contract-ended-readonly { opacity: .72; } .hired-upload-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; } .hired-upload-head h3 { margin: 2px 0 4px; font-size: 17px; } .hired-upload-head p:not(.eyebrow) { margin: 0; color: var(--theme-muted, #7c7d78); font-size: 11.5px; line-height: 1.5; max-width: 650px; } .hired-upload-head .button { flex: 0 0 auto; } .hired-card { width: 100%; border: 1px solid var(--line); border-radius: 9px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; background: var(--theme-surface, #fff); text-align: left; color: inherit; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; } .hired-card:hover, .hired-card:focus-visible { border-color: var(--theme-border, #b9bbb5); background: var(--theme-raised, #f1f2f0); box-shadow: 0 5px 18px rgba(23,26,22,.06); transform: translateY(-1px); outline: 0; } .hired-card.contract-ended-card { border-color: var(--theme-danger-border, #e3a5a5); background: var(--theme-raised, #fff0f0); } .hired-card.contract-ended-card:hover, .hired-card.contract-ended-card:focus-visible { border-color: var(--theme-danger-border, #c95f63); background: var(--theme-danger-soft, #ffe4e4); } .client-contract-status.contract-ended, .status-pill.contract-ended { color: var(--theme-danger-text, #a33f48); background: var(--theme-danger-soft, #ffd9da); } .hired-card:active { border-color: var(--theme-border, #9aa19c); background: var(--theme-raised, #e9ebe9); box-shadow: 0 0 0 2px rgba(95,102,97,.14); transform: translateY(1px); } .hired-card.selected { border-color: var(--navy); box-shadow: 0 0 0 2px rgba(32,55,76,.08); } .hired-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; } .hired-card-head > span:first-child { min-width: 0; } .hired-card .client-card-title { display: block; font-size: 14px; color: var(--theme-text, #30312e); } .hired-card .client-card-subtitle { display: block; margin-top: 3px; } .hired-card-arrow { color: var(--theme-muted, #9a9b95); font-size: 18px; line-height: 1; } .hired-card:hover .hired-card-arrow, .hired-card.selected .hired-card-arrow { color: var(--navy); } .hired-card-meta { color: var(--theme-muted, #858681); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .view-details-label { color: var(--navy); font-size: 11px; font-weight: 700; } .hired-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; } .hired-list .application-empty { grid-column: 1 / -1; } .hired-card { border: 1px solid var(--line); border-radius: 12px; padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 12px; background: linear-gradient(180deg, var(--theme-surface, #ffffff) 0%, var(--theme-surface, #fafbf9) 100%); box-shadow: 0 6px 16px rgba(23, 26, 22, 0.03); } .hired-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; } .hired-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; margin: 0; } .hired-detail-wide { grid-column: 1 / -1; } .hired-detail-grid dt { color: var(--theme-muted, #9a9b95); font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; margin: 0 0 3px; } .hired-detail-grid dd { color: var(--theme-text, #33342f); font-size: 12.5px; margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .hired-detail-grid dd a { color: var(--navy); text-decoration: none; } .hired-detail-grid dd a:hover { text-decoration: underline; } .hired-documents { display: flex; flex-wrap: wrap; gap: 6px; border-top: 1px solid var(--theme-border, #f0f0ec); padding-top: 12px; } .doc-chip { border: 1px solid var(--theme-border, #e2e2dd); background: var(--theme-raised, #f8f8f5); color: var(--theme-text, #4c4d48); font-size: 11px; padding: 5px 9px; border-radius: 20px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .doc-chip:hover { border-color: var(--navy); color: var(--navy); } .doc-chip-empty { color: var(--theme-subtle, #a9aaa4); background: transparent; border-style: dashed; cursor: default; } .doc-chip-empty:hover { border-color: var(--theme-border, #e2e2dd); color: var(--theme-subtle, #a9aaa4); } .match-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 5px; padding: 0 5px; border: 1px solid var(--theme-border, #f3dfb8); border-radius: 20px; background: var(--theme-warning-soft, #fef3e2); color: var(--theme-warning-text, #a3733d); font: inherit; font-size: 10px; font-weight: 700; white-space: nowrap; cursor: pointer; } .match-badge:hover { border-color: var(--theme-warning-border, #e9d09b); background: var(--theme-warning-soft, #fff0d4); } .match-badge:focus-visible { outline: 2px solid var(--theme-warning-border, #a3733d); outline-offset: 2px; } .application-stage-email-count { display: inline-flex; align-items: center; flex-wrap: nowrap; gap: 5px; max-width: 100%; white-space: nowrap; } .application-stage-email-count .match-badge { flex: 0 0 auto; min-width: 19px; width: 19px; height: 19px; margin: 0; padding: 0; font-size: 10px; } .hired-documents-field { margin-top: 4px; border-top: 1px solid var(--theme-border, #ededeb); padding-top: 16px; } .hired-documents-field-standalone { margin-top: 0; border-top: 0; padding-top: 0; } .hired-documents-field-head { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 700; color: var(--theme-muted, #4e504c); margin-bottom: 10px; } .doc-list { display: grid; gap: 6px; } .doc-row { display: grid; grid-template-columns: 1fr auto 26px; gap: 10px; align-items: center; background: var(--theme-raised, #f8f8f5); border: 1px solid var(--theme-border, #ededea); border-radius: 6px; padding: 8px 10px; } .doc-name { border: 0; background: transparent; text-align: left; color: var(--navy); font-size: 12.5px; font-weight: 650; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 0; } .doc-name:hover { text-decoration: underline; } .doc-size { color: var(--theme-muted, #8b8c86); font-size: 11px; white-space: nowrap; } .doc-remove { border: 0; background: transparent; color: var(--theme-muted, #969792); font-size: 15px; } .doc-remove:hover { color: var(--rose); } .document-archive-item .doc-remove { min-width: 70px; height: 28px; border: 1px solid var(--theme-border, #ecece9); border-radius: 5px; background: var(--theme-surface, #fffafa); display: inline-flex; align-items: center; justify-content: center; padding: 0 8px; font-size: 10px; font-weight: 700; cursor: pointer; flex: 0 0 auto; } .document-archive-item .doc-remove:hover { border-color: var(--theme-border, #efc9cf); background: var(--theme-surface, #fff5f6); color: var(--rose); } .doc-empty { color: var(--theme-muted, #8a8c86); font-size: 12px; margin: 0; padding: 10px 2px; } .doc-note { color: var(--theme-muted, #9a9b95); font-size: 10.5px; margin: 10px 2px 0; } .email-intro { padding: 26px 28px; display: flex; justify-content: space-between; gap: 24px; align-items: center; background: var(--theme-surface, #fbfdfb); } .email-intro h2 { font-size: 26px; } .email-intro p:not(.eyebrow):not(.gmail-status) { color: var(--theme-muted, #6c6d68); font-size: 13px; line-height: 1.55; margin: 10px 0 0; max-width: 680px; } .gmail-status { color: var(--theme-info-text, #7a7c9a); font-size: 11px; font-weight: 700; margin: 10px 0 0; } .email-intro-actions { flex: 0 0 auto; display: grid; gap: 8px; justify-items: stretch; } .email-intro-actions .button { white-space: nowrap; } .gmail-connected-menu { position: relative; display: flex; justify-content: flex-end; } .gmail-menu-trigger { border: 1px solid var(--theme-border, #deded9); background: var(--theme-surface, #fff); border-radius: 7px; min-height: 39px; padding: 0 15px; font-size: 18px; } .gmail-menu-trigger:hover { border-color: var(--navy); color: var(--navy); } .gmail-menu-panel { position: absolute; top: calc(100% + 6px); right: 0; background: var(--theme-surface, #fff); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 10px 30px rgba(23,26,22,.14); padding: 5px; min-width: 160px; z-index: 5; } .gmail-menu-item { display: block; width: 100%; text-align: left; border: 0; background: transparent; color: var(--theme-danger-text, #a4595d); font-weight: 650; font-size: 12.5px; padding: 9px 10px; border-radius: 6px; } .gmail-menu-item:hover { background: var(--theme-raised, #fceff0); } .email-workspace-head { margin-bottom: 2px; } .email-workspace-count-icon { background: var(--theme-raised, #eef2fa); color: var(--theme-info-text, #52637e); } .email-filters { margin-top: 16px; } .email-view-tabs { display: flex; width: max-content; max-width: 100%; gap: 2px; margin: 0 0 10px; padding: 3px; overflow-x: auto; border: 1px solid var(--theme-border, #e1e5e1); border-radius: 7px; background: var(--theme-raised, #f1f3f0); } .email-view-tab { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 34px; padding: 7px 12px; border: 0; border-radius: 5px; background: transparent; color: var(--theme-muted, #5e665f); font-size: 11px; font-weight: 650; white-space: nowrap; } .email-view-tab i { font-size: 11px; } .email-view-tab:hover { border-color: transparent; background: var(--theme-translucent-surface, rgba(255,255,255,.65)); } .email-view-tab.active { border-color: transparent; background: var(--theme-surface, #fff); color: var(--theme-success-text, #365a40); box-shadow: 0 1px 3px rgba(28,42,31,.12); } .button:disabled { opacity: .5; cursor: not-allowed; transform: none !important; } code { background: var(--theme-raised, #f0f1ed); padding: 1px 4px; border-radius: 3px; font-size: .9em; } .gmail-connection-bar { margin-bottom: 10px; padding: 12px 16px; display: flex; align-items: center; justify-content: flex-end; gap: 10px; background: var(--theme-raised, #f7f8f4); } .gmail-connection-bar > div:first-child { margin-right: auto; } .gmail-connection-bar .gmail-status { margin: 3px 0 0; } .inbox-toolbar { margin: 19px 0 12px; display: flex; gap: 16px; align-items: center; } .inbox-toolbar .search-field { max-width: 460px; } .inbox-count { color: var(--theme-muted, #898a85); font-size: 12px; } .email-list { display: grid; } .email-section + .email-section { border-top: 8px solid var(--paper); } .email-section-heading { padding: 15px 20px 11px; display: flex; align-items: end; justify-content: space-between; gap: 12px; background: var(--theme-raised, #fbfbf8); border-bottom: 1px solid var(--line); } .email-section-heading h3 { margin: 4px 0 0; color: var(--theme-text, #343631); font-size: 15px; } .email-section-heading > span { color: var(--theme-muted, #898a85); font-size: 11px; white-space: nowrap; } .email-section-sent .email-section-heading { background: var(--theme-raised, #f4f7f4); } .email-selection-trigger { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 7px 11px; border-color: var(--theme-border, #d8e2da); color: var(--theme-success-text, #3f6349); font-size: 11px; font-weight: 700; } .email-selection-trigger:hover { border-color: var(--theme-border, #b9cbbd); background: var(--theme-raised, #f7faf7); color: var(--theme-success-text, #2e5139); } .email-bulk-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; } .email-select-all-control { display: inline-flex; align-items: center; gap: 5px; color: var(--theme-muted, #717971); font-size: 11px; white-space: nowrap; cursor: pointer; } .email-select-all-control input { width: 15px; height: 15px; margin: 0; accent-color: var(--workspace-accent); } .email-selection-count { padding-right: 8px; border-right: 1px solid var(--theme-border, #dfe4df); color: var(--theme-muted, #717971); font-size: 11px; font-weight: 650; white-space: nowrap; } .email-selection-cancel { min-height: 32px; padding: 6px 9px; border: 0; border-radius: 4px; background: transparent; color: var(--theme-muted, #656d66); font-size: 11px; font-weight: 650; } .email-selection-cancel:hover { background: var(--theme-raised, #eef1ee); color: var(--theme-text, #343c35); } .email-bulk-delete { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 6px 11px; font-size: 11px; } .email-bulk-delete:disabled { border-color: var(--theme-border, #e1e4e1); background: var(--theme-raised, #f2f4f2); color: var(--theme-muted, #929992); opacity: 1; } .email-row { padding: 11px 20px; display: grid; grid-template-columns: 34px minmax(0, 1fr) 100px 140px; gap: 12px; align-items: center; border-bottom: 1px solid var(--theme-border, #efefec); } .email-selection-mode .email-row { grid-template-columns: 22px 34px minmax(0, 1fr) 100px 140px; } .email-row[data-email-detail] { cursor: pointer; } .email-row:hover, .email-row:focus-visible { background: var(--theme-raised, #f1f2f0); outline: 0; } .email-row:active { background: var(--theme-raised, #e9ebe9); box-shadow: inset 3px 0 0 #9aa19c; } .email-row.sent { background: var(--theme-raised, #f7faf7); border-left: 3px solid var(--theme-success-border, #6d9274); padding-left: 17px; } .email-row.sent:hover { background: var(--theme-raised, #eff5ef); } .email-row:last-child { border: 0; } .email-select-checkbox { width: 16px; height: 16px; margin: 0; accent-color: var(--workspace-accent); } .email-bulk-delete:disabled { cursor: not-allowed; } .email-avatar { width: 33px; height: 33px; border-radius: 50%; background: var(--theme-raised, #e8f0e9); color: var(--theme-success-text, #42614b); display: grid; place-items: center; font-size: 12px; font-weight: 800; } .email-row-content { min-width: 0; display: grid; gap: 3px; } .email-sender-line { min-width: 0; display: flex; align-items: center; gap: 6px; } .email-subject { color: var(--theme-text, #33342f); font-size: 11px; font-weight: 650; } .email-preview { min-width: 0; margin: 0; overflow: hidden; color: var(--theme-muted, #777873); font-size: 11px; white-space: nowrap; text-overflow: ellipsis; } .email-snippet { color: var(--theme-muted, #858681); } .sent-email-badge { display: inline-block; vertical-align: 2px; margin-left: 5px; padding: 2px 5px; border-radius: 4px; background: var(--theme-info-soft, #e6def8); color: var(--theme-info-text, #665494); font-size: 8px; letter-spacing: .08em; } .client-match-tag { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border: 1px solid var(--theme-border, #f3dfb8); border-radius: 20px; background: var(--theme-warning-soft, #fef3e2); color: var(--theme-warning-text, #a3733d); font-size: 9px; font-weight: 700; white-space: nowrap; } .client-match-tag.neutral { background: var(--theme-raised, #edf0f2); color: var(--theme-muted, #5f6368); } .email-from { min-width: 0; margin: 0; overflow: hidden; color: var(--theme-text, #33342f); font-size: 12px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; } .email-date { display: grid; gap: 2px; color: var(--theme-muted, #777873); font-size: 11px; white-space: nowrap; text-align: right; } .email-time { color: var(--theme-subtle, #a0a19c); font-size: 10px; } .email-row-actions { display: flex; align-items: center; justify-content: flex-end; } .email-action-menu { position: relative; } .email-actions-trigger { min-width: 84px; border: 1px solid var(--theme-border, #d7e4d8); border-radius: 6px; background: var(--theme-raised, #f5faf5); color: var(--theme-success-text, #42614b); padding: 6px 10px; font-size: 11px; font-weight: 700; white-space: nowrap; } .email-actions-trigger:hover, .email-actions-trigger:focus-visible { border-color: var(--green); background: var(--theme-raised, #eaf2ea); outline: 0; } .email-actions-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 142px; padding: 4px; border: 1px solid var(--line); border-radius: 8px; background: var(--theme-surface, #fff); box-shadow: 0 12px 26px rgba(23,26,22,.12); z-index: 5; } .email-actions-menu.hidden { display: none; } .email-actions-menu button { display: block; width: 100%; border: 0; border-radius: 5px; padding: 8px 9px; background: transparent; text-align: left; color: var(--theme-muted, #4b514b); font-size: 11px; font-weight: 650; cursor: pointer; } .email-actions-menu button:hover, .email-actions-menu button:focus-visible { background: var(--theme-raised, #f1f2f0); outline: 0; } .email-actions-menu .email-action-delete { color: var(--rose); } .privacy-note { color: var(--theme-muted, #81827d); font-size: 11px; line-height: 1.5; margin: 14px 4px 0; max-width: 760px; } .email-compose-modal { width: min(700px, calc(100vw - 28px)); } .modal.email-detail-modal { width: min(980px, calc(100vw - 36px)); } .email-detail-meta { display: grid; gap: 10px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .email-detail-meta div { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; font-size: 12px; } .email-detail-meta span { color: var(--muted); } .email-detail-meta strong { overflow-wrap: anywhere; font-weight: 600; } .email-detail-body { min-height: 150px; margin-top: 18px; padding: 16px; border: 1px solid var(--line); border-radius: 7px; background: var(--theme-surface, #fcfcfa); color: var(--theme-text, #4b4d48); white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; overflow-x: hidden; line-height: 1.55; font-size: 13px; } .application-emails-modal { width: min(900px, calc(100vw - 36px)); max-height: calc(100vh - 40px); overflow-y: auto; } .application-emails-form { padding: 24px; } .application-emails-form .modal-heading { margin-bottom: 12px; } .application-emails-summary { margin: 0 0 8px; color: var(--muted); font-size: 11px; } .application-emails-list { display: grid; } .application-email-message { padding: 14px 0; border-top: 1px solid var(--line); } .application-email-message-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .application-email-message-heading h3 { margin: 0 0 5px; color: var(--theme-text, #30342f); font-size: 14px; font-weight: 650; overflow-wrap: anywhere; } .application-email-message-heading p { margin: 0; color: var(--theme-muted, #687069); font-size: 11px; overflow-wrap: anywhere; } .application-email-message-heading time { flex: 0 0 auto; color: var(--theme-muted, #777d77); font-size: 10px; } .application-email-message-body { display: block; margin-top: 11px; padding: 13px; border: 1px solid var(--theme-border, #e7e9e5); border-radius: 6px; background: var(--theme-surface, #fbfcfa); color: var(--theme-text, #454a45); font-size: 12px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; } .compose-template-row { display: flex; align-items: end; gap: 10px; margin-bottom: 15px; } .compose-template-row .form-field { flex: 1; } .compose-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 15px 13px; } .compose-fields .form-field-wide { grid-column: 1 / -1; } .compose-attachment-row { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 2px; } .compose-attachment-name { display: inline-flex; align-items: center; min-height: 35px; padding: 7px 10px; border-radius: 6px; background: var(--theme-raised, #edf4ef); color: var(--theme-success-text, #3a5d49); border: 1px solid var(--theme-border, #d7e4d8); font-size: 12px; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .compose-template-save { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 9px; } .compose-template-save input { min-width: 180px; border: 1px solid var(--theme-border, #deded9); border-radius: 6px; padding: 9px 10px; font: inherit; font-size: 12px; } .compose-template-save input:focus { outline: 0; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(26,35,64,.13); } .compose-extra-options, .compose-extras-body { display: contents; } .compose-extra-options > summary { display: none; } .compose-status { min-height: 18px; color: var(--theme-muted, #687269); font-size: 11px; margin: 15px 0 0; display: block; } .compose-status.status-info { color: var(--theme-muted, #687269); } .compose-status.status-success { padding: 10px 12px; border: 1px solid var(--theme-border, #cfe7d3); border-radius: 6px; background: var(--theme-raised, #edf9ef); color: var(--theme-success-text, #2d6b3d); font-weight: 700; line-height: 1.45; } .compose-status.status-alert, .documents-folder-status.status-alert { padding: 10px 12px; border: 1px solid var(--theme-border, #efc8c8); border-radius: 6px; background: var(--theme-raised, #ffe8e8); color: var(--theme-danger-text, #8f2431); font-weight: 750; line-height: 1.45; box-shadow: inset 0 0 0 1px rgba(149, 52, 64, 0.08); } html:has(dialog[open]) { overflow: hidden; scrollbar-gutter: stable; overscroll-behavior: none; } dialog[open] { overscroll-behavior: contain; } .modal { width: min(665px, calc(100vw - 28px)); max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--theme-border, #deded9); border-radius: 12px; padding: 0; color: var(--ink); box-shadow: 0 22px 70px rgba(23,26,22,.22); } #clientModal { width: min(980px, calc(100vw - 36px)); max-height: calc(100vh - 36px); overflow: hidden; } .modal::backdrop { background: rgba(20,24,20,.43); } .modal form { padding: 24px; } #clientForm { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; max-height: calc(100vh - 36px); overflow: hidden; } .client-form-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 25px; min-height: 0; } .client-form-column { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 15px 13px; padding: 0 1px; } .client-form-column + .client-form-column { border-left: 1px solid var(--line); padding-left: 25px; min-height: 0; overflow-y: auto; padding-right: 8px; } .form-column-label { grid-column: 1 / -1; color: var(--theme-muted, #81817d); font-size: 10px; font-weight: 750; letter-spacing: .12em; margin: 0 0 1px; } .form-subsection-label { grid-column: 1 / -1; color: var(--ink-soft); font-size: 10px; font-weight: 750; letter-spacing: .1em; margin: 8px 0 -3px; padding-top: 10px; border-top: 1px solid var(--line); } .client-form-column:first-child .form-subsection-label:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; } .client-form-column .form-field-wide { grid-column: 1 / -1; } .view-details-form .form-grid { gap: 12px; } .view-details-form .form-field input:disabled, .view-details-form .form-field select:disabled, .view-details-form .form-field textarea:disabled { color: var(--theme-muted, #4f514d); background: var(--theme-raised, #f8f8f5); opacity: 1; } .view-details-form .required { display: none; } .view-details-form .modal-actions-split { justify-content: flex-end; } .view-details-form .modal-heading, #clientForm .modal-heading { margin-bottom: 16px; } .view-details-form .modal-heading h2, #clientForm .modal-heading h2 { font-size: 30px; line-height: 1.15; } #clientForm .client-form-layout { gap: 20px; padding: 16px; border-radius: 8px; background: var(--theme-raised, #f1f3f1); align-items: start; overflow-x: hidden; overflow-y: auto; scrollbar-gutter: stable; scroll-padding-block: 12px; } #clientForm .client-form-column { min-width: 0; align-content: start; padding: 0 1px; background: transparent; border: 0; box-shadow: none; } #clientForm .client-form-column + .client-form-column { min-height: 0; padding: 0 1px; border: 0; overflow: visible; } #clientForm .form-field { min-width: 0; overflow-wrap: anywhere; } #clientForm .form-field :is(input, select, textarea) { min-width: 0; max-width: 100%; } @media (min-width: 901px) { #clientModal #clientForm.active-client-edit .client-form-layout { align-items: stretch; overflow: hidden; scrollbar-gutter: auto; } #clientModal #clientForm.active-client-edit .client-form-column { min-height: 0; } #clientModal #clientForm.active-client-edit .client-form-column:first-child { gap: 10px 12px; } #clientModal #clientForm.active-client-edit .client-form-column:first-child .form-field { gap: 4px; font-size: 11px; } #clientModal #clientForm.active-client-edit .client-form-column:first-child .form-field :is(input, select) { min-height: 34px; padding: 6px 8px; font-size: 12px; } #clientModal #clientForm.active-client-edit .client-form-column + .client-form-column { overflow-x: hidden; overflow-y: auto; padding-right: 12px; scrollbar-gutter: stable; scroll-padding-block: 12px; } } #clientForm .form-column-label { color: var(--theme-text, #45534a); font-size: 11px; letter-spacing: .08em; } #clientForm .form-subsection-label { color: var(--theme-muted, #55645a); border-color: var(--theme-border, #dfe4df); } .client-social-links-field { display: grid; gap: 9px; min-width: 0; padding: 11px; border: 1px solid var(--theme-border, #dde3de); border-radius: 8px; background: var(--theme-raised, #f8faf8); } .client-social-links-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .client-social-links-heading > div { display: grid; gap: 2px; min-width: 0; } .client-social-links-heading span { color: var(--theme-text, #323b35); font-size: 12px; font-weight: 700; } .client-social-links-heading small { color: var(--theme-muted, #7b857e); font-size: 10px; font-weight: 500; } .button.client-social-add { min-height: 26px; flex: 0 0 auto; padding: 4px 8px; border-color: var(--theme-border, #c9d3ef); border-radius: 6px; background: var(--theme-raised, #e9eefc); color: var(--theme-info-text, #26345d); font-size: 10px; font-weight: 700; box-shadow: none; } .button.client-social-add:hover { border-color: var(--theme-info-border, #aebbe0); background: var(--theme-info-soft, #dfe7fb); color: var(--theme-info-text, #1c294f); } .button.client-social-add i { font-size: 9px; } .client-social-links-list { display: grid; gap: 7px; } .client-social-link-row { display: grid; grid-template-columns: minmax(112px, .42fr) minmax(0, 1fr) 34px; gap: 7px; align-items: center; } .client-social-link-row label { min-width: 0; } .client-social-link-row select, .client-social-link-row input { width: 100%; min-width: 0; height: 35px; padding: 7px 9px; border: 1px solid var(--theme-border, #d9dfda); border-radius: 6px; background: var(--theme-surface, #fff); color: var(--ink); font: inherit; font-size: 12px; } .client-social-link-row select:focus, .client-social-link-row input:focus { outline: 2px solid rgba(31, 43, 79, .13); border-color: var(--navy); } .client-social-remove { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--theme-border, #ead9db); border-radius: 6px; background: var(--theme-surface, #fff); color: var(--theme-danger-text, #a44855); cursor: pointer; } .client-social-remove:hover { border-color: var(--theme-danger-border, #d8aeb4); background: var(--theme-raised, #fff4f5); } .view-details-form .client-social-links-field { background: var(--theme-surface, #fafbfa); } .view-details-form .client-social-link-row { grid-template-columns: minmax(110px, .42fr) minmax(0, 1fr); } @media (max-width: 560px) { .client-social-links-heading { align-items: flex-start; } .client-social-link-row { grid-template-columns: minmax(0, 1fr) 34px; } .client-social-link-row label:nth-child(2) { grid-column: 1 / -1; grid-row: 2; } .client-social-link-row .client-social-remove { grid-column: 2; grid-row: 1; } } .view-details-form .form-field input:disabled, .view-details-form .form-field select:disabled, .view-details-form .form-field textarea:disabled { border-color: var(--theme-border, #e0e4e0); background: var(--theme-surface, #fafbfa); color: var(--theme-text, #343a35); } @media (max-width: 720px) { #clientForm .client-form-column + .client-form-column { padding-top: 20px; border-top: 1px solid var(--theme-border, #dfe4df); } #clientForm .client-form-layout { overflow: visible; } #clientForm .client-form-column + .client-form-column { overflow: visible; } } .details-readonly-label { color: var(--theme-muted, #858681); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .modal-heading { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 23px; } .modal-heading h2 { margin: 5px 0 0; font-size: 25px; letter-spacing: -.02em; font-weight: 650; } .icon-button { border: 0; border-radius: 6px; color: var(--theme-muted, #676963); background: transparent; font-size: 25px; line-height: 1; padding: 1px 5px 5px; } .icon-button:hover { background: var(--theme-raised, #f2f2ef); } .modal .modal-heading > .icon-button, .settings-modal-heading > .icon-button { display: grid; position: relative; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; padding: 0; border: 1px solid var(--theme-border, #d5ddd6); border-radius: 9px; background: var(--theme-raised, #f5f8f5); font-size: 0; line-height: 1; color: transparent; } .modal .modal-heading > .icon-button::before, .settings-modal-heading > .icon-button::before { content: ""; position: absolute; top: 50%; left: 50%; width: 15px; height: 2px; border-radius: 2px; background: var(--theme-success-strong, #3e5946); transform: translate(-50%, -50%) rotate(45deg); pointer-events: none; } .modal .modal-heading > .icon-button::after, .settings-modal-heading > .icon-button::after { content: ""; position: absolute; top: 50%; left: 50%; width: 15px; height: 2px; border-radius: 2px; background: var(--theme-success-strong, #3e5946); transform: translate(-50%, -50%) rotate(-45deg); pointer-events: none; } .modal .modal-heading > .icon-button:hover, .settings-modal-heading > .icon-button:hover { border-color: var(--theme-border, #d5ddd6); background: var(--theme-raised, #f5f8f5); } .modal .modal-heading > .icon-button:focus-visible, .settings-modal-heading > .icon-button:focus-visible { outline: 3px solid rgba(71, 108, 83, .28); outline-offset: 2px; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px 13px; } .form-field { display: grid; gap: 6px; color: var(--theme-muted, #4e504c); font-weight: 700; font-size: 12px; } .form-field-wide { grid-column: 1 / -1; } .form-field input, .form-field select, .form-field textarea { background: var(--theme-surface, #fff); border: 1px solid var(--theme-border, #deded9); color: var(--theme-text, #272824); border-radius: 6px; outline: 0; padding: 9px 10px; font-weight: 450; font-size: 13px; width: 100%; } .form-field textarea { resize: vertical; min-height: 89px; line-height: 1.4; } .salary-estimate-field { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-top: -2px; padding: 10px 12px; border: 1px solid var(--theme-border, #dce6dc); border-radius: 7px; background: var(--theme-raised, #f6faf6); } .salary-estimate-label { color: var(--theme-success-text, #304a35); font-size: 11px; font-weight: 700; } .salary-estimate-values { display: inline-flex; align-items: baseline; justify-content: flex-end; gap: 8px; flex-wrap: wrap; } .salary-estimate-values strong { color: var(--theme-success-text, #203b28); font-size: 15px; font-weight: 750; } .salary-estimate-php { color: var(--muted); font-size: 11px; font-weight: 550; } .form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(26,35,64,.13); } .follow-up-option { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 16px; border: 1px solid var(--theme-border, #dce6dc); border-radius: 8px; background: var(--theme-raised, #f6faf6); } .follow-up-option:has(#automaticFollowUp:checked) { border-color: var(--theme-border, #9ab29b); background: var(--theme-raised, #eef7ee); } .follow-up-control { display: flex; align-items: flex-start; gap: 10px; min-width: 0; } .follow-up-control > input { width: 17px; height: 17px; flex: 0 0 17px; margin: 1px 0 0; accent-color: var(--green); } .follow-up-copy { display: grid; gap: 4px; min-width: 0; } .follow-up-copy strong { color: var(--theme-success-text, #304a35); font-size: 12px; } .follow-up-copy .field-help { line-height: 1.45; } .follow-up-note { color: var(--theme-muted, #6d7c70); font-size: 10px; font-weight: 650; line-height: 1.4; text-align: right; max-width: 180px; } .required { display: none; } .hidden { display: none; } .modal-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 24px; } .email-result-modal { width: min(480px, calc(100vw - 28px)); max-height: calc(100dvh - 32px); overflow-y: auto; } .email-result-heading { align-items: center; margin-bottom: 16px; } .email-result-header { display: flex; align-items: center; gap: 12px; } .email-result-badge { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; font-size: 20px; } .email-result-badge.success { background: linear-gradient(135deg, var(--theme-raised, #edf9ef), var(--theme-raised, #dff3e0)); color: var(--theme-success-text, #2e7d4d); border: 1px solid var(--theme-border, #cfe7d3); } .email-result-badge.error { background: linear-gradient(135deg, var(--theme-raised, #fff1f1), var(--theme-danger-soft, #fde3e3)); color: var(--theme-danger-text, #b33b44); border: 1px solid var(--theme-border, #f0c9c9); } .email-result-badge.info { background: var(--theme-raised, #eef3f5); color: var(--theme-info-text, #426272); border: 1px solid var(--theme-border, #d5e0e4); } .email-result-modal .modal-heading h2 { margin: 0; font-size: 22px; } .email-result-message { margin: 0; padding: 14px 16px; border-radius: 10px; background: var(--theme-raised, #f7f8f6); border: 1px solid var(--theme-border, #e7e8e3); color: var(--theme-muted, #4d534d); line-height: 1.55; font-size: 13px; white-space: pre-line; overflow-wrap: anywhere; } .email-result-modal[data-status="success"] .email-result-message { background: linear-gradient(180deg, var(--theme-raised, #f5fbf7), var(--theme-raised, #eefaf0)); border-color: var(--theme-border, #cfe5d4); color: var(--theme-success-text, #28563b); } .email-result-modal[data-status="error"] .email-result-message { background: linear-gradient(180deg, var(--theme-surface, #fff8f8), var(--theme-raised, #fff0f0)); border-color: var(--theme-border, #f1d0d0); color: var(--theme-danger-text, #7d2d33); } .email-result-modal[data-status="info"] .email-result-message { background: var(--theme-raised, #f6f9fa); border-color: var(--theme-border, #dce7ea); color: var(--theme-info-text, #354d58); } .email-result-actions { margin-top: 20px; } .app-confirm-modal { font-family: inherit; } .app-confirm-form .modal-heading { margin-bottom: 14px; } .app-confirm-message { margin: 0; color: var(--theme-muted, #565c56); font-size: 13px; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; } .app-confirm-form .modal-actions { margin-top: 20px; } .modal-actions-split { justify-content: space-between; align-items: center; } .modal-actions-right { display: flex; gap: 9px; } .to-apply-form { display: grid; gap: 16px; } .to-apply-form .modal-heading { margin-bottom: 4px; } .to-apply-form .modal-actions { margin-top: 4px; justify-content: flex-end; } .to-apply-form .modal-actions-split { justify-content: flex-end; } #clientForm .modal-actions-split { justify-content: flex-end; gap: 14px; } .send-email-menu { position: relative; } .send-email-menu-panel { position: absolute; z-index: 8; right: 0; bottom: calc(100% + 6px); min-width: 150px; padding: 5px; border: 1px solid var(--line); border-radius: 8px; background: var(--theme-surface, #fff); box-shadow: 0 10px 30px rgba(23,26,22,.14); } .send-email-menu-panel button { display: block; width: 100%; border: 0; border-radius: 5px; background: transparent; color: var(--theme-muted, #4e504c); padding: 9px 10px; text-align: left; font-size: 11px; cursor: pointer; } .send-email-menu-panel button:hover, .send-email-menu-panel button:focus-visible { background: var(--theme-raised, #f1f2f0); outline: 0; } .small-modal { width: min(470px, calc(100vw - 28px)); } .settings-modal { width: min(1280px, calc(100vw - 32px)); height: min(92dvh, 900px); max-height: calc(100dvh - 32px); overflow: hidden; } .settings-modal[open] { display: grid; grid-template-columns: minmax(340px, .8fr) minmax(0, 1.2fr); grid-template-rows: auto minmax(0, 1fr); align-items: stretch; } .settings-modal-heading { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 25px; border-bottom: 1px solid var(--line); } .settings-modal-heading h2 { margin: 4px 0 0; color: var(--theme-text, #292a26); font-size: 21px; font-weight: 650; } .settings-device-pane { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; min-width: 0; padding: 24px 26px 20px; border-right: 1px solid var(--line); } .settings-device-section { padding-bottom: 19px; } .settings-device-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 14px; } .settings-device-heading h3 { margin: 5px 0 0; color: var(--theme-text, #343630); font-size: 16px; font-weight: 650; } .settings-device-heading .settings-stats { display: grid; grid-template-columns: repeat(2, minmax(145px, 1fr)); flex: 0 0 auto; gap: 10px; margin: 0; padding: 0; border: 0; background: transparent; } .settings-device-heading .settings-stats span { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 7px; padding: 11px 13px; border: 1px solid var(--theme-border, #e7e9e4); border-radius: 7px; background: var(--theme-surface, #fff); white-space: nowrap; } .settings-device-heading .settings-stats strong { margin: 0; color: var(--theme-text, #2e3933); font-size: 19px; font-variant-numeric: tabular-nums; } .settings-backup-controls { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 14px; margin-top: 17px; } .settings-backup-controls .form-field { min-width: 0; } .settings-backup-controls .form-field select { width: 100%; min-height: 40px; margin-top: 6px; } .settings-backup-controls > div { display: grid; gap: 9px; } .settings-backup-controls .backup-status { margin: 0; } .settings-backup-controls .danger-button { grid-column: 1; justify-self: start; } .settings-account-content { grid-column: 2; grid-row: 2; min-width: 0; min-height: 0; padding: 24px 28px 26px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; } .settings-modal-actions { display: flex; justify-content: flex-end; margin-top: auto; padding-top: 24px; } .settings-account-heading { display: grid; gap: 5px; margin-bottom: 17px; padding-bottom: 15px; border-bottom: 1px solid var(--line); } .settings-account-heading h3 { margin: 0; color: var(--theme-text, #343630); font-size: 18px; font-weight: 650; } #settingsModal #accountView.active { width: 100%; max-width: none; } .follow-up-editor-modal { width: min(700px, calc(100vw - 28px)); } .follow-up-editor-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 15px 13px; } .follow-up-editor-fields .form-field-wide { grid-column: 1 / -1; } .follow-up-editor-status { color: var(--theme-muted, #687269); font-size: 11px; line-height: 1.45; margin: 15px 0 0; } .settings-copy { color: var(--theme-muted, #666863); font-size: 13px; line-height: 1.55; margin: 0; } .follow-up-schedule-note { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; padding: 12px 14px; border: 1px solid var(--theme-border, #dce5df); border-radius: 10px; background: var(--theme-raised, #f5f8f5); color: var(--theme-text, #3e5447); } .follow-up-schedule-note-icon { flex: 0 0 28px; display: grid; place-items: center; height: 28px; border-radius: 8px; background: var(--theme-raised, #e7eee8); font-size: 14px; } .follow-up-schedule-note strong { display: block; font-size: 12px; line-height: 1.5; } .follow-up-schedule-note p { margin: 3px 0 6px; font-size: 12px; line-height: 1.5; } .follow-up-schedule-note small { display: block; color: var(--theme-muted, #68746c); font-size: 11px; line-height: 1.5; } .settings-stats { background: var(--theme-raised, #f7f7f4); border: 1px solid var(--theme-border, #ededeb); padding: 14px; display: flex; gap: 24px; margin: 20px 0; border-radius: 7px; color: var(--theme-muted, #71726d); font-size: 12px; } .settings-stats strong { color: var(--theme-text, #30312d); margin-right: 3px; } .backup-status { display: flex; align-items: center; gap: 7px; margin: 10px 0 18px; color: var(--theme-success-text, #517158); font-size: 11px; font-weight: 650; } .backup-status::before { content: ''; width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: currentColor; } .danger-button { border: 1px solid var(--theme-border, #eacfd0); background: var(--theme-surface, #fffafa); color: var(--theme-danger-text, #a4595d); border-radius: 6px; padding: 9px 12px; font-weight: 700; font-size: 12px; } .danger-button:hover { background: var(--theme-raised, #fceff0); } .notification-menu { position: relative; } .notification-button { position: relative; width: 40px; height: 40px; border: 1px solid var(--line); background: var(--theme-surface, #fff); color: var(--navy); border-radius: 12px; display: grid; place-items: center; font-size: 17px; transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease; } .notification-button:hover { border-color: var(--theme-border, #cdd7ce); background: var(--theme-raised, #f7faf7); box-shadow: 0 4px 12px rgba(23, 43, 31, .08); transform: translateY(-1px); } .notification-button[aria-expanded="true"] { border-color: var(--theme-border, #b9cfbe); background: var(--theme-raised, #f1f7f2); box-shadow: 0 4px 14px rgba(35, 74, 48, .1); } .notification-button:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; } .notification-badge { position: absolute; top: 6px; right: 6px; box-sizing: border-box; min-width: 17px; height: 17px; padding: 0 4px; border: 2px solid var(--theme-border, #fff); border-radius: 999px; background: var(--theme-danger-strong, #bd3c4a); color: #fff; font-size: 9px; font-variant-numeric: tabular-nums; font-weight: 800; line-height: 1; display: grid; place-items: center; box-shadow: 0 1px 4px rgba(112, 28, 38, .28); } .notification-badge.is-single { top: 8px; right: 8px; width: 9px; min-width: 9px; height: 9px; padding: 0; color: transparent; box-shadow: 0 0 0 2px #fff, 0 1px 4px rgba(112, 28, 38, .28); } .notification-panel { position: absolute; right: 0; top: 48px; z-index: 30; width: min(420px, calc(100vw - 32px)); max-height: min(70vh, 460px); background: var(--theme-surface, #fff); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 14px 35px rgba(23,26,22,.13); overflow-y: auto; font-family: inherit; } .notification-panel-head { padding: 14px 15px; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: flex-start; } .notification-panel-actions { display: flex; gap: 10px; flex: 0 0 auto; } .clear-alerts-button { color: var(--rose); } .notification-panel-head strong, .notification-panel-head span { display: block; } .notification-panel-head strong { font-size: 13px; } .notification-panel-head span { margin-top: 3px; color: var(--muted); font-size: 10px; } .notification-tabs { display: grid; flex: 0 0 100%; grid-template-columns: repeat(auto-fit, minmax(95px, 1fr)); gap: 5px; padding-top: 2px; border-top: 1px solid var(--line); } .notification-tabs [role="tab"] { display: flex; min-width: 0; min-height: 32px; align-items: center; justify-content: center; padding: 6px; border: 1px solid transparent; border-radius: 6px; background: var(--theme-raised, #f7f8f5); color: var(--theme-muted, #5e645f); font: inherit; font-size: 10px; line-height: 1.2; cursor: pointer; white-space: nowrap; } .notification-tabs [role="tab"]:hover { border-color: var(--theme-border, #e0e4dd); background: var(--theme-raised, #f1f3ef); } .notification-tabs [role="tab"][aria-selected="true"] { border-color: var(--theme-border, #d5ddd3); background: var(--theme-raised, #edf2eb); color: var(--navy); font-weight: 700; } .notification-tab-label { position: relative; display: inline-block; } .notification-tab-dot { position: absolute; top: -5px; right: -6px; width: 6px; height: 6px; box-sizing: content-box; border: 1px solid var(--theme-border, #fff); border-radius: 50%; background: var(--rose); } .notification-tab-dot:not([hidden]) { display: inline-block; } .notification-tabs [role="tab"]:focus-visible, .notification-panel button:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; } .notification-section { padding-bottom: 8px; } .notification-section-title { margin: 0; padding: 11px 14px 8px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--theme-muted, #626962); font-weight: 750; } .notification-item { width: calc(100% - 20px); margin: 0 10px 8px; border: 1px solid var(--theme-border, #e9eae5); border-radius: 8px; background: var(--theme-surface, #fff); color: inherit; display: flex; align-items: flex-start; gap: 11px; padding: 12px 13px; transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; } .notification-item:hover, .notification-item.unread { border-color: var(--theme-border, #d8ded5); background: var(--theme-raised, #f8faf7); } .notification-item:focus-visible { outline: 2px solid var(--navy); outline-offset: 1px; } .notification-item.unread { box-shadow: inset 3px 0 var(--rose); } .notification-item.is-overdue { border-left: 3px solid var(--theme-danger-border, #a83b42); } .notification-item.is-due-today, .notification-item.is-ending-soon { border-left: 3px solid var(--theme-warning-border, #a36a16); } .notification-item.is-ended { border-left: 3px solid var(--theme-border, #717873); } .notification-item-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--theme-hover, #c9cbc5); margin-top: 6px; flex: 0 0 auto; } .notification-item.unread .notification-item-dot { background: var(--rose); } .notification-item-copy { min-width: 0; flex: 1; display: grid; gap: 4px; font-family: inherit; } .notification-item-heading { min-width: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .notification-item-heading strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--theme-text, #30312e); font-size: 12px; font-weight: 650; line-height: 1.4; } .notification-item-heading time { flex: 0 0 auto; color: var(--theme-muted, #777973); font-size: 10px; font-weight: 450; line-height: 1.4; } .notification-item-subject { padding: 0; border: 0; background: transparent; color: var(--theme-text, #424640); text-align: left; font: inherit; font-size: 11px; font-weight: 650; line-height: 1.45; overflow-wrap: anywhere; cursor: pointer; } .notification-item-subject:hover { text-decoration: underline; text-underline-offset: 2px; } .notification-item.unread .notification-item-heading strong, .notification-item.unread .notification-item-subject { color: var(--theme-text, #242923); font-weight: 750; } .notification-item-copy small { color: var(--theme-muted, #777973); font-size: 10px; font-weight: 450; line-height: 1.4; overflow-wrap: anywhere; } .notification-item-actions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; } .notification-item-actions button { min-height: 27px; padding: 4px 7px; border: 1px solid var(--theme-border, #dfe2dd); border-radius: 5px; background: var(--theme-surface, #fff); color: var(--theme-muted, #4e554f); font: inherit; font-size: 10px; cursor: pointer; } .notification-item-actions button:hover { border-color: var(--theme-border, #aeb8ae); background: var(--theme-raised, #f5f7f4); } .notification-empty { padding: 20px 15px; color: var(--theme-muted, #656b65); font-size: 11px; } .client-contract-status { width: fit-content; font-size: 10px; font-weight: 700; padding: 4px 7px; border-radius: 20px; } .client-contract-status.contract-active { background: var(--green-soft); color: var(--green); } .client-contract-status.not-active { background: var(--theme-raised, #f4e9ea); color: var(--rose); } .contract-controls { display: grid; grid-template-columns: 1fr 1fr auto auto; gap: 10px; align-items: end; padding-top: 6px; } .compact-field { margin: 0; } .compact-field span { display: block; color: var(--theme-muted, #777973); font-size: 10px; margin-bottom: 5px; } .compact-field select, .compact-field input { width: 100%; min-height: 38px; border: 1px solid var(--line); border-radius: 7px; background: var(--theme-surface, #fff); padding: 8px 10px; font-size: 12px; } .button-danger { border: 1px solid var(--theme-border, #e5c8ca); background: var(--theme-surface, #fff7f7); color: var(--rose); } .button-danger:hover { background: var(--theme-raised, #fbecee); border-color: var(--theme-danger-border, #d9aeb1); } .upload-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .documents-folder-status { margin-top: 12px; padding: 9px 10px; border: 1px dashed var(--theme-border, #dddeda); border-radius: 7px; background: var(--theme-raised, #fafaf7); display: flex; align-items: center; gap: 8px; color: var(--theme-muted, #777973); font-size: 10.5px; } .documents-folder-status code { font-size: 10px; } .documents-folder-status .text-button { margin-left: auto; } .folder-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--theme-hover, #c7c8c3); flex: 0 0 auto; } .folder-dot.ready { background: var(--green); } .folder-dot.unavailable { background: var(--orange); } .toast { position: fixed; z-index: 20; bottom: 25px; left: 50%; transform: translate(-50%, 18px); background: var(--navy-deep); color: #fff; padding: 10px 14px; font-size: 12px; border-radius: 7px; opacity: 0; pointer-events: none; transition: .2s ease; box-shadow: 0 8px 25px rgba(0,0,0,.16); } .toast.show { opacity: 1; transform: translate(-50%, 0); } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; } @media (max-width: 1040px) { .content { padding: 0 26px 36px; } .stat-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } .dashboard-grid { grid-template-columns: 1fr; } .status-panel { min-height: 245px; } .application-filters { grid-template-columns: 1fr; } .application-panel { overflow-x: auto; } .application-list-head, .application-list { min-width: 812px; } } @media (max-width: 720px) { html, body { overflow-x: hidden; } body.mobile-sidebar-open { overflow: hidden; touch-action: none; } .app-shell { display: block; } .sidebar-brand-row { margin-bottom: 30px; justify-content: space-between; } .sidebar-toggle { display: none; } .sidebar { position: fixed; z-index: 30; inset: 0 auto 0 0; width: min(80vw, 288px); height: 100dvh; max-height: 100dvh; min-height: 100dvh; padding: calc(16px + env(safe-area-inset-top)) 12px calc(16px + env(safe-area-inset-bottom)); transform: translateX(-102%); transition: transform .2s ease; box-shadow: 8px 0 30px rgba(0,0,0,.16); overflow-y: auto; overscroll-behavior: contain; } .sidebar.open { transform: none; } .sidebar-backdrop { position: fixed; z-index: 29; inset: 0; display: block; border: 0; background: rgba(13, 20, 42, .44); backdrop-filter: blur(2px); } .mobile-sidebar-close { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; margin-left: auto; border: 1px solid rgba(255,255,255,.2); border-radius: 7px; background: rgba(255,255,255,.08); color: #fff; font-size: 24px; line-height: 1; } .mobile-sidebar-close:active { background: rgba(255,255,255,.18); } .sidebar .nav-link { min-height: 48px; font-size: 15px; } .sidebar .sidebar-action { min-height: 42px; } .content { padding: 0 16px 30px; } .topbar { min-height: 86px; margin-bottom: 22px; padding: 12px 0; gap: 7px; align-items: flex-start; } .mobile-menu { display: block; min-width: 32px; min-height: 36px; } .topbar > div:first-of-type { min-width: 0; } .topbar h1 { font-size: 24px; line-height: 1.1; overflow-wrap: anywhere; } .topbar-actions { gap: 6px; margin-left: auto; flex: 0 0 auto; } .topbar-actions > .gmail-header-actions { flex: 0 0 auto; } .local-indicator { display: none; } .local-indicator:not([hidden]) { display: flex; font-size: 10px; } .topbar .button { padding: 9px 10px; font-size: 11px; } #openAddModal { max-width: 132px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .stat-grid { grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; } .stat-card { min-height: 138px; padding: 15px; } .stat-card strong { font-size: 35px; } .stat-card p { font-size: 10px; } .platform-panel, .status-panel, .recent-panel { padding: 18px; } .panel-heading h2 { font-size: 21px; } .panel-heading { flex-wrap: wrap; } .panel-heading > .button, .panel-heading > .text-button { min-height: 38px; } .table-wrap { margin-left: -2px; margin-right: -2px; -webkit-overflow-scrolling: touch; } .status-donut-row { justify-content: flex-start; } .toolbar { flex-wrap: wrap; gap: 8px; } .toolbar .search-field { flex: 1 0 100%; } .select-field { flex: 1 1 calc(50% - 4px); min-width: 0; } .select-field select { width: 100%; max-width: unset; } .date-filter { flex: 1 1 calc(50% - 4px); min-width: 0; } .date-filter input { width: 100%; } .toolbar-add { display: inline-flex; flex: 1 0 100%; } .application-workspace-head { align-items: stretch; flex-direction: column; gap: 13px; padding-bottom: 16px; } .application-workspace-title h2 { font-size: 21px; } .application-workspace-count { min-width: 0; padding: 9px 11px; } .to-apply-head-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; } .to-apply-head-actions .button { padding: 9px 10px; font-size: 11px; } .application-filters { gap: 11px; margin: 12px 0; padding: 11px; } .application-filter-controls, .email-filter-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 8px; } .to-apply-filter-controls { grid-template-columns: minmax(0, 1fr); } .application-list-head { display: block; padding: 11px 16px; min-width: 0; } .application-list-head > span:not(:first-child) { display: none; } .application-list { min-width: 0; } .application-panel { overflow: hidden; } .application-group-heading { padding: 13px 16px 10px; } .application-row { padding: 15px 16px; grid-template-columns: 1fr auto; gap: 10px; } .application-row.interview-today { padding-left: 12px; } .application-row > :nth-child(2), .application-row > :nth-child(3), .application-row > :nth-child(4) { grid-column: 1; min-width: 0; } .application-row > :nth-child(2) { grid-row: 2; } .application-row > :nth-child(3) { grid-row: 3; } .application-row > :nth-child(4) { grid-row: 4; } .application-row > .list-icon-button { grid-column: 2; grid-row: 1; align-self: start; } .to-apply-panel { padding: 18px 16px; } .to-apply-page-panel { padding: 0; } .to-apply-page-panel { height: 520px; } .to-apply-page-panel .to-apply-list { margin-left: 0; margin-right: 0; } .to-apply-list { margin-left: -16px; margin-right: -16px; } .to-apply-list-head { grid-template-columns: minmax(0, 1fr) 88px; gap: 8px; padding: 10px 16px; } .to-apply-list-head span:nth-child(2) { display: none; } .to-apply-row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 13px 16px; } .to-apply-actions { grid-column: 2; grid-row: 1 / span 2; } .to-apply-date { grid-column: 1; grid-row: 2; text-align: left; } .email-intro { padding: 20px; display: block; } .gmail-connection-bar { align-items: flex-start; flex-wrap: wrap; } .gmail-connection-bar > div:first-child { flex: 1 0 100%; } .email-intro-actions { margin-top: 17px; } .inbox-toolbar { display: block; } .inbox-toolbar .search-field { max-width: none; } .inbox-count { display: block; margin: 9px 2px; } .email-view-tabs { overflow-x: auto; padding-bottom: 2px; } .email-row { padding: 13px 12px; grid-template-columns: 30px minmax(0,1fr) auto; gap: 8px; } .email-selection-mode .email-row { grid-template-columns: 20px 30px minmax(0,1fr) auto; } .email-date { display: block; grid-column: 2; grid-row: 2; margin-top: 4px; text-align: left; } .email-selection-mode .email-date { grid-column: 3; } .email-section-heading { padding: 13px 14px 10px; flex-wrap: wrap; } .email-selection-mode .email-bulk-actions { width: 100%; justify-content: flex-end; } .email-row-actions { grid-column: 3; grid-row: 1 / span 2; align-self: start; flex-direction: column; gap: 4px; } .email-selection-mode .email-row-actions { grid-column: 4; } .email-compose-button { padding: 5px 6px; font-size: 10px; } .notification-panel { position: fixed; top: 76px; left: 16px; right: 16px; width: auto; max-height: min(70vh, 460px); overflow-y: auto; } .notification-panel-head { flex-wrap: wrap; } .notification-panel-actions { margin-left: auto; } .compose-template-row, .compose-template-save { align-items: stretch; flex-direction: column; } .compose-fields { grid-template-columns: 1fr; } .compose-fields .form-field-wide { grid-column: auto; } .compose-template-save input { min-width: 0; } .modal form { padding: 19px; } #clientModal, .modal.email-detail-modal { width: min(665px, calc(100vw - 28px)); } #clientModal { max-height: calc(100vh - 28px); overflow: auto; } #clientForm { display: block; max-height: none; overflow: visible; } .client-form-layout { grid-template-columns: 1fr; gap: 22px; } .client-form-column { grid-template-columns: 1fr; gap: 15px; } .client-form-column + .client-form-column { border-left: 0; border-top: 1px solid var(--line); padding: 20px 1px 0; overflow: visible; } .client-form-column .form-field-wide { grid-column: auto; } .form-column-label { grid-column: auto; } .form-grid { grid-template-columns: 1fr; } .form-field-wide { grid-column: auto; } .follow-up-editor-fields { grid-template-columns: 1fr; } .follow-up-editor-fields .form-field-wide { grid-column: auto; } .follow-up-option { align-items: flex-start; flex-direction: column; } .follow-up-note { max-width: none; text-align: left; } .interview-calendar-panel { padding: 18px 16px; overflow-x: auto; } .interview-calendar { min-width: 560px; } .documents-page-panel { padding: 0; overflow: hidden; } .documents-tabs { display: flex; overflow-x: auto; margin: 0; padding: 6px; scrollbar-width: thin; } .documents-tab { flex: 0 0 auto; min-height: 38px; padding: 8px 11px; } .documents-tab-panel { padding: 17px 16px 20px; } .personal-document-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .invoice-email-row { grid-template-columns: 36px minmax(0, 1fr); gap: 9px 11px; } .invoice-email-subject, .invoice-email-meta { grid-column: 2; text-align: left; } .documents-page-heading { align-items: flex-start; flex-direction: column; } .documents-tabs { overflow-x: auto; margin-left: -3px; margin-right: -3px; padding: 0 3px; scrollbar-width: thin; } .salary-calculator-fields, .salary-calculator-result { grid-template-columns: 1fr; } .salary-calculator-result { gap: 1px; } .cover-letter-heading { align-items: flex-start; flex-direction: column; } .cover-letter-workspace { grid-template-columns: 1fr; gap: 22px; } .cover-letter-editor-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cover-letter-body-field { grid-column: 1 / -1; } .cover-letter-preview-area { margin: 0 -8px; } .cover-letter-page { min-height: 0; padding: 30px 22px; } .documents-tab { flex: 0 0 auto; white-space: nowrap; } .personal-document-row { align-items: flex-start; flex-direction: column; } .hired-list { grid-template-columns: 1fr; } .hired-card { padding: 16px; gap: 11px; } .hired-card-meta { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.45; } .hired-detail-heading { flex-wrap: wrap; gap: 12px; } .hired-detail-heading-actions { width: 100%; justify-content: flex-end; } .hired-detail-grid { gap: 13px; } .hired-client-actions { display: grid; grid-template-columns: 1fr; gap: 8px; } .hired-client-actions .button { width: 100%; } .settings-stats { flex-wrap: wrap; gap: 9px 18px; } .backup-status { align-items: flex-start; line-height: 1.45; } .active-client-two-column { grid-template-columns: 1fr; } .hired-detail-grid-large { grid-template-columns: 1fr 1fr; } .hired-upload-head { align-items: flex-start; flex-direction: column; } .upload-actions { width: 100%; justify-content: flex-start; } .contract-controls { grid-template-columns: 1fr 1fr; } .toolbar .inbox-count { flex: 1 0 100%; } .modal-actions, .modal-actions-right { flex-wrap: wrap; } .modal-actions-right { justify-content: flex-end; } } @media (max-width: 900px) { .settings-modal[open] { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); } .settings-device-pane { grid-column: 1; grid-row: 2; padding: 18px 22px; border-right: 0; border-bottom: 1px solid var(--line); } .settings-modal-actions { padding-top: 14px; } .settings-account-content { grid-column: 1; grid-row: 3; padding: 18px 22px 22px; } } @media (max-width: 380px) { .personal-document-list { grid-template-columns: 1fr; } .content { padding-left: 12px; padding-right: 12px; } .topbar { min-height: 84px; } .mobile-menu { font-size: 20px; padding: 3px; } .topbar h1 { font-size: 22px; } .notification-button { width: 36px; height: 36px; } .notification-panel { top: 68px; left: 12px; right: 12px; } .modal form { padding: 16px; } .modal-actions, .modal-actions-right { width: 100%; } .modal-actions .button, .modal-actions-right .button { flex: 1 1 auto; } } @media (max-width: 720px) { .modal { max-height: calc(100dvh - 20px); } .modal form { max-height: calc(100dvh - 20px); overflow-y: auto; } .form-field input, .form-field select, .form-field textarea, .search-field input, .select-field select, .date-filter input { font-size: 16px; } } @media (max-width: 480px) { .stat-grid { grid-template-columns: 1fr; } .stat-card { min-height: 118px; } .stat-card strong { font-size: 32px; } .topbar h1 { font-size: 21px; } .topbar-actions { gap: 4px; } #openAddModal { max-width: 112px; padding-left: 8px; padding-right: 8px; } .hired-detail-grid, .hired-detail-grid-large, .contract-controls { grid-template-columns: 1fr; } .modal-actions .button, .modal-actions-right .button { width: 100%; } .email-view-tabs { overflow-x: auto; padding-bottom: 2px; } .email-view-tab { flex: 0 0 auto; white-space: nowrap; } .interview-calendar-panel { margin-left: -4px; margin-right: -4px; border-radius: 8px; } .interview-calendar { touch-action: pan-x; } .to-apply-page-panel .panel-heading > .button { width: 100%; } .hired-detail-heading h2 { font-size: 22px; overflow-wrap: anywhere; } .settings-stats { display: grid; grid-template-columns: 1fr; } } /* New client email alert */ .client-email-alert-list { display: grid; gap: 8px; max-height: min(45vh, 320px); overflow-y: auto; margin-top: 12px; padding: 1px 4px 1px 1px; } .client-email-alert-list[hidden] { display: none; } .client-email-alert-item { display: grid; gap: 5px; padding: 10px 11px; border: 1px solid var(--theme-border, #e0e7e8); border-radius: 8px; background: var(--theme-surface, #fff); } .client-email-alert-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-width: 0; } .client-email-alert-heading strong { color: var(--theme-text, #293a41); font-size: 12px; line-height: 1.35; } .client-email-alert-heading time { flex: 0 0 auto; color: var(--theme-muted, #77848a); font-size: 10px; } .client-email-alert-subject { color: var(--theme-muted, #46565d); font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; } .client-email-alert-item small { color: var(--theme-muted, #748087); font-size: 10px; line-height: 1.4; overflow-wrap: anywhere; } @media (max-width: 480px) { .email-result-modal { max-height: calc(100dvh - 20px); } .client-email-alert-list { max-height: min(42vh, 280px); } } /* Focused Active Client workspace */ #hiredView.client-focused > .toolbar, #hiredView.client-focused > .hired-summary, #hiredView.client-focused > .hired-panel { display: none; } #hiredView.client-focused > .hired-detail-panel { margin-top: 0; min-height: 0; } .hired-detail-heading .button-secondary { white-space: nowrap; } .hired-detail-heading-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; } .upload-actions { display: flex; align-items: center; gap: 8px; } .doc-name { display: flex; align-items: center; gap: 9px; min-width: 0; } .doc-type-icon { flex: 0 0 auto; width: 31px; height: 27px; display: grid; place-items: center; border: 1px solid var(--theme-border, #deded9); border-radius: 5px; background: var(--theme-surface, #fff); color: var(--navy); font-size: 8px; font-weight: 800; letter-spacing: .04em; } .doc-name-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .document-viewer-modal { width: min(920px, calc(100vw - 28px)); } .document-viewer-note { margin: 4px 0 0; color: var(--theme-muted, #8a8c86); font-size: 10.5px; } #documentViewerFrame { width: 100%; height: min(70vh, 700px); border: 1px solid var(--theme-border, #e3e3de); border-radius: 7px; background: var(--theme-raised, #f7f7f4); } .document-word-placeholder { background: var(--theme-surface, #fff); } @media (max-width: 720px) { .hired-detail-grid-large { grid-template-columns: 1fr; } .hired-upload-head { align-items: flex-start; } } /* Inline active-client document upload/viewer */ .upload-empty-state { border: 1px dashed var(--theme-border, #d8d9d4); border-radius: 10px; padding: 24px; background: var(--theme-raised, #fbfbf8); display: flex; align-items: center; justify-content: space-between; gap: 20px; } .upload-empty-state h3 { margin: 2px 0 5px; font-size: 18px; } .upload-empty-state p:not(.eyebrow) { margin: 0; color: var(--theme-muted, #7c7d78); font-size: 11.5px; line-height: 1.5; max-width: 620px; } .document-preview-card { border: 1px solid var(--theme-border, #e1e2dd); border-radius: 10px; overflow: hidden; background: var(--theme-surface, #fff); } .document-preview-head { padding: 15px 16px; display: flex; justify-content: space-between; align-items: center; gap: 16px; border-bottom: 1px solid var(--theme-border, #ededeb); } .document-preview-title { display: flex; align-items: center; gap: 11px; min-width: 0; } .document-preview-title > div { min-width: 0; } .document-preview-title h3 { margin: 2px 0 3px; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .document-preview-title p:not(.eyebrow) { margin: 0; color: var(--theme-muted, #8b8c86); font-size: 10.5px; } .document-preview-actions { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; } .document-inline-viewer { min-height: 260px; background: var(--theme-raised, #f6f6f3); display: grid; place-items: center; } .document-inline-viewer iframe { width: 100%; height: min(62vh, 620px); border: 0; display: block; background: var(--theme-surface, #fff); } .document-loading { color: var(--theme-muted, #858680); font-size: 12px; padding: 45px 20px; text-align: center; } .word-preview { max-width: 500px; text-align: center; padding: 45px 24px; } .word-preview-icon { width: 58px; height: 48px; margin: 0 auto 13px; display: grid; place-items: center; border: 1px solid var(--theme-border, #d9dad5); border-radius: 8px; background: var(--theme-surface, #fff); color: var(--navy); font-size: 12px; font-weight: 800; } .word-preview h4 { margin: 0 0 7px; font-size: 14px; } .word-preview p { margin: 0 0 16px; color: var(--theme-muted, #7d7f79); font-size: 11.5px; line-height: 1.5; } .document-history { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 9px; color: var(--theme-muted, #8b8c86); font-size: 10.5px; } .document-history-item { border: 1px solid var(--theme-border, #e0e1dc); background: var(--theme-surface, #fff); color: var(--navy); border-radius: 6px; padding: 5px 8px; font-size: 10.5px; cursor: pointer; } .document-history-item:hover { border-color: var(--navy); } @media (max-width: 720px) { .active-client-two-column { grid-template-columns: 1fr; } .active-document-row { grid-template-columns: auto minmax(0, 1fr); } .active-document-row .button { justify-self: start; } .upload-empty-state, .document-preview-head { align-items: flex-start; flex-direction: column; } .document-preview-actions { justify-content: flex-start; } .document-inline-viewer iframe { height: 58vh; } } /* Authentication */ body:not(.authenticated) .app-shell { display: none; } body.authenticated .login-screen { display: none; } body.auth-loading .login-screen, body.auth-loading .app-shell { display: none !important; } .login-screen { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--theme-action, var(--navy)); } .login-card { width: min(430px, 100%); background: var(--theme-surface, #fff); border: 1px solid var(--line); border-radius: 14px; padding: 34px; box-shadow: 0 18px 55px rgba(23,26,22,.08); } .login-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; margin-bottom: 28px; } .login-brand .brand-mark { width: 40px; height: 40px; background: var(--theme-action, var(--navy)); } .login-card h1 { margin: 5px 0 7px; font-size: 31px; letter-spacing: -.03em; } .login-system-name { margin: 0 0 22px; color: var(--muted); font-size: 12px; line-height: 1.5; } .login-form :is(.login-error, .login-google-status):empty { display: none; } .login-copy { margin: 0 0 25px; color: var(--theme-muted, #777973); font-size: 12px; line-height: 1.55; } .login-form { display: grid; gap: 14px; } .login-form .form-field { display: grid; gap: 6px; color: var(--theme-muted, #555751); font-size: 11px; font-weight: 650; } .login-form input { width: 100%; height: 43px; border: 1px solid var(--theme-border, #deded9); border-radius: 8px; padding: 0 12px; outline: 0; color: var(--ink); background: var(--theme-surface, #fff); } .login-form input:focus { border-color: var(--theme-info-border, #7b849f); box-shadow: 0 0 0 3px rgba(94,108,150,.10); } .login-submit { width: 100%; margin-top: 3px; background: var(--theme-action, var(--navy)); border-color: var(--navy); } .login-google { width: 100%; gap: 10px; } .login-google-icon { display: block; flex: 0 0 18px; width: 18px; height: 18px; } .login-forgot-password { justify-self: end; padding: 0; border: 0; background: transparent; color: var(--navy); font-size: 11px; text-decoration: underline; cursor: pointer; } .password-page-heading { margin: 0 0 22px; } .password-page-heading h2 { margin: 4px 0 6px; color: var(--ink); font-size: 22px; } .password-page-heading > p:last-child { margin: 0; color: var(--muted); font-size: 12px; } .password-security-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr); gap: 24px; align-items: start; } .password-security-section { min-width: 0; padding: 20px 0; border-top: 1px solid var(--line); } .password-section-heading { margin-bottom: 14px; } .password-section-heading h3 { margin: 4px 0 0; color: var(--ink); font-size: 16px; } .password-change-form { display: grid; gap: 13px; max-width: 460px; } .password-change-form .form-field { margin: 0; } .password-change-form .button { justify-self: start; } .password-recovery-section { border-left: 1px solid var(--line); padding-left: 24px; } .password-recovery-section .button { margin-top: 15px; } .login-google.button-success { background: var(--green-soft); border-color: var(--theme-border, #c8dccb); color: var(--theme-success-text, #42614b); } .login-google-status { text-align: center; margin: -5px 0 0; min-height: 27px; } .login-error { min-height: 16px; margin: 0; color: var(--rose); font-size: 11px; } .login-error:not(:empty) { padding: 9px 11px; border: 1px solid var(--theme-border, #efc8c8); border-radius: 6px; background: var(--theme-raised, #fff0f0); } .login-note { margin: 21px 0 0; color: var(--theme-muted, #989a94); font-size: 10px; text-align: center; } @media (max-width: 600px) { body:not(.authenticated) { min-height: 100dvh; } #loginScreen { min-height: 100dvh; padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); } #loginScreen .login-card { padding: 24px; } #loginScreen .login-brand { margin-bottom: 18px; } #loginScreen .login-card h1 { font-size: 28px; line-height: 1.2; } #loginScreen .login-system-name { margin-bottom: 16px; font-size: 11px; } #loginScreen .login-form { gap: 11px; } #loginScreen .login-form .form-field { gap: 5px; font-size: 12px; line-height: 1.35; } #loginScreen .login-form input { min-height: 44px; height: 44px; font-size: 16px; } #loginScreen .login-form .button { min-height: 44px; padding: 9px 10px; font-size: 13px; } #loginScreen .login-google-status { min-height: 0; margin: 0; font-size: 11px; line-height: 1.4; } #loginScreen .login-error { min-height: 0; font-size: 11px; line-height: 1.4; } } @media (max-width: 600px) and (max-height: 650px) { #loginScreen .login-card { padding: 18px; } #loginScreen .login-brand { margin-bottom: 12px; font-size: 14px; } #loginScreen .login-brand .brand-mark { width: 32px; height: 32px; } #loginScreen .login-card h1 { font-size: 25px; } #loginScreen .login-system-name { margin-bottom: 12px; } #loginScreen .login-form { gap: 8px; } } .welcome-transition { position: fixed; z-index: 2000; inset: 0; display: grid; place-items: center; padding: 24px; background: var(--theme-raised, #f7f7f5); opacity: 0; visibility: hidden; transition: opacity 320ms ease, visibility 320ms ease; } .welcome-transition.is-visible { opacity: 1; visibility: visible; } .welcome-transition.is-leaving { opacity: 0; } .welcome-transition-card { width: min(480px, 100%); padding: 44px 32px; text-align: center; color: var(--theme-text, #1d1d1f); font-family: var(--font-ui); transform: translateY(12px) scale(.98); transition: transform 420ms cubic-bezier(.2,.75,.25,1), opacity 320ms ease; opacity: 0; } .welcome-transition.is-visible .welcome-transition-card { opacity: 1; transform: translateY(0) scale(1); } .welcome-transition-spinner { display: block; width: 38px; height: 38px; margin: 0 auto 26px; border: 3px solid rgba(29, 29, 31, .12); border-top-color: #1d1d1f; border-radius: 50%; animation: welcome-spinner .8s linear infinite; } .welcome-transition-eyebrow { margin: 0 0 10px; color: var(--theme-muted, #86868b); font-size: 11px; font-weight: 650; letter-spacing: .16em; } .welcome-transition-card h1 { margin: 0; font-size: clamp(28px, 7vw, 38px); font-weight: 650; letter-spacing: -.045em; line-height: 1.12; } .welcome-transition-copy { margin: 13px 0 0; color: var(--theme-muted, #6e6e73); font-size: 14px; letter-spacing: -.01em; } @keyframes welcome-spinner { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .welcome-transition, .welcome-transition-card { transition: none; } .welcome-transition-spinner { animation-duration: 1.6s; } } /* Active-client document preview */ .documents-folder-status { margin-top: 9px; color: var(--theme-muted, #8b8d87); font-size: 10px; } .document-inline-viewer { min-height: 390px; background: var(--theme-raised, #f6f6f3); border-top: 1px solid var(--theme-border, #ededeb); display: grid; place-items: center; overflow: hidden; } .document-inline-viewer iframe { width: 100%; height: 520px; border: 0; background: var(--theme-surface, #fff); display: block; } .document-loading { padding: 45px; color: var(--theme-muted, #92948e); font-size: 12px; } .word-preview { width: min(560px, calc(100% - 36px)); margin: 30px auto; background: var(--theme-surface, #fff); border: 1px solid var(--theme-border, #e1e2dd); border-radius: 10px; padding: 34px; text-align: center; box-shadow: 0 8px 25px rgba(23,26,22,.05); } .word-preview-icon { width: 58px; height: 58px; margin: 0 auto 16px; display: grid; place-items: center; border-radius: 12px; background: var(--navy-soft); color: var(--navy); font-size: 12px; font-weight: 800; } .word-preview h4 { margin: 0 0 7px; font-size: 16px; overflow-wrap: anywhere; } .word-preview p { margin: 0 auto 18px; max-width: 430px; color: var(--theme-muted, #7d7f79); font-size: 11px; line-height: 1.55; } /* Active client detail actions */ .hired-client-actions { display:flex; justify-content:flex-end; gap:10px; padding:0 0 16px; border-bottom:1px solid var(--theme-border, #ededeb); } .hired-actions-menu { position: relative; } .hired-actions-trigger { min-width: 88px; border-color: rgb(26, 35, 64); background: rgb(26, 35, 64); color: #fff; } .hired-actions-trigger:hover { border-color: var(--theme-info-border, #283463); background: var(--theme-info-strong, #283463); color: #fff; } .active-client-drawer-layer { position: fixed; z-index: 1000; inset: 0; visibility: hidden; } .active-client-drawer-layer.open, .active-client-drawer-layer.closing { visibility: visible; } .active-client-drawer-layer.closing { pointer-events: none; } .active-client-drawer-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: rgba(20, 24, 20, .43); opacity: 0; transition: opacity 250ms ease-out; } .active-client-drawer-layer.open .active-client-drawer-backdrop { opacity: 1; } .active-client-drawer-backdrop { z-index: 0; } .active-client-drawer { position: absolute; z-index: 1; top: 0; right: 0; display: flex; flex-direction: column; width: 420px; max-width: 100vw; height: 100%; overflow: hidden; border: 1px solid var(--theme-border, #e6e8f0); border-right: 0; border-radius: 16px 0 0 16px; background: var(--theme-surface, #fff); color: var(--ink); box-shadow: -12px 0 36px rgba(17, 24, 39, .16); transform: translateX(100%); transition: transform 250ms ease-out; } .active-client-drawer-layer.open .active-client-drawer { transform: translateX(0); } .active-client-drawer-layer[data-view="email"] .active-client-drawer { width: min(620px, 100vw); } body.active-client-drawer-open dialog[open]::backdrop { background: linear-gradient(to right, rgba(18, 26, 51, .48) 0 calc(100% - var(--active-client-drawer-width, 420px)), transparent calc(100% - var(--active-client-drawer-width, 420px)) 100%); } .active-client-drawer-header { display: flex; align-items: flex-start; gap: 14px; min-height: 122px; padding: 26px 22px 20px; border-bottom: 1px solid var(--theme-border, #e6e8f0); } .active-client-drawer-heading { min-width: 0; flex: 1; } .active-client-drawer-heading .eyebrow { margin-bottom: 7px; } .active-client-drawer-heading h2 { margin: 0; color: var(--navy); font-size: 23px; font-weight: 650; letter-spacing: -.02em; line-height: 1.25; } .active-client-drawer-heading > p:last-child { margin: 5px 0 0; color: var(--theme-muted, #6b7280); font-size: 13px; overflow-wrap: anywhere; } .active-client-drawer-close { flex: 0 0 auto; } .active-client-drawer-back { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; flex: 0 0 auto; margin: 22px 0 0; padding: 5px 9px; border: 1px solid var(--theme-border, #e6e8f0); border-radius: 7px; background: var(--theme-surface, #fff); color: var(--theme-muted, #4b5563); font-size: 12px; font-weight: 600; } .active-client-drawer-back:hover { border-color: var(--theme-border, #cbd2dc); background: var(--theme-raised, #f6f7fb); color: var(--navy); } .active-client-drawer-layer[data-view="email"] .active-client-drawer-header { align-items: flex-start; } .active-client-drawer-layer[data-view="email"] .active-client-drawer-back { order: 2; margin: 22px 0 0 auto; } .active-client-drawer-back:focus-visible, .active-client-drawer-close:focus-visible, .active-client-drawer-cancel:focus-visible { outline: 2px solid var(--theme-info-border, #6b75bb); outline-offset: 2px; } .active-client-drawer-list { display: grid; align-content: start; gap: 8px; padding: 20px; overflow-y: auto; } .active-client-action-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) 12px; align-items: center; gap: 10px; width: 100%; height: auto; min-height: 60px; padding: 9px 10px; border: 1px solid var(--theme-border, #e6e8f0); border-radius: 8px; background: var(--theme-surface, #fff); color: var(--navy); text-align: left; transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; } .active-client-action-row:hover { border-color: var(--theme-border, #c7ccef); background: var(--theme-surface, #f8f9ff); box-shadow: 0 3px 10px rgba(27, 34, 68, .07); } .active-client-action-row:focus-visible { border-color: var(--theme-info-border, #7a82c5); outline: 2px solid rgba(79, 90, 163, .28); outline-offset: 2px; } .active-client-action-row.is-danger { border-color: var(--theme-border, #f0d7d9); } .active-client-action-row.is-danger:hover { border-color: var(--theme-danger-border, #e5aeb3); background: var(--theme-surface, #fff8f8); box-shadow: 0 3px 10px rgba(153, 45, 54, .08); } .active-client-action-row.is-danger:focus-visible { border-color: var(--theme-danger-border, #b84c55); outline-color: rgba(184, 76, 85, .24); } .active-client-action-row.is-danger .active-client-action-row-icon { background: var(--theme-raised, #fff0f0); color: var(--theme-danger-text, #a3333e); } .active-client-action-row.is-danger .active-client-action-row-copy strong { color: var(--theme-danger-text, #8f2e38); } .active-client-action-row.is-danger .active-client-action-row-copy small, .active-client-action-row.is-danger .active-client-action-row-chevron { color: var(--theme-danger-text, #9b6267); } .active-client-action-row-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 7px; background: var(--theme-raised, #f0f1fa); color: var(--theme-info-text, #4f5aa3); font-size: 13px; } .active-client-action-row-copy { display: grid; gap: 2px; min-width: 0; } .active-client-action-row-copy strong { color: var(--theme-info-text, #252d4f); font-size: 12px; font-weight: 650; line-height: 1.35; } .active-client-action-row-copy small { overflow: hidden; color: var(--theme-muted, #6b7280); font-size: 11px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; } .active-client-action-row-chevron { color: var(--theme-subtle, #9aa2b3); font-size: 11px; } .active-client-drawer-view { min-height: 0; flex: 1; overflow-y: auto; } .active-client-drawer-view-content { padding: 20px 22px; } .active-client-drawer-description { margin: 0 0 18px; color: var(--theme-muted, #6b7280); font-size: 13px; line-height: 1.5; } .active-client-generated-link { display: grid; gap: 8px; } .active-client-generated-link .form-field { color: var(--theme-muted, #4b5563); font-size: 12px; font-weight: 600; } .active-client-generated-link-row { display: flex; align-items: center; gap: 8px; } .active-client-generated-link-row input { min-width: 0; flex: 1; height: 40px; padding: 9px 10px; border: 1px solid var(--theme-border, #e6e8f0); border-radius: 7px; background: var(--theme-surface, #f8f9fc); color: var(--theme-info-text, #374151); font-size: 12px; } .active-client-generated-link-row .button { flex: 0 0 auto; } .active-client-drawer-footer { position: sticky; bottom: 0; display: flex; justify-content: flex-end; gap: 9px; margin-top: auto; padding: 14px 20px max(14px, env(safe-area-inset-bottom)); border-top: 1px solid var(--theme-border, #e6e8f0); background: var(--theme-surface, #fff); } .active-client-drawer-footer .button-primary { border-color: var(--navy); background: var(--theme-action, var(--navy)); } .active-client-drawer-footer .button-primary:hover { border-color: var(--navy-deep); background: var(--navy-deep); } .active-client-drawer-view #emailComposeForm, .active-client-drawer-view #clientForm { display: flex; flex-direction: column; width: 100%; max-height: none; min-height: 100%; padding: 0; overflow: visible; } .active-client-drawer-view #emailComposeForm > .modal-heading, .active-client-drawer-view #clientForm > .modal-heading { display: none; } .active-client-drawer-view #emailComposeForm .compose-template-row { grid-template-columns: minmax(0, 1fr) auto; margin: 0; padding: 18px 20px 0; } .active-client-drawer-view #emailComposeForm .compose-fields { grid-template-columns: minmax(0, 1fr); gap: 13px; padding: 16px 20px; } .active-client-drawer-view #emailComposeForm .modal-actions { margin: auto 0 0; padding: 14px 20px max(14px, env(safe-area-inset-bottom)); border-top: 1px solid var(--theme-border, #e6e8f0); background: var(--theme-surface, #fff); } .active-client-drawer-view #emailComposeForm .compose-status { margin: 0 20px 14px; } .active-client-drawer-view #emailComposeForm .compose-fields textarea { min-height: 190px; } .active-client-drawer-layer[data-view="email"]:has(.onboarding-email-compose) #activeClientDrawerEmailView { overflow: hidden; } .active-client-drawer-layer[data-view="email"]:has(.onboarding-email-compose) #activeClientDrawerEmailSlot { height: 100%; min-height: 0; } .active-client-drawer-layer[data-view="email"]:has(.onboarding-email-compose) .active-client-drawer-header { flex-shrink: 0; min-height: 70px; padding: 12px 18px; } .active-client-drawer-layer[data-view="email"]:has(.onboarding-email-compose) .active-client-drawer-header .eyebrow { display: none; } .active-client-drawer-layer[data-view="email"]:has(.onboarding-email-compose) .active-client-drawer-header h2 { font-size: 20px; } .active-client-drawer-layer[data-view="email"]:has(.onboarding-email-compose) .active-client-drawer-back { margin-top: 0; } #activeClientDrawerEmailView #emailComposeForm.onboarding-email-compose { height: 100%; min-height: 0; overflow: hidden; } #activeClientDrawerEmailView .onboarding-email-compose .compose-template-row { display: none; } #activeClientDrawerEmailView .onboarding-email-compose .compose-fields { flex: 1; min-height: 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 8px 12px; padding: 10px 18px; } #activeClientDrawerEmailView .onboarding-email-compose .form-field { min-width: 0; gap: 4px; font-size: 11px; } #activeClientDrawerEmailView .onboarding-email-compose .form-field > input { min-width: 0; height: 34px; padding: 6px 8px; font-size: 12px; } #activeClientDrawerEmailView .onboarding-email-compose .form-field:has(#composeBody) { display: flex; flex-direction: column; min-height: 0; } #activeClientDrawerEmailView .onboarding-email-compose #composeBody { flex: 1; min-height: 0; height: 100%; padding: 8px 10px; resize: none; font-size: 12px; line-height: 1.3; } #activeClientDrawerEmailView .onboarding-email-compose .compose-extra-options { display: block; position: relative; grid-column: 1 / -1; } #activeClientDrawerEmailView .onboarding-email-compose .compose-extra-options > summary { display: list-item; width: fit-content; padding: 4px 0; color: var(--muted); font-size: 11px; cursor: pointer; } #activeClientDrawerEmailView .onboarding-email-compose .compose-extras-body { position: absolute; bottom: calc(100% + 4px); left: 0; right: 0; z-index: 3; display: grid; gap: 10px; max-height: 220px; overflow-y: auto; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--theme-surface, #fff); box-shadow: var(--shadow-md); } #activeClientDrawerEmailView .onboarding-email-compose .compose-status { flex-shrink: 0; margin: 0 18px 6px; font-size: 10px; } #activeClientDrawerEmailView .onboarding-email-compose .modal-actions { flex-shrink: 0; margin: 0; padding: 8px 18px max(8px, env(safe-area-inset-bottom)); } #activeClientDrawerEmailView .onboarding-email-compose .modal-actions .button { min-height: 32px; padding: 6px 12px; font-size: 12px; } @media (max-width: 600px) { #activeClientDrawerEmailView .onboarding-email-compose .compose-fields { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; padding: 8px 12px; } #activeClientDrawerEmailView .onboarding-email-compose .form-field > input { font-size: 16px; } } .active-client-drawer-view #clientForm .client-form-layout { display: block; flex: 1; padding: 18px 20px; overflow-y: auto; background: var(--theme-surface, #fff); } .active-client-drawer-view #clientForm .client-form-column { grid-template-columns: minmax(0, 1fr); gap: 12px; } .active-client-drawer-view #clientForm .client-form-column + .client-form-column { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--theme-border, #e6e8f0); } .active-client-drawer-view #clientForm .client-form-column .form-field-wide, .active-client-drawer-view #clientForm .client-form-column .form-subsection-label { grid-column: 1; } .active-client-drawer-view #clientForm .modal-actions { margin: 0; padding: 14px 20px max(14px, env(safe-area-inset-bottom)); border-top: 1px solid var(--theme-border, #e6e8f0); background: var(--theme-surface, #fff); } .active-client-drawer-view #clientForm .modal-actions-right { flex-wrap: nowrap; } body.active-client-drawer-open { overflow: hidden; } @media (max-width: 639px) { .active-client-drawer { width: 100%; border-radius: 0; } .active-client-drawer-header { min-height: 112px; padding: 22px 18px 17px; } .active-client-drawer-list { padding: 16px; } .active-client-drawer-view-content { padding: 18px; } .active-client-drawer-view #emailComposeForm .compose-template-row, .active-client-drawer-view #emailComposeForm .compose-fields { padding-right: 18px; padding-left: 18px; } .active-client-drawer-view #clientForm .client-form-layout { padding: 18px; } } @media (prefers-reduced-motion: reduce) { .active-client-drawer-backdrop, .active-client-drawer { transition: none; } } .hired-delete-row { display:flex; justify-content:flex-start; padding-top:14px; border-top:1px solid var(--theme-border, #ededeb); } .hired-delete-row .button-danger { margin-top:0; } .upload-empty-state { display:flex; align-items:center; justify-content:space-between; gap:22px; padding:20px; border:1px dashed var(--theme-border, #d8d9d3); border-radius:10px; background:var(--theme-raised, #fafaf7); } .upload-empty-state h3 { margin:3px 0 5px; font-size:18px; } .upload-empty-state p:not(.eyebrow) { margin:0; color:var(--theme-muted, #777873); font-size:12px; line-height:1.5; max-width:620px; } .document-preview-card { border:1px solid var(--theme-border, #dedfd9); border-radius:10px; overflow:hidden; background:var(--theme-surface, #fff); } .document-preview-head { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 16px; border-bottom:1px solid var(--theme-border, #ededeb); } .document-preview-title { display:flex; align-items:center; gap:11px; min-width:0; } .document-preview-title h3 { margin:2px 0 3px; font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .document-preview-title p:not(.eyebrow) { margin:0; color:var(--theme-muted, #8a8b85); font-size:10.5px; } .document-preview-actions { display:flex; gap:7px; flex-wrap:wrap; justify-content:flex-end; } .document-inline-viewer { min-height:300px; background:var(--theme-raised, #f3f4f0); display:grid; place-items:center; } .document-inline-viewer iframe { width:100%; height:620px; border:0; background:var(--theme-surface, #fff); } .word-preview { width:min(520px, calc(100% - 32px)); margin:28px auto; padding:28px; text-align:center; background:var(--theme-surface, #fff); border:1px solid var(--theme-border, #e1e2dd); border-radius:9px; } .word-preview-icon { width:48px; height:58px; margin:0 auto 12px; display:grid; place-items:center; border:1px solid var(--theme-border, #d7d8d2); border-radius:5px; font-size:11px; font-weight:800; color:var(--navy); } .word-preview h4 { margin:0 0 7px; font-size:14px; word-break:break-word; } .word-preview p { margin:0 0 15px; color:var(--theme-muted, #7a7b75); font-size:11.5px; line-height:1.55; } .documents-folder-status { margin-top:10px; color:var(--theme-muted, #888983); font-size:10.5px; line-height:1.45; } @media (max-width:700px) { .upload-empty-state,.document-preview-head { align-items:flex-start; flex-direction:column; } .document-preview-actions { justify-content:flex-start; } .document-inline-viewer iframe { height:480px; } } /* Active client document save/preview workflow */ .document-pending-card { border-color: rgba(90,149,106,.35); } .document-pending-card .save-file-note { margin-top: 14px; } /* Document archive (older versions kept after a replace) */ .document-archive { margin-top: 14px; border: 1px solid var(--theme-border, #e1e2dd); border-radius: 10px; overflow: hidden; background: var(--theme-surface, #fff); } .document-archive-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: var(--theme-raised, #fafaf8); border-bottom: 1px solid var(--theme-border, #ededeb); } .document-archive-head .eyebrow { margin: 0; } .document-archive-head span:last-child { color: var(--theme-muted, #8b8c86); font-size: 10.5px; } .document-archive-list { display: grid; } .document-archive-item { display: flex; align-items: center; gap: 9px; padding: 8px 14px; border-bottom: 1px solid var(--theme-border, #f1f1ee); } .document-archive-item:last-child { border-bottom: 0; } .document-archive-name { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; border: 0; background: transparent; text-align: left; padding: 0; } .document-archive-name:hover .document-archive-filename { text-decoration: underline; color: var(--navy); } .document-archive-filename { display: block; font-size: 11px; font-weight: 650; color: var(--theme-text, #33342f); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .document-archive-date { display: block; font-size: 9px; color: var(--theme-muted, #8b8c86); margin-top: 1px; } .daily-task-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 4px 2px 20px; border-bottom: 1px solid var(--line); } .daily-task-heading h2 { margin: 5px 0; font-size: 24px; font-weight: 650; } .daily-task-heading > div > p:last-child, .daily-task-history-heading > div > p:last-child { margin: 0; color: var(--muted); font-size: 12px; } .daily-task-date-field { display: grid; gap: 6px; min-width: 170px; color: var(--theme-muted, #4e504c); font-size: 11px; font-weight: 700; } .daily-task-date-field input { width: 100%; min-height: 39px; padding: 8px 10px; border: 1px solid var(--theme-border, #deded9); border-radius: 6px; background: var(--theme-surface, #fff); color: var(--ink); font-size: 13px; } .daily-task-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 18px; } .daily-task-form, .daily-task-list-panel, .daily-task-history-panel { min-width: 0; padding: 20px; } .daily-task-form { display: grid; align-content: start; gap: 14px; } .daily-task-add-modal { width: min(650px, calc(100vw - 28px)); } .daily-task-add-modal .daily-task-form { padding: 22px; } .daily-task-add-modal .modal-heading { margin-bottom: 3px; } .daily-task-form-actions { justify-content: flex-end; margin-top: 5px; } .daily-task-plan-actions { display: flex; align-items: center; gap: 14px; } .daily-task-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; } .daily-task-section-heading h3 { margin: 4px 0 0; font-size: 18px; font-weight: 650; } .daily-task-form-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 7px; background: var(--theme-raised, #eaf2ea); color: var(--theme-success-text, #4d785b); } .daily-task-form .form-field { min-width: 0; } .daily-task-form .form-field > span { display: inline; } .daily-task-form .form-field input, .daily-task-form .form-field select, .daily-task-form .form-field textarea { font-size: 13px; } .daily-task-form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .daily-task-add-button { justify-self: start; gap: 8px; } .daily-task-list-heading { padding-bottom: 13px; border-bottom: 1px solid var(--line); } .daily-task-count { color: var(--theme-muted, #6f716e); font-size: 11px; font-weight: 700; } .daily-task-list, .daily-task-history-list { display: grid; } .daily-task-item { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: start; gap: 10px; padding: 15px 0; border-bottom: 1px solid var(--theme-border, #eeede9); } .daily-task-item:last-child { border-bottom: 0; } .daily-task-row-open { display: grid; grid-column: 1 / 3; grid-template-columns: 28px minmax(0, 1fr); align-items: start; gap: 10px; width: 100%; min-width: 0; padding: 0; border: 0; border-radius: 4px; background: transparent; color: inherit; text-align: left; cursor: pointer; } /* Compact application dashboard workspace */ .topbar-title-area { display: flex; align-items: center; gap: 22px; min-width: 0; } .topbar-copy { min-width: 0; } .dashboard-switcher { display: none; flex: 0 0 auto; gap: 7px; margin: 0; padding: 0; border: 0; } body:has(#dashboardView.active) .dashboard-switcher { display: flex; } .dashboard-switcher-tab { min-height: 36px; padding: 8px 12px; border-radius: 7px; font-size: 12px; white-space: nowrap; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) { height: 100dvh; overflow: hidden; background: var(--theme-raised, #f6f7fb); color: var(--theme-text, #111827); } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .app-shell { height: 100dvh; min-height: 0; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .content { display: grid; grid-template-rows: 56px minmax(0, 1fr); gap: 14px; width: 100%; height: 100dvh; min-width: 0; min-height: 0; max-width: 1500px; margin: 0 auto; padding: 12px 24px 16px; overflow: hidden; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .topbar { min-height: 0; height: 56px; margin: 0; border-bottom: 0; gap: 18px; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .topbar h1 { margin: 0; color: var(--theme-text, #111827); font-size: 23px; font-weight: 650; letter-spacing: -.025em; white-space: nowrap; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .topbar-copy > .eyebrow { display: none; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .topbar-actions { flex: 0 0 auto; gap: 12px; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .local-indicator { color: var(--theme-muted, #6b7280); font-size: 12px; white-space: nowrap; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .local-indicator > span:first-child { background: var(--theme-success-strong, #7fa08f); } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .notification-button { width: 36px; height: 36px; border-color: var(--theme-border, #e6e8f0); border-radius: 9px; background: var(--theme-surface, #fff); } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) #dashboardView { display: grid; grid-template-rows: minmax(0, 1fr); min-width: 0; min-height: 0; overflow: hidden; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) #applicationDashboardPanel { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: 48px 100px 210px minmax(0, 1fr); gap: 12px 16px; min-width: 0; min-height: 0; overflow: hidden; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) #applicationDashboardPanel[hidden] { display: none; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) #applicationDashboardPanel > .weekly-report-banner { grid-column: 1 / -1; grid-row: 1; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) #applicationDashboardPanel > .stat-grid { grid-column: 1 / 9; grid-row: 2; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) #applicationDashboardPanel > .dashboard-grid { grid-column: 1 / 9; grid-row: 3; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) #applicationDashboardPanel > .interview-calendar-panel { grid-column: 9 / -1; grid-row: 2 / 5; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) #applicationDashboardPanel > .recent-panel { grid-column: 1 / 9; grid-row: 4; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .weekly-report-banner { min-width: 0; min-height: 0; margin: 0; padding: 8px 16px; border-color: var(--theme-border, #e6e8f0); border-radius: 10px; background: var(--theme-surface, #fff); box-shadow: 0 1px 2px rgba(16,24,40,.05); } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .weekly-report-banner > div { display: flex; align-items: baseline; gap: 11px; min-width: 0; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .weekly-report-banner .eyebrow { color: var(--theme-muted, #6b7280); font-size: 11px; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .weekly-report-banner h2 { margin: 0; color: var(--theme-text, #111827); font-size: 15px; font-weight: 650; white-space: nowrap; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .weekly-report-banner p:not(.eyebrow) { overflow: hidden; color: var(--theme-muted, #6b7280); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .weekly-report-banner .button { min-height: 32px; padding: 6px 11px; border-color: var(--theme-info-border, #1b2244); border-radius: 7px; color: var(--theme-info-text, #1b2244); font-size: 12px; white-space: nowrap; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) #applicationDashboardPanel > .stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; min-width: 0; min-height: 0; margin: 0; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) #applicationDashboardPanel .stat-card { min-width: 0; min-height: 0; padding: 12px 14px; border: 1px solid var(--theme-border, #e6e8f0); border-radius: 12px; background: var(--theme-surface, #fff); color: var(--theme-text, #111827); box-shadow: 0 1px 2px rgba(16,24,40,.05); } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) #applicationDashboardPanel .stat-card-primary { border-color: var(--theme-info-border, #1b2244); background: var(--theme-info-strong, #1b2244); color: #fff; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) #applicationDashboardPanel .stat-label { color: var(--theme-muted, #6b7280); font-size: 12px; line-height: 1.25; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) #applicationDashboardPanel .stat-card-primary .stat-label { color: #e3e7f4; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) #applicationDashboardPanel .stat-card strong { margin: auto 0 4px; font-size: 30px; font-weight: 700; letter-spacing: -.025em; line-height: 1; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) #applicationDashboardPanel .stat-card p { color: var(--theme-muted, #6b7280); font-size: 12px; line-height: 1.25; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) #applicationDashboardPanel .stat-card-primary p { color: #c9d0e8; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .dashboard-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 3fr); gap: 12px; min-width: 0; min-height: 0; margin: 0; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .platform-panel, body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .status-panel, body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .recent-panel, body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .interview-calendar-panel { min-width: 0; min-height: 0; border: 1px solid var(--theme-border, #e6e8f0); border-radius: 12px; background: var(--theme-surface, #fff); box-shadow: 0 1px 2px rgba(16,24,40,.05); } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .platform-panel, body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .status-panel { display: flex; flex-direction: column; padding: 14px 16px; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .panel-heading { align-items: center; flex: 0 0 auto; gap: 8px; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .panel-heading .eyebrow { color: var(--theme-muted, #6b7280); font-size: 11px; letter-spacing: .08em; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .panel-heading h2 { margin: 2px 0 0; color: var(--theme-text, #111827); font-size: 16px; font-weight: 650; letter-spacing: -.01em; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .panel-heading .text-button { font-size: 12px; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .platform-list { align-content: center; gap: 10px; min-height: 0; margin-top: 9px; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .platform-row { grid-template-columns: minmax(82px, 1fr) minmax(50px, 2fr) 22px; gap: 9px; font-size: 12px; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .platform-name { color: var(--theme-info-text, #374151); font-size: 12px; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .platform-track { height: 7px; background: var(--theme-raised, #e6e8f0); } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .platform-track > i { background: var(--theme-info-strong, #1b2244); } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .platform-row strong { color: var(--theme-info-text, #374151); font-size: 12px; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .status-donut-row { flex: 1; gap: clamp(12px, 1.4vw, 24px); min-height: 0; justify-content: center; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .donut { width: clamp(88px, 7vw, 112px); } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .donut::after { inset: 15px; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .donut span { color: var(--theme-text, #111827); font-size: 24px; font-weight: 700; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .status-legend { gap: 9px; min-width: 0; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .legend-item { grid-template-columns: 9px minmax(0, 1fr) auto; gap: 7px; color: var(--theme-muted, #4b5563); font-size: 12px; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .legend-dot { width: 9px; height: 9px; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .legend-item strong { color: var(--theme-text, #111827); } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .interview-calendar-panel { display: flex; flex-direction: column; padding: 14px 16px; margin: 0; overflow: hidden; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .interview-calendar-panel .panel-heading { flex-wrap: nowrap; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .interview-calendar-panel .panel-heading h2 { font-size: 16px; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .calendar-controls { gap: 5px; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .calendar-controls strong { min-width: 106px; color: var(--theme-info-text, #374151); font-size: 13px; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .calendar-controls .icon-button { width: 28px; height: 28px; padding: 0; border-color: var(--theme-border, #e6e8f0); border-radius: 7px; color: var(--theme-info-text, #1b2244); font-size: 18px; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .interview-calendar { flex: 1; grid-template-rows: 25px repeat(6, minmax(0, 1fr)); min-height: 0; margin-top: 10px; border-color: var(--theme-border, #e6e8f0); overflow: hidden; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .calendar-weekday { display: grid; place-items: center; min-width: 0; padding: 2px; border-color: var(--theme-border, #e6e8f0); color: var(--theme-muted, #6b7280); font-size: 11px; letter-spacing: 0; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .calendar-day { min-width: 0; min-height: 0; padding: 4px; border-color: var(--theme-border, #e6e8f0); background: var(--theme-surface, #fff); } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .calendar-day.other-month { background: var(--theme-surface, #fafbfc); } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .calendar-day-number { display: inline-grid; place-items: center; width: 25px; height: 25px; color: var(--theme-muted, #4b5563); font-size: 12px; font-weight: 550; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .calendar-day.today .calendar-day-number { background: var(--theme-info-strong, #1b2244); color: #fff; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .calendar-interviews { gap: 2px; margin-top: 2px; overflow: hidden; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .calendar-interview { padding: 2px 3px; font-size: 12px; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .recent-panel { display: flex; flex-direction: column; padding: 14px 16px 10px; overflow: hidden; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .table-wrap { flex: 1; min-height: 0; margin: 8px 0 0; overflow: auto; scrollbar-width: thin; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .recent-panel table { min-width: 0; height: 100%; table-layout: fixed; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .recent-panel th { padding: 6px 8px 8px; color: var(--theme-muted, #6b7280); font-size: 12px; letter-spacing: .04em; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .recent-panel td { padding: 7px 8px; border-color: var(--theme-border, #e6e8f0); color: var(--theme-muted, #4b5563); font-size: 13px; line-height: 1.25; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .recent-panel td:first-child { color: var(--theme-text, #111827); } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .recent-panel .table-client { gap: 1px; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .recent-panel .table-client small { font-size: 12px; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .recent-panel .status-pill { font-size: 12px; } @media (max-width: 1099px) { body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) { height: auto; min-height: 100vh; overflow: auto; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .app-shell { height: auto; min-height: 100vh; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .content { display: block; height: auto; min-height: 100vh; max-width: none; padding: 0 26px 36px; overflow: visible; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .topbar { min-height: 100px; height: auto; margin-bottom: 18px; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) #dashboardView { display: block; overflow: visible; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) #applicationDashboardPanel { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; overflow: visible; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) #applicationDashboardPanel > .weekly-report-banner, body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) #applicationDashboardPanel > .stat-grid, body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) #applicationDashboardPanel > .dashboard-grid, body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) #applicationDashboardPanel > .interview-calendar-panel, body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) #applicationDashboardPanel > .recent-panel { grid-column: 1; grid-row: auto; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) #applicationDashboardPanel > .stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .interview-calendar-panel { min-height: 440px; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .interview-calendar { min-height: 340px; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .recent-panel { min-height: 340px; } } @media (max-width: 720px) { body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .content { padding: 0 16px 28px; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .topbar { align-items: flex-start; padding-top: 14px; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .topbar-title-area { align-items: flex-start; flex-direction: column; gap: 10px; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .dashboard-switcher { max-width: calc(100vw - 70px); overflow-x: auto; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .dashboard-switcher-tab { flex: 0 0 auto; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) #applicationDashboardPanel > .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .weekly-report-banner { align-items: flex-start; flex-direction: column; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .weekly-report-banner > div { align-items: flex-start; flex-direction: column; gap: 4px; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .dashboard-grid { grid-template-columns: minmax(0, 1fr); } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .platform-panel, body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .status-panel { min-height: 210px; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .status-donut-row { justify-content: center; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .recent-panel table { min-width: 620px; } } .daily-task-row-open:focus-visible { outline: 2px solid var(--theme-info-border, #5f89a5); outline-offset: 4px; } .daily-task-item-number { display: grid; place-items: center; width: 27px; min-height: 27px; border-radius: 6px; background: var(--theme-raised, #f0f2ed); color: var(--theme-muted, #666c61); font-size: 10px; font-weight: 750; font-variant-numeric: tabular-nums; } .daily-task-item.is-complete .daily-task-item-number { background: var(--theme-raised, #eaf2ea); color: var(--theme-success-text, #4d785b); } .daily-task-item-copy { display: grid; justify-items: start; min-width: 0; } .daily-task-item-title { margin: 1px 0 7px; color: var(--theme-text, #292a26); font-size: 13px; line-height: 1.4; font-weight: 650; overflow-wrap: anywhere; } .daily-task-row-open:hover .daily-task-item-title { color: var(--theme-success-text, #4d785b); text-decoration: underline; } .daily-task-item.is-complete .daily-task-item-title { color: var(--theme-muted, #777973); text-decoration: line-through; } .daily-task-item-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; color: var(--theme-muted, #747670); font-size: 10px; } .daily-task-item-meta > span:not(.daily-task-type) { overflow-wrap: anywhere; } .daily-task-item-meta i { margin-right: 3px; } .daily-task-type { padding: 3px 7px; border-radius: 4px; background: var(--theme-raised, #f0f1ed); color: var(--theme-muted, #5e625a); font-weight: 700; } .daily-task-type-client { background: var(--theme-raised, #eaf2ea); color: var(--theme-success-text, #4d785b); } .daily-task-type-application { background: var(--theme-raised, #edf2f5); color: var(--theme-info-text, #4e7187); } .daily-task-type-apply { background: var(--theme-raised, #fbf0e5); color: var(--theme-warning-text, #9a6536); } .daily-task-type-content { background: var(--theme-raised, #f8ebeb); color: var(--theme-danger-text, #99585c); } .daily-task-item-notes { margin: 8px 0 0; color: var(--theme-muted, #666862); font-size: 11px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; } .daily-task-checklist-progress { display: inline-block; margin-top: 8px; color: var(--theme-muted, #687b67); font-size: 10px; font-weight: 650; } .daily-task-item-copy time { display: block; margin-top: 7px; color: var(--theme-muted, #888a83); font-size: 10px; } .daily-task-item-actions { display: flex; align-items: center; gap: 6px; } .daily-task-action, .daily-task-delete { display: grid; place-items: center; width: 34px; height: 34px; min-width: 34px; padding: 0; border: 1px solid var(--theme-border, #d6e3d4); border-radius: 6px; background: var(--theme-raised, #f3f7f2); color: var(--theme-success-text, #4d785b); font-size: 13px; transition: background .14s ease, border-color .14s ease, color .14s ease; } .daily-task-action:hover { border-color: var(--theme-success-border, #5d8069); background: var(--theme-raised, #e3eee2); } .daily-task-delete { border-color: var(--theme-border, #eadcdb); background: var(--theme-surface, #fff8f7); color: var(--theme-danger-text, #a4585c); } .daily-task-delete:hover { border-color: var(--theme-danger-border, #c98383); background: var(--theme-raised, #f8e9e8); color: var(--theme-danger-text, #8c3f45); } .daily-task-action:focus-visible, .daily-task-delete:focus-visible { outline: 3px solid rgba(95,137,165,.35); outline-offset: 2px; } .daily-task-item.is-complete .daily-task-action { border-color: var(--theme-border, #bfd4c0); background: var(--theme-raised, #eaf2ea); } .daily-task-empty { display: grid; justify-items: center; align-content: center; min-height: 225px; padding: 26px 16px; text-align: center; } .daily-task-empty > span { color: var(--theme-success-text, #66856d); font-size: 22px; } .daily-task-empty strong { margin-top: 9px; font-size: 13px; } .daily-task-empty p, .daily-task-history-empty { margin: 5px 0 0; color: var(--theme-muted, #858780); font-size: 11px; } .daily-task-history-panel { margin-top: 16px; } .daily-task-history-heading { align-items: flex-start; } .daily-task-history-controls { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin: 16px 0 4px; } .daily-task-history-shortcuts { display: flex; flex-wrap: wrap; gap: 8px; } .daily-task-history-shortcuts .button { min-height: 36px; padding: 8px 11px; font-size: 11px; } .daily-task-history-empty { padding: 18px 0 4px; } .daily-task-heading { align-items: center; padding: 0 2px 20px; } .daily-task-heading-copy { display: grid; gap: 6px; } .daily-task-heading-copy > p:last-child { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; } .daily-task-date-field { min-width: 210px; color: var(--theme-muted, #555750); font-size: 12px; } .daily-task-date-field input { min-height: 42px; padding: 9px 11px; } .daily-task-layout { gap: 18px; margin-top: 20px; } .daily-task-list-panel, .daily-task-history-panel { padding: 24px 26px; } .daily-task-section-heading h3 { font-size: 19px; } .daily-task-list-heading { padding-bottom: 17px; } .daily-task-plan-actions { gap: 18px; } .daily-task-count { font-size: 12px; } .daily-task-history-panel { margin-top: 18px; } .daily-task-history-heading { align-items: center; } .daily-task-history-heading > div { display: grid; gap: 5px; } .daily-task-history-heading > div > p:last-child { font-size: 12px; line-height: 1.5; } .daily-task-history-controls { align-items: flex-end; margin: 18px 0 8px; } .daily-task-history-shortcuts .button { min-height: 40px; padding: 9px 13px; font-size: 12px; } .daily-task-item { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 19px 0; } .daily-task-row-open { grid-column: 1; grid-template-columns: 32px minmax(0, 1fr); align-items: start; gap: 14px; } .daily-task-item-number { width: 30px; min-height: 30px; border-radius: 7px; background: var(--theme-raised, #f1f3ef); color: var(--theme-muted, #62685f); font-size: 11px; } .daily-task-item-copy { gap: 8px; } .daily-task-item-topline { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; width: 100%; } .daily-task-item-title { margin: 0; color: var(--theme-text, #262823); font-size: 15px; line-height: 1.45; } .daily-task-row-open:hover .daily-task-item-title { color: var(--theme-success-text, #456c53); } .daily-task-item.is-complete .daily-task-item-title { color: var(--theme-muted, #777973); } .daily-task-status { flex: 0 0 auto; padding: 4px 8px; border-radius: 5px; background: var(--theme-raised, #f2f3ef); color: var(--theme-muted, #656960); font-size: 10px; font-weight: 700; } .daily-task-status.is-complete { background: var(--theme-raised, #eaf2ea); color: var(--theme-success-text, #4d785b); } .daily-task-item-meta { gap: 8px; color: var(--theme-muted, #63665f); font-size: 11px; line-height: 1.5; } .daily-task-type { padding: 4px 8px; font-size: 10px; } .daily-task-meta-detail { display: inline-flex; align-items: baseline; gap: 5px; min-width: 0; padding: 4px 8px; border: 1px solid var(--theme-border, #eeefeb); border-radius: 5px; background: var(--theme-surface, #fafbf9); overflow-wrap: anywhere; } .daily-task-meta-detail > span { color: var(--theme-muted, #858780); } .daily-task-meta-detail i { flex: 0 0 auto; margin: 0; color: var(--theme-muted, #73806e); } .daily-task-item-notes { display: -webkit-box; margin: 0; color: var(--theme-muted, #646760); font-size: 12px; line-height: 1.6; overflow: hidden; overflow-wrap: anywhere; white-space: pre-wrap; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .daily-task-item-notes > span { margin-right: 6px; color: var(--theme-muted, #7e8079); font-size: 10px; font-weight: 700; text-transform: uppercase; } .daily-task-item-bottomline { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; min-height: 18px; } .daily-task-checklist-progress { margin: 0; padding: 4px 8px; border-radius: 5px; background: var(--theme-raised, #f2f6f1); color: var(--theme-success-text, #55745a); font-size: 11px; } .daily-task-item-copy time { margin: 0; color: var(--theme-muted, #73766f); font-size: 11px; } .daily-task-item-actions { gap: 8px; } .daily-task-action, .daily-task-delete { width: 38px; height: 38px; min-width: 38px; font-size: 14px; } .daily-task-history-list .daily-task-item { padding-block: 16px; } .daily-task-history-list .daily-task-item:last-child { border-bottom: 0; } .daily-task-empty { min-height: 210px; } .daily-task-empty strong { font-size: 15px; } .daily-task-empty p, .daily-task-history-empty { font-size: 12px; line-height: 1.5; } .daily-task-history-empty { padding: 25px 0 8px; } .daily-task-detail-modal { width: min(620px, calc(100vw - 28px)); } .daily-task-detail-shell { padding: 22px; } .daily-task-detail-modal .modal-heading { margin-bottom: 17px; } .daily-task-detail-modal .modal-heading h2 { max-width: 480px; overflow-wrap: anywhere; } .daily-task-detail-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .daily-task-detail-facts > div { display: grid; gap: 4px; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--theme-raised, #fbfbf8); } .daily-task-detail-facts span, .daily-task-detail-notes > span { color: var(--theme-muted, #7a7c75); font-size: 10px; font-weight: 700; } .daily-task-detail-facts strong { color: var(--theme-text, #343630); font-size: 12px; overflow-wrap: anywhere; } .daily-task-detail-status.is-complete { color: var(--theme-success-text, #4d785b); } .daily-task-detail-notes { margin-top: 12px; padding: 11px 12px; border-left: 3px solid var(--theme-border, #d8e4d6); background: var(--theme-raised, #f8faf7); } .daily-task-detail-notes p { margin: 6px 0 0; color: var(--theme-muted, #555851); font-size: 12px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; } .daily-task-detail-complete { display: inline-flex; gap: 8px; margin-top: 13px; } .daily-task-detail-checklist { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); } .daily-task-checklist-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .daily-task-checklist-heading h3 { margin: 4px 0 0; font-size: 17px; } .daily-task-checklist-heading > span { color: var(--theme-muted, #687b67); font-size: 11px; font-weight: 700; } .daily-task-checklist-editor { display: grid; gap: 10px; } .daily-task-checklist-editor .daily-task-checklist-heading h3 { font-size: 14px; } .daily-task-checklist-add-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px; } .daily-task-checklist-add-row .form-field { min-width: 0; } .daily-task-checklist-add-row .button { min-height: 39px; gap: 7px; } .daily-task-draft-checklist { display: grid; gap: 2px; margin: 0; padding-left: 28px; color: var(--theme-muted, #545750); } .daily-task-draft-checklist:empty { display: none; } .daily-task-draft-checklist li { min-height: 34px; padding: 4px 0 4px 3px; border-bottom: 1px solid var(--theme-border, #efefeb); font-size: 12px; } .daily-task-draft-checklist li::marker { color: var(--theme-muted, #687b67); font-size: 11px; font-weight: 750; font-variant-numeric: tabular-nums; } .daily-task-draft-checklist li > span { overflow-wrap: anywhere; } .daily-task-draft-checklist li button { float: right; display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--theme-danger-text, #9b6567); } .daily-task-draft-checklist li button:hover { border-color: var(--theme-border, #eadcdb); background: var(--theme-raised, #fff4f3); } .daily-task-checklist-items { display: grid; margin-top: 10px; } .daily-task-check-item { display: grid; grid-template-columns: 24px minmax(0, 1fr) 32px; align-items: center; gap: 8px; min-height: 42px; border-bottom: 1px solid var(--theme-border, #efefeb); } .daily-task-check-number { color: var(--theme-muted, #687b67); font-size: 11px; font-weight: 750; font-variant-numeric: tabular-nums; } .daily-task-check-item label { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 9px 0; color: var(--theme-text, #454741); cursor: pointer; } .daily-task-check-item input { width: 17px; height: 17px; flex: 0 0 17px; accent-color: #5d8069; } .daily-task-check-item label span { font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; } .daily-task-check-item.is-checked label span { color: var(--theme-muted, #858780); text-decoration: line-through; } .daily-task-check-delete { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--theme-danger-text, #9b6567); } .daily-task-check-delete:hover { border-color: var(--theme-border, #eadcdb); background: var(--theme-raised, #fff4f3); } .daily-task-checklist-empty { margin: 12px 0; color: var(--theme-muted, #858780); font-size: 11px; } .daily-task-checklist-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px; margin-top: 14px; } .daily-task-checklist-form .form-field { min-width: 0; } .daily-task-checklist-form .button { min-height: 38px; gap: 7px; } .daily-task-checklist-locked { margin: 14px 0 0; padding: 11px 13px; border-left: 3px solid var(--theme-border, #d8e4d6); background: var(--theme-raised, #f7f9f6); color: var(--theme-muted, #656960); font-size: 12px; line-height: 1.5; } .daily-task-detail-modal .modal-actions { margin-top: 18px; } @media (max-width: 720px) { .password-security-layout { grid-template-columns: 1fr; gap: 4px; } .password-recovery-section { border-left: 0; padding-left: 0; } .settings-modal { width: calc(100vw - 20px); height: calc(100dvh - 20px); max-height: calc(100dvh - 20px); } .settings-modal-heading { padding: 13px 16px; } .settings-modal-heading h2 { font-size: 18px; } .settings-device-pane { padding: 15px 16px; } .settings-device-heading { align-items: flex-start; flex-direction: column; gap: 10px; } .settings-device-heading .settings-stats { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; } .settings-device-heading .settings-stats span { grid-template-columns: 1fr; gap: 5px; padding: 10px; white-space: normal; } .settings-backup-controls { grid-template-columns: minmax(0, 1fr); gap: 12px; } .settings-backup-controls .danger-button { grid-column: 1; } .settings-account-content { padding: 17px 16px 20px; } .daily-task-heading { align-items: stretch; flex-direction: column; gap: 14px; padding-bottom: 16px; } .daily-task-heading h2 { font-size: 21px; } .daily-task-heading > .daily-task-date-field { max-width: none; } .daily-task-layout { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 12px; } .daily-task-form, .daily-task-list-panel, .daily-task-history-panel { padding: 16px; } .daily-task-add-modal .daily-task-form { padding: 18px; } .daily-task-plan-actions { gap: 8px; } .daily-task-plan-actions .button { min-height: 36px; padding: 8px 10px; font-size: 11px; } .daily-task-form-row { grid-template-columns: minmax(0, 1fr); gap: 13px; } .daily-task-add-button { width: 100%; } .daily-task-checklist-add-row { grid-template-columns: minmax(0, 1fr); } .daily-task-checklist-add-row .button { width: 100%; } .daily-task-history-controls { align-items: stretch; flex-direction: column; } .daily-task-history-shortcuts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .daily-task-history-shortcuts .button { padding-inline: 7px; } .daily-task-heading { align-items: stretch; } .daily-task-heading-copy > p:last-child { font-size: 12px; } .daily-task-date-field { min-width: 0; } .daily-task-list-panel, .daily-task-history-panel { padding: 18px; } .daily-task-history-heading { align-items: flex-start; } .daily-task-history-controls { gap: 12px; } .daily-task-history-shortcuts .button { min-height: 38px; font-size: 11px; } .daily-task-item { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 16px 0; } .daily-task-row-open { grid-template-columns: 28px minmax(0, 1fr); gap: 10px; } .daily-task-item-number { width: 27px; min-height: 27px; } .daily-task-item-title { font-size: 14px; } .daily-task-item-topline { gap: 8px; } .daily-task-status { padding: 4px 6px; font-size: 9px; } .daily-task-meta-detail { padding: 4px 6px; } .daily-task-item-actions { flex-direction: column; } .daily-task-action, .daily-task-delete { width: 34px; height: 34px; min-width: 34px; } .daily-task-item-actions { flex-direction: row; } .daily-task-detail-shell { padding: 18px; } .daily-task-detail-facts { grid-template-columns: minmax(0, 1fr); gap: 8px; } .daily-task-checklist-form { grid-template-columns: minmax(0, 1fr); } .daily-task-checklist-form .button { width: 100%; } } /* Final phone-only layout pass: preserve readable cards and full-width actions. */ @media (max-width: 720px) { .hired-client-actions { display: grid; grid-template-columns: 1fr; gap: 8px; } .hired-client-actions .button { width: 100%; } .weekly-report-banner { align-items: flex-start; flex-direction: column; padding: 15px; } .weekly-report-banner .button { width: 100%; } .weekly-report-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .weekly-report-chart { gap: 6px; padding-inline: 2px; } .weekly-report-bar span { overflow-wrap: anywhere; } .weekly-report-modal .modal-actions { align-items: stretch; flex-direction: column-reverse; } .weekly-report-modal .modal-actions .button { width: 100%; } .client-follow-up-history-list > div { align-items: flex-start; flex-direction: column; gap: 3px; } .client-email-history-head { align-items: flex-start; flex-direction: column; gap: 5px; } .client-email-history-item { flex-direction: column; gap: 5px; } .client-email-history-item time { font-size: 10px; } .document-update-prompt { align-items: stretch; flex-direction: column; margin: 10px; } .document-update-actions { display: grid; grid-template-columns: 1fr; } .document-update-prompt .button { width: 100%; } .document-archive-item { align-items: flex-start; padding: 11px 12px; } .document-archive-filename { white-space: normal; overflow-wrap: anywhere; } .document-archive-name { align-items: flex-start; } } #dailyTaskView, #applicationsView, #toApplyView, #hiredView, #inboxView, #accountView { --workspace-ink: #202724; --workspace-muted: #66716c; --workspace-line: #dce2de; --workspace-soft: var(--navy-soft); --workspace-accent: var(--navy); --workspace-danger: #a34e54; color: var(--workspace-ink); } #dailyTaskView .panel, #applicationsView .panel, #toApplyView .panel, #hiredView .panel, #inboxView .panel { border: 1px solid var(--workspace-line); border-radius: 5px; background: var(--theme-surface, #fff); box-shadow: none; } #dailyTaskView .eyebrow, #applicationsView .eyebrow, #toApplyView .eyebrow, #hiredView .eyebrow, #inboxView .eyebrow, #accountView .eyebrow { color: var(--theme-muted, #68756e); } #dailyTaskView .daily-task-heading, #applicationsView .application-workspace-head, #toApplyView .application-workspace-head, #hiredView .application-workspace-head, #inboxView .application-workspace-head { padding-bottom: 18px; border-color: var(--workspace-line); } #dailyTaskView .daily-task-heading h2, #applicationsView .application-workspace-title h2, #toApplyView .application-workspace-title h2, #hiredView .application-workspace-title h2, #inboxView .application-workspace-title h2 { color: var(--workspace-ink); font-size: 22px; font-weight: 650; } #dailyTaskView .daily-task-heading > div > p:last-child, #applicationsView .application-workspace-title > p:last-child, #toApplyView .application-workspace-title > p:last-child, #hiredView .application-workspace-title > p:last-child, #inboxView .application-workspace-title > p:last-child { color: var(--workspace-muted); font-size: 12px; } #dailyTaskView .panel, #applicationsView .application-panel, #toApplyView .to-apply-page-panel, #hiredView .hired-panel, #hiredView .hired-detail-panel, #inboxView .inbox-panel { box-shadow: none; } #dailyTaskView .daily-task-list-panel, #dailyTaskView .daily-task-history-panel { padding: 24px 26px; } #dailyTaskView .daily-task-section-heading h3, #dailyTaskView .daily-task-checklist-heading h3 { color: var(--workspace-ink); font-size: 18px; font-weight: 650; } #dailyTaskView .daily-task-item { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 19px 0; border-color: var(--theme-border, #e9eeeb); } #dailyTaskView .daily-task-row-open { grid-column: 1; grid-template-columns: 32px minmax(0, 1fr); gap: 14px; } #dailyTaskView .daily-task-item-number { width: 30px; min-height: 30px; border-radius: 6px; background: var(--navy-soft); color: var(--workspace-accent); } #dailyTaskView .daily-task-item-title { color: var(--workspace-ink); } #dailyTaskView .daily-task-count { color: var(--workspace-muted); font-variant-numeric: tabular-nums; } #dailyTaskView .daily-task-action { border-color: var(--theme-border, #c9cedf); background: var(--navy-soft); color: var(--workspace-accent); } #dailyTaskView .daily-task-delete { border-color: var(--theme-border, #eadcdd); background: var(--theme-surface, #fff); color: var(--workspace-danger); } #dailyTaskView .daily-task-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 16px; } #dailyTaskView .daily-task-list-panel, #dailyTaskView .daily-task-history-panel { border-color: var(--theme-border, #dfe4df); background: var(--theme-raised, #f2f4f2); } #dailyTaskView .daily-task-history-panel { margin-top: 0; } #dailyTaskView .daily-task-history-list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); align-items: start; gap: 12px; margin-top: 12px; } #dailyTaskView .daily-task-history-list .daily-task-item { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 10px; padding: 10px 12px; border: 1px solid var(--theme-border, #dce8dd); border-radius: 12px 12px 4px 12px; background: var(--theme-raised, #edf5ee); } #dailyTaskView .daily-task-history-list .daily-task-row-open { grid-column: 1; grid-template-columns: minmax(0, 1fr); gap: 0; } #dailyTaskView .daily-task-history-list .daily-task-item-copy { display: flex; align-items: center; gap: 9px; min-width: 0; } #dailyTaskView .daily-task-history-list .daily-task-item-topline, #dailyTaskView .daily-task-history-list .daily-task-item-bottomline { display: contents; } #dailyTaskView .daily-task-history-list .daily-task-item-title { min-width: 0; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; } #dailyTaskView .daily-task-history-list .daily-task-status, #dailyTaskView .daily-task-history-list .daily-task-item-meta, #dailyTaskView .daily-task-history-list .daily-task-item-notes, #dailyTaskView .daily-task-history-list .daily-task-checklist-progress { display: none; } #dailyTaskView .daily-task-history-list .daily-task-item-copy time { display: inline-block; flex: 0 0 auto; margin: 0; color: var(--theme-muted, #5e7061); font-size: 10px; white-space: nowrap; } #dailyTaskView .daily-task-history-list .daily-task-item-copy time::before { content: "|"; margin-right: 9px; color: var(--theme-subtle, #9aa89b); } #dailyTaskView .daily-task-history-list .daily-task-item-number { display: none; } #dailyTaskView .daily-task-history-list .daily-task-item-actions { grid-column: 2; grid-row: 1; justify-content: flex-end; align-self: end; gap: 4px; padding: 0; border: 0; } #dailyTaskView .daily-task-history-list .daily-task-item-actions .daily-task-action, #dailyTaskView .daily-task-history-list .daily-task-item-actions .daily-task-delete { width: 30px; height: 30px; min-width: 30px; font-size: 12px; } #dailyTaskView .daily-task-list .daily-task-item { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 10px; padding: 10px 12px; border: 1px solid var(--theme-border, #dce8dd); border-radius: 12px 12px 4px 12px; background: var(--theme-raised, #edf5ee); } #dailyTaskView .daily-task-list .daily-task-row-open { grid-column: 1; grid-template-columns: minmax(0, 1fr); gap: 0; } #dailyTaskView .daily-task-list .daily-task-item-number, #dailyTaskView .daily-task-list .daily-task-item-meta, #dailyTaskView .daily-task-list .daily-task-item-notes, #dailyTaskView .daily-task-list .daily-task-item-bottomline { display: none; } #dailyTaskView .daily-task-list .daily-task-item-topline { align-items: center; gap: 8px; } #dailyTaskView .daily-task-list .daily-task-item-title { min-width: 0; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; } #dailyTaskView .daily-task-list .daily-task-status { padding: 3px 7px; border: 1px solid var(--theme-border, #dce8dd); border-radius: 5px; background: var(--theme-surface, #fff); color: var(--theme-success-text, #56735b); font-size: 10px; } #dailyTaskView .daily-task-list .daily-task-item-actions { grid-column: 2; grid-row: 1; align-self: center; gap: 4px; } #dailyTaskView .daily-task-list .daily-task-item-actions .daily-task-action, #dailyTaskView .daily-task-list .daily-task-item-actions .daily-task-delete { width: 30px; height: 30px; min-width: 30px; font-size: 12px; } @media (max-width: 720px) { #dailyTaskView .daily-task-layout { grid-template-columns: minmax(0, 1fr); } #dailyTaskView .daily-task-list-panel, #dailyTaskView .daily-task-history-panel { padding: 18px; } #dailyTaskView .daily-task-item { gap: 10px; padding: 16px 0; } #dailyTaskView .daily-task-row-open { grid-template-columns: 28px minmax(0, 1fr); gap: 10px; } #dailyTaskView .daily-task-item-number { width: 27px; min-height: 27px; } #dailyTaskView .daily-task-history-list .daily-task-item { gap: 6px 8px; padding: 9px 10px; } } #applicationsView .application-workspace-count, #toApplyView .application-workspace-count, #hiredView .application-workspace-count, #inboxView .application-workspace-count { min-width: 0; padding: 2px 0 2px 14px; border: 0; border-left: 2px solid var(--theme-border, #c9cedf); border-radius: 0; background: transparent; } #applicationsView .application-workspace-count-icon, #toApplyView .application-workspace-count-icon, #hiredView .application-workspace-count-icon, #inboxView .application-workspace-count-icon { width: 30px; height: 30px; flex-basis: 30px; border-radius: 4px; background: var(--workspace-soft); color: var(--workspace-accent); } #applicationsView .application-workspace-count small, #toApplyView .application-workspace-count small, #hiredView .application-workspace-count small, #inboxView .application-workspace-count small { color: var(--workspace-muted); } #applicationsView #applicationListLabel, #toApplyView #toApplyCountLabel { color: var(--workspace-ink); font-size: 13px; font-variant-numeric: tabular-nums; } #applicationsView .application-filters, #toApplyView .application-filters, #inboxView .application-filters { grid-template-columns: minmax(220px, 1fr) minmax(0, 2fr); gap: 14px; margin: 14px 0; padding: 0 0 14px; border: 0; border-bottom: 1px solid var(--workspace-line); border-radius: 0; background: transparent; } #applicationsView .application-search-field, #toApplyView .application-search-field, #inboxView .application-search-field { height: 37px; border-color: var(--workspace-line); border-radius: 4px; background: var(--theme-surface, #fff); } #applicationsView .application-filter-field, #toApplyView .application-filter-field, #inboxView .application-filter-field { color: var(--workspace-muted); } #applicationsView .application-filter-field input, #applicationsView .application-filter-field select, #toApplyView .application-filter-field input, #toApplyView .application-filter-field select, #inboxView .application-filter-field input, #inboxView .application-filter-field select { height: 35px; border-color: var(--workspace-line); border-radius: 4px; color: var(--workspace-ink); } #applicationsView .application-filter-field input:focus, #applicationsView .application-filter-field select:focus, #toApplyView .application-filter-field input:focus, #toApplyView .application-filter-field select:focus, #inboxView .application-filter-field input:focus, #inboxView .application-filter-field select:focus { border-color: var(--workspace-accent); box-shadow: 0 0 0 2px rgba(26, 35, 64, .12); } #applicationsView .application-panel { overflow: hidden; } #applicationsView .application-list-head { border-color: var(--workspace-line); background: var(--theme-raised, #f6f8f6); color: var(--theme-muted, #68736d); font-size: 9px; } #applicationsView .application-group + .application-group, #inboxView .email-section + .email-section { border-top: 1px solid var(--workspace-line); } #applicationsView .application-group-heading, #inboxView .email-section-heading { padding: 11px 20px; border-color: var(--theme-border, #e7ece8); background: var(--theme-surface, #fbfcfb); } #applicationsView .application-group-ongoing .application-group-heading, #applicationsView .application-group-to-proceed .application-group-heading, #applicationsView .application-group-to-proceed, #inboxView .email-section-sent .email-section-heading { background: var(--theme-raised, #f7faf8); } #applicationsView .application-group-to-proceed { border-radius: 0; } #applicationsView .application-row { padding: 13px 20px; border-color: var(--theme-border, #e9eeeb); transition: background-color .14s ease; } #applicationsView .application-row:hover, #applicationsView .application-row:focus-visible, #inboxView .email-row:hover, #inboxView .email-row:focus-visible { background: var(--theme-raised, #f7faf8); } #applicationsView .application-row:active, #inboxView .email-row:active { box-shadow: inset 2px 0 0 var(--workspace-accent); } #applicationsView .application-row.interview-today { background: var(--theme-raised, #fff8f2); border-left-color: #c17b45; } #applicationsView .application-row.interview-today:hover { background: var(--theme-raised, #fff4e9); } #applicationsView .client-card-title, #inboxView .email-subject { color: var(--workspace-ink); } #applicationsView .client-card-website, #applicationsView .hired-card-website a { color: var(--workspace-accent); } #applicationsView .status-pill, #dailyTaskView .daily-task-type { border-radius: 3px; font-weight: 650; } #toApplyView .to-apply-page-panel { height: auto; min-height: 220px; padding: 0; } #toApplyView .to-apply-page-panel .to-apply-list { flex: initial; overflow: visible; margin: 0; } #toApplyView .to-apply-list-head { padding: 11px 20px; border-color: var(--workspace-line); background: var(--theme-raised, #f6f8f6); color: var(--theme-muted, #68736d); } #toApplyView .to-apply-row { padding: 13px 20px; border-color: var(--theme-border, #e9eeeb); } #toApplyView .to-apply-row:hover, #toApplyView .to-apply-row:focus-within { background: var(--theme-raised, #f7faf8); } #toApplyView .to-apply-row.overdue, #toApplyView .to-apply-row.due-today { padding-left: 16px; border-left: 4px solid var(--theme-warning-border, #c17b45); background: var(--theme-raised, #fff9f3); } #toApplyView .to-apply-row.overdue:hover, #toApplyView .to-apply-row.due-today:hover { background: var(--theme-raised, #fff4e9); } #toApplyView .to-apply-row.overdue .to-apply-date, #toApplyView .to-apply-row.overdue .to-apply-date span, #toApplyView .to-apply-row.due-today .to-apply-date, #toApplyView .to-apply-row.due-today .to-apply-date span { color: var(--theme-warning-text, #9b6336); } #toApplyView .to-apply-title strong { color: var(--workspace-ink); } #toApplyView .to-apply-title a { color: var(--workspace-accent); } #hiredView .hired-panel { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; } #hiredView .hired-list { display: flex; flex-wrap: wrap; align-items: stretch; gap: 14px; } #hiredView .hired-card { flex: 1 1 calc((100% - 56px) / 5); min-width: 175px; max-width: 360px; width: auto; min-height: 224px; padding: 17px; gap: 11px; border: 1px solid var(--workspace-line); border-top: 3px solid var(--theme-success-border, #8da995); border-radius: 8px; background: var(--theme-surface, #fff); box-shadow: 0 3px 10px rgba(32, 39, 36, .06); transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; } #hiredView .hired-list .application-empty { flex: 1 0 100%; } #hiredView .hired-card:hover, #hiredView .hired-card:focus-visible { border-color: var(--theme-success-border, #8ca895); background: var(--theme-surface, #fbfdfb); box-shadow: 0 5px 14px rgba(32, 39, 36, .1); transform: translateY(-2px); outline: 0; } #hiredView .hired-card.selected { border-color: var(--workspace-accent); box-shadow: inset 3px 0 0 var(--workspace-accent), 0 2px 7px rgba(32, 39, 36, .05); } #hiredView .hired-card.contract-ended-card, #hiredView .hired-card.inactive-client-card { border-color: var(--theme-danger-border, #e6b9bd); border-top-color: #d98d94; background: var(--theme-surface, #fff5f5); } #hiredView .hired-card.contract-ended-card:hover, #hiredView .hired-card.inactive-client-card:hover { border-color: var(--theme-danger-border, #d98d94); background: var(--theme-raised, #ffeded); } #hiredView .hired-card.contract-ended-card:hover { border-top-color: #d98d94; } #hiredView .hired-card-head { min-height: 46px; padding-bottom: 11px; border-bottom: 1px solid var(--theme-border, #e9eeeb); } #hiredView .hired-card .client-card-title { color: var(--workspace-ink); font-size: 15px; font-weight: 700; line-height: 1.35; } #hiredView .hired-card .client-card-subtitle { color: var(--workspace-muted); font-size: 12px; line-height: 1.4; } #hiredView .hired-card .client-contract-status { padding: 5px 8px; border-radius: 4px; font-size: 10px; line-height: 1.25; } #hiredView .client-online-status { display: inline-flex; align-items: center; gap: 6px; width: fit-content; color: var(--theme-muted, #66716a); font-size: 11px; line-height: 1.35; } #hiredView .client-online-status::before { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--theme-action, #87918a); content: ""; } #hiredView .client-online-status.online { color: var(--theme-success-text, #286444); font-weight: 650; } #hiredView .client-online-status.online::before { background: var(--theme-success-strong, #3c9a64); } #hiredView .client-online-status.offline { color: var(--theme-muted, #727872); } #hiredView .client-online-status.unknown { color: var(--theme-muted, #777d77); font-style: italic; } #hiredView .hired-card-meta { color: var(--workspace-muted); line-height: 1.55; white-space: normal; overflow-wrap: anywhere; } #hiredView .hired-card-website a { color: var(--workspace-accent); } #hiredView .view-details-label { margin-top: auto; padding-top: 11px; border-top: 1px solid var(--theme-border, #e9eeeb); color: var(--workspace-accent); font-size: 11px; } #hiredView .hired-detail-panel { margin-top: 14px; padding: 16px; border-radius: 5px; } #hiredView .hired-detail-heading { padding-bottom: 12px; } #hiredView .active-client-onboarding { margin: 4px 0 16px; padding: 15px; border: 1px solid var(--workspace-line); border-radius: 5px; background: var(--theme-surface, #fff); } #hiredView .active-client-onboarding-heading h3 { margin: 3px 0 12px; color: var(--workspace-ink); font-size: 14px; } #hiredView .active-client-onboarding-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; margin: 0; } #hiredView .active-client-onboarding-details > div { min-width: 0; } #hiredView .active-client-onboarding-details dt { margin-bottom: 4px; color: var(--workspace-muted); font-size: 10px; font-weight: 700; } #hiredView .active-client-onboarding-details dd { margin: 0; color: var(--workspace-ink); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; white-space: pre-wrap; } #hiredView .active-client-onboarding-submitted { margin: 0 0 12px; color: var(--workspace-muted); font-size: 11px; } #hiredDetailGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 14px 0; align-items: stretch; } #hiredDetailGrid .hired-detail-section { min-width: 0; padding: 14px; border: 1px solid var(--workspace-line); border-radius: 6px; background: var(--theme-surface, #fff); box-shadow: 0 2px 8px rgba(32, 39, 36, .06); } #hiredDetailGrid .hired-detail-section h3, #hiredDetailGrid .hired-detail-notes h3 { margin: 0 0 12px; padding-bottom: 9px; border-bottom: 1px solid var(--workspace-line); color: var(--workspace-ink); font-size: 11px; font-weight: 750; } #hiredDetailGrid .hired-detail-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px 14px; margin: 0; } #hiredDetailGrid .hired-detail-fields > div { min-width: 0; } #hiredDetailGrid dt { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; font-size: 9px; } #hiredDetailGrid dt i { width: 12px; flex: 0 0 12px; color: var(--theme-muted, #748078); font-size: 10px; text-align: center; } #hiredDetailGrid dd { overflow-wrap: anywhere; white-space: normal; font-size: 12px; line-height: 1.4; } #hiredDetailGrid .hired-detail-wide { grid-column: 1 / -1; } #hiredDetailGrid .hired-detail-notes { padding-top: 13px; border-top: 1px solid var(--workspace-line); } #hiredDetailGrid .hired-detail-notes h3 { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; padding-bottom: 0; border-bottom: 0; } #hiredDetailGrid .hired-detail-notes h3 i { color: var(--theme-muted, #748078); } #hiredDetailGrid .hired-detail-notes p { margin: 0; } #hiredView .hired-detail-heading { border-color: var(--workspace-line); } #hiredView .hired-detail-heading h2 { color: var(--workspace-ink); font-size: 21px; } #hiredView .hired-detail-salary { border-color: var(--theme-border, #dce2de); border-radius: 3px; background: var(--theme-raised, #f5f8f6); color: var(--workspace-accent); } #hiredView .active-document-box, #hiredView .invoice-send-panel { border-color: var(--workspace-line); border-radius: 4px; box-shadow: none; } #hiredView .document-version-section { border-radius: 4px; box-shadow: none; } #hiredView .active-document-row { border-radius: 4px; } @media (max-width: 900px) { #hiredDetailGrid { grid-template-columns: minmax(0, 1fr); gap: 14px; } #hiredView .active-client-onboarding-details { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 1300px) { #hiredView .hired-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 1000px) { #hiredView .hired-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 760px) { #hiredView .hired-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { #hiredView .hired-list { grid-template-columns: minmax(0, 1fr); } } #inboxView .email-filters { margin: 14px 0 8px; padding: 0; border: 0; } #inboxView .email-panel-header { padding: 12px 16px 0; border-bottom: 1px solid var(--workspace-line); background: var(--theme-surface, #fff); } #inboxView .email-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--workspace-line); } #inboxView .email-panel-heading-actions { display: flex; align-items: center; gap: 9px; } #inboxView #emailSelectionActions { display: flex; justify-content: flex-end; } #inboxView .email-summary { display: flex; flex-shrink: 0; gap: 8px; } #inboxView .email-summary-item { display: flex; align-items: center; gap: 7px; min-height: 32px; padding: 5px 9px; border: 1px solid var(--theme-border, #e1e5e1); border-radius: 5px; background: var(--theme-surface, #fff); color: var(--theme-muted, #59635b); font-size: 11px; font-weight: 600; cursor: pointer; } #inboxView .email-summary-item strong { color: var(--theme-text, #404a42); font-size: 12px; font-weight: 700; } #inboxView .email-summary-item:hover { border-color: var(--theme-border, #bac9bc); background: var(--theme-raised, #f8faf8); } #inboxView .email-summary-item.active { border-color: var(--theme-border, #9bb29e); background: var(--theme-raised, #f0f5f0); color: var(--theme-success-text, #365a40); } #inboxView .email-summary-item.active strong { color: var(--theme-success-text, #365a40); } #inboxView .email-filters { margin: 8px 0; padding: 0; border: 0; } #inboxView .email-view-tabs { border-bottom: 0; } #inboxView .email-view-tabs { gap: 16px; margin-bottom: 0; padding: 0; border: 0; border-bottom: 1px solid var(--workspace-line); border-radius: 0; background: transparent; } #inboxView .email-view-tab { min-height: 39px; padding: 8px 2px; border-bottom: 2px solid transparent; border-radius: 0; color: var(--workspace-muted); } #inboxView .email-view-tab:hover { background: transparent; color: var(--workspace-ink); } #inboxView .email-view-tab.active { border-bottom-color: var(--workspace-accent); background: transparent; color: var(--workspace-accent); box-shadow: none; } #inboxView .inbox-panel { margin-top: 0; overflow: hidden; } #inboxView .email-section-heading { padding: 13px 18px 10px; } #inboxView .email-row { padding: 13px 18px; border-color: var(--theme-border, #e9eeeb); } #inboxView .email-row.sent { padding-left: 15px; border-left-color: var(--workspace-accent); background: var(--theme-surface, #fbfcfb); } #inboxView .email-avatar { width: 30px; height: 30px; border-radius: 4px; background: var(--navy-soft); color: var(--workspace-accent); } #inboxView .sent-email-badge { border-radius: 3px; background: var(--navy-soft); color: var(--navy); } #inboxView .client-match-tag { border-radius: 3px; background: var(--theme-raised, #f6f0e7); color: var(--theme-warning-text, #85643e); } #inboxView .privacy-note { color: var(--workspace-muted); } #accountView .password-security-layout { gap: 28px; } #accountView .password-security-section { padding: 18px 0; border-color: var(--workspace-line); } #accountView .password-recovery-section { padding-left: 24px; border-left-color: var(--workspace-line); } #accountView { display: none; } #accountView.active { display: grid; gap: 18px; max-width: 1040px; } #accountView .account-overview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; padding-bottom: 16px; border-bottom: 1px solid var(--workspace-line); } #accountView .account-overview-grid .account-section { min-width: 0; padding: 0; border: 0; } #accountView .account-identity-section { display: flex; align-items: center; gap: 14px; padding: 4px 0 18px; border-bottom: 1px solid var(--workspace-line); } #accountView .account-avatar { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 4px; background: var(--navy-soft); color: var(--navy); font-size: 16px; } #accountView .account-provider-label { margin: 0 0 3px; color: var(--workspace-muted); font-size: 11px; } #accountView .account-identity-copy h2 { margin: 0; color: var(--workspace-ink); font-size: 16px; font-weight: 600; overflow-wrap: anywhere; } #accountView .account-section { padding: 15px 0; border-bottom: 1px solid var(--workspace-line); } #accountView .account-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; } #accountView .account-section-heading h2 { margin: 0; color: var(--workspace-ink); font-size: 14px; font-weight: 650; } #accountView .account-section-heading > span { color: var(--workspace-muted); font-size: 10px; } #accountView .account-connection-list, #accountView .account-detail-list { display: grid; margin: 0; } #accountView .account-connection-row, #accountView .account-detail-list > div { display: grid; grid-template-columns: minmax(130px, .35fr) minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 48px; padding: 8px 0; border-top: 1px solid var(--theme-border, #e9eeeb); } #accountView .account-connection-row dt, #accountView .account-detail-list dt { color: var(--workspace-muted); font-size: 11px; } #accountView .account-connection-row dd, #accountView .account-detail-list dd { display: grid; gap: 3px; min-width: 0; margin: 0; color: var(--workspace-ink); font-size: 12px; overflow-wrap: anywhere; } #accountView .account-connection-row dd small { color: var(--workspace-muted); font-size: 10px; } #accountView .account-gmail-action { min-height: 32px; padding: 6px 10px; font-size: 11px; } #accountView .account-detail-list > div { grid-template-columns: minmax(130px, .35fr) minmax(0, 1fr); } #accountView .account-storage-section .account-detail-list > div { grid-template-columns: minmax(130px, .35fr) minmax(0, 1fr); border-top: 0; } #accountView .account-storage-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap; } #accountView .account-storage-actions a { display: inline-flex; align-items: center; gap: 5px; } #accountView .account-storage-refresh { display: inline-flex; align-items: center; gap: 6px; } #accountView .account-storage-refresh:disabled { opacity: .6; cursor: wait; } #accountView .account-storage-plan-controls { display: flex; align-items: end; gap: 12px; margin: 0 0 8px; } #accountView .account-storage-plan-field { display: grid; gap: 5px; min-width: 190px; color: var(--workspace-muted); font-size: 10px; } #accountView .account-storage-plan-field select, #accountView .account-storage-plan-field input { min-height: 34px; border: 1px solid var(--workspace-line); border-radius: 4px; background: var(--theme-surface, #fff); color: var(--workspace-ink); padding: 6px 9px; font: inherit; font-size: 11px; } #accountView .account-storage-plan-field input { width: 150px; } #accountView .account-storage-plan-field select:focus, #accountView .account-storage-plan-field input:focus { outline: 2px solid rgba(26, 35, 64, .3); outline-offset: 1px; } #accountView .account-storage-note { margin: 7px 0 0; } #accountView .account-sign-in-history { display: grid; max-height: 212px; margin: 0; padding: 0 7px 0 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; list-style: none; } #accountView .account-sign-in-history li { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 42px; min-height: 42px; padding: 8px 0; overflow: hidden; border-top: 1px solid var(--theme-border, #e9eeeb); color: var(--workspace-ink); font-size: 11px; } #accountView .account-sign-in-history li > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #accountView .account-sign-in-history time { flex: 0 1 190px; overflow: hidden; color: var(--workspace-muted); font-size: 10px; text-align: right; text-overflow: ellipsis; white-space: nowrap; } #accountView .account-empty-state { margin: 0; padding: 8px 0; color: var(--workspace-muted); font-size: 11px; } #accountView .password-security-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(240px, .8fr); gap: 26px; padding-top: 4px; } #accountView .password-security-section { min-width: 0; padding: 10px 0; border-top: 0; } #accountView .password-security-section h2 { margin: 0 0 12px; color: var(--workspace-ink); font-size: 14px; font-weight: 650; } #accountView .password-recovery-section { padding-left: 22px; border-left: 1px solid var(--workspace-line); } #accountView .settings-copy { color: var(--workspace-muted); font-size: 11px; line-height: 1.5; } #accountView .password-change-form { gap: 10px; } #accountView .password-change-form .form-field { font-size: 11px; } #accountView .password-change-form input { min-height: 38px; border-radius: 4px; } #dailyTaskView input:focus-visible, #dailyTaskView select:focus-visible, #applicationsView input:focus-visible, #applicationsView select:focus-visible, #toApplyView input:focus-visible, #toApplyView select:focus-visible, #hiredView input:focus-visible, #hiredView select:focus-visible, #inboxView input:focus-visible, #inboxView select:focus-visible, #accountView input:focus-visible { outline: 2px solid rgba(26, 35, 64, .55); outline-offset: 1px; } #dailyTaskView .button-primary, #applicationsView .button-primary, #toApplyView .button-primary, #hiredView .button-primary, #inboxView .button-primary, #accountView .button-primary { border-radius: 4px; background: var(--theme-action, var(--navy)); box-shadow: none; } #dailyTaskView .button-primary:hover, #applicationsView .button-primary:hover, #toApplyView .button-primary:hover, #hiredView .button-primary:hover, #inboxView .button-primary:hover, #accountView .button-primary:hover { background: var(--navy-deep); } #dailyTaskView .button-secondary, #applicationsView .button-secondary, #toApplyView .button-secondary, #hiredView .button-secondary, #inboxView .button-secondary, #accountView .button-secondary { border-radius: 4px; } @media (max-width: 720px) { #accountView .account-overview-grid { grid-template-columns: 1fr; gap: 0; padding-bottom: 0; border-bottom: 0; } #accountView .account-overview-grid .account-section { padding: 15px 0; border-bottom: 1px solid var(--workspace-line); } #accountView .account-storage-plan-controls { flex-wrap: wrap; } #accountView .account-storage-plan-field { flex: 1 1 190px; min-width: 0; } #accountView .account-storage-plan-field input { width: 100%; } #dailyTaskView .daily-task-list-panel, #dailyTaskView .daily-task-history-panel { padding: 15px; } #applicationsView .application-filters, #toApplyView .application-filters, #inboxView .application-filters { padding-bottom: 12px; } #inboxView .email-panel-header { padding: 14px 14px 0; } #inboxView .email-panel-heading { align-items: flex-start; flex-wrap: wrap; gap: 10px; } #inboxView .email-panel-heading-actions { gap: 8px; margin-left: auto; } #inboxView .email-panel-title h2 { font-size: 20px; } #inboxView .email-summary { overflow-x: auto; } #inboxView .email-summary-item { flex: 0 0 auto; } #inboxView .email-filters { padding-bottom: 8px; } #inboxView .email-row { grid-template-columns: 30px minmax(0, 1fr) 86px; gap: 8px; } #inboxView .email-selection-mode .email-row { grid-template-columns: 18px 30px minmax(0, 1fr) 86px; } #inboxView .email-row-actions { grid-column: 2 / -1; } #inboxView .email-selection-mode .email-row-actions { grid-column: 3 / -1; } #applicationsView .application-workspace-count, #toApplyView .application-workspace-count, #hiredView .application-workspace-count, #inboxView .application-workspace-count { padding-left: 10px; } #applicationsView .application-row { padding: 12px 14px; } #applicationsView .application-row.interview-today { padding-left: 10px; } #toApplyView .to-apply-page-panel { min-height: 180px; } #toApplyView .to-apply-list-head { padding: 10px 14px; } #toApplyView .to-apply-row { padding: 12px 14px; } #toApplyView .to-apply-row.overdue, #toApplyView .to-apply-row.due-today { padding-left: 10px; } #hiredView .hired-card { padding: 13px 14px; } #inboxView .email-row { padding: 12px 10px; } #inboxView .email-row.sent { padding-left: 7px; } #accountView .account-connection-row { grid-template-columns: 90px minmax(0, 1fr) auto; gap: 8px; } #accountView .account-detail-list > div { grid-template-columns: 125px minmax(0, 1fr); gap: 8px; } #accountView .password-security-layout { grid-template-columns: 1fr; gap: 0; } #accountView .password-recovery-section { padding: 14px 0 0; border-left: 0; border-top: 1px solid var(--workspace-line); } } @media (max-width: 480px) { #dailyTaskView .daily-task-plan-actions { flex-wrap: wrap; justify-content: flex-end; } #dailyTaskView .daily-task-count { margin-right: auto; } #applicationsView .application-workspace-title h2, #toApplyView .application-workspace-title h2, #hiredView .application-workspace-title h2, #inboxView .application-workspace-title h2 { font-size: 20px; } #applicationsView .application-filter-controls, #inboxView .email-filter-controls { grid-template-columns: 1fr 1fr; } #inboxView .email-panel-heading-actions { flex-wrap: wrap; justify-content: flex-end; } #inboxView .email-summary { gap: 6px; } #inboxView .email-summary-item { gap: 6px; padding: 7px 9px; font-size: 10px; } } #hiredView .hired-detail-panel { margin-top: 18px; padding: 0; overflow: hidden; border: 1px solid var(--workspace-line); border-radius: 8px; background: var(--theme-surface, #fff); box-shadow: 0 3px 12px rgba(32, 39, 36, .04); } #hiredView .hired-detail-heading { align-items: center; gap: 24px; padding: 24px 26px 20px; border-color: var(--workspace-line); } #hiredView .hired-detail-identity { min-width: 0; } #hiredView .hired-detail-identity > .eyebrow { margin-bottom: 6px; } #hiredView .hired-detail-heading h2 { margin: 0; color: var(--workspace-ink); font-size: 25px; font-weight: 650; line-height: 1.25; overflow-wrap: anywhere; } #hiredView .hired-detail-header-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 11px; margin-top: 8px; } #hiredView .hired-detail-subtitle { color: var(--workspace-muted); font-size: 13px; } #hiredView .hired-detail-header-meta .status-pill { margin: 0; } #hiredView #hiredDetailContact { display: block; flex: 0 0 100%; min-width: 0; color: var(--workspace-muted); font-size: 12px; } #hiredView #hiredDetailContact > .hired-detail-contact-separator:first-child { display: none; } #hiredView #hiredDetailContact > .hired-detail-contact-separator:not(:first-child) { margin: 0 7px; } #hiredView #hiredDetailContact a { overflow-wrap: anywhere; color: var(--workspace-accent); text-decoration: none; } #hiredView #hiredDetailContact a:hover { text-decoration: underline; } #hiredView .hired-detail-heading-actions { flex-wrap: wrap; align-items: center; gap: 8px; } #hiredView .hired-detail-heading-actions .button { min-height: 38px; padding: 8px 13px; font-size: 12px; } #hiredView #activeClientActionsButton, #hiredView #activeClientActionsButton:hover, #hiredView #activeClientActionsButton:focus-visible { border-color: var(--theme-info-border, #283463); background: var(--theme-info-strong, #283463); color: #fff; } #hiredView .hired-list-back-button { gap: 9px; min-height: 40px; padding: 6px 13px 6px 8px; border: 1px solid var(--theme-border, #d9def4); border-radius: 10px; background: var(--theme-surface, #f7f8ff); color: var(--theme-info-text, #46518f); box-shadow: 0 1px 2px rgba(27, 34, 68, .06); transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, color .15s ease; } #hiredView .hired-list-back-button > i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--theme-raised, #e9ecfb); color: var(--theme-info-text, #4f5aa3); font-size: 11px; transition: transform .15s ease; } #hiredView .hired-list-back-button:hover { border-color: var(--theme-border, #c7ccef); background: var(--theme-raised, #eef0ff); color: var(--theme-info-text, #35417f); box-shadow: 0 2px 6px rgba(27, 34, 68, .1); } #hiredView .hired-list-back-button:hover > i { transform: translateX(-2px); } #hiredView .hired-list-back-button:focus-visible { outline: 2px solid var(--theme-info-border, #6b75bb); outline-offset: 2px; } #hiredView .hired-detail-heading-actions .button-primary { white-space: nowrap; } #hiredView .client-detail-tabs { display: flex; gap: 22px; min-height: 52px; padding: 0 26px; overflow-x: auto; overflow-y: hidden; border-bottom: 1px solid var(--workspace-line); background: var(--theme-surface, #fff); -ms-overflow-style: none; scrollbar-width: none; } #hiredView .client-detail-tabs::-webkit-scrollbar { display: none; width: 0; height: 0; } #hiredView .client-detail-tab { position: relative; flex: 0 0 auto; min-height: 52px; padding: 0 1px; border: 0; border-radius: 0; background: transparent; color: var(--workspace-muted); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; } #hiredView .client-detail-tab:hover { color: var(--workspace-ink); } #hiredView .client-detail-tab.active { color: var(--workspace-accent); } #hiredView .client-task-tab-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 4px; padding: 0 5px; border-radius: 999px; background: var(--theme-raised, #eef0f8); color: var(--theme-info-text, #4d5676); font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums; } #hiredView .client-detail-tab.active .client-task-tab-count { background: var(--theme-raised, #e8eaf5); color: var(--workspace-accent); } #hiredView .client-detail-tab.active::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: var(--theme-action, var(--workspace-accent)); content: ""; } #hiredView .client-detail-tab:focus-visible, #hiredView .client-detail-panel:focus-visible { outline: 2px solid var(--workspace-accent); outline-offset: -2px; } #hiredView .client-detail-panels { min-width: 0; } #hiredView .client-detail-panel { min-width: 0; padding: 23px 26px 26px; } #hiredView .client-detail-panel[hidden] { display: none; } #hiredView .client-tasks-panel { display: grid; align-content: start; gap: 20px; } #hiredView .client-tasks-panel[hidden] { display: none; } #hiredView .client-tasks-contract-notice { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border: 1px solid var(--theme-warning-border, #ead9a7); border-radius: 9px; background: var(--theme-raised, #fff9e8); color: var(--theme-warning-text, #755d21); font-size: 12px; line-height: 1.45; } #hiredView .client-tasks-contract-notice i { flex: 0 0 auto; color: var(--theme-warning-text, #ad872e); } #hiredView .client-task-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } #hiredView .client-task-summary-card { display: grid; align-content: start; gap: 7px; min-width: 0; min-height: 88px; padding: 14px; border: 1px solid var(--workspace-line); border-radius: 9px; background: var(--theme-surface, #fff); box-shadow: 0 2px 8px rgba(26, 35, 64, .04); } #hiredView .client-task-summary-card > span { color: var(--workspace-muted); font-size: 10px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; } #hiredView .client-task-summary-card > strong { color: var(--workspace-ink); font-size: 18px; font-weight: 650; line-height: 1.25; font-variant-numeric: tabular-nums; } #hiredView .client-task-summary-card > strong.has-overdue { color: var(--theme-danger-text, #b33d43); } #hiredView .client-task-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; } #hiredView .client-task-filters { display: grid; grid-template-columns: minmax(160px, 1fr) 145px 145px; gap: 8px; min-width: 0; flex: 1; } #hiredView .client-task-search { position: relative; display: flex; align-items: center; min-width: 0; } #hiredView .client-task-search > i { position: absolute; left: 12px; color: var(--theme-muted, #8b92a0); font-size: 12px; pointer-events: none; } #hiredView .client-task-search input, #hiredView .client-task-filters select { width: 100%; min-width: 0; height: 40px; padding: 8px 11px; border: 1px solid var(--workspace-line); border-radius: 8px; background: var(--theme-surface, #fff); color: var(--workspace-ink); font: inherit; font-size: 12px; } #hiredView .client-task-search input { padding-left: 32px; } #hiredView .client-task-search input:focus, #hiredView .client-task-filters select:focus, #hiredView .client-task-generated-link:focus { border-color: var(--workspace-accent); outline: 2px solid rgba(79, 90, 163, .16); outline-offset: 1px; } #hiredView .client-task-new-button { min-height: 40px; flex: 0 0 auto; gap: 7px; border-color: var(--navy); border-radius: 8px; background: var(--theme-action, var(--navy)); } #hiredView .client-task-new-button:hover:not(:disabled) { background: var(--navy-deep); } #hiredView .client-task-new-button:disabled { cursor: not-allowed; opacity: .55; } #hiredView .client-task-groups { display: grid; gap: 12px; } #hiredView .client-task-group { min-width: 0; overflow: visible; border: 1px solid var(--workspace-line); border-radius: 9px; background: var(--theme-surface, #fff); } #hiredView .client-task-group > summary { display: flex; align-items: center; gap: 8px; min-height: 45px; padding: 10px 14px; color: var(--workspace-ink); font-size: 12px; font-weight: 650; cursor: pointer; list-style: none; } #hiredView .client-task-group > summary::-webkit-details-marker { display: none; } #hiredView .client-task-group > summary::before { display: grid; place-items: center; width: 14px; color: var(--theme-info-text, #858da0); font-family: "Font Awesome 6 Free"; font-size: 10px; font-weight: 900; content: "\f078"; transition: transform .15s ease; } #hiredView .client-task-group:not([open]) > summary::before { transform: rotate(-90deg); } #hiredView .client-task-group-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--theme-raised, #f1f2f7); color: var(--theme-info-text, #555e77); font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums; } #hiredView .client-task-group-rows { padding: 0 12px 8px; } #hiredView .client-task-row { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr) 78px 82px 34px 34px; align-items: center; gap: 10px; min-height: 64px; padding: 8px 9px; border-top: 1px solid var(--theme-border, #eef0f4); border-radius: 7px; transition: background .14s ease, opacity .14s ease; } #hiredView .client-task-row:hover { background: var(--theme-surface, #f8f9fc); } #hiredView .client-task-row.is-running { background: var(--theme-surface, #f5f6ff); box-shadow: inset 3px 0 0 #5965ad; } #hiredView .client-task-row.is-complete { opacity: .65; } #hiredView .client-task-complete-control { display: grid; place-items: center; width: 28px; height: 34px; cursor: pointer; } #hiredView .client-task-complete-control input { width: 16px; height: 16px; margin: 0; accent-color: #5865a9; cursor: pointer; } #hiredView .client-task-complete-control input:focus-visible { outline: 2px solid var(--workspace-accent); outline-offset: 3px; } #hiredView .client-task-row-main { display: grid; gap: 5px; min-width: 0; } #hiredView .client-task-row-title-line { display: flex; align-items: center; gap: 8px; min-width: 0; } #hiredView .client-task-title-button { min-width: 0; overflow: hidden; padding: 0; border: 0; background: none; color: var(--workspace-ink); font: inherit; font-size: 13px; font-weight: 650; text-align: left; text-overflow: ellipsis; white-space: nowrap; } #hiredView .client-task-title-button:hover { color: var(--workspace-accent); text-decoration: underline; } #hiredView .client-task-title-button:focus-visible { border-radius: 2px; outline: 2px solid var(--workspace-accent); outline-offset: 2px; } #hiredView .client-task-row.is-complete .client-task-title-button { color: var(--theme-muted, #777f8b); text-decoration: line-through; } #hiredView .client-task-category { max-width: 145px; flex: 0 1 auto; overflow: hidden; padding: 3px 7px; border: 1px solid var(--theme-border, #e4e7f0); border-radius: 999px; background: var(--theme-raised, #f7f8fb); color: var(--theme-info-text, #59627d); font-size: 9px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; } #hiredView .client-task-row-meta { display: flex; align-items: center; gap: 9px; min-width: 0; color: var(--workspace-muted); font-size: 10px; } #hiredView .client-task-priority { display: inline-flex; align-items: center; gap: 5px; color: var(--theme-info-text, #59627d); white-space: nowrap; } #hiredView .client-task-priority i { width: 7px; height: 7px; border-radius: 50%; background: var(--theme-action, #8991a2); } #hiredView .client-task-priority.priority-high i { background: var(--theme-danger-strong, #be5158); } #hiredView .client-task-priority.priority-low i { background: var(--theme-success-strong, #7e9b82); } #hiredView .client-task-due { display: inline-flex; align-items: center; gap: 4px; overflow: hidden; color: var(--workspace-muted); text-overflow: ellipsis; white-space: nowrap; } #hiredView .client-task-due.is-overdue { color: var(--theme-danger-text, #b33d43); font-weight: 650; } #hiredView .client-task-due.no-date { color: var(--theme-muted, #969ba6); } #hiredView .client-task-schedule-label { display: inline-flex; align-items: center; gap: 4px; color: var(--theme-info-text, #68738a); white-space: nowrap; } #hiredView .client-task-recurring { color: var(--theme-info-text, #6974b2); font-size: 10px; } #hiredView .client-task-status-text { overflow: hidden; color: var(--theme-muted, #777f8b); text-overflow: ellipsis; white-space: nowrap; } #hiredView .client-task-time-logged, #hiredView .client-task-live-clock { color: var(--theme-info-text, #59627d); font-size: 11px; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; } #hiredView .client-task-live-clock { display: none; color: var(--theme-info-text, #46518f); font-weight: 700; } #hiredView .client-task-live-clock.is-visible { display: block; } #hiredView .client-task-row.is-running .client-task-time-logged { display: none; } #hiredView .client-task-timer-button, #hiredView .client-task-menu-button { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--theme-border, #e2e5ed); border-radius: 8px; background: var(--theme-surface, #fff); color: var(--theme-info-text, #525d82); font-size: 11px; } #hiredView .client-task-timer-button:hover:not(:disabled), #hiredView .client-task-menu-button:hover { border-color: var(--theme-border, #c9cee4); background: var(--theme-raised, #f3f4fb); color: var(--navy); } #hiredView .client-task-timer-button:focus-visible, #hiredView .client-task-menu-button:focus-visible { outline: 2px solid var(--workspace-accent); outline-offset: 2px; } #hiredView .client-task-timer-button.is-running { border-color: var(--theme-border, #d6d9f1); background: var(--theme-raised, #ebedfc); color: var(--theme-info-text, #45518e); } #hiredView .client-task-timer-button:disabled { cursor: not-allowed; opacity: .4; } #hiredView .client-task-menu-wrap { position: relative; } #hiredView .client-task-menu { position: absolute; z-index: 5; top: calc(100% + 4px); right: 0; min-width: 132px; padding: 5px; border: 1px solid var(--workspace-line); border-radius: 8px; background: var(--theme-surface, #fff); box-shadow: 0 8px 20px rgba(26, 35, 64, .14); } #hiredView .client-task-menu button { display: block; width: 100%; padding: 8px 9px; border: 0; border-radius: 5px; background: transparent; color: var(--workspace-ink); font: inherit; font-size: 11px; text-align: left; } #hiredView .client-task-menu button:hover, #hiredView .client-task-menu button:focus-visible { background: var(--theme-raised, #f3f4f8); outline: 0; } #hiredView .client-task-menu button.is-danger { color: var(--theme-danger-text, #b33d43); } #hiredView .client-task-empty { display: grid; justify-items: center; gap: 9px; padding: 42px 20px; border: 1px dashed var(--workspace-line); border-radius: 10px; background: var(--theme-surface, #fff); text-align: center; } #hiredView .client-task-empty > i { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--theme-raised, #f0f1fa); color: var(--theme-info-text, #5965a8); font-size: 17px; } #hiredView .client-task-empty h3 { margin: 0; color: var(--workspace-ink); font-size: 15px; } #hiredView .client-task-empty p { margin: 0 0 4px; color: var(--workspace-muted); font-size: 12px; } #hiredView .client-task-empty .button { gap: 7px; } #hiredView .client-task-empty .button:disabled { cursor: not-allowed; opacity: .55; } .client-task-drawer-layer { position: fixed; z-index: 1000; inset: 0; visibility: hidden; } .client-task-drawer-layer.is-open, .client-task-drawer-layer.is-closing { visibility: visible; } .client-task-drawer-layer.is-closing { pointer-events: none; } .client-task-drawer-backdrop { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: rgba(20, 24, 20, .43); opacity: 0; transition: opacity 250ms ease-out; } .client-task-drawer-layer.is-open .client-task-drawer-backdrop { opacity: 1; } .client-task-drawer { position: absolute; z-index: 1; top: 0; right: 0; display: flex; flex-direction: column; width: 420px; max-width: 100vw; height: 100%; overflow: hidden; border: 1px solid var(--theme-border, #e6e8f0); border-right: 0; border-radius: 16px 0 0 16px; background: var(--theme-surface, #fff); color: var(--ink); box-shadow: -12px 0 36px rgba(17, 24, 39, .16); transform: translateX(100%); transition: transform 250ms ease-out; } .client-task-drawer-layer.is-open .client-task-drawer { transform: translateX(0); } .client-task-drawer-header { display: flex; align-items: flex-start; gap: 14px; min-height: 122px; padding: 26px 22px 20px; border-bottom: 1px solid var(--theme-border, #e6e8f0); } .client-task-drawer-header > div { min-width: 0; flex: 1; } .client-task-drawer-header .eyebrow { margin-bottom: 7px; } .client-task-drawer-header h2 { margin: 0; color: var(--navy); font-size: 23px; font-weight: 650; letter-spacing: -.02em; line-height: 1.25; } .client-task-drawer-header p:last-child { margin: 5px 0 0; color: var(--theme-muted, #6b7280); font-size: 13px; overflow-wrap: anywhere; } .client-task-drawer-header .icon-button { flex: 0 0 auto; } .client-task-drawer-form { display: flex; flex: 1; flex-direction: column; min-height: 0; } .client-task-action-view { display: flex; flex: 1; flex-direction: column; min-height: 0; } .client-task-action-view[hidden] { display: none; } .client-task-action-list { flex: 1; min-height: 0; } .client-task-drawer-fields { display: grid; align-content: start; gap: 15px; flex: 1; padding: 19px 22px; overflow-y: auto; } .client-task-drawer-fields .form-field { min-width: 0; margin: 0; } .client-task-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .client-task-schedule { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--theme-border, #dde3e8); border-radius: 10px; background: var(--theme-surface, #f8fafc); } .client-task-schedule-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .client-task-schedule-heading > div { display: grid; gap: 2px; } .client-task-schedule-heading span { color: var(--workspace-ink); font-size: 12px; font-weight: 700; } .client-task-schedule-heading small { color: var(--workspace-muted); font-size: 10px; } .client-task-schedule-heading strong { color: var(--theme-info-text, #3f4c8a); font-size: 10px; white-space: nowrap; } .client-task-schedule-summary { margin: 0; padding-top: 10px; border-top: 1px solid var(--theme-border, #e1e6eb); color: var(--workspace-muted); font-size: 11px; line-height: 1.45; } .client-task-schedule-summary strong { color: var(--workspace-ink); } .client-task-weekdays { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 0; padding: 0; border: 0; } .client-task-weekdays legend { width: 100%; margin-bottom: 7px; color: var(--workspace-ink); font-size: 11px; font-weight: 650; } .client-task-weekdays label { position: relative; cursor: pointer; } .client-task-weekdays input { position: absolute; opacity: 0; } .client-task-weekdays label span { display: grid; place-items: center; min-width: 40px; height: 32px; padding: 0 7px; border: 1px solid var(--workspace-line); border-radius: 7px; background: var(--theme-surface, #fff); color: var(--theme-muted, #5f6674); font-size: 10px; } .client-task-weekdays input:checked + span { border-color: var(--theme-border, #bfc5e5); background: var(--theme-raised, #eff0fb); color: var(--theme-info-text, #3f4c8a); font-weight: 650; } .client-task-weekdays input:focus-visible + span { outline: 2px solid var(--workspace-accent); outline-offset: 2px; } .client-task-repeat-preview { min-height: 16px; margin: -8px 0 0; color: var(--workspace-muted); font-size: 11px; } .client-task-time-editor { display: grid; gap: 12px; padding-top: 15px; border-top: 1px solid var(--workspace-line); } .client-task-time-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .client-task-time-heading h3 { margin: 0; color: var(--workspace-ink); font-size: 13px; } .client-task-time-heading strong { color: var(--theme-info-text, #59627d); font-size: 11px; } .client-task-manual-entry { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; align-items: end; } .client-task-manual-entry .form-field { font-size: 10px; } .client-task-manual-entry input { min-width: 0; } .client-task-manual-entry .button { grid-column: 1 / -1; justify-self: start; min-height: 34px; padding: 7px 10px; font-size: 11px; } .client-task-time-entry-list { display: grid; gap: 6px; } .client-task-time-entry { display: grid; grid-template-columns: minmax(0, 1fr) auto 30px; align-items: center; gap: 8px; min-height: 36px; padding: 5px 7px; border: 1px solid var(--theme-border, #edf0f4); border-radius: 7px; color: var(--theme-muted, #626a78); font-size: 10px; } .client-task-time-entry > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .client-task-time-entry > strong { color: var(--workspace-ink); font-size: 10px; white-space: nowrap; } .client-task-time-entry > button { display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 5px; background: transparent; color: var(--theme-danger-text, #8a5360); } .client-task-time-entry > button:hover, .client-task-time-entry > button:focus-visible { background: var(--theme-raised, #fff0f0); outline: 2px solid var(--theme-danger-border, #d8a4a8); } .client-task-time-empty { margin: 0; color: var(--workspace-muted); font-size: 11px; } .client-task-drawer-footer { position: sticky; bottom: 0; display: flex; justify-content: flex-end; gap: 9px; margin-top: auto; padding: 14px 20px max(14px, env(safe-area-inset-bottom)); border-top: 1px solid var(--theme-border, #e6e8f0); background: var(--theme-surface, #fff); } .client-task-drawer-footer .button-primary { border-color: var(--navy); background: var(--theme-action, var(--navy)); } .client-task-drawer-footer .button-primary:hover { border-color: var(--navy-deep); background: var(--navy-deep); } .client-task-drawer :focus-visible { outline-color: var(--workspace-accent); } #clientTaskDrawer { width: 440px; } #clientTaskDrawer .client-task-drawer-header { min-height: 76px; padding: 14px 18px; } #clientTaskDrawer .client-task-drawer-header .eyebrow { display: none; } #clientTaskDrawer .client-task-drawer-header h2 { font-size: 20px; } #clientTaskDrawer .client-task-drawer-header p:last-child { margin-top: 3px; font-size: 12px; } #clientTaskDrawer .client-task-drawer-fields { min-height: 0; gap: 10px; padding: 14px 18px; } #clientTaskDrawer .form-field { gap: 4px; font-size: 12px; line-height: 1.4; } #clientTaskDrawer .form-field :is(input, select) { min-height: 34px; height: 34px; padding: 6px 8px; font-size: 12px; } #clientTaskDrawer #clientTaskNotes { min-height: 56px; height: 56px; padding: 7px 8px; font-size: 12px; } #clientTaskDrawer .client-task-schedule { gap: 8px; padding: 10px; } #clientTaskDrawer .client-task-form-grid { gap: 10px; } #clientTaskDrawer .client-task-weekdays { margin-top: 0; } #clientTaskDrawer .client-task-weekdays legend { margin-bottom: 4px; } #clientTaskDrawer .client-task-weekdays label span { height: 28px; } #clientTaskDrawer .client-task-schedule-summary { padding-top: 7px; font-size: 10px; } #clientTaskDrawer .client-task-drawer-footer { padding: 10px 18px max(10px, env(safe-area-inset-bottom)); } body.client-task-drawer-open { overflow: hidden; } @media (max-width: 900px) { #hiredView .client-task-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } #hiredView .client-task-filters { grid-template-columns: minmax(140px, 1fr) 130px 130px; } } @media (max-width: 639px) { #hiredView .client-detail-tabs { gap: 16px; } #hiredView .client-tasks-panel { gap: 16px; } #hiredView .client-task-summary { grid-template-columns: minmax(0, 1fr); } #hiredView .client-task-toolbar { align-items: stretch; flex-direction: column; } #hiredView .client-task-filters { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } #hiredView .client-task-search { grid-column: 1 / -1; } #hiredView .client-task-new-button { align-self: flex-end; } #hiredView .client-task-row { grid-template-columns: 26px minmax(0, 1fr) 34px 34px; gap: 7px; min-height: 66px; padding: 7px 3px; } #hiredView .client-task-row-main { grid-column: 2; } #hiredView .client-task-time-logged { display: none; } #hiredView .client-task-live-clock { grid-column: 2; grid-row: 2; justify-self: start; } #hiredView .client-task-timer-button { grid-column: 3; grid-row: 1 / span 2; } #hiredView .client-task-menu-wrap { grid-column: 4; grid-row: 1 / span 2; } #hiredView .client-task-row.is-running .client-task-row-main { align-self: end; } #hiredView .client-task-due { max-width: 105px; } #hiredView .client-task-category { max-width: 115px; } .client-task-drawer { width: 100%; border-radius: 0; } .client-task-drawer-header { min-height: 112px; padding: 22px 18px 17px; } .client-task-drawer-fields { padding: 17px 18px; } .client-task-drawer-footer { padding-right: 18px; padding-left: 18px; } } @media (prefers-reduced-motion: reduce) { .client-task-drawer-backdrop, .client-task-drawer, #hiredView .client-task-group > summary::before { transition: none; } } #hiredView .client-detail-section-heading { margin-bottom: 16px; } #hiredView .client-detail-section-heading .eyebrow { margin-bottom: 3px; } #hiredView .client-detail-section-heading h3 { margin: 0; color: var(--workspace-ink); font-size: 17px; font-weight: 650; } #hiredView .client-overview-profile { margin: 10px 0 4px; } #hiredView .client-overview-profile-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 24px; padding: 16px 18px; border: 1px solid var(--theme-border, #dfe7e1); border-radius: 10px; background: linear-gradient(115deg, var(--theme-raised, #f7fbf8) 0%, var(--theme-surface, #fff) 58%); box-shadow: 0 2px 8px rgba(26, 35, 64, .04); } #hiredView .client-overview-profile-main { display: flex; align-items: center; gap: 12px; min-width: 0; } #hiredView .client-overview-profile-photo { position: relative; width: 48px; height: 48px; flex: 0 0 48px; } #hiredView .client-overview-profile-avatar { position: relative; display: grid; place-items: center; width: 48px; height: 48px; overflow: hidden; border-radius: 14px; background: var(--theme-info-strong, #1b2244); color: #fff; font-size: 14px; font-weight: 750; letter-spacing: .04em; } #hiredView .client-overview-profile-image { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; object-fit: cover; } #hiredView .client-overview-profile-upload { position: absolute; z-index: 2; right: -5px; bottom: -4px; display: grid; place-items: center; width: 23px; height: 23px; padding: 0; border: 2px solid var(--theme-border, #fff); border-radius: 50%; background: var(--theme-info-strong, #4f5aa3); color: #fff; font-size: 10px; box-shadow: 0 1px 3px rgba(16,24,40,.2); } #hiredView .client-overview-profile-upload:hover { background: var(--theme-info-strong, #3f498d); } #hiredView .client-overview-profile-upload:focus-visible { outline: 2px solid var(--theme-info-border, #4f5aa3); outline-offset: 2px; } #hiredView .client-overview-profile-upload:disabled { cursor: wait; opacity: .7; } #hiredView .client-overview-profile-identity { min-width: 0; } #hiredView .client-overview-profile-identity > span { display: block; margin-bottom: 3px; color: var(--workspace-muted); font-size: 9px; font-weight: 700; letter-spacing: .08em; } #hiredView .client-overview-profile-identity h3 { margin: 0; overflow: hidden; color: var(--workspace-ink); font-size: 17px; font-weight: 650; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; } #hiredView .client-overview-profile-identity p { margin: 3px 0 0; overflow: hidden; color: var(--workspace-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; } #hiredView .client-overview-profile-name { display: flex; align-items: center; gap: 8px; min-width: 0; } #hiredView .client-overview-profile-name h3 { min-width: 0; } #hiredView .client-overview-profile-name > .status-pill { flex-shrink: 0; } #hiredView .client-overview-profile-facts { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 7px 12px; } #hiredView .client-overview-profile-facts > a, #hiredView .client-overview-profile-facts > span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--theme-muted, #58655d); font-size: 11px; } #hiredView .client-overview-profile-facts > a { color: var(--workspace-accent); text-decoration: none; } #hiredView .client-overview-profile-facts > a:hover { text-decoration: underline; } #hiredView .client-overview-profile-facts i { color: var(--theme-muted, #718076); font-size: 10px; } #hiredView .client-overview-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0 0 22px; } #hiredView .client-overview-summary-item { display: grid; align-content: start; gap: 7px; min-width: 0; min-height: 98px; padding: 14px; border: 1px solid var(--workspace-line); border-radius: 9px; background: var(--theme-surface, #fff); box-shadow: 0 2px 8px rgba(26, 35, 64, .04); } #hiredView .client-overview-summary-item > span:first-child { color: var(--workspace-muted); font-size: 10px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; } #hiredView .client-overview-summary-item > strong { color: var(--workspace-ink); font-size: 15px; font-weight: 650; line-height: 1.35; overflow-wrap: anywhere; } #hiredView .client-overview-summary-item > small { color: var(--workspace-muted); font-size: 11px; line-height: 1.4; } #hiredView .client-overview-summary-item .client-onboarding-status { display: block; } #hiredView .client-overview-details { min-width: 0; } #hiredView #hiredDetailGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 0; align-items: start; } #hiredView #hiredDetailGrid .hired-detail-info-group { min-width: 0; padding: 17px; border: 1px solid var(--workspace-line); border-radius: 10px; background: var(--theme-surface, #fff); box-shadow: 0 2px 8px rgba(26, 35, 64, .04); } #hiredView #hiredDetailGrid .hired-detail-info-group h4 { margin: 0 0 14px; color: var(--workspace-ink); font-size: 13px; font-weight: 650; } #hiredView #hiredDetailGrid .hired-detail-info-group dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 9px; margin: 0; } #hiredView #hiredDetailGrid .hired-detail-info-group dl > div { min-width: 0; padding: 10px 11px; border: 1px solid var(--theme-border, #e9edf2); border-radius: 7px; background: var(--theme-raised, #f8f9fb); } #hiredView #hiredDetailGrid dt { display: block; margin: 0 0 5px; color: var(--workspace-muted); font-size: 10px; font-weight: 600; letter-spacing: .035em; text-transform: uppercase; } #hiredView #hiredDetailGrid dd { margin: 0; color: var(--workspace-ink); font-size: 13px; font-weight: 550; line-height: 1.45; overflow-wrap: anywhere; } #hiredView #hiredDetailGrid dd a { color: var(--workspace-accent); text-decoration: underline; cursor: pointer; } #hiredView #hiredDetailGrid dd a:hover { text-decoration: underline; } #hiredView #hiredDetailGrid .client-social-detail-links { display: flex; flex-wrap: wrap; gap: 6px; } #hiredView #hiredDetailGrid .client-social-detail-links a { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 5px 8px; border: 1px solid var(--theme-border, #dce2eb); border-radius: 999px; background: var(--theme-surface, #fff); font-size: 11px; font-weight: 650; line-height: 1; text-decoration: none; } #hiredView #hiredDetailGrid .client-social-detail-links a:hover { border-color: var(--theme-info-border, #b9c2d3); background: var(--theme-raised, #f2f4f8); text-decoration: none; } #hiredView #hiredDetailGrid .client-social-detail-links a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #hiredView #hiredDetailGrid .client-social-detail-links a i { flex: 0 0 auto; font-size: 9px; } #hiredView #hiredDetailGrid .client-detail-empty-copy { grid-column: 1 / -1; margin: 0; color: var(--workspace-muted); font-size: 12px; } #hiredView #hiredDetailGrid .hired-detail-timeline { grid-column: 1 / -1; } #hiredView #hiredDetailGrid .hired-detail-notes { grid-column: 1 / -1; } #hiredView #hiredDetailGrid .hired-detail-notes p { margin: 0; color: var(--workspace-ink); font-size: 13px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; } #hiredView .active-client-onboarding, #hiredView .client-contract-section, #hiredView .client-invoice-panel, #hiredView .active-document-box, #hiredView .client-email-history { margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; } #hiredView .active-client-onboarding-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; } #hiredView .active-client-onboarding-heading .eyebrow { margin-bottom: 3px; } #hiredView .active-client-onboarding-heading h3, #hiredView .active-document-box-head h3, #hiredView .invoice-send-heading h3 { margin: 0; color: var(--workspace-ink); font-size: 17px; font-weight: 650; } #hiredView .active-client-onboarding-parts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; } #hiredView .active-client-onboarding-part { min-width: 0; padding: 16px; border: 1px solid var(--workspace-line); border-radius: 10px; background: var(--theme-surface, #fff); } #hiredView .active-client-onboarding-part h4 { margin: 0 0 14px; color: var(--workspace-ink); font-size: 13px; font-weight: 650; } #hiredView .active-client-onboarding-details { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 0; } #hiredView .active-client-onboarding-details > div { min-width: 0; padding-bottom: 10px; border-bottom: 1px solid var(--theme-border, #edf0ed); } #hiredView .active-client-onboarding-details > div:last-child { padding-bottom: 0; border-bottom: 0; } #hiredView .active-client-onboarding-details dt { margin-bottom: 4px; color: var(--workspace-muted); font-size: 11px; font-weight: 500; } #hiredView .active-client-onboarding-details dd { margin: 0; color: var(--workspace-ink); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; white-space: pre-wrap; } #hiredView .active-client-onboarding-submitted { margin: 0 0 18px; color: var(--workspace-muted); font-size: 12px; } #hiredView .client-onboarding-status { display: inline-flex; align-items: center; width: fit-content; padding: 4px 8px; border-radius: 4px; background: var(--theme-raised, #f2f4f2); color: var(--theme-muted, #56615a); font-size: 11px; font-weight: 600; } #hiredView .client-onboarding-status.complete { background: var(--theme-raised, #e8f4eb); color: var(--theme-success-text, #33764e); } #hiredView .client-onboarding-status.empty { background: var(--theme-raised, #f5f1e9); color: var(--theme-warning-text, #80653d); } #hiredView .client-onboarding-status.error { background: var(--theme-raised, #faeeee); color: var(--theme-danger-text, #a75d61); } #hiredView .client-onboarding-loading { margin: 0; color: var(--workspace-muted); font-size: 13px; } #hiredView .client-onboarding-additional { margin-top: 18px; border-top: 1px solid var(--workspace-line); } #hiredView .client-onboarding-additional summary { padding: 13px 0; color: var(--workspace-accent); font-size: 12px; font-weight: 600; cursor: pointer; } #hiredView .client-onboarding-additional[open] summary { margin-bottom: 8px; } #hiredView .client-section-empty { padding: 18px 0; border-top: 1px solid var(--workspace-line); } #hiredView .client-section-empty h4 { margin: 0 0 5px; color: var(--workspace-ink); font-size: 14px; font-weight: 650; } #hiredView .client-section-empty p { margin: 0; color: var(--workspace-muted); font-size: 12px; line-height: 1.5; } #hiredView .client-section-empty .button { margin-top: 13px; } #hiredView .client-contract-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 11px; margin: 0; } #hiredView .client-contract-facts > div { display: grid; align-content: start; gap: 5px; min-width: 0; min-height: 62px; padding: 10px; border: 1px solid var(--workspace-line); border-radius: 7px; background: var(--theme-raised, #f8f9fb); } #hiredView .client-contract-facts dt { color: var(--workspace-muted); font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; } #hiredView .client-contract-facts dd { margin: 0; color: var(--workspace-ink); font-size: 12px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; } #hiredView .client-contract-facts .status-pill { margin: 0; } #hiredView #clientContractsPanel .client-contract-section, #hiredView #clientContractsPanel #clientDocumentBox { padding: 12px; border: 1px solid var(--workspace-line); border-radius: 11px; background: var(--theme-surface, #fff); box-shadow: 0 2px 9px rgba(26, 35, 64, .045); } #hiredView #clientContractsPanel #clientDocumentBox { margin-top: 10px; } #hiredView #clientContractsPanel .client-contract-section .client-detail-section-heading { margin-bottom: 9px; } #hiredView #clientContractsPanel :is(.client-detail-section-heading, .active-document-box-head) h3 { margin-top: 3px; font-size: 14px; } #hiredView #clientContractsPanel .eyebrow { margin-bottom: 3px; font-size: 9px; } #hiredView #clientContractsPanel .active-document-box-head { align-items: center; padding-bottom: 9px; } #hiredView #clientContractsPanel .document-version-section { margin: 0; padding: 9px 0 0; border: 0; } #hiredView #clientContractsPanel .active-document-row { grid-template-columns: 30px minmax(0, 1fr) auto; gap: 9px; padding: 8px 10px; border: 1px solid var(--workspace-line); border-radius: 7px; background: var(--theme-raised, #f8f9fb); } #hiredView #clientContractsPanel .active-document-row .doc-type-icon { width: 28px; height: 32px; border-radius: 6px; } #hiredView #clientContractsPanel .active-document-row strong { font-size: 12px; } #hiredView #clientContractsPanel .document-archive { margin-top: 12px; border: 1px solid var(--workspace-line); border-radius: 9px; background: var(--theme-surface, #fbfcfd); } #hiredView #clientContractsPanel .document-archive-head { padding: 8px 10px; } #hiredView #clientContractsPanel .document-archive-item { padding: 7px 10px; } #hiredView #clientContractsPanel .upload-empty-state { padding: 15px; border: 1px dashed var(--theme-border, #cbd3df); border-radius: 8px; background: var(--theme-raised, #f8f9fb); } #hiredView #clientContractsPanel .documents-folder-status { margin: 10px 2px 0; } #hiredView .invoice-send-heading { align-items: center; padding: 0 0 15px; border-bottom: 1px solid var(--workspace-line); } #hiredView .invoice-send-heading .eyebrow { margin-bottom: 3px; } #hiredView .invoice-sent-count { border-color: var(--workspace-line); border-radius: 4px; background: var(--theme-raised, #f6f8f6); color: var(--workspace-muted); font-size: 11px; font-weight: 550; } #hiredView .client-invoice-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 0; } #hiredView .client-invoice-actions p, #hiredView .client-invoice-notice { margin: 0; color: var(--workspace-muted); font-size: 12px; line-height: 1.5; } #hiredView .client-invoice-actions .button, #hiredView .client-section-empty .button { width: auto; flex: 0 0 auto; } #hiredView .client-invoice-list { gap: 0; border-top: 1px solid var(--workspace-line); } #hiredView .client-invoice-item { display: grid; grid-template-columns: minmax(150px, 1.1fr) minmax(170px, 1fr) minmax(120px, auto); gap: 16px; align-items: center; padding: 14px 8px; border: 0; border-bottom: 1px solid var(--workspace-line); border-radius: 0; background: transparent; } #hiredView .client-invoice-main, #hiredView .client-invoice-meta, #hiredView .client-invoice-date { display: grid; gap: 4px; min-width: 0; } #hiredView .client-invoice-main strong { color: var(--workspace-ink); font-size: 13px; font-weight: 650; } #hiredView .client-invoice-main span, #hiredView .client-invoice-meta span, #hiredView .client-invoice-date time { color: var(--workspace-muted); font-size: 12px; overflow-wrap: anywhere; } #hiredView .client-invoice-date { justify-items: end; } #hiredView .client-invoice-date .status-pill { margin: 0; } #hiredView .client-invoice-empty { margin: 0 !important; padding: 16px 0; color: var(--workspace-muted); font-size: 12px; } #hiredView .client-email-history-head { align-items: center; padding: 0 0 14px; border-bottom: 1px solid var(--workspace-line); background: transparent; } #hiredView .client-email-history-head .eyebrow { margin-bottom: 3px; } #hiredView .client-email-history-head h3 { margin: 0; color: var(--workspace-ink); font-size: 17px; font-weight: 650; } #hiredView .client-email-history-head > div > span { display: block; margin-top: 4px; color: var(--workspace-muted); font-size: 12px; } #hiredView .client-email-history-head > strong { color: var(--workspace-muted); font-size: 12px; font-weight: 550; } #hiredView .client-email-history-list { overflow: visible; } #hiredView .client-email-history-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 14px 8px; border-bottom-color: var(--workspace-line); } #hiredView .client-email-history-item:hover, #hiredView .client-email-history-item:focus-visible { background: var(--theme-raised, #f7f8f6); outline: 0; } #hiredView .client-email-history-item .client-email-history-copy { display: grid; gap: 4px; min-width: 0; } #hiredView .client-email-history-item .client-email-history-copy strong { color: var(--workspace-ink); font-size: 13px; font-weight: 600; } #hiredView .client-email-history-item .client-email-history-copy small { color: var(--workspace-muted); font-size: 11px; white-space: normal; } #hiredView .client-email-history-item .client-email-history-copy .client-email-history-preview { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #hiredView .client-email-history-item .client-email-history-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; } #hiredView .client-email-direction { padding: 3px 6px; border-radius: 3px; background: var(--theme-raised, #f2f4f2); color: var(--theme-muted, #56615a); font-size: 10px; font-weight: 600; } #hiredView .client-email-history-item time { color: var(--workspace-muted); font-size: 11px; white-space: nowrap; } #hiredView .client-email-history-list > p { padding: 17px 0; color: var(--workspace-muted); font-size: 12px; } .hired-email-history .email-row { grid-template-columns: 30px minmax(0, 1fr) 90px 90px; padding: 12px 14px; gap: 12px; border-bottom-color: #e9eeeb; } .hired-email-history .email-row.sent { padding-left: 11px; border-left-color: var(--navy); background: var(--theme-surface, #fbfcfb); } .hired-email-history .email-row:hover { background: var(--theme-raised, #f7faf8); } .hired-email-history .email-avatar { width: 30px; height: 30px; border-radius: 4px; background: var(--navy-soft); color: var(--navy); } .hired-email-history .email-from { font-size: 12px; } .hired-email-history .email-row-actions .email-actions-trigger { min-width: 0; width: 84px; } @media (max-width: 600px) { .hired-email-history .email-row { grid-template-columns: 28px minmax(0, 1fr) 64px; padding: 10px; gap: 4px 8px; align-items: start; } .hired-email-history .email-row.sent { padding-left: 7px; } .hired-email-history .email-avatar { grid-column: 1; grid-row: 1 / span 2; width: 28px; height: 28px; font-size: 10px; } .hired-email-history .email-row-content { grid-column: 2; grid-row: 1; } .hired-email-history .email-from, .hired-email-history .email-preview { white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .hired-email-history .email-date { grid-column: 2; grid-row: 2; display: flex; flex-wrap: wrap; gap: 2px 6px; margin-top: 1px; font-size: 9px; text-align: left; } .hired-email-history .email-time { font-size: 9px; } .hired-email-history .email-row-actions { grid-column: 3; grid-row: 1 / span 2; align-self: start; } .hired-email-history .email-row-actions .email-actions-trigger { width: 64px; padding: 6px 4px; font-size: 10px; } } #hiredView .client-detail-panel > .active-document-box { border-top: 0; } #hiredView .active-document-box-head { padding: 0 0 14px; border-bottom: 1px solid var(--workspace-line); } #hiredView .active-document-box-head .eyebrow { margin-bottom: 3px; } #hiredView .active-document-upload-button { min-height: 36px; padding: 7px 12px; font-size: 12px; } #hiredView .documents-folder-status { margin-top: 12px; padding: 0; border: 0; background: transparent; color: var(--workspace-muted); font-size: 11px; } #hiredView .upload-empty-state { padding: 20px 0; border: 0; border-bottom: 1px solid var(--workspace-line); border-radius: 0; background: transparent; } #hiredView .upload-empty-state h3 { color: var(--workspace-ink); font-size: 14px; } #hiredView .upload-empty-state p, #hiredView .upload-empty-state .doc-empty { color: var(--workspace-muted); font-size: 12px; } #hiredView .active-document-list { padding: 12px 0; } #hiredView .document-version-section { margin: 12px 0; padding: 12px 0; border: 0; border-bottom: 1px solid var(--workspace-line); border-radius: 0; background: transparent; } #hiredView .document-version-label { margin-bottom: 8px; padding: 0; background: transparent; color: var(--workspace-muted); font-size: 10px; letter-spacing: .04em; } #hiredView .active-document-row, #hiredView .newest-version-row, #hiredView .oldest-version-row, #hiredView .other-version-row { grid-template-columns: auto minmax(0, 1fr) auto; padding: 10px 0; border: 0; border-radius: 0; background: transparent; } #hiredView .active-document-name strong { color: var(--workspace-ink); font-size: 13px; } #hiredView .active-document-name small { color: var(--workspace-muted); font-size: 11px; } @media (max-width: 860px) { #hiredView .client-overview-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } #hiredView .client-contract-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { #hiredView .hired-detail-heading { align-items: flex-start; flex-direction: column; padding: 19px 18px 16px; } #hiredView .hired-detail-heading-actions { width: 100%; justify-content: flex-start; } #hiredView .client-detail-tabs { gap: 18px; padding: 0 18px; } #hiredView .client-detail-panel { padding: 19px 18px 22px; } #hiredView #hiredDetailGrid { grid-template-columns: minmax(0, 1fr); gap: 18px; } #hiredView #hiredDetailGrid .hired-detail-timeline, #hiredView #hiredDetailGrid .hired-detail-notes { grid-column: auto; } #hiredView #hiredDetailGrid .hired-detail-timeline dl { grid-template-columns: minmax(0, 1fr); } #hiredView .active-client-onboarding-details { grid-template-columns: minmax(0, 1fr); gap: 12px; } #hiredView #clientContractsPanel .client-contract-section, #hiredView #clientContractsPanel #clientDocumentBox { padding: 14px; } #hiredView .client-invoice-item { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 14px; } #hiredView .client-invoice-meta { grid-column: 1; } #hiredView .client-invoice-date { grid-column: 2; grid-row: 1 / span 2; } } @media (max-width: 420px) { #hiredView .client-overview-summary-item { padding: 11px 10px; } #hiredView .client-overview-summary-item > strong { font-size: 13px; } #hiredView .client-overview-summary-item > small { font-size: 10px; } #hiredView #hiredDetailGrid .hired-detail-info-group dl { grid-template-columns: minmax(0, 1fr); gap: 12px; } #hiredView .client-contract-facts { grid-template-columns: minmax(0, 1fr); } #hiredView .client-invoice-actions { align-items: flex-start; flex-direction: column; } #hiredView .client-invoice-actions .button { width: 100%; } #hiredView .client-email-history-item { grid-template-columns: minmax(0, 1fr); gap: 8px; } #hiredView .client-email-history-item .client-email-history-meta { flex-direction: row; align-items: center; justify-content: space-between; } } #dailyTaskView .daily-task-heading { align-items: center; gap: 20px; margin-bottom: 18px; padding: 0 0 18px; border-color: var(--workspace-line); } #dailyTaskView .daily-task-heading-copy { gap: 5px; } #dailyTaskView .daily-task-heading-copy .eyebrow { margin: 0; color: var(--theme-muted, #68756e); font-size: 10px; font-weight: 700; letter-spacing: .08em; } #dailyTaskView .daily-task-heading-copy h2 { margin: 0; color: var(--workspace-ink); font-size: 25px; font-weight: 650; line-height: 1.25; } #dailyTaskView .daily-task-heading-copy > p:last-child { color: var(--workspace-muted); font-size: 12px; } #dailyTaskView .daily-task-heading-actions { display: flex; align-items: flex-end; gap: 10px; } #dailyTaskView .daily-task-heading-actions .daily-task-date-field { min-width: 170px; } #dailyTaskView .daily-task-heading-actions .button { min-height: 42px; white-space: nowrap; } #dailyTaskView .daily-task-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 18px; border-top: 1px solid var(--workspace-line); border-bottom: 1px solid var(--workspace-line); } #dailyTaskView .daily-task-summary > div { display: grid; gap: 4px; min-width: 0; padding: 11px 16px; } #dailyTaskView .daily-task-summary > div + div { border-left: 1px solid var(--workspace-line); } #dailyTaskView .daily-task-summary span { color: var(--workspace-muted); font-size: 11px; } #dailyTaskView .daily-task-summary strong { color: var(--workspace-ink); font-size: 18px; font-weight: 650; font-variant-numeric: tabular-nums; } #dailyTaskView .daily-task-summary .daily-task-summary-overdue strong { color: var(--theme-danger-text, #935d5d); } #dailyTaskView .daily-task-layout { margin-top: 0; gap: 16px; } #dailyTaskView .daily-task-list-panel, #dailyTaskView .daily-task-history-panel { padding: 20px 22px; border-radius: 5px; } #dailyTaskView .daily-task-history-panel { margin-top: 0; } #dailyTaskView .daily-task-section-heading h3 { margin: 2px 0 0; color: var(--workspace-ink); font-size: 16px; font-weight: 650; } #dailyTaskView .daily-task-section-heading .eyebrow { margin: 0; color: var(--theme-muted, #68756e); font-size: 10px; font-weight: 700; letter-spacing: .08em; } #dailyTaskView .daily-task-list-heading { align-items: flex-end; gap: 14px; padding-bottom: 12px; border-color: var(--workspace-line); } #dailyTaskView .daily-task-plan-actions { gap: 12px; } #dailyTaskView .daily-task-count { color: var(--workspace-muted); font-size: 11px; font-weight: 550; white-space: nowrap; } #dailyTaskView .daily-task-filter-field { display: flex; align-items: center; gap: 7px; color: var(--workspace-muted); font-size: 11px; } #dailyTaskView .daily-task-filter-field select { min-height: 34px; padding: 5px 27px 5px 9px; border: 1px solid var(--workspace-line); border-radius: 4px; background: var(--theme-surface, #fff); color: var(--workspace-ink); font-size: 11px; } #dailyTaskView .daily-task-item { grid-template-columns: 34px minmax(0, 1fr) 34px; align-items: center; gap: 12px; padding: 14px 0; border-color: var(--theme-border, #e9eeeb); } #dailyTaskView .daily-task-row-open { grid-column: 2; grid-template-columns: minmax(0, 1fr); gap: 5px; } #dailyTaskView .daily-task-item-copy { gap: 5px; width: 100%; } #dailyTaskView .daily-task-item-topline { align-items: center; gap: 10px; } #dailyTaskView .daily-task-item-title { margin: 0; color: var(--workspace-ink); font-size: 13px; font-weight: 600; line-height: 1.45; } #dailyTaskView .daily-task-row-open:hover .daily-task-item-title { color: var(--workspace-accent); text-decoration: none; } #dailyTaskView .daily-task-item.is-complete .daily-task-item-title { color: var(--theme-muted, #777973); text-decoration: line-through; } #dailyTaskView .daily-task-status { max-width: 48%; padding: 3px 7px; border-radius: 3px; background: var(--theme-raised, #f2f4f2); color: var(--theme-muted, #56615a); font-size: 10px; font-weight: 550; line-height: 1.35; white-space: normal; text-align: right; } #dailyTaskView .daily-task-status.is-complete { background: var(--theme-raised, #edf3ee); color: var(--theme-success-text, #506b55); } #dailyTaskView .daily-task-status.is-due-today { background: var(--theme-raised, #f2f4f2); color: var(--theme-muted, #56615a); } #dailyTaskView .daily-task-status.is-overdue { background: var(--theme-raised, #f8eeee); color: var(--theme-danger-text, #925b5d); } #dailyTaskView .daily-task-item-meta { gap: 5px 10px; color: var(--workspace-muted); font-size: 10px; } #dailyTaskView .daily-task-type { padding: 2px 6px; border-radius: 3px; font-size: 9px; font-weight: 600; } #dailyTaskView .daily-task-meta-detail { padding: 0; border: 0; background: transparent; } #dailyTaskView .daily-task-item-notes { margin-top: 2px; color: var(--workspace-muted); font-size: 11px; } #dailyTaskView .daily-task-item-bottomline { min-height: 0; } #dailyTaskView .daily-task-checklist-progress { padding: 0; background: transparent; color: var(--workspace-muted); font-size: 10px; } #dailyTaskView .daily-task-item-copy time { color: var(--workspace-muted); font-size: 10px; } #dailyTaskView .daily-task-action, #dailyTaskView .daily-task-delete { width: 30px; height: 30px; min-width: 30px; border: 1px solid var(--workspace-line); border-radius: 50%; background: var(--theme-surface, #fff); color: var(--workspace-muted); font-size: 11px; } #dailyTaskView .daily-task-action:hover { border-color: var(--theme-border, #9eafa1); background: var(--theme-raised, #f5f8f5); color: var(--theme-success-text, #4d6b52); } #dailyTaskView .daily-task-item.is-complete .daily-task-action { border-color: var(--theme-border, #cbd9cd); background: var(--theme-raised, #f0f5f0); color: var(--theme-success-text, #4d6b52); } #dailyTaskView .daily-task-delete { border-color: transparent; background: transparent; color: var(--theme-muted, #8b7777); } #dailyTaskView .daily-task-delete:hover { border-color: var(--theme-border, #eadcdb); background: var(--theme-surface, #fff8f7); color: var(--theme-danger-text, #8c3f45); } #dailyTaskView .daily-task-empty { min-height: 150px; justify-items: start; align-content: center; padding: 24px 0; text-align: left; } #dailyTaskView .daily-task-empty strong { margin: 0; color: var(--workspace-ink); font-size: 13px; font-weight: 600; } #dailyTaskView .daily-task-empty p, #dailyTaskView .daily-task-history-empty { color: var(--workspace-muted); font-size: 11px; } #dailyTaskView .daily-task-history-heading { align-items: flex-start; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--workspace-line); } #dailyTaskView .daily-task-history-heading > div { gap: 4px; } #dailyTaskView .daily-task-history-heading > div > p:last-child { color: var(--workspace-muted); font-size: 11px; } #dailyTaskView .daily-task-history-controls { align-items: flex-end; margin: 13px 0 4px; } #dailyTaskView .daily-task-history-shortcuts .button { min-height: 34px; padding: 7px 9px; font-size: 10px; } #dailyTaskView .daily-task-history-list .daily-task-item { padding: 11px 0; } @media (max-width: 720px) { #dailyTaskView .daily-task-heading { align-items: flex-start; flex-direction: column; } #dailyTaskView .daily-task-heading-actions { width: 100%; align-items: flex-end; } #dailyTaskView .daily-task-heading-actions .daily-task-date-field { flex: 1; } #dailyTaskView .daily-task-list-panel, #dailyTaskView .daily-task-history-panel { padding: 16px; } #dailyTaskView .daily-task-history-controls { align-items: flex-start; flex-direction: column; } } @media (max-width: 480px) { #dailyTaskView .daily-task-heading-actions { flex-wrap: wrap; } #dailyTaskView .daily-task-heading-actions .daily-task-date-field { min-width: 150px; } #dailyTaskView .daily-task-heading-actions .button { flex: 1; } #dailyTaskView .daily-task-summary > div { padding: 9px 10px; } #dailyTaskView .daily-task-summary span { font-size: 10px; } #dailyTaskView .daily-task-summary strong { font-size: 16px; } #dailyTaskView .daily-task-list-heading { align-items: flex-start; flex-direction: column; } #dailyTaskView .daily-task-plan-actions { width: 100%; justify-content: space-between; } #dailyTaskView .daily-task-item { grid-template-columns: 30px minmax(0, 1fr) 30px; gap: 8px; } #dailyTaskView .daily-task-item-topline { align-items: flex-start; flex-direction: column; gap: 5px; } #dailyTaskView .daily-task-status { max-width: 100%; text-align: left; } #dailyTaskView .daily-task-history-heading { align-items: flex-start; flex-direction: column; } #dailyTaskView .daily-task-history-shortcuts { width: 100%; } } /* Final density and hierarchy pass for the application dashboard */ body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .topbar-title-area { gap: 16px; flex: 1; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .dashboard-switcher { gap: 2px; padding: 3px; border: 1px solid var(--theme-border, #e6e8f0); border-radius: 9px; background: var(--theme-raised, #eef0f6); } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .dashboard-switcher-tab { min-height: 29px; padding: 5px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--theme-muted, #6b7280); font-size: 12px; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .dashboard-switcher-tab:hover { background: var(--theme-surface, #fff); color: var(--theme-info-text, #1b2244); } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .dashboard-switcher-tab.active { background: var(--theme-info-strong, #1b2244); color: #fff; box-shadow: 0 1px 2px rgba(16,24,40,.12); } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .local-indicator { gap: 0; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .local-indicator > span:first-child { display: none; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .content { max-width: 1400px; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) #applicationDashboardPanel { grid-template-rows: minmax(44px, auto) 88px 190px minmax(0, 1fr); gap: 16px; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) #applicationDashboardPanel > .interview-calendar-panel { grid-column: 9 / -1; grid-row: 2 / 5; align-self: start; width: 100%; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) #applicationDashboardPanel > .recent-panel { grid-column: 1 / 9; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .weekly-report-banner { padding: 6px 16px; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .weekly-report-banner .eyebrow { display: none; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .weekly-report-banner h2 { font-size: 16px; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .weekly-report-banner p:not(.eyebrow) { overflow: visible; font-size: 12px; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .weekly-report-banner .text-button { flex: 0 0 auto; margin: 0; padding: 5px 2px; color: var(--theme-info-text, #1b2244); font-size: 12px; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) #applicationDashboardPanel .stat-card { padding: 12px 14px; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) #applicationDashboardPanel .stat-card > p { display: none; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) #applicationDashboardPanel .stat-label { color: var(--theme-muted, #6b7280); font-size: 13px; font-weight: 550; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) #applicationDashboardPanel .stat-card-primary .stat-label { color: #e3e7f4; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) #applicationDashboardPanel .stat-card strong { margin: auto 0 0; font-size: 30px; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .panel-heading .eyebrow { display: none; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .panel-heading h2 { margin: 0; font-size: 16px; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .platform-panel, body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .status-panel { padding: 16px; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .platform-list { gap: 11px; margin-top: 12px; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .platform-track { height: 6px; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .status-donut-row { gap: 14px; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .donut { width: 110px; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .legend-item { font-size: 12px; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .interview-calendar-panel { padding: 16px; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .interview-calendar-panel .panel-heading h2 { font-size: 16px; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .interview-calendar { grid-template-rows: 20px repeat(6, 36px); width: min(100%, 294px); flex: 0 0 auto; align-self: center; margin-top: 8px; border: 0; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .calendar-weekday { min-height: 20px; padding: 0; border: 0; color: var(--theme-muted, #6b7280); font-size: 11px; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .calendar-day, body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .calendar-day.other-month { display: flex; align-items: flex-start; justify-content: center; min-width: 0; min-height: 0; height: 36px; padding: 0; border: 0; background: transparent; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .calendar-day { flex-direction: column; align-items: center; justify-content: flex-start; height: 36px; padding: 0; overflow: hidden; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .calendar-day-number { width: 26px; height: 26px; flex: 0 0 26px; font-size: 12px; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .calendar-day.today .calendar-day-number { border-radius: 50%; background: var(--theme-info-strong, #1b2244); color: #fff; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .calendar-interviews { display: block; width: 100%; height: 10px; margin: 0; overflow: hidden; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .calendar-interview { overflow: hidden; padding: 0 2px; border: 0; background: transparent; color: var(--theme-muted, #6b7280); font-size: 12px; font-weight: 500; text-overflow: ellipsis; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .recent-panel { padding: 16px; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .recent-panel .panel-heading { padding-bottom: 0; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .table-wrap { flex: 0 0 auto; min-height: 0; margin: 8px 0 0; overflow: visible; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .recent-panel table { height: auto; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .recent-panel th { padding: 5px 8px 7px; font-size: 12px; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .recent-panel td { height: 44px; padding: 5px 8px; font-size: 13px; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .recent-panel .table-client { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .recent-panel .table-client small { display: inline; margin-left: 8px; font-size: 12px; font-weight: 450; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .recent-panel .status-pill { padding: 3px 7px; background: var(--theme-raised, #e8f2ec); color: var(--theme-success-text, #365e49); font-size: 12px; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .recent-panel .icon-button { width: 30px; height: 30px; } @media (max-width: 1099px) { body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .dashboard-switcher { padding: 3px; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) #applicationDashboardPanel { gap: 16px; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) #applicationDashboardPanel > .interview-calendar-panel { grid-column: 1; grid-row: auto; width: auto; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) #applicationDashboardPanel > .recent-panel { grid-column: 1; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .interview-calendar-panel { min-height: 0; } } @media (max-width: 720px) { body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .topbar-title-area { gap: 10px; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .dashboard-switcher { max-width: calc(100vw - 150px); overflow-x: auto; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .weekly-report-banner { align-items: center; flex-direction: row; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .weekly-report-banner > div { align-items: baseline; flex-direction: row; } } /* Compact Active Clients workspace */ body:has(#hiredView.active) { min-height: 100vh; background: var(--theme-raised, #f6f7fb); color: var(--theme-text, #111827); } body:has(#hiredView.active) .content { width: 100%; max-width: 1400px; margin: 0 auto; padding: 12px 24px 24px; } body:has(#hiredView.active) .topbar { min-height: 56px; height: 56px; margin: 0 0 12px; border: 0; } body:has(#hiredView.active) .topbar-title-area { display: flex; align-items: center; gap: 9px; } body:has(#hiredView.active) .topbar-copy { display: flex; align-items: baseline; gap: 9px; } body:has(#hiredView.active) .topbar-copy > .eyebrow { display: none; } body:has(#hiredView.active) .topbar h1 { margin: 0; color: var(--theme-text, #111827); font-size: 24px; font-weight: 650; letter-spacing: -.02em; } body:has(#hiredView.active) .hired-header-count:not([hidden]) { display: inline-flex; align-items: center; color: var(--theme-muted, #6b7280); font-size: 14px; font-weight: 550; font-variant-numeric: tabular-nums; } body:has(#hiredView.active) .page-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; min-width: 0; } body:has(#hiredView.active) .page-title-row h1 { margin: 0; } body:has(#hiredView.active) .hired-header-summary:not([hidden]) { display: inline-flex; align-items: center; gap: 8px; } body:has(#hiredView.active) .hired-header-summary > span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border: 1px solid var(--theme-border, #e1e5ee); border-radius: 999px; background: var(--theme-surface, #fff); color: var(--theme-info-text, #697386); font-size: 11px; white-space: nowrap; } body:has(#hiredView.active) .hired-header-summary strong { color: var(--theme-info-text, #252d4f); font-size: 13px; font-variant-numeric: tabular-nums; } body:has(#hiredView.active):has(#hiredView.client-focused) .hired-header-summary { display: none; } body:has(#hiredView.active) .local-indicator { gap: 0; color: var(--theme-muted, #6b7280); font-size: 12px; } body:has(#hiredView.active) .local-indicator > span:first-child { display: none; } body:has(#hiredView.active) #hiredView { min-width: 0; } body:has(#hiredView.active) #hiredView > .toolbar { display: grid; grid-template-columns: minmax(180px, 1fr) 140px 140px; gap: 12px; align-items: center; margin: 0 0 16px; } body:has(#hiredView.active) #hiredView > .toolbar > .search-field, body:has(#hiredView.active) #hiredView > .toolbar > .date-filter, body:has(#hiredView.active) #hiredView > .toolbar > .select-field { min-width: 0; height: 40px; } body:has(#hiredView.active) #hiredView > .toolbar .search-field { border-color: var(--theme-border, #e6e8f0); border-radius: 8px; } body:has(#hiredView.active) #hiredView > .toolbar .search-field input { width: 100%; min-width: 0; height: auto; min-height: 0; border: 0; border-radius: 0; background: transparent; color: var(--theme-info-text, #374151); font-size: 13px; } body:has(#hiredView.active) #hiredView > .toolbar .search-field:focus-within { border-color: var(--theme-success-border, #718c78); box-shadow: 0 0 0 3px rgba(93,128,105,.12); } body:has(#hiredView.active) #hiredView > .toolbar .select-field select, body:has(#hiredView.active) #hiredView > .toolbar .date-filter input { width: 100%; height: 40px; min-height: 40px; border-color: var(--theme-border, #e6e8f0); border-radius: 8px; background: var(--theme-surface, #fff); color: var(--theme-info-text, #374151); font-size: 13px; } body:has(#hiredView.active) .hired-summary { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; } body:has(#hiredView.active) .hired-summary > div { display: flex; align-items: center; gap: 10px; min-width: 150px; padding: 10px 14px; border: 1px solid var(--theme-border, #e6e8f0); border-radius: 10px; background: var(--theme-surface, #fff); box-shadow: 0 1px 2px rgba(16,24,40,.04); } body:has(#hiredView.active) .hired-summary span { color: var(--theme-muted, #6b7280); font-size: 12px; } body:has(#hiredView.active) .hired-summary strong { color: var(--theme-info-text, #252d4f); font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; } body:has(#hiredView.active) #hiredView.client-focused > .toolbar, body:has(#hiredView.active) #hiredView.client-focused > .hired-summary, body:has(#hiredView.active) #hiredView.client-focused > .hired-panel { display: none; } body:has(#hiredView.active) .hired-panel { min-width: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; } body:has(#hiredView.active) .hired-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); align-items: start; gap: 16px; } body:has(#hiredView.active) .hired-ended-heading { grid-column: 1 / -1; margin: 4px 0 -4px; color: var(--theme-muted, #6b7280); font-size: 13px; font-weight: 600; } body:has(#hiredView.active) .hired-card { display: grid; grid-template-rows: auto auto auto auto auto; align-content: start; gap: 8px; min-width: 0; min-height: 150px; padding: 14px 15px; border: 1px solid var(--theme-border, #e6e8f0); border-left: 3px solid var(--theme-success-border, #7fa08f); border-radius: 12px; background: var(--theme-surface, #fff); box-shadow: 0 1px 2px rgba(16,24,40,.05); cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; } body:has(#hiredView.active) .hired-card:hover, body:has(#hiredView.active) .hired-card:focus-visible { border-color: var(--theme-border, #cbd2dc); border-left-color: #7fa08f; background: var(--theme-surface, #fff); box-shadow: 0 4px 12px rgba(16,24,40,.08); outline: 0; transform: translateY(-1px); } body:has(#hiredView.active) .hired-card.contract-ended-card { border-left-color: #d9777e; background: var(--theme-surface, #fff); } body:has(#hiredView.active) .hired-card.contract-ended-card:hover, body:has(#hiredView.active) .hired-card.contract-ended-card:focus-visible { border-left-color: #d9777e; } body:has(#hiredView.active) .hired-card.contract-ended-card .client-card-title, body:has(#hiredView.active) .hired-card.contract-ended-card .client-card-subtitle, body:has(#hiredView.active) .hired-card.contract-ended-card .hired-card-contract, body:has(#hiredView.active) .hired-card.contract-ended-card .hired-card-email-line, body:has(#hiredView.active) .hired-card.contract-ended-card .hired-card-contact, body:has(#hiredView.active) .hired-card.contract-ended-card .hired-card-footer { opacity: .75; } body:has(#hiredView.active) .hired-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; } body:has(#hiredView.active) .hired-card .client-card-title { display: block; min-width: 0; margin: 0; overflow: hidden; color: var(--theme-text, #111827); font-size: 15px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; } body:has(#hiredView.active) .hired-card .client-contract-status { flex: 0 0 auto; width: auto; padding: 4px 8px; border-radius: 999px; background: var(--theme-raised, #e7f4ec); color: var(--theme-success-text, #1f6b45); font-size: 12px; font-weight: 600; line-height: 1.2; } body:has(#hiredView.active) .hired-card .client-contract-status.contract-ending-soon { background: var(--theme-warning-soft, #fff3dc); color: var(--theme-warning-text, #8a5a00); } body:has(#hiredView.active) .hired-card .client-contract-status.contract-ended { background: var(--theme-raised, #fde8e8); color: var(--theme-danger-text, #a12b2b); } body:has(#hiredView.active) .hired-card .client-contract-status.not-active { background: var(--theme-raised, #f1f2f5); color: var(--theme-muted, #626b78); } body:has(#hiredView.active) .hired-card .client-card-subtitle { display: block; margin: 0; color: var(--theme-muted, #6b7280); font-size: 13px; line-height: 1.35; } body:has(#hiredView.active) .hired-card-contract { min-width: 0; overflow: hidden; color: var(--theme-muted, #4b5563); font-size: 12px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; } body:has(#hiredView.active) .hired-card-contact { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--theme-muted, #6b7280); font-size: 12px; line-height: 1.4; } body:has(#hiredView.active) .hired-card-email { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body:has(#hiredView.active) .hired-card-website { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; max-width: 48%; margin: 0; color: var(--theme-info-text, #1a2340); font-size: 12px; text-decoration: none; } body:has(#hiredView.active) .hired-card-website span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body:has(#hiredView.active) .hired-card-website:hover { text-decoration: underline; } body:has(#hiredView.active) .hired-card .client-online-status { display: inline-block; flex: 0 0 auto; max-width: 100%; overflow: hidden; color: var(--theme-muted, #6b7280); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; } body:has(#hiredView.active) .hired-card .hired-card-timezone { display: inline-flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; } body:has(#hiredView.active) .hired-card .client-online-status.status-dot-only { width: 8px; height: 8px; border-radius: 50%; overflow: visible; color: transparent; font-size: 0; } body:has(#hiredView.active) .hired-card .client-online-status.status-dot-only.online { background: var(--theme-success-strong, #7fa08f); } body:has(#hiredView.active) .hired-card .client-online-status.status-dot-only.offline { background: var(--theme-hover, #cbd2dc); } body:has(#hiredView.active) .hired-card .hired-card-timezone-separator { color: var(--theme-subtle, #9ca3af); } body:has(#hiredView.active) .hired-card-footer { display: flex; align-items: center; gap: 11px; min-width: 0; margin-top: 2px; color: var(--theme-muted, #6b7280); font-size: 12px; } body:has(#hiredView.active) .hired-card-files, body:has(#hiredView.active) .hired-card-match { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; color: var(--theme-muted, #6b7280); font-size: 12px; } body:has(#hiredView.active) .hired-card-match .match-badge { min-width: 20px; height: 20px; padding: 0 5px; border: 1px solid var(--theme-border, #e6e8f0); border-radius: 10px; background: var(--theme-raised, #f6f7fb); color: var(--theme-info-text, #374151); font-size: 12px; font-weight: 600; } body:has(#hiredView.active) .hired-card .view-details-label { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 0 auto; color: var(--theme-info-text, #1a2340); font-size: 12px; font-weight: 600; white-space: nowrap; } body:has(#hiredView.active) .hired-card-arrow, body:has(#hiredView.active) .hired-card-meta { display: none; } .client-avatar-crop-modal { width: min(420px, calc(100vw - 28px)); overflow: visible; border: 1px solid var(--theme-border, #e6e8f0); background: var(--theme-surface, #fff); } .client-avatar-crop-shell { display: grid; gap: 14px; padding: 22px; } .client-avatar-crop-shell .modal-heading { margin: 0; } .client-avatar-crop-help { margin: 0; color: var(--theme-muted, #6b7280); font-size: 13px; line-height: 1.45; } .client-avatar-crop-viewport { position: relative; width: min(320px, 100%); aspect-ratio: 1; justify-self: center; overflow: hidden; border-radius: 12px; background: var(--theme-raised, #eef0f5); cursor: grab; touch-action: none; user-select: none; } .client-avatar-crop-viewport:active { cursor: grabbing; } .client-avatar-crop-viewport img { position: absolute; display: block; max-width: none; pointer-events: none; user-select: none; } .client-avatar-crop-mask { position: absolute; inset: 0; border: 2px solid rgba(255,255,255,.95); border-radius: 50%; box-shadow: 0 0 0 999px rgba(17,24,39,.28); pointer-events: none; } .client-avatar-zoom-label { display: flex; align-items: center; gap: 12px; color: var(--theme-info-text, #374151); font-size: 13px; font-weight: 600; } .client-avatar-zoom-label input { flex: 1; min-width: 0; accent-color: #4f5aa3; } .client-avatar-crop-status { min-height: 18px; margin: 0; color: var(--theme-muted, #6b7280); font-size: 12px; } .client-avatar-crop-shell .modal-actions { margin: 0; } .client-avatar-upload-modal { width: min(430px, calc(100vw - 28px)); overflow: visible; border: 1px solid var(--theme-border, #e6e8f0); background: var(--theme-surface, #fff); } .client-avatar-upload-shell { display: grid; gap: 14px; padding: 22px; } .client-avatar-upload-shell .modal-heading { margin: 0; } .client-avatar-upload-help { margin: 0; color: var(--theme-muted, #6b7280); font-size: 13px; line-height: 1.45; } .client-avatar-upload-preview { position: relative; display: grid; place-items: center; width: min(230px, 100%); aspect-ratio: 1; justify-self: center; overflow: hidden; border: 1px dashed var(--theme-border, #cbd3df); border-radius: 18px; background: linear-gradient(145deg, var(--theme-raised, #f5f7fb), var(--theme-raised, #edf1f7)); color: var(--theme-info-text, #718096); cursor: pointer; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease; } .client-avatar-upload-preview:hover, .client-avatar-upload-preview:focus-visible { border-color: var(--theme-info-border, #4f5aa3); background: linear-gradient(145deg, var(--theme-raised, #f0f2ff), var(--theme-raised, #e9edfb)); box-shadow: 0 0 0 3px rgba(79,90,163,.12); outline: none; } .client-avatar-upload-preview img { width: 100%; height: 100%; object-fit: cover; } .client-avatar-upload-placeholder { display: grid; gap: 8px; justify-items: center; padding: 20px; text-align: center; font-size: 13px; } .client-avatar-upload-placeholder i { font-size: 28px; color: var(--theme-info-text, #4f5aa3); } .client-avatar-upload-file { min-height: 18px; margin: 0; color: var(--theme-info-text, #667085); font-size: 12px; text-align: center; overflow-wrap: anywhere; } .client-avatar-upload-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; margin: 0; } .client-avatar-upload-actions .button, .client-avatar-upload-actions .danger-button { min-width: 0; padding-inline: 10px; white-space: nowrap; } .client-avatar-upload-actions #continueClientAvatarUpload { margin-left: auto; } @keyframes client-avatar-success-pop { 0% { opacity: 0; transform: scale(.72); } 70% { transform: scale(1.08); } 100% { opacity: 1; transform: scale(1); } } .email-result-badge.success { animation: client-avatar-success-pop .45s ease-out both; } @media (max-width: 460px) { .client-avatar-upload-actions { flex-wrap: wrap; } .client-avatar-upload-actions #continueClientAvatarUpload { margin-left: auto; } } @media (max-width: 640px) { body:has(#hiredView.active) .content { padding: 8px 16px 24px; } body:has(#hiredView.active) .topbar { align-items: center; } body:has(#hiredView.active) .topbar h1 { font-size: 21px; } body:has(#hiredView.active) .topbar-actions { gap: 8px; } body:has(#hiredView.active) .hired-list { grid-template-columns: minmax(0, 1fr); } } body:has(#hiredView.active) .hired-card { display: flex; min-height: 222px; padding: 17px; gap: 12px; border-left: 1px solid var(--theme-border, #e6e8f0); } body:has(#hiredView.active) .hired-card.contract-ended-card { border-left-color: #e6e8f0; } body:has(#hiredView.active) .hired-card:hover, body:has(#hiredView.active) .hired-card:focus-visible { border-color: var(--theme-border, #c7ccef); box-shadow: 0 5px 14px rgba(27,34,68,.08); transform: translateY(-1px); } body:has(#hiredView.active) .hired-card.contract-ended-card:hover, body:has(#hiredView.active) .hired-card.contract-ended-card:focus-visible { border-left-color: #e6e8f0; } body:has(#hiredView.active) .hired-card-heading { align-items: flex-start; gap: 8px; } body:has(#hiredView.active) .hired-card-profile { display: flex; align-items: center; gap: 11px; min-width: 0; } body:has(#hiredView.active) .hired-card-avatar { position: relative; display: grid; place-items: center; width: 46px; height: 46px; flex: 0 0 46px; overflow: visible; border: 1px solid hsl(calc(238deg + var(--avatar-tone) * 4deg) 55% 88%); border-radius: 50%; background: hsl(calc(238deg + var(--avatar-tone) * 4deg) 75% 96%); color: hsl(calc(238deg + var(--avatar-tone) * 4deg) 42% 42%); font-size: 14px; font-weight: 700; letter-spacing: .02em; } body:has(#hiredView.active) .hired-card-avatar-image { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; border: 0; border-radius: inherit; object-fit: cover; } body:has(#hiredView.active) .hired-card-identity { display: grid; align-content: center; gap: 4px; min-width: 0; } body:has(#hiredView.active) .hired-card .client-card-title { font-size: 16px; font-weight: 650; } body:has(#hiredView.active) .hired-card .client-card-subtitle { font-size: 13px; } body:has(#hiredView.active) .hired-card .client-contract-status { margin-top: 1px; padding: 5px 9px; } body:has(#hiredView.active) .hired-card-email-line { display: block; min-width: 0; } body:has(#hiredView.active) .hired-card-email { display: block; color: var(--theme-muted, #6b7280); font-size: 12px; } body:has(#hiredView.active) .hired-card-contact { justify-content: space-between; gap: 8px; } body:has(#hiredView.active) .hired-card-company { min-width: 0; overflow: hidden; color: var(--theme-muted, #4b5563); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; } body:has(#hiredView.active) .hired-card-contract { display: flex; align-items: center; gap: 7px; color: var(--theme-muted, #4b5563); } body:has(#hiredView.active) .hired-card-contract > i { color: var(--theme-info-text, #7a82c5); } body:has(#hiredView.active) .hired-card-footer { min-height: 34px; margin-top: auto; padding-top: 9px; border-top: 1px solid var(--theme-border, #f0f1f6); } body:has(#hiredView.active) .hired-card .view-details-label { min-height: 30px; gap: 8px; color: var(--theme-info-text, #4f5aa3); font-size: 12px; font-weight: 650; } body:has(#hiredView.active) .hired-card .view-details-label i { font-size: 11px; transition: transform .15s ease; } body:has(#hiredView.active) .hired-card:hover .view-details-label i { transform: translateX(2px); } body:has(#hiredView.active) .hired-card.contract-ended-card .client-contract-status { opacity: 1; } body:has(#hiredView.active) .hired-list { grid-template-columns: repeat(3, minmax(0, 360px)); justify-content: start; } @media (max-width: 1240px) { body:has(#hiredView.active) #hiredView > .toolbar { grid-template-columns: minmax(180px, 1fr) 140px 150px; } body:has(#hiredView.active) .hired-list { grid-template-columns: repeat(2, minmax(0, 360px)); } } @media (max-width: 760px) { body:has(#hiredView.active) #hiredView > .toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } body:has(#hiredView.active) #hiredView > .toolbar > .search-field { grid-column: 1 / -1; } body:has(#hiredView.active) .hired-summary { gap: 8px; } body:has(#hiredView.active) .hired-summary > div { flex: 1; justify-content: space-between; min-width: 0; } body:has(#hiredView.active) .hired-list { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 640px) { } @media (min-width: 1001px) { body:has(#dailyTaskView.active) { height: 100dvh; overflow: hidden; background: var(--theme-raised, #f6f7fb); color: var(--theme-text, #111827); } body:has(#dailyTaskView.active) .app-shell { height: 100dvh; min-height: 0; } body:has(#dailyTaskView.active) .content { display: grid; grid-template-rows: 56px minmax(0, 1fr); gap: 12px; width: 100%; height: 100dvh; min-width: 0; min-height: 0; max-width: 1400px; margin: 0 auto; padding: 12px 24px 16px; overflow: hidden; } body:has(#dailyTaskView.active) .topbar { min-height: 0; height: 56px; margin: 0; border: 0; } body:has(#dailyTaskView.active) .topbar-title-area { gap: 9px; } body:has(#dailyTaskView.active) .topbar-copy { display: flex; align-items: baseline; gap: 10px; } body:has(#dailyTaskView.active) .topbar-copy > .eyebrow { display: none; } body:has(#dailyTaskView.active) .topbar h1 { margin: 0; color: var(--theme-text, #111827); font-size: 24px; font-weight: 650; letter-spacing: -.02em; white-space: nowrap; } body:has(#dailyTaskView.active) .daily-task-header-date { margin: 0; color: var(--theme-muted, #6b7280); font-size: 13px; white-space: nowrap; } body:has(#dailyTaskView.active) .topbar-actions { flex: 0 0 auto; gap: 12px; } body:has(#dailyTaskView.active) .local-indicator { color: var(--theme-muted, #6b7280); font-size: 12px; white-space: nowrap; } body:has(#dailyTaskView.active) .notification-button { width: 36px; height: 36px; border-color: var(--theme-border, #e6e8f0); border-radius: 9px; background: var(--theme-surface, #fff); } body:has(#dailyTaskView.active) #dailyTaskView.active { display: grid; grid-template-rows: minmax(0, 1fr); gap: 14px; min-width: 0; min-height: 0; overflow: hidden; } body:has(#dailyTaskView.active) .daily-task-toolbar { display: flex; align-items: center; gap: 12px; min-width: 0; } body:has(#dailyTaskView.active) .daily-task-date-field { display: block; min-width: 0; width: 140px; color: var(--theme-muted, #6b7280); font-size: 12px; font-weight: 400; } body:has(#dailyTaskView.active) .daily-task-date-field input { width: 100%; height: 40px; min-height: 40px; padding: 7px 9px; border: 1px solid var(--theme-border, #e6e8f0); border-radius: 8px; background: var(--theme-surface, #fff); color: var(--theme-info-text, #374151); font-size: 13px; } body:has(#dailyTaskView.active) .daily-task-filter-field { display: flex; align-items: center; gap: 7px; color: var(--theme-muted, #6b7280); font-size: 12px; } body:has(#dailyTaskView.active) .daily-task-filter-field select { height: 40px; min-height: 40px; padding: 6px 30px 6px 10px; border: 1px solid var(--theme-border, #e6e8f0); border-radius: 8px; background: var(--theme-surface, #fff); color: var(--theme-info-text, #374151); font-size: 13px; } body:has(#dailyTaskView.active) #openDailyTaskAddModal { min-height: 40px; margin-left: auto; padding: 9px 14px; border-radius: 8px; background: var(--theme-info-strong, #1b2244); font-size: 13px; } body:has(#dailyTaskView.active) .daily-task-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; min-width: 0; margin: 0; border: 0; } body:has(#dailyTaskView.active) .daily-task-summary > div, body:has(#dailyTaskView.active) .daily-task-summary-overdue { display: flex; align-items: center; justify-content: space-between; min-width: 0; padding: 12px 16px; border: 1px solid var(--theme-border, #e6e8f0); border-radius: 12px; background: var(--theme-surface, #fff); box-shadow: 0 1px 2px rgba(16,24,40,.05); } body:has(#dailyTaskView.active) .daily-task-summary > div + div { border-left: 1px solid var(--theme-border, #e6e8f0); } body:has(#dailyTaskView.active) .daily-task-summary span { color: var(--theme-muted, #6b7280); font-size: 12px; } body:has(#dailyTaskView.active) .daily-task-summary strong { color: var(--theme-text, #111827); font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; } body:has(#dailyTaskView.active) .daily-task-summary-overdue { width: 100%; cursor: pointer; text-align: left; } body:has(#dailyTaskView.active) .daily-task-summary-overdue strong { color: var(--theme-muted, #6b7280); } body:has(#dailyTaskView.active) .daily-task-summary-overdue.has-overdue strong { color: var(--theme-violet-text, #7a2a44); } body:has(#dailyTaskView.active) .daily-task-summary-overdue:hover, body:has(#dailyTaskView.active) .daily-task-summary-overdue.is-active { border-color: var(--theme-violet-border, #d8b7c1); background: var(--theme-surface, #fffafb); } body:has(#dailyTaskView.active) .daily-task-layout { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: stretch; gap: 16px; min-height: 0; margin: 0; } body:has(#dailyTaskView.active) .daily-task-list-panel, body:has(#dailyTaskView.active) .daily-task-history-panel { display: flex; flex-direction: column; min-height: 0; min-width: 0; margin: 0; padding: 16px; border: 1px solid var(--theme-border, #e6e8f0); border-radius: 12px; background: var(--theme-surface, #fff); box-shadow: 0 1px 2px rgba(16,24,40,.05); } body:has(#dailyTaskView.active) .daily-task-section-heading { flex: 0 0 auto; gap: 10px; min-height: 24px; padding: 0 0 12px; border: 0; } body:has(#dailyTaskView.active) .daily-task-section-heading h3 { margin: 0; color: var(--theme-text, #111827); font-size: 16px; font-weight: 650; } body:has(#dailyTaskView.active) .daily-task-count { color: var(--theme-muted, #6b7280); font-size: 12px; font-weight: 500; } body:has(#dailyTaskView.active) .daily-task-list, body:has(#dailyTaskView.active) .daily-task-history-list { display: block; flex: 1 1 auto; min-height: 0; margin: 0; overflow: auto; } body:has(#dailyTaskView.active) .daily-task-overdue-heading { margin: 0; padding: 8px 0 4px; color: var(--theme-violet-text, #7a2a44); font-size: 12px; font-weight: 650; } body:has(#dailyTaskView.active) .daily-task-item { padding: 10px 0; } body:has(#dailyTaskView.active) .daily-task-item-title { font-size: 13px; } body:has(#dailyTaskView.active) .daily-task-status, body:has(#dailyTaskView.active) .daily-task-item-meta, body:has(#dailyTaskView.active) .daily-task-type, body:has(#dailyTaskView.active) .daily-task-item-copy time, body:has(#dailyTaskView.active) .daily-task-item-notes, body:has(#dailyTaskView.active) .daily-task-checklist-progress { font-size: 12px; } body:has(#dailyTaskView.active) .daily-task-empty, body:has(#dailyTaskView.active) .daily-task-history-empty { display: grid; place-items: center; min-height: 0; height: 100%; margin: 0; padding: 16px; color: var(--theme-muted, #6b7280); font-size: 13px; font-weight: 400; text-align: center; } body:has(#dailyTaskView.active) .daily-task-history-heading { align-items: center; padding-bottom: 12px; border: 0; } body:has(#dailyTaskView.active) .daily-task-history-controls { display: flex; align-items: center; flex: 0 0 auto; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; } body:has(#dailyTaskView.active) .daily-task-history-controls .daily-task-date-field { width: 140px; } body:has(#dailyTaskView.active) .daily-task-history-shortcuts { display: flex; gap: 6px; } body:has(#dailyTaskView.active) .daily-task-history-shortcuts .button { min-height: 34px; padding: 7px 9px; border: 1px solid var(--theme-border, #e6e8f0); border-radius: 8px; background: var(--theme-surface, #fff); color: var(--theme-muted, #4b5563); font-size: 12px; } } /* Shared design-system primitives for the dashboard, pipeline, email, settings, reports, and exports. */ :where(button, input, select, textarea, a):focus-visible { outline: 2px solid var(--color-info); outline-offset: 2px; } .button { min-height: 40px; padding: 9px 15px; border-radius: var(--radius-md); font-size: var(--type-body); font-weight: 650; transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, color .16s ease; } .button-primary { background: var(--theme-action, var(--color-primary)); box-shadow: var(--shadow-sm); } .button-primary:hover { background: var(--theme-action-hover, var(--color-primary-hover)); transform: none; } .button-secondary { border-color: var(--color-border); background: var(--color-surface); color: var(--color-text-primary); } .button-secondary:hover { border-color: var(--color-neutral-400); background: var(--color-neutral-50); } .button-ghost { border-color: transparent; background: transparent; color: var(--color-primary); } .button-ghost:hover { background: var(--color-primary-soft); } .button-danger { border-color: var(--color-danger); background: var(--color-danger); color: #fff; } .button-danger:hover { background: var(--theme-danger-strong, #922b33); } .button:disabled, .button[aria-disabled="true"] { cursor: not-allowed; opacity: .55; transform: none; } .panel, .stat-card, .weekly-report-metric { border-color: var(--color-border); border-radius: var(--radius-lg); background-color: var(--color-surface); box-shadow: var(--shadow-sm); } .panel-heading h2, .email-intro h2 { color: var(--color-text-primary); font-size: var(--type-section-title); } .stat-card { padding: var(--space-6); } .stat-card strong { font-size: var(--type-stat); font-variant-numeric: tabular-nums; } .stat-label { color: var(--color-text-secondary); font-size: var(--type-caption); } .weekly-report-metric { padding: var(--space-4); } .weekly-report-metric strong { color: var(--color-primary); font-variant-numeric: tabular-nums; } .status-pill, .badge { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 24px; padding: 3px 9px; border: 1px solid transparent; border-radius: 999px; font-size: var(--type-caption); font-weight: 650; line-height: 1.2; white-space: nowrap; } .status-pill.ongoing, .status-pill.responded { color: var(--status-replied); background: var(--theme-raised, #e8f4f2); } .status-pill.applied { color: var(--status-applied); background: var(--theme-raised, #eaf1f9); } .status-pill.to-apply { color: var(--status-to-apply); background: var(--theme-raised, #eff0f2); } .status-pill.to-proceed { color: var(--color-info); background: var(--color-info-soft); } .status-pill.interview { color: var(--status-interview); background: var(--theme-raised, #f1edf7); } .status-pill.offer, .status-pill.active-client, .status-pill.contract-active { color: var(--status-offer); background: var(--color-success-soft); } .status-pill.not-selected, .status-pill.rejected, .status-pill.contract-ended { color: var(--status-rejected); background: var(--color-danger-soft); } .status-pill.ghosted { color: var(--status-ghosted); background: var(--theme-raised, #f6f0e7); } .status-pill.on-hold { color: var(--color-warning); background: var(--color-warning-soft); } input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea { border-color: var(--color-border); border-radius: var(--radius-sm); color: var(--color-text-primary); font-size: var(--type-body); } input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus, select:focus, textarea:focus { border-color: var(--color-info); box-shadow: 0 0 0 3px rgba(47, 111, 159, .14); outline: 0; } input::placeholder, textarea::placeholder { color: var(--color-neutral-600); opacity: .8; } table { border-color: var(--color-border); } th { color: var(--color-text-secondary); font-size: var(--type-caption); letter-spacing: .04em; } td { border-color: var(--color-border); color: var(--color-text-secondary); font-size: var(--type-body); } tbody tr:hover { background: var(--color-neutral-50); } dialog.modal { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); color: var(--color-text-primary); box-shadow: var(--shadow-lg); } dialog.modal::backdrop { background: rgba(18, 26, 51, .48); } .toast { border-radius: var(--radius-md); box-shadow: var(--shadow-md); } .weekly-report-export-document { border-color: var(--color-border); border-radius: var(--radius-lg); color: var(--color-text-primary); font-family: var(--font-ui); } .weekly-report-export-header h1, .weekly-report-export-metric strong { color: var(--color-primary); } .weekly-report-export-badge { border-color: var(--color-info-soft); background: var(--color-info-soft); color: var(--color-primary); } .weekly-report-export-metric { border-color: var(--color-border); border-radius: var(--radius-md); background: var(--color-neutral-50); } .weekly-report-export-activity { border-color: var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); } .weekly-report-export-chart .weekly-report-bar i { background: var(--theme-action, var(--color-primary)); } .weekly-report-export-chart .weekly-report-bar:nth-child(2) i { background: var(--status-applied); } .weekly-report-export-chart .weekly-report-bar:nth-child(3) i { background: var(--status-replied); } .weekly-report-modal { width: min(1180px, calc(100% - 32px)); max-width: none; max-height: min(92vh, 1000px); padding: 0; overflow: auto; overscroll-behavior: contain; scroll-behavior: smooth; } .weekly-report-modal > .weekly-report-form { box-sizing: border-box; padding: 0; } .weekly-report-header { position: sticky; z-index: 12; top: 0; display: flex; align-items: center; gap: var(--space-3); min-height: 82px; padding: var(--space-3) var(--space-6); border-bottom: 1px solid var(--color-border); background: var(--color-surface); } .weekly-report-header-title { min-width: 145px; margin-right: auto; } .weekly-report-header-title .eyebrow { margin-bottom: 3px; } .weekly-report-header-title h2 { margin: 0; color: var(--color-primary); font-size: 20px; line-height: 1.2; } .weekly-report-header .weekly-report-date { margin-top: 3px; font-size: var(--type-caption); white-space: nowrap; } .weekly-report-status { flex: 0 0 auto; padding: 5px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; } .weekly-report-status.in-progress { background: var(--color-info-soft); color: var(--color-info); } .weekly-report-status.final { background: var(--color-success-soft); color: var(--color-success); } .weekly-report-status.past { background: var(--color-neutral-100); color: var(--color-neutral-600); } .weekly-report-week-controls { display: flex; align-items: center; gap: 5px; } .weekly-report-week-controls .icon-button { width: 34px; height: 36px; border-radius: var(--radius-sm); font-size: 22px; } .weekly-report-week-controls select { max-width: 205px; min-height: 38px; font-size: 12px; } .weekly-report-week-controls .button { min-height: 38px; padding: 7px 10px; white-space: nowrap; } .weekly-report-download-menu { position: relative; flex: 0 0 auto; } .weekly-report-download-options { position: absolute; z-index: 20; top: calc(100% + 6px); right: 0; display: grid; min-width: 220px; padding: var(--space-1); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-md); } .weekly-report-download-options[hidden] { display: none; } .weekly-report-download-options button { padding: 9px 10px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--color-text-primary); font-size: 12px; text-align: left; } .weekly-report-download-options button:hover, .weekly-report-download-options button:focus-visible { background: var(--color-neutral-100); } .weekly-report-pdf-loading::before { display: inline-block; width: 12px; height: 12px; margin-right: 7px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; vertical-align: -2px; content: ""; animation: weekly-report-pdf-spin .7s linear infinite; } @keyframes weekly-report-pdf-spin { to { transform: rotate(360deg); } } .weekly-report-close { flex: 0 0 34px; width: 34px; height: 36px; border-radius: var(--radius-sm); font-size: 20px; } .weekly-report-nav { position: sticky; z-index: 11; top: var(--weekly-report-header-height, 82px); display: flex; gap: 4px; overflow-x: auto; padding: 8px var(--space-6); border-bottom: 1px solid var(--color-border); background: var(--theme-translucent-surface, rgba(255, 255, 255, .97)); scrollbar-width: thin; } .weekly-report-nav button { flex: 0 0 auto; padding: 8px 11px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--color-text-secondary); font-size: 12px; font-weight: 650; } .weekly-report-nav button:hover { background: var(--color-neutral-100); color: var(--color-primary); } .weekly-report-nav button[aria-current="location"] { background: var(--color-primary-soft); color: var(--color-primary); } .weekly-report-content { padding: var(--space-6); } .weekly-report-section { scroll-margin-top: 144px; padding-bottom: var(--space-8); } .weekly-report-section + .weekly-report-section { padding-top: var(--space-6); border-top: 1px solid var(--color-border); } .weekly-report-section-title { margin-bottom: var(--space-4); } .weekly-report-section-title .eyebrow { margin-bottom: var(--space-1); } .weekly-report-section-title h3 { margin: 0; color: var(--color-primary); font-size: 20px; } .weekly-report-section-heading { margin-bottom: var(--space-3); } .weekly-report-section-heading h4 { margin: 0; color: var(--color-text-primary); font-size: var(--type-card-title); } .weekly-report-metrics { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-2); margin: 0 0 var(--space-4); } .weekly-report-stat-card { display: grid; align-content: start; gap: var(--space-2); min-width: 0; padding: 14px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-sm); } .weekly-report-stat-card > span:first-child { color: var(--color-text-secondary); font-size: 12px; font-weight: 600; } .weekly-report-stat-card > strong { color: var(--color-primary); font-size: 28px; line-height: 1.1; font-variant-numeric: tabular-nums; } .weekly-report-change { font-size: 11px; font-weight: 650; } .weekly-report-change.positive { color: var(--color-success); } .weekly-report-change.negative { color: var(--color-danger); } .weekly-report-change.neutral { color: var(--color-text-secondary); } .weekly-report-overview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-4); } .weekly-report-card { min-width: 0; padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-sm); } .weekly-report-card .weekly-report-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); } .weekly-report-goals { min-height: 140px; } .weekly-report-empty { padding: var(--space-4); border: 1px dashed var(--color-border); border-radius: var(--radius-sm); color: var(--color-text-secondary); font-size: 13px; line-height: 1.5; } .weekly-report-daily-chart { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); align-items: end; gap: var(--space-2); min-height: 145px; padding-top: var(--space-2); } .weekly-report-day { display: grid; grid-template-rows: 1fr auto auto; justify-items: center; gap: 5px; min-width: 0; height: 130px; color: var(--color-text-secondary); font-size: 11px; } .weekly-report-day-track { display: flex; align-items: end; width: 100%; height: 90px; border-radius: 5px 5px 0 0; background: var(--color-neutral-100); overflow: hidden; } .weekly-report-day-track i { display: block; width: 100%; min-height: 0; border-radius: 5px 5px 0 0; background: var(--theme-action, var(--color-primary)); } .weekly-report-day strong { color: var(--color-text-primary); font-variant-numeric: tabular-nums; } .weekly-report-chart { display: grid; grid-template-columns: 1fr; align-items: center; gap: var(--space-2); min-height: 145px; margin: 0; padding: var(--space-2) 0; border: 0; } .weekly-report-stage { display: grid; gap: 5px; } .weekly-report-stage > div { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); } .weekly-report-stage > div strong { color: var(--color-text-primary); font-size: 13px; font-variant-numeric: tabular-nums; } .weekly-report-stage > i { display: block; height: 7px; border-radius: 999px; background: var(--stage-color, var(--theme-action, var(--color-primary))); } .weekly-report-source-list { display: grid; gap: var(--space-3); min-height: 145px; align-content: start; padding-top: var(--space-2); } .weekly-report-source { display: grid; grid-template-columns: minmax(72px, 1fr) minmax(70px, 1.5fr) auto auto; align-items: center; gap: var(--space-2); min-width: 0; font-size: 11px; } .weekly-report-source > span { overflow: hidden; color: var(--color-text-primary); text-overflow: ellipsis; white-space: nowrap; } .weekly-report-source > i { height: 7px; border-radius: 99px; background: var(--color-neutral-100); overflow: hidden; } .weekly-report-source > i b { display: block; height: 100%; border-radius: inherit; background: var(--status-applied); } .weekly-report-source strong { font-variant-numeric: tabular-nums; } .weekly-report-source small { color: var(--color-text-secondary); white-space: nowrap; } .weekly-report-detail-section { margin-top: var(--space-6); } .weekly-report-detail-section > .weekly-report-section-heading { display: flex; align-items: baseline; justify-content: space-between; } .weekly-report-detail-section > .weekly-report-section-heading h4 { margin: 0; font-size: var(--type-card-title); } .weekly-report-table-wrap { width: 100%; margin-top: var(--space-2); overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-md); } .weekly-report-table { width: 100%; min-width: 0; border-collapse: separate; border-spacing: 0; background: var(--color-surface); } .weekly-report-table th, .weekly-report-table td { padding: 10px 12px; border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: top; font-size: 12px; } .weekly-report-table th { position: sticky; z-index: 1; top: 0; background: var(--color-neutral-100); color: var(--color-text-secondary); font-size: 11px; } .weekly-report-table td { color: var(--color-text-primary); } .weekly-report-table tbody tr:nth-child(even) { background: var(--theme-surface, #fdfcfb); } .weekly-report-table tbody tr:hover { background: var(--color-info-soft); } .weekly-report-table tbody tr:last-child td { border-bottom: 0; } .weekly-report-table .numeric { text-align: right; font-variant-numeric: tabular-nums; } .weekly-report-empty-cell { padding: var(--space-6) !important; color: var(--color-text-secondary) !important; text-align: center !important; } .weekly-report-muted { color: var(--color-text-secondary); } .weekly-report-filter-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0; } .weekly-report-filter-chips button { padding: 6px 10px; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface); color: var(--color-text-secondary); font-size: 11px; } .weekly-report-filter-chips button.active { border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-primary); } .weekly-report-email-list { gap: var(--space-2); margin: var(--space-3) 0; } .weekly-report-email-list span { background: var(--color-info-soft); color: var(--color-primary); font-size: 11px; } .weekly-report-notes-list { display: grid; gap: var(--space-3); } .weekly-report-note { padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); } .weekly-report-note > div { display: flex; justify-content: space-between; gap: var(--space-3); color: var(--color-text-primary); font-size: 13px; } .weekly-report-note > div span { color: var(--color-text-secondary); font-size: 12px; } .weekly-report-note p { margin: var(--space-2) 0 0; color: var(--color-text-secondary); font-size: 13px; line-height: 1.5; white-space: pre-wrap; } .weekly-report-content::after { display: block; height: min(55vh, 500px); min-height: 320px; content: ""; } @media (max-width: 900px) { .weekly-report-header { flex-wrap: wrap; } .weekly-report-header-title { flex: 1 1 100%; } .weekly-report-nav { top: var(--weekly-report-header-height, 126px); } .weekly-report-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 600px) { .weekly-report-modal { width: 100%; max-height: 100vh; height: 100vh; margin: 0; border-radius: 0; } .weekly-report-header { gap: var(--space-2); padding: var(--space-3); } .weekly-report-header-title { flex-basis: calc(100% - 42px); } .weekly-report-status { order: 2; } .weekly-report-week-controls { order: 3; width: 100%; flex-wrap: nowrap; gap: 4px; } .weekly-report-week-controls .icon-button { flex: 0 0 30px; width: 30px; min-width: 30px; } .weekly-report-week-controls select { flex: 1 1 auto; min-width: 0; max-width: none; } .weekly-report-week-controls .button { flex: 0 1 auto; min-width: 0; padding: 6px 7px; font-size: 11px; } .weekly-report-download-menu { order: 2; margin-left: auto; } .weekly-report-close { position: absolute; top: 12px; right: 12px; } .weekly-report-nav { top: var(--weekly-report-header-height, 178px); padding-inline: var(--space-3); } .weekly-report-content { padding: var(--space-3); } .weekly-report-content::after { display: block; height: min(50vh, 420px); min-height: 280px; content: ""; } .weekly-report-section { scroll-margin-top: 236px; } .weekly-report-overview-grid { grid-template-columns: 1fr; gap: var(--space-3); } .weekly-report-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .weekly-report-source { grid-template-columns: minmax(60px, 1fr) minmax(44px, 1fr) auto; } .weekly-report-source small { grid-column: 1 / -1; } .weekly-report-table { min-width: 560px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .weekly-report-pdf-loading::before { animation: none; } } .nav-count.is-zero { color: rgba(242,243,248,.64); background: rgba(255,255,255,.055); } .nav-link.active .nav-count.is-zero { color: rgba(255,255,255,.75); background: rgba(255,255,255,.1); } .global-search-trigger { min-height: 36px; gap: 8px; } .global-search-trigger kbd, .quick-search-input kbd, .quick-search-result kbd, .shortcut-list kbd { border: 1px solid var(--color-border); border-radius: 5px; padding: 2px 6px; background: var(--color-neutral-50); color: var(--color-text-secondary); font: 11px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; } .quick-search-modal { width: min(620px, calc(100vw - 24px)); max-height: min(640px, calc(100dvh - 32px)); overflow: hidden; } .quick-search-shell { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; max-height: inherit; } .quick-search-input { display: flex; align-items: center; gap: 12px; padding: 17px 20px; border-bottom: 1px solid var(--color-border); color: var(--color-text-secondary); } .quick-search-input input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--color-text-primary); font-size: 16px; background: transparent; } .quick-search-input input:focus-visible { outline: 0; } .quick-search-results { max-height: min(460px, 60dvh); overflow-y: auto; padding: 8px; } .quick-search-result { display: flex; width: 100%; align-items: center; gap: 12px; padding: 11px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--color-text-secondary); text-align: left; } .quick-search-result:hover, .quick-search-result:focus-visible { outline: 0; background: var(--color-neutral-100); } .quick-search-result > i { width: 18px; color: var(--color-primary); text-align: center; } .quick-search-result > span { display: grid; flex: 1; gap: 3px; min-width: 0; } .quick-search-result strong { color: var(--color-text-primary); font-size: 13px; } .quick-search-result small, .quick-search-footer { color: var(--color-text-secondary); font-size: 12px; } .quick-search-footer { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 10px 16px; border-top: 1px solid var(--color-border); } .quick-search-empty { padding: 22px; color: var(--color-text-secondary); text-align: center; } .shortcuts-modal { padding: 20px; } .shortcut-list { display: grid; gap: 0; margin: 12px 0 0; } .shortcut-list > div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-top: 1px solid var(--color-border); } .shortcut-list dt { color: var(--color-text-primary); } .shortcut-list dd { display: flex; gap: 4px; margin: 0; } .today-focus-items { display: flex; align-items: center; justify-content: center; gap: 12px; min-width: 0; } .today-focus-items > span { display: grid; gap: 1px; color: var(--color-text-secondary); font-size: 11px; white-space: nowrap; } .today-focus-items > span > strong { color: var(--color-text-primary); font-size: 14px; font-variant-numeric: tabular-nums; } .today-focus-items .dashboard-weekly-goal { display: grid; grid-template-columns: minmax(0, 1fr) auto; min-width: 190px; max-width: 250px; align-content: center; gap: 4px 10px; padding-left: 12px; border-left: 1px solid var(--color-border); } .dashboard-weekly-goal > strong { grid-column: 1; line-height: 1.4; } .today-focus-items .dashboard-weekly-goal small { grid-column: 1; color: var(--color-text-secondary); font-size: 10px; line-height: 1.4; } .dashboard-weekly-goal progress { grid-column: 1 / -1; grid-row: 3; display: block; width: 100%; height: 6px; overflow: hidden; border: 0; border-radius: 6px; background: var(--theme-raised, #e9edf2); accent-color: #418466; } .dashboard-weekly-goal progress[hidden] { display: none; } .dashboard-weekly-goal progress::-webkit-progress-bar { background: var(--theme-raised, #e9edf2); border-radius: 6px; } .dashboard-weekly-goal progress::-webkit-progress-value { background: var(--theme-success-strong, #418466); border-radius: 6px; } .dashboard-weekly-goal progress::-moz-progress-bar { background: var(--theme-success-strong, #418466); border-radius: 6px; } .dashboard-weekly-goal-action { grid-column: 2; grid-row: 1 / span 2; align-self: center; justify-self: end; min-height: 26px; padding: 4px 7px; border: 1px solid var(--theme-border, #e0e5ed); border-radius: 5px; background: var(--theme-surface, #f8fafc); color: var(--color-primary); font-size: 10px; font-weight: 600; line-height: 1.4; white-space: nowrap; text-decoration: none; } .dashboard-weekly-goal-action:hover { background: var(--theme-raised, #edf1f7); border-color: var(--theme-border, #cbd4e2); } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) #openWeeklyReport { align-self: center; padding: 6px 10px; border: 1px solid var(--theme-border, #e0e5ed); border-radius: 6px; background: var(--theme-surface, #fff); line-height: 1.4; white-space: nowrap; } .weekly-goal-modal form { display: grid; gap: 14px; padding: 22px; } .weekly-goal-help { margin: 0; color: var(--color-text-secondary); font-size: 12px; line-height: 1.5; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .weekly-report-banner > .today-focus-items { align-items: center; flex-wrap: nowrap; } .application-filter-footer { display: flex; grid-column: 1 / -1; align-items: center; gap: 8px; min-width: 0; } .application-filter-chips { display: flex; flex: 1; flex-wrap: wrap; gap: 6px; min-width: 0; } .filter-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 28px; padding: 4px 9px; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-neutral-50); color: var(--color-text-primary); font-size: 12px; } .filter-chip:hover { background: var(--color-primary-soft); } .application-view-toggle { display: flex; gap: 4px; margin-left: auto; } #applicationsView .application-filter-chips:empty { gap: 0; } #applicationsView .filter-chip { min-height: 28px; padding: 4px 8px; gap: 5px; font-size: 11px; } .application-filter-footer > #clearApplicationFilters { margin-left: auto; } .application-filter-footer > #toggleApplicationSelection { flex: 0 0 auto; min-height: 32px; padding: 5px 12px; white-space: nowrap; } .application-filter-footer > .application-view-toggle { margin-left: 0; } .application-view-toggle .button { min-height: 32px; padding: 5px 10px; gap: 6px; font-size: 12px; line-height: 1; white-space: nowrap; } .application-view-toggle .button > i { flex: 0 0 1em; line-height: 1; text-align: center; } .application-view-toggle .button.active { border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-primary); } .application-bulk-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--color-border); background: var(--color-neutral-50); } .application-bulk-bar > span { margin-right: auto; color: var(--color-text-primary); font-size: 13px; font-weight: 650; } .application-bulk-bar select { min-height: 34px; padding: 5px 8px; border: 1px solid var(--color-border); border-radius: 7px; background: var(--theme-surface, #fff); color: var(--color-text-primary); } .application-table-wrap { width: 100%; overflow-x: auto; } .application-data-table { width: 100%; border-collapse: collapse; text-align: left; } .application-data-table th { padding: 11px 12px; background: var(--color-neutral-50); color: var(--color-text-secondary); font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; } .application-data-table td { padding: 11px 12px; border-top: 1px solid var(--color-border); color: var(--color-text-primary); font-size: 13px; vertical-align: middle; } .application-data-table td strong, .application-data-table td small { display: block; } .application-data-table td small { margin-top: 3px; color: var(--color-text-secondary); font-size: 12px; } .application-data-table tbody tr { cursor: pointer; } .application-data-table tbody tr { position: relative; } .application-data-table tbody tr:hover { background: var(--color-neutral-50); } .application-data-table input[type="checkbox"], .application-board-card input[type="checkbox"], .application-row-identity input[type="checkbox"] { accent-color: var(--color-primary); } .application-actions-panel { position: fixed; inset: 0 0 0 auto; display: flex; flex-direction: column; width: min(420px, 100vw); height: 100dvh; max-width: 100vw; max-height: none; margin: 0; padding: 0; overflow: hidden; border: 1px solid var(--theme-border, #e6e8f0); border-right: 0; border-radius: 16px 0 0 16px; background: var(--theme-surface, #fff); color: var(--ink); box-shadow: -12px 0 36px rgba(17, 24, 39, .16); } .application-actions-panel:not([open]) { display: none; } .application-actions-panel[open] { display: flex; } .application-actions-panel::backdrop { background: rgba(20, 24, 20, .43); } .application-actions-panel { transform: translateX(100%); opacity: 0; transition: transform .24s ease, opacity .24s ease, display .24s allow-discrete, overlay .24s allow-discrete; } .application-actions-panel[open] { transform: translateX(0); opacity: 1; } .application-actions-panel::backdrop { opacity: 0; transition: opacity .24s ease, display .24s allow-discrete, overlay .24s allow-discrete; } .application-actions-panel[open]::backdrop { opacity: 1; } @starting-style { .application-actions-panel[open] { transform: translateX(100%); opacity: 0; } .application-actions-panel[open]::backdrop { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .application-actions-panel, .application-actions-panel::backdrop { transition: none; } } html:has(#applicationActionsPanel[open]) { scrollbar-gutter: auto; } .application-actions-panel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; min-height: 122px; padding: 26px 22px 20px; border-bottom: 1px solid var(--theme-border, #e6e8f0); } .application-actions-panel-header > div { min-width: 0; } .application-actions-panel-header .eyebrow { margin: 0 0 7px; } .application-actions-panel-header h2 { margin: 0; color: var(--navy); font-size: 23px; font-weight: 650; letter-spacing: -.02em; line-height: 1.25; } .application-actions-panel-header > div > p:last-child { margin: 5px 0 0; color: var(--theme-muted, #6b7280); font-size: 13px; overflow-wrap: anywhere; } .application-actions-panel-close { flex: 0 0 auto; } .application-actions-panel-list { display: grid; align-content: start; gap: 8px; padding: 20px; overflow-y: auto; } .application-actions-panel-action { display: grid; grid-template-columns: 30px minmax(0, 1fr) 12px; align-items: center; gap: 10px; width: 100%; min-height: 60px; padding: 9px 10px; border: 1px solid var(--theme-border, #e6e8f0); border-radius: 8px; background: var(--theme-surface, #fff); color: var(--navy); text-align: left; cursor: pointer; } .application-actions-panel-action:hover, .application-actions-panel-action:focus-visible { border-color: var(--theme-border, #c7ccef); background: var(--theme-surface, #f8f9ff); outline: 0; } .application-actions-panel-action > span:nth-child(2) { display: grid; gap: 2px; min-width: 0; } .application-actions-panel-action strong { font-size: 12px; } .application-actions-panel-action small { color: var(--theme-muted, #72798a); font-size: 10px; } .application-actions-panel-action > i:last-child { color: var(--theme-subtle, #9aa2b2); font-size: 12px; } .application-actions-panel-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 7px; background: var(--theme-raised, #f0f1fa); color: var(--theme-info-text, #4f5aa3); font-size: 13px; } .application-actions-panel-action.is-danger { border-color: var(--theme-border, #f0d7d9); color: var(--theme-danger-text, #8f2e38); } .application-actions-panel-action.is-danger:hover, .application-actions-panel-action.is-danger:focus-visible { border-color: var(--theme-danger-border, #e5aeb3); background: var(--theme-surface, #fff8f8); } .application-actions-panel-action.is-danger .application-actions-panel-icon { background: var(--theme-raised, #fff0f0); color: var(--theme-danger-text, #a3333e); } .application-actions-panel-action.is-danger small, .application-actions-panel-action.is-danger > i:last-child { color: var(--theme-danger-text, #9b6267); } .email-compose-side-panel { position: fixed; inset: 0 0 0 auto; display: flex; flex-direction: column; width: min(620px, 100vw); height: 100dvh; max-width: 100vw; max-height: none; margin: 0; padding: 0; overflow: hidden; border: 1px solid var(--theme-border, #e6e8f0); border-right: 0; border-radius: 16px 0 0 16px; background: var(--theme-surface, #fff); color: var(--ink); box-shadow: -12px 0 36px rgba(17, 24, 39, .16); } .email-compose-side-panel:not([open]) { display: none; } .email-compose-side-panel[open] { display: flex; } .email-compose-side-panel #emailComposeForm { display: flex; flex: 1; flex-direction: column; max-height: none; padding: 24px; overflow-y: auto; } .email-compose-side-panel #emailComposeForm > .modal-heading { flex: 0 0 auto; } .email-compose-side-panel #emailComposeForm .compose-template-row, .email-compose-side-panel #emailComposeForm .compose-fields, .email-compose-side-panel #emailComposeForm .compose-status, .email-compose-side-panel #emailComposeForm .modal-actions { flex: 0 0 auto; } .email-compose-side-panel #emailComposeForm .modal-actions { margin-top: auto; } .email-compose-side-panel::backdrop { background: rgba(20, 24, 20, .43); } .application-board-mode { overflow-x: auto; } .application-board { display: grid; grid-auto-columns: minmax(220px, 1fr); grid-auto-flow: column; gap: 12px; min-height: 320px; padding: 12px; } .application-board-column { min-width: 0; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-neutral-50); transition: background-color .15s ease, border-color .15s ease; } .application-board-column.drop-target { border-color: var(--color-primary); background: var(--color-primary-soft); } .application-board-column > header { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px; border-bottom: 1px solid var(--color-border); } .application-board-column > header h3 { margin: 0; color: var(--color-text-primary); font-size: 13px; } .application-board-column > header span { color: var(--color-text-secondary); font-size: 12px; font-variant-numeric: tabular-nums; } .application-board-cards { display: grid; align-content: start; gap: 8px; min-height: 90px; padding: 8px; } .application-board-card { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: start; gap: 8px; padding: 10px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--theme-surface, #fff); box-shadow: var(--shadow-sm); } .application-board-card > input { grid-row: 1 / 4; margin-top: 3px; } .application-board-card-open { display: grid; gap: 4px; min-width: 0; padding: 0; border: 0; background: transparent; color: var(--color-text-primary); text-align: left; } .application-board-card-open strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; } .application-board-card-open span, .application-board-card-open small { overflow: hidden; color: var(--color-text-secondary); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; } .application-board-card > .status-pill { grid-column: 2 / 3; justify-self: start; } .application-board-empty { padding: 10px; color: var(--color-text-secondary); font-size: 12px; text-align: center; } #applicationsView .application-list-head { display: none; } #clientModal.application-detail-panel[open] { position: fixed; inset: 0 0 0 auto; width: min(1000px, 90vw); height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 12px 0 0 12px; } #clientModal.application-detail-panel #clientForm { height: 100dvh; max-height: 100dvh; } .form-field a.form-field-link { display: block; width: 100%; overflow: hidden; border: 1px solid var(--theme-border, #e0e4e0); border-radius: 6px; background: var(--theme-surface, #fafbfa); color: var(--theme-text, #343a35); padding: 9px 10px; font-weight: 450; font-size: 13px; line-height: normal; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; } .form-field a.form-field-link:hover, .form-field a.form-field-link:focus-visible { border-color: var(--navy); text-decoration: underline; } @media (max-width: 900px) { .today-focus-items { gap: 8px; } .today-focus-items > span { font-size: 10px; } .global-search-trigger kbd { display: none; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) #applicationDashboardPanel { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-auto-flow: row; overflow: visible; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) #applicationDashboardPanel > * { grid-column: 1 / -1; grid-row: auto; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) #applicationDashboardPanel > .interview-calendar-panel { width: auto; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .weekly-report-banner { flex-wrap: wrap; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .weekly-report-banner > .today-focus-items { flex-basis: 100%; order: 3; } } @media (max-width: 720px) { .global-search-trigger { width: 38px; min-width: 38px; padding: 0; justify-content: center; } .global-search-trigger > span, .global-search-trigger kbd { display: none; } .today-focus-items { width: 100%; justify-content: flex-start; flex-wrap: wrap; } .today-focus-items .dashboard-weekly-goal { padding-left: 0; border-left: 0; } .application-filter-footer { flex-wrap: wrap; } .application-filter-chips { order: 3; flex-basis: 100%; } #applicationsView .application-filter-chips:empty { display: none; } .application-view-toggle { margin-left: auto; } .application-bulk-bar { flex-wrap: wrap; } .application-bulk-bar > span { flex-basis: 100%; } .application-table-wrap { overflow: visible; } .application-data-table, .application-data-table tbody, .application-data-table tr, .application-data-table td { display: block; width: 100%; } .application-data-table thead { display: none; } .application-data-table tbody { display: grid; gap: 9px; padding: 9px; } .application-data-table tbody tr { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 5px 10px; padding: 10px; border: 1px solid var(--color-border); border-radius: 9px; background: var(--color-surface); } .application-data-table td { padding: 2px 0; border: 0; } .application-data-table td:first-child { grid-row: 1 / 5; } .application-data-table td:nth-child(2) { grid-column: 2 / -1; } .application-data-table td:nth-child(3), .application-data-table td:nth-child(4), .application-data-table td:nth-child(5), .application-data-table td:nth-child(6), .application-data-table td:nth-child(7) { grid-column: 2 / -1; } #applicationsView .application-list:not(.selection-mode) .application-data-table td:first-child { grid-column: 1 / -1; grid-row: auto; } .application-data-table td:last-child { position: absolute; right: 14px; } #clientModal.application-detail-panel[open] { width: 100vw; max-width: 100vw; border-radius: 0; } .quick-search-footer { align-items: flex-start; flex-direction: column; } .quick-search-result kbd { display: none; } body:has(#dailyTaskView.active) .daily-task-history-shortcuts .button:hover { border-color: var(--theme-border, #cbd2dc); background: var(--theme-raised, #f6f7fb); } } @media (max-width: 900px) { #applicationsView .application-panel { overflow-x: hidden; } #applicationsView .application-list-head, #applicationsView .application-list { min-width: 0; } } @media (max-width: 720px) { body:has(#documentsView.active) .documents-tabs { display: grid; grid-auto-flow: row; grid-auto-columns: minmax(0, 1fr); grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; } body:has(#documentsView.active) .documents-tab { min-width: 0; white-space: normal; } #applicationsView .application-list:not(.selection-mode) .application-data-table tbody tr { grid-template-columns: minmax(0, 1fr) auto; } #applicationsView .application-list:not(.selection-mode) .application-data-table tbody tr > td:first-child { grid-column: 1 / -1; grid-row: auto; } } @media (max-width: 380px) { #applicationsView .application-filters, #inboxView .application-filters { grid-template-columns: minmax(0, 1fr); } #applicationsView .application-filter-controls, #inboxView .email-filter-controls { grid-template-columns: minmax(0, 1fr); } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .topbar-title-area { align-items: flex-start; flex-direction: column; gap: 8px; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .dashboard-switcher { width: 100%; max-width: 100%; flex-wrap: wrap; overflow: visible; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .dashboard-switcher-tab { flex: 1 1 120px; min-width: 0; white-space: normal; } } @media (max-width: 720px) { body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .recent-panel .table-wrap { overflow: visible; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .recent-panel table { width: 100%; min-width: 0; table-layout: fixed; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .recent-panel thead { display: none; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .recent-panel tbody { display: grid; gap: 8px; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .recent-panel tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; padding: 12px; border: 1px solid var(--color-border); border-radius: 9px; background: var(--color-surface); } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .recent-panel tbody td { min-width: 0; padding: 0; border: 0; overflow-wrap: anywhere; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .recent-panel tbody td:first-child { grid-column: 1 / -1; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .recent-panel tbody td:nth-child(2) { grid-column: 1; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .recent-panel tbody td:nth-child(3) { grid-column: 2; justify-self: end; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .recent-panel tbody td:nth-child(4) { grid-column: 1; color: var(--color-text-secondary); font-size: 12px; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .recent-panel tbody td:last-child { grid-column: 2; grid-row: 3; justify-self: end; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .recent-panel .application-empty { width: auto; } } @media (max-width: 1000px) { body:has(#dailyTaskView.active) { min-height: 100vh; background: var(--theme-raised, #f6f7fb); } body:has(#dailyTaskView.active) .content { max-width: none; } body:has(#dailyTaskView.active) .topbar { min-height: 56px; height: auto; margin: 0 0 12px; border: 0; } body:has(#dailyTaskView.active) .topbar-copy { display: flex; align-items: baseline; gap: 10px; } body:has(#dailyTaskView.active) .topbar-copy > .eyebrow { display: none; } body:has(#dailyTaskView.active) .topbar h1 { margin: 0; color: var(--theme-text, #111827); font-size: 24px; } body:has(#dailyTaskView.active) .daily-task-header-date { margin: 0; color: var(--theme-muted, #6b7280); font-size: 13px; } body:has(#dailyTaskView.active) #dailyTaskView.active { display: grid; gap: 12px; } body:has(#dailyTaskView.active) .daily-task-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; } body:has(#dailyTaskView.active) .daily-task-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; border: 0; } body:has(#dailyTaskView.active) .daily-task-summary > div, body:has(#dailyTaskView.active) .daily-task-summary-overdue { padding: 10px; border: 1px solid var(--theme-border, #e6e8f0); border-radius: 10px; background: var(--theme-surface, #fff); } body:has(#dailyTaskView.active) .daily-task-summary > div + div { border-left: 1px solid var(--theme-border, #e6e8f0); } body:has(#dailyTaskView.active) .daily-task-layout { grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 0; } body:has(#dailyTaskView.active) .daily-task-list-panel, body:has(#dailyTaskView.active) .daily-task-history-panel { margin: 0; padding: 16px; border: 1px solid var(--theme-border, #e6e8f0); border-radius: 12px; background: var(--theme-surface, #fff); } body:has(#dailyTaskView.active) .daily-task-history-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; } body:has(#dailyTaskView.active) .daily-task-history-shortcuts { display: flex; gap: 6px; } } #dailyTaskView .daily-task-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } #dailyTaskView .daily-task-date-navigation { position: relative; display: flex; align-items: center; gap: 6px; } #dailyTaskView .daily-task-date-step { display: grid; place-items: center; width: 36px; min-width: 36px; min-height: 36px; padding: 0; } #dailyTaskView .daily-task-date-label { min-height: 36px; padding: 7px 10px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--color-text-primary); font-size: 14px; font-weight: 650; white-space: nowrap; } #dailyTaskView .daily-task-date-label:hover { border-color: var(--color-border); background: var(--color-surface); } #dailyTaskView .daily-task-native-date { position: absolute; top: 0; left: 50%; width: 1px; height: 1px; overflow: hidden; } #dailyTaskView .daily-task-native-date input { position: absolute; width: 1px; height: 1px; padding: 0; opacity: 0; } #dailyTaskView .daily-task-filter-field { margin-left: auto; } #dailyTaskView .daily-task-summary { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; } #dailyTaskView .daily-task-summary > div, #dailyTaskView .daily-task-summary-overdue { min-width: 110px; padding: 10px 14px; } #dailyTaskView .daily-task-layout { grid-template-columns: minmax(0, 1.4fr) minmax(280px, .85fr); align-items: start; } #dailyTaskView .daily-task-progress-label { color: var(--color-text-secondary); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; } #dailyTaskView .daily-task-progress { height: 6px; margin: 0 0 14px; overflow: hidden; border-radius: 999px; background: var(--color-neutral-100); } #dailyTaskView .daily-task-progress > span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--theme-success-strong, #3f8058); transition: width .18s ease; } #dailyTaskView .daily-task-list-tools { display: flex; gap: 9px; margin: 0 0 10px; } #dailyTaskView .daily-task-quick-add, #dailyTaskView .daily-task-search { position: relative; display: flex; align-items: center; min-width: 0; } #dailyTaskView .daily-task-quick-add { flex: 1 1 240px; } #dailyTaskView .daily-task-search { flex: 0 1 190px; color: var(--color-text-secondary); } #dailyTaskView .daily-task-quick-add input, #dailyTaskView .daily-task-search input { width: 100%; min-width: 0; min-height: 40px; padding: 8px 11px; border: 1px solid var(--color-border); border-radius: 7px; background: var(--theme-surface, #fff); color: var(--color-text-primary); font-size: 13px; } #dailyTaskView .daily-task-search > i { position: absolute; left: 10px; font-size: 12px; pointer-events: none; } #dailyTaskView .daily-task-search input { padding-left: 29px; } #dailyTaskView .daily-task-list { display: grid; gap: 7px; } #dailyTaskView .daily-task-item { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 56px; padding: 8px 10px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--theme-surface, #fff); transition: background-color .18s ease, opacity .18s ease, border-color .18s ease; } #dailyTaskView .daily-task-item:hover { background: var(--color-neutral-50); } #dailyTaskView .daily-task-item.is-complete { border-color: var(--theme-border, #cfe4d3); background: var(--theme-raised, #edf7ef); opacity: .78; } #dailyTaskView .daily-task-item.is-complete:hover { background: var(--theme-raised, #e8f4eb); } #dailyTaskView .daily-task-action { display: grid; flex: 0 0 36px; place-items: center; width: 36px; height: 36px; min-width: 36px; padding: 0; border: 2px solid var(--theme-border, #87919b); border-radius: 50%; background: var(--theme-surface, #fff); color: transparent; font-size: 13px; cursor: pointer; transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease; } #dailyTaskView .daily-task-action:hover { border-color: var(--theme-success-border, #3f8058); background: var(--theme-raised, #eef6f0); } #dailyTaskView .daily-task-action:focus-visible, #dailyTaskView .daily-task-row-open:focus-visible, #dailyTaskView .daily-task-delete:focus-visible, #dailyTaskView .daily-task-date-label:focus-visible, #dailyTaskView .daily-task-date-step:focus-visible, #dailyTaskView .daily-task-undo-toast button:focus-visible { outline: 3px solid rgba(47, 111, 159, .55); outline-offset: 2px; } #dailyTaskView .daily-task-item.is-complete .daily-task-action { border-color: var(--theme-success-border, #36794d); background: var(--theme-success-strong, #36794d); color: #fff; } #dailyTaskView .daily-task-action:active { transform: scale(.92); } #dailyTaskView .daily-task-row-open { display: flex; flex: 1 1 auto; align-items: center; min-width: 0; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; } #dailyTaskView .daily-task-item-title { display: block; min-width: 0; margin: 0; overflow: hidden; color: var(--theme-text, #252a2e); font-size: 14px; font-weight: 550; text-overflow: ellipsis; white-space: nowrap; } #dailyTaskView .daily-task-item.is-complete .daily-task-item-title { color: var(--theme-muted, #4f6654); text-decoration: line-through; } #dailyTaskView .daily-task-status { flex: 0 0 auto; max-width: 150px; padding: 4px 8px; border: 0; border-radius: 999px; background: var(--theme-raised, #eef0f2); color: var(--theme-muted, #48525c); font-size: 11px; font-weight: 650; line-height: 1.25; white-space: nowrap; } #dailyTaskView .daily-task-status.is-due-today { background: var(--theme-warning-soft, #fff0cc); color: var(--theme-warning-text, #744a00); } #dailyTaskView .daily-task-status.is-overdue { background: var(--theme-raised, #fde8e7); color: var(--theme-danger-text, #8c2525); } #dailyTaskView .daily-task-status.is-upcoming { background: var(--theme-raised, #eef0f2); color: var(--theme-muted, #48525c); } #dailyTaskView .daily-task-status.is-complete { background: var(--theme-raised, #e0f1e4); color: var(--theme-success-text, #245c36); } #dailyTaskView .daily-task-delete { display: none; flex: 0 0 36px; place-items: center; width: 36px; height: 36px; min-width: 36px; padding: 0; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--theme-danger-text, #7f3535); font-size: 14px; } #dailyTaskView .daily-task-item:hover .daily-task-delete, #dailyTaskView .daily-task-item:focus-within .daily-task-delete { display: grid; } #dailyTaskView .daily-task-delete:hover { border-color: var(--theme-border, #f2c9c7); background: var(--theme-raised, #fff2f1); } #dailyTaskView .daily-task-empty, #dailyTaskView .daily-task-history-empty { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 120px; padding: 20px; color: var(--theme-muted, #4b5563); font-size: 13px; text-align: center; } #dailyTaskView .daily-task-empty > i, #dailyTaskView .daily-task-history-empty > i { color: var(--theme-success-text, #438052); font-size: 20px; } #dailyTaskView .daily-task-history-controls { display: flex; align-items: center; justify-content: space-between; gap: 10px; } #dailyTaskView .daily-task-history-shortcuts { display: flex; gap: 7px; } #dailyTaskView .daily-task-history-controls .daily-task-date-field { width: 145px; min-width: 120px; } #dailyTaskView .daily-task-history-controls .daily-task-date-field input { min-height: 36px; font-size: 12px; } #dailyTaskView .daily-task-history-list { display: grid; gap: 7px; } #dailyTaskView .daily-task-undo-toast { position: fixed; z-index: 1000; right: 24px; bottom: 24px; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--theme-border, #343b45); border-radius: 8px; background: var(--theme-action, #242a32); color: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .2); font-size: 13px; } #dailyTaskView .daily-task-undo-toast[hidden] { display: none; } #dailyTaskView .daily-task-undo-toast > span::after { margin-left: 10px; color: var(--theme-subtle, #c5cbd2); content: "·"; } #dailyTaskView .daily-task-undo-toast button { padding: 3px 5px; border: 0; border-radius: 4px; background: transparent; color: #b9d8ff; font: inherit; font-weight: 700; cursor: pointer; } #dailyTaskView .daily-task-undo-toast button:hover { text-decoration: underline; } @media (hover: none) { #dailyTaskView .daily-task-delete { display: grid; } } @media (max-width: 900px) { #dailyTaskView .daily-task-layout { grid-template-columns: minmax(0, 1fr); } #dailyTaskView .daily-task-list, #dailyTaskView .daily-task-history-list { min-height: 120px; max-height: none; overflow: visible; } } @media (max-width: 560px) { .client-task-schedule-heading { align-items: flex-start; flex-direction: column; gap: 5px; } #dailyTaskView .daily-task-toolbar { align-items: stretch; } #dailyTaskView .daily-task-date-navigation { flex: 1 1 100%; } #dailyTaskView .daily-task-filter-field { flex: 1 1 130px; margin-left: 0; } #dailyTaskView #openDailyTaskAddModal { flex: 1 1 auto; } #dailyTaskView .daily-task-summary > div, #dailyTaskView .daily-task-summary-overdue { flex: 1 1 calc(50% - 10px); min-width: 0; } #dailyTaskView .daily-task-list-tools { flex-direction: column; } #dailyTaskView .daily-task-search { flex-basis: auto; } #dailyTaskView .daily-task-item { gap: 8px; padding: 7px 6px; } #dailyTaskView .daily-task-action, #dailyTaskView .daily-task-delete { flex-basis: 34px; width: 34px; height: 34px; min-width: 34px; } #dailyTaskView .daily-task-status { max-width: 100px; padding: 4px 6px; font-size: 10px; } #dailyTaskView .daily-task-item-title { font-size: 13px; } #dailyTaskView .daily-task-history-controls { align-items: flex-start; flex-wrap: wrap; } #dailyTaskView .daily-task-history-controls .daily-task-date-field { width: 100%; } #dailyTaskView .daily-task-undo-toast { right: 12px; bottom: 12px; } } #dailyTaskView.active .daily-task-summary { display: flex; } #dailyTaskView.active .daily-task-summary > div, #dailyTaskView.active .daily-task-summary-overdue { display: flex; align-items: center; justify-content: space-between; } #dailyTaskView.active .daily-task-list, #dailyTaskView.active .daily-task-history-list { display: grid; gap: 7px; } #dailyTaskView.active .daily-task-list .daily-task-item, #dailyTaskView.active .daily-task-history-list .daily-task-item { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 10px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--theme-surface, #fff); } #dailyTaskView.active .daily-task-list .daily-task-item:hover, #dailyTaskView.active .daily-task-history-list .daily-task-item:hover { background: var(--color-neutral-50); } #dailyTaskView.active .daily-task-list .daily-task-item.is-complete, #dailyTaskView.active .daily-task-history-list .daily-task-item.is-complete { border-color: var(--theme-border, #cfe4d3); background: var(--theme-raised, #edf7ef); opacity: .78; } #dailyTaskView.active .daily-task-list .daily-task-row-open, #dailyTaskView.active .daily-task-history-list .daily-task-row-open { display: flex; flex: 1 1 auto; grid-column: auto; grid-template-columns: minmax(0, 1fr); align-items: center; min-width: 0; gap: 0; } #dailyTaskView.active .daily-task-list .daily-task-item-title { display: block; min-width: 0; margin: 0; overflow: hidden; color: var(--theme-text, #252a2e); font-size: 14px; font-weight: 550; text-overflow: ellipsis; white-space: nowrap; } #dailyTaskView.active .daily-task-list .daily-task-item.is-complete .daily-task-item-title { color: var(--theme-muted, #4f6654); text-decoration: line-through; } #dailyTaskView.active .daily-task-history-list .daily-task-item-title { display: block; min-width: 0; margin: 0; overflow: hidden; color: var(--theme-text, #252a2e); font-size: 14px; font-weight: 550; text-overflow: ellipsis; white-space: nowrap; } #dailyTaskView.active .daily-task-history-list .daily-task-item.is-complete .daily-task-item-title { color: var(--theme-muted, #4f6654); text-decoration: line-through; } #dailyTaskView.active .daily-task-action, #dailyTaskView.active .daily-task-delete { flex: 0 0 36px; width: 36px; height: 36px; min-width: 36px; } #dailyTaskView.active .daily-task-list .daily-task-status { max-width: 150px; padding: 4px 8px; border: 0; border-radius: 999px; color: var(--theme-muted, #48525c); font-size: 11px; white-space: nowrap; } #dailyTaskView.active .daily-task-list .daily-task-status.is-due-today { background: var(--theme-warning-soft, #fff0cc); color: var(--theme-warning-text, #744a00); } #dailyTaskView.active .daily-task-list .daily-task-status.is-overdue { background: var(--theme-raised, #fde8e7); color: var(--theme-danger-text, #8c2525); } #dailyTaskView.active .daily-task-list .daily-task-status.is-upcoming { background: var(--theme-raised, #eef0f2); color: var(--theme-muted, #48525c); } #dailyTaskView.active .daily-task-list .daily-task-status.is-complete { background: var(--theme-raised, #e0f1e4); color: var(--theme-success-text, #245c36); } #dailyTaskView.active .daily-task-history-list .daily-task-status { display: inline-flex; max-width: 150px; padding: 4px 8px; border: 0; border-radius: 999px; background: var(--theme-raised, #e0f1e4); color: var(--theme-success-text, #245c36); font-size: 11px; white-space: nowrap; } #dailyTaskView.active .daily-task-list .daily-task-item.is-complete .daily-task-action { border-color: var(--theme-success-border, #36794d); background: var(--theme-success-strong, #36794d); color: #fff; } #dailyTaskView.active .daily-task-delete { display: none; } #dailyTaskView.active .daily-task-item:hover .daily-task-delete, #dailyTaskView.active .daily-task-item:focus-within .daily-task-delete { display: grid; } #dailyTaskView.active .daily-task-empty, #dailyTaskView.active .daily-task-history-empty { display: flex; align-items: center; justify-content: center; } @media (min-width: 901px) { #dailyTaskView.active .daily-task-layout { grid-template-columns: minmax(0, 1.4fr) minmax(280px, .85fr); } } @media (max-width: 900px) { #dailyTaskView.active .daily-task-layout { grid-template-columns: minmax(0, 1fr); } #dailyTaskView.active .daily-task-list, #dailyTaskView.active .daily-task-history-list { display: grid; } } @media (hover: none) { #dailyTaskView.active .daily-task-delete { display: grid; } } body:has(#dashboardView.active) .dashboard-switcher { width: max-content; max-width: 100%; gap: 3px; padding: 3px; border: 1px solid var(--theme-border, #dfe3ec); border-radius: 10px; background: var(--theme-raised, #eef0f6); } body:has(#dashboardView.active) .dashboard-switcher-tab { min-height: 32px; padding: 6px 11px; border: 0; border-radius: 7px; background: transparent; color: var(--theme-muted, #4b5563); font-size: 12px; } body:has(#dashboardView.active) .dashboard-switcher-tab:hover { background: var(--theme-surface, #fff); color: var(--theme-info-text, #1b2244); } body:has(#dashboardView.active) .dashboard-switcher-tab.active { background: var(--theme-info-strong, #1b2244); color: #fff; box-shadow: 0 1px 2px rgba(16,24,40,.12); } body:has(#dashboardView.active) .dashboard-switcher-tab:focus-visible { outline: 2px solid var(--theme-info-border, #405887); outline-offset: 2px; } #clientDashboardPanel { min-width: 0; } #clientDashboardPanel[hidden] { display: none !important; } #clientDashboardContent[hidden], #clientDashboardLoading[hidden], #clientDashboardEmpty[hidden], #clientDashboardDrawer[hidden], #clientDashboardBackdrop[hidden] { display: none !important; } #clientDashboardPanel .client-dashboard-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 16px; } #clientDashboardPanel .client-dashboard-heading h2 { margin: 0; color: var(--theme-text, #1f2937); font-size: 19px; font-weight: 700; letter-spacing: -.02em; } #clientDashboardPanel .client-dashboard-heading p { margin: 4px 0 0; color: var(--theme-info-text, #667085); font-size: 13px; } #clientDashboardPanel .client-dashboard-heading .button { flex: 0 0 auto; gap: 8px; } #clientDashboardPanel .client-dashboard-stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 16px; } #clientDashboardPanel .client-dashboard-stat-grid:not(.has-income) { grid-template-columns: repeat(3, minmax(0, 1fr)); } #clientDashboardPanel .client-dashboard-kpi[hidden] { display: none; } #clientDashboardPanel .client-dashboard-kpi { display: grid; grid-template-rows: auto 1fr auto; gap: 10px; min-width: 0; min-height: 138px; padding: 16px; border: 1px solid var(--theme-border, #e3e7ed); border-radius: 14px; background: var(--theme-surface, #fff); color: var(--theme-text, #1f2937); box-shadow: 0 2px 8px rgba(16,24,40,.05); transition: transform .16s ease, box-shadow .16s ease; } #clientDashboardPanel .client-dashboard-kpi:hover { transform: translateY(-2px); box-shadow: 0 5px 14px rgba(16,24,40,.09); } #clientDashboardPanel .client-dashboard-kpi .stat-label { display: flex; align-items: center; gap: 9px; min-width: 0; color: var(--theme-info-text, #374151); font-size: 12px; font-weight: 650; } #clientDashboardPanel .client-dashboard-kpi .stat-icon { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 30px; border-radius: 9px; background: var(--theme-raised, #f1f3f5); color: var(--theme-info-text, #596273); } #clientDashboardPanel .client-dashboard-kpi-active .stat-icon { background: var(--theme-raised, #e8f4ec); color: var(--theme-success-text, #27633c); } #clientDashboardPanel .client-dashboard-kpi-ending .stat-icon { background: var(--theme-warning-soft, #fff2d8); color: var(--theme-warning-text, #77520b); } #clientDashboardPanel .client-dashboard-kpi-ended .stat-icon { background: var(--theme-raised, #eceef1); color: var(--theme-info-text, #596273); } #clientDashboardPanel .client-dashboard-kpi > strong { align-self: end; margin: 0; color: var(--theme-text, #111827); font-size: 30px; font-weight: 750; line-height: 1; font-variant-numeric: tabular-nums; } #clientDashboardPanel .client-dashboard-kpi-income > strong { font-size: clamp(17px, 2vw, 24px); } #clientDashboardPanel .client-dashboard-kpi > p { margin: 0; color: var(--theme-info-text, #667085); font-size: 11px; line-height: 1.35; } #clientDashboardPanel .client-dashboard-quickbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 16px; padding: 10px 12px; border: 1px solid var(--theme-border, #e3e7ed); border-radius: 12px; background: var(--theme-surface, #fff); } #clientDashboardPanel .client-dashboard-client-picker { display: flex; align-items: center; gap: 9px; min-width: 0; color: var(--theme-info-text, #667085); font-size: 12px; } #clientDashboardPanel .client-dashboard-client-picker select, #clientDashboardPanel .client-dashboard-filters select { min-width: 150px; min-height: 34px; padding: 6px 28px 6px 9px; border: 1px solid var(--theme-border, #d8dee8); border-radius: 7px; background: var(--theme-surface, #fff); color: var(--theme-info-text, #344054); font: inherit; } #clientDashboardPanel .client-dashboard-quick-actions { display: flex; flex-wrap: wrap; gap: 7px; } #clientDashboardPanel .client-dashboard-quick-actions .button { min-height: 34px; padding: 6px 10px; gap: 7px; font-size: 11px; } #clientDashboardPanel .client-dashboard-main-grid { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(260px, .85fr); align-items: start; gap: 14px; } #clientDashboardPanel .client-dashboard-panel { min-width: 0; overflow: hidden; border: 1px solid var(--theme-border, #e3e7ed); border-radius: 13px; background: var(--theme-surface, #fff); box-shadow: 0 2px 8px rgba(16,24,40,.04); } #clientDashboardPanel .client-dashboard-task-list { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; } #clientDashboardPanel .client-dashboard-task-list:has(> .client-dashboard-task-empty) { display: grid; place-items: center; padding: 20px; } #clientDashboardPanel .client-dashboard-task-empty { width: 100%; padding: 18px 0; text-align: center; font-family: var(--font-ui); } #clientDashboardPanel .client-dashboard-task-empty strong { display: block; color: var(--theme-info-text, #475467); font-size: 13px; font-weight: 600; line-height: 1.5; } #clientDashboardPanel .client-dashboard-task-empty p { margin: 5px auto 0; max-width: 280px; color: var(--theme-info-text, #7a8597); font-size: 11px; font-weight: 400; line-height: 1.6; } #clientDashboardPanel .client-dashboard-task-group + .client-dashboard-task-group { border-top: 1px solid var(--theme-border, #e7ebf0); } #clientDashboardPanel .client-dashboard-task-group h3 { display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 12px; background: var(--theme-raised, #f7f8fb); color: var(--theme-info-text, #344054); font-size: 11px; overflow-wrap: anywhere; } #clientDashboardPanel .client-dashboard-task-group h3 span { font-size: 10px; font-weight: 400; color: var(--theme-info-text, #667085); } #clientDashboardPanel .client-dashboard-task-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 28px; align-items: center; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--theme-border, #f0f2f5); } #clientDashboardPanel .client-dashboard-task-row > div { min-width: 0; } #clientDashboardPanel .client-dashboard-task-row strong { display: block; font-size: 11px; font-weight: 600; color: var(--theme-info-text, #243047); overflow-wrap: anywhere; } #clientDashboardPanel .client-dashboard-task-row small { display: block; margin-top: 3px; font-size: 10px; color: var(--theme-info-text, #667085); } #clientDashboardPanel .client-dashboard-task-date { font-size: 10px; color: var(--theme-info-text, #667085); text-align: right; } #clientDashboardPanel .client-dashboard-task-date.is-overdue { color: var(--theme-danger-text, #b33446); } #clientDashboardPanel .client-dashboard-task-date.is-today { color: var(--theme-warning-text, #906411); } #clientDashboardPanel .client-dashboard-task-done { width: 28px; height: 28px; padding: 0; border: 1px solid var(--theme-border, #dce5df); border-radius: 7px; background: var(--theme-raised, #f5faf6); color: var(--theme-success-text, #38734f); cursor: pointer; } #clientDashboardPanel .client-dashboard-task-done:hover { background: var(--theme-raised, #e7f3e9); } #clientDashboardPanel .client-dashboard-task-done:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; } #clientDashboardPanel .client-dashboard-tasks { grid-column: 1 / -1; } #clientDashboardPanel .client-dashboard-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 16px; border-bottom: 1px solid var(--theme-border, #edf0f4); } #clientDashboardPanel .client-dashboard-panel-heading > div { display: grid; gap: 3px; min-width: 0; } #clientDashboardPanel .client-dashboard-panel-heading h2 { margin: 0; color: var(--theme-text, #1f2937); font-size: 14px; font-weight: 700; } #clientDashboardPanel .client-dashboard-panel-heading span { color: var(--theme-info-text, #667085); font-size: 11px; } #clientDashboardPanel .client-dashboard-filters { display: flex; align-items: center; gap: 8px; } #clientDashboardPanel .client-dashboard-panel-heading:has(.client-dashboard-filters) { flex-wrap: wrap; } #clientDashboardPanel .client-dashboard-panel-heading > .client-dashboard-filters { display: flex; flex: 1 1 250px; justify-content: flex-end; align-items: center; gap: 8px; max-width: 340px; margin-left: auto; } #clientDashboardPanel .client-dashboard-panel-heading > .client-dashboard-filters .client-dashboard-search { flex: 1 1 140px; width: auto; min-width: 0; } #clientDashboardPanel .client-dashboard-panel-heading > .client-dashboard-filters > label:last-child { flex: 0 0 auto; } #clientDashboardPanel .client-dashboard-filters select { min-width: 125px; } #clientDashboardPanel .client-dashboard-search { position: relative; display: block; width: min(220px, 26vw); } #clientDashboardPanel .client-dashboard-search > i { position: absolute; top: 11px; left: 10px; color: var(--theme-info-text, #667085); font-size: 12px; pointer-events: none; } #clientDashboardPanel .client-dashboard-search input { width: 100%; min-height: 34px; padding: 6px 9px 6px 29px; border: 1px solid var(--theme-border, #d8dee8); border-radius: 7px; color: var(--theme-info-text, #344054); font: inherit; font-size: 12px; } #clientDashboardPanel .client-dashboard-table-wrap { width: 100%; overflow-x: hidden; } #clientDashboardPanel .client-dashboard-table { width: 100%; min-width: 0; max-width: 100%; border-collapse: collapse; table-layout: fixed; text-align: left; } #clientDashboardPanel .client-dashboard-table th { padding: 10px 9px; border-bottom: 1px solid var(--theme-border, #edf0f4); color: var(--theme-info-text, #667085); font-size: 10px; font-weight: 650; white-space: nowrap; } #clientDashboardPanel .client-dashboard-table th button { display: inline-flex; align-items: center; gap: 4px; padding: 2px 0; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; } #clientDashboardPanel .client-dashboard-table th button:hover { color: var(--theme-info-text, #1b2244); } #clientDashboardPanel .client-dashboard-table td { padding: 10px 9px; border-bottom: 1px solid var(--theme-border, #f0f2f5); color: var(--theme-info-text, #475467); font-size: 11px; white-space: nowrap; } #clientDashboardPanel .client-dashboard-table th, #clientDashboardPanel .client-dashboard-table td { overflow: hidden; text-overflow: ellipsis; } #clientDashboardPanel .client-dashboard-table th:nth-child(1), #clientDashboardPanel .client-dashboard-table td:nth-child(1) { width: 38%; } #clientDashboardPanel .client-dashboard-table th:nth-child(2), #clientDashboardPanel .client-dashboard-table td:nth-child(2) { width: 15%; } #clientDashboardPanel .client-dashboard-table th:nth-child(4), #clientDashboardPanel .client-dashboard-table td:nth-child(4) { width: 21%; } #clientDashboardPanel .client-dashboard-table th:nth-child(6), #clientDashboardPanel .client-dashboard-table td:nth-child(6) { width: 17%; } #clientDashboardPanel .client-dashboard-table th:nth-child(8), #clientDashboardPanel .client-dashboard-table td:nth-child(8) { width: 38px; padding-right: 5px; padding-left: 5px; } #clientDashboardPanel .client-dashboard-table th:nth-child(3), #clientDashboardPanel .client-dashboard-table td:nth-child(3), #clientDashboardPanel .client-dashboard-table th:nth-child(5), #clientDashboardPanel .client-dashboard-table td:nth-child(5), #clientDashboardPanel .client-dashboard-table th:nth-child(7), #clientDashboardPanel .client-dashboard-table td:nth-child(7) { display: none; } #clientDashboardPanel .client-dashboard-table tbody tr:last-child td { border-bottom: 0; } #clientDashboardPanel .client-dashboard-table tbody tr:hover { background: var(--theme-surface, #f8fafc); } #clientDashboardPanel .client-dashboard-name { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; padding: 0; border: 0; background: transparent; color: var(--theme-text, #1f2937); text-align: left; font: inherit; font-weight: 650; cursor: pointer; } #clientDashboardPanel .client-dashboard-name > span:last-child { display: grid; min-width: 0; gap: 2px; overflow: hidden; text-overflow: ellipsis; } #clientDashboardPanel .client-dashboard-name small { overflow: hidden; color: var(--theme-info-text, #667085); font-size: 10px; font-weight: 450; text-overflow: ellipsis; } #clientDashboardPanel .client-dashboard-avatar { display: grid; place-items: center; width: 31px; height: 31px; flex: 0 0 31px; border: 1px solid var(--theme-border, #d8e3f2); border-radius: 50%; background: var(--theme-raised, #edf3fa); color: var(--theme-info-text, #385478); font-size: 10px; font-weight: 750; } #clientDashboardPanel .client-dashboard-avatar.is-large { width: 44px; height: 44px; flex-basis: 44px; font-size: 13px; } #clientDashboardPanel .client-dashboard-status { display: inline-flex; align-items: center; min-height: 22px; padding: 3px 8px; border-radius: 999px; background: var(--theme-raised, #eef0f2); color: var(--theme-info-text, #475467); font-size: 10px; font-weight: 650; white-space: nowrap; } #clientDashboardPanel .client-dashboard-status.is-active { background: var(--theme-raised, #e8f4ec); color: var(--theme-success-text, #27633c); } #clientDashboardPanel .client-dashboard-status.is-ending { background: var(--theme-warning-soft, #fff2d8); color: var(--theme-warning-text, #77520b); } #clientDashboardPanel .client-dashboard-status.is-ended { background: var(--theme-raised, #eceef1); color: var(--theme-info-text, #475467); } #clientDashboardPanel .client-dashboard-status.is-paused { background: var(--theme-raised, #e8f1fb); color: var(--theme-info-text, #31577f); } #clientDashboardPanel .client-dashboard-row-action { display: inline-flex; align-items: center; gap: 5px; padding: 5px 6px; border: 0; border-radius: 5px; background: transparent; color: var(--theme-info-text, #344e78); font: inherit; font-size: 10px; font-weight: 650; cursor: pointer; } #clientDashboardPanel .client-dashboard-row-action:hover { background: var(--theme-raised, #edf2f8); } #clientDashboardPanel .client-dashboard-row-action span { display: none; } #clientDashboardPanel .client-dashboard-empty { display: grid; justify-items: center; gap: 8px; padding: 34px 18px; text-align: center; } #clientDashboardPanel .client-dashboard-empty-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--theme-raised, #eef2f7); color: var(--theme-info-text, #52647e); } #clientDashboardPanel .client-dashboard-empty h3 { margin: 4px 0 0; color: var(--theme-text, #1f2937); font-size: 15px; } #clientDashboardPanel .client-dashboard-empty p, #clientDashboardPanel .client-dashboard-inline-empty { margin: 0; color: var(--theme-info-text, #667085); font-size: 12px; line-height: 1.5; } #clientDashboardPanel .client-dashboard-empty .button { margin-top: 4px; } #clientDashboardPanel .client-dashboard-attention-list { display: grid; align-content: start; grid-auto-rows: max-content; } #clientDashboardPanel .client-dashboard-attention-item { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 12px 13px; border-bottom: 1px solid var(--theme-border, #f0f2f5); } #clientDashboardPanel .client-dashboard-attention-item:last-child { border-bottom: 0; } #clientDashboardPanel .client-dashboard-attention-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--theme-info-strong, #667085); } #clientDashboardPanel .client-dashboard-attention-dot.is-amber { background: var(--theme-warning-strong, #bd8012); } #clientDashboardPanel .client-dashboard-attention-dot.is-blue { background: var(--theme-info-strong, #3e6f9f); } #clientDashboardPanel .client-dashboard-attention-dot.is-red { background: var(--theme-danger-strong, #bd4148); } #clientDashboardPanel .client-dashboard-attention-copy { display: grid; min-width: 0; gap: 3px; } #clientDashboardPanel .client-dashboard-attention-copy strong { color: var(--theme-info-text, #344054); font-size: 11px; } #clientDashboardPanel .client-dashboard-attention-copy small { overflow: hidden; color: var(--theme-info-text, #667085); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; } #clientDashboardPanel .client-dashboard-attention-item .button { min-height: 28px; padding: 4px 7px; font-size: 10px; } #clientDashboardPanel .client-dashboard-attention-list > .client-dashboard-inline-empty { padding: 16px; } #clientDashboardPanel .client-dashboard-attention-list:has(> .client-dashboard-inline-empty) { flex: 1; align-content: center; justify-items: center; text-align: center; } #clientDashboardPanel .client-dashboard-attention-list > .client-dashboard-inline-empty { max-width: 240px; font-family: var(--font-ui); font-size: 12px; line-height: 1.6; } #clientDashboardPanel .client-dashboard-bottom-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 14px; margin-top: 14px; } #clientDashboardPanel .client-dashboard-activity-list { display: grid; } #clientDashboardPanel .client-dashboard-activity-item { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 9px; min-width: 0; padding: 10px 14px; border-bottom: 1px solid var(--theme-border, #f0f2f5); } #clientDashboardPanel .client-dashboard-activity-item:last-child { border-bottom: 0; } #clientDashboardPanel .client-dashboard-activity-icon { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 9px; background: var(--theme-raised, #edf3fa); color: var(--theme-info-text, #385478); font-size: 11px; } #clientDashboardPanel .client-dashboard-activity-icon.is-green { background: var(--theme-raised, #e8f4ec); color: var(--theme-success-text, #27633c); } #clientDashboardPanel .client-dashboard-activity-icon.is-gray { background: var(--theme-raised, #eceef1); color: var(--theme-info-text, #475467); } #clientDashboardPanel .client-dashboard-activity-item > span:nth-child(2) { display: grid; min-width: 0; gap: 3px; } #clientDashboardPanel .client-dashboard-activity-item strong { overflow: hidden; color: var(--theme-info-text, #344054); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; } #clientDashboardPanel .client-dashboard-activity-item small, #clientDashboardPanel .client-dashboard-activity-item time { overflow: hidden; color: var(--theme-info-text, #667085); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; } #clientDashboardPanel .client-dashboard-chart-wrap { min-height: 190px; padding: 8px 12px 0; } #clientDashboardPanel .client-dashboard-chart-wrap svg { display: block; width: 100%; height: 190px; overflow: visible; } #clientDashboardPanel .client-dashboard-chart-line { fill: none; stroke: var(--theme-info-text, #56769d); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } #clientDashboardPanel .client-dashboard-chart-axis { stroke: #e3e7ed; stroke-width: 1; } #clientDashboardPanel .client-dashboard-chart-point { fill: #fff; stroke: var(--theme-info-text, #45688f); stroke-width: 3; } #clientDashboardPanel .client-dashboard-chart-label, #clientDashboardPanel .client-dashboard-chart-value { fill: var(--theme-info-text, #667085); font-size: 11px; } #clientDashboardPanel .client-dashboard-chart-value { fill: var(--theme-info-text, #344054); font-size: 10px; font-weight: 650; } #clientDashboardPanel .client-dashboard-chart-empty { fill: var(--theme-info-text, #667085); font-size: 12px; } #clientDashboardLoading { display: grid; gap: 16px; } #clientDashboardLoading .client-dashboard-skeleton { border: 1px solid var(--theme-border, #e3e7ed); border-radius: 13px; background: linear-gradient(90deg, var(--theme-raised, #f0f2f5) 25%, var(--theme-surface, #fafbfc) 50%, var(--theme-raised, #f0f2f5) 75%); background-size: 200% 100%; animation: client-dashboard-shimmer 1.3s ease-in-out infinite; } #clientDashboardLoading .client-dashboard-skeleton-kpis { height: 138px; } #clientDashboardLoading .client-dashboard-skeleton-content { height: 390px; } @keyframes client-dashboard-shimmer { to { background-position: -200% 0; } } #clientDashboardPanel :focus-visible { outline: 2px solid var(--theme-info-border, #405887); outline-offset: 2px; } #clientDashboardBackdrop { position: fixed; z-index: 120; inset: 0; background: rgba(16,24,40,.42); } #clientDashboardDrawer { position: fixed; z-index: 121; inset: 0 0 0 auto; display: flex; flex-direction: column; width: min(470px, 100vw); height: 100dvh; border-left: 1px solid var(--theme-border, #dfe3ec); background: var(--theme-surface, #fff); box-shadow: -12px 0 36px rgba(16,24,40,.18); } #clientDashboardDrawer[aria-hidden="false"] { animation: client-dashboard-drawer-in .2s ease-out both; } @keyframes client-dashboard-drawer-in { from { transform: translateX(18px); opacity: .6; } to { transform: none; opacity: 1; } } body.client-dashboard-drawer-open { overflow: hidden; } #clientDashboardPanel .client-dashboard-drawer-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 20px 22px; border-bottom: 1px solid var(--theme-border, #edf0f4); } #clientDashboardPanel .client-dashboard-drawer-heading .eyebrow { color: var(--theme-info-text, #667085); font-size: 10px; } #clientDashboardPanel .client-dashboard-drawer-heading h2 { margin: 4px 0 0; color: var(--theme-text, #1f2937); font-size: 20px; } #clientDashboardPanel .client-dashboard-drawer-content { flex: 1; overflow-y: auto; padding: 20px 22px 24px; } #clientDashboardPanel .client-dashboard-drawer-profile { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; } #clientDashboardPanel .client-dashboard-drawer-profile h3 { margin: 0 0 6px; color: var(--theme-text, #1f2937); font-size: 17px; } #clientDashboardPanel .client-dashboard-drawer-section { margin: 0 0 19px; padding-bottom: 17px; border-bottom: 1px solid var(--theme-border, #edf0f4); } #clientDashboardPanel .client-dashboard-drawer-section h3 { display: flex; align-items: center; gap: 7px; margin: 0 0 10px; color: var(--theme-info-text, #344054); font-size: 13px; } #clientDashboardPanel .client-dashboard-drawer-section h3 span { color: var(--theme-info-text, #667085); font-size: 11px; } #clientDashboardPanel .client-dashboard-drawer-section dl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; } #clientDashboardPanel .client-dashboard-drawer-section dl > div { min-width: 0; } #clientDashboardPanel .client-dashboard-drawer-section dt { margin-bottom: 3px; color: var(--theme-info-text, #667085); font-size: 10px; } #clientDashboardPanel .client-dashboard-drawer-section dd { margin: 0; overflow-wrap: anywhere; color: var(--theme-info-text, #344054); font-size: 12px; font-weight: 550; } #clientDashboardPanel .client-dashboard-drawer-section a { color: var(--theme-info-text, #344e78); } #clientDashboardPanel .client-dashboard-drawer-notes { margin: 0; color: var(--theme-info-text, #475467); font-size: 12px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; } #clientDashboardPanel .client-dashboard-drawer-tasks { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; } #clientDashboardPanel .client-dashboard-drawer-tasks li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--theme-border, #f0f2f5); color: var(--theme-info-text, #344054); font-size: 12px; } #clientDashboardPanel .client-dashboard-drawer-tasks small { color: var(--theme-info-text, #667085); white-space: nowrap; } #clientDashboardPanel .client-dashboard-drawer-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; } #clientDashboardPanel .client-dashboard-edit-form { display: grid; gap: 12px; } #clientDashboardPanel .client-dashboard-edit-form .form-field { display: grid; gap: 5px; color: var(--theme-info-text, #344054); font-size: 12px; font-weight: 600; } #clientDashboardPanel .client-dashboard-edit-form input, #clientDashboardPanel .client-dashboard-edit-form select, #clientDashboardPanel .client-dashboard-edit-form textarea, #clientDashboardActionDialog .form-field input, #clientDashboardActionDialog .form-field textarea { width: 100%; min-height: 38px; padding: 8px 10px; border: 1px solid var(--theme-border, #d8dee8); border-radius: 7px; background: var(--theme-surface, #fff); color: var(--theme-text, #1f2937); font: inherit; font-size: 13px; } #clientDashboardPanel .client-dashboard-edit-form textarea, #clientDashboardActionDialog .form-field textarea { resize: vertical; } #clientDashboardPanel .client-dashboard-edit-notes { grid-column: 1 / -1; } #clientDashboardActionDialog { width: min(440px, calc(100vw - 28px)); max-height: min(90dvh, 680px); padding: 0; border: 1px solid var(--theme-border, #dfe3ec); border-radius: 14px; background: var(--theme-surface, #fff); box-shadow: 0 18px 50px rgba(16,24,40,.2); } #clientDashboardActionDialog::backdrop { background: rgba(16,24,40,.42); } #clientDashboardActionDialog form { display: grid; gap: 16px; padding: 20px; } #clientDashboardActionDialog #clientDashboardActionFields { display: grid; gap: 12px; } #clientDashboardActionDialog .form-field { display: grid; gap: 5px; color: var(--theme-info-text, #344054); font-size: 12px; font-weight: 600; } #clientDashboardActionDialog .modal-actions { display: flex; justify-content: flex-end; gap: 8px; } @media (max-width: 1000px) { #clientDashboardPanel .client-dashboard-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } #clientDashboardPanel .client-dashboard-stat-grid:not(.has-income) { grid-template-columns: repeat(2, minmax(0, 1fr)); } #clientDashboardPanel .client-dashboard-main-grid { grid-template-columns: minmax(0, 1fr); } #clientDashboardPanel .client-dashboard-bottom-grid { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 767px) { #clientDashboardPanel .client-dashboard-stat-grid, #clientDashboardPanel .client-dashboard-stat-grid:not(.has-income) { grid-template-columns: minmax(0, 1fr); } #clientDashboardPanel .client-dashboard-heading { align-items: flex-start; } #clientDashboardPanel .client-dashboard-heading p { max-width: 40ch; } #clientDashboardPanel .client-dashboard-quickbar { align-items: flex-start; flex-direction: column; } #clientDashboardPanel .client-dashboard-client-picker { width: 100%; flex-wrap: wrap; } #clientDashboardPanel .client-dashboard-client-picker select { flex: 1 1 160px; } #clientDashboardPanel .client-dashboard-quick-actions { width: 100%; } #clientDashboardPanel .client-dashboard-filters { width: 100%; } #clientDashboardPanel .client-dashboard-panel-heading > .client-dashboard-filters { flex: 0 1 auto; max-width: none; margin-left: 0; } #clientDashboardPanel .client-dashboard-search { flex: 1 1 auto; width: auto; } #clientDashboardPanel .client-dashboard-filters select { flex: 0 0 auto; min-width: 118px; } #clientDashboardPanel .client-dashboard-panel-heading { align-items: flex-start; flex-direction: column; } #clientDashboardPanel .client-dashboard-panel-heading:has(.client-dashboard-filters) { align-items: stretch; } #clientDashboardPanel .client-dashboard-table thead { display: none; } #clientDashboardPanel .client-dashboard-table, #clientDashboardPanel .client-dashboard-table tbody { display: block; width: 100%; } #clientDashboardPanel .client-dashboard-table tbody { display: grid; gap: 9px; padding: 10px; } #clientDashboardPanel .client-dashboard-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 7px 10px; padding: 11px; border: 1px solid var(--theme-border, #e7ebf0); border-radius: 10px; background: var(--theme-surface, #fff); } #clientDashboardPanel .client-dashboard-table tbody tr:hover { background: var(--theme-surface, #f8fafc); } #clientDashboardPanel .client-dashboard-table td { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; padding: 3px 0; border: 0; white-space: normal; } #clientDashboardPanel .client-dashboard-table td:nth-child(3), #clientDashboardPanel .client-dashboard-table td:nth-child(5), #clientDashboardPanel .client-dashboard-table td:nth-child(7) { display: flex; } #clientDashboardPanel .client-dashboard-table td::before { content: attr(data-label); flex: 0 0 auto; color: var(--theme-info-text, #667085); font-size: 10px; } #clientDashboardPanel .client-dashboard-table td:first-child { grid-column: 1 / -1; } #clientDashboardPanel .client-dashboard-table td:first-child::before, #clientDashboardPanel .client-dashboard-table td:last-child::before { display: none; } #clientDashboardPanel .client-dashboard-table td:last-child { justify-content: flex-end; grid-column: 1 / -1; } #clientDashboardPanel .client-dashboard-row-action span { display: inline; } #clientDashboardPanel .client-dashboard-name { min-width: 0; } } @media (max-width: 520px) { body:has(#dashboardView.active) .dashboard-switcher { width: 100%; } body:has(#dashboardView.active) .dashboard-switcher-tab { flex: 1 1 0; min-width: 0; padding: 6px 7px; font-size: 11px; white-space: normal; } #clientDashboardPanel .client-dashboard-heading { flex-direction: column; } #clientDashboardPanel .client-dashboard-heading .button { width: 100%; } #clientDashboardPanel .client-dashboard-kpi { min-height: 112px; } #clientDashboardPanel .client-dashboard-panel-heading { padding: 13px; } #clientDashboardPanel .client-dashboard-drawer-content { padding: 16px; } #clientDashboardPanel .client-dashboard-drawer-heading { padding: 16px; } #clientDashboardPanel .client-dashboard-drawer-section dl { grid-template-columns: minmax(0, 1fr); } } @media (prefers-reduced-motion: reduce) { #clientDashboardLoading .client-dashboard-skeleton { animation: none; } #clientDashboardDrawer[aria-hidden="false"] { animation: none; } #clientDashboardPanel .client-dashboard-kpi { transition: none; } } .daily-task-related-field { min-width: 0; } .daily-task-related-picker { position: relative; } .daily-task-related-trigger { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 53px; padding: 8px 11px; border: 1px solid var(--theme-border, #d9dfe8); border-radius: 8px; background: var(--theme-surface, #fff); color: var(--theme-info-text, #283247); text-align: left; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; } .daily-task-related-trigger:hover, .daily-task-related-trigger[aria-expanded="true"] { border-color: var(--theme-info-border, #8998b4); background: var(--theme-surface, #fbfcfe); } .daily-task-related-trigger:focus-visible { outline: 2px solid var(--theme-info-border, #526a9c); outline-offset: 2px; } .daily-task-related-trigger > i { flex: 0 0 auto; color: var(--theme-info-text, #68758c); font-size: 12px; transition: transform .15s ease; } .daily-task-related-trigger[aria-expanded="true"] > i { transform: rotate(180deg); } .daily-task-related-trigger-copy { display: grid; gap: 3px; min-width: 0; } .daily-task-related-trigger-copy strong { overflow: hidden; color: var(--theme-info-text, #263047); font-size: 13px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; } .daily-task-related-trigger-copy small { overflow: hidden; color: var(--theme-muted, #7b8494); font-size: 11px; font-weight: 450; text-overflow: ellipsis; white-space: nowrap; } .daily-task-related-popover { position: fixed; z-index: 1200; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 5px; max-height: min(360px, calc(100dvh - 32px)); padding: 7px; border: 1px solid var(--theme-border, #dce2ec); border-radius: 10px; background: var(--theme-surface, #fff); box-shadow: 0 14px 36px rgba(29, 39, 61, .2); } .daily-task-related-popover.hidden { display: none; } .daily-task-related-search { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 0 10px; border: 1px solid var(--theme-border, #e2e6ed); border-radius: 7px; color: var(--theme-info-text, #7a8494); } .daily-task-related-search:focus-within { border-color: var(--theme-info-border, #8998b4); box-shadow: 0 0 0 3px rgba(82, 106, 156, .12); } .daily-task-related-search > i { flex: 0 0 auto; font-size: 12px; } .daily-task-related-search input { width: 100%; min-width: 0; min-height: 37px; padding: 6px 0; border: 0; background: transparent; color: var(--theme-info-text, #283247); font-size: 12px; outline: 0; } .daily-task-related-search input:focus { border: 0; box-shadow: none; } .daily-task-related-options { min-height: 0; overflow-y: auto; overscroll-behavior: contain; } .daily-task-related-group + .daily-task-related-group { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--theme-border, #edf0f4); } .daily-task-related-group-heading { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 8px 5px; background: var(--theme-surface, #fff); color: var(--theme-info-text, #727d90); font-size: 10px; font-weight: 750; letter-spacing: .055em; text-transform: uppercase; } .daily-task-related-group-heading small { display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--theme-raised, #f0f2f6); color: var(--theme-info-text, #727d90); font-size: 10px; letter-spacing: 0; } .daily-task-related-option { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 42px; padding: 6px 8px; border-radius: 7px; color: var(--theme-info-text, #39445a); cursor: pointer; } .daily-task-related-option:hover, .daily-task-related-option:focus-visible { outline: 0; background: var(--theme-raised, #f4f6fa); } .daily-task-related-option.is-selected { background: var(--theme-raised, #edf2fb); } .daily-task-related-option-icon { display: grid; place-items: center; flex: 0 0 29px; width: 29px; height: 29px; border-radius: 8px; font-size: 12px; } .daily-task-related-option-icon.is-neutral { background: var(--theme-raised, #f1f3f6); color: var(--theme-info-text, #737e90); } .daily-task-related-option-icon.is-client { background: var(--theme-raised, #edf5ef); color: var(--theme-success-text, #4c785a); } .daily-task-related-option-icon.is-application { background: var(--theme-raised, #edf2f8); color: var(--theme-info-text, #506a91); } .daily-task-related-option-copy { display: grid; gap: 2px; flex: 1 1 auto; min-width: 0; } .daily-task-related-option-copy strong { overflow: hidden; color: var(--theme-info-text, #30394d); font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; } .daily-task-related-option-copy small { overflow: hidden; color: var(--theme-muted, #81899a); font-size: 10px; font-weight: 450; text-overflow: ellipsis; white-space: nowrap; } .daily-task-related-option.is-selected .daily-task-related-option-copy strong { color: var(--theme-info-text, #253b68); } .daily-task-related-check { flex: 0 0 auto; margin-left: auto; color: var(--theme-info-text, #45639a); font-size: 11px; } .daily-task-related-empty { margin: 0; padding: 20px 12px; color: var(--theme-muted, #7b8494); font-size: 12px; text-align: center; } @media (max-width: 520px) { .daily-task-related-popover { max-height: min(340px, calc(100dvh - 24px)); } } /* ===== MOBILE-ONLY FIXES (max-width: 720px) — do not affect desktop ===== */ @media (max-width: 720px) { html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; --m-fs-body: 14px; --m-fs-small: 12px; --m-fs-label: 12px; --m-fs-title: clamp(24px, 7vw, 30px); } body { font-size: var(--m-fs-body); line-height: 1.55; } /* Headings, copy, metadata and form controls */ .topbar h1 { font-size: var(--m-fs-title); line-height: 1.15; } .topbar-title-area h1 { font-size: var(--m-fs-title); } .panel-heading h2, .email-intro h2, .application-workspace-title h2, .daily-task-heading h2, .weekly-report-section-heading h2 { font-size: 19px; line-height: 1.3; } .modal-heading h2, .settings-modal-heading h2 { font-size: 21px; line-height: 1.3; } .application-actions-panel-header h2, .active-client-drawer-heading h2 { font-size: 21px; line-height: 1.3; } .stat-card strong { font-size: clamp(28px, 9vw, 36px); } .page-context, .topbar .eyebrow, .eyebrow, .nav-group-label, .form-column-label, .form-subsection-label, .details-readonly-label, .application-filter-field, .application-list-head, .to-apply-list-head, .hired-detail-grid dt, .calendar-weekday, .daily-task-related-group-heading { font-size: 11px; line-height: 1.4; } .stat-label, .stat-card p, .weekly-report-banner p:not(.eyebrow), .calendar-controls strong, .calendar-day-number, .calendar-empty, .application-workspace-title > p:last-child, .application-workspace-count small, .application-platform-count, .application-group-heading span, .client-card-subtitle, .client-card-website, .hired-card-meta, .hired-card-website a, .hired-detail-grid dd, .hired-upload-head p:not(.eyebrow), .field-help, .follow-up-note, .salary-estimate-label, .salary-estimate-php, .application-email-message-heading p, .application-email-message-heading time, .application-emails-summary, .compose-status, .email-detail-meta div, .email-detail-body, .email-row time, .email-date, .email-summary-item, .inbox-count, .to-apply-date, .daily-task-item-meta, .daily-task-item-notes, .daily-task-item-copy time, .daily-task-empty p, .daily-task-history-empty, .weekly-report-muted, .weekly-report-banner p, .document-viewer-note, .personal-document-row small, .client-email-history-item time { font-size: var(--m-fs-small); line-height: 1.5; } .application-email-message-body, .email-detail-body, .daily-task-item-title, .daily-task-item-notes, .weekly-report-note p, .client-task-description, .client-task-notes, .application-data-table td { font-size: var(--m-fs-body); line-height: 1.55; } .client-card-title, .hired-card .client-card-title, .application-data-table td strong, .daily-task-item-title, .application-group-heading h3 { font-size: 15px; line-height: 1.4; } .form-field, .form-grid .form-field, .compose-fields .form-field, .application-filter-field, .daily-task-date-field { font-size: var(--m-fs-label); line-height: 1.4; } .button, .text-button, .nav-link, .sidebar-action, .dashboard-switcher-tab, .documents-tab, .email-view-tab, .application-actions-panel-action strong, .active-client-action-row-copy strong, .email-actions-trigger, .email-actions-menu button, .sidebar-utility-panel .sidebar-action, .daily-task-plan-actions .button, .daily-task-history-shortcuts .button { font-size: 14px; line-height: 1.35; } .application-actions-panel-action small, .active-client-action-row-copy small { font-size: 12px; line-height: 1.45; white-space: normal; } .application-actions-panel-header > div > p:last-child, .active-client-drawer-heading > p:last-child { font-size: 13px; line-height: 1.45; } .form-field input, .form-field select, .form-field textarea, .search-field input, .select-field select, .date-filter input, .application-search-field input, .application-filter-field input, .application-filter-field select, .daily-task-related-search input, .compose-template-save input { font-size: 16px; } .application-email-message-heading h3, .email-from, .email-subject, .weekly-report-section-heading h3, .daily-task-section-heading h3 { font-size: 16px; line-height: 1.4; } /* Wrap long values and let mobile rows grow with their text. */ .page-context, .application-workspace-title, .application-data-table td, .application-data-table td strong, .application-email-message-heading, .application-email-message-body, .email-from, .email-subject, .email-detail-meta strong, .hired-detail-grid dd, .hired-card-meta, .client-card-subtitle, .client-card-website, .hired-card-website a, .weekly-report-table td, .daily-task-item-title, .daily-task-item-notes, .application-actions-panel-header > div, .active-client-drawer-heading { min-width: 0; overflow-wrap: anywhere; } .application-data-table td, .hired-detail-grid dd, .client-card-subtitle, .hired-card-meta, .client-card-website, .hired-card-website a { height: auto; white-space: normal; text-overflow: clip; } .application-workspace-head, .hired-detail-heading, .weekly-report-section-heading, .application-filter-footer { flex-wrap: wrap; } .application-workspace-head { align-items: flex-start; } .application-workspace-count { min-width: 0; max-width: 100%; } .application-filter-controls, .email-filter-controls { min-width: 0; } .application-filter-field > span { white-space: normal; } .toolbar, .application-bulk-bar, .to-apply-head-actions, .hired-detail-heading-actions { flex-wrap: wrap; } .application-table-wrap, .table-wrap, .weekly-report-table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } #applicationsView .application-table-wrap { overflow-x: auto; } #applicationsView .application-data-table { display: table; width: max-content; min-width: 100%; } #applicationsView .application-data-table thead { display: table-header-group; } #applicationsView .application-data-table tbody { display: table-row-group; padding: 0; } #applicationsView .application-data-table tbody tr { display: table-row; width: auto; padding: 0; border: 0; border-radius: 0; } #applicationsView .application-data-table td { display: table-cell; width: auto; min-width: 90px; padding: 10px 9px; border-top: 1px solid var(--color-border); vertical-align: top; } #applicationsView .application-data-table td:first-child { min-width: 160px; } #applicationsView .application-data-table td:last-child { position: static; right: auto; } #applicationsView .application-data-table thead th { padding: 10px 9px; font-size: 11px; white-space: nowrap; } #applicationsView .application-data-table td:nth-child(2), #applicationsView .application-data-table td:nth-child(3), #applicationsView .application-data-table td:nth-child(4), #applicationsView .application-data-table td:nth-child(5), #applicationsView .application-data-table td:nth-child(6), #applicationsView .application-data-table td:nth-child(7) { grid-column: auto; grid-row: auto; } /* Dialogs and drawers stay within the viewport and keep actions reachable. */ .modal, .email-compose-modal, .application-emails-modal, .modal.email-detail-modal, .weekly-report-modal, .document-viewer-modal, .email-result-modal, .settings-modal, #clientModal { box-sizing: border-box; max-width: calc(100vw - 24px); max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); } .modal form { max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); padding: 16px; } .modal .modal-heading > .icon-button, .settings-modal-heading > .icon-button, .application-actions-panel-close, .active-client-drawer-close, .active-client-drawer-back { min-width: 44px; min-height: 44px; } .modal .modal-heading > .icon-button, .settings-modal-heading > .icon-button { width: 44px; height: 44px; flex-basis: 44px; } .modal form > .modal-actions, .modal form > .modal-actions-split { position: sticky; bottom: -16px; z-index: 2; padding: 12px 0 max(12px, env(safe-area-inset-bottom)); background: var(--color-surface, var(--theme-surface, #fff)); } .modal-actions, .modal-actions-right { gap: 8px; } .application-actions-panel, .email-compose-side-panel { width: 100vw; max-width: 100vw; max-height: 100dvh; } .application-actions-panel-header, .active-client-drawer-header { position: sticky; top: 0; z-index: 2; background: var(--theme-surface, #fff); } .application-actions-panel-list, .active-client-drawer-list { min-height: 0; padding-bottom: max(20px, env(safe-area-inset-bottom)); } .application-actions-panel-action, .active-client-action-row { min-height: 72px; } .active-client-drawer { width: 100vw; border-radius: 0; } .active-client-drawer-layer[data-view="email"] .active-client-drawer { width: 100vw; } .active-client-drawer-view { min-height: 0; overflow-y: auto; overscroll-behavior: contain; } .active-client-drawer-view #emailComposeForm .modal-actions { padding-bottom: max(14px, env(safe-area-inset-bottom)); } /* Keep multi-column controls and cards usable at phone widths. */ .dashboard-switcher { max-width: 100%; overflow-x: auto; } .dashboard-switcher-tab, .documents-tab, .email-view-tab { min-height: 44px; flex: 0 0 auto; } .stat-grid, .client-dashboard-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stat-card { min-width: 0; min-height: 118px; padding: 13px; } .dashboard-grid { grid-template-columns: minmax(0, 1fr); } .calendar-weekday { padding: 7px 2px; letter-spacing: .02em; text-align: center; } .calendar-day { min-width: 0; min-height: 62px; padding: 4px; } .calendar-interview { min-height: 32px; white-space: normal; overflow-wrap: anywhere; } .application-data-table th, .weekly-report-table th { font-size: 11px; } .application-data-table td, .weekly-report-table td { font-size: 14px; } .hired-list, .client-task-summary, .weekly-report-overview-grid { grid-template-columns: minmax(0, 1fr); } .hired-card { min-width: 0; min-height: 0; } .hired-detail-grid, .hired-detail-grid-large { grid-template-columns: repeat(2, minmax(0, 1fr)); } .email-row { min-width: 0; } .email-row-content, .email-sender-line { min-width: 0; } .email-actions-trigger, .application-data-table .icon-button, .daily-task-action, .daily-task-delete { min-height: 44px; } .email-actions-trigger { min-width: 84px; } .to-apply-row, .daily-task-item, .client-task-row { min-height: 44px; } /* Bring dense labels and badges up to a readable mobile minimum. */ body .nav-group-label, body .nav-count, body .sidebar-utility-chevron, body .calendar-weekday, body .calendar-interview, body th, body .table-client small, body .status-pill, body .weekly-report-period-controls label, body .weekly-report-metric span, body .weekly-report-section-heading span, body .weekly-report-bar span, body .weekly-report-email-list span, body .weekly-report-activity small, body .weekly-report-export-header .eyebrow, body .weekly-report-export-activity small, body .weekly-report-export-table th, body .weekly-report-export-table td, body .weekly-report-export-table td small, body .client-follow-up-history-head, body .client-follow-up-history-head strong, body .client-follow-up-history-list small, body .interview-priority-badge, body .to-apply-list-head, body .to-apply-date span, body .script-item-head small, body .script-item-actions .button, body .cover-letter-editor-heading span, body .cover-letter-preview-label, body .invoice-email-icon, body .invoice-email-row span, body .invoice-card-details dt, body .document-preview-title p:not(.eyebrow), body .client-document-picker-item small, body #applicationListLabel, body .application-workspace-count small, body .application-platform-count, body .application-filter-field, body .application-list-head, body .application-list-head > span:first-child, body .application-group-heading span, body .interview-link-button, body .application-meta small, body .document-version-label, body .active-document-name small, body .invoice-sent-count, body .client-invoice-item span, body .client-invoice-item small, body .client-invoice-empty, body .client-invoice-more, body .active-document-open, body .document-menu-button, body .document-update-prompt span, body .document-update-prompt .button, body .hired-detail-grid dt, body .match-badge, body .sent-email-badge, body .client-match-tag, body .email-time, body .form-column-label, body .form-subsection-label, body .follow-up-note, body .notification-badge, body .notification-panel-head span, body .notification-section-title, body .notification-item-heading time, body .notification-item-actions button, body .client-contract-status, body .compact-field span, body .documents-folder-status code, body .email-compose-button, body .client-email-alert-heading time, body .doc-type-icon, body .document-history, body .document-history-item, body .document-archive-head span:last-child, body .document-archive-date, body .daily-task-item-number, body .daily-task-checklist-progress, body .daily-task-status, body .daily-task-type, body .daily-task-item-notes > span, body .daily-task-detail-facts span, body .daily-task-detail-notes > span, body #hiredView .active-client-onboarding-details dt, body #hiredDetailGrid dt, body #hiredDetailGrid dt i, body #accountView .account-section-heading > span, body #accountView .account-connection-row dd small, body #accountView .account-storage-plan-field, body #accountView .account-sign-in-history time, body #inboxView .email-summary-item, body #hiredView .client-task-tab-count, body #hiredView .client-task-summary-card > span, body #hiredView .client-task-group > summary::before, body #hiredView .client-task-group-count, body #hiredView .client-task-category, body #hiredView .client-task-row-meta, body #hiredView .client-task-recurring, body .client-task-weekdays label span, body .client-task-manual-entry .form-field, body .client-task-time-entry, body .client-task-time-entry > strong, body #hiredView .client-overview-summary-item > span:first-child, body #hiredView #hiredDetailGrid dt, body #hiredView .client-contract-facts dt, body #hiredView .hired-card .client-contract-status, body #hiredView .client-email-direction, body #hiredView .client-overview-summary-item > small, body #applicationsView .application-list-head, body #dailyTaskView .daily-task-heading .eyebrow, body #dailyTaskView .daily-task-section-heading .eyebrow, body #dailyTaskView .daily-task-item-meta, body #dailyTaskView .daily-task-checklist-progress, body #dailyTaskView .daily-task-status, body #dailyTaskView .daily-task-type, body #dailyTaskView .daily-task-detail-facts span, body #dailyTaskView .daily-task-detail-notes > span, body #dailyTaskView .daily-task-summary span, body .today-focus-items > span, body .application-actions-panel-action small, body #clientDashboardPanel .client-dashboard-table th, body #clientDashboardPanel .client-dashboard-name small, body #clientDashboardPanel .client-dashboard-avatar, body #clientDashboardPanel .client-dashboard-status, body #clientDashboardPanel .client-dashboard-row-action, body #clientDashboardPanel .client-dashboard-chart-value, body #clientDashboardPanel .client-dashboard-drawer-heading .eyebrow, body #clientDashboardPanel .client-dashboard-drawer-section dt, body #clientDashboardPanel .client-dashboard-table td::before, body .daily-task-related-group-heading, body .daily-task-related-group-heading small, body .daily-task-related-option-copy small { font-size: 11px; } body .weekly-report-activity small, body .weekly-report-export-activity small, body .weekly-report-export-table td small, body .table-client small, body .client-follow-up-history-list small, body .script-item-head small, body .document-preview-title p:not(.eyebrow), body .client-document-picker-item small, body .application-meta small, body .active-document-name small, body .client-invoice-item small, body .notification-item-copy small, body .client-email-alert-item small, body .document-history, body .document-history-item, body .documents-folder-status, body .client-task-time-entry, body .local-indicator:not([hidden]), body .login-note, body #dailyTaskView .daily-task-item-copy time, body #hiredView .client-overview-summary-item > small, body #clientDashboardPanel .client-dashboard-attention-copy small, body #clientDashboardPanel .client-dashboard-activity-item small, body #clientDashboardPanel .client-dashboard-activity-item time { font-size: 12px; } body .topbar .button, body .to-apply-head-actions .button, body .script-item-actions .button, body .document-update-prompt .button, body .notification-item-actions button, body #clientDashboardPanel .client-dashboard-row-action, body #clientDashboardPanel .client-dashboard-attention-item .button, body #dailyTaskView .daily-task-history-shortcuts .button { font-size: 14px; } } @media (max-width: 400px) { .application-filter-controls, .email-filter-controls, .hired-detail-grid, .hired-detail-grid-large, .client-task-summary { grid-template-columns: minmax(0, 1fr); } .stat-grid, .client-dashboard-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .stat-card { padding: 11px; } .topbar-actions { gap: 4px; } .topbar .button { max-width: 44vw; padding-inline: 8px; white-space: normal; } .modal form { padding: 13px; } } /* ===== INVOICE PAYMENT TRACKING ===== */ #hiredView .client-invoice-payment-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--workspace-line); } #hiredView .client-invoice-payment-summary > div { display: grid; gap: 4px; min-width: 0; } #hiredView .client-invoice-payment-summary strong { color: var(--workspace-ink); font-size: 12px; font-weight: 650; } #hiredView .client-invoice-payment-summary span, #hiredView .client-invoice-payment-detail { color: var(--workspace-muted); font-size: 12px; line-height: 1.4; } #hiredView .client-invoice-payment-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; } #hiredView .client-invoice-payment-actions .button { min-height: 32px; padding: 6px 9px; font-size: 11px; } #hiredView .client-invoice-payment-detail { white-space: normal; text-align: right; } #invoicePaymentModal .compose-fields { margin: 0 0 16px; } #invoicePaymentModal .form-field-wide { grid-column: 1 / -1; } #invoicePaymentModal textarea { resize: vertical; } @media (max-width: 720px) { #hiredView .client-invoice-item { grid-template-columns: minmax(0, 1fr); gap: 8px; } #hiredView .client-invoice-meta, #hiredView .client-invoice-date { grid-column: 1; grid-row: auto; justify-items: start; } #hiredView .client-invoice-payment-summary { grid-template-columns: minmax(0, 1fr); gap: 9px; } #hiredView .client-invoice-payment-actions { justify-content: flex-start; } #hiredView .client-invoice-payment-actions .button { min-height: 40px; font-size: 12px; } #hiredView .client-invoice-payment-detail { text-align: left; } #invoicePaymentModal { box-sizing: border-box; width: calc(100vw - 24px); max-width: calc(100vw - 24px); max-height: calc(100dvh - 16px); overflow-y: auto; } #invoicePaymentModal .compose-fields { grid-template-columns: minmax(0, 1fr); } #invoicePaymentModal .form-field-wide { grid-column: auto; } #invoicePaymentModal .form-field { font-size: 12px; } #invoicePaymentModal input, #invoicePaymentModal select, #invoicePaymentModal textarea { min-height: 44px; font-size: 16px; } #invoicePaymentModal textarea { min-height: 84px; } #invoicePaymentModal .modal-actions .button { min-height: 40px; } } /* ===== INVOICES TAB UI REFRESH ===== */ #hiredView .client-invoice-table-wrap { width: 100%; min-width: 0; } #hiredView .client-invoice-table { width: 100%; table-layout: fixed; border-collapse: collapse; text-align: left; } #hiredView .client-invoice-table th { padding: 8px; border-bottom: 1px solid var(--workspace-line); color: var(--workspace-muted); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .035em; } #hiredView .client-invoice-table td { padding: 9px 8px; border-bottom: 1px solid var(--workspace-line); color: var(--workspace-ink); font-size: 11px; vertical-align: middle; white-space: nowrap; } #hiredView .client-invoice-table th:nth-child(1) { width: 30%; } #hiredView .client-invoice-table th:nth-child(2) { width: 16%; } #hiredView .client-invoice-table th:nth-child(3) { width: 9%; } #hiredView .client-invoice-table th:nth-child(4), #hiredView .client-invoice-table th:nth-child(5) { width: 12%; } #hiredView .client-invoice-table th:nth-child(6) { width: 21%; text-align: right; } #hiredView .client-invoice-reference { display: flex; align-items: center; gap: 7px; min-width: 0; } #hiredView .client-invoice-reference > strong { flex-shrink: 0; font-size: 11px; } #hiredView .client-invoice-reference .status-pill { flex-shrink: 0; margin: 0; padding: 3px 6px; font-size: 9px; } #hiredView .client-invoice-table-file, #hiredView .client-invoice-cell-text { display: block; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #hiredView .client-invoice-table-file { color: var(--workspace-muted); font-size: 10px; } #hiredView .client-invoice-table-payment { display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; } #hiredView .client-invoice-table-payment .button { flex-shrink: 0; min-height: 28px; padding: 5px 8px; font-size: 10px; } #hiredView .client-invoice-table td.client-invoice-overdue-copy { color: var(--workspace-danger); } @media (max-width: 900px) { #hiredView .client-invoice-table, #hiredView .client-invoice-table tbody { display: block; } #hiredView .client-invoice-table thead { display: none; } #hiredView .client-invoice-table tr { display: grid; gap: 7px; padding: 12px 0; border-bottom: 1px solid var(--workspace-line); } #hiredView .client-invoice-table td { display: grid; grid-template-columns: 65px minmax(0, 1fr); gap: 8px; padding: 0; border: 0; white-space: normal; } #hiredView .client-invoice-table td::before { content: attr(data-label); color: var(--workspace-muted); font-size: 10px; } #hiredView .client-invoice-reference { flex-wrap: wrap; } #hiredView .client-invoice-table-file { flex-basis: 100%; } #hiredView .client-invoice-table-payment { justify-content: flex-start; flex-wrap: wrap; } #hiredView .client-invoice-table-payment .button { min-height: 32px; } } #hiredView .client-invoice-panel .invoice-send-heading { align-items: center; padding-bottom: 10px; } #hiredView .client-invoice-panel .invoice-send-heading h3 { font-size: 14px; } #hiredView .client-invoice-panel .invoice-send-heading .eyebrow { font-size: 9px; } #hiredView .client-invoice-heading-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; } #hiredView .client-invoice-heading-actions .button { min-height: 36px; white-space: nowrap; } #hiredView .client-invoice-heading-actions .invoice-sent-count { font-size: 10px; } #hiredView .client-invoice-panel .client-invoice-payment-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; padding: 10px 0; } #hiredView .client-invoice-panel .client-invoice-payment-summary > div { gap: 3px; min-height: 60px; padding: 9px 11px; border: 1px solid var(--workspace-line); border-radius: 8px; background: var(--theme-raised, #f8f9fb); } #hiredView .client-invoice-panel .client-invoice-payment-summary strong { color: var(--workspace-muted); font-size: 10px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; } #hiredView .client-invoice-panel .client-invoice-payment-summary span { color: var(--workspace-ink); font-size: 16px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; } #hiredView .client-invoice-panel .client-invoice-payment-summary small { color: var(--workspace-muted); font-size: 11px; line-height: 1.4; } #hiredView .client-invoice-panel .client-invoice-payment-summary .client-invoice-payment-hint { grid-column: 1 / -1; min-height: 0; padding: 0 2px; border: 0; background: transparent; font-size: 11px; } #hiredView .client-invoice-panel .client-invoice-payment-summary .client-invoice-overdue-copy { color: var(--workspace-danger); font-weight: 650; } #hiredView .client-invoice-panel .client-invoice-list { border-top: 1px solid var(--workspace-line); } #hiredView .client-invoice-panel .client-invoice-item { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(150px, .8fr); align-items: start; gap: 12px; padding: 10px 8px; } #hiredView .client-invoice-panel .client-invoice-main, #hiredView .client-invoice-panel .client-invoice-meta, #hiredView .client-invoice-panel .client-invoice-date { align-content: start; min-width: 0; } #hiredView .client-invoice-panel .client-invoice-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; } #hiredView .client-invoice-panel .client-invoice-title strong { color: var(--workspace-ink); font-size: 12px; font-weight: 700; overflow-wrap: anywhere; } #hiredView .client-invoice-panel .client-invoice-title .status-pill { flex: 0 0 auto; margin: 0; font-size: 10px; } #hiredView .client-invoice-panel .client-invoice-file { display: block; max-width: 100%; color: var(--workspace-muted); font-size: 11px; line-height: 1.45; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #hiredView .client-invoice-panel .client-invoice-meta { display: grid; gap: 5px; } #hiredView .client-invoice-panel .client-invoice-meta-item { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: start; gap: 7px; min-width: 0; } #hiredView .client-invoice-panel .client-invoice-meta-item > span { color: var(--workspace-muted); font-size: 10px; font-weight: 600; letter-spacing: .035em; text-transform: uppercase; } #hiredView .client-invoice-panel .client-invoice-meta-item > strong { min-width: 0; color: var(--workspace-ink); font-size: 11px; font-weight: 500; line-height: 1.45; overflow-wrap: anywhere; } #hiredView .client-invoice-panel .client-invoice-overdue-copy { color: var(--workspace-danger); font-weight: 650; } #hiredView .client-invoice-panel .client-invoice-date { justify-items: end; gap: 6px; } #hiredView .client-invoice-panel .client-invoice-paid-date { color: var(--workspace-ink); font-size: 13px; font-weight: 650; text-align: right; } #hiredView .client-invoice-panel .client-invoice-paid-detail { color: var(--workspace-muted); font-size: 12px; line-height: 1.45; text-align: right; overflow-wrap: anywhere; } #hiredView .client-invoice-panel .client-invoice-payment-actions { display: flex; justify-content: flex-end; align-items: center; flex-wrap: nowrap; gap: 8px; margin-top: 2px; } #hiredView .client-invoice-panel .client-invoice-payment-actions .button { width: auto; flex: 0 0 auto; min-height: 32px; padding: 5px 9px; font-size: 11px; white-space: nowrap; } #hiredView .client-invoice-panel .client-invoice-unpaid-action { min-height: 32px; padding: 5px 2px; border: 0; background: transparent; color: var(--workspace-muted); font: inherit; font-size: 12px; cursor: pointer; } #hiredView .client-invoice-panel .client-invoice-payment-actions button:focus-visible { outline: 2px solid var(--workspace-accent); outline-offset: 2px; } #hiredView .client-invoice-panel .client-invoice-empty { display: grid; justify-items: start; gap: 8px; padding: 20px 0; } #invoicePaymentModal .client-invoice-payment-form { display: flex; flex-direction: column; gap: 0; } #invoicePaymentModal .client-invoice-payment-subtitle { margin: -5px 0 17px; color: var(--workspace-muted); font-size: 12px; line-height: 1.45; } #invoicePaymentModal .compose-fields { grid-template-columns: minmax(0, 1fr); gap: 14px; margin: 0 0 18px; } #invoicePaymentModal .client-invoice-payment-section { display: grid; grid-column: 1 / -1; gap: 11px; min-width: 0; } #invoicePaymentModal .client-invoice-payment-section h3 { margin: 0; padding-bottom: 8px; border-bottom: 1px solid var(--workspace-line); color: var(--workspace-ink); font-size: 13px; font-weight: 650; } #invoicePaymentModal .client-invoice-payment-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } #invoicePaymentModal .client-invoice-payment-fields .form-field { min-width: 0; font-size: 12px; } #invoicePaymentModal .client-invoice-payment-fields .form-field-wide { grid-column: 1 / -1; } #invoicePaymentModal .client-invoice-payment-fields .form-field small { color: var(--workspace-muted); font-size: 11px; font-weight: 400; line-height: 1.4; } #invoicePaymentModal .client-invoice-payment-fields textarea { resize: vertical; } #invoicePaymentModal .client-invoice-payment-form > .modal-actions { justify-content: space-between; margin-top: 0; } @media (max-width: 720px) { #hiredView .client-invoice-panel .invoice-send-heading { align-items: flex-start; gap: 10px; } #hiredView .client-invoice-heading-actions { flex-wrap: wrap; gap: 7px; } #hiredView .client-invoice-heading-actions .button { min-height: 40px; padding: 8px 10px; } #hiredView .client-invoice-panel .client-invoice-payment-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } #hiredView .client-invoice-panel .client-invoice-payment-summary > div { min-height: 72px; padding: 9px 7px; } #hiredView .client-invoice-panel .client-invoice-payment-summary span { font-size: 14px; } #hiredView .client-invoice-panel .client-invoice-item { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 16px 2px; } #hiredView .client-invoice-panel .client-invoice-main, #hiredView .client-invoice-panel .client-invoice-meta, #hiredView .client-invoice-panel .client-invoice-date { grid-column: 1; grid-row: auto; justify-items: start; } #hiredView .client-invoice-panel .client-invoice-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 10px; } #hiredView .client-invoice-panel .client-invoice-meta-item { grid-template-columns: minmax(0, 1fr); gap: 2px; } #hiredView .client-invoice-panel .client-invoice-payment-actions { display: flex; width: 100%; justify-content: stretch; } #hiredView .client-invoice-panel .client-invoice-payment-actions > button { flex: 1 1 0; min-height: 40px; } #hiredView .client-invoice-panel .client-invoice-paid-date, #hiredView .client-invoice-panel .client-invoice-paid-detail { text-align: left; } #hiredView .client-invoice-panel .client-invoice-empty { padding: 17px 0; } #invoicePaymentModal { box-sizing: border-box; width: calc(100vw - 16px); max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); overflow: hidden; } #invoicePaymentModal .client-invoice-payment-form { max-height: calc(100dvh - 48px); } #invoicePaymentModal .modal-heading { flex: 0 0 auto; } #invoicePaymentModal .modal-heading .icon-button { width: 40px; min-width: 40px; height: 40px; } #invoicePaymentModal .client-invoice-payment-subtitle { flex: 0 0 auto; } #invoicePaymentModal .compose-fields { display: block; min-height: 0; margin: 0; overflow-y: auto; overscroll-behavior: contain; } #invoicePaymentModal .client-invoice-payment-section + .client-invoice-payment-section { margin-top: 18px; } #invoicePaymentModal .client-invoice-payment-fields { grid-template-columns: minmax(0, 1fr); gap: 12px; } #invoicePaymentModal .client-invoice-payment-fields .form-field, #invoicePaymentModal .client-invoice-payment-fields .form-field small { font-size: 12px; } #invoicePaymentModal .client-invoice-payment-fields input, #invoicePaymentModal .client-invoice-payment-fields select, #invoicePaymentModal .client-invoice-payment-fields textarea { min-height: 44px; font-size: 16px; } #invoicePaymentModal .client-invoice-payment-fields .form-field-wide { grid-column: auto; } #invoicePaymentModal .client-invoice-payment-form > .modal-actions { position: sticky; bottom: 0; flex: 0 0 auto; gap: 10px; padding-top: 12px; background: var(--theme-surface, #fff); } #invoicePaymentModal .client-invoice-payment-form > .modal-actions .button { min-height: 40px; } } /* Compact invoice payment form with a fixed header and action row. */ #invoicePaymentModal { width: min(600px, calc(100vw - 24px)); max-width: calc(100vw - 24px); max-height: calc(100dvh - 32px); overflow: hidden; } #invoicePaymentModal .client-invoice-payment-form { max-height: calc(100dvh - 34px); min-height: 0; padding: 20px; } #invoicePaymentModal .modal-heading { flex-shrink: 0; align-items: center; margin-bottom: 6px; } #invoicePaymentModal .modal-heading h2 { font-size: 21px; line-height: 1.25; } #invoicePaymentModal .modal-heading .eyebrow { margin-bottom: 4px; font-size: 9px; } #invoicePaymentModal .client-invoice-payment-subtitle { flex-shrink: 0; margin: 0 0 14px; color: var(--muted); font-size: 12px; } #invoicePaymentModal .compose-fields { display: grid; flex: 1; grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 12px; margin: 0; padding: 1px 2px; overflow-y: auto; } #invoicePaymentModal .client-invoice-payment-section { gap: 10px; padding: 12px; border: 1px solid var(--theme-border, #e1e6eb); border-radius: 10px; background: var(--theme-raised, #f8fafb); } #invoicePaymentModal .client-invoice-payment-section h3 { padding: 0; border: 0; font-size: 12px; } #invoicePaymentModal .client-invoice-payment-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 10px 12px; } #invoicePaymentModal .client-invoice-payment-fields .form-field { display: flex; flex-direction: column; align-items: stretch; gap: 5px; min-width: 0; font-size: 11px; line-height: 1.4; } #invoicePaymentModal .client-invoice-payment-fields :is(input, select) { width: 100%; min-width: 0; min-height: 36px; height: 36px; padding: 7px 9px; font-size: 13px; } #invoicePaymentModal .client-invoice-payment-fields .form-field small { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.4; } #invoicePaymentModal .client-invoice-payment-optional { border: 1px solid var(--theme-border, #e1e6eb); border-radius: 10px; } #invoicePaymentModal .client-invoice-payment-optional > summary { padding: 11px 12px; color: var(--navy); font-size: 12px; font-weight: 600; cursor: pointer; } #invoicePaymentModal .client-invoice-payment-optional > summary span { margin-left: 6px; color: var(--muted); font-size: 10px; font-weight: 400; } #invoicePaymentModal .client-invoice-payment-optional > .client-invoice-payment-fields { padding: 0 12px 12px; } #invoicePaymentModal .client-invoice-payment-fields textarea { min-height: 54px; height: 54px; padding: 7px 9px; font-size: 13px; } #invoicePaymentModal .client-invoice-payment-form > .modal-actions { flex-shrink: 0; justify-content: flex-end; gap: 8px; margin: 0; padding-top: 14px; background: var(--theme-surface, #fff); } #invoicePaymentModal .modal-actions .button { min-height: 34px; padding: 7px 12px; font-size: 12px; } @media (max-width: 480px) { #invoicePaymentModal .client-invoice-payment-form { padding: 14px; } #invoicePaymentModal .client-invoice-payment-fields { grid-template-columns: minmax(0, 1fr); } #invoicePaymentModal .client-invoice-payment-fields :is(input, select, textarea) { font-size: 16px; } #invoicePaymentModal .client-invoice-payment-fields .form-field-wide { grid-column: auto; } } #contractEmailUploadClientName { display: inline-flex; align-items: center; gap: 7px; width: fit-content; margin: 10px 0 0; padding: 6px 10px; border: 1px solid var(--theme-border, #e1e8e1); border-radius: 999px; background: var(--theme-raised, #f5f8f5); color: var(--theme-muted, #526558); font-size: 12px; font-weight: 650; } #contractEmailUploadClientName::before { width: 6px; height: 6px; border-radius: 50%; background: var(--theme-success-strong, #5b8062); content: ""; } #chooseContractEmailFileButton { gap: 9px; padding: 9px 13px; border-color: var(--theme-border, #d5e1d7); background: var(--theme-raised, #f7faf7); color: var(--theme-success-text, #34563c); font-weight: 700; } #chooseContractEmailFileButton::before { display: inline-grid; width: 22px; height: 22px; place-items: center; border: 1px solid var(--theme-border, #e0e8e0); border-radius: 6px; background: var(--theme-surface, #fff); color: var(--theme-success-text, #456e4e); content: "↑"; font-size: 15px; line-height: 1; } #chooseContractEmailFileButton:hover { border-color: var(--theme-border, #b9cdbb); background: var(--theme-raised, #eff6f0); } #contractEmailUploadModal { max-height: calc(100dvh - 24px); overflow: hidden; } #contractEmailFileBox { display: grid; min-height: 116px; place-items: center; padding: 14px; border: 1px dashed var(--theme-border, #cbd9cd); border-radius: 9px; background: var(--theme-raised, #f8faf8); } #contractEmailFileBox:has(#contractEmailSelectedFile:not([hidden])) { border-style: solid; background: var(--theme-surface, #fbfcfb); } #contractEmailUploadModal form { display: flex; flex-direction: column; padding: 18px 20px; overflow: hidden; } #contractEmailUploadModal .modal-heading { margin-bottom: 14px; } #contractEmailFileName { max-width: 100%; margin: 0; overflow: hidden; color: var(--theme-text, #303630); font-size: 14px; font-weight: 700; text-align: center; text-overflow: ellipsis; white-space: nowrap; } #contractEmailUploadModal .document-preview-actions { justify-content: center; gap: 8px; margin: 12px 0 0; } #contractEmailUploadModal .document-preview-actions .button { min-height: 36px; padding: 7px 11px; } #removeContractEmailFileButton { border-color: var(--theme-border, #ead5d5); background: var(--theme-surface, #fff8f8); color: var(--theme-danger-text, #9a3e42); } #removeContractEmailFileButton:hover { border-color: var(--theme-danger-border, #dfbabb); background: var(--theme-raised, #fff0f0); } #contractEmailUploadModal .modal-actions { margin-top: 14px; } /* ===== CONTRACT EMAIL UPLOAD MODAL MOBILE ===== */ @media (max-width: 720px) { #contractEmailUploadModal { width: calc(100vw - 16px); max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); overflow: hidden; } #contractEmailUploadModal form { max-height: calc(100dvh - 16px); padding: 16px; } #contractEmailUploadModal .modal-heading { margin-bottom: 12px; } #contractEmailUploadModal #contractEmailUploadStatus, #contractEmailUploadModal .follow-up-editor-status { font-size: 12px; } #contractEmailUploadModal .modal-actions { padding-top: 12px; } #contractEmailUploadModal .button, #contractEmailUploadModal .modal-heading .icon-button { min-height: 40px; } } /* ===== NOTIFICATION FILTER INDICATORS ===== */ .notification-tabs [role="tab"] .notification-tab-label { display: inline-flex; min-width: 0; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; } .notification-tabs [role="tab"] .notification-tab-text { flex: 0 0 auto; white-space: nowrap; } .notification-tabs [role="tab"] .notification-tab-dot { position: static; display: inline-block; flex: 0 0 8px; width: 8px; height: 8px; box-sizing: border-box; border: 0; border-radius: 50%; background: var(--rose); box-shadow: 0 0 0 1.5px #fff; } .notification-tabs [role="tab"] .notification-tab-dot[hidden], .notification-tabs [role="tab"] .notification-tab-count[hidden] { display: none; } .notification-tabs [role="tab"] .notification-tab-count { display: inline-grid; min-width: 18px; height: 18px; place-items: center; padding: 0 4px; border: 0; border-radius: 999px; background: var(--theme-raised, #f8e8ea); color: var(--theme-danger-text, #ad3443); font-size: 9px; font-variant-numeric: tabular-nums; font-weight: 800; line-height: 1; } .notification-tabs [role="tab"] .notification-tab-count.is-single { display: none; } .notification-tabs [role="tab"].has-unread:not([aria-selected="true"]) { background: var(--theme-surface, #fffafb); box-shadow: inset 0 -2px #efc4ca; } @media (max-width: 720px) { .notification-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); overflow-x: hidden; } .notification-tabs [role="tab"] { min-height: 40px; column-gap: 3px; padding-right: 0; padding-left: 0; font-size: 12px; } .notification-tabs [role="tab"] .notification-tab-count { min-width: 0; height: auto; padding: 0; border: 0; border-radius: 0; background: transparent; color: color-mix(in srgb, var(--rose) 85%, transparent); font-size: 10px; line-height: 1; } } /* ===== COMPACT, FRIENDLY WORKSPACE DENSITY ===== Visual-only adjustments: data, actions, and responsive behavior are unchanged. */ @media (min-width: 721px) { body:has(#hiredView.active) .hired-card { min-height: 188px; padding: 14px; gap: 9px; border-radius: 11px; } body:has(#hiredView.active) .hired-card-profile { gap: 9px; } body:has(#hiredView.active) .hired-card-avatar { width: 42px; height: 42px; flex-basis: 42px; font-size: 13px; } body:has(#hiredView.active) .hired-card .client-card-title { font-size: 15px; } body:has(#hiredView.active) .hired-card .client-card-subtitle, body:has(#hiredView.active) .hired-card-email, body:has(#hiredView.active) .hired-card-company, body:has(#hiredView.active) .hired-card-contract, body:has(#hiredView.active) .hired-card-contact, body:has(#hiredView.active) .hired-card-footer { font-size: 11px; } body:has(#hiredView.active) .hired-card .client-contract-status { padding: 4px 7px; font-size: 11px; } body:has(#hiredView.active) .hired-card-footer { min-height: 29px; padding-top: 7px; } #clientDashboardPanel .client-dashboard-stat-grid { gap: 10px; margin-bottom: 12px; } #clientDashboardPanel .client-dashboard-kpi { min-height: 122px; padding: 13px; gap: 7px; border-radius: 12px; } #clientDashboardPanel .client-dashboard-kpi > strong { font-size: 26px; } #clientDashboardPanel .client-dashboard-kpi .stat-label { font-size: 11px; } #clientDashboardPanel .client-dashboard-kpi > p { font-size: 10px; } #clientDashboardPanel .client-dashboard-panel-heading { padding: 12px 14px; } #clientDashboardPanel .client-dashboard-attention-item { padding: 10px 12px; } #clientDashboardPanel .client-dashboard-activity-item { padding: 9px 12px; } } @media (max-width: 720px) { html { --m-fs-title: clamp(22px, 6.5vw, 27px); } .panel-heading h2, .email-intro h2, .application-workspace-title h2, .daily-task-heading h2, .weekly-report-section-heading h2 { font-size: 18px; } .stat-card strong { font-size: clamp(24px, 7.5vw, 30px); } .stat-card { min-height: 108px; padding: 12px; } body:has(#hiredView.active) .hired-card { padding: 13px; gap: 9px; } body:has(#hiredView.active) .hired-card-avatar { width: 40px; height: 40px; flex-basis: 40px; } body:has(#hiredView.active) .hired-card .client-card-title { font-size: 14px; } body:has(#hiredView.active) .hired-card .client-card-subtitle, body:has(#hiredView.active) .hired-card-email, body:has(#hiredView.active) .hired-card-company, body:has(#hiredView.active) .hired-card-contract, body:has(#hiredView.active) .hired-card-contact, body:has(#hiredView.active) .hired-card-footer { font-size: 11px; } #clientDashboardPanel .client-dashboard-kpi { min-height: 104px; padding: 12px; gap: 6px; } #clientDashboardPanel .client-dashboard-kpi > strong { font-size: 24px; } #clientDashboardPanel .client-dashboard-panel-heading { padding: 12px; } } /* Desktop Client Dashboard: fit the working overview in a single viewport. */ @media (min-width: 1100px) { body:has(#dashboardView.active):has(#clientDashboardPanel:not([hidden])) { height: 100dvh; overflow: hidden; background: var(--theme-raised, #f6f7fb); color: var(--theme-text, #111827); } body:has(#dashboardView.active):has(#clientDashboardPanel:not([hidden])) .app-shell { height: 100dvh; min-height: 0; } body:has(#dashboardView.active):has(#clientDashboardPanel:not([hidden])) .content { display: grid; grid-template-rows: 56px minmax(0, 1fr); gap: 14px; width: 100%; height: 100dvh; min-width: 0; min-height: 0; max-width: 1500px; margin: 0 auto; padding: 12px 24px 16px; overflow: hidden; } body:has(#dashboardView.active):has(#clientDashboardPanel:not([hidden])) .topbar { min-height: 0; height: 56px; margin: 0; border-bottom: 0; gap: 18px; } body:has(#dashboardView.active):has(#clientDashboardPanel:not([hidden])) .topbar h1 { margin: 0; color: var(--theme-text, #111827); font-size: 23px; font-weight: 650; letter-spacing: -.025em; white-space: nowrap; } body:has(#dashboardView.active):has(#clientDashboardPanel:not([hidden])) .topbar-copy > .eyebrow { display: none; } body:has(#dashboardView.active):has(#clientDashboardPanel:not([hidden])) .topbar-actions { flex: 0 0 auto; gap: 12px; } body:has(#dashboardView.active):has(#clientDashboardPanel:not([hidden])) .local-indicator { color: var(--theme-muted, #6b7280); font-size: 12px; white-space: nowrap; } body:has(#dashboardView.active):has(#clientDashboardPanel:not([hidden])) .notification-button { width: 36px; height: 36px; border-color: var(--theme-border, #e6e8f0); border-radius: 9px; background: var(--theme-surface, #fff); } body:has(#dashboardView.active):has(#clientDashboardPanel:not([hidden])) #dashboardView { display: grid; grid-template-rows: minmax(0, 1fr); min-width: 0; min-height: 0; overflow: hidden; } body:has(#dashboardView.active):has(#clientDashboardPanel:not([hidden])) #clientDashboardPanel, body:has(#dashboardView.active):has(#clientDashboardPanel:not([hidden])) #clientDashboardContent { min-width: 0; min-height: 0; height: 100%; } body:has(#dashboardView.active):has(#clientDashboardPanel:not([hidden])) #clientDashboardContent { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: 94px minmax(0, 1fr); gap: 10px 14px; } body:has(#dashboardView.active):has(#clientDashboardPanel:not([hidden])) .client-dashboard-heading { grid-column: 1 / -1; grid-row: 1; align-items: center; margin: 0; } body:has(#dashboardView.active):has(#clientDashboardPanel:not([hidden])) .client-dashboard-heading h2 { font-size: 17px; } body:has(#dashboardView.active):has(#clientDashboardPanel:not([hidden])) .client-dashboard-heading p { margin-top: 2px; font-size: 11px; } body:has(#dashboardView.active):has(#clientDashboardPanel:not([hidden])) .client-dashboard-stat-grid { grid-column: 1 / -1; grid-row: 1; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; min-height: 0; margin: 0; } body:has(#dashboardView.active):has(#clientDashboardPanel:not([hidden])) .client-dashboard-stat-grid:not(.has-income) { grid-template-columns: repeat(3, minmax(0, 1fr)); } body:has(#dashboardView.active):has(#clientDashboardPanel:not([hidden])) .client-dashboard-kpi { min-height: 0; padding: 11px 13px; gap: 5px; border-color: var(--theme-border, #e6e8f0); border-radius: 12px; box-shadow: 0 1px 2px rgba(16,24,40,.05); } body:has(#dashboardView.active):has(#clientDashboardPanel:not([hidden])) .client-dashboard-kpi .stat-label { gap: 7px; font-size: 11px; } body:has(#dashboardView.active):has(#clientDashboardPanel:not([hidden])) .client-dashboard-kpi .stat-icon { width: 25px; height: 25px; flex-basis: 25px; border-radius: 7px; font-size: 11px; } body:has(#dashboardView.active):has(#clientDashboardPanel:not([hidden])) .client-dashboard-kpi > strong { font-size: 25px; } body:has(#dashboardView.active):has(#clientDashboardPanel:not([hidden])) .client-dashboard-kpi-income > strong { font-size: clamp(16px, 1.6vw, 22px); } body:has(#dashboardView.active):has(#clientDashboardPanel:not([hidden])) .client-dashboard-kpi > p { font-size: 10px; } body:has(#dashboardView.active):has(#clientDashboardPanel:not([hidden])) .client-dashboard-quickbar { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: minmax(220px, 1fr) auto; align-items: center; gap: 12px; min-height: 0; margin: 0; padding: 4px 10px; border-color: var(--theme-border, #e6e8f0); border-radius: 9px; box-shadow: 0 1px 2px rgba(16,24,40,.04); } body:has(#dashboardView.active):has(#clientDashboardPanel:not([hidden])) .client-dashboard-client-picker { font-size: 11px; } body:has(#dashboardView.active):has(#clientDashboardPanel:not([hidden])) .client-dashboard-client-picker select { min-height: 30px; padding-top: 4px; padding-bottom: 4px; } body:has(#dashboardView.active):has(#clientDashboardPanel:not([hidden])) .client-dashboard-quick-actions { flex-wrap: nowrap; } body:has(#dashboardView.active):has(#clientDashboardPanel:not([hidden])) .client-dashboard-quick-actions .button { min-height: 30px; padding: 5px 8px; } body:has(#dashboardView.active):has(#clientDashboardPanel:not([hidden])) .client-dashboard-main-grid { grid-column: 1 / 10; grid-row: 2; grid-template-columns: minmax(0, 2.15fr) minmax(225px, .85fr); grid-template-rows: minmax(0, .9fr) minmax(0, 1.1fr); align-items: stretch; min-height: 0; gap: 12px; } body:has(#dashboardView.active):has(#clientDashboardPanel:not([hidden])) .client-dashboard-clients { grid-column: 1; grid-row: 1; } body:has(#dashboardView.active):has(#clientDashboardPanel:not([hidden])) .client-dashboard-tasks { grid-column: 1; grid-row: 2; } body:has(#dashboardView.active):has(#clientDashboardPanel:not([hidden])) .client-dashboard-attention { grid-column: 2; grid-row: 1 / 3; } body:has(#dashboardView.active):has(#clientDashboardPanel:not([hidden])) .client-dashboard-bottom-grid { grid-column: 10 / -1; grid-row: 2; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); min-height: 0; gap: 12px; margin: 0; } body:has(#dashboardView.active):has(#clientDashboardPanel:not([hidden])) .client-dashboard-panel { display: flex; flex-direction: column; min-height: 0; border-color: var(--theme-border, #e6e8f0); border-radius: 12px; box-shadow: 0 1px 2px rgba(16,24,40,.05); } body:has(#dashboardView.active):has(#clientDashboardPanel:not([hidden])) .client-dashboard-panel-heading { flex: 0 0 auto; padding: 10px 12px; } body:has(#dashboardView.active):has(#clientDashboardPanel:not([hidden])) .client-dashboard-panel-heading h2 { font-size: 13px; } body:has(#dashboardView.active):has(#clientDashboardPanel:not([hidden])) .client-dashboard-filters { gap: 6px; } body:has(#dashboardView.active):has(#clientDashboardPanel:not([hidden])) .client-dashboard-search { width: min(172px, 19vw); } body:has(#dashboardView.active):has(#clientDashboardPanel:not([hidden])) .client-dashboard-search > i { top: 9px; left: 8px; font-size: 10px; } body:has(#dashboardView.active):has(#clientDashboardPanel:not([hidden])) .client-dashboard-search input, body:has(#dashboardView.active):has(#clientDashboardPanel:not([hidden])) .client-dashboard-filters select { min-height: 29px; padding-top: 4px; padding-bottom: 4px; font-size: 11px; } body:has(#dashboardView.active):has(#clientDashboardPanel:not([hidden])) .client-dashboard-search input { padding-left: 25px; } body:has(#dashboardView.active):has(#clientDashboardPanel:not([hidden])) .client-dashboard-filters select { min-width: 108px; padding-right: 24px; } body:has(#dashboardView.active):has(#clientDashboardPanel:not([hidden])) .client-dashboard-table-wrap, body:has(#dashboardView.active):has(#clientDashboardPanel:not([hidden])) .client-dashboard-attention-list, body:has(#dashboardView.active):has(#clientDashboardPanel:not([hidden])) .client-dashboard-activity-list { flex: 1; min-height: 0; overflow: auto; scrollbar-width: thin; } body:has(#dashboardView.active):has(#clientDashboardPanel:not([hidden])) .client-dashboard-table th, body:has(#dashboardView.active):has(#clientDashboardPanel:not([hidden])) .client-dashboard-table td { padding: 7px 8px; } body:has(#dashboardView.active):has(#clientDashboardPanel:not([hidden])) .client-dashboard-attention-item { padding: 9px 10px; } body:has(#dashboardView.active):has(#clientDashboardPanel:not([hidden])) .client-dashboard-activity-item { padding: 8px 10px; } body:has(#dashboardView.active):has(#clientDashboardPanel:not([hidden])) .client-dashboard-chart-wrap { flex: 1; min-height: 0; padding: 2px 8px 0; } body:has(#dashboardView.active):has(#clientDashboardPanel:not([hidden])) .client-dashboard-chart-wrap svg { height: 100%; min-height: 96px; } } /* Keep an active-client profile open in the same desktop workspace. */ @media (min-width: 1100px) { body:has(#hiredView.active):has(#hiredView.client-focused) { height: 100dvh; overflow: hidden; } body:has(#hiredView.active):has(#hiredView.client-focused) .app-shell { height: 100dvh; min-height: 0; } body:has(#hiredView.active):has(#hiredView.client-focused) .content { display: grid; grid-template-rows: 56px minmax(0, 1fr); gap: 12px; height: 100dvh; min-height: 0; padding: 12px 24px 16px; overflow: hidden; } body:has(#hiredView.active):has(#hiredView.client-focused) .topbar { min-height: 0; height: 56px; margin: 0; border-bottom: 0; } body:has(#hiredView.active):has(#hiredView.client-focused) #hiredView { min-height: 0; overflow: hidden; } body:has(#hiredView.active):has(#hiredView.client-focused) .hired-detail-panel { display: grid; grid-template-rows: auto auto auto minmax(0, 1fr); height: 100%; min-height: 0; margin: 0; padding: 14px 16px 0; overflow: hidden; } body:has(#hiredView.active):has(#hiredView.client-focused) .hired-detail-heading { display: flex; align-items: center; justify-content: space-between; min-height: 48px; gap: 10px; padding: 7px 2px; } body:has(#hiredView.active):has(#hiredView.client-focused) .hired-detail-identity { text-align: left; } body:has(#hiredView.active):has(#hiredView.client-focused) .hired-detail-heading h2 { font-size: 18px; } body:has(#hiredView.active):has(#hiredView.client-focused) .hired-detail-heading-actions { justify-self: auto; } body:has(#hiredView.active):has(#hiredView.client-focused) .hired-detail-heading-actions .button { min-height: 30px; padding: 5px 9px; border-radius: 7px; font-size: 11px; } body:has(#hiredView.active):has(#hiredView.client-focused) .hired-list-back-button { gap: 6px; padding-left: 6px; } body:has(#hiredView.active):has(#hiredView.client-focused) .hired-list-back-button > i { width: 19px; height: 19px; font-size: 9px; } body:has(#hiredView.active):has(#hiredView.client-focused) .hired-detail-header-meta { display: none; } body:has(#hiredView.active):has(#hiredView.client-focused) .client-overview-profile { margin: 8px 0 2px; } body:has(#hiredView.active):has(#hiredView.client-focused) .client-detail-tabs { min-height: 36px; gap: 17px; padding: 0 2px; } body:has(#hiredView.active):has(#hiredView.client-focused) .client-detail-tab { min-height: 36px; padding: 0; font-size: 11px; } body:has(#hiredView.active):has(#hiredView.client-focused) .client-detail-panels { min-height: 0; overflow: auto; scrollbar-width: thin; } body:has(#hiredView.active):has(#hiredView.client-focused) .client-detail-panel { min-height: 0; padding: 10px 2px 16px; } body:has(#hiredView.active):has(#hiredView.client-focused) .client-overview-profile-card { gap: 10px 16px; padding: 9px 11px; } body:has(#hiredView.active):has(#hiredView.client-focused) .client-overview-profile-photo { width: 38px; height: 38px; flex-basis: 38px; } body:has(#hiredView.active):has(#hiredView.client-focused) .client-overview-profile-avatar { width: 38px; height: 38px; border-radius: 10px; font-size: 11px; } body:has(#hiredView.active):has(#hiredView.client-focused) .client-overview-profile-upload { width: 20px; height: 20px; right: -4px; bottom: -3px; font-size: 8px; } body:has(#hiredView.active):has(#hiredView.client-focused) .client-overview-profile-identity h3 { font-size: 15px; } body:has(#hiredView.active):has(#hiredView.client-focused) .client-overview-profile-facts { gap: 5px 10px; } body:has(#hiredView.active):has(#hiredView.client-focused) .client-overview-profile-facts > a, body:has(#hiredView.active):has(#hiredView.client-focused) .client-overview-profile-facts > span { font-size: 10px; } body:has(#hiredView.active):has(#hiredView.client-focused) .client-overview-summary { gap: 8px; margin-bottom: 10px; } body:has(#hiredView.active):has(#hiredView.client-focused) .client-overview-summary-item { min-height: 64px; padding: 8px 10px; gap: 3px; } body:has(#hiredView.active):has(#hiredView.client-focused) .client-overview-summary-item > strong { font-size: 12px; } body:has(#hiredView.active):has(#hiredView.client-focused) #hiredDetailGrid { gap: 8px; } body:has(#hiredView.active):has(#hiredView.client-focused) #hiredDetailGrid .hired-detail-info-group { padding: 10px; } body:has(#hiredView.active):has(#hiredView.client-focused) #hiredDetailGrid .hired-detail-info-group h4 { margin-bottom: 7px; font-size: 11px; } body:has(#hiredView.active):has(#hiredView.client-focused) #hiredDetailGrid .hired-detail-info-group dl { gap: 6px; } body:has(#hiredView.active):has(#hiredView.client-focused) #hiredDetailGrid .hired-detail-info-group dl > div { padding: 6px 7px; } body:has(#hiredView.active):has(#hiredView.client-focused) #hiredDetailGrid dd { font-size: 11px; } } @media (max-width: 640px) { #hiredView .client-overview-profile-card { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 14px; } #hiredView .client-overview-profile-main { align-items: flex-start; } #hiredView .client-overview-profile-identity h3, #hiredView .client-overview-profile-identity p { white-space: normal; } #hiredView .client-overview-profile-facts { justify-content: flex-start; } } /* Mobile dashboard header: reserve a full row for the dashboard picker. */ @media (max-width: 720px) { .topbar-title-area, .topbar-copy { min-width: 0; } .topbar-title-area { flex: 1 1 0; } .topbar h1 { min-width: 0; overflow: hidden; overflow-wrap: normal; text-overflow: ellipsis; white-space: nowrap; } body:has(#dashboardView.active) .topbar { display: flex; flex-wrap: wrap; align-items: center; min-height: 0; height: auto; margin-bottom: 16px; padding: 12px 0 0; } body:has(#dashboardView.active) .topbar-title-area { display: block; order: 2; } body:has(#dashboardView.active) .mobile-menu { order: 1; } body:has(#dashboardView.active) .topbar-actions { order: 3; } body:has(#dashboardView.active) .topbar h1 { font-size: clamp(20px, 5.8vw, 24px); } body:has(#dashboardView.active) .dashboard-switcher { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); order: 4; width: 100%; max-width: none; flex: 1 0 100%; gap: 3px; margin: 10px 0 0; overflow: hidden; } body:has(#dashboardView.active) .dashboard-switcher-tab { min-width: 0; min-height: 42px; padding: 6px 8px; font-size: 11px; line-height: 1.25; white-space: normal; } } /* Mobile and small-tablet usability pass: keep navigation, controls, and long user-provided content legible without changing the desktop workspace. */ @media (max-width: 720px) { img, svg, video, canvas { max-width: 100%; } input, select, textarea, button { max-width: 100%; } .sidebar-brand-row { margin-bottom: 18px; padding-bottom: 14px; } .main-nav { gap: 13px; } .nav-group { gap: 3px; } .nav-group + .nav-group { padding-top: 12px; } .nav-group-label { margin: 0 9px 3px; font-size: 9px; } .sidebar .nav-link, .sidebar .sidebar-action { min-width: 0; min-height: 44px; padding: 8px 10px; gap: 10px; font-size: 14px; } .sidebar .nav-link > span:first-child, .sidebar .sidebar-action > span:first-child { width: 18px; flex-basis: 18px; font-size: 13px; } .sidebar .nav-label, .sidebar .sidebar-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sidebar .nav-label { flex: 1 1 auto; } .sidebar .nav-count { flex: 0 0 auto; min-width: 22px; padding: 3px 6px; } .sidebar-bottom { padding-top: 9px; } .mobile-sidebar-close { width: 36px; height: 36px; flex-basis: 36px; font-size: 22px; } .topbar, .topbar-title-area, .topbar-copy, .topbar-actions, .panel-heading, .application-workspace-head, .hired-detail-heading, .weekly-report-section-heading { min-width: 0; } .topbar h1, .panel-heading h2, .application-workspace-title h2, .hired-detail-heading h2, .weekly-report-section-heading h2 { overflow-wrap: anywhere; } .topbar-actions { flex-wrap: wrap; justify-content: flex-end; } .topbar-actions .button { min-height: 40px; } .global-search-trigger span, .global-search-trigger kbd { display: none; } .global-search-trigger { width: 40px; padding: 0 !important; } .view, .dashboard-tab-panel, .panel, .card, .modal, .hired-card, .client-dashboard-panel, .client-overview-profile-card { min-width: 0; } .panel-heading, .application-workspace-head, .hired-detail-heading, .client-dashboard-heading, .client-dashboard-panel-heading { gap: 10px; } .panel-heading > *, .application-workspace-head > *, .hired-detail-heading > *, .client-dashboard-heading > *, .client-dashboard-panel-heading > * { min-width: 0; } .client-detail-tabs, .documents-tabs, .email-view-tabs, .application-view-toggle { max-width: 100%; -webkit-overflow-scrolling: touch; } .client-detail-tabs { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; } .client-detail-tab { flex: 0 0 auto; } .hired-detail-grid, .hired-detail-grid-large, .client-overview-summary, .client-invoice-panel .client-invoice-payment-summary { grid-template-columns: minmax(0, 1fr); } .client-overview-profile-facts, .hired-card-meta, .application-card-meta { overflow-wrap: anywhere; } } @media (min-width: 721px) and (max-width: 900px) { .app-shell { grid-template-columns: 218px minmax(0, 1fr); } .sidebar { padding: 18px 12px 14px; } .sidebar-brand-row { margin-bottom: 18px; padding-bottom: 14px; } .main-nav { gap: 14px; } .nav-group + .nav-group { padding-top: 12px; } .nav-link, .sidebar-action { min-width: 0; min-height: 42px; padding: 9px 10px; gap: 10px; font-size: 12px; } .nav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav-count { min-width: 22px; padding: 3px 6px; } .content { padding-right: 22px; padding-left: 22px; } } /* Keep the dashboard chooser directly beside its dashboard title on wider screens. */ @media (min-width: 721px) { body:has(#dashboardView.active) .topbar { display: flex; justify-content: normal; } body:has(#dashboardView.active) .topbar-title-area { flex: 0 1 auto; min-width: 0; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .topbar-title-area { flex: 0 1 auto; } body:has(#dashboardView.active) .dashboard-switcher { flex: 0 0 auto; margin-right: auto; } body:has(#dashboardView.active) .topbar-actions { flex: 0 0 auto; margin-left: 0; } } /* Desktop Applications workspace: retain the controls while only the records scroll. */ @media (min-width: 1100px) { body:has(#applicationsView.active) { height: 100dvh; overflow: hidden; } body:has(#applicationsView.active) .app-shell { height: 100dvh; min-height: 0; } body:has(#applicationsView.active) .content { display: grid; grid-template-rows: 56px minmax(0, 1fr); gap: 12px; height: 100dvh; min-height: 0; padding: 12px 24px 16px; overflow: hidden; } body:has(#applicationsView.active) .topbar { min-height: 0; height: 56px; margin: 0; border-bottom: 0; } body:has(#applicationsView.active) #applicationsView { display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: 0; min-width: 0; min-height: 0; overflow: hidden; } body:has(#applicationsView.active) .application-workspace-head { padding-bottom: 12px; } body:has(#applicationsView.active) .application-filters { margin: 10px 0; padding-bottom: 10px; } body:has(#applicationsView.active) .application-panel { display: grid; grid-template-rows: auto auto minmax(0, 1fr); min-height: 0; overflow: hidden; } body:has(#applicationsView.active) .application-bulk-bar { grid-row: 1; } body:has(#applicationsView.active) .application-list-head { grid-row: 2; } body:has(#applicationsView.active) .application-list { grid-row: 3; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } } /* Shared action feedback: lightweight for navigation, explicit while a real save, send, upload, or onboarding request is in progress. */ button, .button { transition: transform .16s ease, opacity .16s ease, box-shadow .16s ease, background-color .16s ease, border-color .16s ease; } button:not(:disabled):active, .button:not(:disabled):active, button.is-pressed, .button.is-pressed { transform: scale(.975); } button.is-submitting, .button.is-submitting { animation: button-submit-pulse .52s ease both; } button.is-loading, .button.is-loading { display: inline-flex; align-items: center; justify-content: center; column-gap: 8px; cursor: wait; opacity: .82; } button.is-loading::before, .button.is-loading::before { content: ''; width: .9em; height: .9em; flex: 0 0 .9em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: button-loading-spin .7s linear infinite; } @keyframes button-loading-spin { to { transform: rotate(360deg); } } body:has(#hiredView.active) .hired-list { align-items: stretch; } body:has(#hiredView.active) .hired-card { height: 100%; } body:has(#hiredView.active) .hired-card .hired-client-contact-name { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Navigation must shrink within its column instead of creating horizontal scroll. */ .sidebar .main-nav { grid-template-columns: minmax(0, 1fr); min-width: 0; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #65718b transparent; overscroll-behavior: contain; } .sidebar .nav-group { grid-template-columns: minmax(0, 1fr); min-width: 0; } .sidebar .nav-link { min-width: 0; gap: 9px; } .sidebar .nav-label { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sidebar .nav-count { flex: 0 0 auto; min-width: 22px; padding: 3px 6px; } .sidebar .sidebar-brand-row, .sidebar .sidebar-bottom { flex-shrink: 0; } .sidebar .main-nav::-webkit-scrollbar { width: 5px; } .sidebar .main-nav::-webkit-scrollbar-thumb { background: var(--theme-info-strong, #65718b); border-radius: 8px; } .sidebar .main-nav::-webkit-scrollbar-track { background: transparent; } @media (min-width: 721px) and (max-height: 800px) { .sidebar { padding-top: 14px; padding-bottom: 10px; } .sidebar .sidebar-brand-row { margin-bottom: 12px; padding-bottom: 12px; } .sidebar .main-nav { gap: 10px; } .sidebar .nav-group { gap: 3px; } .sidebar .nav-group + .nav-group { padding-top: 9px; } .sidebar .nav-group-label { margin-bottom: 3px; font-size: 9px; } .sidebar .nav-link, .sidebar .sidebar-action { min-height: 38px; padding-top: 7px; padding-bottom: 7px; font-size: 12px; } .sidebar .sidebar-bottom { padding-top: 8px; } } @media (min-width: 721px) and (max-width: 1100px) { .sidebar .nav-link { padding-left: 8px; padding-right: 8px; font-size: 12px; } } /* Compact Wallet workspace; dialogs and long lists scroll independently. */ #walletView #walletEntryPanel { position: fixed; width: min(640px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); margin: auto; overflow-y: auto; contain: layout paint style; will-change: transform; box-shadow: 0 24px 80px #17213b30; } #walletEntryPanel::backdrop { background: #17213b66; } #toApplyModal { position: fixed; inset: 0 0 0 auto; width: min(480px, 100vw); height: 100dvh; max-width: 100vw; max-height: none; margin: 0; padding: 0; overflow: hidden; border: 1px solid var(--theme-border, #e6e8f0); border-right: 0; border-radius: 16px 0 0 16px; background: var(--theme-surface, #fff); box-shadow: -12px 0 36px rgba(17, 24, 39, .16); } #toApplyModal:not([open]) { display: none; } #toApplyModal[open] { display: flex; flex-direction: column; } #toApplyModal::backdrop { background: rgba(20, 24, 20, .43); } #toApplyModal #toApplyForm { display: flex; flex: 1; flex-direction: column; min-height: 0; max-height: none; padding: 24px; overflow-y: auto; } #toApplyModal #toApplyForm .modal-heading { flex: 0 0 auto; } #toApplyModal #toApplyForm > .form-field { flex: 0 0 auto; } #toApplyModal #toApplyForm .modal-actions { margin-top: auto; flex: 0 0 auto; padding-top: 20px; } .to-apply-actions-panel { position: fixed; inset: 0 0 0 auto; display: flex; flex-direction: column; width: min(420px, 100vw); height: 100dvh; max-width: 100vw; max-height: none; margin: 0; padding: 0; overflow: hidden; border: 1px solid var(--theme-border, #e6e8f0); border-right: 0; border-radius: 16px 0 0 16px; background: var(--theme-surface, #fff); color: var(--ink); box-shadow: -12px 0 36px rgba(17, 24, 39, .16); } .to-apply-actions-panel:not([open]) { display: none; } .to-apply-actions-panel[open] { display: flex; } .to-apply-actions-panel::backdrop { background: rgba(20, 24, 20, .43); } .to-apply-actions-header { display: flex; align-items: flex-start; min-height: 122px; padding: 26px 22px 20px; border-bottom: 1px solid var(--theme-border, #e6e8f0); } .to-apply-actions-header h2 { margin: 0; color: var(--navy); font-size: 23px; font-weight: 650; line-height: 1.25; } .to-apply-actions-header p:last-child { margin: 5px 0 0; color: var(--theme-muted, #6b7280); font-size: 13px; overflow-wrap: anywhere; } .to-apply-actions-list { display: grid; align-content: start; gap: 10px; padding: 20px; overflow-y: auto; } .to-apply-action-panel-button { display: grid; grid-template-columns: 38px minmax(0, 1fr) 16px; align-items: center; gap: 12px; width: 100%; min-height: 72px; padding: 12px 14px; border: 1px solid var(--theme-border, #e6e8f0); border-radius: 10px; background: var(--theme-surface, #fff); color: var(--navy); text-align: left; cursor: pointer; } .to-apply-action-panel-button:hover, .to-apply-action-panel-button:focus-visible { border-color: var(--theme-border, #c7ccef); background: var(--theme-surface, #f8f9ff); outline: 0; } .to-apply-action-panel-button > span:nth-child(2) { display: grid; gap: 4px; min-width: 0; } .to-apply-action-panel-button strong { font-size: 12px; } .to-apply-action-panel-button small { color: var(--theme-muted, #72798a); font-size: 10px; } .to-apply-action-panel-button > i:last-child { color: var(--theme-subtle, #9aa2b2); font-size: 12px; } .to-apply-action-panel-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; background: var(--theme-raised, #f0f1fa); color: var(--theme-info-text, #4f5aa3); font-size: 15px; } .to-apply-action-panel-button.is-danger { border-color: var(--theme-border, #f0d7d9); color: var(--theme-danger-text, #8f2e38); } .to-apply-action-panel-button.is-danger:hover, .to-apply-action-panel-button.is-danger:focus-visible { border-color: var(--theme-danger-border, #e5aeb3); background: var(--theme-surface, #fff8f8); } .to-apply-actions-footer { margin-top: auto; padding: 16px 20px max(16px, env(safe-area-inset-bottom)); border-top: 1px solid var(--theme-border, #e6e8f0); } @media (max-width: 600px) { .to-apply-actions-panel { width: 100vw; border-radius: 0; } } #walletEntryPanel .wallet-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } .wallet-add-entry-button { display: inline-flex; align-items: center; gap: 8px; } .wallet-add-entry-button kbd { min-width: 18px; padding: 2px 5px; border: 1px solid rgba(255,255,255,.35); border-radius: 4px; background: rgba(255,255,255,.14); color: inherit; font-size: 10px; line-height: 1.2; } .wallet-amount-field { min-width: 0; } .wallet-amount-keypad { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin-top: 7px; } .wallet-amount-keypad button { min-height: 30px; padding: 4px 6px; border: 1px solid var(--theme-border, #d9deea); border-radius: 6px; background: var(--theme-raised, #f7f8fb); color: var(--theme-info-text, #25304f); font-size: 12px; font-weight: 700; cursor: pointer; } .wallet-amount-keypad button:hover, .wallet-amount-keypad button:focus-visible { border-color: var(--theme-info-border, #8793bd); background: var(--theme-raised, #eef1fb); outline: none; } .wallet-amount-keypad button[data-wallet-key="clear"] { color: var(--theme-danger-text, #9b4c55); font-size: 10px; } .wallet-keypad-zero { grid-column: span 2; } @media (min-width: 900px) and (min-height: 600px) { body:has(#walletView.active) { height: 100dvh; overflow: hidden; background: var(--theme-raised, #f5f6fa); } body:has(#walletView.active) .app-shell { height: 100dvh; min-height: 0; } body:has(#walletView.active) .content { display: grid; grid-template-rows: 48px minmax(0, 1fr); gap: 8px; height: 100dvh; min-height: 0; min-width: 0; padding: 12px 24px 16px; overflow: hidden; } body:has(#walletView.active) .topbar { height: 48px; min-height: 0; margin: 0; border: 0; } body:has(#walletView.active) #pageTitle { font-size: 24px; } #walletView.active { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); grid-template-rows: 36px 96px auto 152px minmax(0, 1fr); gap: 10px 14px; min-height: 0; overflow: hidden; } #walletView .wallet-intro { grid-column: 1 / -1; grid-row: 1; margin: 0; flex-wrap: nowrap; } #walletView .wallet-intro h2 { font-size: 14px; margin: 0 0 3px; } #walletView .wallet-intro p { font-size: 11px; } #walletView .wallet-intro .button { min-height: 34px; white-space: nowrap; padding: 7px 12px; } #walletView .wallet-summary { grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; } #walletView .wallet-stat { padding: 12px 16px; gap: 7px; border-radius: 11px; } #walletView .wallet-stat > strong { font-size: 24px; line-height: 1.15; } #walletView .wallet-stat > span { font-size: 11px; } #walletView .wallet-stat > small { font-size: 10px; } #walletInvoiceNotice { grid-column: 1 / -1; grid-row: 3; margin: 0; font-size: 11px; line-height: 1.4; } #walletView .wallet-section { grid-row: 4; min-height: 0; min-width: 0; margin: 0; padding: 12px; border: 1px solid var(--theme-border, #e4e7ef); border-radius: 11px; background: var(--theme-surface, #fff); display: flex; flex-direction: column; gap: 8px; } #walletView .wallet-section-heading { margin: 0; gap: 5px 10px; } #walletView .wallet-section-heading h3 { font-size: 13px; } #walletView .wallet-section-heading > span { font-size: 10px; } #walletView .wallet-accounts { min-height: 0; overflow-y: auto; gap: 8px; align-content: start; } #walletView #walletClientRates { grid-template-columns: minmax(0, 1fr); } #walletView #walletClientRates .wallet-account { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 8px 10px; gap: 6px; border: 0; background: var(--theme-raised, #f7f8fc); border-radius: 7px; } #walletView #walletClientRates .wallet-account h4 { overflow-wrap: anywhere; } #walletView #walletClientRates .wallet-account > span { display: none; } #walletView #walletClientRates .wallet-account > strong { font-size: 14px; } #walletView #walletAccounts { grid-template-columns: repeat(3, minmax(0, 1fr)); } #walletView #walletAccounts .wallet-account { gap: 8px; padding: 9px; border-radius: 8px; background: var(--theme-surface, #fafbfe); } #walletView .wallet-account h4 { font-size: 11px; } #walletView .wallet-account > strong { font-size: 18px; } #walletView .wallet-account > span { font-size: 10px; } #walletView .wallet-account-mark { width: 24px; height: 24px; flex-shrink: 0; border-radius: 7px; } #walletView .wallet-account > div { gap: 6px; } #walletView .wallet-transactions { grid-column: 1 / -1; grid-row: 5; display: flex; flex-direction: column; gap: 8px; min-height: 0; margin: 0; padding: 12px 16px; overflow: hidden; border-radius: 11px; } #walletTransactionList { flex: 1; min-height: 0; overflow: auto; } #walletView .wallet-table-scroll { overflow: visible; } #walletView .wallet-table th { position: sticky; top: 0; z-index: 1; padding: 9px; } #walletView .wallet-table td { padding: 10px 9px; } #walletView .wallet-empty { padding: 16px; } #walletView .wallet-empty > i { font-size: 20px; } #walletView .wallet-empty h4 { margin: 8px 0 5px; } #walletView .wallet-empty p { margin: 0; } #walletView .wallet-filter select { min-height: 30px; padding: 4px 8px; } } @media (max-width: 600px) { #toApplyModal { width: 100vw; border-radius: 0; } .wallet-actions-panel { border-radius: 0; } #walletEntryPanel .wallet-form-grid { grid-template-columns: minmax(0, 1fr); } } @keyframes button-submit-pulse { 0% { box-shadow: 0 0 0 0 rgba(64, 88, 135, .26); } 55% { box-shadow: 0 0 0 5px rgba(64, 88, 135, 0); } 100% { box-shadow: 0 0 0 0 rgba(64, 88, 135, 0); } } @media (prefers-reduced-motion: reduce) { button, .button { transition-duration: 0ms; } button.is-submitting, .button.is-submitting, button.is-loading::before, .button.is-loading::before { animation: none; } } /* Match the Active Clients header on the other record pages. */ body:has(:is(#inboxView, #applicationsView, #toApplyView, #documentsView).active) .content { padding-top: 12px; padding-inline: 24px; } body:has(:is(#inboxView, #applicationsView, #toApplyView, #documentsView).active) .topbar { min-height: 56px; height: auto; margin: 0 0 12px; border: 0; align-items: center; } body:has(:is(#inboxView, #applicationsView, #toApplyView, #documentsView).active) .topbar-title-area { gap: 9px; } body:has(:is(#inboxView, #applicationsView, #toApplyView, #documentsView).active) #pageTitle { margin: 0; color: var(--theme-text, #111827); font-size: 24px; font-weight: 650; letter-spacing: -.02em; line-height: 1.2; } body:has(:is(#inboxView, #applicationsView, #toApplyView, #documentsView).active) #pageEyebrow { display: none; } body:has(:is(#inboxView, #applicationsView, #toApplyView, #documentsView).active) .page-context { margin: 3px 0 0; font-size: 11px; line-height: 1.4; } @media (min-width: 1100px) { body:has(#applicationsView.active) .topbar { height: 56px; margin: 0; } } @media (max-width: 640px) { body:has(:is(#inboxView, #applicationsView, #toApplyView, #documentsView).active) .content { padding-top: 8px; padding-inline: 16px; } body:has(:is(#inboxView, #applicationsView, #toApplyView, #documentsView).active) #pageTitle { font-size: 21px; } body:has(:is(#inboxView, #applicationsView, #toApplyView, #documentsView).active) .topbar-actions { gap: 8px; } } @media (pointer: coarse) { #inboxView .email-summary-item { min-height: 44px; } } /* Compact editorial workspace for News. */ body:has(#newsView.active) .content { width: 100%; max-width: 1180px; min-height: 100dvh; margin: 0 auto; padding: 10px 28px 24px; } body:has(#newsView.active) .topbar { min-height: 48px; height: 48px; margin: 0 0 10px; border-bottom: 0; } body:has(#newsView.active) .topbar-copy { display: flex; align-items: center; } body:has(#newsView.active) #pageTitle { color: var(--theme-text, #171a18); font-family: var(--font-ui); font-size: 20px; font-weight: 600; letter-spacing: -.025em; } body:has(#newsView.active) #pageEyebrow { display: none; } #newsView.active { display: block; width: 100%; max-width: 1080px; margin: 0 auto; } #newsView .news-live-panel { min-height: calc(100dvh - 92px); gap: 0; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; } #newsView .news-live-toolbar { min-height: 50px; padding: 7px 0 12px; border-bottom: 1px solid var(--theme-border, #dfe3df); } #newsView .news-live-toolbar > span { color: var(--theme-muted, #8a908b); font-size: 9px; letter-spacing: .02em; } #newsView .news-live-meta { display: flex; align-items: center; gap: 8px; color: var(--theme-muted, #8a908b); font-size: 9px; } #newsView .news-usage { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border: 1px solid var(--theme-border, #dfe4df); border-radius: 999px; background: var(--theme-surface, #fff); color: var(--theme-muted, #5f6962); font-weight: 700; white-space: nowrap; } #newsView .news-usage.is-warning { border-color: var(--theme-warning-border, #eed8a1); background: var(--theme-raised, #fff8e8); color: var(--theme-warning-text, #8a641b); } #newsView .news-usage.is-exhausted { border-color: var(--theme-border, #efc2c8); background: var(--theme-raised, #fff0f2); color: var(--theme-danger-text, #a63e4d); } #newsView .news-usage.is-unavailable { border-color: var(--theme-border, #e0e2e0); background: var(--theme-raised, #f4f5f4); color: var(--theme-muted, #858b86); } #newsView .news-live-controls { gap: 8px; } #newsView .news-search { width: min(230px, 28vw); height: 32px; border-color: var(--theme-border, #daddda); border-radius: 999px; background: var(--theme-surface, #fff); } #newsView .news-category-select select { height: 32px; min-width: 236px; border-color: var(--theme-border, #daddda); border-radius: 999px; background-color: var(--theme-surface, #fff); } #newsView #refreshNews { min-height: 32px; height: 32px; padding: 0 13px; border-radius: 999px; } #newsView .news-live-status { min-height: 22px; margin: 0; padding: 8px 0 0; color: var(--theme-muted, #7a817c); text-align: center; } #newsView .news-live-grid { width: 100%; margin: 0 auto; } #newsView .news-live-grid:has(> .news-empty:only-child) { min-height: calc(100dvh - 190px); place-items: center; } #newsView .news-live-grid:has(> .news-category-loader:only-child) { min-height: calc(100dvh - 190px); place-items: center; } /* Social trend tracking */ #socialTrendsView { display: none; gap: 16px; } #socialTrendsView.active { display: grid; } .social-trends-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 4px 0 16px; border-bottom: 1px solid var(--line); } .social-trends-intro > div { min-width: 0; } .social-trends-intro .eyebrow { margin: 0 0 5px; color: var(--theme-info-text, #667085); } .social-trends-intro h2 { margin: 0; color: var(--navy); font-size: 21px; line-height: 1.25; } .social-trends-intro p:last-child { max-width: 650px; margin: 5px 0 0; color: var(--theme-muted, #707872); font-size: 12px; line-height: 1.5; } .social-trend-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .social-trend-summary article { display: grid; gap: 8px; min-height: 88px; padding: 15px 17px; border: 1px solid var(--theme-border, #e2e6e2); border-radius: 11px; background: var(--theme-surface, #fff); } .social-trend-summary span { color: var(--theme-muted, #737b75); font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .social-trend-summary strong { overflow: hidden; color: var(--theme-info-text, #252d4f); font-size: 22px; font-weight: 700; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; } .social-trend-toolbar { display: grid; grid-template-columns: minmax(240px, 1fr) 190px; gap: 10px; } .social-trend-toolbar .select-field select { width: 100%; min-height: 42px; } .social-trend-search { min-height: 42px; } .social-trend-data-note { display: flex; align-items: flex-start; gap: 9px; margin: -4px 0 0; padding: 10px 12px; border: 1px solid var(--theme-border, #e7e3ce); border-radius: 9px; background: var(--theme-surface, #fffdf5); color: var(--theme-warning-text, #6f6850); font-size: 11px; line-height: 1.45; } .social-trend-data-note i { margin-top: 2px; color: var(--theme-warning-text, #9a8132); } .social-trend-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .social-trend-card { display: grid; gap: 15px; min-width: 0; padding: 17px; border: 1px solid var(--theme-border, #e1e5e2); border-radius: 12px; background: var(--theme-surface, #fff); box-shadow: 0 2px 8px rgba(24, 34, 29, .035); } .social-trend-card > header, .social-trend-card > footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .social-trend-platform, .social-trend-scope { display: inline-flex; align-items: center; gap: 7px; min-height: 26px; padding: 0 9px; border-radius: 999px; font-size: 10px; font-weight: 700; } .social-trend-platform { background: var(--theme-raised, #f2f3f7); color: var(--theme-info-text, #343d5b); } .social-trend-platform.platform-tiktok { background: var(--theme-raised, #eefafa); color: var(--theme-info-text, #0a6d70); } .social-trend-platform.platform-instagram { background: var(--theme-raised, #fff1f7); color: var(--theme-violet-text, #a33468); } .social-trend-platform.platform-youtube { background: var(--theme-raised, #fff0f0); color: var(--theme-danger-text, #b42f35); } .social-trend-platform.platform-facebook { background: var(--theme-raised, #eef4ff); color: var(--theme-info-text, #2d5fa8); } .social-trend-scope { background: var(--theme-raised, #edf7ef); color: var(--theme-success-text, #377147); } .social-trend-scope.is-sample { background: var(--theme-raised, #fff7e8); color: var(--theme-warning-text, #8a641b); } .social-trend-card-copy { min-width: 0; } .social-trend-card-copy h3 { margin: 0; overflow-wrap: anywhere; color: var(--theme-info-text, #202943); font-size: 17px; line-height: 1.3; } .social-trend-card-copy p { display: -webkit-box; overflow: hidden; margin: 6px 0 0; color: var(--theme-muted, #727a74); font-size: 11px; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .social-trend-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; } .social-trend-metrics > div { display: grid; gap: 6px; min-width: 0; padding: 12px; border-radius: 9px; background: var(--theme-raised, #f7f8f7); } .social-trend-metrics span { color: var(--theme-muted, #747c76); font-size: 10px; } .social-trend-metrics strong { overflow: hidden; color: var(--theme-info-text, #1f2948); font-size: 21px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; } .social-trend-card > footer { padding-top: 12px; border-top: 1px solid var(--theme-border, #edf0ed); color: var(--theme-muted, #7a827c); font-size: 10px; } .social-trend-card > footer > div { display: flex; align-items: center; gap: 7px; } .social-trend-card > footer .button { min-height: 33px; padding: 6px 10px; font-size: 10px; } .social-trend-card > footer .icon-button { width: 33px; height: 33px; } .social-trend-empty { display: grid; place-items: center; grid-column: 1 / -1; min-height: 280px; padding: 42px 20px; border: 1px dashed var(--theme-border, #d9dfda); border-radius: 12px; background: var(--theme-surface, #fafbfa); text-align: center; } .social-trend-empty > span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--theme-raised, #eff2ef); color: var(--theme-muted, #657067); } .social-trend-empty h3 { margin: 13px 0 0; color: var(--theme-text, #303830); font-size: 16px; } .social-trend-empty p { max-width: 430px; margin: 6px 0 15px; color: var(--theme-muted, #7b837d); font-size: 11px; line-height: 1.5; } .social-trend-drawer .social-trend-delete { margin-right: auto; } @media (max-width: 900px) { .social-trend-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 720px) { .social-trends-intro { align-items: stretch; flex-direction: column; gap: 14px; } .social-trends-intro .button { align-self: flex-start; } .social-trend-toolbar { grid-template-columns: minmax(0, 1fr); } .social-trend-grid { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 460px) { .social-trend-summary { grid-template-columns: minmax(0, 1fr); } .social-trend-card > footer { align-items: flex-start; flex-direction: column; } .social-trend-card > footer > div { width: 100%; justify-content: flex-end; } } #newsView .news-category-loader { display: grid; justify-items: center; gap: 9px; width: min(100%, 340px); padding: 44px 24px; color: var(--theme-muted, #727b74); text-align: center; } #newsView .news-category-loader-ring { width: 38px; height: 38px; border: 3px solid var(--theme-border, #e5e8e5); border-top-color: #66765f; border-radius: 50%; animation: news-category-spin .8s linear infinite; } #newsView .news-category-loader h2 { margin: 5px 0 0; color: var(--theme-text, #303632); font-family: var(--font-ui); font-size: 18px; font-weight: 600; } #newsView .news-category-loader p { margin: 0; color: var(--theme-muted, #858b86); font-size: 11px; } #newsView .news-category-loader-dots { display: inline-flex; gap: 5px; margin-top: 3px; } #newsView .news-category-loader-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--theme-action, #899486); animation: news-category-pulse 1s ease-in-out infinite; } #newsView .news-category-loader-dots i:nth-child(2) { animation-delay: .15s; } #newsView .news-category-loader-dots i:nth-child(3) { animation-delay: .3s; } @keyframes news-category-spin { to { transform: rotate(360deg); } } @keyframes news-category-pulse { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } } @media (prefers-reduced-motion: reduce) { #newsView .news-category-loader-ring, #newsView .news-category-loader-dots i { animation-duration: 1.8s; } } #newsView .news-empty { width: min(100%, 360px); min-height: 0; padding: 42px 24px; align-content: center; justify-self: center; border: 1px solid var(--theme-border, #e5e7e5); border-radius: 18px; background: var(--theme-translucent-surface, rgba(255,255,255,.72)); box-shadow: 0 16px 45px rgba(27,36,29,.045); } #newsView .news-empty i { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--theme-raised, #f4f1e7); color: var(--theme-warning-text, #8e7d41); font-size: 17px; } #newsView .news-empty h2 { color: var(--theme-text, #303632); font-family: var(--font-ui); font-size: 18px; font-weight: 600; } #newsView .news-empty p { max-width: 260px; color: var(--theme-muted, #858b86); line-height: 1.5; } #newsView .news-lead-layout { margin-top: 12px; border-radius: 12px; } @media (max-width: 720px) { body:has(#newsView.active) .content { padding: 8px 16px 20px; } body:has(#newsView.active) .topbar { height: 44px; min-height: 44px; margin-bottom: 8px; } body:has(#newsView.active) #pageTitle { font-size: 18px; } #newsView .news-live-panel { min-height: calc(100dvh - 76px); } #newsView .news-live-toolbar { align-items: stretch; gap: 9px; padding-bottom: 10px; } #newsView .news-live-meta { justify-content: space-between; } #newsView .news-live-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; } #newsView .news-search { grid-column: 1 / -1; width: 100%; } #newsView .news-category-select select { width: 100%; min-width: 0; } #newsView .news-live-grid:has(> .news-empty:only-child) { min-height: calc(100dvh - 226px); } #newsView .news-live-grid:has(> .news-category-loader:only-child) { min-height: calc(100dvh - 226px); } #newsView .news-empty { width: min(100%, 320px); padding: 34px 20px; } } /* Compact list filters; retain larger mobile inputs for comfortable entry. */ @media (min-width: 769px) { #inboxView .email-filter-controls { grid-template-columns: repeat(2, minmax(0, 150px)); gap: 7px; } #inboxView .application-filter-field { gap: 4px; font-size: 9px; } #inboxView .application-filter-field input, #inboxView .application-filter-field select { height: 30px; min-height: 30px; padding: 0 7px; font-size: 11px; font-weight: 500; } #applicationsView .application-filter-controls { gap: 7px; } #applicationsView .application-filter-field { gap: 4px; font-size: 9px; } #applicationsView .application-filter-field input, #applicationsView .application-filter-field select { height: 30px; min-height: 30px; padding: 0 7px; font-size: 11px; font-weight: 500; } body:has(#hiredView.active) #hiredView > .toolbar { gap: 8px; } body:has(#hiredView.active) #hiredView > .toolbar > .search-field, body:has(#hiredView.active) #hiredView > .toolbar > .date-filter, body:has(#hiredView.active) #hiredView > .toolbar > .select-field { height: 32px; min-height: 32px; } body:has(#hiredView.active) #hiredView > .toolbar .select-field select, body:has(#hiredView.active) #hiredView > .toolbar .date-filter input { height: 32px; min-height: 32px; padding: 0 8px; border-radius: 6px; font-size: 11px; } body:has(#hiredView.active) #hiredView > .toolbar .search-field input { font-size: 11px; } } @media (min-width: 1024px) { body:has(#hiredView.active) #hiredView > .toolbar { grid-template-columns: minmax(180px, 1fr) 124px 124px; } } /* Compact inbox service status, beside the email tabs. */ #inboxView .email-panel-heading { flex-wrap: wrap; } #inboxView .email-selection-trigger { min-height: 28px; padding: 5px 8px; gap: 5px; border-radius: 6px; font-size: 11px; font-weight: 600; line-height: 1.3; white-space: nowrap; } #inboxView .email-selection-trigger i { font-size: 10px; } .email-header-status-group { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; max-width: 100%; margin-left: auto; } .email-status-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; max-width: 100%; padding: 4px 8px; border: 1px solid var(--theme-border, #e5e9ed); border-radius: 6px; background: var(--theme-surface, #fafbfc); color: var(--theme-info-text, #536471); font-size: 11px; line-height: 1.5; } .email-status-chip[hidden] { display: none; } .email-status-chip p { margin: 0; min-width: 0; font-size: inherit; line-height: inherit; overflow-wrap: anywhere; } .email-status-chip time { padding-left: 6px; border-left: 1px solid var(--theme-border, #e1e6eb); color: var(--theme-info-text, #7a8794); font-size: 10px; font-variant-numeric: tabular-nums; white-space: nowrap; } .email-status-dot { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: var(--theme-hover, #97a3af); } .gmail-sync-summary[data-state="synced"] .email-status-dot { background: var(--theme-success-strong, #3a956d); } .gmail-sync-summary[data-state="permission"], .gmail-sync-summary[data-state="partial"], .gmail-sync-summary[data-state="paused"], .email-ai-summary[data-state="attention"] .email-ai-trigger, .email-ai-summary[data-state="offline"] .email-ai-trigger { background: var(--theme-raised, #fffaf1); border-color: var(--theme-border, #edddbc); color: var(--theme-warning-text, #895f24); } .gmail-sync-summary[data-state="syncing"] .email-status-dot, .gmail-sync-summary[data-state="renewing"] .email-status-dot { width: 10px; height: 10px; border: 2px solid var(--theme-border, #d4dce5); border-top-color: #526795; background: transparent; animation: gmail-sync-spin 1s linear infinite; } .email-status-chip .text-button { padding: 0 0 0 4px; font-size: 11px; white-space: nowrap; } .email-ai-summary[hidden] { display: none; } .email-ai-trigger { cursor: pointer; font-family: inherit; text-align: left; } .email-ai-trigger:hover { background: var(--theme-raised, #f0f2f8); border-color: var(--theme-border, #cbd2e4); } .email-ai-trigger:focus-visible { outline: 2px solid var(--theme-info-border, #6974a5); outline-offset: 2px; } .email-ai-trigger > i { flex: 0 0 auto; color: var(--theme-info-text, #6974a5); font-size: 10px; } .email-ai-spinner { display: none; width: 10px; height: 10px; flex: 0 0 auto; border: 2px solid var(--theme-border, #d4dce5); border-top-color: #6974a5; border-radius: 50%; } .email-ai-summary[data-state="processing"] .email-ai-spinner { display: inline-block; animation: gmail-sync-spin .8s linear infinite; } .email-ai-summary[data-state="processing"] .email-ai-trigger > i { display: none; } .email-ai-details { position: fixed; inset: auto; z-index: 1000; margin: 0; width: min(320px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; box-sizing: border-box; padding: 14px; border: 1px solid var(--theme-border, #dde3ed); border-radius: 9px; background: var(--theme-surface, #fff); color: var(--theme-info-text, #536471); box-shadow: 0 8px 26px rgba(25, 36, 60, .14); font-size: 11px; line-height: 1.55; } .email-ai-details[hidden], .email-ai-detail-row[hidden] { display: none; } .email-ai-details-title { display: block; margin-bottom: 7px; color: var(--theme-info-text, #26334b); font-size: 12px; } .email-ai-details p { margin: 0 0 10px; overflow-wrap: anywhere; } .email-ai-detail-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 6px 0; border-top: 1px solid var(--theme-border, #edf0f5); } .email-ai-detail-row > strong { max-width: 60%; color: var(--theme-info-text, #34435c); text-align: right; font-weight: 600; } .email-ai-details .email-ai-details-scope { margin: 10px 0 0; color: var(--theme-info-text, #748091); font-size: 10px; } .email-ai-usage { flex: 0 0 auto; padding: 1px 5px; border-radius: 4px; background: var(--theme-raised, #edf0f8); color: var(--theme-info-text, #596793); font-size: 10px; font-weight: 600; font-variant-numeric: tabular-nums; } .email-ai-summary[data-state="attention"] .email-ai-usage { background: var(--theme-warning-soft, #f4e9d6); color: var(--theme-warning-text, #895f24); } @keyframes gmail-sync-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .gmail-sync-summary .email-status-dot, .email-ai-spinner { animation: none !important; } } @media (max-width: 1050px) { .email-header-status-group { order: 3; flex-basis: 100%; margin-left: 0; } #inboxView .email-panel-heading-actions { margin-left: auto; } } @media (max-width: 480px) { .email-header-status-group { align-items: flex-start; gap: 6px; } .email-status-chip { font-size: 10px; padding: 4px 6px; } } .email-task-source { overflow-wrap:anywhere; color:var(--theme-info-text, #536471); font-size:12px; line-height:1.6; margin:8px 0; } .task-source-email { font-size:11px; padding:0; } #clientTaskScheduleSection[hidden], #clientTaskOneOffFields[hidden] { display:none; } #hiredView .client-task-created { margin-top: 5px; color: var(--workspace-muted); font-size: 10px; line-height: 1.5; overflow-wrap: anywhere; } /* Paid account tracker */ body:has(#subscriptionsView.active) .topbar { height: 48px; min-height: 0; margin: 0 0 8px; border: 0; } body:has(#subscriptionsView.active) .topbar h1 { margin: 0; font-size: 24px; letter-spacing: -.02em; } .subscriptions-intro { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; } .subscriptions-intro h2 { margin: 0 0 3px; font-size: 14px; line-height: 1.4; color: var(--theme-info-text, #33425b); } .subscriptions-intro p { margin: 0; color: var(--theme-info-text, #718092); font-size: 11px; line-height: 1.6; } .subscriptions-view .button, .subscription-editor .button { min-height: 32px; padding: 7px 11px; font-size: 11px; white-space: nowrap; } .subscriptions-summary { display: flex; flex-wrap: wrap; gap: 0; margin-bottom: 14px; padding: 10px 0; border-top: 1px solid var(--theme-border, #e1e6ed); border-bottom: 1px solid var(--theme-border, #e1e6ed); } .subscriptions-summary article { display: flex; align-items: center; gap: 8px; padding: 0 16px; border-right: 1px solid var(--theme-border, #e1e6ed); } .subscriptions-summary article:first-child { padding-left: 0; } .subscriptions-summary article:last-child { border-right: 0; } .subscriptions-summary article > span { color: var(--theme-info-text, #526173); font-size: 11px; font-weight: 600; } .subscriptions-summary strong { color: var(--theme-info-text, #202c46); font-size: 14px; line-height: 1.2; } .subscriptions-summary small { display: none; } .subscriptions-toolbar { display: flex; align-items: center; gap: 10px; } .subscriptions-toolbar .search-field { display: flex; align-items: center; gap: 8px; flex: 1; max-width: 380px; height: 34px; padding: 0 10px; border: 1px solid var(--theme-border, #dfe5ec); border-radius: 6px; background: var(--theme-surface, #fff); color: var(--theme-info-text, #81909e); } .subscriptions-toolbar .search-field input { width: 100%; min-width: 0; height: 30px; padding: 0; border: 0; background: transparent; font-size: 12px; } .subscriptions-toolbar select { height: 34px; padding: 5px 28px 5px 10px; border: 1px solid var(--theme-border, #dfe5ec); border-radius: 6px; background: var(--theme-surface, #fff); font-size: 11px; } .subscriptions-count { margin: 12px 0; color: var(--theme-info-text, #788595); font-size: 11px; } .subscriptions-grid { display: grid; width: 100%; min-width: 0; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 12px; align-items: stretch; } .subscription-card { display: flex; flex-direction: column; min-width: 0; padding: 14px; border: 1px solid var(--theme-border, #e0e5ec); border-radius: 9px; background: var(--theme-surface, #fff); box-shadow: 0 1px 3px #25324a05; } .subscription-card-heading { display: flex; flex: 1; align-items: flex-start; justify-content: space-between; gap: 10px; } .subscription-card-heading > div { flex: 1; min-width: 0; } .subscription-card h2 { min-height: 2.8em; margin: 0; color: var(--theme-info-text, #25324a); font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; } .subscription-card-heading p { margin: 4px 0 0; color: var(--theme-info-text, #748294); font-size: 11px; overflow-wrap: anywhere; } .subscription-status { flex-shrink: 0; padding: 4px 7px; border-radius: 5px; background: var(--theme-raised, #edf6f1); color: var(--theme-success-text, #397052); font-size: 10px; font-weight: 600; } .subscription-card[data-state="soon"] .subscription-status { background: var(--theme-warning-soft, #fff5df); color: var(--theme-warning-text, #946b1c); } .subscription-card[data-state="expired"] .subscription-status { background: var(--theme-raised, #fff0f1); color: var(--theme-danger-text, #b64d5b); } .subscription-card[data-state="cancelled"] .subscription-status, .subscription-card[data-state="date-needed"] .subscription-status { background: var(--theme-raised, #f0f2f5); color: var(--theme-info-text, #718092); } .subscription-plan { margin: 12px 0 3px; color: var(--theme-info-text, #718092); font-size: 10px; } .subscription-price { margin: 0 0 10px; color: var(--theme-info-text, #7c8998); font-size: 10px; } .subscription-price strong { color: var(--theme-info-text, #243149); font-size: 18px; letter-spacing: -.025em; } .subscription-expiry { display: grid; grid-template-columns: 1fr auto; gap: 4px; margin-top: 12px; padding: 9px 0; border-top: 1px solid var(--theme-border, #edf0f4); font-size: 11px; } .subscription-expiry > span, .subscription-decision > span { color: var(--theme-info-text, #718092); } .subscription-expiry strong { color: var(--theme-info-text, #33425b); font-weight: 600; } .subscription-expiry small { grid-column: 1 / -1; color: var(--theme-info-text, #7d8997); font-size: 10px; } .subscription-decision { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 10px; font-size: 10px; } .subscription-decision strong { color: var(--theme-info-text, #52617a); font-weight: 500; } .subscription-notes { margin: 0 0 16px; color: var(--theme-info-text, #718092); font-size: 11px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; } .subscription-card footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--theme-border, #edf0f4); } .subscription-card footer > div { display: flex; gap: 6px; margin-left: auto; } .subscription-card footer a { color: var(--theme-info-text, #59699a); font-size: 10px; text-decoration: none; } .subscription-card footer a:hover { text-decoration: underline; } .subscriptions-empty { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 160px; padding: 20px; border: 1px dashed var(--theme-border, #dce3ec); border-radius: 9px; text-align: center; background: var(--theme-surface, #fff); color: var(--theme-info-text, #8995a7); } .subscriptions-empty > i { font-size: 24px; } .subscriptions-empty h2 { margin: 12px 0 6px; color: var(--theme-info-text, #526173); font-size: 14px; } .subscriptions-empty p { max-width: 350px; margin: 0; font-size: 12px; line-height: 1.7; } .subscription-editor { position: fixed; inset: 0 0 0 auto; width: min(420px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0; border-left: 1px solid var(--theme-border, #dfe5ed); border-radius: 14px 0 0 14px; background: var(--theme-surface, #fff); color: var(--theme-info-text, #26344b); box-shadow: -12px 0 40px #1c294025; overflow: hidden; } .subscription-panel-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 20px; border-bottom: 1px solid var(--theme-border, #e8ecf1); background: var(--theme-surface, #f8fafc); } .subscription-panel-actions > span { color: var(--theme-info-text, #718092); font-size: 10px; line-height: 1.5; } .subscription-editor::backdrop { background: #17213866; } .subscription-editor form { display: flex; flex-direction: column; height: 100%; min-height: 0; } .subscription-editor header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 22px; border-bottom: 1px solid var(--theme-border, #e8ecf1); } .subscription-editor header .eyebrow { margin: 0 0 6px; font-size: 9px; letter-spacing: .08em; color: var(--theme-muted, #8792a0); } .subscription-editor h2 { margin: 0; font-size: 19px; } .subscription-editor header .icon-button { width: 30px; height: 30px; font-size: 22px; } .subscription-form-body { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 22px; } .subscription-editor .form-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin-bottom: 16px; } .subscription-editor .form-field > span { color: var(--theme-info-text, #596779); font-size: 11px; font-weight: 600; } .subscription-editor input, .subscription-editor select, .subscription-editor textarea { box-sizing: border-box; width: 100%; min-width: 0; padding: 9px 10px; border: 1px solid var(--theme-border, #dce2ea); border-radius: 6px; background: var(--theme-surface, #fff); color: var(--theme-info-text, #33425b); font: inherit; font-size: 12px; } .subscription-editor textarea { resize: vertical; } .subscription-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .subscription-form-hint, .subscription-renewal-help { margin: 0 0 16px; color: var(--theme-info-text, #82909f); font-size: 11px; line-height: 1.7; } .subscription-form-error { padding: 10px; border-radius: 6px; background: var(--theme-raised, #fff0f1); color: var(--theme-danger-text, #ab4353); font-size: 12px; line-height: 1.6; } .subscription-editor footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 16px 22px; border-top: 1px solid var(--theme-border, #e8ecf1); } .subscription-editor footer > div { display: flex; gap: 6px; margin-left: auto; } .subscription-editor .subscription-delete { color: var(--theme-danger-text, #b44957); border-color: var(--theme-border, #efdae0); } .subscription-editor [hidden] { display: none; } #applicationsView #applicationListLabel { cursor: help; } #applicationsView #applicationListLabel:focus-visible { outline: 2px solid var(--theme-success-border, #698b73); outline-offset: 4px; border-radius: 2px; } #applicationsView .application-data-table th { padding: 8px 10px; font-size: 10px; } #applicationsView .application-data-table td { padding: 6px 9px; font-size: 11.5px; line-height: 1.35; } #applicationsView .application-data-table td strong { font-size: 11.5px; line-height: 1.35; } #applicationsView .application-data-table td small { margin-top: 2px; font-size: 10px; line-height: 1.35; } #applicationsView .application-data-table .status-pill { padding: 3px 7px; font-size: 10px; line-height: 1.3; } #applicationsView .application-data-table .match-badge { font-size: 10px; } #applicationsView .application-data-table .application-actions-trigger { width: 28px; height: 28px; min-height: 28px; font-size: 15px; } #applicationsView .application-board-card { padding: 8px; gap: 6px; } #applicationsView .application-board-card-open { gap: 3px; } #applicationsView .application-board-card-open strong { font-size: 12px; } #applicationsView .application-board-card-open span, #applicationsView .application-board-card-open small { font-size: 10.5px; } @media (max-width: 600px) { body:has(#subscriptionsView.active) .topbar h1 { font-size: 21px; } .subscriptions-intro { align-items: flex-start; } .subscriptions-summary { gap: 8px 0; } .subscriptions-summary article { padding: 0 10px; gap: 6px; } .subscriptions-summary article:first-child { padding-left: 0; } .subscriptions-summary small { display: none; } .subscriptions-summary strong { font-size: 14px; } .subscriptions-toolbar .search-field { max-width: none; min-width: 0; } .subscriptions-toolbar select { max-width: 135px; } .subscription-editor { border-radius: 0; } } @media (min-width: 900px) and (min-height: 600px) { body:has(#subscriptionsView.active) { height: 100dvh; overflow: hidden; } body:has(#subscriptionsView.active) .app-shell { height: 100dvh; min-height: 0; } body:has(#subscriptionsView.active) .content { display: grid; grid-template-rows: 48px minmax(0, 1fr); gap: 8px; width: 100%; max-width: none; height: 100dvh; min-height: 0; padding: 12px 24px 16px; overflow: hidden; } body:has(#subscriptionsView.active) .topbar { margin: 0; } #subscriptionsView.active { display: flex; flex-direction: column; min-height: 0; min-width: 0; overflow: hidden; } #subscriptionsView .subscriptions-intro { flex-shrink: 0; margin-bottom: 10px; } #subscriptionsView .subscriptions-summary { flex-shrink: 0; margin-bottom: 10px; padding: 8px 0; } #subscriptionsView .subscriptions-toolbar { flex-shrink: 0; } #subscriptionsView .subscriptions-count { flex-shrink: 0; margin: 8px 0; } #subscriptionsView .subscriptions-grid { flex: 1; min-height: 0; overflow-y: auto; align-content: start; overscroll-behavior: contain; scrollbar-width: thin; } #subscriptionsView .subscriptions-grid:has(.subscriptions-empty) { display: flex; } #subscriptionsView .subscriptions-empty { flex: 1; min-width: 0; min-height: 0; align-self: stretch; } } /* To Apply uses the same compact records layout as Applications. */ #toApplyView .to-apply-workspace-head { padding: 0 0 12px; gap: 12px; } #toApplyView .to-apply-count-card { min-width: 0; padding: 4px 0 4px 14px; background: transparent; } #toApplyView .to-apply-head-actions { display: flex; } #toApplyView .to-apply-add-button { min-height: 32px; padding: 7px 12px; font-size: 11px; line-height: 1.4; box-shadow: none; } #toApplyView .to-apply-filters { display: flex; align-items: end; gap: 12px; margin: 10px 0; padding: 0 0 10px; border-bottom: 1px solid var(--workspace-line); background: transparent; box-shadow: none; } #toApplyView .application-search-field { max-width: 460px; min-width: 0; height: 32px; } #toApplyView .application-search-field input { font-size: 12px; } #toApplyView .to-apply-filter-controls { display: flex; margin-left: auto; } #toApplyView .application-filter-field { min-width: 180px; gap: 4px; font-size: 10px; } #toApplyView .application-filter-field select { min-height: 32px; height: 32px; padding: 5px 9px; font-size: 11px; } #toApplyView .to-apply-page-panel { min-width: 0; min-height: 180px; border: 1px solid var(--color-border); border-radius: 9px; background: var(--theme-surface, #fff); box-shadow: none; } #toApplyView .to-apply-list { display: block; width: 100%; max-width: 100%; min-width: 0; margin: 0; } #toApplyView .application-table-wrap { width: 100%; max-width: 100%; min-width: 0; overflow-x: clip; } #toApplyView .to-apply-list.is-empty { display: flex; min-height: 160px; } #toApplyView .to-apply-data-table { display: table; width: 100%; max-width: 100%; min-width: 0; table-layout: fixed; } #toApplyView .to-apply-data-table thead { display: table-header-group; } #toApplyView .to-apply-data-table tbody { display: table-row-group; } #toApplyView .to-apply-data-table tr { display: table-row; width: auto; } #toApplyView .to-apply-data-table th { padding: 8px 10px; font-size: 10px; } #toApplyView .to-apply-data-table th:nth-child(2) { width: 145px; } #toApplyView .to-apply-data-table th:last-child { width: 48px; } #toApplyView .to-apply-data-table td { display: table-cell; position: static; width: auto; min-width: 0; overflow-wrap: anywhere; padding: 6px 10px; font-size: 11.5px; line-height: 1.35; vertical-align: middle; border-top: 1px solid var(--color-border); } #toApplyView .to-apply-data-table td strong { font-size: 11.5px; font-weight: 650; overflow-wrap: anywhere; } #toApplyView .to-apply-data-table td a { display: block; max-width: 100%; margin-top: 2px; overflow: hidden; color: var(--workspace-accent); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; } #toApplyView .to-apply-data-table td small { margin-top: 2px; font-size: 10px; } #toApplyView .to-apply-data-row.overdue, #toApplyView .to-apply-data-row.due-today { background: var(--theme-raised, #fff9f3); } #toApplyView .to-apply-deadline-status { color: var(--theme-warning-text, #9b6336); } #toApplyView .to-apply-actions-trigger { width: 28px; min-width: 28px; max-width: 28px; height: 28px; min-height: 28px; padding: 0; font-size: 15px; } @media (max-width: 640px) { #toApplyView .to-apply-filters { flex-wrap: wrap; } #toApplyView .application-search-field { flex: 1 1 100%; max-width: none; } #toApplyView .to-apply-filter-controls { margin-left: 0; } #toApplyView .to-apply-data-table th:nth-child(2) { width: 105px; } #toApplyView .to-apply-data-table th:last-child { width: 40px; } #toApplyView .to-apply-data-table th, #toApplyView .to-apply-data-table td { padding-inline: 6px; } #toApplyView .to-apply-data-table td a { white-space: normal; overflow-wrap: anywhere; } } @media (min-width: 1100px) { body:has(#toApplyView.active) { height: 100dvh; overflow: hidden; } body:has(#toApplyView.active) .app-shell { height: 100dvh; min-height: 0; } body:has(#toApplyView.active) .content { display: grid; grid-template-rows: 56px minmax(0, 1fr); gap: 12px; height: 100dvh; min-height: 0; padding: 12px 24px 16px; overflow: hidden; } body:has(#toApplyView.active) .topbar { height: 56px; min-height: 0; margin: 0; } #toApplyView.active { display: grid; grid-template-rows: auto auto minmax(0, 1fr); min-width: 0; min-height: 0; overflow: hidden; } #toApplyView .to-apply-page-panel { height: auto; min-height: 0; } #toApplyView .to-apply-page-panel .to-apply-list { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin; } #toApplyView .to-apply-data-table thead th { position: sticky; top: 0; z-index: 1; } } /* Phone-only density and placement; desktop styles and behavior stay intact. */ @media (max-width: 640px) { body:has(:is(#applicationsView, #inboxView, #toApplyView).active) .content { padding: 8px 12px 20px; } body:has(:is(#applicationsView, #inboxView, #toApplyView).active) .topbar { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 7px; padding: 4px 0; margin-bottom: 12px; } body:has(:is(#applicationsView, #inboxView, #toApplyView).active) #pageTitle { font-size: 19px; white-space: normal; overflow: visible; } body:has(:is(#applicationsView, #inboxView, #toApplyView).active) .page-context { font-size: 10px; line-height: 1.4; } body:has(:is(#applicationsView, #inboxView, #toApplyView).active) .topbar-title-area { min-width: 0; } body:has(:is(#applicationsView, #inboxView, #toApplyView).active) .mobile-menu { width: 28px; min-width: 28px; height: 34px; padding: 0; font-size: 20px; } body:has(:is(#applicationsView, #inboxView, #toApplyView).active) .topbar-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; max-width: 174px; } body:has(:is(#applicationsView, #inboxView, #toApplyView).active) .topbar-actions .button { min-height: 32px; padding: 6px 8px; font-size: 10px; white-space: nowrap; } body:has(:is(#applicationsView, #inboxView, #toApplyView).active) .global-search-trigger { width: 30px; min-width: 30px; } body:has(:is(#applicationsView, #inboxView, #toApplyView).active) .notification-button { width: 30px; min-width: 30px; height: 32px; min-height: 32px; } #applicationsView .application-workspace-head { padding-bottom: 8px; } #applicationsView #applicationListLabel { font-size: 11px; } #applicationsView .application-filters, #inboxView .email-filters { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 8px 0; padding: 0 0 8px; } #applicationsView .application-filter-controls, #inboxView .email-filter-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; min-width: 0; } #applicationsView .application-filter-controls > label:last-child { grid-column: 1 / -1; } #applicationsView .application-filter-field, #inboxView .application-filter-field { min-width: 0; gap: 4px; font-size: 10px; } #applicationsView .application-filter-field > span, #inboxView .application-filter-field > span { font-size: 10px; line-height: 1.3; } #applicationsView .application-filter-field input, #applicationsView .application-filter-field select, #inboxView .application-filter-field input, #inboxView .application-filter-field select { box-sizing: border-box; width: 100%; min-width: 0; height: 32px; min-height: 32px; padding: 5px 7px; font-size: 12px; line-height: 1.3; } #applicationsView .application-search-field, #inboxView .application-search-field { min-width: 0; max-width: none; height: 34px; padding: 0 9px; } #applicationsView .application-search-field input, #inboxView .application-search-field input { min-width: 0; font-size: 12px; } #applicationsView .application-filter-footer { gap: 6px; flex-wrap: wrap; } #applicationsView .application-filter-footer .button, #applicationsView #clearApplicationFilters { min-height: 30px; padding: 5px 7px; font-size: 10px; } #applicationsView .application-table-wrap { overflow: visible; } #applicationsView .application-data-table { display: block; width: 100%; min-width: 0; } #applicationsView .application-data-table thead { display: none; } #applicationsView .application-data-table tbody { display: grid; width: 100%; padding: 0; gap: 0; } #applicationsView .application-list .application-data-table tbody tr { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 12px; width: 100%; padding: 10px; border: 0; border-bottom: 1px solid var(--color-border); border-radius: 0; } #applicationsView .application-data-table td { display: block; width: auto; min-width: 0; padding: 0; border: 0; font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; } #applicationsView .application-list .application-data-table td:first-child { grid-column: 1 / -1; grid-row: auto; min-width: 0; padding-right: 36px; } #applicationsView .application-data-table td strong { font-size: 12px; } #applicationsView .application-data-table td small { font-size: 10px; } #applicationsView .application-data-table td:last-child { position: absolute; top: 8px; right: 8px; width: 30px; } #applicationsView .application-list.selection-mode .application-data-table td:first-child { position: absolute; top: 11px; left: 10px; width: 18px; padding: 0; } #applicationsView .application-list.selection-mode .application-data-table td:nth-child(2) { grid-column: 1 / -1; padding-left: 25px; padding-right: 36px; } #applicationsView .application-list:not(.selection-mode) td:nth-child(4)::before, #applicationsView .application-list.selection-mode td:nth-child(5)::before { content: 'Salary · '; color: var(--theme-muted, #8893a1); font-size: 9px; } #applicationsView .application-list:not(.selection-mode) td:nth-child(5)::before, #applicationsView .application-list.selection-mode td:nth-child(6)::before { content: 'Applied · '; color: var(--theme-muted, #8893a1); font-size: 9px; } #applicationsView .application-list:not(.selection-mode) td:nth-child(6)::before, #applicationsView .application-list.selection-mode td:nth-child(7)::before { content: 'Follow-up · '; color: var(--theme-muted, #8893a1); font-size: 9px; } #applicationsView .application-data-table .status-pill { min-height: 0; font-size: 10px; padding: 3px 6px; } #inboxView .email-panel-heading { gap: 8px; padding: 10px; } #inboxView .email-panel-heading-actions { margin-left: auto; } #inboxView .email-view-tab, #inboxView .email-panel-heading-actions .button { min-height: 30px; padding: 5px 7px; font-size: 10px; } body #inboxView .email-summary { align-items: center; gap: 5px; } body #inboxView .email-summary-item { min-height: 30px; padding: 4px 7px; gap: 5px; font-size: 11px; line-height: 1.3; } body #inboxView .email-summary-item strong { font-size: 11px; line-height: inherit; } #inboxView .email-header-status-group { gap: 5px; } #inboxView .email-status-chip { min-height: 24px; padding: 3px 6px; font-size: 10px; } #inboxView .email-filters { padding-inline: 10px; } #inboxView .email-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) 60px; gap: 4px 8px; align-items: start; padding: 10px; min-width: 0; } #inboxView .email-selection-mode .email-row { grid-template-columns: 16px 28px minmax(0, 1fr) 60px; } #inboxView .email-avatar { grid-column: 1; grid-row: 1 / span 2; width: 28px; height: 28px; font-size: 10px; border-radius: 6px; } #inboxView .email-selection-mode .email-avatar { grid-column: 2; } #inboxView .email-select-checkbox { grid-column: 1; grid-row: 1 / span 2; width: 14px; height: 14px; margin-top: 6px; } #inboxView .email-row-content { grid-column: 2; grid-row: 1; min-width: 0; gap: 3px; } #inboxView .email-selection-mode .email-row-content { grid-column: 3; } #inboxView .email-sender-line { min-width: 0; gap: 4px; align-items: start; } #inboxView .email-from { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; overflow: hidden; overflow-wrap: anywhere; font-size: 12px; line-height: 1.35; } #inboxView .email-preview { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; overflow: hidden; overflow-wrap: anywhere; font-size: 11px; line-height: 1.45; } #inboxView .email-subject, #inboxView .email-snippet { font-size: 11px; line-height: 1.45; } #inboxView .client-match-tag { flex-shrink: 0; min-width: 15px; height: 16px; padding: 0 3px; font-size: 9px; } #inboxView .email-row .email-date { grid-column: 2; grid-row: 2; display: flex; flex-wrap: wrap; gap: 2px 6px; min-width: 0; margin: 1px 0 0; font-size: 9px; line-height: 1.4; text-align: left; white-space: normal; } #inboxView .email-row .email-time { font-size: 9px; } #inboxView .email-selection-mode .email-date { grid-column: 3; } #inboxView .email-row .email-row-actions { grid-column: 3; grid-row: 1 / span 2; display: flex; justify-content: flex-end; align-self: start; } #inboxView .email-selection-mode .email-row-actions { grid-column: 4; } #inboxView .email-actions-trigger { box-sizing: border-box; width: 60px; min-width: 0; min-height: 30px; padding: 5px 6px; font-size: 10px; line-height: 1.4; } #inboxView .email-actions-menu { right: 0; left: auto; min-width: 150px; } html:has(#weeklyReportModal[open]) { overflow: hidden; scrollbar-gutter: auto; } #weeklyReportModal { position: fixed; inset: 0; width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0; border-radius: 0; overflow: hidden; } #weeklyReportModal > .weekly-report-form { display: block; width: 100%; height: 100%; max-height: 100%; min-height: 0; margin: 0; padding: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin; } #weeklyReportModal .weekly-report-header { position: sticky; top: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto 30px; gap: 8px; min-height: 0; padding: 12px; } #weeklyReportModal .weekly-report-header-title { grid-column: 1 / 3; grid-row: 1; min-width: 0; margin: 0; padding-right: 0; } #weeklyReportModal .weekly-report-header-title .eyebrow { font-size: 9px; margin: 0 0 3px; } #weeklyReportModal .weekly-report-header-title h2 { font-size: 18px; } #weeklyReportModal .weekly-report-date { margin: 4px 0 0; font-size: 11px; white-space: normal; } #weeklyReportModal .weekly-report-close { position: static; grid-column: 3; grid-row: 1; width: 30px; min-width: 30px; height: 32px; min-height: 32px; align-self: start; font-size: 20px; } #weeklyReportModal .weekly-report-status { grid-column: 1; grid-row: 2; justify-self: start; padding: 4px 7px; font-size: 10px; } #weeklyReportModal .weekly-report-download-menu { grid-column: 2 / 4; grid-row: 2; margin: 0; justify-self: end; } #weeklyReportModal .weekly-report-download-menu > .button { min-height: 30px; padding: 5px 9px; font-size: 11px; } #weeklyReportModal .weekly-report-week-controls { grid-column: 1 / -1; grid-row: 3; display: grid; grid-template-columns: 28px 28px minmax(0, 1fr) auto; width: 100%; min-width: 0; gap: 4px; } #weeklyReportModal .weekly-report-week-controls .icon-button { width: 28px; min-width: 28px; height: 32px; min-height: 32px; padding: 0; font-size: 20px; } #weeklyReportModal .weekly-report-week-controls select { width: 100%; max-width: 100%; min-width: 0; height: 32px; min-height: 32px; padding: 4px; font-size: 10px; } #weeklyReportModal .weekly-report-week-controls .button { min-height: 32px; padding: 4px 6px; font-size: 9px; } #weeklyReportModal .weekly-report-nav { position: sticky; top: var(--weekly-report-header-height, 150px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 6px 10px; gap: 3px; overflow: visible; } #weeklyReportModal .weekly-report-nav button { min-width: 0; min-height: 28px; padding: 5px 3px; font-size: 9.5px; } #weeklyReportModal .weekly-report-content { min-height: 0; padding: 12px; } #weeklyReportModal .weekly-report-content::after { height: 120px; min-height: 0; } #weeklyReportModal .weekly-report-section { scroll-margin-top: 12px; padding-bottom: 18px; } #weeklyReportModal .weekly-report-section-title { margin-bottom: 10px; } #weeklyReportModal .weekly-report-section-title .eyebrow { font-size: 9px; } #weeklyReportModal .weekly-report-section-title h3 { font-size: 16px; } #weeklyReportModal .weekly-report-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } #weeklyReportModal .weekly-report-stat-card { min-height: 0; padding: 10px; gap: 6px; border-radius: 8px; } #weeklyReportModal .weekly-report-stat-card > span:first-child { font-size: 11px; } #weeklyReportModal .weekly-report-stat-card > strong { font-size: 23px; } #weeklyReportModal .weekly-report-change { font-size: 10px; } #weeklyReportModal .weekly-report-overview-grid { gap: 10px; margin-top: 10px; } #weeklyReportModal .weekly-report-card { padding: 10px; border-radius: 8px; } #weeklyReportModal .weekly-report-section-heading h4 { font-size: 12px; } #weeklyReportModal .weekly-report-section-heading > span { font-size: 10px; } #weeklyReportModal .weekly-report-table { min-width: 0; table-layout: fixed; } #weeklyReportModal .weekly-report-table th, #weeklyReportModal .weekly-report-table td { padding: 7px 5px; font-size: 10px; overflow-wrap: anywhere; white-space: normal; } } @media (max-width: 360px) { body:has(:is(#applicationsView, #inboxView, #toApplyView).active) .topbar { grid-template-columns: 28px minmax(0, 1fr); } body:has(:is(#applicationsView, #inboxView, #toApplyView).active) .topbar-actions { grid-column: 1 / -1; width: 100%; max-width: none; } } /* Keep mobile header utilities beside the title, without overlapping client counts. */ @media (max-width: 640px) { body:has(:is(#applicationsView, #inboxView, #toApplyView, #hiredView, #dailyTaskView).active) .content { padding: 8px 12px 20px; } body:has(:is(#applicationsView, #inboxView, #toApplyView, #hiredView, #dailyTaskView).active) .topbar { display: grid; grid-template-columns: 28px minmax(0, 1fr) 30px 30px; align-items: start; height: auto; min-height: 0; gap: 7px; padding: 6px 0; margin: 0 0 12px; } body:has(:is(#applicationsView, #inboxView, #toApplyView, #hiredView, #dailyTaskView).active) .mobile-menu { grid-column: 1; grid-row: 1; width: 28px; min-width: 28px; height: 32px; margin: 0; padding: 0; font-size: 20px; } body:has(:is(#applicationsView, #inboxView, #toApplyView, #hiredView, #dailyTaskView).active) .topbar-title-area { display: block; grid-column: 2; grid-row: 1; min-width: 0; padding-top: 3px; } body:has(:is(#applicationsView, #inboxView, #toApplyView, #hiredView, #dailyTaskView).active) .topbar-copy { display: block; min-width: 0; } body:has(:is(#applicationsView, #inboxView, #toApplyView, #hiredView, #dailyTaskView).active) #pageTitle { margin: 0; font-size: 18px; line-height: 1.3; white-space: normal; overflow-wrap: normal; } body:has(:is(#applicationsView, #inboxView, #toApplyView, #hiredView, #dailyTaskView).active) .page-context { margin: 3px 0 0; font-size: 10px; line-height: 1.4; } body:has(:is(#applicationsView, #inboxView, #toApplyView, #hiredView, #dailyTaskView).active) .topbar-actions { display: contents; } body:has(:is(#applicationsView, #inboxView, #toApplyView, #hiredView, #dailyTaskView).active) #openQuickSearch { grid-column: 3; grid-row: 1; width: 30px; min-width: 30px; height: 32px; min-height: 32px; padding: 0; } body:has(:is(#applicationsView, #inboxView, #toApplyView, #hiredView, #dailyTaskView).active) #notificationMenu { grid-column: 4; grid-row: 1; width: 30px; margin: 0; } body:has(:is(#applicationsView, #inboxView, #toApplyView, #hiredView, #dailyTaskView).active) #notificationButton { width: 30px; min-width: 30px; height: 32px; min-height: 32px; } body:has(:is(#applicationsView, #inboxView, #toApplyView, #hiredView, #dailyTaskView).active) #saveIndicator { grid-column: 2 / -1; font-size: 9px; justify-self: end; } body:has(#applicationsView.active) .topbar { position: relative; } body:has(#applicationsView.active) #openAddModal:not([hidden]) { position: absolute; top: calc(100% + 12px); right: 0; grid-column: auto; grid-row: auto; z-index: 2; width: 110px; max-width: 110px; height: 32px; min-height: 32px; padding: 5px 8px; font-size: 10px; } body:has(#applicationsView.active):has(#openAddModal:not([hidden])) #applicationsView .application-workspace-head { box-sizing: border-box; min-height: 44px; padding: 0 120px 10px 0; justify-content: center; gap: 0; } #applicationsView .application-workspace-count { min-width: 0; padding-top: 6px; padding-bottom: 6px; } #applicationsView #applicationListLabel { font-size: 11px; line-height: 1.5; text-transform: none; } body:has(#hiredView.active) .page-title-row { gap: 4px 6px; } body:has(#hiredView.active) .hired-header-count:not([hidden]) { font-size: 10px; } body:has(#hiredView.active) .hired-header-summary:not([hidden]) { flex-basis: 100%; min-width: 0; flex-wrap: wrap; gap: 4px; margin-top: 3px; } body:has(#hiredView.active) .hired-header-summary > span { padding: 3px 5px; gap: 4px; font-size: 9px; } body:has(#hiredView.active) .hired-header-summary strong { font-size: 10px; } #dailyTaskView .daily-task-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; } #dailyTaskView .daily-task-date-navigation { display: grid; grid-column: 1 / -1; grid-template-columns: 30px minmax(0, 1fr) 30px auto; width: 100%; min-width: 0; gap: 5px; } #dailyTaskView .daily-task-date-step { width: 30px; min-width: 30px; height: 32px; min-height: 32px; padding: 0; font-size: 11px; } #dailyTaskView .daily-task-date-label { width: 100%; min-width: 0; min-height: 32px; padding: 5px 6px; font-size: 12px; } #dailyTaskView .daily-task-today-button { min-height: 32px; padding: 5px 8px; font-size: 10px; } #dailyTaskView .daily-task-filter-field { min-width: 0; margin: 0; } #dailyTaskView .daily-task-filter-field select { box-sizing: border-box; width: 100%; min-width: 0; height: 32px; min-height: 32px; padding: 5px 8px; font-size: 12px; } #dailyTaskView #openDailyTaskAddModal { width: auto; min-height: 32px; padding: 5px 10px; font-size: 11px; } #dailyTaskView .daily-task-history-shortcuts { gap: 6px; } body #dailyTaskView .daily-task-history-shortcuts .button { min-height: 30px; padding: 5px 8px; font-size: 10px; } #dailyTaskView.active .daily-task-action, #dailyTaskView.active .daily-task-delete { flex: 0 0 28px; width: 28px; min-width: 28px; height: 28px; min-height: 28px; font-size: 11px; } #dailyTaskView .daily-task-summary { gap: 6px; margin: 10px 0; } #dailyTaskView .daily-task-summary > div, #dailyTaskView .daily-task-summary-overdue { flex: 1 1 60px; min-width: 0; padding: 8px; } #dailyTaskView .daily-task-summary span { font-size: 10px; } #dailyTaskView .daily-task-summary strong { font-size: 18px; } #dailyTaskView .daily-task-list-panel, #dailyTaskView .daily-task-history-panel { padding: 12px; } #dailyTaskView .daily-task-list-tools { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; } #dailyTaskView .daily-task-quick-add, #dailyTaskView .daily-task-search { flex: none; min-height: 0; } #dailyTaskView .daily-task-section-heading h3 { font-size: 13px; } #dailyTaskView .daily-task-list-tools input { height: 34px; min-height: 34px; padding: 6px 8px; font-size: 12px; } #dailyTaskView .daily-task-search input { padding-left: 29px; } #dailyTaskView .daily-task-item-title { font-size: 12px; } #dailyTaskView .daily-task-history-controls .daily-task-date-field input { height: 32px; min-height: 32px; padding: 5px 7px; font-size: 12px; } } /* Mobile dialogs, drawers, and shared page density. */ @media (max-width: 640px) { html:has(dialog[open]), html:has(.active-client-drawer-layer.open), html:has(.client-task-drawer-layer.is-open) { overflow: hidden; scrollbar-gutter: auto; } body:has(:is(#dashboardView, #walletView, #newsView, #socialTrendsView, #documentsView, #subscriptionsView).active) .content { padding: 8px 12px 20px; } body:has(:is(#dashboardView, #walletView, #newsView, #socialTrendsView, #documentsView, #subscriptionsView).active) .topbar { display: grid; grid-template-columns: 28px minmax(0, 1fr) 30px 30px; align-items: start; min-height: 0; height: auto; gap: 7px; margin: 0 0 12px; padding: 6px 0; } body:has(:is(#dashboardView, #walletView, #newsView, #socialTrendsView, #documentsView, #subscriptionsView).active) .topbar-title-area { display: block; grid-column: 2; grid-row: 1; min-width: 0; padding-top: 3px; } body:has(:is(#dashboardView, #walletView, #newsView, #socialTrendsView, #documentsView, #subscriptionsView).active) .mobile-menu { grid-column: 1; grid-row: 1; width: 28px; min-width: 28px; height: 32px; padding: 0; margin: 0; font-size: 20px; } body:has(:is(#dashboardView, #walletView, #newsView, #socialTrendsView, #documentsView, #subscriptionsView).active) #pageTitle { margin: 0; font-size: 18px; line-height: 1.3; white-space: normal; } body:has(:is(#dashboardView, #walletView, #newsView, #socialTrendsView, #documentsView, #subscriptionsView).active) .topbar-actions { display: contents; } body:has(:is(#dashboardView, #walletView, #newsView, #socialTrendsView, #documentsView, #subscriptionsView).active) #openQuickSearch { grid-column: 3; grid-row: 1; width: 30px; min-width: 30px; height: 32px; min-height: 32px; padding: 0; } body:has(:is(#dashboardView, #walletView, #newsView, #socialTrendsView, #documentsView, #subscriptionsView).active) #notificationMenu { grid-column: 4; grid-row: 1; width: 30px; margin: 0; } body:has(:is(#dashboardView, #walletView, #newsView, #socialTrendsView, #documentsView, #subscriptionsView).active) #notificationButton { width: 30px; min-width: 30px; height: 32px; min-height: 32px; } body:has(#dashboardView.active) .dashboard-switcher { grid-column: 1 / -1; grid-row: 2; margin-top: 3px; } body:has(#dashboardView.active) .dashboard-switcher-tab { min-height: 32px; padding: 6px; font-size: 10px; } body .view .button { min-height: 32px; padding: 6px 9px; font-size: 11px; } body .view :is(.form-field, .select-field, .date-filter) { min-width: 0; } body .view :is(.toolbar, .subscriptions-toolbar, .social-trend-toolbar) { gap: 8px; } body .view :is(.toolbar, .subscriptions-toolbar, .social-trend-toolbar) :is(input, select) { min-width: 0; min-height: 32px; font-size: 12px; } body .view .search-field { min-width: 0; height: 34px; } body .view .search-field input { font-size: 12px; } body .hired-card { min-height: 0; gap: 8px; padding: 12px; } body:has(#hiredView.active) .hired-card { min-height: 0; padding: 12px; gap: 8px; } body:has(#hiredView.active) .hired-card-footer { margin-top: 4px; font-size: 10px; } body:has(#hiredView.active) .hired-card h3 { font-size: 13px; } body:has(#hiredView.active) .hired-card :is(p, .hired-card-meta, .hired-card-role) { font-size: 11px; line-height: 1.5; } body dialog.modal[open] { box-sizing: border-box; width: calc(100vw - 24px); max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); margin: auto; border-radius: 12px; } body dialog.modal form { box-sizing: border-box; max-height: calc(100dvh - 26px); padding: 12px; } body dialog :is(.modal-heading, .settings-modal-heading) { gap: 8px; margin-bottom: 12px; } body dialog .modal-heading h2 { margin: 3px 0 0; font-size: 18px; line-height: 1.3; } body dialog .eyebrow { font-size: 9px; } body :is(dialog, .active-client-drawer, .client-task-drawer) .form-field { min-width: 0; gap: 5px; font-size: 11px; line-height: 1.4; } body :is(dialog, .active-client-drawer, .client-task-drawer) .form-field :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { box-sizing: border-box; min-width: 0; min-height: 34px; padding: 7px 8px; font-size: 12px; line-height: 1.4; } body :is(dialog, .active-client-drawer, .client-task-drawer) .form-field :is(input[type="checkbox"], input[type="radio"]) { flex: 0 0 16px; width: 16px; min-width: 16px; height: 16px; min-height: 16px; padding: 0; } body dialog.modal .modal-heading > .icon-button { width: 30px; min-width: 30px; height: 30px; min-height: 30px; flex-basis: 30px; } body :is(dialog, .active-client-drawer, .client-task-drawer) .form-field textarea { min-height: 76px; } body :is(dialog, .active-client-drawer, .client-task-drawer) .form-field a.form-field-link { padding: 7px 8px; font-size: 12px; } body :is(dialog, .active-client-drawer, .client-task-drawer) .button { width: auto; min-height: 32px; padding: 6px 9px; font-size: 11px; } body dialog.modal form > :is(.modal-actions, .modal-actions-split) { bottom: 0; gap: 7px; margin-top: 12px; padding: 10px 0 max(10px, env(safe-area-inset-bottom)); flex-wrap: wrap; } body dialog.modal .modal-actions-right { gap: 6px; flex-wrap: wrap; } body dialog.modal .modal-actions .button { flex: 0 1 auto; width: auto; } #clientModal[open], #clientModal.application-detail-panel[open] { position: fixed; inset: 12px; width: calc(100vw - 24px); max-width: calc(100vw - 24px); height: calc(100dvh - 24px); max-height: calc(100dvh - 24px); margin: 0; padding: 0; border-radius: 12px; overflow: hidden; } #clientModal #clientForm, #clientModal.application-detail-panel #clientForm { display: flex; flex-direction: column; height: 100%; max-height: 100%; min-height: 0; padding: 12px; overflow: hidden; } #clientModal #clientForm .modal-heading { flex-shrink: 0; margin-bottom: 10px; } #clientModal #clientForm .modal-heading h2 { font-size: 18px; line-height: 1.3; } #clientModal #clientForm .client-form-layout { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 14px; padding: 10px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } #clientModal #clientForm .client-form-column { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; gap: 10px; padding: 0; overflow: visible; } #clientModal #clientForm .client-form-column + .client-form-column { padding: 12px 0 0; border-left: 0; border-top: 1px solid var(--theme-border, #dfe4df); } #clientModal #clientForm :is(.form-column-label, .form-subsection-label) { font-size: 9px; } #clientModal #clientForm .modal-actions { flex-shrink: 0; margin: 0; padding: 10px 0 0; } body :is(.application-actions-panel, .wallet-actions-panel, .to-apply-actions-panel, .email-compose-side-panel)[open], #toApplyModal[open], #subscriptionEditor[open] { inset: 10px; box-sizing: border-box; width: calc(100vw - 20px); max-width: calc(100vw - 20px); height: calc(100dvh - 20px); max-height: calc(100dvh - 20px); margin: 0; border: 1px solid var(--theme-border, #e0e5ec); border-radius: 12px; } body .active-client-drawer, body .active-client-drawer-layer[data-view="email"] .active-client-drawer, body .client-task-drawer { top: 10px; right: 10px; width: calc(100vw - 20px); max-width: calc(100vw - 20px); height: calc(100dvh - 20px); border-radius: 12px; border: 1px solid var(--theme-border, #e0e5ec); } body :is(.application-actions-panel-header, .wallet-actions-header, .to-apply-actions-header, .active-client-drawer-header, .client-task-drawer-header) { min-height: 0; padding: 16px 14px; gap: 10px; } body :is(.application-actions-panel-header, .wallet-actions-header, .to-apply-actions-header, .active-client-drawer-heading, .client-task-drawer-header) h2 { font-size: 18px; line-height: 1.3; } body :is(.application-actions-panel-header, .to-apply-actions-header, .active-client-drawer-heading) p:last-child { margin-top: 4px; font-size: 11px; } body :is(.application-actions-panel-list, .to-apply-actions-list, .active-client-drawer-list, .client-task-drawer-fields, .active-client-drawer-view-content) { padding: 12px; gap: 8px; } body :is(.application-actions-panel-action, .to-apply-action-panel-button, .active-client-action-row) { min-height: 48px; padding: 8px; gap: 8px; } body :is(.application-actions-panel-action, .to-apply-action-panel-button, .active-client-action-row) strong { font-size: 11px; } body :is(.application-actions-panel-action, .to-apply-action-panel-button, .active-client-action-row) small { font-size: 10px; line-height: 1.4; } body :is(.active-client-drawer-footer, .client-task-drawer-footer, .to-apply-actions-footer) { padding: 10px 12px max(10px, env(safe-area-inset-bottom)); gap: 6px; } body .active-client-drawer-view #clientForm .client-form-layout { padding: 12px; } body .active-client-drawer-view #clientForm .client-form-column { gap: 10px; } #toApplyModal #toApplyForm, body .email-compose-side-panel #emailComposeForm { padding: 14px; } #subscriptionEditor header { padding: 16px 14px; } #subscriptionEditor .subscription-form-body { padding: 14px; } #subscriptionEditor footer { padding: 12px 14px; } #subscriptionEditor .form-field { margin-bottom: 12px; } #weeklyReportModal[open] { inset: 10px; width: calc(100vw - 20px); max-width: calc(100vw - 20px); height: calc(100dvh - 20px); max-height: calc(100dvh - 20px); margin: 0; border-radius: 12px; } #weeklyReportModal > .weekly-report-form { padding: 0; height: 100%; max-height: 100%; } body #settingsModal .settings-modal-heading, body #settingsModal .settings-modal-actions { padding: 12px; } body #settingsModal .settings-modal-heading h2 { font-size: 18px; } body #emailDetailModal :is(.email-detail-meta, .email-detail-body) { font-size: 12px; line-height: 1.6; } body #emailDetailModal .email-detail-meta strong { overflow-wrap: anywhere; } body :is(dialog, .active-client-drawer, .client-task-drawer) .form-field:has(> .required) { display: flex; flex-wrap: wrap; column-gap: 4px; row-gap: 5px; } body :is(dialog, .active-client-drawer, .client-task-drawer) .form-field:has(> .required) > :is(input, select, textarea, small) { flex-basis: 100%; } body #settingsModal .settings-modal-heading > .icon-button { width: 30px; min-width: 30px; height: 30px; min-height: 30px; flex-basis: 30px; } #walletEntryPanel[open] { position: fixed; inset: 12px; display: flex; flex-direction: column; box-sizing: border-box; width: calc(100vw - 24px); max-width: calc(100vw - 24px); height: calc(100dvh - 24px); max-height: calc(100dvh - 24px); margin: 0; padding: 12px; border-radius: 12px; overflow: hidden; } #walletEntryPanel > h3 { flex-shrink: 0; margin: 0 0 12px; font-size: 18px; } #walletEntryPanel #walletEntryForm { display: flex; flex: 1; flex-direction: column; min-height: 0; padding: 0; overflow: hidden; } #walletEntryPanel .wallet-form-grid { flex: 1; min-height: 0; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 10px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } #walletEntryPanel .wallet-hint { flex-shrink: 0; margin: 10px 0; font-size: 10px; line-height: 1.5; } #walletEntryPanel .modal-actions { flex-shrink: 0; margin: 0; padding-top: 8px; gap: 6px; } } /* All navigation destinations remain visible in the mobile drawer. */ @media (max-width: 720px) { body .sidebar { box-sizing: border-box; height: 100dvh; min-height: 0; max-height: 100dvh; padding: max(10px, env(safe-area-inset-top)) 10px max(8px, env(safe-area-inset-bottom)); overflow: visible; } body .sidebar .sidebar-brand-row { flex-shrink: 0; min-height: 36px; margin-bottom: 8px; padding: 0 4px 8px; gap: 6px; } body .sidebar .brand-label { font-size: 15px; } body .sidebar .brand-mark { width: 26px; height: 26px; } body .sidebar .mobile-sidebar-close { width: 30px; height: 30px; flex-basis: 30px; font-size: 20px; } body .sidebar .main-nav { flex: 1 1 auto; align-content: start; gap: 6px; min-height: 0; overflow: visible; } body .sidebar .nav-group { gap: 2px; } body .sidebar .nav-group + .nav-group { padding-top: 6px; } body .sidebar .nav-group-label { margin: 0 7px 3px; font-size: 8px; line-height: 1.3; letter-spacing: .08em; } body .sidebar .nav-link { min-height: clamp(28px, 5dvh, 36px); padding: 4px 8px; gap: 8px; font-size: 12px; line-height: 1.25; border-radius: 6px; } body .sidebar .nav-link > span:first-child { width: 17px; flex-basis: 17px; font-size: 12px; } body .sidebar .nav-count { min-width: 18px; padding: 2px 4px; font-size: 9px; line-height: 1.3; } body .sidebar .sidebar-bottom { flex-shrink: 0; margin-top: 8px; padding-top: 6px; } body .sidebar .sidebar-utility-trigger { min-height: 32px; padding: 5px 8px; gap: 8px; } body .sidebar .sidebar-utility-trigger .sidebar-label { font-size: 11px; } } @media (max-width: 720px) and (max-height: 500px) { body .sidebar { width: min(94vw, 440px); padding-top: 6px; padding-bottom: 6px; } body .sidebar .sidebar-brand-row { min-height: 30px; padding-bottom: 5px; margin-bottom: 5px; } body .sidebar .main-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 5px; } body .sidebar .nav-group { display: contents; } body .sidebar .nav-group-label { grid-column: 1 / -1; margin: 4px 6px 1px; } body .sidebar .nav-link { min-height: 28px; padding: 3px 6px; gap: 5px; font-size: 11px; } body .sidebar .nav-label { white-space: normal; overflow-wrap: anywhere; } body .sidebar .sidebar-bottom { margin-top: 4px; padding-top: 4px; } } .client-email-alert-category { display: inline-block; justify-self: start; width: fit-content; margin-bottom: 3px; padding: 2px 6px; border-radius: 4px; background: var(--theme-raised, #edf2fb); color: var(--theme-info-text, #365d93); font-size: 10px; font-weight: 600; line-height: 1.4; } .client-email-alert-category[data-kind="active-client"] { background: var(--theme-raised, #e8f4ed); color: var(--theme-success-text, #287449); } .client-email-alert-category[data-kind="ended-client"] { background: var(--theme-raised, #f1f2f5); color: var(--theme-info-text, #616c7b); } /* Follow-up status stays visible in both desktop rows and mobile cards. */ #applicationsView .application-data-table tbody tr.application-follow-up-due { background: var(--theme-raised, #fff9e9); } #applicationsView .application-data-table tbody tr.application-follow-up-due:hover { background: var(--theme-warning-soft, #fff3cf); } #applicationsView .application-data-table tbody tr.application-follow-up-due > td:first-child { box-shadow: inset 3px 0 #c58b20; } #applicationsView .application-follow-up { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; line-height: 1.4; } #applicationsView .application-follow-up.is-due { color: var(--theme-warning-text, #805b12); font-weight: 600; } #applicationsView .follow-up-due-label { padding: 2px 5px; border-radius: 4px; background: var(--theme-warning-soft, #fae9b4); font-size: 9px; white-space: nowrap; } #applicationsView .application-follow-up.is-sent { color: var(--theme-success-text, #247347); font-weight: 600; } #applicationsView .follow-up-check { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: var(--theme-raised, #e5f3e9); color: var(--theme-success-text, #247347); font-size: 10px; } /* Keep the application dashboard readable within a phone viewport. */ @media (max-width: 640px) { body:has(#dashboardView.active) #pageTitle, body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) #pageTitle { font-size: 17px; line-height: 1.3; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: normal; } body:has(#dashboardView.active) .topbar-copy { min-width: 0; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .weekly-report-banner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 14px; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .weekly-report-banner > div:first-child { display: grid; gap: 4px; min-width: 0; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .weekly-report-banner h2 { margin: 0; font-size: 16px; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .weekly-report-banner p { margin: 0; font-size: 11px; white-space: normal; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .weekly-report-banner > .today-focus-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 8px; width: 100%; order: 0; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .today-focus-items > span { min-width: 0; font-size: 10px; line-height: 1.4; white-space: normal; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .today-focus-items > span > strong { font-size: 15px; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .today-focus-items .dashboard-weekly-goal { grid-column: 1 / -1; max-width: none; padding: 10px 0 0; border-left: 0; border-top: 1px solid var(--color-border); gap: 4px 10px; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) #openWeeklyReport { justify-self: start; margin: 0; padding: 6px 10px; font-size: 11px; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .interview-calendar-panel { min-width: 0; min-height: 0; height: auto; margin-inline: 0; padding: 12px; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .interview-calendar-panel .panel-heading { gap: 6px; flex-wrap: wrap; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .interview-calendar-panel .panel-heading h2 { font-size: 15px; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .calendar-controls { gap: 2px; margin-left: auto; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .calendar-controls strong { min-width: 86px; font-size: 11px; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .calendar-controls .icon-button { width: 26px; min-width: 26px; height: 28px; min-height: 28px; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .interview-calendar { width: 100%; max-width: 294px; min-width: 0; min-height: 0; height: auto; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: 20px repeat(6, 36px); touch-action: auto; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .calendar-weekday { padding: 0; font-size: 9px; text-align: center; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .calendar-day-number { width: 24px; height: 24px; flex-basis: 24px; font-size: 11px; } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) .calendar-interview { min-height: 0; font-size: 9px; line-height: 12px; white-space: nowrap; } } /* A narrower desktop rail; keep mobile and collapsed navigation unchanged. */ @media (min-width: 721px) { body:not(.sidebar-collapsed) .app-shell { grid-template-columns: 220px minmax(0, 1fr); } body:not(.sidebar-collapsed) .sidebar { padding: 14px 10px 12px; } html:has(dialog[open]) body:not(.sidebar-collapsed) .sidebar { width: 220px; } body:not(.sidebar-collapsed) .sidebar-brand-row { gap: 6px; margin-bottom: 12px; padding-bottom: 12px; } body:not(.sidebar-collapsed) .sidebar .brand { gap: 8px; font-size: 15px; } body:not(.sidebar-collapsed) .sidebar .brand-mark { width: 28px; height: 28px; } body:not(.sidebar-collapsed) .sidebar .main-nav { gap: 10px; } body:not(.sidebar-collapsed) .sidebar .nav-group { gap: 3px; } body:not(.sidebar-collapsed) .sidebar .nav-group + .nav-group { padding-top: 9px; } body:not(.sidebar-collapsed) .sidebar .nav-group-label { margin: 0 8px 3px; font-size: 9px; } body:not(.sidebar-collapsed) .sidebar .nav-link { min-height: 36px; padding: 7px 8px; gap: 7px; font-size: 12px; } body:not(.sidebar-collapsed) .sidebar .nav-link > span:first-child { width: 17px; flex-basis: 17px; font-size: 13px; } body:not(.sidebar-collapsed) .sidebar .nav-count { min-width: 20px; padding: 2px 4px; font-size: 9px; } body:not(.sidebar-collapsed) .sidebar .sidebar-bottom { padding-top: 8px; } body:not(.sidebar-collapsed) .sidebar .sidebar-utility-trigger { min-height: 34px; padding: 7px 8px; gap: 8px; } } @media (min-width: 721px) and (max-width: 900px) { body:not(.sidebar-collapsed) .app-shell { grid-template-columns: 208px minmax(0, 1fr); } html:has(dialog[open]) body:not(.sidebar-collapsed) .sidebar { width: 208px; } body:not(.sidebar-collapsed) .sidebar .nav-link { gap: 6px; font-size: 11.5px; } } /* Keep email reader controls outside the scrolling message content. */ #applicationEmailsModal { overflow: hidden; } #applicationEmailsModal .application-emails-form { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; box-sizing: border-box; max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); overflow: hidden; } #applicationEmailsModal .modal-heading { min-width: 0; align-items: flex-start; } #applicationEmailsModal .modal-heading > div { min-width: 0; } #applicationEmailsTitle { overflow-wrap: anywhere; } #applicationEmailsModal .application-emails-list { min-height: 0; min-width: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; align-content: start; scrollbar-gutter: stable; } #applicationEmailsModal .modal-actions { position: static; margin-top: 12px; padding: 12px 0 0; border-top: 1px solid var(--line); background: var(--color-surface, var(--theme-surface, #fff)); } #emailDetailModal { overflow: hidden; } #emailDetailModal > form { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto auto auto; box-sizing: border-box; max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); overflow: hidden; } #emailDetailModal .modal-heading { min-width: 0; align-items: flex-start; } #emailDetailModal .modal-heading > div { min-width: 0; } #emailDetailTitle { max-height: 22vh; max-height: 22dvh; overflow-y: auto; overflow-wrap: anywhere; } #emailDetailModal .email-detail-meta { max-height: 20vh; max-height: 20dvh; overflow-y: auto; } #emailDetailModal .email-detail-body { min-height: 0; min-width: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; } #emailDetailModal .modal-actions { position: static; margin-top: 12px; padding: 12px 0 0; border-top: 1px solid var(--line); background: var(--color-surface, var(--theme-surface, #fff)); } .application-progress-ai { min-width: 0; margin: 0; padding: 16px; } .application-progress-ai-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .application-progress-ai-heading h2 { margin: 3px 0 0; font-size: 18px; } .application-progress-ai-heading .eyebrow { margin: 0; } .application-progress-ai-heading .button { flex: 0 0 auto; } .application-progress-ai-note, .application-progress-ai-period { color: var(--muted); font-size: 12px; line-height: 1.6; } #applicationProgressAiStatus { margin: 12px 0 0; font-size: 13px; line-height: 1.5; } .application-progress-ai-assessment { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .application-progress-ai-assessment small { color: var(--muted); } .application-progress-ai-badge { border-radius: 20px; padding: 5px 10px; font-size: 12px; font-weight: 700; background: var(--theme-raised, #edf0f5); color: var(--theme-info-text, #46536a); } .application-progress-ai-badge.is-on_track { color: var(--theme-success-text, #236044); background: var(--theme-raised, #e8f4ed); } .application-progress-ai-badge.is-needs_attention { color: var(--theme-warning-text, #805b19); background: var(--theme-warning-soft, #fff3da); } .application-progress-ai-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 16px 0; } .application-progress-ai-stats > div { min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 8px; } .application-progress-ai-stats dt { font-size: 12px; color: var(--muted); } .application-progress-ai-stats dd { margin: 5px 0; font-size: 22px; font-weight: 700; } .application-progress-ai-stats small { font-size: 11px; color: var(--muted); } .application-progress-ai-summary, .application-progress-ai li { font-size: 13px; line-height: 1.65; overflow-wrap: anywhere; } .application-progress-ai h3 { font-size: 13px; margin: 16px 0 6px; } .application-progress-ai ul { margin: 0; padding-left: 20px; } @media (max-width: 720px) { .application-progress-ai { padding: 14px; margin: 0; } .application-progress-ai-heading { align-items: flex-start; gap: 10px; } .application-progress-ai-heading h2 { font-size: 16px; } .application-progress-ai-heading .button { min-height: 36px; padding: 7px 10px; font-size: 12px; } .application-progress-ai-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .application-progress-ai-stats > div { padding: 9px; } .application-progress-ai-stats dd { font-size: 19px; } } body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) #applicationDashboardPanel > .application-dashboard-insights { grid-column: 9 / -1; grid-row: 2 / 5; display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 0; overflow-x: hidden; overflow-y: auto; align-self: stretch; } .application-dashboard-insights > .interview-calendar-panel { flex: 0 0 300px; min-height: 300px; } .application-dashboard-insights > .application-progress-ai { flex: 0 0 auto; width: 100%; box-sizing: border-box; } .application-dashboard-insights .application-progress-ai-heading { flex-wrap: wrap; gap: 10px; } .application-dashboard-insights .application-progress-ai-heading > div { flex: 1 1 160px; min-width: 0; } .application-dashboard-insights .application-progress-ai-heading h2 { font-size: 16px; line-height: 1.3; } .application-dashboard-insights .application-progress-ai-heading .button { min-height: 34px; padding: 7px 10px; font-size: 12px; } .application-dashboard-insights .application-progress-ai-note { margin: 10px 0 0; } .application-dashboard-insights .application-progress-ai-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .application-dashboard-insights .application-progress-ai-stats > div { padding: 9px; } .application-dashboard-insights .application-progress-ai-stats dd { font-size: 19px; } .application-progress-ai-guidance { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); } .application-progress-ai-guidance h3 { margin-top: 0; } .application-progress-ai-guidance li + li { margin-top: 6px; } .application-progress-ai-sources { display: grid; gap: 8px; margin-top: 12px; } .application-progress-ai-sources > div { display: grid; gap: 3px; font-size: 12px; } .application-progress-ai-sources span { color: var(--muted); overflow-wrap: anywhere; } .application-progress-ai-check { margin-top: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; } .application-progress-ai-check > strong, .application-progress-ai-check > small { display: block; overflow-wrap: anywhere; } .application-progress-ai-check > small { margin-top: 3px; color: var(--muted); } .application-progress-ai-check ul { margin: 8px 0; } .application-progress-ai-check li { font-size: 12px; } .application-progress-ai-check .text-button { padding: 4px 0; font-size: 12px; } /* Client-list world clock, independent of the client details form. */ body:has(#hiredView.active) .topbar { height: auto; min-height: 56px; } body:has(#hiredView.active) .hired-header-summary:not([hidden]) { flex-wrap: wrap; } .client-world-clock-trigger { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border: 1px solid var(--theme-border, #d9deeb); border-radius: 999px; background: var(--theme-surface, #fff); color: var(--theme-info-text, #252d4f); font: inherit; font-size: 11px; font-weight: 650; white-space: nowrap; cursor: pointer; } .client-world-clock-trigger:hover { background: var(--theme-raised, #f0f2fa); border-color: var(--theme-info-border, #aeb9d4); } .client-world-clock-trigger:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; } #worldClockModal { width: min(900px, calc(100vw - 32px)); overflow: hidden; } #worldClockModal .world-clock-form { display: grid; grid-template-rows: auto auto auto auto minmax(0, 1fr) auto; gap: 12px; box-sizing: border-box; max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); overflow: hidden; } #worldClockModal .modal-heading { margin: 0; align-items: flex-start; } .world-clock-help { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; } .world-clock-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: 10px; } .world-clock-toolbar label { min-width: 0; } .world-clock-toolbar :is(input, select) { box-sizing: border-box; width: 100%; min-height: 36px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--theme-surface, #fff); color: var(--ink); font: inherit; font-size: 12px; } .world-clock-local { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; } .world-clock-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; gap: 10px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; } .world-clock-card { display: grid; gap: 6px; min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 9px; background: var(--theme-surface, #fafbfd); } .world-clock-card-heading { display: grid; gap: 3px; } .world-clock-card-heading strong { font-size: 13px; overflow-wrap: anywhere; } .world-clock-card small, .world-clock-card > span { color: var(--muted); font-size: 11px; } .world-clock-card time { color: var(--navy); font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } .world-clock-empty { grid-column: 1 / -1; margin: 0; padding: 24px 12px; color: var(--muted); font-size: 13px; text-align: center; } #worldClockModal .modal-actions { position: static; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--line); background: var(--theme-surface, #fff); } @media (max-width: 720px) { .client-world-clock-trigger { min-height: 30px; padding: 4px 7px; gap: 4px; font-size: 10px; } .world-clock-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .world-clock-card { padding: 10px; } .world-clock-card time { font-size: 18px; } .world-clock-toolbar { grid-template-columns: minmax(0, 1fr); gap: 8px; } } /* Application count and view actions share a toolbar above the filters. */ #applicationsView .application-workspace-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } #applicationsView .application-workspace-actions { flex: 0 1 auto; margin-left: auto; justify-content: flex-end; } #applicationsView .application-workspace-actions .application-view-toggle { display: flex; flex-wrap: nowrap; } #applicationsView > .application-filters > .application-filter-chips { grid-column: 1 / -1; } #applicationsView > .application-filters > .application-filter-chips:empty { display: none; } @media (max-width: 720px) { #applicationsView .application-workspace-head { flex-wrap: wrap; } #applicationsView .application-workspace-actions { flex: 1 0 100%; margin-left: 0; } body:has(#applicationsView.active):has(#openAddModal:not([hidden])) #applicationsView .application-workspace-head { padding-right: 0; gap: 8px; } body:has(#applicationsView.active):has(#openAddModal:not([hidden])) #applicationsView .application-workspace-count { flex: 0 0 calc(100% - 120px); margin-right: 120px; } } /* Compact desktop task workspace; mobile keeps its existing touch sizing. */ @media (min-width: 901px) { body:has(#dailyTaskView.active) .content { grid-template-rows: 44px minmax(0, 1fr); gap: 8px; } body:has(#dailyTaskView.active) .topbar { height: 44px; min-height: 44px; } body:has(#dailyTaskView.active) .topbar h1 { font-size: 20px; } body:has(#dailyTaskView.active) #dailyTaskView.active { grid-template-rows: minmax(0, 1fr); gap: 0; overflow: hidden; } body:has(#dailyTaskView.active) #dailyTaskView .daily-task-toolbar { gap: 8px; } body:has(#dailyTaskView.active) #dailyTaskView .daily-task-date-step { width: 30px; min-width: 30px; height: 32px; min-height: 32px; } body:has(#dailyTaskView.active) #dailyTaskView .daily-task-date-label { min-height: 32px; padding: 5px 8px; font-size: 12px; } body:has(#dailyTaskView.active) #dailyTaskView :is(.daily-task-today-button, .daily-task-filter-field select, #openDailyTaskAddModal) { height: 32px; min-height: 32px; padding: 5px 10px; font-size: 12px; } body:has(#dailyTaskView.active) #dailyTaskView .daily-task-filter-field { margin-left: auto; } body:has(#dailyTaskView.active) #dailyTaskView #openDailyTaskAddModal { margin-left: 0; } body:has(#dailyTaskView.active) #dailyTaskView .daily-task-summary { display: flex; align-items: center; gap: 0; } body:has(#dailyTaskView.active) #dailyTaskView :is(.daily-task-summary > div, .daily-task-summary-overdue) { flex: 0 0 auto; justify-content: flex-start; gap: 8px; width: auto; min-width: 0; min-height: 28px; padding: 3px 14px; border: 0; border-radius: 0; background: transparent; box-shadow: none; } body:has(#dailyTaskView.active) #dailyTaskView .daily-task-summary > div:first-child { padding-left: 0; } body:has(#dailyTaskView.active) #dailyTaskView .daily-task-summary > div + div { border-left: 1px solid var(--theme-border, #dfe3ec); } body:has(#dailyTaskView.active) #dailyTaskView .daily-task-summary span { font-size: 11px; } body:has(#dailyTaskView.active) #dailyTaskView .daily-task-summary strong { font-size: 16px; } body:has(#dailyTaskView.active) #dailyTaskView .daily-task-layout { height: 100%; min-height: 0; align-items: stretch; gap: 12px; } body:has(#dailyTaskView.active) #dailyTaskView :is(.daily-task-list-panel, .daily-task-history-panel) { min-height: 0; height: 100%; overflow: hidden; padding: 12px; border-radius: 10px; } body:has(#dailyTaskView.active) #dailyTaskView .daily-task-section-heading { min-height: 20px; padding-bottom: 8px; } body:has(#dailyTaskView.active) #dailyTaskView .daily-task-section-heading h3 { font-size: 14px; } body:has(#dailyTaskView.active) #dailyTaskView .daily-task-progress { height: 4px; margin-bottom: 10px; } body:has(#dailyTaskView.active) #dailyTaskView .daily-task-list-tools { gap: 8px; margin-bottom: 8px; } body:has(#dailyTaskView.active) #dailyTaskView .daily-task-list-tools input { min-height: 32px; height: 32px; padding-top: 5px; padding-bottom: 5px; font-size: 12px; } body:has(#dailyTaskView.active) #dailyTaskView :is(.daily-task-list, .daily-task-history-list) { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; } body:has(#dailyTaskView.active) #dailyTaskView :is(.daily-task-list, .daily-task-history-list) .daily-task-item { min-height: 40px; padding: 6px 8px; gap: 9px; } body:has(#dailyTaskView.active) #dailyTaskView :is(.daily-task-action, .daily-task-delete) { flex-basis: 26px; width: 26px; min-width: 26px; height: 26px; padding: 0; font-size: 12px; } body:has(#dailyTaskView.active) #dailyTaskView .daily-task-item-title { font-size: 12px; } body:has(#dailyTaskView.active) #dailyTaskView .daily-task-status { padding: 3px 7px; font-size: 10px; } body:has(#dailyTaskView.active) #dailyTaskView .daily-task-history-controls { gap: 8px; margin-bottom: 8px; } body:has(#dailyTaskView.active) #dailyTaskView .daily-task-history-controls :is(.button, input) { height: 32px; min-height: 32px; padding: 5px 8px; font-size: 11px; } body:has(#dailyTaskView.active) #dailyTaskView :is(.daily-task-empty, .daily-task-history-empty) { height: 100%; min-height: 0; padding: 12px; font-size: 12px; } } @media (max-width: 900px) { body:has(#dashboardView.active):has(#applicationDashboardPanel:not([hidden])) #applicationDashboardPanel > .application-dashboard-insights { grid-column: 1 / -1; grid-row: auto; overflow: visible; } .application-dashboard-insights > .interview-calendar-panel { flex-basis: auto; } } /* Fit the desktop letter workspace to the available screen; export stays A4. */ @media (min-width: 901px) { body:has(#documentsView.active #coverLetterPanel:not(.hidden)) .content { height: 100dvh; display: flex; flex-direction: column; padding-bottom: 16px; overflow: hidden; } #documentsView.active:has(#coverLetterPanel:not(.hidden)) { flex: 1; min-height: 0; } #documentsView:has(#coverLetterPanel:not(.hidden)) .documents-page-panel { height: 100%; display: flex; flex-direction: column; } #documentsView .documents-tabs { flex-shrink: 0; } #coverLetterPanel:not(.hidden) { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 14px 18px; } #coverLetterPanel .cover-letter-heading { flex-shrink: 0; padding-bottom: 10px; } #coverLetterPanel .cover-letter-workspace { flex: 1; min-height: 0; padding-top: 12px; gap: 18px; grid-template-columns: minmax(250px, 340px) minmax(0, 1fr); align-items: stretch; } #coverLetterPanel .cover-letter-editor { display: flex; flex-direction: column; min-height: 0; } #coverLetterPanel .cover-letter-editor-heading { margin-bottom: 8px; flex-shrink: 0; } #coverLetterPanel .cover-letter-editor-fields { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 7px; } #coverLetterPanel .cover-letter-editor-fields input { padding: 6px 9px; min-height: 32px; } #coverLetterPanel .cover-letter-fixed-contact { padding: 6px 8px; } #coverLetterPanel .cover-letter-body-field { flex: 1; min-height: 70px; grid-template-rows: auto minmax(0, 1fr); } #coverLetterPanel .cover-letter-body-field textarea { min-height: 0; height: 100%; resize: none; } #coverLetterPanel .cover-letter-preview-area { display: flex; flex-direction: column; min-height: 0; overflow: hidden; padding-bottom: 0; } #coverLetterPanel .cover-letter-preview-label { flex-shrink: 0; } .cover-letter-preview-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; } #coverLetterPreview { position: absolute; top: 50%; left: 50%; width: 794px; max-width: none; margin: 0; transform-origin: center; transform: translate(-50%, -50%) scale(var(--letter-preview-scale, .4)); } } .template-preview-note { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; } .template-preview-subject { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; padding: 14px 18px; border-bottom: 1px solid var(--line); background: var(--theme-surface, #fff); } .template-preview-subject span { color: var(--muted); font-size: 12px; } .template-preview-subject strong { min-width: 0; overflow-wrap: anywhere; font-size: 14px; } /* Keep currency, amounts, and pay periods aligned across application rows. */ .application-salary-value { display: inline-grid; grid-template-columns: minmax(0, var(--salary-amount-width, 8ch)) max-content; align-items: baseline; column-gap: .55em; width: max-content; max-width: 100%; vertical-align: baseline; } .application-salary-amount { min-width: 0; text-align: left; font-variant-numeric: tabular-nums; } .application-salary-currency { display: inline; } .application-salary-number { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .application-salary-period { text-align: left; white-space: nowrap; color: var(--color-text-secondary); } .application-salary, .application-salary-value, #salaryAmount { font-family: var(--font-ui); font-variant-numeric: lining-nums tabular-nums; } @media (max-width: 900px) { #applicationsView .application-data-table td.application-salary-cell { display: flex; align-items: baseline; gap: 6px; } #applicationsView .application-salary-value { flex: 0 1 auto; min-width: 0; } } /* Search and the research assistant share one global, responsive dialog. */ .quick-search-modal { padding: 0; interpolate-size: allow-keywords; transition: width .22s ease, height .22s ease; } .quick-search-modal.is-research { width: min(860px, calc(100vw - 32px)); height: min(780px, calc(100dvh - 40px)); max-height: calc(100dvh - 40px); padding: 0; } .quick-search-modal .quick-search-shell { display: flex; flex-direction: column; min-height: 0; max-height: inherit; } .quick-search-modal.is-research .quick-search-shell { height: 100%; } .research-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px 12px; flex-shrink: 0; } .research-header h2 { margin: 0; font-size: 20px; } .research-header p { margin: 5px 0 0; color: var(--muted); font-size: 11px; } .research-header .icon-button { width: 34px; height: 34px; font-size: 24px; } .research-tabs { display: flex; gap: 5px; padding: 0 22px 12px; border-bottom: 1px solid var(--line); flex-shrink: 0; } .research-tabs button { border: 0; border-radius: 7px; padding: 8px 14px; background: transparent; color: var(--muted); font-size: 12px; font-weight: 650; } .research-tabs button[aria-selected="true"] { background: var(--theme-action, var(--navy)); color: white; } .research-panel { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; } .research-panel[hidden], #quickAppSearchPanel[hidden] { display: none; } #quickAppSearchPanel { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0; overflow: hidden; } .research-panel:not([hidden]), #quickAppSearchPanel:not([hidden]) { animation: search-mode-enter .2s ease-out; } .research-tabs button { transition: background-color .18s ease, color .18s ease; } @keyframes search-mode-enter { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .quick-search-modal, .research-tabs button { transition: none; } .research-panel:not([hidden]), #quickAppSearchPanel:not([hidden]) { animation: none; } } .research-toolbar { position: relative; display: flex; align-items: center; gap: 8px; padding: 12px 22px; flex-shrink: 0; } .research-toolbar label { display: grid; gap: 4px; color: var(--muted); font-size: 10px; } .research-toolbar select { min-height: 32px; max-width: 100%; border: 1px solid var(--line); border-radius: 6px; padding: 5px 9px; background: var(--theme-surface, #fff); color: var(--navy); font-size: 12px; } .research-toolbar .text-button { margin-left: auto; white-space: nowrap; font-size: 11px; padding: 6px 0; } .research-source-help { margin: 4px 22px 8px; color: var(--muted); font-size: 10px; line-height: 1.5; flex-shrink: 0; } .research-usage { margin-left: auto; flex-shrink: 0; font-size: 11px; } .research-usage > .research-usage-toggle { display: flex; align-items: center; gap: 6px; width: auto; height: 32px; padding: 0 8px; font-size: 11px; } .research-usage > .research-usage-toggle:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; } .research-usage-popover { position: absolute; z-index: 10; top: 100%; right: 12px; width: min(340px, calc(100% - 24px)); max-height: min(320px, 40dvh); overflow-y: auto; box-sizing: border-box; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--theme-surface, #fff); box-shadow: 0 8px 26px #18213d1a; } .research-toolbar > .text-button { margin-left: 0; } .research-usage-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; } .research-usage-heading > span { color: var(--muted); } .research-usage-heading strong { color: var(--navy); font-variant-numeric: tabular-nums; } .research-usage-heading .text-button { margin-left: auto; font-size: 18px; line-height: 1; padding: 2px 5px; } .research-usage progress { appearance: none; border: 0; border-radius: 3px; display: block; width: 72px; height: 4px; margin: 0; accent-color: #477f64; } .research-usage progress[hidden] { display: none; } .research-usage progress::-webkit-progress-bar { background: var(--theme-raised, #e2e6ec); border-radius: 3px; } .research-usage progress::-webkit-progress-value { background: var(--theme-success-strong, #477f64); border-radius: 3px; } .research-usage progress::-moz-progress-bar { background: var(--theme-success-strong, #477f64); border-radius: 3px; } .research-usage.is-warning progress::-webkit-progress-value { background: var(--theme-warning-strong, #b28520); } .research-usage.is-warning progress::-moz-progress-bar { background: var(--theme-warning-strong, #b28520); } .research-usage.is-exhausted progress::-webkit-progress-value { background: var(--theme-danger-strong, #ad4250); } .research-usage.is-exhausted progress::-moz-progress-bar { background: var(--theme-danger-strong, #ad4250); } .research-usage-reset { color: var(--muted); margin-left: auto; font-size: 10px; } .research-usage #researchUsageNote { margin: 6px 0 0; color: var(--theme-warning-text, #9b5e21); line-height: 1.5; font-size: 10px; } .research-usage details { margin: 0; } .research-usage summary { display: grid; place-items: center; width: 24px; height: 24px; list-style: none; color: var(--muted); cursor: pointer; font-size: 16px; border-radius: 5px; } .research-usage summary::-webkit-details-marker { display: none; } .research-usage summary:hover, .research-usage details[open] summary { background: var(--theme-raised, #eeeef6); color: var(--navy); } .research-usage-details { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); max-height: 180px; overflow-y: auto; font-size: 11px; line-height: 1.6; } .research-usage-details p { margin: 7px 0; color: var(--muted); } .research-usage a { color: var(--theme-info-text, #345e9e); } .research-usage.is-warning { border-color: var(--theme-warning-border, #e2ca86); } .research-usage.is-warning progress { accent-color: #b28520; } .research-usage.is-exhausted { border-color: var(--theme-danger-border, #e2b5ba); } .research-usage.is-exhausted progress { accent-color: #ad4250; } .research-messages { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 12px 22px; } .research-welcome { box-sizing: border-box; min-height: 100%; height: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 15px 0; } .research-welcome-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--theme-raised, #eeeef6); color: var(--navy); font-size: 24px; } .research-welcome h3 { margin: 14px 0 5px; font-size: 19px; } .research-welcome p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; } .research-suggestions { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin-top: 20px; } .research-suggestions button { border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; background: var(--theme-surface, #fff); color: var(--navy); font-size: 11px; } .research-message { margin: 0 0 14px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 10px; background: var(--theme-surface, #fff); } .research-message.is-user { margin-left: 10%; background: var(--theme-raised, #f2f3f8); border-color: transparent; } .research-message-label { display: block; margin-bottom: 7px; color: var(--muted); font-size: 10px; font-weight: 700; } .research-message-text { font-size: 13px; line-height: 1.75; white-space: pre-wrap; overflow-wrap: anywhere; } .research-message a { color: var(--theme-info-text, #345e9e); } .research-sources { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; font-size: 11px; } .research-sources summary { cursor: pointer; color: var(--muted); } .research-sources ol { padding-left: 20px; } .research-sources li { margin-bottom: 8px; overflow-wrap: anywhere; } .research-sources small { display: block; margin-top: 2px; color: var(--muted); } .research-source-note { font-size: 11px; color: var(--muted); line-height: 1.6; } .research-working { display: flex; align-items: center; gap: 10px; padding: 12px; color: var(--muted); font-size: 12px; } .research-working .news-category-loader-ring { width: 17px; height: 17px; border-width: 2px; margin: 0; } .quick-search-modal .research-form { margin: 8px 22px 0; padding: 10px; border: 1px solid var(--theme-border, #cdd3df); border-radius: 10px; background: var(--theme-surface, #fff); flex-shrink: 0; } .research-form:focus-within { border-color: var(--theme-info-border, #777f9a); box-shadow: 0 0 0 2px #1e27400b; } .quick-search-modal .research-form textarea { display: block; width: 100%; min-height: 44px; max-height: 120px; height: 50px; resize: vertical; border: 0; outline: 0; box-shadow: none; padding: 3px; background: transparent; color: var(--navy); font-family: inherit; font-size: 13px; line-height: 1.6; } .research-form > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .research-form small { color: var(--muted); font-size: 9px; } .research-form .button { min-height: 32px; padding: 7px 17px; font-size: 12px; } .research-error { margin: 0 22px; color: var(--theme-danger-text, #a62d3a); font-size: 12px; line-height: 1.5; flex-shrink: 0; } .research-status { margin: 8px 22px 14px; color: var(--muted); font-size: 10px; line-height: 1.5; flex-shrink: 0; } @media (max-width: 600px) { .quick-search-modal.is-research { width: calc(100vw - 20px); height: calc(100dvh - 28px); max-height: calc(100dvh - 28px); margin: auto; border-radius: 12px; } .research-header { padding: 12px 12px 9px; } .research-header h2 { font-size: 17px; } .research-tabs { padding: 0 12px 9px; } .research-toolbar { padding: 10px 12px; gap: 7px; } .research-toolbar select { font-size: 11px; padding-inline: 6px; } .research-source-help { margin-inline: 12px; } .research-usage { margin: 0 0 0 auto; font-size: 10px; } .research-usage-heading { gap: 6px; } .research-usage progress { width: 40px; } .research-usage-reset { font-size: 9px; } .research-usage-heading .text-button { margin-left: 0; } .research-messages { padding: 8px 12px; } .research-form { margin-inline: 12px; } .research-form textarea { font-size: 16px; min-height: 48px; } .research-form small { max-width: 170px; } .research-status, .research-error { margin-inline: 12px; } .research-welcome h3 { font-size: 16px; } .research-message-text { font-size: 12px; } } /* Password verification for protected workspace controls. */ .workspace-unlock-modal { width: min(440px, calc(100vw - 32px)); padding: 26px; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 18px 60px #18213d26; } .workspace-unlock-modal form { margin: 0; } .workspace-unlock-icon { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 15px; border-radius: 12px; background: var(--theme-raised, #eeeef6); color: var(--navy); font-size: 17px; } .workspace-unlock-modal h2 { margin: 0 0 9px; color: var(--navy); font-size: 21px; line-height: 1.3; } .workspace-unlock-description { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; } .workspace-unlock-field { margin-top: 22px; } .workspace-unlock-field label { display: block; margin-bottom: 8px; color: var(--navy); font-size: 12px; font-weight: 650; } .workspace-unlock-field input { box-sizing: border-box; display: block; width: 100%; min-height: 44px; padding: 11px 13px; border: 1px solid var(--theme-border, #d7dce5); border-radius: 8px; background: var(--theme-surface, #fff); color: var(--navy); font: inherit; font-size: 14px; outline: none; transition: border-color .15s, box-shadow .15s; } .workspace-unlock-field input::placeholder { color: var(--theme-muted, #8a919e); } .workspace-unlock-field input:focus { border-color: var(--theme-info-border, #777f9a); box-shadow: 0 0 0 3px #1e274012; } .workspace-unlock-field input:disabled { background: var(--theme-raised, #f5f6f8); } .workspace-unlock-field #clearWorkspaceHelp { margin: 8px 0 0; color: var(--muted); font-size: 11px; line-height: 1.6; } .workspace-unlock-field #clearWorkspaceError { margin: 8px 0 0; padding: 9px 11px; border: 1px solid var(--theme-border, #f0d1d6); border-radius: 7px; background: var(--theme-surface, #fff5f6); color: var(--theme-danger-text, #a62d3a); font-size: 12px; line-height: 1.5; } .workspace-unlock-field #clearWorkspaceError:empty { display: none; } .workspace-unlock-modal .modal-actions { margin-top: 23px; padding-top: 17px; border-top: 1px solid var(--line); gap: 9px; } .workspace-unlock-modal .modal-actions .button { min-height: 38px; border-radius: 8px; } @media (max-width: 600px) { .workspace-unlock-modal { padding: 21px; } .workspace-unlock-modal h2 { font-size: 19px; } .workspace-unlock-field input { font-size: 16px; } } .research-task-draft { display: grid; gap: 7px; margin-top: 14px; padding: 14px; border: 1px solid var(--theme-border, #d7e5dd); border-radius: 9px; background: var(--theme-raised, #f6faf7); font-size: 12px; } .research-task-draft > strong, .research-task-draft p { overflow-wrap: anywhere; } .research-task-draft > span:not(.research-message-label) { color: var(--muted); } .research-task-draft .research-message-label, .research-task-draft p { margin: 0; } .research-task-draft .button { justify-self: start; margin-top: 5px; font-size: 12px; } @media (max-width: 600px) { .research-toolbar label { min-width: 0; } } /* Follow-up calendar: weekends stay visible, faded, and disabled. */ .follow-up-date-picker { position: relative; display: block; min-width: 0; } .follow-up-date-picker > input { width: 100%; padding-right: 40px; box-sizing: border-box; } .follow-up-date-input::-webkit-calendar-picker-indicator { display: none; } .follow-up-calendar-trigger { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--navy); cursor: pointer; } .follow-up-calendar-trigger:hover, .follow-up-calendar-trigger[aria-expanded="true"] { background: var(--theme-raised, #eeeef6); } .follow-up-date-picker:has(input:disabled) > .follow-up-calendar-trigger { opacity: .4; pointer-events: none; } .follow-up-calendar { position: fixed; inset: auto; margin: 0; box-sizing: border-box; width: min(300px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow-y: auto; padding: 13px; border: 1px solid var(--theme-border, #dce1e8); border-radius: 12px; background: var(--theme-surface, #fff); color: var(--navy); box-shadow: 0 12px 38px #18213d24; } .follow-up-calendar-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; gap: 8px; } .follow-up-calendar-heading strong { font-size: 13px; } .follow-up-calendar-heading button { display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 7px; background: var(--theme-raised, #f4f5f9); color: var(--navy); font-size: 21px; cursor: pointer; } .follow-up-calendar-week, .follow-up-calendar-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; text-align: center; } .follow-up-calendar-week { margin-bottom: 5px; color: var(--muted); font-size: 10px; font-weight: 600; } .follow-up-calendar-week .is-weekend { opacity: .55; } .follow-up-calendar-days button { display: grid; place-items: center; min-width: 0; width: 100%; height: 32px; padding: 0; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--navy); font: inherit; font-size: 12px; cursor: pointer; } .follow-up-calendar-days button:hover:not(:disabled) { background: var(--theme-raised, #eeeef6); } .follow-up-calendar-days button.is-today { border-color: var(--theme-border, #c6cddd); } .follow-up-calendar-days button.is-selected:not(:disabled) { background: var(--theme-action, var(--navy)); color: #fff; } .follow-up-calendar-days button:focus-visible, .follow-up-calendar-heading button:focus-visible { outline: 2px solid var(--theme-info-border, #64759b); outline-offset: 1px; } .follow-up-calendar-days button:disabled { opacity: .35; background: var(--theme-raised, #f3f4f6); cursor: not-allowed; } .follow-up-calendar-days button.is-weekend { filter: blur(.35px); } .follow-up-calendar > p { margin: 11px 0 0; padding-top: 9px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; text-align: center; line-height: 1.5; } /* Appearance tokens are screen-only so printed documents retain the light palette. Literal color fallbacks above preserve the original light mode. */ @media screen { :root[data-theme="dark"] { color-scheme: dark; --theme-surface: #151515; --theme-raised: #1d1d1f; --theme-hover: #29292d; --theme-action: #35466e; --theme-action-hover: #435985; --theme-translucent-surface: rgba(21,21,21,.92); --theme-border: #39393e; --theme-text: #fff; --theme-muted: #fff; --theme-subtle: #fff; --theme-danger-soft: #321d23; --theme-danger-strong: #923e4d; --theme-danger-border: #77404d; --theme-danger-text: #ffa4b2; --theme-warning-soft: #30271b; --theme-warning-strong: #795b20; --theme-warning-border: #715c34; --theme-warning-text: #f4ce85; --theme-success-soft: #192b23; --theme-success-strong: #276345; --theme-success-border: #365e48; --theme-success-text: #8ddbb0; --theme-info-soft: #1c2636; --theme-info-strong: #35466e; --theme-info-border: #415578; --theme-info-text: #b1c8ff; --theme-violet-soft: #2a2238; --theme-violet-strong: #644582; --theme-violet-border: #66507d; --theme-violet-text: #d6b4f7; --color-background: #080808; --color-surface: var(--theme-surface); --color-border: var(--theme-border); --color-text-primary: var(--theme-text); --color-text-secondary: var(--theme-muted); --color-primary: var(--theme-info-text); --color-primary-hover: #cedcff; --color-primary-soft: var(--theme-info-soft); --color-neutral-50: #151515; --color-neutral-100: #1d1d1f; --color-neutral-200: #39393e; --color-neutral-400: #a3a3af; --color-neutral-600: #b4b4be; --color-neutral-800: #eeeeef; --color-success: var(--theme-success-text); --color-success-soft: var(--theme-success-soft); --color-warning: var(--theme-warning-text); --color-warning-soft: var(--theme-warning-soft); --color-danger: var(--theme-danger-text); --color-danger-soft: var(--theme-danger-soft); --color-info: var(--theme-info-text); --color-info-soft: var(--theme-info-soft); --navy-deep: #101010; --sand: #24211c; --status-to-apply: #b4b4be; --status-applied: var(--theme-info-text); --status-replied: #8edbd0; --status-interview: var(--theme-violet-text); --status-offer: var(--theme-success-text); --status-rejected: var(--theme-danger-text); --status-ghosted: var(--theme-warning-text); } :root[data-theme="dark"] :is(#dailyTaskView, #applicationsView, #toApplyView, #hiredView, #inboxView, #accountView) { --workspace-ink: var(--theme-text); --workspace-muted: var(--theme-muted); --workspace-line: var(--theme-border); --workspace-danger: var(--theme-danger-text); } :root[data-theme="dark"] .sidebar { background: #101010; } /* Keep the black canvas consistent across the view-specific background rules. */ :root[data-theme="dark"] :is(body, .content, .login-screen) { background: #080808 !important; } :root[data-theme="dark"] :is(input, textarea, select) { color-scheme: dark; } /* All workspace text stays white, including page-specific and inline colors. Status backgrounds still distinguish success, warning, and error states. */ :root[data-theme="dark"] :where(body, body *) { color: #fff !important; } :root[data-theme="dark"] :is(input, textarea)::placeholder { color: #fff; opacity: 1; } :root[data-theme="dark"] :focus-visible { outline: 2px solid #b1c8ff; outline-offset: 3px; } } :root[data-theme="light"] { color-scheme: light; } #workspaceTheme { max-width: 280px; } #workspaceThemeNote { margin-top: 10px; } #accountView .account-login-activity li { display:block; height:auto; padding:0; overflow:visible; } #accountView .account-login-activity details { width:100%; min-width:0; } #accountView .account-login-activity summary { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:42px; padding:8px 0; cursor:pointer; list-style:none; } #accountView .account-login-activity summary::-webkit-details-marker { display:none; } #accountView .account-login-activity summary > span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #accountView .account-login-activity summary > span::before { content:'›'; display:inline-block; margin-right:8px; transition:transform .15s; } #accountView .account-login-activity details[open] summary > span::before { transform:rotate(90deg); } #accountView .account-login-activity summary:focus-visible { outline:2px solid var(--navy); outline-offset:-2px; border-radius:4px; } #accountView .account-login-activity dl { display:grid; grid-template-columns:110px minmax(0,1fr); gap:9px 14px; padding:2px 0 16px 16px; margin:0; font-size:10px; line-height:1.6; } #accountView .account-login-activity dt { color:var(--workspace-muted); } #accountView .account-login-activity dd { margin:0; overflow-wrap:anywhere; } @media(max-width:600px) { #accountView .account-login-activity summary { flex-wrap:wrap; gap:5px; } #accountView .account-login-activity summary time { flex:0 0 100%; text-align:left; padding-left:16px; } #accountView .account-login-activity dl { grid-template-columns:90px minmax(0,1fr); gap:7px 10px; } } @media(prefers-reduced-motion:reduce) { #accountView .account-login-activity summary > span::before { transition:none; } } /* Keep task actions and summaries within their own card. */ body:has(#dailyTaskView.active) #dailyTaskView .daily-task-list-panel > .daily-task-toolbar { flex: 0 0 auto; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; } body:has(#dailyTaskView.active) #dailyTaskView .daily-task-list-panel > .daily-task-summary { display: flex; flex: 0 0 auto; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0 0 12px; } body:has(#dailyTaskView.active) #dailyTaskView .daily-task-summary > div, body:has(#dailyTaskView.active) #dailyTaskView .daily-task-summary-overdue { display: flex; flex: 0 0 auto; align-items: center; justify-content: flex-start; gap: 6px; width: auto; min-width: 0; min-height: 24px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; } body:has(#dailyTaskView.active) #dailyTaskView .daily-task-summary strong { font-size: 15px; } body:has(#dailyTaskView.active) #dailyTaskView .daily-task-summary span { font-size: 11px; } body:has(#dailyTaskView.active) #dailyTaskView .daily-task-filter-field { margin-left: auto; } body:has(#dailyTaskView.active) #dailyTaskView #openDailyTaskAddModal { margin-left: 0; } /* Calendar selection and compact, evenly spaced task totals. */ body:has(#dailyTaskView.active) #dailyTaskView .daily-task-date-navigation { display: flex; flex: 0 1 auto; align-items: center; width: auto; gap: 8px; } #dailyTaskView .daily-task-calendar-field { display: block; min-width: 0; } #dailyTaskView .daily-task-calendar-field input { box-sizing: border-box; width: 150px; max-width: 100%; min-height: 34px; padding: 6px 10px; border: 1px solid var(--theme-border, #dfe3ec); border-radius: 7px; background: var(--theme-surface, #fff); color: var(--theme-text, #343531); font: inherit; font-size: 12px; color-scheme: light; } :root[data-theme="dark"] #dailyTaskView .daily-task-calendar-field input { color-scheme: dark; } #dailyTaskView .daily-task-calendar-field input:focus-visible { outline: 2px solid var(--theme-info-text, #4f5aa3); outline-offset: 2px; } body:has(#dailyTaskView.active) #dailyTaskView .daily-task-list-panel > .daily-task-summary { gap: 8px; } body:has(#dailyTaskView.active) #dailyTaskView .daily-task-summary > div, body:has(#dailyTaskView.active) #dailyTaskView .daily-task-summary-overdue { gap: 8px; min-height: 28px; padding: 3px 9px; border: 0; border-radius: 5px; background: var(--theme-raised, #f6f7f9); } @media (max-width: 600px) { body:has(#dailyTaskView.active) #dailyTaskView .daily-task-date-navigation { flex-basis: 100%; } body:has(#dailyTaskView.active) #dailyTaskView .daily-task-filter-field { flex: 1 1 auto; margin-left: 0; } #dailyTaskView .daily-task-filter-field select { width: 100%; } } /* Modern settings workspace. All surfaces follow the saved workspace theme. */ #settingsModal, #settingsModal :is(h2, h3, .eyebrow) { font-family: var(--font-ui); } #settingsModal { --settings-surface:var(--theme-surface,#fff); --settings-canvas:var(--theme-raised,#f6f7f9); --settings-ink:var(--theme-text,#20283e); --settings-muted:var(--theme-muted,#697184); width:min(1160px,calc(100vw - 48px)); height:min(88dvh,860px); padding:0; border:1px solid var(--line); border-radius:18px; background:var(--settings-surface); color:var(--settings-ink); box-shadow:0 28px 90px #10182830,0 4px 16px #10182812; } #settingsModal::backdrop { background:#10182880; backdrop-filter:blur(5px); } #settingsModal[open] { display:grid; grid-template-columns:218px minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); } #settingsModal .settings-modal-heading { padding:23px 28px; background:var(--settings-surface); } #settingsModal .settings-brand { display:flex; align-items:center; gap:14px; } #settingsModal .settings-brand-icon { display:grid; place-items:center; width:44px; height:44px; border:1px solid var(--line); border-radius:12px; background:var(--settings-canvas); color:var(--settings-ink); font-size:18px; } #settingsModal .settings-modal-heading .eyebrow { margin:0 0 5px; font-size:10px; letter-spacing:.13em; color:var(--settings-muted); } #settingsModal .settings-modal-heading h2 { margin:0; font-size:19px; letter-spacing:-.5px; } #settingsModal .settings-navigation { grid-column:1; grid-row:2; display:flex; flex-direction:column; gap:7px; padding:24px 14px; border-right:1px solid var(--line); background:var(--settings-surface); overflow-y:auto; } #settingsModal .settings-navigation button { display:flex; align-items:center; gap:12px; width:100%; min-height:44px; padding:12px 14px; border:1px solid transparent; border-radius:9px; background:transparent; color:var(--settings-muted); text-align:left; font:inherit; font-size:13px; font-weight:500; cursor:pointer; } #settingsModal .settings-navigation button i { width:18px; text-align:center; font-size:14px; } #settingsModal .settings-navigation button:hover { background:var(--settings-canvas); color:var(--settings-ink); } #settingsModal .settings-navigation button[aria-pressed="true"] { color:var(--settings-ink); background:var(--settings-canvas); border-color:var(--line); font-weight:650; box-shadow:0 1px 2px #10182806; } #settingsModal .settings-navigation button[aria-pressed="true"]::after { content:''; width:6px; height:6px; margin-left:auto; border-radius:50%; background:currentColor; } #settingsModal :is(button,input,select):focus-visible { outline:2px solid var(--theme-info-text,#4f5aa3); outline-offset:3px; } #settingsModal [data-settings-panel][hidden] { display:none !important; } #settingsModal .settings-account-content { grid-column:2; grid-row:2; min-height:0; min-width:0; overflow-y:auto; overscroll-behavior:contain; padding:32px; background:var(--settings-canvas); scrollbar-gutter:stable; } #settingsModal .settings-account-heading { margin:0 0 26px; padding:0; border:0; gap:8px; } #settingsModal .settings-account-heading h3 { font-size:26px; font-weight:700; letter-spacing:-.8px; } #settingsModal .settings-account-heading p { margin:0; font-size:13px; line-height:1.65; color:var(--settings-muted); } #settingsModal .settings-device-panels { display:contents; } #settingsModal .settings-device-section,#settingsModal #accountView .account-section,#settingsModal #accountView .settings-password-panel { min-width:0; padding:24px; border:1px solid var(--line); border-radius:12px; background:var(--settings-surface); box-shadow:0 2px 3px #10182803; } #settingsModal .settings-device-section { margin-bottom:20px; } #settingsModal .settings-device-heading { margin-bottom:12px; } #settingsModal .settings-device-heading .eyebrow { display:none; } #settingsModal .settings-device-heading h3 { margin:0; font-size:15px; font-weight:650; } #settingsModal .settings-stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding:0; margin:18px 0; border:0; background:transparent; } #settingsModal .settings-stats span { display:grid; gap:5px; padding:18px; border:1px solid var(--line); border-radius:9px; background:var(--settings-canvas); color:var(--settings-muted); font-size:12px; } #settingsModal .settings-stats strong { color:var(--settings-ink); font-size:25px; font-weight:650; font-variant-numeric:tabular-nums; } #settingsModal .settings-copy { color:var(--settings-muted); font-size:13px; line-height:1.7; } #settingsModal .settings-backup-controls { gap:15px; max-width:none; margin-top:22px; } #settingsModal .settings-backup-controls > .button { justify-self:start; } #settingsModal :is(.button,.danger-button) { width:auto; min-height:40px; padding:10px 15px; border-radius:8px; font-size:12px; line-height:1.5; font-weight:600; } #settingsModal .text-button { min-height:36px; font-size:12px; } #settingsModal .form-field { gap:8px; color:var(--settings-ink); font-size:12px; } #settingsModal .form-field :is(select,input),#settingsModal #accountLoginActivityScope { min-height:42px; max-width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:var(--settings-surface); color:var(--settings-ink); font-size:13px; } #settingsModal .settings-device-section .form-field select { width:min(100%,300px); } #settingsModal #accountView.active { gap:20px; } #settingsModal #accountView .account-identity-section { padding:24px; border:1px solid var(--line); border-radius:12px; background:var(--settings-surface); gap:18px; } #settingsModal #accountView .account-identity-copy { min-width:0; } #settingsModal #accountView .account-provider-label { margin-bottom:6px; font-size:11px; } #settingsModal #accountView .account-identity-copy h2 { font-size:18px; letter-spacing:-.4px; } #settingsModal .account-identity-caption { margin:7px 0 0; color:var(--settings-muted); font-size:12px; line-height:1.6; } #settingsModal #accountView .account-avatar { flex:0 0 54px; width:54px; height:54px; font-size:21px; border-radius:15px; background:var(--settings-canvas); color:var(--settings-ink); border:1px solid var(--line); } #settingsModal #accountView .account-overview-grid { grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:18px; padding:0; border:0; align-items:start; } #settingsModal #accountView .account-section-heading { margin-bottom:18px; align-items:center; flex-wrap:wrap; } #settingsModal #accountView .account-section-heading h2 { font-size:14px; font-weight:650; } #settingsModal #accountView .account-connection-row,#settingsModal #accountView .account-detail-list > div { grid-template-columns:minmax(75px,.7fr) minmax(0,1fr); gap:12px; min-height:48px; padding:14px 0; align-items:start; } #settingsModal #accountView :is(dt,dd) { line-height:1.6; font-size:12px; } #settingsModal #accountView .account-connection-row dd strong { font-weight:550; } #settingsModal #accountView .account-connection-row dd small { font-size:11px; line-height:1.6; } #settingsModal #accountUserId { font-size:11px; font-variant-numeric:tabular-nums; } #settingsModal #accountView .account-empty-state { padding:18px; border-radius:8px; background:var(--settings-canvas); font-size:12px; } #settingsModal .background-follow-up-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:18px; } #settingsModal #accountView .password-security-layout { margin:0; padding:0; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); } #settingsModal #accountView .password-security-section { min-width:0; padding-top:0; border-bottom:0; } #settingsModal #accountView .password-security-section h2 { margin-top:0; font-size:15px; } #settingsModal .settings-theme-preview { display:grid; grid-template-columns:70px 1fr; height:180px; max-width:460px; margin:22px 0; overflow:hidden; border:1px solid var(--line); border-radius:10px; background:var(--settings-canvas); } #settingsModal .theme-preview-sidebar { display:grid; align-content:start; gap:12px; padding:22px 12px; border-right:1px solid var(--line); background:var(--settings-surface); } #settingsModal .theme-preview-sidebar span { height:7px; border-radius:3px; background:var(--line); } #settingsModal .theme-preview-sidebar span:first-child { background:var(--settings-muted); margin-bottom:9px; width:70%; } #settingsModal .theme-preview-content { padding:24px; } #settingsModal .theme-preview-heading { width:40%; height:9px; margin-bottom:20px; border-radius:3px; background:var(--settings-muted); } #settingsModal .theme-preview-cards { display:flex; gap:10px; margin-bottom:18px; } #settingsModal .theme-preview-cards span { flex:1; height:42px; border:1px solid var(--line); border-radius:5px; background:var(--settings-surface); } #settingsModal .theme-preview-lines { display:grid; gap:9px; } #settingsModal .theme-preview-lines span { height:5px; border-radius:2px; background:var(--line); } #settingsModal .theme-preview-lines span:last-child { width:65%; } @media(max-width:1050px) { #settingsModal #accountView .account-overview-grid { grid-template-columns:minmax(0,1fr); } #settingsModal .settings-account-content { padding:26px; } } @media(max-width:700px) { #settingsModal { width:calc(100vw - 16px); height:calc(100dvh - 16px); max-height:calc(100dvh - 16px); border-radius:14px; } #settingsModal[open] { grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto minmax(0,1fr); overflow:hidden; } #settingsModal .settings-modal-heading { padding:16px; } #settingsModal .settings-modal-heading h2 { font-size:16px; } #settingsModal .settings-brand-icon { width:38px; height:38px; font-size:16px; } #settingsModal .settings-navigation { grid-column:1; grid-row:2; flex-direction:row; gap:6px; padding:10px 12px; border-right:0; border-bottom:1px solid var(--line); overflow-x:auto; overflow-y:hidden; } #settingsModal .settings-navigation button { flex:0 0 auto; width:auto; min-height:44px; padding:10px 12px; white-space:nowrap; font-size:12px; } #settingsModal .settings-navigation button[aria-pressed="true"]::after { display:none; } #settingsModal .settings-account-content { grid-column:1; grid-row:3; padding:22px 16px; scrollbar-gutter:auto; } #settingsModal .settings-account-heading { margin-bottom:22px; } #settingsModal .settings-account-heading h3 { font-size:23px; } #settingsModal .settings-device-section,#settingsModal #accountView .account-section,#settingsModal #accountView .settings-password-panel,#settingsModal #accountView .account-identity-section { padding:18px; } #settingsModal #accountView .account-identity-copy h2 { font-size:15px; } #settingsModal #accountView .account-avatar { flex-basis:44px; width:44px; height:44px; border-radius:12px; font-size:17px; } #settingsModal #accountView .password-security-layout { grid-template-columns:minmax(0,1fr); } #settingsModal #accountView .password-recovery-section { padding:20px 0 0; border-left:0; border-top:1px solid var(--line); } #settingsModal .settings-stats span { padding:14px; } } #settingsModal .account-storage-plan-controls[hidden],#accountView .account-detail-list > div[hidden] { display:none !important; }