/* ── Reset & Base ─────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --bg: #f4f5f7; --surface: #ffffff; --surface2: #f1f5f9; --card: #ffffff; --card-hover: #f8fafc; --border: #e5e7eb; --border-light: #d1d5db; --primary: #059669; --primary-dark: #047857; --primary-dim: rgba(5,150,105,.10); --accent: #2563eb; --accent-dim: rgba(37,99,235,.10); --danger: #dc2626; --gold: #d97706; --text: #111827; --text-muted: #6b7280; --text-faint: #9ca3af; --radius: 10px; --radius-sm: 6px; --shadow: 0 4px 20px rgba(0,0,0,.08); --header-h: 56px; --sidebar-w: 300px; /* ── Typography scale (desktop) ──────────────────────────────────────────── Adjust any value here to update it across the entire app. Mobile overrides live in the @media (max-width: 768px) :root block below. */ --fs-micro: 10px; --lh-micro: 12px; /* status dots, tiny badges only */ --fs-xs: 11px; --lh-xs: 14px; /* ALL CAPS labels, pill labels */ --fs-sm: 12px; --lh-sm: 16px; /* captions, timestamps, help text */ --fs-base: 14px; --lh-base: 20px; /* body text, inputs, tables, nav items */ --fs-md: 16px; --lh-md: 24px; /* emphasized text, subheadings */ --fs-lg: 18px; --lh-lg: 26px; /* card titles */ --fs-xl: 20px; --lh-xl: 28px; /* section headings */ --fs-2xl: 24px; --lh-2xl: 32px; /* major headings */ --fs-3xl: 28px; --lh-3xl: 36px; /* page titles */ } html, body { height: 100%; font-family: 'Inter', system-ui, sans-serif; font-size: var(--fs-base); line-height: var(--lh-base); background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; } a { color: var(--primary); text-decoration: none; } button { cursor: pointer; font-family: inherit; } input, select, textarea { font-family: inherit; } /* ── Views ─────────────────────────────────────────────────────────────────── */ .view { min-height: 100vh; } /* ── Login ─────────────────────────────────────────────────────────────────── */ .view-login { display: flex; align-items: center; justify-content: center; padding: 32px 16px; background: radial-gradient(ellipse at 60% 20%, rgba(16,185,129,.08) 0%, transparent 60%), radial-gradient(ellipse at 20% 80%, rgba(59,130,246,.06) 0%, transparent 50%), var(--bg); } .auth-card { width: 100%; max-width: 400px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 40px 36px; box-shadow: var(--shadow); } .brand { text-align: center; margin-bottom: 32px; } .brand-logo { display: flex; justify-content: center; margin-bottom: 16px; } .brand-name { font-size: var(--fs-2xl); font-weight: 700; margin-bottom: 4px; } .brand-tagline { font-size: var(--fs-sm); color: var(--text-muted); } .auth-form { display: flex; flex-direction: column; gap: 16px; } .reset-hint { font-size: 13px; color: var(--text-muted); text-align: center; } .auth-error { margin-top: 8px; padding: 10px 14px; background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.3); border-radius: var(--radius-sm); color: #fca5a5; font-size: var(--fs-sm); } .auth-success { margin-top: 8px; padding: 10px 14px; background: var(--primary-dim); border: 1px solid rgba(16,185,129,.3); border-radius: var(--radius-sm); color: #6ee7b7; font-size: var(--fs-sm); } /* ── Fields ────────────────────────────────────────────────────────────────── */ .field { display: flex; flex-direction: column; gap: 5px; } .field-label { font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; } .req { color: var(--danger); } .field-input { width: 100%; padding: 8px 11px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-size: var(--fs-base); line-height: var(--lh-base); outline: none; transition: border-color .15s; } .field-input:focus { border-color: var(--primary); } .field-input::placeholder { color: var(--text-faint); } .field-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238fa3be' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 28px; } input[type="file"].field-input { padding: 6px 11px; } .pw-wrap { position: relative; } .pw-wrap .field-input { padding-right: 40px; } .pw-toggle { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--text-muted); padding: 4px; opacity: .6; } .pw-toggle:hover { opacity: 1; } /* ── Buttons ───────────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 14px; border-radius: var(--radius-sm); font-size: var(--fs-base); font-weight: 600; border: none; cursor: pointer; transition: all .15s; white-space: nowrap; } .btn-primary { background: var(--primary); color: #fff; } .btn-primary:hover { background: var(--primary-dark); } .btn-ghost { background: transparent; color: var(--text-muted); border: 1px solid var(--border); } .btn-ghost:hover { background: var(--surface2); color: var(--text); } .btn-outline { background: transparent; color: var(--text-muted); border: 1px solid var(--border); } .btn-outline:hover { border-color: var(--primary); color: var(--primary); } .btn-sm { padding: 5px 10px; font-size: 12px; } .btn-add { background: var(--primary-dim); color: var(--primary); border: 1px solid rgba(16,185,129,.25); } .btn-add:hover { background: var(--primary); color: #fff; } .btn-icon { background: none; border: none; color: var(--text-muted); padding: 6px; border-radius: var(--radius-sm); transition: all .15s; } .btn-icon:hover { color: var(--text); background: var(--surface2); } .link-btn { background: none; border: none; color: var(--text-muted); font-size: 13px; text-align: left; padding: 0; cursor: pointer; } .link-btn:hover { color: var(--primary); } .btn-spinner { display: inline-flex; align-items: center; } .spin { animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .hidden-btn { display: none !important; } /* ── Header ────────────────────────────────────────────────────────────────── */ .header { position: sticky; top: 0; z-index: 100; height: var(--header-h); display: flex; align-items: center; justify-content: space-between; padding: 0 16px; background: var(--surface); border-bottom: 1px solid var(--border); gap: 12px; transition: transform 0.28s cubic-bezier(0.2,0,0,1), background-color 0.28s ease, border-color 0.28s ease; } .header-brand { display: flex; align-items: center; gap: 10px; } .header-home-btn { background: none; border: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 4px 8px; border-radius: var(--radius); color: var(--text); transition: background .15s; flex-shrink: 0; } .header-home-btn:hover { background: var(--surface2); } .header-title { font-size: var(--fs-md); font-weight: 700; } .header-brand-text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; line-height: 1.12; } .header-account { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; } @media (max-width: 768px) { .header-account { display: none; } } /* Global header search */ .header-search-wrap { flex: 1; max-width: 340px; position: relative; display: flex; align-items: center; } /* Desktop: pin search bar to true horizontal center of the header */ /* ── Mobile typography scale overrides ───────────────────────────────────── xs/sm/micro stay the same — they're meta/label sizes that don't need scaling. iOS auto-zoom fix (font-size: 16px on inputs at ≤600px) is separate and stays. */ @media (max-width: 768px) { :root { --fs-base: 15px; --lh-base: 22px; --fs-md: 17px; --lh-md: 26px; --fs-lg: 20px; --lh-lg: 28px; --fs-xl: 24px; --lh-xl: 32px; --fs-2xl: 28px; --lh-2xl: 36px; --fs-3xl: 34px; --lh-3xl: 42px; } } @media (min-width: 769px) { .header-search-wrap { position: absolute; left: 50%; transform: translateX(-50%); width: 380px; max-width: calc(100% - 240px); flex: none; } /* search-wrap is out of flow, so push header-right back to the far right */ .header-right { margin-left: auto; } } .header-search-icon { position: absolute; left: 11px; color: var(--text-muted); pointer-events: none; flex-shrink: 0; } .header-search-input { width: 100%; padding: 7px 14px 7px 34px; background: var(--surface2); border: 1px solid var(--border); border-radius: 20px; font-size: var(--fs-base); color: var(--text); outline: none; transition: border-color .15s; } .header-search-input::placeholder { color: var(--text-faint); } .header-search-input:focus { border-color: var(--primary); background: var(--card); } /* Header nav icon shortcuts */ .header-nav-icons { display: flex; align-items: center; gap: 2px; flex-shrink: 0; } .header-nav-icon-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 12px; border: none; background: transparent; color: var(--text-muted); border-radius: var(--radius); cursor: pointer; font-size: 10px; font-weight: 600; transition: all .15s; position: relative; white-space: nowrap; } .header-nav-icon-btn:hover { color: var(--text); background: var(--surface2); } .header-nav-icon-btn.active { color: var(--primary); background: rgba(16,185,129,.08); } .header-nav-icon-btn .header-badge { top: 2px; right: 6px; } .header-right { display: flex; align-items: center; gap: 12px; } .header-undo-btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface2); color: var(--text-muted); font-size: 12px; font-weight: 600; cursor: pointer; transition: all .15s; white-space: nowrap; } .header-undo-btn:hover { background: var(--card); color: var(--text); border-color: var(--primary); } .header-db { font-size: 12px; color: var(--text-muted); white-space: nowrap; } .header-support-btn { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 4px 10px; border-radius: 8px; transition: color .15s, background .15s; } .header-support-btn:hover { color: var(--text); background: var(--surface2); } .header-support-btn span { font-size: 10px; font-weight: 600; } .header-user { font-size: 12px; color: var(--text-muted); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Header inbox wrap / badge */ .header-inbox-wrap { position: relative; } .header-badge { position: absolute; top: -3px; right: -5px; min-width: 16px; height: 16px; background: var(--danger); color: #fff; font-size: 10px; font-weight: 700; border-radius: 8px; padding: 0 3px; display: inline-flex; align-items: center; justify-content: center; } .notif-badge { position: absolute; top: 2px; right: 4px; background: #ef4444; color: #fff; font-size: 9px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 10px; display: flex; align-items: center; justify-content: center; padding: 0 4px; pointer-events: none; } .claimed-dot { width: 8px; height: 8px; background: var(--primary); border-radius: 50%; position: absolute; top: 2px; right: 2px; border: 1px solid var(--surface); } /* ── Team / context switcher (header) ─────────────────────────────────────── */ .team-switcher-wrap { position: relative; } .team-switcher-btn { flex-direction: row !important; gap: 6px !important; padding: 6px 10px !important; border: 1px solid var(--border) !important; background: var(--surface2) !important; color: var(--text) !important; border-radius: var(--radius) !important; } .team-switcher-btn:hover { background: var(--card) !important; border-color: var(--primary) !important; } .team-switcher-btn > span { font-size: 12px !important; font-weight: 600 !important; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .team-switcher-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 240px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 4px 12px rgba(0,0,0,.12); z-index: 100; padding: 6px; } .team-switcher-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; background: none; border: none; border-radius: 6px; text-align: left; cursor: pointer; color: var(--text); font-size: 13px; transition: background .12s; } .team-switcher-item:hover { background: var(--surface2); } .team-switcher-item.active { background: var(--surface2); font-weight: 600; } .team-switcher-item .ts-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .team-switcher-item .ts-role { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); padding: 2px 6px; border-radius: 4px; background: var(--surface2); border: 1px solid var(--border); } .team-switcher-item.active .ts-role { color: var(--primary); border-color: var(--primary); } .team-switcher-divider { height: 1px; background: var(--border); margin: 6px 0; } /* Read-only banner shown when acting as someone else's team */ .readonly-banner { display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: #fff8e1; border-bottom: 1px solid #f0d67a; color: #7a5a00; font-size: 12px; font-weight: 600; } .readonly-banner svg { flex-shrink: 0; } /* Hide owner-only controls when viewing another team or acting as non-owner. Any element tagged with .owner-only will disappear under these body classes. Use .acting-readonly for controls that only make sense to the owner, and .acting-foreign for controls that mutate the viewer's own identity (like team management) — those should still show to the signed-in user on their own team even when we later allow editor writes. */ body.acting-foreign .owner-only { display: none !important; } body.acting-foreign .self-only { display: none !important; } /* Phase 2a sub-users are strictly read-only. Hide the primary write-action buttons across the app so a viewer can't initiate a create/mutate flow that would otherwise write under their own Firebase uid (and leak into the owner's listings, e.g. a job posted with postedBy === subUser.uid). Server-side RTDB rules are still the real enforcement — this list is the UX belt to match the suspenders. Card-level actions (apply / rate / note / favorite / message) are rendered by JS and gated via isViewerMode() in app.js instead of here. */ body.acting-readonly #btnPostJob, body.acting-readonly #btnAlertPrefs, body.acting-readonly #btnAddContact, body.acting-readonly #btnNewGroup, body.acting-readonly #gsOpenProfile, body.acting-readonly #ideaSubmitBtn, body.acting-readonly #stTicketSubmit, body.acting-readonly #gsTicketSubmit, body.acting-readonly #welcomeClaim, body.acting-readonly #welcomeOptApply, body.acting-readonly #welcomeRegSearch, body.acting-readonly #addToListNewBtn, body.acting-readonly #listsManageBtn, body.acting-readonly .star-btn, body.acting-readonly .note-btn, body.acting-readonly .svc-btn, body.acting-readonly .card-rating-btn, body.acting-readonly .apply-job-btn, body.acting-readonly .card-msg-btn, body.acting-readonly .idea-upvote-btn, body.acting-readonly #replyBarWrap, body.acting-readonly #composeBar, body.acting-readonly #drRateBtn, body.acting-readonly #drEditBtn, body.acting-readonly #claimProfileBtn, body.acting-readonly #profileClaimBtn, /* Project Tracker / Estimates Pro / Invoice Generator primary create/edit buttons */ body.acting-readonly #jcsNewBtn, body.acting-readonly #jcsSettingsBtn, body.acting-readonly #jcsAddExpenseBtn, body.acting-readonly #jcsAddMaterialBtn, body.acting-readonly #jcsAddSupplierBtn, body.acting-readonly #jcsAddSubContBtn, body.acting-readonly #jcsAddCustomerBtn, body.acting-readonly #jcsAddMaterialBtnEmpty, body.acting-readonly #jcsAddSupplierBtnEmpty, body.acting-readonly #jcsAddSubContBtnEmpty, body.acting-readonly #jcsAddCustomerBtnEmpty, body.acting-readonly #estNewBtn, body.acting-readonly #estNewBtnEmpty, body.acting-readonly #estAddCustomerBtn, body.acting-readonly #estAddCustomerBtnEmpty, body.acting-readonly #estAddProductBtn, body.acting-readonly #estAddDiscountBtn, body.acting-readonly #estAddTermBtn, body.acting-readonly #invNewBtn { display: none !important; } /* Hide per-row edit/delete controls across tools-hub tables/rows */ body.acting-readonly .est-term-row [data-term-edit], body.acting-readonly .est-term-row [data-term-del], body.acting-readonly .est-term-row .est-term-check, body.acting-readonly .est-term-row .est-term-toggle { display: none !important; } /* Disable idea upvote & inline actions visually too */ body.acting-readonly .idea-upvote-btn, body.acting-readonly .card-actions-btn { pointer-events: none; opacity: .4; } @media (max-width: 640px) { .team-switcher-btn > span { max-width: 90px; } .team-switcher-menu { right: auto; left: 0; min-width: 200px; } } /* ── App Layout ────────────────────────────────────────────────────────────── */ .app-body { display: grid; grid-template-columns: var(--sidebar-w) 1fr; height: calc(100vh - var(--header-h)); } .sidebar { background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; padding: 0; gap: 0; } .main-content { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 20px 24px; background: var(--bg); } /* ── Sidebar brand ──────────────────────────────────────────────────────────── */ .sidebar-brand { display: none; align-items: center; gap: 9px; padding: 13px 12px 12px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .sidebar-brand-name { font-size: var(--fs-base); font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ── Sidebar scroll area ────────────────────────────────────────────────────── */ .sidebar-scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 8px; display: flex; flex-direction: column; gap: 0; } /* ── Persistent sidebar nav (snav) ─────────────────────────────────────────── */ .snav { display: flex; flex-direction: column; gap: 0; } .snav-section { margin-bottom: 6px; } .snav-label { font-size: var(--fs-micro); font-weight: 700; color: var(--text-faint); text-transform: uppercase; letter-spacing: .07em; padding: 8px 8px 3px; } .snav-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; border: none; background: transparent; color: var(--text-muted); font-size: var(--fs-base); font-weight: 500; border-radius: var(--radius-sm); cursor: pointer; text-align: left; transition: background .12s, color .12s; position: relative; white-space: nowrap; } .snav-item:hover { background: var(--surface2); color: var(--text); } .snav-item.active { background: var(--primary-dim); color: var(--primary); font-weight: 600; } .snav-item.active svg { stroke: var(--primary); } .snav-item svg { flex-shrink: 0; opacity: .75; } .snav-item.active svg { opacity: 1; } .snav-item span:first-of-type { flex: 1; overflow: hidden; text-overflow: ellipsis; } .snav-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; background: var(--accent); color: #fff; font-size: 10px; font-weight: 700; border-radius: 9px; padding: 0 4px; margin-left: auto; flex-shrink: 0; } /* Locked tool items */ .snav-item.snav-locked { opacity: .45; cursor: default; } .snav-item.snav-locked:hover { background: transparent; color: var(--text-muted); } .snav-lock { margin-left: auto; flex-shrink: 0; font-size: 11px; } /* Divider between nav and context panels */ .snav-ctx-divider { height: 1px; background: var(--border); margin: 4px 4px 8px; } /* ── Bottom-pinned nav items ────────────────────────────────────────────────── */ .snav-bottom { flex-shrink: 0; padding: 6px 8px; display: flex; flex-direction: column; gap: 0; } /* ── Hide header nav icons on desktop (they live in the sidebar now) ─────────── */ .header-nav-icons { display: none !important; } /* ── Hamburger (hidden on desktop) ─────────────────────────────────────────── */ .btn-hamburger { display: none; background: none; border: none; color: var(--text-muted); padding: 6px; border-radius: var(--radius-sm); cursor: pointer; flex-shrink: 0; } .btn-hamburger:hover { color: var(--text); background: var(--surface2); } /* ── Sidebar overlay (mobile) ───────────────────────────────────────────────── */ .sidebar-overlay { display: none; position: fixed; inset: 0; z-index: 149; background: rgba(0,0,0,.5); } .sidebar-overlay.active { display: block; } /* ── Mobile sidebar extras ──────────────────────────────────────────────────── */ .mobile-sidebar-extras { display: none; flex-direction: column; gap: 2px; padding: 0 0 8px; } .mobile-extra-btn { display: flex; align-items: center; gap: 10px; width: 100%; border: none; background: none; color: var(--text-muted); font-size: 13px; font-weight: 600; padding: 10px 8px; border-radius: var(--radius-sm); cursor: pointer; text-align: left; transition: background .15s, color .15s; } .mobile-extra-btn:hover { background: var(--surface2); color: var(--text); } .mobile-extra-danger { color: #f87171 !important; } .mobile-extra-danger:hover { background: rgba(239,68,68,.08) !important; } /* ── Mobile bottom nav ──────────────────────────────────────────────────────── */ .mobile-bottom-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 120; background: var(--surface); border-top: 1px solid var(--border); padding: 4px 0 max(4px, env(safe-area-inset-bottom)); transition: transform 0.28s cubic-bezier(0.2,0,0,1), background-color 0.28s ease, border-color 0.28s ease; } .mobile-bnav-btn { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; border: none; background: none; color: var(--text-muted); font-size: 10px; font-weight: 600; padding: 6px 4px; cursor: pointer; position: relative; transition: color .15s; } .mobile-bnav-btn.active { color: var(--primary); } .mobile-bnav-badge { position: absolute; top: 2px; right: calc(50% - 18px); background: var(--danger); color: #fff; font-size: 9px; font-weight: 700; min-width: 15px; height: 15px; border-radius: 10px; display: flex; align-items: center; justify-content: center; padding: 0 3px; pointer-events: none; } /* ── Main Nav ─────────────────────────────────────────────────────────────── */ .main-nav { display: flex; gap: 4px; background: var(--surface2); border-radius: var(--radius); padding: 4px; } .main-nav-top { margin-bottom: 0; } .sidebar-section-divider { height: 1px; background: var(--border); margin: 6px 4px; } .main-nav-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 8px 4px; border-radius: 7px; font-size: 11px; font-weight: 600; border: none; background: transparent; color: var(--text-muted); transition: all .15s; white-space: nowrap; position: relative; } .main-nav-btn:hover { color: var(--text); } .main-nav-btn.active { background: var(--card); color: var(--text); box-shadow: 0 1px 4px rgba(0,0,0,.3); } .nav-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; background: var(--accent); color: #fff; font-size: 10px; font-weight: 700; border-radius: 9px; padding: 0 4px; margin-left: 2px; } /* ── Sub-Nav (Search / Favorites) ──────────────────────────────────────────── */ .sub-nav { display: flex; gap: 4px; align-items: center; } .sub-btn { flex: 1; padding: 6px 8px; border-radius: 6px; border: none; font-size: 12px; font-weight: 600; background: transparent; color: var(--text-muted); transition: all .15s; } .sub-btn:hover { color: var(--text); } .sub-btn.active { background: var(--primary-dim); color: var(--primary); } .tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; background: var(--primary); color: #fff; font-size: 10px; font-weight: 700; border-radius: 9px; padding: 0 3px; margin-left: 2px; } /* ── Message tab buttons ────────────────────────────────────────────────────── */ .msg-tabs { display: flex; gap: 4px; background: var(--surface2); border-radius: var(--radius-sm); padding: 3px; } .msg-tab { flex: 1; padding: 5px 6px; border-radius: 4px; border: none; font-size: 11px; font-weight: 600; background: transparent; color: var(--text-muted); transition: all .15s; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 4px; } .msg-tab:hover { color: var(--text); } .msg-tab.active { background: var(--card); color: var(--primary); } .msg-tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; background: var(--accent); color: #fff; font-size: 9px; font-weight: 700; border-radius: 8px; padding: 0 3px; line-height: 1; } /* ── Search type toggle ────────────────────────────────────────────────────── */ .search-type-toggle { display: grid; grid-template-columns: 1fr 1fr; background: var(--surface2); border-radius: var(--radius-sm); padding: 3px; gap: 3px; } .stype-btn { padding: 6px; border-radius: 4px; border: none; font-size: 12px; font-weight: 600; background: transparent; color: var(--text-muted); transition: all .15s; } .stype-btn:hover { color: var(--text); } .stype-btn.active { background: var(--card); color: var(--primary); } /* ── Autocomplete ──────────────────────────────────────────────────────────── */ .autocomplete-wrap { position: relative; } .autocomplete-list { position: absolute; z-index: 200; top: calc(100% + 4px); left: 0; right: 0; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--shadow); max-height: 200px; overflow-y: auto; } .autocomplete-item { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; cursor: pointer; transition: background .1s; } .autocomplete-item:hover { background: var(--card-hover); } .ac-city { font-weight: 500; font-size: 13px; } .ac-state { font-size: 11px; color: var(--text-muted); } /* ── Filter divider ────────────────────────────────────────────────────────── */ .filter-divider { display: flex; align-items: center; gap: 8px; margin: 4px 0 2px; } .filter-divider span { font-size: 11px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; } .filter-divider::before, .filter-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); } /* ── Rating filter grid ────────────────────────────────────────────────────── */ .rating-filter-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } /* ── Search actions ────────────────────────────────────────────────────────── */ .search-actions { display: flex; gap: 8px; margin-top: 14px; } .search-actions .btn-primary { flex: 1; } .search-error { padding: 8px 12px; background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.3); border-radius: var(--radius-sm); color: #fca5a5; font-size: 12px; } /* ═══════════════════════════════════════════════════════════════════════════ Contractor Search Card (full-width, lives in main content area) ═══════════════════════════════════════════════════════════════════════════ */ /* Card shell */ .cs-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 20px; overflow: visible; } /* Header: tabs + Add button */ .cs-card-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-bottom: 1px solid var(--border); gap: 12px; } .cs-tabs { display: flex; gap: 4px; } .cs-tab-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: var(--radius-sm); border: 1px solid transparent; background: transparent; color: var(--text-muted); font-size: var(--fs-base); font-weight: 600; cursor: pointer; transition: all .15s; } .cs-tab-btn:hover { color: var(--text); background: var(--surface2); } .cs-tab-btn.active { background: var(--primary-dim); color: var(--primary); border-color: rgba(5,150,105,.2); } .cs-tab-btn svg { flex-shrink: 0; } .cs-add-btn { margin-left: auto; } /* Body padding */ .cs-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; } /* Filter row: location group + keyword + service + rating all inline */ .cs-filter-row { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; } /* Location type toggle — sits above the loc inputs */ .cs-loc-type { display: flex; flex-direction: column; gap: 6px; align-self: flex-end; } /* Location input groups — zip or city, shown/hidden by JS */ .cs-loc-group { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; } /* Individual filter field */ .cs-field { display: flex; flex-direction: column; gap: 4px; } .cs-label { font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; } .cs-filter-hint { font-size: 10px; font-weight: 500; color: var(--text-faint); text-transform: none; letter-spacing: 0; } /* Field widths */ .cs-input-zip { width: 110px; } .cs-input-radius { width: 140px; } .cs-input-city { width: 180px; } .cs-input-rating { width: 150px; } .cs-field-grow { flex: 1; min-width: 160px; } /* Footer row: checkboxes left, actions right */ .cs-footer-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 4px; border-top: 1px solid var(--border); } .cs-checks { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; } .cs-check-label { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-muted); cursor: pointer; transition: color .12s; user-select: none; } .cs-check-label input { accent-color: var(--primary); width: 14px; height: 14px; cursor: pointer; } .cs-check-label:hover { color: var(--text); } .cs-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; } .cs-search-btn { min-width: 90px; } /* Favorites body */ .cs-fav-body { } .cs-fav-hint { font-size: 13px; color: var(--text-muted); } /* Empty state below the card — simplified (just the DB count) */ .cs-empty-state { text-align: center; padding: 32px 16px; } .cs-empty-stat { font-size: 13px; color: var(--text-faint); } /* Mobile: stack everything */ @media (max-width: 768px) { .cs-filter-row { flex-direction: column; align-items: stretch; } .cs-loc-type { align-self: stretch; } /* Zip/city input + radius stay on ONE row — zip grows, radius stays auto */ .cs-loc-group { flex-direction: row; align-items: flex-end; gap: 8px; flex-wrap: nowrap; } .cs-input-zip, .cs-input-city { flex: 1; min-width: 0; width: auto; } .cs-input-radius { width: 110px; flex-shrink: 0; } .cs-input-rating { width: 100%; } .cs-field-grow { min-width: 0; } .cs-footer-row { flex-direction: column; align-items: stretch; gap: 10px; } .cs-checks { gap: 10px; } .cs-actions { justify-content: flex-end; } } /* ── Job sidebar actions (legacy — kept for any remaining refs) ──────────── */ .job-sidebar-actions { display: flex; gap: 8px; flex-direction: column; } .job-sidebar-actions .btn { justify-content: center; } .panel-hint { font-size: 13px; color: var(--text-muted); line-height: 1.6; } /* ── Job Search Card (js-card) ─────────────────────────────────────────────── */ .js-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 20px; overflow: visible; } /* Header: tabs left, action buttons right */ .js-card-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-bottom: 1px solid var(--border); gap: 12px; flex-wrap: wrap; } .js-tabs { display: flex; gap: 4px; } .js-tab-btn { padding: 6px 14px; border-radius: var(--radius-sm); font-size: var(--fs-base); font-weight: 500; color: var(--text-muted); background: transparent; border: none; cursor: pointer; transition: background .12s, color .12s; white-space: nowrap; } .js-tab-btn:hover { background: var(--surface2); color: var(--text); } .js-tab-btn.active { background: var(--primary-dim, rgba(59,130,246,.12)); color: var(--primary); font-weight: 600; } .js-header-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; } /* Body: filter row */ .js-body { padding: 14px 16px 12px; } .js-filter-row { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; } .js-field { display: flex; flex-direction: column; gap: 4px; } .js-field-sm { min-width: 90px; } .js-field-grow { flex: 1; min-width: 130px; } .js-field-label { font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; } .js-actions { display: flex; gap: 8px; align-items: flex-end; flex-shrink: 0; padding-bottom: 1px; } @media (max-width: 768px) { .js-filter-row { flex-direction: column; gap: 10px; } .js-field, .js-field-sm, .js-field-grow { width: 100%; } .js-actions { width: 100%; justify-content: flex-end; } .js-card-header { gap: 8px; } .js-header-actions .btn span { display: none; } } /* ── Empty state ───────────────────────────────────────────────────────────── */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: calc(100vh - var(--header-h) - 80px); gap: 12px; padding: 40px 20px; } .empty-icon { margin-bottom: 8px; } .empty-title { font-size: var(--fs-2xl); font-weight: 700; } .empty-desc { font-size: var(--fs-base); color: var(--text-muted); max-width: 400px; line-height: var(--lh-base); } .empty-stat { font-size: var(--fs-sm); color: var(--primary); font-weight: 600; } /* ── Results header ────────────────────────────────────────────────────────── */ .results-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; } .results-meta { font-size: var(--fs-sm); color: var(--text-muted); } .results-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } /* ── View Toggle ───────────────────────────────────────────────────────────── */ .view-toggle { display: flex; background: var(--surface2); border-radius: 6px; padding: 2px; gap: 2px; } .view-btn { width: 30px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 5px; border: none; background: transparent; color: var(--text-muted); transition: all .15s; } .view-btn:hover { color: var(--text); } .view-btn.active { background: var(--card); color: var(--primary); box-shadow: 0 1px 3px rgba(0,0,0,.3); } /* ── Card Grid ─────────────────────────────────────────────────────────────── */ .contractor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; } /* ── Pagination ──────────────────────────────────────────────────────────── */ .pagination-bar { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 20px 0 8px; flex-wrap: wrap; } .pagination-btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 14px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface2); color: var(--text-muted); font-size: 12px; font-weight: 600; cursor: pointer; transition: all .15s; } .pagination-btn:hover:not(:disabled) { background: var(--card); color: var(--text); border-color: var(--primary); } .pagination-btn:disabled { opacity: 0.35; cursor: default; } .pagination-info { font-size: 12px; color: var(--text-muted); text-align: center; line-height: 1.5; } .pagination-info strong { color: var(--text); } /* ── Contractor Card ───────────────────────────────────────────────────────── */ .result-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; transition: border-color .15s, box-shadow .15s; display: flex; flex-direction: column; gap: 10px; } .result-card:hover { border-color: var(--border-light); box-shadow: 0 4px 16px rgba(0,0,0,.3); } .card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } .card-title-block { flex: 1; min-width: 0; } .result-business { font-size: 14px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .card-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 4px; } .card-badges .active-badge, .card-badges .temp-badge, .card-badges .sub-avail-badge { margin-left: 0; } .result-category { font-size: 11px; color: var(--text-muted); margin-top: 2px; line-height: 1.3; } .card-actions { display: flex; gap: 3px; flex-shrink: 0; } .card-btn { width: 27px; height: 27px; display: flex; align-items: center; justify-content: center; border-radius: 5px; border: none; background: var(--surface2); color: var(--text-muted); transition: all .15s; } .card-btn:hover { background: var(--surface); color: var(--text); } .card-btn.starred { color: var(--gold); } .card-btn.has-note { color: var(--accent); } .card-btn.has-svc { color: var(--primary); } .card-btn.has-ins { color: #34d399; } .card-btn.trash-btn:hover { color: var(--danger); background: rgba(239,68,68,.1); } .card-btn.msg-btn.can-msg { color: var(--accent); } .card-btn.msg-btn.inactive-msg { opacity: .35; cursor: default; } /* Active on Hub badge */ .active-badge { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px; background: rgba(59,130,246,.15); color: var(--accent); border: 1px solid rgba(59,130,246,.25); border-radius: 10px; font-size: 10px; font-weight: 600; white-space: nowrap; } /* Service chips */ .service-chips { display: flex; flex-wrap: wrap; gap: 4px; } .service-chip { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; background: var(--surface2); border-radius: 20px; font-size: 11px; color: var(--text-muted); font-weight: 500; } .top-chip { background: var(--primary-dim); color: var(--primary); } .chip-star { font-size: 9px; } /* Card details */ .result-details { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 10px; } .result-detail { display: flex; flex-direction: column; gap: 1px; } .result-detail-label { font-size: 10px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .04em; } .result-detail-val { font-size: 12px; color: var(--text-muted); } .result-detail-val a { color: var(--accent); } .result-detail-val a:hover { color: var(--primary); } .result-detail.full { grid-column: 1/-1; } /* Insurance badge on card — now a button replacing the old shield */ .card-ins-badge { display: flex; align-items: center; gap: 6px; padding: 6px 10px; background: rgba(148,163,184,.07); border: 1px solid rgba(148,163,184,.2); border-radius: var(--radius-sm); flex-shrink: 0; outline: none; transition: opacity .15s; } .card-ins-badge:hover { opacity: .8; } .card-ins-badge span { font-size: 11px; font-weight: 600; white-space: nowrap; } .ins-shield { flex-shrink: 0; } .ins-badge-text { font-size: 11px; font-weight: 600; color: #34d399; } .ins-badge-exp { font-size: 10px; color: var(--text-muted); margin-left: 2px; } /* 4-state card badge colors */ .card-ins-badge.ins-badge-verified { background: rgba(16,185,129,.10); border-color: rgba(16,185,129,.30); } .card-ins-badge.ins-badge-verified svg { stroke: #10b981; } .card-ins-badge.ins-badge-verified span { color: #10b981; } .card-ins-badge.ins-badge-pending { background: rgba(245,158,11,.10); border-color: rgba(245,158,11,.30); } .card-ins-badge.ins-badge-pending svg { stroke: #f59e0b; } .card-ins-badge.ins-badge-pending span { color: #f59e0b; } .card-ins-badge.ins-badge-unverified { background: rgba(148,163,184,.08); border-color: rgba(148,163,184,.22); } .card-ins-badge.ins-badge-unverified svg { stroke: #94a3b8; } .card-ins-badge.ins-badge-unverified span { color: #94a3b8; } .card-ins-badge.ins-badge-expired { background: rgba(239,68,68,.08); border-color: rgba(239,68,68,.28); } .card-ins-badge.ins-badge-expired svg { stroke: #fca5a5; } .card-ins-badge.ins-badge-expired span { color: #fca5a5; } /* Legacy overrides kept for any old markup */ .ins-badge-expired { color: #fca5a5 !important; border-color: rgba(239,68,68,.25) !important; background: rgba(239,68,68,.06) !important; } .ins-badge-expired .ins-shield { color: #fca5a5 !important; } .ins-badge-expired .ins-badge-text { color: #fca5a5 !important; } /* Card footer – rating + actions */ .card-footer { border-top: 1px solid var(--border); padding-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; } .card-rating-btn { display: flex; align-items: center; gap: 6px; background: none; border: none; padding: 4px 6px; border-radius: var(--radius-sm); color: var(--text-muted); font-size: 12px; cursor: pointer; transition: background .15s; } .card-rating-btn:hover { background: var(--surface2); } .card-rating-btn.rated { color: var(--gold); } .cr-stars { display: flex; gap: 1px; font-size: 13px; } .cr-score { font-weight: 700; font-size: 12px; } .cr-yours { font-size: 10px; font-weight: 600; color: var(--primary); background: rgba(16,185,129,.12); border-radius: 4px; padding: 1px 5px; margin-left: 2px; } /* Badges */ .custom-badge { display: inline-flex; align-items: center; padding: 1px 5px; border-radius: 4px; background: var(--accent-dim); color: var(--accent); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } /* Delete confirm */ .delete-confirm { display: none; align-items: center; gap: 8px; padding: 8px; background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.2); border-radius: var(--radius-sm); } .delete-confirm-msg { font-size: 12px; color: var(--text-muted); flex: 1; } .confirm-btn { padding: 4px 10px; border-radius: 4px; border: none; font-size: 12px; font-weight: 600; cursor: pointer; } .confirm-yes { background: var(--danger); color: #fff; } .confirm-no { background: var(--surface2); color: var(--text-muted); } .no-results { text-align: center; padding: 40px 20px; color: var(--text-muted); font-size: 14px; line-height: 1.7; grid-column: 1/-1; } /* ── LIST VIEW ─────────────────────────────────────────────────────────────── */ .list-view-wrap { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } /* 7 columns: Business | Location | Phone/Email | Top Service | Insurance | Rating | Actions */ .list-header { display: grid; grid-template-columns: 2.2fr 1.1fr 1.3fr 1fr 100px 90px 110px; align-items: center; gap: 12px; padding: 8px 14px; background: var(--surface2); border-bottom: 1px solid var(--border); } .list-header-cell { font-size: 10px; font-weight: 700; color: var(--text-faint); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; } .list-row { display: grid; grid-template-columns: 2.2fr 1.1fr 1.3fr 1fr 100px 90px 110px; align-items: center; gap: 12px; padding: 10px 14px; background: var(--card); border-bottom: 1px solid var(--border); transition: background .1s; } .list-row:last-child { border-bottom: none; } .list-row:hover { background: var(--card-hover); } .lr-business { min-width: 0; } .lr-biz-name { font-size: 15px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lr-category { font-size: 11px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lr-reg { font-size: 10.5px; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; } .lr-expires { font-size: 10.5px; color: var(--text-faint); display: inline; } .lr-location-block, .lr-phone-block { min-width: 0; } .lr-location { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lr-phone { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lr-phone a { color: var(--accent); } .lr-email { font-size: 10.5px; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; } .lr-email a { color: var(--text-faint); } .lr-email a:hover { color: var(--accent); } .lr-top-svc { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lr-rating { display: flex; align-items: center; gap: 4px; font-size: 12px; } .lr-stars { display: flex; gap: 1px; font-size: 12px; } .lr-score { font-weight: 700; color: var(--gold); font-size: 11px; } .lr-rating-empty { color: var(--text-faint, #9ca3af); font-size: 13px; font-weight: 500; } .lr-ins { display: flex; align-items: center; justify-content: center; } .lr-ins-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 600; color: #94a3b8; background: rgba(148,163,184,.08); border: 1px solid rgba(148,163,184,.2); padding: 3px 8px; border-radius: 4px; white-space: nowrap; outline: none; transition: opacity .15s; } .lr-ins-badge:hover { opacity: .8; } .lr-ins-badge.verified { color: #10b981; background: rgba(16,185,129,.10); border-color: rgba(16,185,129,.28); } .lr-ins-badge.pending { color: #f59e0b; background: rgba(245,158,11,.10); border-color: rgba(245,158,11,.28); } .lr-ins-badge.unverified { color: #94a3b8; background: rgba(148,163,184,.08); border-color: rgba(148,163,184,.2); } .lr-ins-badge.expired { color: #fca5a5; background: rgba(239,68,68,.08); border-color: rgba(239,68,68,.2); } .lr-ins-badge.on-file { color: #94a3b8; background: rgba(148,163,184,.08); border-color: rgba(148,163,184,.2); } .lr-actions { display: flex; gap: 3px; } .lr-actions .card-btn { width: 24px; height: 24px; } /* ── Job Cards ─────────────────────────────────────────────────────────────── */ .job-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; } .job-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 10px; transition: border-color .15s, box-shadow .15s; } .job-card:hover { border-color: var(--border-light); box-shadow: 0 4px 16px rgba(0,0,0,.3); } .job-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .job-title { font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.3; } .job-company { font-size: 12px; color: var(--text-muted); margin-top: 3px; } .job-type-badge { flex-shrink: 0; padding: 3px 8px; border-radius: 20px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } .jt-subcontract { background: var(--primary-dim); color: var(--primary); } .jt-full-time { background: var(--accent-dim); color: var(--accent); } .jt-part-time { background: rgba(168,85,247,.12); color: #c084fc; } .jt-one-time { background: rgba(245,158,11,.12); color: var(--gold); } .jt-seasonal { background: rgba(251,146,60,.12); color: #fb923c; } .job-trades { display: flex; flex-wrap: wrap; gap: 4px; } .trade-chip { display: inline-flex; padding: 2px 8px; background: var(--surface2); border-radius: 20px; font-size: 11px; color: var(--text-muted); font-weight: 500; } .job-details { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; } .job-detail { display: flex; flex-direction: column; gap: 1px; } .job-detail-label { font-size: 10px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .04em; } .job-detail-val { font-size: 12px; color: var(--text-muted); } .job-detail-val a { color: var(--accent); } .job-detail.full { grid-column: 1/-1; } .job-desc { font-size: 12px; color: var(--text-muted); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .job-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: 10px; gap: 8px; } .job-posted { font-size: 11px; color: var(--text-faint); } .job-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .job-owner-actions { display: flex; gap: 4px; } /* Job expiry badge */ .job-expiry-badge { display: inline-flex; align-items: center; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 20px; background: rgba(16,185,129,.12); color: var(--primary); border: 1px solid rgba(16,185,129,.25); letter-spacing: .02em; } .job-expiry-badge.warn { background: rgba(245,158,11,.12); color: #f59e0b; border-color: rgba(245,158,11,.3); } /* Job files section */ .job-files-section { margin-top: 8px; } .job-files-label { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; } .job-files-list { display: flex; flex-direction: column; gap: 3px; } .job-file-row { display: flex; align-items: center; gap: 7px; text-decoration: none; color: var(--primary); font-size: 12px; font-weight: 500; padding: 4px 6px; border-radius: 6px; transition: background .15s; } .job-file-row:hover { background: rgba(16,185,129,.08); } .job-file-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Highlight pulse when jumping to a job from a notification */ @keyframes jobCardPulse { 0% { box-shadow: 0 0 0 0 rgba(16,185,129,.5); } 60% { box-shadow: 0 0 0 8px rgba(16,185,129,0); } 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); } } .job-card-highlight { animation: jobCardPulse .6s ease-out 2; } /* Post job — "Posting As" profile tile */ .pj-profile-tile { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); } .pj-profile-tile-avatar { width: 36px; height: 36px; border-radius: 50%; background: rgba(16,185,129,.15); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; flex-shrink: 0; } .pj-profile-tile-name { font-size: 13px; font-weight: 700; color: var(--text); } .pj-profile-tile-sub { font-size: 11px; color: var(--text-muted); margin-top: 1px; } /* Post job file dropzone */ .pj-file-drop { display: flex; align-items: center; justify-content: center; gap: 8px; border: 1.5px dashed var(--border); border-radius: var(--radius-sm); padding: 14px 16px; cursor: pointer; color: var(--text-muted); font-size: 13px; transition: border-color .15s, background .15s; } .pj-file-drop:hover, .pj-file-drop.drag-over { border-color: var(--primary); background: rgba(16,185,129,.05); color: var(--text); } .pj-file-link { color: var(--primary); cursor: pointer; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .pj-file-chips { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; } .pj-file-entry { display: flex; flex-direction: column; gap: 4px; } .pj-file-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 20px; border: 1px solid var(--border); background: var(--surface2); font-size: 11px; font-weight: 500; color: var(--text-muted); align-self: flex-start; } .pj-chip-name { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); } .pj-chip-name[href] { color: var(--primary); text-decoration: none; } .pj-chip-name[href]:hover { text-decoration: underline; } .pj-chip-remove { background: none; border: none; cursor: pointer; color: var(--text-faint); font-size: 15px; line-height: 1; padding: 0 0 0 2px; transition: color .15s; } .pj-chip-remove:hover { color: var(--danger); } .pj-chip-saved { border-color: rgba(16,185,129,.3); background: rgba(16,185,129,.06); } .pj-file-desc-input { font-size: 11px; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface2); color: var(--text); outline: none; transition: border-color .15s; width: 100%; max-width: 320px; } .pj-file-desc-input:focus { border-color: var(--primary); } .pj-file-desc-input::placeholder { color: var(--text-faint); } /* ── Insurance upload modal ─────────────────────────────────────────────────── */ .ins-current-info { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; background: rgba(52,211,153,.08); border: 1px solid rgba(52,211,153,.25); border-radius: var(--radius-sm); margin-bottom: 4px; } .ins-current-text { font-size: 12px; color: #6ee7b7; line-height: 1.5; } .ins-current-text a { color: #34d399; font-weight: 600; } .upload-progress-bar { height: 6px; background: var(--surface2); border-radius: 3px; overflow: hidden; margin-bottom: 6px; } .upload-progress-fill { height: 100%; background: var(--primary); border-radius: 3px; transition: width .3s; width: 0%; } .upload-status { font-size: 12px; color: var(--text-muted); } /* ── Modals ────────────────────────────────────────────────────────────────── */ .modal-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.65); display: flex; align-items: center; justify-content: center; padding: 16px; backdrop-filter: blur(4px); } .modal-overlay-top { z-index: 1100; } /* sub-modals (Note, Rate, Services) always on top */ /* W-9 and other child modals open on top of the profile modal */ #w9Overlay { z-index: 1050; } .modal { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; width: 100%; max-width: 480px; max-height: 90vh; display: flex; flex-direction: column; box-shadow: var(--shadow); overflow: hidden; } .modal-lg { max-width: 600px; } .modal-xl { max-width: 680px; } .modal-header { display: flex; align-items: flex-start; justify-content: space-between; padding: 18px 20px 14px; border-bottom: 1px solid var(--border); gap: 12px; flex-shrink: 0; } .modal-title { font-size: 16px; font-weight: 700; } .modal-subtitle { font-size: 12px; color: var(--text-muted); margin-top: 2px; } .modal-close { background: none; border: none; color: var(--text-muted); padding: 4px; border-radius: 4px; transition: all .15s; } .modal-close:hover { color: var(--text); background: var(--surface2); } .modal-hint { font-size: 12px; color: var(--text-muted); line-height: 1.5; } .modal-body { padding: 16px 20px; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; flex: 1; display: flex; flex-direction: column; gap: 12px; } .modal-footer { padding: 12px 20px; border-top: 1px solid var(--border); display: flex; gap: 8px; justify-content: flex-end; flex-shrink: 0; } /* Services list */ .svc-list { display: flex; flex-direction: column; gap: 3px; max-height: 240px; overflow-y: auto; } .svc-item { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: var(--radius-sm); background: var(--surface2); transition: background .1s; } .svc-item:hover { background: var(--card); } .svc-check { width: 14px; height: 14px; accent-color: var(--primary); cursor: pointer; flex-shrink: 0; } .svc-label { flex: 1; font-size: 12px; cursor: pointer; } .svc-top-btn { background: none; border: none; font-size: 13px; padding: 2px 4px; cursor: pointer; color: var(--text-faint); border-radius: 4px; transition: color .15s; } .svc-top-btn:hover { color: var(--gold); } .svc-top-btn.top-active { color: var(--gold); } .custom-input-row { display: flex; gap: 8px; } .custom-input-row .field-input { flex: 1; } /* Rating rows */ #ratingRows { display: flex; flex-direction: column; gap: 14px; } .rating-row { display: flex; flex-direction: column; gap: 6px; } .rating-row-label { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; } .rating-stars { display: flex; gap: 6px; } .rating-star { font-size: 24px; cursor: pointer; color: var(--text-faint); transition: color .1s, transform .1s; user-select: none; } .rating-star:hover { transform: scale(1.1); } .rating-star.filled { color: var(--gold); } .rating-overall { text-align: center; padding: 12px; background: var(--surface2); border-radius: var(--radius-sm); font-size: 13px; color: var(--text-muted); } .rating-overall-score { font-size: 24px; font-weight: 700; color: var(--gold); } /* ── Rating review textarea ──────────────────────────────────────────────────── */ .rating-review-wrap { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); } .rating-review-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 8px; } .rating-review-input { width: 100%; box-sizing: border-box; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-family: inherit; font-size: 13px; padding: 10px 12px; resize: vertical; min-height: 76px; line-height: 1.5; transition: border-color .15s; } .rating-review-input:focus { outline: none; border-color: var(--primary); } .rating-review-input::placeholder { color: var(--text-faint); } /* ── Rating inline prompts (low-rating warning + review prompt) ──────────────── */ .rating-inline-warning { margin-top: 14px; padding: 13px 14px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); } .rating-inline-warning.warn { border-color: rgba(251,191,36,.35); background: rgba(251,191,36,.06); } .riw-msg { margin: 0 0 12px; font-size: 13px; color: var(--text); line-height: 1.5; display: flex; align-items: flex-start; } .riw-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; } .riw-actions .btn { flex: 0 0 auto; } .btn-danger { background: #ef4444; color: #fff; border: none; } .btn-danger:hover { background: #dc2626; } /* ── Card Reviews Section ────────────────────────────────────────────────────── */ .card-reviews { border-top: 1px solid var(--border); padding: 10px 14px 12px; background: rgba(255,255,255,0.015); } .card-reviews-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; } .card-reviews-label { font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-faint); } .reviews-nav { display: flex; align-items: center; gap: 5px; } .reviews-count { font-size: 11px; color: var(--text-muted); min-width: 32px; text-align: center; } .review-nav-btn { border: none; background: var(--surface2); color: var(--text-muted); border-radius: 4px; width: 22px; height: 22px; cursor: pointer; font-size: 16px; line-height: 1; display: flex; align-items: center; justify-content: center; padding: 0; transition: background .15s, color .15s; } .review-nav-btn:hover:not(:disabled) { background: var(--border); color: var(--text); } .review-nav-btn:disabled { opacity: 0.35; cursor: default; } .card-review-body { display: flex; flex-direction: column; gap: 4px; } .review-stars { font-size: 12px; color: var(--gold); letter-spacing: 1px; } .review-text { font-size: 12px; color: var(--text); line-height: 1.5; margin: 0; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .review-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; } .review-author-btn { border: none; background: none; color: var(--primary); font-size: 11px; font-family: inherit; cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: transparent; transition: text-decoration-color .15s; } .review-author-btn:hover { text-decoration-color: var(--primary); } .review-author-name { color: var(--text-muted); font-size: 11px; } /* Notes */ .note-textarea { width: 100%; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); padding: 10px 12px; font-size: 13px; line-height: 1.6; outline: none; resize: vertical; min-height: 110px; font-family: inherit; transition: border-color .15s; } .note-textarea:focus { border-color: var(--primary); } .note-textarea::placeholder { color: var(--text-faint); } /* Form grid */ .form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } /* ── Apply modal attachment rows ────────────────────────────────────────────── */ .apply-attach-row { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; background: var(--surface2); border-radius: var(--radius-sm); border: 1px solid var(--border); } .apply-attach-label { display: flex; align-items: flex-start; gap: 10px; flex: 1; cursor: pointer; } .apply-w9-btns { display: flex; gap: 6px; flex-shrink: 0; } /* ── W-9 modal styles ───────────────────────────────────────────────────────── */ .w9-classification { display: flex; flex-direction: column; gap: 4px; } .w9-radio { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 4px 0; cursor: pointer; } .w9-radio input[type="radio"] { accent-color: var(--primary); width: 14px; height: 14px; } .w9-cert-text { background: var(--surface2); border-radius: var(--radius-sm); padding: 12px; font-size: 11px; color: var(--text-muted); line-height: 1.7; } .w9-cert-text ol { padding-left: 16px; } .w9-cert-text li { margin-bottom: 6px; } .w9-official-link { text-align: center; padding: 8px; background: rgba(59,130,246,.08); border-radius: var(--radius-sm); border: 1px solid rgba(59,130,246,.2); } /* ── Profile modal styles ───────────────────────────────────────────────────── */ .prof-status-row { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--radius-sm); font-size: 12px; } .prof-status-row.success { background: rgba(16,185,129,.1); border: 1px solid rgba(16,185,129,.2); color: #6ee7b7; } .prof-status-row.info { background: var(--accent-dim); border: 1px solid rgba(59,130,246,.2); color: var(--accent); } /* ── Claim modal styles ─────────────────────────────────────────────────────── */ .claim-result-card { padding: 12px; background: var(--surface2); border-radius: var(--radius-sm); border: 1px solid var(--border); } .claim-result-card .claim-biz { font-weight: 700; font-size: 13px; } .claim-result-card .claim-detail { font-size: 12px; color: var(--text-muted); margin-top: 2px; } .claim-error { padding: 8px 12px; background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.3); border-radius: var(--radius-sm); color: #fca5a5; font-size: 12px; } /* ── Inbox / Messages sidebar ───────────────────────────────────────────────── */ .inbox-list { display: flex; flex-direction: column; gap: 1px; margin-top: 4px; } .inbox-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 8px; border-radius: var(--radius-sm); cursor: pointer; transition: background .1s; position: relative; } .inbox-item:hover { background: var(--surface2); } .inbox-item.active { background: var(--surface2); border-left: 2px solid var(--primary); padding-left: 6px; } .inbox-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--accent-dim); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; flex-shrink: 0; position: relative; } .inbox-unread-dot { position: absolute; top: -2px; right: -2px; width: 10px; height: 10px; background: var(--primary); border-radius: 50%; border: 2px solid var(--surface); } .inbox-body { flex: 1; min-width: 0; } .inbox-name { font-size: 13px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .inbox-preview { font-size: 11px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; } .inbox-time { font-size: 10px; color: var(--text-faint); margin-top: 2px; } .inbox-type-icon { font-size: 10px; background: var(--accent-dim); color: var(--accent); padding: 1px 5px; border-radius: 4px; font-weight: 600; } .inbox-empty { text-align: center; padding: 20px 12px; color: var(--text-faint); font-size: 12px; } /* ── Messages main / thread ─────────────────────────────────────────────────── */ #messagesMain { display: flex; flex-direction: row; height: 100%; overflow: hidden; } /* Inbox column — left pane */ .msg-inbox-col { width: 280px; min-width: 220px; max-width: 320px; flex-shrink: 0; display: flex; flex-direction: column; border-right: 1px solid var(--border); background: var(--surface); height: 100%; overflow: hidden; } .msg-inbox-header { padding: 12px 14px 8px; flex-shrink: 0; border-bottom: 1px solid var(--border); } .msg-inbox-title { font-size: var(--fs-xs); font-weight: 700; color: var(--text); text-transform: uppercase; letter-spacing: .04em; } .msg-inbox-col .msg-tabs { padding: 8px 10px 0; flex-shrink: 0; } .msg-inbox-col .inbox-list { flex: 1; overflow-y: auto; padding: 4px 6px; } .msg-inbox-col #groupPanel { flex-shrink: 0; } .msg-inbox-col #archivedWrap { flex-shrink: 0; } .msg-center-area { flex: 1; min-width: 0; display: flex; flex-direction: column; height: 100%; overflow: hidden; } #msgThreadView { display: flex; flex-direction: column; height: 100%; overflow: hidden; } /* Mobile: stack inbox above thread (hidden when thread open) */ @media (max-width: 768px) { #messagesMain { flex-direction: column; } .msg-inbox-col { width: 100%; max-width: 100%; min-width: 0; height: auto; max-height: 45vh; border-right: none; border-bottom: 1px solid var(--border); } .msg-inbox-col .inbox-list { max-height: 200px; } /* When a thread is open, hide the inbox list on mobile */ #messagesMain.thread-open .msg-inbox-col { display: none; } #messagesMain.thread-open .msg-center-area { height: 100%; } } .thread-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: var(--surface); border-bottom: 1px solid var(--border); flex-shrink: 0; gap: 12px; } .thread-meta { min-width: 0; } .thread-name { font-size: 14px; font-weight: 700; color: var(--text); } .thread-company { font-size: 12px; color: var(--text-muted); margin-top: 1px; } .thread-controls { display: flex; gap: 4px; flex-shrink: 0; } .thread-back-btn { background: var(--surface2); border: 1px solid var(--border); color: var(--text-muted); padding: 5px 7px; border-radius: var(--radius-sm); display: flex; align-items: center; cursor: pointer; transition: all .15s; } .thread-back-btn:hover { color: var(--text); background: var(--card); } .thread-messages-wrap { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; } .thread-compose { flex-shrink: 0; border-top: 1px solid var(--border); background: var(--surface); padding: 10px 14px; } .thread-attach-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; } .thread-input-row { display: flex; align-items: flex-end; gap: 8px; } .thread-textarea { flex: 1; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); padding: 8px 12px; font-size: 13px; line-height: 1.5; outline: none; resize: none; min-height: 60px; max-height: 120px; font-family: inherit; transition: border-color .15s; } .thread-textarea:focus { border-color: var(--primary); } .thread-textarea::placeholder { color: var(--text-faint); } .attach-file-btn { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-muted); cursor: pointer; transition: all .15s; flex-shrink: 0; } .attach-file-btn:hover { color: var(--text); background: var(--card); } /* ── Message bubbles ────────────────────────────────────────────────────────── */ .msg-bubble-wrap { display: flex; flex-direction: column; gap: 3px; max-width: 75%; } .msg-bubble-wrap.own { align-self: flex-end; align-items: flex-end; } .msg-bubble-wrap.other { align-self: flex-start; align-items: flex-start; } .msg-sender-name { font-size: 10px; color: var(--text-faint); font-weight: 600; padding: 0 4px; } .msg-bubble { padding: 10px 14px; border-radius: 12px; font-size: 13px; line-height: 1.5; word-wrap: break-word; } .msg-bubble.own { background: var(--primary); color: #fff; border-bottom-right-radius: 4px; } .msg-bubble.other { background: var(--card); color: var(--text); border-bottom-left-radius: 4px; border: 1px solid var(--border); } .msg-time { font-size: 10px; color: var(--text-faint); padding: 0 4px; display: flex; align-items: center; gap: 6px; } .msg-delete-btn { background: none; border: none; color: var(--text-faint); cursor: pointer; padding: 1px 3px; border-radius: 3px; transition: color .15s; } .msg-delete-btn:hover { color: var(--danger); } .msg-attach-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; background: var(--surface2); border: 1px solid var(--border); border-radius: 4px; font-size: 11px; color: var(--accent); text-decoration: none; } .msg-attach-chip:hover { border-color: var(--accent); } /* Application message card */ .msg-app-card { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; max-width: 400px; } .msg-app-card-header { font-size: 11px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; } .msg-app-card-title { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 4px; } .msg-app-card-company { font-size: 12px; color: var(--text-muted); margin-bottom: 10px; } .msg-app-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin-bottom: 10px; } .msg-app-field-label { font-size: 10px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .04em; } .msg-app-field-val { font-size: 12px; color: var(--text-muted); } .msg-app-notes { font-size: 12px; color: var(--text-muted); line-height: 1.6; padding-top: 8px; border-top: 1px solid var(--border); } .msg-danger-btn:hover { color: var(--danger) !important; } /* ── Attach preview chip ─────────────────────────────────────────────────────── */ .attach-preview-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; background: var(--surface2); border: 1px solid var(--border); border-radius: 4px; font-size: 11px; color: var(--text-muted); } .attach-preview-chip button { background: none; border: none; color: var(--text-faint); cursor: pointer; padding: 0 2px; font-size: 12px; line-height: 1; } .attach-preview-chip button:hover { color: var(--danger); } /* ── Block / Report confirmations ────────────────────────────────────────────── */ .thread-inline-msg { padding: 8px 12px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 600; margin: 8px 16px; text-align: center; } .thread-inline-msg.success { background: rgba(16,185,129,.1); color: var(--primary); border: 1px solid rgba(16,185,129,.2); } .thread-inline-msg.warning { background: rgba(239,68,68,.08); color: #fca5a5; border: 1px solid rgba(239,68,68,.2); } /* ── Responsive ────────────────────────────────────────────────────────────── */ @media (max-width: 1100px) { .list-header, .list-row { grid-template-columns: 2.2fr 1.1fr 1fr 100px 90px 110px; } /* Hide Phone/Email column header and phone-block div */ .list-header-cell:nth-child(3), .lr-phone-block { display: none; } } @media (max-width: 900px) { :root { --sidebar-w: 260px; } .list-header, .list-row { grid-template-columns: 2fr 1fr 90px 80px 90px; } .list-header-cell:nth-child(3), .list-header-cell:nth-child(4), .lr-phone-block, .lr-top-svc { display: none; } } /* ── Mobile breakpoint ──────────────────────────────────────────────────────── */ @media (max-width: 768px) { :root { --sidebar-w: 280px; --mobile-bnav-h: 60px; } /* Lock page-level scroll. Setting overflow:hidden on html/body alone is unreliable on iOS Safari — the OS-level rubber-band scroll can still drag fixed elements. Anchoring #viewApp to the viewport with position:fixed is the proven fix. Unlike body { position:fixed }, this doesn't mis-anchor fixed children (the browser still positions fixed descendants relative to the viewport, not to #viewApp, because #viewApp has no transform/filter/perspective). */ html, body { overflow: hidden; height: 100%; max-width: 100vw; } /* #viewApp is the true app shell. We use an explicit height rather than bottom:0 (inset:0) because fixed elements anchor to the LAYOUT viewport while position:fixed;bottom:0 children (bottom nav) anchor to the VISUAL viewport — the difference is the browser toolbar height, which appears as a black gap below the bottom nav on iOS Safari. 100dvh = dynamic visual viewport height (toolbars excluded). */ #viewApp { position: fixed; top: 0; left: 0; right: 0; height: 100vh; /* safe fallback */ height: -webkit-fill-available; /* older iOS Safari */ height: 100dvh; /* modern: visual viewport only */ overflow: hidden; } /* Header: fixed at top of viewport */ .header { position: fixed; top: 0; left: 0; right: 0; } /* Twitter/X style — fast downward scroll fades bars to transparent. Header stays in place but background fades out, content scrolls behind it. Bottom nav slides off; content already fills behind it via padding-bottom. */ .header.bars-hidden { background-color: transparent !important; border-bottom-color: transparent; pointer-events: none; /* don't intercept taps while invisible */ } .mobile-bottom-nav.bars-hidden { transform: translateY(100%); background-color: transparent !important; border-top-color: transparent; } /* Header tweaks */ .btn-hamburger { display: flex; } .header-home-btn { display: flex !important; } /* restore brand in header on mobile */ .header-search-wrap { flex: 1; max-width: none; } .header-nav-icons { display: none !important; } .header-right > .header-undo-btn, .header-right > .header-support-btn:not(#btnProfileSettings2):not(#btnNotifBell), .header-right > .header-db, .header-right > .header-active-users { display: none !important; } .header-right { gap: 4px; } .header-title { display: none; } /* Sidebar: slide-in drawer from left, starts below fixed header */ .sidebar { position: fixed; top: var(--header-h); left: 0; bottom: 0; z-index: 150; width: var(--sidebar-w); transform: translateX(-100%); transition: transform .25s ease; height: auto; max-height: none; overflow: hidden; /* keep flex structure; scroll is in .sidebar-scroll */ -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; border-right: 1px solid var(--border); } /* On mobile the entire sidebar scrolls as a drawer — let sidebar-scroll fill height. min-height:0 is required: without it, flex children default to min-height:auto and grow to fit content instead of scrolling. */ .sidebar-scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* Brand hidden on mobile — header already shows the icon */ .sidebar-brand { display: none; } /* Bottom utility pins visible in mobile drawer */ .snav-bottom { display: flex; border-top: 1px solid var(--border); padding-top: 6px; margin-top: 4px; } .sidebar.open { transform: translateX(0); } /* Overlay */ .sidebar-overlay { touch-action: none; } body.sidebar-open { overflow: hidden; } /* App body: regular block with margin-top so the sidebar (z-150) and overlay (z-149) are both in the root stacking context — sidebar wins. The bottom nav is fixed at the viewport bottom; we give main-content enough padding so no content hides behind it. */ .app-body { grid-template-columns: 1fr; margin-top: var(--header-h); height: calc(100% - var(--header-h)); /* 100% of body = viewport */ overflow: hidden; } /* Main scroll area — the ONLY thing that scrolls on mobile. min-height:0 is CRITICAL: grid/flex items default to min-height:auto which lets them grow past the parent's height constraint even when overflow:hidden is set — this is why non-Tools tabs kept scrolling past the bottom nav. min-height:0 lets the item shrink to fit its container. */ .main-content { height: 100%; min-height: 0; width: 100%; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; padding: 12px; /* Extra bottom pad so last content isn't hidden under the bottom nav */ padding-bottom: calc(var(--mobile-bnav-h) + 12px + env(safe-area-inset-bottom, 0px)); box-sizing: border-box; } .main-content-messages { padding: 0 !important; } /* Bottom nav visible */ .mobile-bottom-nav { display: flex; } /* Mobile sidebar extras visible */ .mobile-sidebar-extras { display: flex; } /* Hide top Get Started button on mobile (moved to bottom extras) */ .main-nav-top { display: none; } .main-nav-top + .sidebar-section-divider { display: none; } /* Cards — single column, constrained width, no overflow */ .contractor-grid { grid-template-columns: 1fr; gap: 10px; } .result-card { width: 100%; box-sizing: border-box; min-width: 0; } /* Card top: stack badge below title on very small screens */ .card-top { flex-wrap: wrap; gap: 6px; } .card-ins-badge { font-size: 10px; padding: 4px 8px; } .card-ins-badge span { font-size: 10px; } /* Card details: 2 columns on mobile is fine, but prevent overflow */ .result-details { grid-template-columns: 1fr 1fr; } .result-detail-val { word-break: break-word; overflow-wrap: anywhere; } /* Service chips: wrap properly */ .service-chips { flex-wrap: wrap; } /* Card footer actions: allow wrap */ .card-actions { flex-wrap: wrap; gap: 4px; } .job-grid { grid-template-columns: 1fr; } .form-grid-2 { grid-template-columns: 1fr; } /* List view: simplify columns */ .list-header, .list-row { grid-template-columns: 2fr 80px 80px; } .list-header-cell:nth-child(2), .list-header-cell:nth-child(3), .list-header-cell:nth-child(4), .list-header-cell:nth-child(5), .lr-location-block, .lr-phone-block, .lr-top-svc, .lr-ins { display: none; } /* Results header — stack vertically, buttons wrap */ .results-header { flex-direction: column; align-items: stretch; gap: 8px; } .results-actions { width: 100%; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-start; } .results-actions .btn { flex: 1; min-width: 0; justify-content: center; font-size: 12px; } .view-toggle { flex-shrink: 0; } /* Messages: hide context panel, thread takes full width */ .msg-context-panel { display: none !important; } #messagesMain { flex-direction: column; } /* Notifications panel full-width */ .notif-panel { width: 100%; left: 0; border-left: none; } /* Modals full-screen on mobile — use dvh so iOS adjusts for browser chrome */ .modal-overlay { padding: 0; align-items: flex-end; } .modal { border-radius: 18px 18px 0 0; max-width: 100%; max-height: 92dvh; } .modal-lg, .modal-xl { max-width: 100%; } @supports not (max-height: 92dvh) { .modal { max-height: 92vh; } } /* Pagination */ .pagination-bar { gap: 6px; flex-wrap: wrap; } /* Header DB count hidden */ .header-db { display: none; } /* Ideas/Roadmap */ .ideas-roadmap-outer { padding: 16px 12px; } .roadmap-grid { grid-template-columns: 1fr; } } @media (max-width: 480px) { .auth-card { padding: 28px 20px; } .rating-filter-grid { grid-template-columns: 1fr; } .msg-bubble-wrap { max-width: 90%; } .header-search-wrap { max-width: 160px; } .job-details { grid-template-columns: 1fr; } .detail-grid { grid-template-columns: 1fr; } .gs-main-wrap { padding: 0 8px; } .thread-header { padding: 10px 12px; } .modal-header { padding: 16px 16px 12px; } .modal-body { padding: 14px 16px; } .modal-footer { padding: 10px 16px; } /* Even tighter padding on very small phones */ .main-content { padding: 8px; padding-bottom: calc(var(--mobile-bnav-h) + 8px + env(safe-area-inset-bottom, 0px)); } .contractor-grid { gap: 8px; } /* Card top: always wrap badge to its own row */ .card-top { flex-direction: column; align-items: flex-start; } .card-ins-badge { align-self: flex-start; } /* Results actions: stack into two rows of two */ .results-actions .btn { min-width: calc(50% - 3px); } } /* ── Service filter multi-checkbox (sidebar) ────────────────────────────────── */ .filter-match-hint { font-size: 10px; color: var(--text-faint); font-weight: 400; text-transform: none; letter-spacing: 0; } .svc-filter-item { display: flex; align-items: center; gap: 7px; padding: 4px 6px; border-radius: 4px; transition: background .1s; cursor: pointer; } .svc-filter-item:hover { background: var(--card); } .svc-filter-item input[type="checkbox"] { width: 13px; height: 13px; accent-color: var(--primary); cursor: pointer; flex-shrink: 0; } .svc-filter-item label { font-size: 12px; color: var(--text-muted); cursor: pointer; user-select: none; line-height: 1.3; } .svc-filter-item input:checked + label { color: var(--primary); font-weight: 600; } /* ── Tooltip for truncated business names ───────────────────────────────────── */ .biz-tooltip { position: relative; } .biz-tooltip::after { content: attr(data-full); position: absolute; bottom: calc(100% + 6px); left: 0; background: #1a2840; border: 1px solid var(--border-light); color: var(--text); padding: 5px 9px; border-radius: 5px; font-size: 12px; font-weight: 500; white-space: normal; max-width: 280px; min-width: 120px; z-index: 600; box-shadow: 0 6px 20px rgba(0,0,0,.5); pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s; line-height: 1.4; } .biz-tooltip:hover::after { opacity: 1; transform: translateY(0); } /* ── Active user badge ──────────────────────────────────────────────────────── */ .active-badge { display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px; border-radius: 4px; background: rgba(59,130,246,.12); color: var(--accent); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; vertical-align: middle; margin-left: 4px; } .active-badge svg { flex-shrink: 0; } .active-badge-sm { display: inline-flex; align-items: center; gap: 2px; padding: 1px 5px; border-radius: 3px; background: rgba(59,130,246,.12); color: var(--accent); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } /* ── Detail modal ───────────────────────────────────────────────────────────── */ .modal-xl { max-width: 860px; } .detail-biz-name { font-size: 18px; font-weight: 700; color: var(--text); line-height: 1.3; word-break: break-word; } .detail-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; } .detail-category { font-size: 12px; color: var(--text-muted); margin-top: 4px; } .detail-section { display: flex; flex-direction: column; gap: 6px; } .detail-section-title { font-size: 11px; font-weight: 700; color: var(--text-faint); text-transform: uppercase; letter-spacing: .06em; padding-bottom: 4px; border-bottom: 1px solid var(--border); } .detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; } .detail-field { display: flex; flex-direction: column; gap: 2px; } .detail-field.full { grid-column: 1/-1; } .detail-field-label { font-size: 10px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .04em; } .detail-field-val { font-size: 13px; color: var(--text); word-break: break-all; } .detail-field-val a { color: var(--accent); word-break: break-all; } .detail-chips { display: flex; flex-wrap: wrap; gap: 4px; } .detail-note-preview { font-size: 12px; color: var(--text-muted); line-height: 1.6; background: var(--surface2); border-radius: var(--radius-sm); padding: 8px 10px; border-left: 2px solid var(--border-light); } .detail-footer { justify-content: flex-start; flex-wrap: wrap; gap: 6px; } .detail-action-btn { gap: 5px; } .detail-hide-btn:hover { color: var(--danger) !important; border-color: rgba(239,68,68,.3) !important; } /* ── Detail Modal — Ratings & Reviews section ─────────────────────────────── */ .dr-my-rating { background: var(--surface2); border-radius: var(--radius-sm); padding: 12px; display: flex; flex-direction: column; gap: 10px; } .dr-my-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; } .dr-my-label { font-size: 12px; font-weight: 700; color: var(--gold); } .dr-my-actions { display: flex; gap: 6px; } .dr-edit-btn, .dr-delete-btn { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--border); background: none; border-radius: var(--radius-sm); padding: 4px 10px; font-size: 11px; font-weight: 600; font-family: inherit; cursor: pointer; transition: background .15s, color .15s; color: var(--text-muted); } .dr-edit-btn:hover { background: var(--surface); color: var(--primary); border-color: var(--primary); } .dr-delete-btn:hover { background: rgba(239,68,68,.08); color: #f87171; border-color: rgba(239,68,68,.3); } .dr-my-review-text { font-size: 12px; color: var(--text-muted); line-height: 1.5; font-style: italic; padding: 8px 10px; background: var(--surface); border-radius: var(--radius-sm); border-left: 2px solid var(--border-light); margin-top: 2px; } .dr-no-own-rating { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; background: var(--surface2); border-radius: var(--radius-sm); } .dr-others-wrap { display: flex; flex-direction: column; gap: 0; margin-top: 8px; } .dr-others-label { font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 8px; } .dr-review-item { display: flex; flex-direction: column; gap: 4px; padding: 10px 0; } .dr-review-border { border-top: 1px solid var(--border); } .dr-review-stars { color: var(--gold); font-size: 13px; } .dr-review-text { font-size: 13px; color: var(--text); line-height: 1.5; margin: 0; } /* ── Compose message ────────────────────────────────────────────────────────── */ .compose-attach-row { margin-top: 4px; } .msg-gate-notice { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.25); border-radius: var(--radius-sm); font-size: 13px; color: #fca5a5; line-height: 1.5; } /* ── Toast notification ─────────────────────────────────────────────────────── */ #toastNotif { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(12px); background: var(--card); border: 1px solid var(--border-light); color: var(--text); padding: 10px 18px; border-radius: 8px; font-size: 13px; font-weight: 500; box-shadow: var(--shadow); z-index: 2000; opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; white-space: nowrap; } #toastNotif.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* ── Service filter dropdown ────────────────────────────────────────────────── */ .svc-dropdown-wrap { position: relative; } .svc-dropdown-btn { display: flex !important; align-items: center; justify-content: space-between; cursor: pointer; text-align: left; color: var(--text-muted); } .svc-dropdown-btn.open { border-color: var(--primary); color: var(--text); } .svc-dropdown-btn svg { flex-shrink: 0; transition: transform .2s; color: var(--text-faint); } .svc-dropdown-btn.open svg { transform: rotate(180deg); color: var(--primary); } .svc-dropdown-btn #svcDropdownLabel { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; } /* Flyout panel — fixed, opens to the right of the sidebar */ .svc-dropdown-panel { display: none; position: fixed; z-index: 500; background: var(--card); border: 1px solid var(--border-light); border-radius: var(--radius); box-shadow: 0 8px 32px rgba(0,0,0,.25); width: 220px; max-height: 360px; flex-direction: column; } .svc-dropdown-panel.open { display: flex; } .svc-filter-items { flex: 1; overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 1px; } .svc-filter-footer { flex-shrink: 0; padding: 8px; border-top: 1px solid var(--border); background: var(--card); border-radius: 0 0 var(--radius) var(--radius); } .svc-filter-done-btn { width: 100%; padding: 8px; background: var(--primary); color: #fff; border: none; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s; } .svc-filter-done-btn:hover { background: var(--primary-dark); } /* ── Export confirm button ──────────────────────────────────────────────────── */ .btn-confirm-export { background: var(--primary) !important; color: #fff !important; border-color: var(--primary) !important; } /* ── Welcome / Claim Modal ──────────────────────────────────────────────────── */ .welcome-brand { display: flex; align-items: center; gap: 14px; } .welcome-title { font-size: 20px; font-weight: 700; color: var(--text); line-height: 1.2; } .welcome-sub { font-size: 13px; color: var(--text-muted); margin-top: 4px; } .welcome-match-card { background: var(--surface2); border: 1px solid var(--border-light); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; } .welcome-match-biz { font-size: 16px; font-weight: 700; color: var(--text); } .welcome-match-meta { font-size: 12px; color: var(--text-muted); display: flex; flex-wrap: wrap; gap: 8px; } .welcome-match-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; background: var(--primary-dim); color: var(--primary); border-radius: 20px; font-size: 11px; font-weight: 600; } .welcome-matches-header { font-size: 13px; color: var(--text-muted); margin-bottom: 4px; } .welcome-match-select { display: flex; flex-direction: column; gap: 6px; } .welcome-match-option { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--surface2); border: 2px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; transition: border-color .15s, background .15s; } .welcome-match-option:hover { background: var(--card); border-color: var(--border-light); } .welcome-match-option.selected { border-color: var(--primary); background: var(--primary-dim); } .welcome-match-option input[type=radio]{ accent-color: var(--primary); width: 15px; height: 15px; flex-shrink: 0; } .welcome-match-option-info { flex: 1; min-width: 0; } .welcome-match-option-biz { font-size: 13px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .welcome-match-option-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; } .welcome-features { display: flex; flex-direction: column; gap: 8px; } .welcome-feature { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-muted); } .welcome-feature svg { flex-shrink: 0; color: var(--primary); } .welcome-divider { border: none; border-top: 1px solid var(--border); margin: 2px 0; } .welcome-no-match-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .welcome-option-card { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; gap: 8px; cursor: pointer; transition: border-color .15s, background .15s; } .welcome-option-card:hover { border-color: var(--border-light); background: var(--card); } .welcome-option-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; } .welcome-option-title { font-size: 13px; font-weight: 700; color: var(--text); } .welcome-option-desc { font-size: 11px; color: var(--text-muted); line-height: 1.5; } .welcome-claim-row { display: flex; gap: 8px; } .welcome-claim-row .field-input { flex: 1; } @media (max-width: 480px) { .welcome-no-match-options { grid-template-columns: 1fr; } } /* ── Admin Header Button ────────────────────────────────────────────────────── */ .admin-header-btn { background: rgba(245,158,11,.12); color: var(--gold); border: 1px solid rgba(245,158,11,.3); gap: 5px; } .admin-header-btn:hover { background: rgba(245,158,11,.22); } /* ── Admin Panel Modal ──────────────────────────────────────────────────────── */ .modal-admin { max-width: 800px; max-height: 92vh; } .admin-stats-row { display: flex; gap: 12px; padding: 12px 20px; background: var(--surface2); border-bottom: 1px solid var(--border); flex-shrink: 0; flex-wrap: wrap; } .admin-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 60px; } .admin-stat-num { font-size: 22px; font-weight: 800; line-height: 1; } .admin-stat-label { font-size: 10px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .06em; } .admin-stat.pending .admin-stat-num { color: var(--gold); } .admin-stat.approved .admin-stat-num { color: var(--primary); } .admin-stat.rejected .admin-stat-num { color: var(--danger); } .admin-stat.total .admin-stat-num { color: var(--text); } .admin-filter-bar { display: flex; align-items: center; gap: 4px; padding: 10px 20px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .admin-filter-btn { padding: 5px 12px; border-radius: 6px; border: none; font-size: 12px; font-weight: 600; background: transparent; color: var(--text-muted); cursor: pointer; transition: all .15s; } .admin-filter-btn:hover { background: var(--surface2); color: var(--text); } .admin-filter-btn.active { background: var(--card); color: var(--text); } .admin-body { gap: 10px; max-height: none; padding: 16px 20px; } .admin-loading { text-align: center; padding: 40px; color: var(--text-muted); font-size: 14px; } /* Application card */ .app-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 12px; transition: border-color .15s; } .app-card:hover { border-color: var(--border-light); } .app-card.status-pending { border-left: 3px solid var(--gold); } .app-card.status-approved { border-left: 3px solid var(--primary); } .app-card.status-rejected { border-left: 3px solid var(--danger); opacity: .8; } .app-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .app-biz-name { font-size: 15px; font-weight: 700; color: var(--text); } .app-person { font-size: 12px; color: var(--text-muted); margin-top: 3px; } .app-status-badge { flex-shrink: 0; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } .app-status-badge.pending { background: rgba(245,158,11,.12); color: var(--gold); } .app-status-badge.approved { background: var(--primary-dim); color: var(--primary); } .app-status-badge.rejected { background: rgba(239,68,68,.1); color: #fca5a5; } .app-contact-row { display: flex; gap: 16px; flex-wrap: wrap; padding: 10px 12px; background: var(--surface2); border-radius: var(--radius-sm); } .app-contact-item { display: flex; align-items: center; gap: 6px; font-size: 13px; } .app-contact-item svg { flex-shrink: 0; color: var(--text-faint); } .app-contact-item a { color: var(--accent); font-weight: 600; } .app-contact-item a:hover { color: var(--primary); } .app-details-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 16px; } .app-detail { display: flex; flex-direction: column; gap: 2px; } .app-detail-label { font-size: 10px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .04em; } .app-detail-val { font-size: 12px; color: var(--text-muted); } .app-notes { font-size: 12px; color: var(--text-muted); line-height: 1.6; background: var(--surface2); border-radius: var(--radius-sm); padding: 8px 10px; border-left: 2px solid var(--border-light); } .app-review-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .app-review-note-input { flex: 1; min-width: 160px; padding: 6px 10px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-size: 12px; outline: none; transition: border-color .15s; font-family: inherit; } .app-review-note-input:focus { border-color: var(--primary); } .app-review-row-meta { font-size: 11px; color: var(--text-faint); } .app-submitted { font-size: 11px; color: var(--text-faint); text-align: right; } @media (max-width: 600px) { .app-details-grid { grid-template-columns: 1fr 1fr; } .modal-admin { max-width: 100%; } } /* ── Messages Sidebar ───────────────────────────────────────────────────────── */ .msg-tabs { display: flex; gap: 4px; padding: 0 0 8px; } .msg-tab { background: none; border: none; font-size: 12px; font-weight: 600; color: var(--text-faint); padding: 5px 10px; border-radius: var(--radius-sm); cursor: pointer; transition: all .15s; } .msg-tab:hover { color: var(--text-muted); background: var(--surface2); } .msg-tab.active { color: var(--text); background: var(--card); } .inbox-list { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; } .inbox-empty { font-size: 12px; color: var(--text-faint); text-align: center; padding: 24px 8px; line-height: 1.6; } .inbox-item { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: var(--radius-sm); cursor: pointer; transition: background .12s; border: 1px solid transparent; } .inbox-item:hover { background: var(--surface2); } .inbox-item.active { background: var(--card); border-color: var(--border); } .inbox-item.archived { opacity: .55; } .inbox-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--primary-dim); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; flex-shrink: 0; } .inbox-content { flex: 1; min-width: 0; } .inbox-name { font-size: 13px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .inbox-preview { font-size: 11px; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; } .inbox-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; } .inbox-time { font-size: 10px; color: var(--text-faint); } .inbox-unread { min-width: 18px; height: 18px; background: var(--primary); color: #fff; font-size: 10px; font-weight: 700; border-radius: 9px; padding: 0 4px; display: inline-flex; align-items: center; justify-content: center; } .inbox-archived-tag { font-size: 9px; color: var(--gold); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; } /* ── Messages Main / Thread ─────────────────────────────────────────────────── */ #msgEmptyState { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; } .thread-header { display: flex; align-items: center; padding: 12px 16px; background: var(--surface); border-bottom: 1px solid var(--border); gap: 10px; flex-shrink: 0; } .thread-back-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 4px 6px; border-radius: var(--radius-sm); transition: all .15s; } .thread-back-btn:hover { color: var(--text); background: var(--surface2); } .thread-meta { flex: 1; min-width: 0; } .thread-name { font-size: 14px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .thread-company { font-size: 11px; color: var(--text-muted); margin-top: 2px; } .thread-controls { display: flex; align-items: center; gap: 4px; } .msg-danger-btn { color: var(--text-faint) !important; } .msg-danger-btn:hover { color: var(--danger) !important; background: rgba(239,68,68,.08) !important; } .thread-messages-wrap { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: var(--bg); } .thread-loading, .thread-no-msgs { text-align: center; color: var(--text-faint); font-size: 13px; padding: 32px; } /* Pinned-message banner: shown above the scrollable message list. Text pins live here; file/image pins stay in the right-side context panel. */ .thread-pinned-banner { display: flex; flex-direction: column; gap: 4px; padding: 8px 12px; background: var(--surface2); border-bottom: 1px solid var(--border); max-height: 160px; overflow-y: auto; flex-shrink: 0; } .thread-pin-item { display: flex; align-items: flex-start; gap: 8px; padding: 6px 8px; background: var(--surface); border-left: 3px solid var(--primary); border-radius: var(--radius-sm); cursor: pointer; transition: background .12s ease; } .thread-pin-item:hover { background: var(--surface-hover, var(--surface2)); } .thread-pin-icon { flex-shrink: 0; color: var(--primary); margin-top: 1px; display: flex; align-items: center; } .thread-pin-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .thread-pin-from { font-size: 10px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; } .thread-pin-text { font-size: 12px; color: var(--text); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; } .thread-pin-close { flex-shrink: 0; background: transparent; border: 0; color: var(--text-faint); cursor: pointer; padding: 2px; border-radius: 4px; display: flex; align-items: center; justify-content: center; } .thread-pin-close:hover { color: var(--text); background: var(--surface2); } .thread-msg { display: flex; flex-direction: column; max-width: 72%; position: relative; } .thread-msg.sent { align-self: flex-end; align-items: flex-end; } .thread-msg.received { align-self: flex-start; align-items: flex-start; } .thread-msg-bubble { padding: 10px 13px; border-radius: 14px; font-size: 13px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; } /* 3-dot message-actions button — hidden until the bubble is hovered (desktop) or always visible on touch so long-press isn't required. */ .msg-actions-btn { position: absolute; top: 2px; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: none; border-radius: 50%; background: rgba(0,0,0,.35); color: #fff; cursor: pointer; opacity: 0; transition: opacity .12s, background .12s; z-index: 2; } .thread-msg.sent .msg-actions-btn { left: -26px; } .thread-msg.received .msg-actions-btn { right: -26px; } .thread-msg:hover .msg-actions-btn, .msg-actions-btn:focus-visible { opacity: 1; } .msg-actions-btn:hover { background: rgba(0,0,0,.55); } @media (hover: none) { .msg-actions-btn { opacity: .55; } } /* iMessage-style popover: reaction bar on top + action cards below */ .msg-actions-popover { position: fixed; z-index: 10000; display: flex; flex-direction: column; gap: 8px; width: 240px; pointer-events: none; /* children reclaim pointer events */ } .msg-actions-popover > * { pointer-events: auto; } /* Reaction bar (top pill) */ .msg-reactions-bar { display: flex; align-items: center; gap: 4px; background: var(--card); border: 1px solid var(--border); border-radius: 999px; padding: 6px 8px; box-shadow: 0 8px 24px rgba(0,0,0,.22); overflow-x: auto; } .msg-reaction-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: none; background: transparent; cursor: pointer; font-size: 18px; line-height: 1; border-radius: 50%; transition: transform .1s, background .1s; flex-shrink: 0; } .msg-reaction-btn:hover { background: var(--surface2); transform: scale(1.15); } .msg-reaction-btn.selected { background: var(--primary-dim); } .msg-reaction-btn.more { font-size: 15px; color: var(--text-muted); background: var(--surface2); } .msg-reaction-picker { display: flex; flex-wrap: wrap; gap: 4px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.22); max-width: 260px; } /* Action cards (Reply / Copy / Pin) */ .msg-actions-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: 0 8px 24px rgba(0,0,0,.22); overflow: hidden; display: flex; flex-direction: column; } .msg-actions-item { display: flex; align-items: center; justify-content: space-between; width: 100%; text-align: left; padding: 11px 13px; font-size: 13px; color: var(--text); background: transparent; border: none; cursor: pointer; font-family: inherit; } .msg-actions-item + .msg-actions-item { border-top: 1px solid var(--border); } .msg-actions-item:hover { background: var(--surface2); } .msg-actions-item .msg-actions-icon { display: inline-flex; color: var(--text-muted); flex-shrink: 0; } .msg-actions-item.danger { color: var(--danger); } .msg-actions-item.danger:hover { background: rgba(239,68,68,.08); } .msg-actions-item.danger .msg-actions-icon { color: var(--danger); } .msg-actions-item.cancel { color: var(--text-muted); } .msg-actions-item.more-toggle { color: var(--text-muted); font-weight: 500; } /* Reaction pills under bubbles */ .msg-reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; } .thread-msg.sent .msg-reactions { justify-content: flex-end; } .thread-msg.received .msg-reactions { justify-content: flex-start; } .msg-reaction-pill { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; padding: 2px 7px; border-radius: 999px; background: var(--surface2); border: 1px solid var(--border); cursor: pointer; user-select: none; transition: background .1s, border-color .1s; } .msg-reaction-pill:hover { background: var(--card); } .msg-reaction-pill.mine { background: var(--primary-dim); border-color: var(--primary); } .msg-reaction-pill-count { font-size: 11px; color: var(--text-muted); font-weight: 600; } /* Reply-preview banner above compose */ .reply-preview { display: flex; align-items: stretch; gap: 10px; padding: 8px 14px; background: var(--surface2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .reply-preview-bar { width: 3px; background: var(--primary); border-radius: 2px; flex-shrink: 0; } .reply-preview-content { flex: 1; min-width: 0; overflow: hidden; } .reply-preview-to { font-size: 11px; color: var(--text-muted); margin-bottom: 1px; } .reply-preview-to span { color: var(--primary); font-weight: 600; } .reply-preview-text { font-size: 12px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .reply-preview-close { width: 24px; height: 24px; align-self: center; flex-shrink: 0; border: none; background: transparent; font-size: 18px; line-height: 1; color: var(--text-muted); cursor: pointer; border-radius: 50%; } .reply-preview-close:hover { background: var(--card); color: var(--text); } /* Quoted-reply preview — renders ABOVE the bubble (Messenger-style), not inside it. Kept compact and uniformly subdued so it never competes with the actual reply. The bubble overlaps the quote's bottom via negative margin so they read as attached. */ .msg-quote { display: inline-flex; gap: 8px; max-width: min(78%, 280px); padding: 5px 10px 14px; margin-bottom: -8px; background: var(--surface2); color: var(--text-muted); border-radius: 12px; cursor: pointer; font-size: 11px; opacity: .92; position: relative; z-index: 0; } .thread-msg.sent .msg-quote { align-self: flex-end; } .thread-msg.received .msg-quote { align-self: flex-start; } .thread-msg.has-quote .thread-msg-bubble { position: relative; z-index: 1; } .msg-quote-content { flex: 1; min-width: 0; } .msg-quote-from { font-size: 10px; font-weight: 600; opacity: .8; margin-bottom: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .msg-quote-text { font-size: 11px; line-height: 1.35; opacity: .85; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; } @keyframes msgQuoteFlash { 0%,100% { box-shadow: none; } 50% { box-shadow: 0 0 0 3px var(--primary-dim); } } .thread-msg.highlight-target .thread-msg-bubble { animation: msgQuoteFlash 1.2s ease-out; border-radius: 14px; } /* Text pin card in pinned-files panel */ .ctx-pinned-item.text-pin { flex-direction: column; align-items: stretch; padding: 10px 12px; } .ctx-pinned-text-quote { font-size: 12px; color: var(--text); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-wrap; word-break: break-word; border-left: 3px solid var(--primary); padding-left: 8px; } .ctx-pinned-text-from { font-size: 11px; color: var(--text-muted); margin-top: 4px; } .thread-msg.sent .thread-msg-bubble { background: var(--primary); color: #fff; border-bottom-right-radius: 4px; } .thread-msg.received .thread-msg-bubble { background: var(--card); color: var(--text); border-bottom-left-radius: 4px; } .thread-msg-time { font-size: 10px; color: var(--text-faint); margin-top: 3px; padding: 0 4px; } .msg-attachments { margin-top: 6px; display: flex; flex-direction: column; flex-wrap: wrap; gap: 6px; } .msg-attach-link { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: rgba(255,255,255,.85); background: rgba(0,0,0,.2); border-radius: 4px; padding: 3px 7px; } .thread-msg.received .msg-attach-link { color: var(--accent); background: var(--accent-dim); } .msg-img-link { display: block; } .msg-inline-img { display: block; max-width: 260px; max-height: 220px; width: auto; height: auto; border-radius: 10px; cursor: zoom-in; object-fit: contain; border: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.15); } .thread-msg.received .msg-inline-img { border-color: var(--border); } .thread-attach-row { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 14px; background: var(--surface2); border-top: 1px solid var(--border); } .attach-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-muted); background: var(--card); border-radius: 4px; padding: 3px 8px; } .thread-compose { display: flex; flex-direction: column; border-top: 1px solid var(--border); background: var(--surface); flex-shrink: 0; } .thread-input-row { display: flex; align-items: flex-end; gap: 8px; padding: 10px 14px; } .thread-textarea { flex: 1; resize: none; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-size: 13px; padding: 8px 10px; outline: none; transition: border-color .15s; max-height: 120px; font-family: inherit; line-height: 1.5; } .thread-textarea:focus { border-color: var(--primary); } .attach-file-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-sm); color: var(--text-faint); cursor: pointer; transition: all .15s; flex-shrink: 0; } .attach-file-btn:hover { color: var(--primary); background: var(--primary-dim); } /* ── Job sub-nav tabs ───────────────────────────────────────────────────────── */ .job-sub-nav { display: flex; gap: 4px; padding: 10px 0 6px; border-bottom: 1px solid var(--border); margin-bottom: 4px; } .job-sub-tab { flex: 1; padding: 7px 10px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 600; color: var(--text-muted); background: transparent; border: none; cursor: pointer; transition: background .12s, color .12s; display: flex; align-items: center; justify-content: center; gap: 5px; } .job-sub-tab:hover { background: var(--surface2); color: var(--text); } .job-sub-tab.active { background: var(--surface2); color: var(--text); } .my-listings-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--primary); color: #fff; font-size: 10px; font-weight: 700; } /* ── Review Applications Modal ──────────────────────────────────────────────── */ .ra-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; border-bottom: 1px solid var(--border); gap: 8px; } .ra-count { font-size: 12px; color: var(--text-muted); } .ra-table-wrap { overflow-x: auto; } .ra-table { width: 100%; border-collapse: collapse; font-size: 12px; } .ra-table th { padding: 8px 14px; text-align: left; font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-faint); border-bottom: 1px solid var(--border); background: var(--surface); white-space: nowrap; } .ra-table td { padding: 10px 14px; border-bottom: 1px solid var(--border); color: var(--text-muted); vertical-align: middle; white-space: nowrap; } .ra-table-row:hover td { background: var(--surface2); } .ra-td-name { font-weight: 600; color: var(--text) !important; } .ra-td-date { color: var(--text-faint) !important; font-size: 11px; } .ra-td-check { text-align: center; color: var(--text-faint) !important; } .ra-td-check.ra-has { color: var(--primary) !important; } /* keep old list styles for back-compat (still used in detail "back" button area) */ .review-apps-list { display: flex; flex-direction: column; } .review-app-row { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--border); transition: background .1s; } .review-app-row:hover { background: var(--surface2); } .review-app-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--primary-dim,rgba(16,185,129,.15)); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; flex-shrink: 0; } .review-app-info { flex: 1; min-width: 0; } .review-app-name { font-size: 13px; font-weight: 600; color: var(--text); } .review-app-sub { font-size: 11px; color: var(--text-muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .review-app-meta { text-align: right; flex-shrink: 0; } .review-app-date { font-size: 11px; color: var(--text-faint); } /* ── Review detail view ─────────────────────────────────────────────────────── */ .review-detail-wrap { padding: 0 0 20px; } .review-detail-topbar { padding: 12px 20px 0; border-bottom: 1px solid var(--border); padding-bottom: 12px; } .review-detail-header { display: flex; align-items: center; gap: 14px; padding: 20px 20px 16px; } .review-detail-avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--primary-dim,rgba(16,185,129,.15)); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; flex-shrink: 0; } .review-detail-name { font-size: 17px; font-weight: 700; color: var(--text); } .review-detail-name-link { background: none; border: none; padding: 0; cursor: pointer; text-align: left; text-decoration: underline; text-decoration-color: rgba(99,102,241,.4); text-underline-offset: 3px; transition: color .15s, text-decoration-color .15s; } .review-detail-name-link:hover { color: var(--primary); text-decoration-color: var(--primary); } .review-detail-company { font-size: 13px; color: var(--text-muted); margin-top: 2px; } .review-detail-section { padding: 14px 20px; border-bottom: 1px solid var(--border); } .rdi-section-title { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 10px; } .rdi-row { display: flex; gap: 12px; align-items: baseline; margin-bottom: 7px; font-size: 13px; } .rdi-label { width: 130px; flex-shrink: 0; font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; } .review-avail-tags { display: flex; flex-wrap: wrap; gap: 6px; } .avail-tag { padding: 4px 10px; border-radius: 12px; background: var(--surface2); border: 1px solid var(--border); font-size: 11px; color: var(--text-muted); font-weight: 600; } .review-message { font-size: 13px; color: var(--text); line-height: 1.6; white-space: pre-wrap; background: var(--surface2); border-radius: var(--radius-sm); padding: 10px 12px; } /* ── Apply to Job Modal ─────────────────────────────────────────────────────── */ .apply-attach-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 6px; } .apply-attach-label { flex: 1; cursor: pointer; } .apply-w9-btns { flex-shrink: 0; } /* ── Apply modal — Availability ─────────────────────────────────────────────── */ .apply-avail-wrap { margin: 4px 0 6px; } .apply-avail-hint { font-size: 12px; color: var(--text-muted); margin: 0 0 10px; } .apply-avail-days { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; } .avail-day-chip { display: inline-flex; align-items: center; gap: 0; padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 600; cursor: pointer; border: 1px solid var(--border); color: var(--text-muted); background: var(--surface2); transition: background .12s, border-color .12s, color .12s; user-select: none; } .avail-day-chip input[type=checkbox] { display: none; } .avail-day-chip.active { background: var(--primary); color: #fff; border-color: var(--primary); } .apply-avail-hours { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; } .avail-hours-row { display: flex; align-items: center; gap: 8px; } .avail-hours-label { width: 34px; font-size: 12px; font-weight: 700; color: var(--text-muted); flex-shrink: 0; } .avail-hours-sep { font-size: 12px; color: var(--text-faint); flex-shrink: 0; } .avail-hours-select { flex: 1; max-width: 130px; height: 34px; padding: 0 8px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface2); color: var(--text); font-size: 12px; cursor: pointer; } /* ── W-9 Modal ──────────────────────────────────────────────────────────────── */ .w9-classification { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 4px; } .w9-radio { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-muted); cursor: pointer; padding: 5px 8px; border-radius: var(--radius-sm); transition: background .12s; } .w9-radio:hover { background: var(--surface2); } .w9-radio input { accent-color: var(--primary); flex-shrink: 0; } .w9-cert-text { background: var(--surface2); border-radius: var(--radius-sm); padding: 12px 14px; font-size: 11px; color: var(--text-muted); line-height: 1.7; } .w9-cert-text ol { padding-left: 18px; display: flex; flex-direction: column; gap: 6px; } /* Steps guide */ .w9-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; background: var(--surface2); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 16px; } .w9-step { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-muted); flex: 1; min-width: 140px; } .w9-step-num { width: 22px; height: 22px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; } .w9-step-arrow { font-size: 16px; color: var(--text-faint); flex-shrink: 0; } .w9-irs-link { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--accent); white-space: nowrap; text-decoration: none; padding: 5px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); flex-shrink: 0; } .w9-irs-link:hover { background: rgba(99,102,241,.08); } /* Drop zone */ .w9-dropzone { border: 2px dashed var(--border); border-radius: var(--radius); padding: 30px 20px; text-align: center; cursor: pointer; transition: border-color .15s, background .15s; display: flex; flex-direction: column; align-items: center; gap: 6px; } .w9-dropzone:hover { border-color: var(--primary); background: rgba(16,185,129,.03); } .w9-dropzone.drag-over { border-color: var(--primary); background: rgba(16,185,129,.07); border-style: solid; } .w9-dropzone.has-file { border-color: var(--primary); border-style: solid; background: rgba(16,185,129,.04); } .w9-drop-label { font-size: 13px; font-weight: 600; color: var(--text); margin: 0; } .w9-drop-or { font-size: 12px; color: var(--text-faint); margin: 0; } .w9-drop-hint { font-size: 11px; color: var(--text-faint); margin: 2px 0 0; } .w9-drop-filename { font-size: 12px; color: var(--primary); font-weight: 600; margin: 0; } /* URL result panel */ .w9-url-result { background: rgba(16,185,129,.06); border: 1px solid rgba(16,185,129,.25); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; margin-top: 12px; } .w9-url-success { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); } /* Option 1 / Option 2 layout */ .w9-option-block { display: flex; flex-direction: column; gap: 10px; } .w9-option-header { display: flex; align-items: center; gap: 10px; margin-bottom: 2px; } .w9-option-badge { display: inline-flex; align-items: center; justify-content: center; background: var(--primary); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .06em; padding: 3px 9px; border-radius: 4px; white-space: nowrap; flex-shrink: 0; } .w9-option-title { font-size: 13px; font-weight: 600; color: var(--text); } .w9-or-divider { display: flex; align-items: center; margin: 16px 0; color: var(--text-faint); font-size: 12px; font-weight: 600; letter-spacing: .05em; } .w9-or-divider::before, .w9-or-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); } .w9-or-divider span { padding: 0 12px; } /* ── Insured Active Badge (contractor cards) ─────────────────────────────────── */ .ins-active-badge { display: inline-flex; align-items: center; gap: 3px; background: rgba(52,211,153,.12); color: #34d399; border: 1px solid rgba(52,211,153,.3); border-radius: 4px; font-size: 10px; font-weight: 600; padding: 1px 5px; margin-left: 5px; vertical-align: middle; white-space: nowrap; } /* ── Profile Insurance Banner ────────────────────────────────────────────────── */ .prof-ins-active-banner { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: rgba(52,211,153,.08); border: 1px solid rgba(52,211,153,.2); border-radius: var(--radius-sm); font-size: 12px; color: var(--text-muted); } /* ── Active Users Presence Indicator ────────────────────────────────────────── */ .header-active-users { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-muted); background: rgba(16,185,129,.08); border: 1px solid rgba(16,185,129,.2); border-radius: 20px; padding: 2px 9px; } .active-presence-dot { width: 7px; height: 7px; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 0 rgba(16,185,129,.6); animation: presence-pulse 2s infinite; flex-shrink: 0; } @keyframes presence-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(16,185,129,.5); } 50% { box-shadow: 0 0 0 4px rgba(16,185,129,0); } } /* ── Sub-Contract Declared Service Chip (on cards) ──────────────────────────── */ .sub-declared-chip { background: rgba(99,102,241,.12) !important; color: #a5b4fc !important; border: 1px solid rgba(99,102,241,.25) !important; } /* ── Sub-Contract Badge (contractor cards) ───────────────────────────────────── */ .sub-avail-badge { display: inline-flex; align-items: center; gap: 3px; background: rgba(99,102,241,.15); color: #a5b4fc; border: 1px solid rgba(99,102,241,.3); border-radius: 4px; font-size: 10px; font-weight: 600; padding: 1px 5px; margin-left: 5px; vertical-align: middle; white-space: nowrap; } /* ── Sub-Contract Profile Section ────────────────────────────────────────────── */ .prof-sub-check-label { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--text); cursor: pointer; padding: 2px 0; } .prof-sub-check-label input[type=checkbox] { accent-color: var(--primary); width: 15px; height: 15px; flex-shrink: 0; cursor: pointer; } .prof-sub-hint { font-size: 12px; color: var(--text-muted); margin: 0 0 6px; } /* ── W-9 Yes / No Toggle ─────────────────────────────────────────────────── */ .prof-w9-wrap { display: flex; flex-direction: column; gap: 10px; } .prof-w9-btns { display: flex; gap: 8px; } .prof-w9-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 14px; border-radius: var(--radius); border: 1.5px solid var(--border); background: var(--surface2); color: var(--text-muted); font-size: 13px; font-weight: 600; cursor: pointer; transition: all .18s; } .prof-w9-btn:hover { border-color: var(--border-light); color: var(--text); } .prof-w9-btn.active-yes { border-color: rgba(16,185,129,.6); background: rgba(16,185,129,.1); color: #34d399; } .prof-w9-btn.active-no { border-color: rgba(245,158,11,.6); background: rgba(245,158,11,.1); color: #f59e0b; } /* Message card */ .prof-w9-card { border-radius: var(--radius); padding: 12px 14px; transition: border-color .2s, background .2s; } .prof-w9-card > div { display: flex; align-items: flex-start; gap: 12px; } /* Yes card — green */ .prof-w9-card.state-yes { border: 1.5px solid rgba(16,185,129,.4); background: rgba(16,185,129,.07); } /* No card — amber */ .prof-w9-card.state-no { border: 1.5px solid rgba(245,158,11,.4); background: rgba(245,158,11,.07); } .prof-w9-card-icon { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(16,185,129,.15); color: #34d399; } .prof-w9-card-icon--no { background: rgba(245,158,11,.15); color: #f59e0b; } .prof-w9-card-text { display: flex; flex-direction: column; gap: 3px; } .prof-w9-card-title { font-size: 13px; font-weight: 700; color: #34d399; } .prof-w9-card-title--no { color: #f59e0b; } .prof-w9-card-desc { font-size: 12px; color: var(--text-muted); line-height: 1.55; } /* Sub-contract prominent toggle card */ .prof-sub-toggle-card { margin-top: 10px; border: 1.5px solid var(--border); border-radius: var(--radius); padding: 12px 14px; background: var(--surface2); transition: border-color .2s, background .2s; } .prof-sub-toggle-card.is-active { border-color: rgba(16,185,129,.5); background: rgba(16,185,129,.06); } .prof-sub-toggle-label { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; } .prof-sub-toggle-label input[type=checkbox] { accent-color: var(--primary); width: 17px; height: 17px; flex-shrink: 0; margin-top: 2px; cursor: pointer; } .prof-sub-toggle-content { display: flex; flex-direction: column; gap: 3px; } .prof-sub-toggle-title { font-size: 13px; font-weight: 700; color: var(--text); } .prof-sub-toggle-card.is-active .prof-sub-toggle-title { color: #34d399; } .prof-sub-toggle-desc { font-size: 11px; color: var(--text-muted); line-height: 1.5; } .prof-sub-toggle-divider { height: 1px; background: var(--border); margin: 14px 0 0; } .prof-sub-svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 4px; } .prof-sub-svc-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); cursor: pointer; padding: 4px 6px; border-radius: var(--radius-sm); transition: background .12s; } .prof-sub-svc-item:hover { background: var(--surface2); } .prof-sub-svc-item input[type=checkbox] { accent-color: var(--primary); flex-shrink: 0; } /* ── Profile & Settings Modal ──────────────────────────────────────────────── */ .prof-status-row { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--primary-dim); border: 1px solid rgba(16,185,129,.2); border-radius: var(--radius-sm); font-size: 12px; color: var(--text-muted); } /* ── Claim Profile Modal ────────────────────────────────────────────────────── */ .claim-result-card { background: var(--surface2); border: 2px solid var(--primary); border-radius: var(--radius-sm); padding: 12px 14px; margin-top: 4px; } .claim-result-biz { font-size: 14px; font-weight: 700; color: var(--text); } .claim-result-meta { font-size: 12px; color: var(--text-muted); margin-top: 3px; } .claim-result-email { font-size: 11px; color: var(--text-faint); margin-top: 4px; } .claim-result-error { padding: 8px 12px; background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.25); border-radius: var(--radius-sm); color: #fca5a5; font-size: 12px; margin-top: 4px; } /* ── Messages main panel layout ─────────────────────────────────────────────── */ .main-content-messages { padding: 0 !important; overflow: hidden !important; } #messagesMain .empty-state { padding: 40px 24px; } /* ── Messages on mobile: fix compose bar above bottom nav, hide-on-scroll ────── */ /* On mobile the thread compose becomes a fixed overlay pinned above the bottom nav, like iMessage/WhatsApp. The messages list gets bottom padding so the last message isn't hidden behind it. Compose joins the existing Twitter/X-style `bars-hidden` scroll behavior alongside the top header and bottom nav — scrolling in the thread slides it off-screen with them. Also bumps textarea to 16px to stop iOS Safari's auto-zoom on focus. */ @media (max-width: 768px) { /* Keep main-content-messages's content box sized so #messagesMain doesn't leak behind the bottom nav. (The global `padding: 0 !important` kills the default bottom inset that .main-content uses.) */ .main-content-messages { padding-bottom: calc(var(--mobile-bnav-h) + env(safe-area-inset-bottom, 0px)) !important; } /* Fixed compose bar — pinned directly above the bottom nav */ .thread-compose { position: fixed; left: 0; right: 0; bottom: calc(var(--mobile-bnav-h) + env(safe-area-inset-bottom, 0px)); z-index: 110; /* under the bottom nav (z:120), above messages */ transition: transform .28s cubic-bezier(0.2, 0, 0, 1), background-color .28s ease, border-color .28s ease; } /* Slide fully off-screen when bars hide (own height + nav height + safe area) */ .thread-compose.bars-hidden { transform: translateY(calc(100% + var(--mobile-bnav-h) + env(safe-area-inset-bottom, 0px) + 8px)); pointer-events: none; } /* Give the messages list room for the fixed compose above the nav. 120px covers the common case (textarea + attach preview + reply banner); on very tall composes the last messages will temporarily tuck under — tap/scroll to bring them back. */ .thread-messages-wrap { padding-bottom: 120px; } /* 16px prevents iOS Safari's tap-to-zoom on focus */ .thread-textarea { font-size: 16px; } /* ── Mobile: hide 3-dot button; long-press the bubble to open actions ──── */ .msg-actions-btn { display: none !important; } /* Suppress text selection + iOS "share/copy" callout on bubbles so a long-press reliably triggers the actions popover instead of the system selection UI. Quoted-reply previews and reaction pills keep their own interactivity (they're excluded from the long-press target in JS). */ .thread-msg-bubble { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } /* Subtle press feedback while the long-press timer is counting. */ .thread-msg.long-press-active .thread-msg-bubble { transform: scale(0.97); transition: transform .15s ease; } } /* ── Tools main panel layout ─────────────────────────────────────────────── */ /* No overflow: hidden here — tools hub (card grid) needs main-content to scroll. Tool apps (Estimates Pro, Project Tracker) use their own internal .tool-app-body { flex:1; overflow-y:auto } for scrolling. */ .main-content-tools { padding: 0 !important; } #toolsMain { height: 100%; } /* ── Conversation Context Panel (right) — same width as left sidebar ─────────── */ .msg-context-panel { width: var(--sidebar-w); flex-shrink: 0; border-left: 1px solid var(--border); background: var(--surface); display: flex; flex-direction: column; overflow-y: auto; } .ctx-section { padding: 16px 14px 10px; } .ctx-section-title { font-size: 10px; font-weight: 700; letter-spacing: .08em; color: var(--text-faint); text-transform: uppercase; margin-bottom: 10px; } .ctx-participants { display: flex; flex-direction: column; gap: 6px; } .ctx-participant { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: var(--radius-sm); } .ctx-participant-link { background: none; border: none; cursor: pointer; width: 100%; text-align: left; transition: background .12s; } .ctx-participant-link:hover { background: var(--surface2); } .ctx-avatar-circle { width: 32px; height: 32px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; } .ctx-avatar-img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .ctx-participant-info { min-width: 0; flex: 1; } .ctx-participant-name { font-size: 12px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ctx-you-tag { font-size: 10px; color: var(--text-faint); font-weight: 400; } .ctx-participant-biz { font-size: 10px; color: var(--text-muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ctx-divider { height: 1px; background: var(--border); margin: 0 14px; } .ctx-actions { display: flex; flex-direction: column; gap: 2px; } .ctx-action-btn { display: flex; align-items: center; gap: 9px; padding: 8px 8px; border: none; background: none; border-radius: var(--radius-sm); cursor: pointer; font-size: 12px; font-weight: 500; color: var(--text-muted); width: 100%; text-align: left; transition: background .12s, color .12s; } .ctx-action-btn:hover { background: var(--surface2); color: var(--text); } .ctx-action-btn svg { flex-shrink: 0; } .ctx-action-danger { color: #f87171 !important; } .ctx-action-danger:hover { background: rgba(239,68,68,.1) !important; } .ctx-footer { padding: 12px 14px 16px; margin-top: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .ctx-footer-sep { color: var(--text-faint); font-size: 12px; } .ctx-link-btn { background: none; border: none; cursor: pointer; font-size: 12px; color: var(--text-muted); text-decoration: underline; padding: 0; } .ctx-link-btn:hover { color: var(--text); } .ctx-link-danger { color: #f87171 !important; } .ctx-link-danger:hover { color: #fca5a5 !important; } /* Thread header with labeled group controls */ .thread-hdr-btn { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--text-muted); padding: 5px 9px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface2); cursor: pointer; white-space: nowrap; } .thread-hdr-btn:hover { color: var(--text); background: var(--surface); } .thread-hdr-btn.msg-danger-btn:hover { color: #f87171; border-color: rgba(239,68,68,.3); background: rgba(239,68,68,.07); } /* ── Profile Avatar ──────────────────────────────────────────────────────────── */ .prof-avatar-section { display: flex; align-items: center; gap: 18px; padding: 16px 0 14px; } .prof-avatar-wrap { position: relative; cursor: pointer; flex-shrink: 0; } .prof-avatar-circle { width: 80px; height: 80px; border-radius: 50%; background: var(--primary); overflow: hidden; display: flex; align-items: center; justify-content: center; border: 3px solid var(--border); transition: border-color .15s; } .prof-avatar-wrap:hover .prof-avatar-circle { border-color: var(--primary); } .prof-avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .prof-avatar-initials { font-size: 28px; font-weight: 700; color: #fff; } .prof-avatar-overlay { position: absolute; inset: 0; border-radius: 50%; background: rgba(0,0,0,.5); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; opacity: 0; transition: opacity .15s; color: #fff; font-size: 10px; font-weight: 600; } .prof-avatar-wrap:hover .prof-avatar-overlay { opacity: 1; } .prof-avatar-meta { flex: 1; } .prof-avatar-label { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 3px; } .prof-avatar-hint { font-size: 11px; color: var(--text-faint); } .prof-remove-photo-btn { background: none; border: none; cursor: pointer; font-size: 11px; color: var(--text-muted); text-decoration: underline; padding: 0; margin-top: 5px; display: block; } .prof-remove-photo-btn:hover { color: #f87171; } /* ── Profile Certification Upload Rows ───────────────────────────────────────── */ .prof-cert-row { margin-top: 8px; } .prof-cert-status { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); margin-bottom: 6px; padding: 6px 10px; background: var(--surface2); border-radius: var(--radius-sm); border: 1px solid var(--border); } .prof-cert-status svg { flex-shrink: 0; } .prof-cert-remove { background: none; border: none; cursor: pointer; font-size: 11px; color: var(--text-faint); text-decoration: underline; padding: 0; } .prof-cert-remove:hover { color: #f87171; } /* ── Header Avatar Circle ────────────────────────────────────────────────────── */ .header-avatar-btn { background: none; border: none; cursor: pointer; padding: 2px; border-radius: 50%; transition: box-shadow .15s; } .header-avatar-btn:hover { box-shadow: 0 0 0 3px rgba(16,185,129,.3); } .hdr-avatar-circle { width: 28px; height: 28px; border-radius: 50%; background: var(--primary); display: flex; align-items: center; justify-content: center; overflow: hidden; } .hdr-avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .hdr-avatar-initials { font-size: 11px; font-weight: 700; color: #fff; } /* ── Settings Modal ──────────────────────────────────────────────────────────── */ .settings-modal-body { gap: 0; padding: 0; } .settings-section { padding: 20px 24px; border-bottom: 1px solid var(--border); } .settings-section:last-child { border-bottom: none; } .settings-section-title { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 16px; } .settings-toggle-list { display: flex; flex-direction: column; gap: 0; } .settings-toggle-row { display: flex; align-items: center; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--border); cursor: pointer; } .settings-toggle-row:last-child { border-bottom: none; padding-bottom: 0; } .settings-toggle-row:first-child { padding-top: 0; } .settings-toggle-info { flex: 1; min-width: 0; } .settings-toggle-label { font-size: 13.5px; font-weight: 600; color: var(--text); margin-bottom: 2px; } .settings-toggle-desc { font-size: 12px; color: var(--text-muted); line-height: 1.45; } /* Toggle switch */ .settings-toggle-wrap { position: relative; flex-shrink: 0; width: 42px; height: 24px; } .settings-chk { opacity: 0; width: 0; height: 0; position: absolute; } .settings-slider { position: absolute; inset: 0; border-radius: 24px; background: var(--border-light); cursor: pointer; transition: background .2s; } .settings-slider::before { content: ''; position: absolute; width: 18px; height: 18px; border-radius: 50%; background: #fff; left: 3px; top: 3px; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.25); } .settings-chk:checked + .settings-slider { background: var(--primary); } .settings-chk:checked + .settings-slider::before { transform: translateX(18px); } /* Settings → Team panel Dark-mode-first (uses CSS vars). Light-mode overrides live under further down so colors swap cleanly with the rest of the app. */ .settings-section-hint { font-size: 12.5px; color: var(--text-muted); line-height: 1.55; margin: -4px 0 14px; } .settings-team-field { margin-bottom: 14px; } .settings-team-field label { display: block; font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; } .settings-team-row, .settings-team-name-row { display: flex; gap: 8px; align-items: stretch; } .settings-team-name-row { margin-bottom: 8px; } .settings-team-row input[type="text"], .settings-team-row input[type="email"], .settings-team-name-row input[type="text"] { flex: 1; min-width: 0; padding: 9px 12px; font-size: 14px; color: var(--text); background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; transition: border-color .15s, background-color .15s; } .settings-team-row input[type="text"]::placeholder, .settings-team-row input[type="email"]::placeholder, .settings-team-name-row input[type="text"]::placeholder { color: var(--text-faint); } .settings-team-row input[type="text"]:focus, .settings-team-row input[type="email"]:focus, .settings-team-name-row input[type="text"]:focus { outline: none; border-color: var(--primary); } .settings-team-row input:disabled, .settings-team-name-row input:disabled { opacity: .55; cursor: not-allowed; } .settings-team-row .btn-sm { padding: 9px 14px; font-size: 13px; font-weight: 600; flex-shrink: 0; } .settings-team-msg:empty { display: none; } .settings-team-msg { font-size: 12px; line-height: 1.5; margin-top: 6px; } .settings-team-msg.ok { color: #34d399; } /* emerald-400 — legible on dark */ .settings-team-msg.err { color: #fca5a5; } /* red-300 — legible on dark */ .settings-team-msg.warn { color: #fcd34d; } /* amber-300 — legible on dark */ .settings-team-msg.info { color: var(--text-muted); } .settings-team-upsell-link { color: var(--primary); font-weight: 600; padding: 0; margin-left: 2px; } .settings-team-upsell-link:hover { color: var(--primary-dark); } .settings-team-sublabel { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin: 16px 0 8px; } .settings-team-list { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); padding: 6px; } .settings-team-empty { font-size: 12.5px; color: var(--text-muted); padding: 10px 8px; } .settings-team-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; background: var(--card); border: 1px solid var(--border); border-radius: 6px; font-size: 13px; } /* Team access matrix */ .settings-team-item-col { flex-direction: column; align-items: stretch; } .settings-team-item-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .settings-team-item-actions { display: flex; gap: 6px; flex-shrink: 0; } .settings-team-access-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; font-size: 12px; font-weight: 600; color: var(--text-muted); } .team-preset-select { font-size: 12px; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface2, var(--card)); color: var(--text); } .team-matrix-wrap { margin-top: 8px; } .team-matrix { border: 1px solid var(--border); border-radius: 6px; overflow: hidden; } .team-matrix-section { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); background: var(--surface2, rgba(0,0,0,.04)); padding: 6px 10px; } .team-matrix-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 10px; border-top: 1px solid var(--border); } .team-matrix-label { font-size: 13px; color: var(--text); } .team-matrix-select { font-size: 12px; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--border); background: var(--card); color: var(--text); min-width: 110px; } .team-matrix-actions { display: flex; justify-content: flex-end; padding: 8px 0 2px; } .settings-team-item-main { flex: 1; min-width: 0; } .settings-team-item-email { font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .settings-team-item-sub { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; } .settings-team-item-meta { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; } .settings-team-pill { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 10px; text-transform: uppercase; letter-spacing: .04em; background: var(--accent-dim); color: #93c5fd; border: 1px solid rgba(59,130,246,.25); } .settings-team-pill.owner { background: var(--primary-dim); color: #6ee7b7; border-color: rgba(16,185,129,.3); } .settings-team-item-action { font-size: 12px; font-weight: 600; color: #f87171; background: transparent; border: 1px solid transparent; padding: 4px 8px; border-radius: 4px; cursor: pointer; flex-shrink: 0; } .settings-team-item-action:hover:not(:disabled) { background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.35); } .settings-team-item-action:disabled { opacity: .5; cursor: not-allowed; } /* Light-mode overrides — match the rest of the app's light palette. */ .settings-team-row input[type="text"], .settings-team-row input[type="email"], .settings-team-name-row input[type="text"] { background: #fff; } .settings-team-msg.ok { color: #047857; } .settings-team-msg.err { color: #b91c1c; } .settings-team-msg.warn { color: #b45309; } .settings-team-list { background: #fafbfc; } .settings-team-item { background: #fff; } .settings-team-pill { background: #eef1fb; color: #1e2880; border-color: #d7dcf3; } .settings-team-pill.owner { background: rgba(16,185,129,.12); color: #047857; border-color: rgba(16,185,129,.3); } .settings-team-item-action { color: #b91c1c; } .settings-team-item-action:hover:not(:disabled) { background: #fee2e2; border-color: #fecaca; } @media (max-width: 520px) { .settings-team-row, .settings-team-name-row { flex-direction: column; align-items: stretch; } .settings-team-row .btn-sm { width: 100%; } .settings-team-item { flex-wrap: wrap; } .settings-team-item-action { margin-left: auto; } } @media (max-width: 960px) { .msg-context-panel { display: none !important; } } @media (max-width: 700px) { .w9-classification { grid-template-columns: 1fr; } .w9-steps { flex-direction: column; align-items: flex-start; } .w9-step-arrow { display: none; } .w9-irs-link { margin-left: 0; width: 100%; text-align: center; } .w9-url-row { flex-direction: column; align-items: stretch; } .thread-msg { max-width: 90%; } .prof-avatar-section { flex-direction: column; align-items: flex-start; } } /* ── Group Chat ──────────────────────────────────────────────────────────────── */ /* Group avatar in sidebar — teal ring to distinguish from DMs */ .group-avatar { background: rgba(6,182,212,.15); color: #67e8f9; border: 1px solid rgba(6,182,212,.3); } /* Section label in group panel */ .group-section-label { padding: 6px 12px 4px; font-size: 10px; font-weight: 700; color: var(--text-faint); letter-spacing: .08em; text-transform: uppercase; } /* Invite card */ .group-invite-card { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--border); background: rgba(99,102,241,.05); } .group-invite-icon { width: 30px; height: 30px; border-radius: 50%; background: rgba(99,102,241,.15); color: #a5b4fc; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .group-invite-info { flex: 1; min-width: 0; } .group-invite-name { font-size: 12px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .group-invite-from { font-size: 11px; color: var(--text-muted); margin-top: 1px; } .group-invite-actions { display: flex; gap: 4px; flex-shrink: 0; } /* Group message bubbles */ .group-msg { max-width: 78% !important; } .group-msg-sender { font-size: 10px; font-weight: 700; letter-spacing: .03em; margin-bottom: 3px; text-transform: uppercase; padding-left: 2px; } .group-bubble { border: 1px solid transparent; } /* Members panel (slides in below thread header) */ #groupMembersPanel { display: none; background: var(--surface-2); border-bottom: 1px solid var(--border); padding: 10px 16px; flex-direction: column; gap: 8px; } .group-members-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .group-member-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 12px; border: 1px solid transparent; font-size: 11px; font-weight: 600; } .group-add-member-btn { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 12px; border: 1px dashed var(--border); background: none; color: var(--text-muted); font-size: 11px; font-weight: 600; cursor: pointer; transition: border-color .15s, color .15s; } .group-add-member-btn:hover { border-color: var(--primary); color: var(--primary); } .group-add-member-search { width: 100%; } /* New Group modal — member search results */ .group-member-result { display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer; border-bottom: 1px solid var(--border); transition: background .15s; } .group-member-result:last-child { border-bottom: none; } .group-member-result:hover { background: var(--surface2); } .group-result-avatar { width: 28px; height: 28px; border-radius: 50%; background: rgba(99,102,241,.15); color: #a5b4fc; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; } /* Selected member chips */ .group-selected-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; } .group-chip-remove { background: none; border: none; cursor: pointer; color: inherit; opacity: .7; font-size: 14px; line-height: 1; padding: 0 0 0 2px; transition: opacity .15s; } .group-chip-remove:hover { opacity: 1; } /* ── Coverage Amount Slider ──────────────────────────────────────────────────── */ .coverage-slider-wrap { display: flex; flex-direction: column; gap: 4px; } .coverage-amount-display { font-size: 15px; font-weight: 700; color: var(--primary); text-align: center; letter-spacing: .01em; } .coverage-slider { width: 100%; accent-color: var(--primary); cursor: pointer; height: 4px; } .coverage-labels { display: flex; justify-content: space-between; margin-top: 2px; } .coverage-labels span { font-size: 9px; color: var(--text-faint); font-weight: 600; } /* Contractor profile typeahead */ .contractor-typeahead-item { padding: 8px 12px; cursor: pointer; border-bottom: 1px solid var(--border); transition: background .15s; } .contractor-typeahead-item:last-child { border-bottom: none; } .contractor-typeahead-item:hover { background: var(--surface3, rgba(255,255,255,.06)); } .contractor-typeahead-name { font-size: 13px; font-weight: 600; color: var(--text); } .contractor-typeahead-sub { font-size: 11px; color: var(--text-faint); margin-top: 2px; } /* Contractor profile locked tile */ .contractor-profile-tile { display: flex; align-items: center; gap: 6px; } .contractor-profile-tile-btn { flex: 1; display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: rgba(16,185,129,.08); border: 1.5px solid rgba(16,185,129,.45); border-radius: var(--radius); cursor: pointer; color: var(--text); font-size: 13px; font-weight: 600; text-align: left; transition: background .15s, border-color .15s; } .contractor-profile-tile-btn:hover { background: rgba(16,185,129,.15); border-color: rgba(16,185,129,.7); } .contractor-profile-tile-btn svg:first-child { color: #10b981; flex-shrink: 0; } .contractor-profile-tile-btn span { flex: 1; } .contractor-profile-tile-arrow { color: var(--text-muted); flex-shrink: 0; } .contractor-profile-tile-clear { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface2); color: var(--text-muted); cursor: pointer; flex-shrink: 0; transition: background .15s, color .15s; } .contractor-profile-tile-clear:hover { background: rgba(239,68,68,.15); border-color: rgba(239,68,68,.4); color: #f87171; } /* ══════════════════════════════════════════════════════════════ ADMIN / AGENCY DASHBOARD — Light theme ══════════════════════════════════════════════════════════════ */ .view-admin { background: #f4f5f7; min-height: 100vh; } /* ── Layout ─────────────────────────────────────────────────── */ .admin-layout { display: flex; min-height: 100vh; } /* ── Sidebar ────────────────────────────────────────────────── */ .admin-sidebar { width: 230px; flex-shrink: 0; background: #fff; border-right: 1px solid #e5e7eb; display: flex; flex-direction: column; padding: 0; position: sticky; top: 0; height: 100vh; overflow-y: auto; } .admin-sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 20px 18px; border-bottom: 1px solid #f0f0f0; } .admin-brand-name { font-size: 13px; font-weight: 700; color: #111827; line-height: 1.2; } .admin-brand-badge { font-size: 10px; font-weight: 600; color: #10b981; background: rgba(16,185,129,.1); border-radius: 4px; padding: 1px 6px; margin-top: 3px; display: inline-block; } .admin-nav-links { flex: 1; padding: 12px 10px; display: flex; flex-direction: column; gap: 2px; } .admin-nav-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; background: none; border: none; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 500; color: #6b7280; text-align: left; transition: background .15s, color .15s; } .admin-nav-btn:hover { background: #f3f4f6; color: #111827; } .admin-nav-btn.is-active { background: rgba(16,185,129,.1); color: #059669; font-weight: 600; } .admin-nav-btn svg { flex-shrink: 0; } .admin-sidebar-footer { padding: 14px 10px; border-top: 1px solid #f0f0f0; } .admin-signout-btn { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 12px; background: none; border: none; border-radius: 8px; cursor: pointer; font-size: 13px; color: #9ca3af; transition: background .15s, color .15s; } .admin-signout-btn:hover { background: #fef2f2; color: #ef4444; } /* ── Content area ───────────────────────────────────────────── */ .admin-content { flex: 1; min-width: 0; overflow-y: auto; } .admin-panel { padding: 32px 36px; max-width: 1200px; } /* ── Page header ────────────────────────────────────────────── */ .admin-page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; } .admin-page-title { font-size: 22px; font-weight: 700; color: #111827; margin: 0; } .admin-refresh-btn { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 8px; cursor: pointer; color: #6b7280; display: flex; align-items: center; transition: background .15s, color .15s; } .admin-refresh-btn:hover { background: #f9fafb; color: #111827; } .admin-refresh-btn.spinning svg { animation: spin 1s linear infinite; } /* ── Section titles ─────────────────────────────────────────── */ .admin-section-title { font-size: 15px; font-weight: 600; color: #374151; margin: 0 0 6px; } .admin-section-hint { font-size: 13px; color: #9ca3af; margin: 0 0 20px; } /* ── Notice banner ──────────────────────────────────────────── */ .admin-notice { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #1d4ed8; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 8px; padding: 10px 14px; margin-bottom: 20px; } .admin-notice-link { background: none; border: none; cursor: pointer; color: #1d4ed8; font-weight: 600; text-decoration: underline; padding: 0; font-size: 13px; } /* ── Metrics grid ───────────────────────────────────────────── */ .admin-metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 28px; } .admin-metric-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 20px; display: flex; flex-direction: column; gap: 8px; } .admin-metric-icon { width: 36px; height: 36px; background: #f3f4f6; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #6b7280; } .admin-metric-label { font-size: 12px; color: #6b7280; font-weight: 500; } .admin-metric-value { font-size: 26px; font-weight: 700; color: #111827; line-height: 1; } /* ── Charts row ─────────────────────────────────────────────── */ .admin-charts-row { display: flex; gap: 16px; align-items: stretch; } .admin-chart-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 20px; } .admin-chart-lg { flex: 2; } .admin-chart-sm { flex: 1; } .admin-chart-title { font-size: 14px; font-weight: 600; color: #111827; margin: 0 0 2px; } .admin-chart-sub { font-size: 12px; color: #9ca3af; margin: 0 0 16px; } /* ── API Keys list ──────────────────────────────────────────── */ .api-keys-list { display: flex; flex-direction: column; gap: 1px; background: #e5e7eb; border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; } .api-key-row { display: flex; align-items: center; gap: 16px; background: #fff; padding: 16px 20px; } .api-key-logo { width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .api-key-info { flex: 1; min-width: 0; } .api-key-name { font-size: 14px; font-weight: 600; color: #111827; } .api-key-desc { font-size: 12px; color: #9ca3af; margin-top: 1px; } .api-key-badge { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 20px; background: #f3f4f6; color: #9ca3af; white-space: nowrap; flex-shrink: 0; } .api-key-badge.connected { background: rgba(16,185,129,.12); color: #059669; } .api-key-controls { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .api-key-input { width: 220px; font-size: 12px !important; padding: 7px 10px !important; } @media (max-width: 900px) { .admin-metrics-grid { grid-template-columns: repeat(2, 1fr); } .admin-charts-row { flex-direction: column; } .admin-sidebar { width: 200px; } .api-key-row { flex-wrap: wrap; } .api-key-input { width: 160px; } } @media (max-width: 640px) { .admin-metrics-grid { grid-template-columns: 1fr; } .admin-sidebar { display: none; } .admin-panel { padding: 20px 16px; } } /* ── Getting Started guide ──────────────────────────────────────────────── */ /* Sidebar nav — guide button */ .snav-section-guide { margin-bottom: 10px; } .snav-item-guide { background: var(--primary-dim); color: var(--primary); font-weight: 600; border-radius: var(--radius-sm); } .snav-item-guide:hover { background: var(--primary-dim); color: var(--primary); filter: brightness(1.08); } .snav-item-guide.active { background: var(--primary); color: #fff; } .snav-item-guide.active svg { stroke: #fff; opacity: 1; } .snav-guide-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; background: var(--accent); color: #fff; font-size: 10px; font-weight: 700; border-radius: 9px; padding: 0 4px; margin-left: auto; flex-shrink: 0; } /* Main panel wrapper */ .gs-main-wrap { max-width: 760px; margin: 0 auto; padding: 28px 20px 48px; } /* Header */ .gs-guide-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 28px; flex-wrap: wrap; } .gs-guide-title { font-size: 1.35rem; font-weight: 700; color: var(--text); margin: 0 0 6px; } .gs-guide-sub { font-size: var(--fs-sm); color: var(--text-muted); margin: 0; line-height: 1.5; max-width: 460px; } .gs-guide-progress-wrap { flex-shrink: 0; min-width: 200px; } .gs-guide-progress-bar { height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; margin-bottom: 6px; } .gs-guide-progress-fill { height: 100%; background: var(--primary); border-radius: 4px; transition: width .35s ease; width: 0%; } .gs-guide-progress-label { font-size: var(--fs-xs); color: var(--text-muted); font-weight: 500; text-align: right; } /* Steps grid — single column stack */ .gs-steps-grid { display: flex; flex-direction: column; gap: 12px; } /* Step card */ .gs-step-card { display: flex; align-items: stretch; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: box-shadow .15s; } .gs-step-card:hover { box-shadow: 0 2px 10px rgba(0,0,0,.07); } .gs-step-card-left { display: flex; align-items: center; justify-content: center; padding: 0 16px; background: var(--surface2); border-right: 1px solid var(--border); flex-shrink: 0; } .gs-step-check { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--border-strong, var(--border)); background: var(--bg); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--text-faint); transition: background .2s, border-color .2s, color .2s; flex-shrink: 0; } .gs-step-check--done { background: var(--primary); border-color: var(--primary); color: #fff; } .gs-step-check--done svg { stroke: #fff; } .gs-step-card-body { display: flex; align-items: center; gap: 14px; padding: 16px; flex: 1; flex-wrap: wrap; } .gs-step-card-icon { flex-shrink: 0; width: 36px; height: 36px; border-radius: var(--radius-sm); background: var(--primary-dim); display: flex; align-items: center; justify-content: center; color: var(--primary); } .gs-step-card-icon svg { stroke: var(--primary); } .gs-step-card-content { flex: 1; min-width: 180px; } .gs-step-card-title { font-size: var(--fs-base); font-weight: 600; color: var(--text); margin-bottom: 3px; } .gs-step-card-desc { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.45; } .gs-step-card-actions { display: flex; gap: 8px; flex-shrink: 0; align-items: center; flex-wrap: wrap; } .gs-step-action-btn { background: var(--primary); color: #fff; border: none; border-radius: var(--radius-sm); padding: 7px 14px; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .12s; } .gs-step-action-btn:hover { background: var(--primary-dark, var(--primary)); filter: brightness(.92); } .gs-step-done-btn { background: transparent; color: var(--text-muted); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 7px 12px; font-size: var(--fs-sm); font-weight: 500; cursor: pointer; white-space: nowrap; transition: background .12s, color .12s; } .gs-step-done-btn:hover { background: var(--surface2); color: var(--text); } .gs-step-done-btn--done { background: rgba(16,185,129,.10); color: #059669; border-color: rgba(16,185,129,.35); } .gs-step-done-btn--done:hover { background: rgba(239,68,68,.08); color: #dc2626; border-color: rgba(239,68,68,.30); } /* Done state — visually dim the card */ .gs-step-card.gs-step-done { opacity: .65; } .gs-step-card.gs-step-done .gs-step-card-title { text-decoration: line-through; } /* Bonus card (website) */ .gs-bonus-card { display: flex; align-items: center; gap: 16px; background: var(--surface2); border: 1px dashed var(--border); border-radius: var(--radius); padding: 18px 20px; margin-top: 24px; flex-wrap: wrap; } .gs-bonus-icon { flex-shrink: 0; width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--accent-dim, rgba(var(--accent-rgb,99,102,241),.12)); display: flex; align-items: center; justify-content: center; color: var(--accent, #6366f1); } .gs-bonus-content { flex: 1; min-width: 180px; } .gs-bonus-title { font-size: var(--fs-base); font-weight: 600; color: var(--text); margin-bottom: 3px; } .gs-bonus-desc { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.45; } .gs-bonus-btn { flex-shrink: 0; background: var(--accent, #6366f1); color: #fff; border: none; border-radius: var(--radius-sm); padding: 8px 16px; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; white-space: nowrap; transition: filter .12s; } .gs-bonus-btn:hover { filter: brightness(.9); } /* Mobile */ @media (max-width: 600px) { .gs-main-wrap { padding: 16px 12px 36px; } .gs-guide-header { flex-direction: column; gap: 14px; } .gs-guide-progress-wrap { min-width: unset; width: 100%; } .gs-guide-progress-label { text-align: left; } .gs-step-card-body { flex-direction: column; align-items: flex-start; gap: 10px; } .gs-step-card-actions { width: 100%; } } /* ── Support ─────────────────────────────────────────────────────────────── */ /* Support form */ .gs-support-wrap { display: flex; flex-direction: column; gap: 2px; padding: 8px 8px; } /* Support form */ .gs-support-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 28px; } .gs-support-form-card { background: var(--surface2); border: 1px solid var(--border); border-radius: 12px; padding: 20px; display: flex; flex-direction: column; gap: 14px; } .gs-support-form-title { font-size: 14px; font-weight: 700; color: var(--text); } .gs-my-tickets { background: var(--surface2); border: 1px solid var(--border); border-radius: 12px; padding: 20px; } .gs-my-tickets-title { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 12px; } .gs-ticket-item { padding: 10px 0; border-bottom: 1px solid var(--border); } .gs-ticket-item:last-child { border-bottom: none; } .gs-ticket-clickable { cursor: pointer; border-radius: var(--radius-sm); transition: background .12s; padding: 10px 6px; margin: 0 -6px; } .gs-ticket-clickable:hover { background: var(--surface2); } .gs-ticket-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; } .gs-ticket-chevron { flex-shrink: 0; color: var(--text-faint); transition: transform .2s; } .gs-ticket-subject { font-size: 13px; font-weight: 600; color: var(--text); } .gs-ticket-meta { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; } .gs-ticket-status-open { color: #f59e0b; font-weight: 600; } .gs-ticket-status-resolved { color: #10b981; font-weight: 600; } .gs-ticket-detail { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; } .gs-ticket-detail-section { background: var(--surface2); border-radius: var(--radius-sm); padding: 10px 12px; } .gs-ticket-detail-label { font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 4px; } .gs-ticket-detail-body { font-size: 13px; color: var(--text); line-height: 1.55; white-space: pre-wrap; word-break: break-word; } .gs-ticket-admin-note { border: 1px solid rgba(16,185,129,.25); background: rgba(16,185,129,.06); } .gs-ticket-admin-note .gs-ticket-detail-label { color: #10b981; } .gs-tickets-empty { font-size: 13px; color: var(--text-muted); } @media (max-width: 900px) { .gs-support-wrap { grid-template-columns: 1fr; } } /* Admin nav badge */ .admin-nav-badge { margin-left: auto; background: #ef4444; color: #fff; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 10px; min-width: 18px; text-align: center; } /* ── Admin: Support Tickets Panel ────────────────────────────────────────── */ .admin-support-filters { display: flex; gap: 8px; margin-bottom: 20px; } .admin-support-filter-btn { padding: 6px 16px; border-radius: 20px; border: 1.5px solid #e5e7eb; background: #fff; font-size: 13px; font-weight: 500; color: #6b7280; cursor: pointer; transition: all .15s; } .admin-support-filter-btn.is-active { background: #10b981; border-color: #10b981; color: #fff; font-weight: 600; } .admin-tickets-list { display: flex; flex-direction: column; gap: 12px; } .admin-ticket-card { background: #fff; border: 1.5px solid #e5e7eb; border-radius: 12px; padding: 18px 20px; transition: box-shadow .15s; } .admin-ticket-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,.07); } .admin-ticket-card.is-resolved { opacity: .65; } .admin-ticket-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; } .admin-ticket-subject { font-size: 14px; font-weight: 700; color: #111827; } .admin-ticket-badges { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .admin-ticket-status { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px; } .admin-ticket-status.open { background: rgba(245,158,11,.12); color: #d97706; } .admin-ticket-status.resolved { background: rgba(16,185,129,.12); color: #059669; } .admin-ticket-user { font-size: 12.5px; color: #6b7280; margin-bottom: 8px; } .admin-ticket-msg { font-size: 13px; color: #374151; line-height: 1.5; white-space: pre-wrap; word-break: break-word; } .admin-ticket-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding-top: 12px; border-top: 1px solid #f3f4f6; } .admin-ticket-note { font-size: 12.5px; color: #374151; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 6px; padding: 8px 12px; margin-top: 8px; line-height: 1.5; } .admin-ticket-note strong { color: #059669; } .admin-resolve-form { margin: 10px 0 0; display: flex; flex-direction: column; gap: 8px; } .admin-resolve-textarea { width: 100%; border: 1.5px solid #d1d5db; border-radius: 7px; padding: 8px 10px; font-size: 13px; font-family: inherit; resize: vertical; min-height: 60px; outline: none; transition: border-color .15s; background: #fff; color: #111827; } .admin-resolve-textarea:focus { border-color: #10b981; } .admin-resolve-actions { display: flex; gap: 8px; justify-content: flex-end; } .admin-ticket-date { font-size: 11.5px; color: #9ca3af; } .admin-ticket-resolve-btn { padding: 6px 14px; border-radius: 7px; font-size: 12px; font-weight: 600; cursor: pointer; border: 1.5px solid #e5e7eb; background: transparent; color: #6b7280; transition: all .15s; } .admin-ticket-resolve-btn:hover { border-color: #10b981; color: #10b981; } .admin-ticket-resolve-btn.is-resolved:hover { border-color: #f59e0b; color: #d97706; } .admin-tickets-empty { text-align: center; padding: 60px 20px; color: #9ca3af; font-size: 14px; } .ticket-priority { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 20px; text-transform: uppercase; letter-spacing: .04em; } .priority-urgent { background: rgba(239,68,68,.15); color: #dc2626; } .priority-high { background: rgba(249,115,22,.15); color: #ea580c; } .priority-normal { background: rgba(59,130,246,.12); color: #2563eb; } .priority-low { background: rgba(156,163,175,.15);color: #6b7280; } /* ── Ideas sidebar sub-nav ───────────────────────────────────────────────── */ .ideas-sub-nav { display: flex; flex-direction: column; gap: 2px; padding: 8px 4px; } .ideas-sub-btn { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 9px; border: none; background: none; color: var(--text-muted); font-size: 13px; font-weight: 500; cursor: pointer; text-align: left; width: 100%; transition: background .15s, color .15s; } .ideas-sub-btn:hover { background: var(--surface2); color: var(--text); } .ideas-sub-btn.active { background: var(--surface2); color: var(--primary); font-weight: 600; } .ideas-sub-btn svg { flex-shrink: 0; } /* ── Mobile-only Ideas sub-nav (Feed / Roadmap tabs) ────────────────────── */ .ideas-mobile-subnav { display: none; /* hidden on desktop — desktop uses sidebar sub-nav */ } @media (max-width: 768px) { .ideas-mobile-subnav { display: flex; position: sticky; top: 0; z-index: 10; background: var(--surface); border-bottom: 1px solid var(--border); /* Break out of .main-content's 12px padding to span full width */ margin: -12px -12px 0; width: calc(100% + 24px); } .ideas-mobile-subnav-btn { flex: 1; padding: 12px 8px; background: none; border: none; border-bottom: 2px solid transparent; color: var(--text-muted); font-size: 13px; font-weight: 600; cursor: pointer; transition: color .15s, border-color .15s; } .ideas-mobile-subnav-btn.active { color: var(--primary); border-bottom-color: var(--primary); } } @media (max-width: 480px) { /* Adjust breakout margin for the tighter 8px padding at small sizes */ .ideas-mobile-subnav { margin: -8px -8px 0; width: calc(100% + 16px); } } /* ── Roadmap full-width outer wrapper ────────────────────────────────────── */ .ideas-roadmap-outer { padding: 32px 28px; } @media (max-width: 600px) { .ideas-roadmap-outer { padding: 20px 16px; } } /* ── Ideas search ────────────────────────────────────────────────────────── */ .ideas-search-wrap { margin-bottom: 16px; position: relative; } .ideas-search-wrap .field-input { padding-left: 36px; } .ideas-search-wrap::before { content: ''; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; background: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238fa3be' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat center; pointer-events: none; } /* ── Pagination ──────────────────────────────────────────────────────────── */ .ideas-pagination { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); } .ideas-page-btn { padding: 6px 14px; border-radius: 7px; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); font-size: 13px; font-weight: 600; cursor: pointer; transition: all .15s; } .ideas-page-btn:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); } .ideas-page-btn:disabled { opacity: .4; cursor: default; } .ideas-page-info { font-size: 13px; color: var(--text-muted); min-width: 80px; text-align: center; } /* ── Ideas main page header ──────────────────────────────────────────────── */ .ideas-page-header { margin-bottom: 24px; } .ideas-page-title { font-size: 20px; font-weight: 700; color: var(--text); margin: 0 0 6px; } .ideas-page-sub { font-size: 13.5px; color: var(--text-muted); margin: 0; line-height: 1.6; } /* ── Submit card ─────────────────────────────────────────────────────────── */ .ideas-submit-card { background: var(--surface); border: 1.5px solid var(--border); border-radius: 14px; padding: 20px; margin-bottom: 24px; display: flex; flex-direction: column; gap: 12px; } .ideas-submit-title { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; color: var(--text); } .ideas-desc-input { resize: vertical; min-height: 72px; } .ideas-submit-error { font-size: 12.5px; color: #dc2626; } .ideas-submit-btn { align-self: flex-start; } /* ── Ideas feed cards ────────────────────────────────────────────────────── */ .ideas-feed-list { display: flex; flex-direction: column; gap: 12px; } .idea-card { display: flex; align-items: flex-start; gap: 14px; background: var(--surface); border: 1.5px solid var(--border); border-radius: 13px; padding: 16px 18px; transition: border-color .15s, box-shadow .15s; } .idea-card:hover { border-color: var(--primary); box-shadow: 0 2px 12px rgba(16,185,129,.08); } .idea-upvote-btn { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 44px; padding: 8px 6px; border-radius: 9px; border: 1.5px solid var(--border); background: var(--surface2); color: var(--text-muted); cursor: pointer; transition: all .15s; flex-shrink: 0; } .idea-upvote-btn:hover { border-color: var(--primary); color: var(--primary); background: rgba(16,185,129,.06); } .idea-upvote-btn.upvoted { border-color: var(--primary); background: rgba(16,185,129,.1); color: var(--primary); } .idea-upvote-btn:disabled { opacity: .5; cursor: not-allowed; } .idea-upvote-count { font-size: 13px; font-weight: 700; line-height: 1; } .idea-card-body { flex: 1; min-width: 0; } .idea-card-top { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; } .idea-card-title { font-size: 14px; font-weight: 600; color: var(--text); flex: 1; min-width: 0; } .idea-card-desc { font-size: 13px; color: var(--text-muted); line-height: 1.55; margin-bottom: 8px; } .idea-card-meta { font-size: 11.5px; color: var(--text-muted); } /* ── Idea status badges ──────────────────────────────────────────────────── */ .idea-status-badge { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 20px; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; flex-shrink: 0; } .idea-status-pending { background: rgba(156,163,175,.15); color: #6b7280; } .idea-status-consideration { background: rgba(245,158,11,.12); color: #d97706; } .idea-status-will-build { background: rgba(59,130,246,.12); color: #2563eb; } .idea-status-complete { background: rgba(16,185,129,.12); color: #059669; } /* ── Roadmap grid ────────────────────────────────────────────────────────── */ .roadmap-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; align-items: start; } @media (max-width: 900px) { .roadmap-grid { grid-template-columns: 1fr; } } .roadmap-col { background: var(--surface2); border-radius: 13px; padding: 16px; display: flex; flex-direction: column; gap: 10px; } .roadmap-col-header { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 4px; } .roadmap-col-count { margin-left: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; font-size: 11px; font-weight: 600; color: var(--text-muted); padding: 1px 8px; } .roadmap-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .roadmap-dot-consideration { background: #f59e0b; } .roadmap-dot-will-build { background: #3b82f6; } .roadmap-dot-complete { background: #10b981; } .roadmap-items { display: flex; flex-direction: column; gap: 8px; } .roadmap-card { display: flex; align-items: flex-start; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; transition: box-shadow .15s, border-color .15s; cursor: pointer; } .roadmap-card:hover { box-shadow: 0 2px 12px rgba(16,185,129,.1); border-color: var(--primary); } .roadmap-card-votes { display: flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 700; color: var(--text-muted); white-space: nowrap; padding-top: 1px; flex-shrink: 0; } .roadmap-card-title { font-size: 13px; font-weight: 500; color: var(--text); line-height: 1.4; } .roadmap-empty { font-size: 13px; color: var(--text-muted); text-align: center; padding: 16px 0; } .idea-card.highlight { animation: idea-highlight 1.8s ease; } @keyframes idea-highlight { 0%,100% { border-color: var(--border); } 20%,60% { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(16,185,129,.18); } } /* ── Admin Ideas ─────────────────────────────────────────────────────────── */ .admin-ticket-body { font-size: 13px; color: #374151; line-height: 1.5; margin-bottom: 8px; } .admin-ticket-meta { font-size: 12px; color: #6b7280; } .admin-ticket-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .idea-upvote-display { font-size: 12px; font-weight: 700; color: #6b7280; padding: 4px 10px; background: #f3f4f6; border: 1px solid #e5e7eb; border-radius: 20px; white-space: nowrap; } .idea-status-select { font-size: 12px !important; padding: 5px 8px !important; width: 165px !important; color: #111827 !important; background: #fff !important; border-color: #d1d5db !important; } .idea-status-save-btn { padding: 5px 12px; font-size: 12px; font-weight: 600; background: #10b981; color: #fff; border: none; border-radius: 6px; cursor: pointer; transition: background .15s; white-space: nowrap; } .idea-status-save-btn:hover { background: #059669; } /* ── Admin: Videos Panel ─────────────────────────────────────────────────── */ .admin-video-list { display: flex; flex-direction: column; gap: 0; } .admin-video-row { display: flex; align-items: flex-start; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--border, #e5e7eb); } .admin-video-row:last-child { border-bottom: none; } .admin-video-icon { width: 38px; height: 38px; border-radius: 10px; background: var(--surface2, #f3f4f6); display: flex; align-items: center; justify-content: center; color: var(--text-muted, #6b7280); flex-shrink: 0; margin-top: 2px; } .admin-video-info { flex: 1; min-width: 0; } .admin-video-name { font-size: 14px; font-weight: 600; color: var(--text, #111827); margin-bottom: 3px; } .admin-video-desc { font-size: 12.5px; color: var(--text-muted, #6b7280); line-height: 1.5; } .admin-video-controls { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .admin-video-input { width: 280px; font-size: 13px !important; padding: 8px 12px !important; } .admin-video-badge { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 20px; background: rgba(156,163,175,.15); color: #6b7280; white-space: nowrap; flex-shrink: 0; } .admin-video-badge.admin-video-badge-set { background: rgba(16,185,129,.13); color: #059669; } .admin-video-preview-btn { cursor: pointer; border: none; transition: background .15s, color .15s, transform .1s; } .admin-video-preview-btn:hover { background: var(--primary, #10b981); color: #fff; transform: scale(1.08); } .admin-video-preview-btn:active { transform: scale(.97); } .admin-code { background: var(--surface2, #f3f4f6); border: 1px solid var(--border, #e5e7eb); border-radius: 4px; padding: 1px 6px; font-family: monospace; font-size: 12px; } /* ── Video Modal ──────────────────────────────────────────────────────────── */ .video-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.65); display: flex; align-items: center; justify-content: center; z-index: 1200; padding: 20px; } .video-modal { background: #fff; border-radius: 16px; width: 100%; max-width: 820px; box-shadow: 0 24px 60px rgba(0,0,0,.25); overflow: hidden; } .video-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px 14px; border-bottom: 1px solid #e5e7eb; } .video-modal-title { font-size: 15px; font-weight: 700; color: #111827; } .video-modal-body { padding: 0; } .video-modal-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 60px 24px; color: #9ca3af; text-align: center; } .video-modal-placeholder-text { font-size: 15px; font-weight: 600; color: #374151; } .video-modal-placeholder-sub { font-size: 13px; color: #9ca3af; } .video-modal-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 60px 24px; color: #9ca3af; } .video-modal-loading-text { font-size: 14px; color: #6b7280; } .video-modal-error { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 48px 32px; text-align: center; color: #9ca3af; } .video-modal-error-title { font-size: 15px; font-weight: 600; color: #374151; margin-top: 4px; } .video-modal-error-sub { font-size: 13px; color: #6b7280; max-width: 380px; line-height: 1.6; } .video-modal-support-btn { margin-top: 8px; display: inline-flex; align-items: center; gap: 7px; } .video-modal-iframe-wrap { position: relative; padding-bottom: 56.25%; /* 16:9 */ height: 0; overflow: hidden; } .video-modal-iframe-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; } /* ── Admin: API Settings Panel ──────────────────────────────────────────────── */ .api-settings-tabs { display: flex; gap: 4px; border-bottom: 2px solid #e5e7eb; margin-bottom: 24px; } .api-settings-tab { display: flex; align-items: center; gap: 7px; padding: 9px 16px; border: none; background: none; font-size: 13px; font-weight: 600; color: #6b7280; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; border-radius: 6px 6px 0 0; transition: color .15s, background .15s; } .api-settings-tab:hover { background: #f9fafb; color: #374151; } .api-settings-tab.is-active { color: #10b981; border-bottom-color: #10b981; } .api-tab-content { animation: fadeInUp .15s ease; } .api-tab-hint { font-size: 13px; color: #6b7280; margin-bottom: 20px; line-height: 1.55; } /* Webhook rows */ .webhook-list { display: flex; flex-direction: column; gap: 0; border: 1.5px solid #e5e7eb; border-radius: 10px; overflow: hidden; margin-bottom: 28px; } .webhook-row { display: flex; align-items: flex-start; gap: 16px; padding: 16px 18px; border-bottom: 1px solid #f3f4f6; background: #fff; } .webhook-row:last-child { border-bottom: none; } .webhook-info { flex: 1; min-width: 0; } .webhook-name { font-size: 13px; font-weight: 700; color: #111827; margin-bottom: 2px; } .webhook-desc { font-size: 12px; color: #9ca3af; line-height: 1.4; } .webhook-controls { display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap; } .webhook-input { width: 300px; font-size: 12px; } .whk-status { font-size: 11px; font-weight: 700; white-space: nowrap; } /* Payload preview */ .webhook-payload-preview { background: #f8fafc; border: 1.5px solid #e5e7eb; border-radius: 8px; padding: 14px 16px; } .webhook-payload-title { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6b7280; margin-bottom: 10px; } .webhook-payload-code { font-size: 12px; font-family: 'Menlo','Monaco','Courier New',monospace; color: #374151; line-height: 1.65; margin: 0; white-space: pre; overflow-x: auto; } /* Firebase user management */ .fb-user-search-row { display: flex; gap: 8px; max-width: 460px; margin-bottom: 14px; } .fb-searching { font-size: 13px; color: #9ca3af; padding: 10px 0; } .fb-no-result { font-size: 13px; color: #9ca3af; padding: 10px 0; } .fb-user-card { border: 1.5px solid #e5e7eb; border-radius: 10px; overflow: hidden; max-width: 600px; margin-bottom: 20px; } .fb-user-card-header { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: #fff; } .fb-user-avatar { width: 42px; height: 42px; border-radius: 50%; background: #d1fae5; color: #10b981; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; flex-shrink: 0; } .fb-user-card-info { flex: 1; min-width: 0; } .fb-user-card-email { font-size: 14px; font-weight: 700; color: #111827; } .fb-user-card-meta { font-size: 11.5px; color: #6b7280; margin-top: 2px; } .fb-user-card-meta code { background: #f3f4f6; border-radius: 4px; padding: 1px 5px; font-size: 11px; } .fb-user-status { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px; flex-shrink: 0; } .fb-status-active { background: #d1fae5; color: #065f46; } .fb-status-suspended { background: #fee2e2; color: #991b1b; } .fb-user-card-footer { display: flex; gap: 8px; padding: 12px 18px; background: #f9fafb; border-top: 1px solid #f3f4f6; flex-wrap: wrap; } .fb-section-title { font-size: 13px; font-weight: 700; color: #374151; margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid #f3f4f6; } .fb-create-form { max-width: 600px; } /* ── Admin: Database Update Panel ───────────────────────────────────────────── */ .dbu-layout { display: flex; flex-direction: column; gap: 24px; max-width: 860px; } .dbu-section-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6b7280; margin-bottom: 8px; } .dbu-hint { font-size: 12px; color: #9ca3af; margin-bottom: 10px; line-height: 1.5; } .dbu-hint code { background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 4px; padding: 1px 5px; font-size: 11px; } .dbu-textarea { width: 100%; min-height: 160px; padding: 12px; font-family: 'Menlo', 'Monaco', monospace; font-size: 12px; line-height: 1.6; border: 1px solid #d1d5db; border-radius: 8px; background: #f9fafb; color: #111827; resize: vertical; outline: none; transition: border-color .15s; } .dbu-textarea:focus { border-color: #10b981; background: #fff; } .dbu-actions { display: flex; gap: 10px; margin-top: 12px; } .dbu-btn-preview { padding: 9px 20px; background: #f1f5f9; border: 1px solid #d1d5db; border-radius: 6px; font-size: 13px; font-weight: 600; color: #374151; cursor: pointer; transition: background .15s; } .dbu-btn-preview:hover { background: #e2e8f0; } .dbu-btn-write { padding: 9px 20px; background: #10b981; border: none; border-radius: 6px; font-size: 13px; font-weight: 600; color: #fff; cursor: pointer; transition: background .15s, opacity .15s; } .dbu-btn-write:hover:not(:disabled) { background: #059669; } .dbu-btn-write:disabled { opacity: .45; cursor: not-allowed; } .dbu-count-badge { display: inline-block; margin-left: 8px; padding: 1px 8px; background: #10b981; color: #fff; border-radius: 10px; font-size: 11px; font-weight: 700; letter-spacing: 0; text-transform: none; vertical-align: middle; } .dbu-preview-list { display: flex; flex-direction: column; gap: 4px; } .dbu-preview-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 6px; flex-wrap: wrap; } .dbu-preview-reg { font-size: 11px; font-weight: 700; color: #6b7280; font-family: monospace; flex-shrink: 0; width: 72px; } .dbu-preview-biz { font-size: 12px; font-weight: 600; color: #111827; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dbu-preview-svcs { display: flex; gap: 4px; flex-wrap: wrap; flex-shrink: 0; } .dbu-chip { display: inline-block; padding: 2px 8px; background: #e0f2fe; color: #0369a1; border-radius: 10px; font-size: 11px; font-weight: 600; } .dbu-chip-top { background: #fef3c7; color: #92400e; } .dbu-log { display: flex; flex-direction: column; gap: 3px; font-size: 12px; font-family: 'Menlo', 'Monaco', monospace; max-height: 320px; overflow-y: auto; padding: 12px; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; } .dbu-log-ok { color: #059669; } .dbu-log-err { color: #dc2626; } .dbu-log-summary { margin-top: 8px; padding-top: 8px; border-top: 1px solid #e5e7eb; color: #374151; font-weight: 700; font-family: inherit; font-size: 13px; } .dbu-file-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .dbu-file-label { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; background: #f1f5f9; border: 1px solid #d1d5db; border-radius: 6px; font-size: 13px; font-weight: 600; color: #374151; cursor: pointer; transition: background .15s; white-space: nowrap; } .dbu-file-label:hover { background: #e2e8f0; } .dbu-file-name { font-size: 12px; color: #9ca3af; } /* Vendor-catalog block inside Database Update panel */ .dbu-vendor-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; font-size: 12px; color: #374151; margin: 4px 0 12px; padding: 8px 12px; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 6px; } .dbu-vendor-meta-label { color: #6b7280; font-weight: 600; } .dbu-vendor-status { margin-top: 10px; padding: 10px 12px; border-radius: 6px; font-size: 12px; line-height: 1.5; } .dbu-vendor-status.is-ok { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; } .dbu-vendor-status.is-err { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; } .dbu-vendor-status.is-info { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e3a8a; } /* ── Admin: Social Review Matching ───────────────────────────────────────── */ .sr-layout { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: 24px; align-items: start; } .sr-picker { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 16px; position: sticky; top: 16px; } .sr-section-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6b7280; margin-bottom: 8px; } .sr-search-input { width: 100%; padding: 9px 12px; border: 1px solid #d1d5db; border-radius: 7px; font-size: 13px; color: #111827; outline: none; transition: border-color .15s; } .sr-search-input:focus { border-color: #10b981; } .sr-filter-row { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0; } .sr-filter-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: #374151; background: #f3f4f6; border: 1px solid #e5e7eb; border-radius: 999px; padding: 4px 9px; cursor: pointer; user-select: none; } .sr-filter-chip input { accent-color: #10b981; margin: 0; } .sr-picker-list { max-height: 480px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; margin-top: 6px; } .sr-picker-empty { padding: 14px 8px; font-size: 12px; color: #9ca3af; text-align: center; } .sr-picker-row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid transparent; border-radius: 7px; cursor: pointer; transition: background .12s, border-color .12s; } .sr-picker-row:hover { background: #f9fafb; } .sr-picker-row.is-selected { background: #ecfdf5; border-color: #a7f3d0; } .sr-picker-info { flex: 1; min-width: 0; } .sr-picker-biz { font-size: 13px; font-weight: 600; color: #111827; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sr-picker-meta { font-size: 11px; color: #6b7280; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sr-status-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: #d1d5db; } .sr-status-dot.is-approved { background: #10b981; } .sr-status-dot.is-nomatch { background: #9ca3af; } .sr-status-dot.is-pending { background: #f59e0b; } .sr-status-dot.is-needsreview { background: #3b82f6; } .sr-workspace { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 20px 22px; min-height: 200px; } .sr-workspace-empty { font-size: 13px; color: #9ca3af; padding: 28px 0; text-align: center; } .sr-contractor-head { padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid #e5e7eb; } .sr-contractor-name { font-size: 17px; font-weight: 700; color: #111827; } .sr-contractor-sub { font-size: 12px; color: #6b7280; margin-top: 3px; } .sr-contractor-reg { display: inline-block; font-family: monospace; font-size: 11px; background: #f1f5f9; color: #475569; padding: 2px 6px; border-radius: 4px; margin-right: 6px; } .sr-current-match { background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 8px; padding: 12px 14px; margin-bottom: 16px; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; } .sr-current-match.is-nomatch { background: #f3f4f6; border-color: #d1d5db; } .sr-current-match-body { flex: 1; min-width: 200px; } .sr-current-match-label { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #059669; margin-bottom: 4px; } .sr-current-match.is-nomatch .sr-current-match-label { color: #6b7280; } .sr-current-match-name { font-size: 14px; font-weight: 600; color: #111827; } .sr-current-match-addr { font-size: 12px; color: #4b5563; margin-top: 2px; } .sr-current-match-stat { font-size: 12px; color: #6b7280; margin-top: 6px; } .sr-current-match-actions { display: flex; gap: 6px; } .sr-search-bar { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; } .sr-search-bar input { flex: 1; min-width: 200px; padding: 9px 12px; border: 1px solid #d1d5db; border-radius: 7px; font-size: 13px; outline: none; transition: border-color .15s; } .sr-search-bar input:focus { border-color: #10b981; } .sr-btn { padding: 9px 16px; border-radius: 7px; font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: background .12s, border-color .12s, opacity .12s; white-space: nowrap; } .sr-btn:disabled { opacity: .5; cursor: not-allowed; } .sr-btn-primary { background: #10b981; color: #fff; } .sr-btn-primary:hover:not(:disabled) { background: #059669; } .sr-btn-ghost { background: #f3f4f6; color: #374151; border-color: #e5e7eb; } .sr-btn-ghost:hover:not(:disabled) { background: #e5e7eb; } .sr-btn-danger { background: #fff; color: #b91c1c; border-color: #fecaca; } .sr-btn-danger:hover:not(:disabled) { background: #fef2f2; } .sr-btn-sm { padding: 6px 11px; font-size: 12px; } .sr-candidates { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; } .sr-candidate { border: 1px solid #e5e7eb; border-radius: 10px; padding: 12px 14px; background: #fff; display: flex; gap: 12px; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; } .sr-candidate-body { flex: 1; min-width: 220px; } .sr-candidate-name { font-size: 14px; font-weight: 600; color: #111827; } .sr-candidate-addr { font-size: 12px; color: #4b5563; margin-top: 2px; } .sr-candidate-meta { font-size: 12px; color: #6b7280; margin-top: 4px; } .sr-rating { color: #f59e0b; font-weight: 600; } .sr-signal-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; } .sr-signal { font-size: 10.5px; font-weight: 600; letter-spacing: .02em; padding: 2px 8px; border-radius: 999px; background: #f3f4f6; color: #6b7280; border: 1px solid transparent; } .sr-signal.is-strong { background: #ecfdf5; color: #059669; border-color: #a7f3d0; } .sr-signal.is-soft { background: #fef3c7; color: #92400e; border-color: #fde68a; } .sr-signal.is-weak { background: #fee2e2; color: #991b1b; border-color: #fecaca; } .sr-manual-box { margin-top: 18px; padding-top: 16px; border-top: 1px dashed #e5e7eb; } .sr-hint { font-size: 11px; color: #9ca3af; margin-top: 6px; line-height: 1.5; } .sr-footer-actions { margin-top: 18px; padding-top: 14px; border-top: 1px solid #e5e7eb; display: flex; gap: 8px; flex-wrap: wrap; } /* Mobile: stack picker on top of workspace */ @media (max-width: 860px) { .sr-layout { grid-template-columns: 1fr; } .sr-picker { position: static; } .sr-picker-list { max-height: 280px; } } /* Dark-theme variants — mirrors the patterns other admin panels use */ /* ── Social Review: View Toggle (Matching / Reports) ─────────────────────── */ .sr-view-toggle { display: inline-flex; gap: 2px; padding: 3px; background: #f3f4f6; border: 1px solid #e5e7eb; border-radius: 8px; margin: 0 0 14px 0; } .sr-view-btn { appearance: none; border: 0; background: transparent; color: #4b5563; font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 6px; cursor: pointer; transition: background .15s, color .15s; } .sr-view-btn:hover { color: #111827; } .sr-view-btn.is-active { background: #fff; color: #059669; box-shadow: 0 1px 2px rgba(0,0,0,0.06); } /* ── Social Review: Reports Sub-View ─────────────────────────────────────── */ .sr-reports-head { margin-bottom: 14px; } .sr-reports-title { font-size: 16px; font-weight: 700; color: #111827; } .sr-reports-sub { font-size: 12px; color: #6b7280; margin-top: 3px; } .sr-stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; } .sr-stat-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 14px; display: flex; flex-direction: column; gap: 6px; } .sr-stat-card.is-closed { border-left: 4px solid #ef4444; } .sr-stat-card.is-noreviews{ border-left: 4px solid #f59e0b; } .sr-stat-card.is-nogbp { border-left: 4px solid #9ca3af; } .sr-stat-count { font-size: 26px; font-weight: 700; color: #111827; line-height: 1; } .sr-stat-label { font-size: 12px; font-weight: 600; color: #374151; } .sr-stat-hint { font-size: 11px; color: #6b7280; line-height: 1.4; } .sr-report-section { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; margin-bottom: 12px; overflow: hidden; } .sr-report-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #f9fafb; border-bottom: 1px solid #e5e7eb; } .sr-report-head-title { flex: 1; font-size: 13px; font-weight: 700; color: #111827; display: flex; align-items: center; gap: 8px; } .sr-report-count-pill { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #e5e7eb; color: #374151; } .sr-report-list { max-height: 380px; overflow-y: auto; } .sr-report-empty { padding: 22px 14px; text-align: center; color: #9ca3af; font-size: 12px; } .sr-report-row { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) 110px auto; gap: 10px; align-items: center; padding: 10px 14px; border-bottom: 1px solid #f1f5f9; cursor: pointer; transition: background .12s; } .sr-report-row:last-child { border-bottom: 0; } .sr-report-row:hover { background: #f9fafb; } .sr-report-biz { font-size: 13px; font-weight: 600; color: #111827; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sr-report-reg { display: inline-block; font-family: monospace; font-size: 11px; background: #f1f5f9; color: #475569; padding: 1px 5px; border-radius: 3px; margin-right: 6px; vertical-align: middle; } .sr-report-sub { font-size: 11px; color: #6b7280; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sr-report-contact { font-size: 12px; color: #4b5563; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sr-report-expires { font-size: 11px; color: #6b7280; white-space: nowrap; } .sr-report-expires.is-soon { color: #b45309; font-weight: 600; } .sr-report-arrow { color: #9ca3af; font-size: 14px; line-height: 1; } @media (max-width: 860px) { .sr-stat-grid { grid-template-columns: 1fr; } .sr-report-row { grid-template-columns: 1fr auto; row-gap: 4px; } .sr-report-row .sr-report-contact, .sr-report-row .sr-report-expires { grid-column: 1 / -1; } .sr-report-arrow { display: none; } } /* ── Social Review: Dashboard Strip (always visible) ────────────────────── */ .sr-dashboard { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 14px 16px; margin-bottom: 14px; } .sr-dash-head { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; } .sr-dash-total { display: flex; align-items: baseline; gap: 8px; flex-shrink: 0; } .sr-dash-total-n { font-size: 22px; font-weight: 700; color: #111827; line-height: 1; } .sr-dash-total-lbl { font-size: 12px; color: #6b7280; } .sr-dash-bar { flex: 1; height: 8px; background: #f3f4f6; border-radius: 999px; overflow: hidden; display: flex; min-width: 120px; } .sr-dash-bar-seg { display: block; height: 100%; } .sr-dash-bar-seg.is-matched { background: #10b981; } .sr-dash-bar-seg.is-nogoog { background: #9ca3af; } .sr-dash-grid { display: grid; /* auto-fit so adding/removing tiles doesn't require touching the grid. At normal widths this resolves to 6 cols (matching the 6 current tiles); as viewport narrows they wrap naturally. */ grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; } .sr-dash-tile { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 6px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; } .sr-dash-tile.is-matched { border-top: 3px solid #10b981; } .sr-dash-tile.is-nogoog { border-top: 3px solid #9ca3af; } .sr-dash-tile.is-tbd { border-top: 3px solid #f59e0b; } .sr-dash-tile.is-needsreview { border-top: 3px solid #ef4444; } .sr-dash-tile.is-subset { background: #fff; border-style: dashed; } .sr-dash-tile.is-subset.is-noreviews { border-top: 3px dashed #f59e0b; } .sr-dash-tile.is-subset.is-closed { border-top: 3px dashed #ef4444; } .sr-dash-tile-n { font-size: 18px; font-weight: 700; color: #111827; line-height: 1.1; } .sr-dash-tile-lbl { font-size: 11px; font-weight: 600; color: #374151; line-height: 1.2; } .sr-dash-tile-hint { font-size: 10px; color: #9ca3af; line-height: 1.2; } @media (max-width: 860px) { .sr-dash-head { flex-wrap: wrap; } .sr-dash-bar { min-width: 100%; order: 2; } .sr-dash-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .sr-dash-grid { grid-template-columns: 1fr; } } /* ── Social Review: Batch Auto-Matcher ──────────────────────────────────── */ .sr-batch-intro { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 16px; margin-bottom: 12px; } .sr-batch-title { font-size: 16px; font-weight: 700; color: #111827; } .sr-batch-sub { font-size: 12px; color: #6b7280; margin-top: 4px; line-height: 1.5; } .sr-batch-rules { margin-top: 10px; padding: 10px 12px; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 6px; font-size: 12px; color: #374151; line-height: 1.6; } .sr-batch-rules strong { color: #059669; } .sr-batch-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; } .sr-batch-scope { font-size: 12px; color: #4b5563; background: #f3f4f6; border-radius: 6px; padding: 6px 10px; font-weight: 600; } .sr-batch-scope strong { color: #111827; font-weight: 700; } /* ── Batch filter block ────────────────────────────────────────────────── */ .sr-batch-filter { margin-top: 12px; padding: 12px; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; } .sr-batch-filter[data-disabled="true"] { opacity: 0.6; pointer-events: none; } .sr-batch-filter-title { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #6b7280; margin-bottom: 8px; } .sr-batch-filter-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .sr-batch-filter-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .sr-batch-filter-lbl { font-size: 11px; font-weight: 600; color: #374151; } .sr-batch-filter-input { padding: 7px 10px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 13px; font-family: inherit; color: #111827; background: #fff; width: 100%; box-sizing: border-box; outline: none; } .sr-batch-filter-input:focus { border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37,99,235,.15); } .sr-batch-filter-hint { font-size: 10px; color: #9ca3af; line-height: 1.3; } .sr-batch-scope-warn-row { margin-top: 8px; } .sr-batch-scope-warn { display: inline-block; font-size: 11px; font-weight: 600; color: #92400e; background: #fef3c7; border: 1px solid #fde68a; border-radius: 5px; padding: 4px 8px; } @media (max-width: 700px) { .sr-batch-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ── IA metro ZIP preset chips (shared: batch + upkeep) ────────────────── */ .sr-zip-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; } .sr-zip-preset { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border: 1px solid #d1d5db; border-radius: 999px; background: #fff; color: #374151; font-size: 11px; font-weight: 600; cursor: pointer; transition: background .12s, color .12s, border-color .12s, transform .06s; line-height: 1; font-family: inherit; } .sr-zip-preset:hover { background: #f3f4f6; border-color: #9ca3af; color: #111827; } .sr-zip-preset:active { transform: translateY(1px); } .sr-zip-preset.is-active { background: #2563eb; border-color: #2563eb; color: #fff; } .sr-zip-preset.is-active:hover { background: #1d4ed8; border-color: #1d4ed8; color: #fff; } /* Upkeep scope summary line — lives inside .sr-batch-filter */ .sr-upkeep-scope-line { margin-top: 10px; padding: 8px 10px; background: #eef2ff; border: 1px solid #c7d2fe; border-radius: 6px; font-size: 12px; color: #3730a3; font-weight: 500; } .sr-upkeep-scope-line strong { color: #1e1b4b; font-weight: 700; } /* Upkeep filter is 3 cols wide (no per-batch chunk size), not 4 like Batch. */ .sr-upkeep-filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 700px) { .sr-upkeep-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ── Needs-review triage strip (top of Matching view) ──────────────────── */ #srTriageStrip:empty { display: none; } #srTriageStrip { margin-bottom: 12px; padding: 10px 12px; background: linear-gradient(135deg, #fff1f2 0%, #fef3c7 100%); border: 1px solid #fca5a5; border-radius: 8px; } .sr-triage-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; } .sr-triage-title { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #7f1d1d; font-weight: 600; letter-spacing: 0.01em; } .sr-triage-title strong { color: #991b1b; font-weight: 800; } .sr-triage-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 2px rgba(239,68,68,0.2); } .sr-triage-showall { border: none; background: transparent; color: #b91c1c; font-size: 11px; font-weight: 700; cursor: pointer; padding: 4px 8px; border-radius: 5px; font-family: inherit; } .sr-triage-showall:hover { background: rgba(185,28,28,.08); } .sr-triage-chips { display: flex; flex-wrap: wrap; gap: 6px; } .sr-triage-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; background: #fff; border: 1px solid #fca5a5; border-radius: 6px; font-size: 12px; cursor: pointer; color: #7f1d1d; transition: background .12s, border-color .12s, transform .06s; font-family: inherit; max-width: 260px; } .sr-triage-chip:hover { background: #fff7ed; border-color: #f87171; } .sr-triage-chip:active { transform: translateY(1px); } .sr-triage-chip.is-selected { background: #fee2e2; border-color: #dc2626; color: #7f1d1d; box-shadow: 0 0 0 2px rgba(220,38,38,.15); } .sr-triage-chip-name { font-weight: 600; color: #111827; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sr-triage-chip-reg { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 10px; color: #6b7280; padding: 1px 5px; background: #f3f4f6; border-radius: 4px; } .sr-batch-run { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 16px; } .sr-batch-run-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; gap: 10px; flex-wrap: wrap; } .sr-batch-run-title { font-size: 13px; font-weight: 700; color: #111827; } .sr-batch-progress-bar { height: 10px; background: #f3f4f6; border-radius: 999px; overflow: hidden; margin: 8px 0 12px; } .sr-batch-progress-fill { height: 100%; background: linear-gradient(90deg, #10b981, #34d399); transition: width .3s; } .sr-batch-counters { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 10px; } .sr-batch-counter { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 6px; padding: 8px 10px; text-align: center; } .sr-batch-counter-n { font-size: 18px; font-weight: 700; color: #111827; line-height: 1; } .sr-batch-counter-lbl { font-size: 10px; color: #6b7280; text-transform: uppercase; letter-spacing: .04em; margin-top: 3px; font-weight: 600; } .sr-batch-counter.is-approved .sr-batch-counter-n { color: #059669; } .sr-batch-counter.is-review .sr-batch-counter-n { color: #2563eb; } .sr-batch-counter.is-skipped .sr-batch-counter-n { color: #9ca3af; } .sr-batch-counter.is-error .sr-batch-counter-n { color: #b91c1c; } .sr-batch-log { max-height: 220px; overflow-y: auto; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 6px; padding: 6px 8px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px; line-height: 1.5; color: #374151; } .sr-batch-log-row { padding: 2px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sr-batch-log-row.is-approved { color: #059669; } .sr-batch-log-row.is-review { color: #2563eb; } .sr-batch-log-row.is-skipped { color: #9ca3af; } .sr-batch-log-row.is-error { color: #b91c1c; } .sr-batch-status { font-size: 12px; color: #6b7280; margin-top: 10px; } .sr-batch-status.is-done { color: #059669; font-weight: 600; } .sr-batch-status.is-stopped { color: #b45309; font-weight: 600; } @media (max-width: 720px) { .sr-batch-counters { grid-template-columns: repeat(2, 1fr); } } /* needs_review indicator on the current-match card in the workspace */ .sr-current-match.is-needsreview { background: #eff6ff; border-color: #bfdbfe; } .sr-current-match.is-needsreview .sr-current-match-label { color: #1d4ed8; } /* ── Contractor Card: Google Rating Pill ─────────────────────────────────── */ /* Compact "G 4.2 ★ (37)" badge rendered on result cards and list rows when an admin has approved a Google Business Profile match and the aggregate has been mirrored to publicGoogleProfiles. Reads client-side only — no per-card network call. Clicking opens Google Maps in a new tab (when mapsUri is present); click is isolated from the card's detail-trigger. */ .cg-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; background: rgba(66,133,244,.10); border: 1px solid rgba(66,133,244,.28); border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 1.5; color: var(--text); white-space: nowrap; text-decoration: none; flex-shrink: 0; transition: background-color .12s, border-color .12s; } .cg-pill:hover { background: rgba(66,133,244,.18); border-color: rgba(66,133,244,.45); text-decoration: none; } .cg-pill-static { cursor: default; } .cg-pill-static:hover { background: rgba(66,133,244,.10); border-color: rgba(66,133,244,.28); } .cg-pill-mark { font-family: 'Google Sans', 'Helvetica Neue', Arial, sans-serif; font-weight: 700; color: #4285F4; font-size: 11px; letter-spacing: 0; } .cg-pill-rating { font-weight: 700; color: var(--text); } .cg-pill-star { color: #f59e0b; font-size: 11px; line-height: 1; } .cg-pill-count { color: var(--text-muted); font-weight: 500; } .cg-pill-closed { width: 6px; height: 6px; border-radius: 999px; background: #ef4444; margin-left: 2px; align-self: center; } .cg-pill-closed-state { border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.08); } .cg-pill-closed-state:hover { border-color: rgba(239,68,68,.5); background: rgba(239,68,68,.14); } /* Dark theme — pill uses RGBA already, just tweak muted text contrast. */ /* Inside the list row's rating column, give the pill a little breathing room from the platform stars + score so the two ratings read as distinct. */ .lr-rating .cg-pill { margin-top: 2px; } /* Mobile: keep pill from overflowing tight card layouts. */ @media (max-width: 600px) { .cg-pill { font-size: 10px; padding: 1px 6px; gap: 3px; } .cg-pill-mark, .cg-pill-star { font-size: 10px; } } /* ── Contractor Card: Google Reviews Section ─────────────────────────────── */ .gr-section-title { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .gr-google-mark { font-family: 'Google Sans', 'Helvetica Neue', Arial, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0; line-height: 1; } .gr-status-banner { display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px; border-radius: 8px; margin-bottom: 12px; line-height: 1.4; } .gr-status-banner svg { margin-top: 2px; flex-shrink: 0; } .gr-status-closed { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; } .gr-status-temp { background: #fef3c7; border: 1px solid #fde68a; color: #92400e; } .gr-status-title { font-size: 13px; font-weight: 700; } .gr-status-sub { font-size: 12px; font-weight: 500; margin-top: 3px; opacity: .85; } .gr-aggregate { display: flex; align-items: center; gap: 12px; padding: 10px 0 14px; margin-bottom: 10px; border-bottom: 1px solid #e5e7eb; flex-wrap: wrap; } .gr-aggregate-score { font-size: 28px; font-weight: 700; color: #111827; line-height: 1; } .gr-aggregate-stars { line-height: 1; } .gr-aggregate-count { font-size: 12px; color: #6b7280; } .gr-star { font-size: 15px; color: #d1d5db; line-height: 1; } .gr-star.is-filled { color: #f59e0b; } .gr-reviews-list { display: flex; flex-direction: column; gap: 14px; } .gr-review { padding: 12px 14px; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; } .gr-review-head { display: flex; gap: 10px; align-items: center; } .gr-review-photo { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; object-fit: cover; background: #e5e7eb; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; color: #4b5563; } .gr-review-photo-fallback { background: #ddd6fe; color: #5b21b6; } .gr-review-meta { flex: 1; min-width: 0; } .gr-review-author { font-size: 13px; font-weight: 600; color: #111827; } .gr-review-stars { display: flex; align-items: center; gap: 8px; margin-top: 2px; } .gr-review-stars .gr-star { font-size: 12px; } .gr-review-time { font-size: 11px; color: #9ca3af; } .gr-review-text { font-size: 13px; color: #374151; line-height: 1.55; margin: 8px 0 0; white-space: normal; word-break: break-word; } .gr-review-text + .gr-review-text { margin-top: 6px; } .gr-empty { font-size: 12px; color: var(--text-faint, #9ca3af); padding: 6px 0 10px; } /* Shown after the aggregate rating when we have a match + score but the monthly review-text sweep hasn't populated individual reviews yet. */ .gr-pending-note { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #6b7280; background: #f9fafb; border: 1px dashed #e5e7eb; border-radius: 8px; padding: 10px 12px; margin-top: 2px; line-height: 1.45; } .gr-pending-note::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: #9ca3af; flex: 0 0 auto; } .gr-footer { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #e5e7eb; flex-wrap: wrap; } .gr-view-all { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: #4285F4; text-decoration: none; } .gr-view-all:hover { text-decoration: underline; } .gr-footer-note { font-size: 11px; color: #9ca3af; line-height: 1.5; } /* Mobile: tighten spacing and stack the aggregate line gracefully */ @media (max-width: 600px) { .gr-aggregate { gap: 10px; padding-bottom: 12px; } .gr-aggregate-score { font-size: 24px; } .gr-review { padding: 10px 12px; } .gr-footer { flex-direction: column; align-items: flex-start; } } /* Dark theme */ /* ── Admin: User Accounts Panel ──────────────────────────────────────────── */ .admin-users-count { font-size: 13px; color: #6b7280; font-weight: 500; align-self: flex-end; } .admin-search-wrap { display: flex; align-items: center; gap: 8px; background: #fff; border: 1.5px solid #e5e7eb; border-radius: 9px; padding: 9px 14px; margin-bottom: 24px; max-width: 420px; } .admin-search-wrap svg { color: #9ca3af; flex-shrink: 0; } .admin-search-input { border: none; outline: none; background: transparent; font-size: 14px; color: #111827; width: 100%; } .admin-search-input::placeholder { color: #9ca3af; } .admin-users-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; } /* User Card */ .admin-user-card { background: #fff; border: 1.5px solid #e5e7eb; border-radius: 14px; padding: 20px; display: flex; flex-direction: column; gap: 12px; transition: box-shadow .15s, border-color .15s; } .admin-user-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); border-color: #d1d5db; } .admin-user-card-top { display: flex; align-items: center; gap: 12px; } .admin-user-card-avatar { width: 44px; height: 44px; border-radius: 50%; background: #10b981; color: #fff; font-size: 16px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; } .admin-user-card-avatar img { width: 100%; height: 100%; object-fit: cover; } .admin-user-card-name { font-size: 15px; font-weight: 700; color: #111827; line-height: 1.2; } .admin-user-card-biz { font-size: 12px; color: #6b7280; margin-top: 2px; } .admin-user-card-details { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: #374151; } .admin-user-card-detail-row { display: flex; align-items: center; gap: 6px; color: #6b7280; } .admin-user-card-detail-row svg { flex-shrink: 0; color: #9ca3af; } .admin-user-card-detail-row span { color: #374151; } .admin-user-card-dates { display: flex; gap: 12px; padding-top: 8px; border-top: 1px solid #f3f4f6; font-size: 11.5px; color: #9ca3af; } .admin-user-card-dates strong { color: #6b7280; } .admin-user-card-footer { padding-top: 4px; } .admin-switch-btn { width: 100%; padding: 9px 0; border-radius: 8px; border: 1.5px solid #10b981; background: transparent; color: #10b981; font-size: 13px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; transition: background .15s, color .15s; } .admin-switch-btn:hover { background: #10b981; color: #fff; } /* Admin User Detail Modal — force light theme (overrides dark CSS vars) */ #adminUserDetailModal.modal-overlay { background: rgba(0,0,0,.5); } #adminUserDetailModal .modal { background: #ffffff; border-color: #e5e7eb; color: #111827; width: 520px; max-width: 95vw; } #adminUserDetailModal .modal-header { border-bottom-color: #f3f4f6; } #adminUserDetailModal .modal-close { color: #9ca3af; } #adminUserDetailModal .modal-close:hover { background: #f3f4f6; color: #374151; } #adminUserDetailModal .modal-footer { border-top-color: #f3f4f6; } .admin-user-detail-modal { width: 520px; max-width: 95vw; } .admin-user-detail-header { display: flex; align-items: center; gap: 14px; flex: 1; } .admin-user-detail-avatar { width: 54px; height: 54px; border-radius: 50%; background: #10b981; color: #fff; font-size: 20px; font-weight: 700; display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; } .admin-user-detail-avatar img { width: 100%; height: 100%; object-fit: cover; } .admin-user-detail-name { font-size: 17px; font-weight: 700; color: #111827; } .admin-user-detail-uid { font-size: 11px; color: #9ca3af; margin-top: 2px; font-family: monospace; } .admin-user-detail-body { display: flex; flex-direction: column; gap: 0; padding: 0 24px 8px; } .aud-section { padding: 16px 0; border-bottom: 1px solid #f3f4f6; } .aud-section:last-child { border-bottom: none; } .aud-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #9ca3af; margin-bottom: 10px; } .aud-row { display: flex; align-items: flex-start; gap: 12px; padding: 4px 0; } .aud-label { font-size: 13px; color: #6b7280; min-width: 140px; flex-shrink: 0; } .aud-value { font-size: 13px; color: #111827; font-weight: 500; word-break: break-all; } .aud-value a { color: #10b981; text-decoration: none; font-weight: 600; } .aud-value a:hover { text-decoration: underline; } .aud-empty { color: #d1d5db; font-weight: 400; } .admin-users-empty { grid-column: 1/-1; text-align: center; padding: 60px 20px; color: #9ca3af; font-size: 14px; } .admin-users-empty svg { margin-bottom: 12px; opacity: .4; } @media (max-width: 900px) { .admin-users-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .admin-users-grid { grid-template-columns: 1fr; } .admin-user-detail-modal { width: 95vw; } } /* ── Admin: User View Panel ──────────────────────────────────────────────────── */ .auv-back-btn { display: flex; align-items: center; gap: 6px; background: none; border: 1.5px solid #e5e7eb; border-radius: 8px; padding: 7px 14px; font-size: 13px; font-weight: 600; color: #374151; cursor: pointer; transition: all .15s; } .auv-back-btn:hover { background: #f3f4f6; border-color: #d1d5db; } .auv-admin-badge { font-size: 11.5px; font-weight: 600; color: #f59e0b; background: rgba(245,158,11,.1); border: 1px solid rgba(245,158,11,.3); border-radius: 20px; padding: 4px 12px; } .auv-profile-header { display: flex; align-items: center; gap: 20px; background: #fff; border: 1.5px solid #e5e7eb; border-radius: 14px; padding: 24px; margin-bottom: 20px; } .auv-avatar { width: 72px; height: 72px; border-radius: 50%; background: #10b981; color: #fff; font-size: 26px; font-weight: 700; display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; } .auv-avatar img { width: 100%; height: 100%; object-fit: cover; } .auv-name { font-size: 22px; font-weight: 800; color: #111827; line-height: 1.2; } .auv-email { font-size: 13px; color: #6b7280; margin-top: 3px; } .auv-meta-row { display: flex; gap: 16px; margin-top: 8px; flex-wrap: wrap; } .auv-meta-item { font-size: 12px; color: #9ca3af; } .auv-meta-item strong { color: #6b7280; } .auv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; } .auv-card { background: #fff; border: 1.5px solid #e5e7eb; border-radius: 14px; padding: 20px; } .auv-card-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #9ca3af; margin-bottom: 14px; } .auv-row { display: flex; align-items: flex-start; gap: 10px; padding: 5px 0; border-bottom: 1px solid #f9fafb; } .auv-row:last-child { border-bottom: none; } .auv-label { font-size: 12.5px; color: #9ca3af; min-width: 120px; flex-shrink: 0; } .auv-val { font-size: 13px; color: #111827; font-weight: 500; word-break: break-word; } .auv-val a { color: #10b981; text-decoration: none; font-weight: 600; } .auv-val a:hover { text-decoration: underline; } .auv-val.muted { color: #d1d5db; font-weight: 400; } @media (max-width: 900px) { .auv-grid { grid-template-columns: 1fr; } } /* Danger zone (suspend) */ .auv-danger-zone { margin-top: 24px; border: 1.5px solid #fee2e2; border-radius: 14px; padding: 20px 24px; background: #fff5f5; } .auv-danger-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #ef4444; margin-bottom: 12px; } .auv-suspend-btn { padding: 9px 20px; border-radius: 8px; border: 1.5px solid #ef4444; background: transparent; color: #ef4444; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s, color .15s; } .auv-suspend-btn:hover { background: #ef4444; color: #fff; } .auv-suspend-btn.is-suspended { border-color: #10b981; color: #10b981; } .auv-suspend-btn.is-suspended:hover { background: #10b981; color: #fff; } .auv-danger-hint { font-size: 12px; color: #9ca3af; margin-top: 10px; line-height: 1.5; } /* ── Feature Access card ─────────────────────────────────────────────────────── */ .auv-card-full { grid-column: 1 / -1; } .auv-features-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; } .auv-features-actions { display: flex; gap: 6px; flex-wrap: wrap; } .auv-features-hint { font-size: 12px; color: var(--text-muted); line-height: 1.5; margin: 0 0 4px; } /* Outer container — simple block; no grid needed here */ .auv-features-grid { display: flex; flex-direction: column; } /* One group per section */ .auv-feat-group { padding: 12px 0 4px; border-top: 1px solid var(--border-light); } .auv-feat-group:first-child { border-top: none; padding-top: 4px; } .auv-feat-section-label { font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; } /* Items within a section — flex-wrap so they flow across columns */ .auv-feat-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 2px 0; } /* Single feature item: toggle first, then label — keeps them visually tight */ .auv-feat-item { display: flex; align-items: center; justify-content: flex-start; gap: 8px; padding: 7px 20px 7px 0; border-bottom: 1px solid var(--border-light); min-width: 0; } .auv-feat-item:last-child { border-bottom: none; } .auv-feat-label { font-size: 13px; color: var(--text); font-weight: 500; white-space: nowrap; } /* Toggle switch */ .auv-feat-toggle { position: relative; flex-shrink: 0; width: 36px; height: 20px; } .auv-feat-chk { opacity: 0; width: 0; height: 0; position: absolute; } .auv-feat-slider { position: absolute; inset: 0; border-radius: 20px; background: #d1d5db; cursor: pointer; transition: background .2s; } .auv-feat-slider::before { content: ''; position: absolute; width: 14px; height: 14px; border-radius: 50%; background: #fff; left: 3px; top: 3px; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.25); } .auv-feat-chk:checked + .auv-feat-slider { background: var(--primary); } .auv-feat-chk:checked + .auv-feat-slider::before { transform: translateX(16px); } /* ── Plan Tiers panel ────────────────────────────────────────────────────────── */ .pt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; margin-bottom: 24px; } .pt-card { background: #fff; border: 1.5px solid #e5e7eb; border-radius: 14px; overflow: hidden; box-shadow: 0 1px 6px rgba(0,0,0,.05); transition: box-shadow .15s; } .pt-card:hover { box-shadow: 0 3px 14px rgba(0,0,0,.08); } .pt-card-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 18px 20px 14px; border-bottom: 1px solid #f3f4f6; } .pt-tier-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; } .pt-tier-name { flex: 1; font-size: 15px; font-weight: 700; color: #111827; } .pt-tier-name-input { flex: 1; font-size: 14px; font-weight: 600; color: #111827; border: 1.5px solid #d1d5db; border-radius: 6px; padding: 4px 8px; background: #fff; outline: none; display: none; } .pt-tier-name-input:focus { border-color: #6366f1; } .pt-edit-btn { font-size: 11px; font-weight: 600; color: #9ca3af; background: none; border: none; cursor: pointer; padding: 3px 6px; border-radius: 5px; transition: background .12s, color .12s; } .pt-edit-btn:hover { background: #f3f4f6; color: #374151; } .pt-default-badge { font-size: 10px; font-weight: 700; background: #f3f4f6; color: #6b7280; border-radius: 4px; padding: 2px 6px; text-transform: uppercase; letter-spacing: .04em; } .pt-features-list { padding: 12px 20px 16px; display: flex; flex-direction: column; gap: 2px; } .pt-feature-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid #f9fafb; } .pt-feature-row:last-child { border-bottom: none; } .pt-feature-info { display: flex; align-items: center; gap: 8px; } .pt-feature-icon { font-size: 14px; line-height: 1; } .pt-feature-label { font-size: 13px; color: #374151; font-weight: 500; } /* ── Plan Tiers — Nav Visibility Defaults collapsible section ────────────────── */ .pt-nav-features-section { border-top: 1px solid #f3f4f6; } .pt-nav-features-toggle-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 20px; background: #fafafa; border: none; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #6b7280; cursor: pointer; text-align: left; transition: background .12s, color .12s; } .pt-nav-features-toggle-btn:hover { background: #f3f4f6; color: #374151; } .pt-nav-chevron { font-size: 11px; opacity: .6; } .pt-nav-features-body { padding: 4px 20px 16px; } .pt-nav-features-hint { font-size: 11.5px; color: #9ca3af; line-height: 1.5; margin: 0 0 10px; } .pt-nav-features-grid { display: flex; flex-direction: column; gap: 0; } .pt-nav-section-label { font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #9ca3af; padding: 10px 0 4px; border-top: 1px solid #f3f4f6; margin-top: 4px; } .pt-nav-section-label:first-child { border-top: none; margin-top: 0; padding-top: 2px; } .pt-add-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 18px; background: #fff; border: 1.5px dashed #d1d5db; border-radius: 10px; font-size: 13px; font-weight: 600; color: #6b7280; cursor: pointer; transition: all .15s; } .pt-add-btn:hover { border-color: #6366f1; color: #6366f1; background: rgba(99,102,241,.04); } /* ── Stripe Plans sub-section (adminPlanTiersPanel) ──────────────────────────── */ .sp-section-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; } .sp-divider { border: none; border-top: 1.5px solid #f3f4f6; margin: 32px 0 28px; } /* Add-plan inline form */ .sp-add-form { background: #f8fafc; border: 1.5px solid #e5e7eb; border-radius: 12px; padding: 20px 20px 16px; margin-bottom: 20px; } .sp-form-grid { display: flex; flex-wrap: wrap; gap: 14px 16px; margin-bottom: 16px; } .sp-form-field { display: flex; flex-direction: column; gap: 5px; min-width: 130px; } .sp-form-field--wide { min-width: 260px; flex: 1; } .sp-form-label { font-size: 12px; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: .04em; } .sp-hint { font-weight: 400; text-transform: none; letter-spacing: 0; color: #9ca3af; } .sp-input { height: 34px; padding: 0 10px; border: 1.5px solid #d1d5db; border-radius: 8px; font-size: 13px; color: #111827; background: #fff; outline: none; transition: border-color .15s; width: 100%; box-sizing: border-box; } .sp-input:focus { border-color: #6366f1; } .sp-mono { font-family: 'Fira Mono', 'Courier New', monospace; font-size: 11.5px; letter-spacing: .02em; } .sp-select { height: 34px; padding: 0 8px; border: 1.5px solid #d1d5db; border-radius: 8px; font-size: 13px; color: #111827; background: #fff; outline: none; cursor: pointer; width: 100%; box-sizing: border-box; } .sp-select:focus { border-color: #6366f1; } .sp-form-actions { display: flex; gap: 10px; align-items: center; } .sp-submit-btn { height: 34px; padding: 0 18px; background: #6366f1; color: #fff; border: none; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s; } .sp-submit-btn:hover { background: #4f46e5; } .sp-submit-btn:disabled { opacity: .55; cursor: default; } .sp-cancel-btn { height: 34px; padding: 0 14px; background: none; border: 1.5px solid #e5e7eb; border-radius: 8px; font-size: 13px; font-weight: 600; color: #6b7280; cursor: pointer; transition: border-color .15s, color .15s; } .sp-cancel-btn:hover { border-color: #d1d5db; color: #374151; } /* Plan cards grid — matches .pt-grid dimensions */ #stripePlansGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; margin-bottom: 8px; } .sp-card { background: #fff; border: 1.5px solid #e5e7eb; border-radius: 14px; overflow: hidden; box-shadow: 0 1px 6px rgba(0,0,0,.05); transition: box-shadow .15s; } .sp-card:hover { box-shadow: 0 3px 14px rgba(0,0,0,.08); } /* Card header */ .sp-card-header { display: flex; align-items: center; gap: 8px; padding: 16px 18px 12px; border-bottom: 1px solid #f3f4f6; } .sp-slug-code { flex: 1; font-family: 'Fira Mono', 'Courier New', monospace; font-size: 13px; font-weight: 700; color: #374151; } .sp-active-badge { font-size: 10px; font-weight: 700; border-radius: 20px; padding: 2px 8px; letter-spacing: .03em; text-transform: uppercase; } .sp-active-badge.is-active { background: #d1fae5; color: #065f46; } .sp-active-badge.is-inactive { background: #f3f4f6; color: #9ca3af; } /* Card body — field rows */ .sp-card-body { padding: 14px 18px 12px; display: flex; flex-direction: column; gap: 10px; } .sp-field { display: flex; flex-direction: column; gap: 4px; } .sp-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .sp-field-label { font-size: 11px; font-weight: 600; color: #9ca3af; text-transform: uppercase; letter-spacing: .04em; } /* Card footer */ .sp-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 18px 14px; border-top: 1px solid #f9fafb; } .sp-active-label { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: #6b7280; cursor: pointer; } .sp-footer-actions { display: flex; gap: 8px; } .sp-save-row-btn { height: 30px; padding: 0 14px; background: #10b981; color: #fff; border: none; border-radius: 7px; font-size: 12px; font-weight: 600; cursor: pointer; transition: background .15s; } .sp-save-row-btn:hover { background: #059669; } .sp-save-row-btn:disabled { opacity: .55; cursor: default; } .sp-delete-btn { height: 30px; padding: 0 12px; background: none; border: 1.5px solid #fca5a5; border-radius: 7px; font-size: 12px; font-weight: 600; color: #ef4444; cursor: pointer; transition: background .15s, border-color .15s; } .sp-delete-btn:hover { background: #fef2f2; border-color: #ef4444; } .sp-empty { padding: 4px 0 16px; font-size: 13px; color: #9ca3af; } /* ── Payment gating toggle (reused for tier feature switches) ────────────────── */ /* ── Payment gating toggle (admin settings) ─────────────────────────────────── */ .pg-toggle-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 10px; padding: 16px 18px; margin-bottom: 12px; } .pg-toggle-info { flex: 1; } .pg-toggle-label { font-size: 14px; font-weight: 600; color: #111827; margin-bottom: 4px; } .pg-toggle-hint { font-size: 12.5px; color: #6b7280; line-height: 1.5; } .pg-plan-row { padding: 0 4px 4px; } /* Toggle switch */ .pg-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; margin-top: 2px; } .pg-switch input { opacity: 0; width: 0; height: 0; } .pg-slider { position: absolute; inset: 0; cursor: pointer; background: #d1d5db; border-radius: 24px; transition: background .2s; } .pg-slider::before { content: ''; position: absolute; width: 18px; height: 18px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: transform .2s; box-shadow: 0 1px 4px rgba(0,0,0,.2); } .pg-switch input:checked + .pg-slider { background: #6366f1; } .pg-switch input:checked + .pg-slider::before { transform: translateX(20px); } /* Stripe pills on user cards */ .stripe-pill { font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 20px; white-space: nowrap; flex-shrink: 0; } .stripe-active { background: rgba(16,185,129,.12); color: #059669; } .stripe-trial { background: rgba(59,130,246,.12); color: #2563eb; } .stripe-pastdue { background: rgba(239,68,68,.12); color: #dc2626; } .stripe-canceled { background: rgba(107,114,128,.12); color: #6b7280; } .stripe-none { background: rgba(156,163,175,.1); color: #9ca3af; } /* Suspended state on card */ .admin-user-card.is-suspended { border-color: #fca5a5; background: #fff5f5; } .susp-badge { font-size: 10px; font-weight: 700; background: #ef4444; color: #fff; border-radius: 4px; padding: 1px 5px; margin-left: 4px; vertical-align: middle; } /* Suspend button on card */ .admin-user-card-footer { display: flex; gap: 8px; padding-top: 4px; } .admin-suspend-btn { flex: 1; padding: 8px 0; border-radius: 8px; border: 1.5px solid #e5e7eb; background: transparent; color: #9ca3af; font-size: 12px; font-weight: 600; cursor: pointer; transition: all .15s; } .admin-suspend-btn:hover { border-color: #ef4444; color: #ef4444; } .admin-suspend-btn.is-suspended { border-color: #10b981; color: #10b981; } .admin-suspend-btn.is-suspended:hover { background: #10b981; color: #fff; } .admin-switch-btn { flex: 2; } /* ── Notification Panel ──────────────────────────────────────────────────────── */ .notif-panel { position: fixed; top: var(--header-h); right: 0; width: 300px; max-height: calc(100vh - var(--header-h)); background: var(--surface); border-left: 1px solid var(--border); border-bottom: 1px solid var(--border); z-index: 200; display: flex; flex-direction: column; box-shadow: -4px 4px 20px rgba(0,0,0,.3); } .notif-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .notif-panel-title { font-size: 14px; font-weight: 700; color: var(--text); } .notif-clear-btn { background: none; border: none; font-size: 12px; color: var(--primary); cursor: pointer; font-weight: 600; padding: 0; } .notif-clear-btn:hover { text-decoration: underline; } .notif-list { overflow-y: auto; flex: 1; } .notif-item { display: flex; align-items: flex-start; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background .15s; } .notif-item:last-child { border-bottom: none; } .notif-item:hover { background: var(--surface2); } .notif-item.unread { background: rgba(16,185,129,.05); } .notif-item.unread:hover { background: rgba(16,185,129,.1); } .notif-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); flex-shrink: 0; margin-top: 5px; } .notif-dot.read { background: transparent; } .notif-body { flex: 1; min-width: 0; } .notif-item-title { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 2px; line-height: 1.35; } .notif-item-body { font-size: 12px; color: var(--text-muted); line-height: 1.4; } .notif-item-time { font-size: 11px; color: var(--text-faint); margin-top: 4px; } .notif-empty { padding: 40px 16px; text-align: center; font-size: 13px; color: var(--text-muted); } /* ── Compose-bar attach/camera icon buttons (Messenger-style, our primary) ── */ /* The existing .group-attach-btn id (#groupAttachBtn) is reused as the photo-library icon; .compose-icon-btn is the shared base. */ .compose-icon-btn { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; border-radius: 50%; color: var(--primary); cursor: pointer; flex-shrink: 0; padding: 0; transition: background .12s, color .12s; } .compose-icon-btn:hover { background: var(--primary-dim); } .compose-icon-btn:active { transform: scale(0.94); } .compose-icon-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; } /* Camera button: only useful on devices with a camera. Desktop browsers fall back to a file picker, which is redundant with the photo-library button next to it, so hide on non-touch/non-coarse pointers. */ @media (hover: hover) and (pointer: fine) { .compose-camera-btn { display: none; } } /* Legacy class (kept for any references) — points to the same base. */ .group-attach-btn { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; border-radius: 50%; color: var(--primary); cursor: pointer; flex-shrink: 0; padding: 0; transition: background .12s; } .group-attach-btn:hover { background: var(--primary-dim); } .group-attach-preview-wrap { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 14px 4px; } .group-attach-preview { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); max-width: 100%; } .group-attach-thumb { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; flex-shrink: 0; } .group-attach-icon { color: var(--danger); flex-shrink: 0; } .group-attach-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .group-attach-name { font-size: 12px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .group-attach-size { font-size: 10px; color: var(--text-muted); } .group-attach-remove { background: none; border: none; color: var(--text-faint); font-size: 16px; line-height: 1; cursor: pointer; padding: 0 2px; flex-shrink: 0; } .group-attach-remove:hover { color: var(--danger); } .group-upload-progress { display: flex; align-items: center; gap: 10px; padding: 6px 14px; } .group-upload-bar { flex: 1; height: 4px; background: var(--surface2); border-radius: 2px; overflow: hidden; } .group-upload-fill { height: 100%; background: var(--primary); border-radius: 2px; transition: width .2s; } .group-upload-label { font-size: 11px; color: var(--text-muted); white-space: nowrap; } /* Group message file rendering */ .group-file-attachments { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; } .group-file-img-wrap { position: relative; display: inline-block; } .group-file-img { max-width: 220px; max-height: 180px; border-radius: 8px; display: block; cursor: pointer; object-fit: cover; border: 1px solid rgba(255,255,255,.1); } .group-file-chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 10px; background: rgba(0,0,0,.2); border: 1px solid rgba(255,255,255,.12); border-radius: 8px; text-decoration: none; color: inherit; max-width: 220px; } .group-file-chip-name { font-size: 11px; font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .group-file-chip-size { font-size: 10px; opacity: .7; white-space: nowrap; } .group-file-pin-btn { background: none; border: none; cursor: pointer; padding: 3px; border-radius: 3px; opacity: .55; color: inherit; transition: opacity .15s; flex-shrink: 0; } .group-file-pin-btn:hover { opacity: 1; } .group-file-pin-btn.pinned { opacity: 1; color: var(--gold); } /* Pinned files in context panel */ .ctx-pinned-list { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; } .ctx-pinned-empty { font-size: 12px; color: var(--text-faint); padding: 4px 0; } .ctx-pinned-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: var(--surface2); border-radius: var(--radius-sm); border: 1px solid var(--border); } .ctx-pinned-thumb { width: 36px; height: 36px; object-fit: cover; border-radius: 4px; flex-shrink: 0; } .ctx-pinned-icon { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: rgba(239,68,68,.1); border-radius: 4px; color: var(--danger); flex-shrink: 0; } .ctx-pinned-info { flex: 1; min-width: 0; } .ctx-pinned-name { font-size: 11px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ctx-pinned-meta { font-size: 10px; color: var(--text-faint); margin-top: 1px; } .ctx-pinned-actions { display: flex; gap: 3px; flex-shrink: 0; } .ctx-pinned-open { color: var(--accent); } .ctx-pinned-unpin { color: var(--text-faint); } .ctx-pinned-open:hover { color: var(--primary); } .ctx-pinned-unpin:hover { color: var(--danger); } /* ── Theme Toggle Button ─────────────────────────────────────────────────────── */ .biz-tooltip::after { background: #1e293b; color: #f1f5f9; } .result-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.10); } .notif-panel { box-shadow: -4px 4px 20px rgba(0,0,0,.12); } .auth-error { background: rgba(220,38,38,.08); color: #b91c1c; } .auth-success { color: #065f46; } .mobile-extra-danger { color: #dc2626 !important; } .mobile-extra-danger:hover { background: rgba(220,38,38,.08) !important; } .ctx-pinned-icon { background: rgba(220,38,38,.08); } .group-file-chip { background: rgba(220,38,38,.08); } .sidebar-overlay { background: rgba(0,0,0,.35); } .admin-panel { background: #f4f5f7; } .admin-card { background: #ffffff; border-color: #e5e7eb; } .view-login { background: radial-gradient(ellipse at 60% 20%, rgba(5,150,105,.07) 0%, transparent 60%), radial-gradient(ellipse at 20% 80%, rgba(37,99,235,.05) 0%, transparent 50%), #f4f5f7; } /* ── Apply Member Modal — service chips ────────────────────────────────────── */ .am-service-chips { display: flex; flex-wrap: wrap; gap: 6px; } .am-service-chip { padding: 5px 12px; border-radius: 20px; font-size: 12px; cursor: pointer; border: 1px solid var(--border); background: var(--surface2); color: var(--text-muted); transition: background 0.15s, color 0.15s, border-color 0.15s; } .am-service-chip:hover { border-color: var(--primary); color: var(--text); } .am-service-chip.selected { background: var(--primary); border-color: var(--primary); color: #fff; } /* ── Admin app card — service tags ─────────────────────────────────────────── */ .app-other-services { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; } .app-service-tag { font-size: 11px; padding: 2px 8px; border-radius: 10px; background: var(--primary-dim); color: var(--primary); border: 1px solid var(--primary); } /* ── Member User Applications cards (admin panel) ──────────────────────────── */ .mua-card { background: #ffffff; border: 1.5px solid #e5e7eb; border-radius: 12px; padding: 20px 22px; margin-bottom: 12px; transition: box-shadow .15s; } .mua-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,.07); } .mua-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .mua-biz-name { font-size: 15px; font-weight: 700; color: #111827; } .mua-person { font-size: 13px; color: #6b7280; margin-top: 3px; } .mua-status { flex-shrink: 0; font-size: 11px; font-weight: 700; padding: 3px 11px; border-radius: 20px; text-transform: uppercase; letter-spacing: .04em; } .mua-status-pending { background: rgba(245,158,11,.12); color: #d97706; } .mua-status-approved { background: rgba(16,185,129,.12); color: #059669; } .mua-status-rejected { background: rgba(239,68,68,.1); color: #dc2626; } .mua-contact-row { display: flex; gap: 20px; flex-wrap: wrap; padding: 10px 14px; background: #f9fafb; border-radius: 8px; margin-bottom: 14px; } .mua-contact-item { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #374151; } .mua-details-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 20px; margin-bottom: 12px; } .mua-detail-label { font-size: 10.5px; font-weight: 700; color: #9ca3af; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 2px; } .mua-detail-val { font-size: 13px; color: #374151; } .mua-notes { font-size: 13px; color: #374151; background: #f9fafb; border-left: 3px solid #d1d5db; border-radius: 0 6px 6px 0; padding: 8px 12px; margin-bottom: 12px; line-height: 1.6; } .mua-service-tag { display: inline-block; font-size: 11px; padding: 2px 9px; border-radius: 10px; background: #ecfdf5; color: #059669; border: 1px solid #a7f3d0; margin: 2px 2px 0 0; } .mua-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid #f3f4f6; } .mua-submitted { font-size: 11.5px; color: #9ca3af; } .mua-action-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1; justify-content: flex-end; } .mua-btn { padding: 6px 14px; border-radius: 7px; font-size: 12px; font-weight: 600; cursor: pointer; border: 1.5px solid transparent; transition: all .15s; white-space: nowrap; } .mua-btn-approve { background: #10b981; color: #fff; border-color: #10b981; } .mua-btn-approve:hover { background: #059669; border-color: #059669; } .mua-btn-reject { background: transparent; color: #dc2626; border-color: #fca5a5; } .mua-btn-reject:hover { background: rgba(239,68,68,.08); border-color: #dc2626; } .mua-btn-reopen { background: transparent; color: #6b7280; border-color: #e5e7eb; } .mua-btn-reopen:hover { border-color: #9ca3af; color: #374151; } .mua-btn-delete { background: transparent; color: #9ca3af; border-color: #e5e7eb; } .mua-btn-delete:hover { color: #dc2626; border-color: #fca5a5; } /* ── Light-theme stat row overrides for Apps & Temp panels ─────────────────── */ #adminAppsPanel .admin-stats-row, #adminTempUsersPanel .admin-stats-row, #adminReleasesPanel .admin-stats-row { background: #f9fafb; border: 1px solid #e5e7eb; border-bottom: 1px solid #e5e7eb; border-radius: 10px; margin-bottom: 16px; } #adminAppsPanel .admin-stat-label, #adminTempUsersPanel .admin-stat-label, #adminReleasesPanel .admin-stat-label { color: #9ca3af; } #adminAppsPanel .admin-stat.total .admin-stat-num, #adminTempUsersPanel .admin-stat.total .admin-stat-num, #adminReleasesPanel .admin-stat.total .admin-stat-num { color: #111827; } #adminAppsPanel .admin-stat.pending .admin-stat-num, #adminTempUsersPanel .admin-stat.pending .admin-stat-num, #adminReleasesPanel .admin-stat.pending .admin-stat-num { color: #d97706; } #adminAppsPanel .admin-stat.approved .admin-stat-num, #adminTempUsersPanel .admin-stat.approved .admin-stat-num, #adminReleasesPanel .admin-stat.approved .admin-stat-num { color: #059669; } #adminAppsPanel .admin-stat.rejected .admin-stat-num, #adminTempUsersPanel .admin-stat.rejected .admin-stat-num, #adminReleasesPanel .admin-stat.rejected .admin-stat-num { color: #dc2626; } /* ── Pagination controls ─────────────────────────────────────────────────────── */ .admin-pagination { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 16px 20px 4px; } .admin-page-btn { padding: 6px 16px; border-radius: 7px; border: 1.5px solid #d1d5db; background: #fff; color: #374151; font-size: 13px; font-weight: 500; cursor: pointer; transition: all .15s; } .admin-page-btn:hover:not(:disabled) { background: #f3f4f6; border-color: #9ca3af; } .admin-page-btn:disabled { opacity: .4; cursor: not-allowed; } .admin-page-info { font-size: 13px; color: #6b7280; } #adminAppsBody { display: flex; flex-direction: column; padding: 20px; } /* ── Temp Member Badges (profile cards & list rows) ─────────────────────────── */ .temp-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 20px; font-size: 11px; font-weight: 700; background: rgba(239,68,68,.12); color: #dc2626; border: 1px solid rgba(239,68,68,.3); letter-spacing: .03em; } .temp-badge-sm { display: inline-flex; align-items: center; padding: 1px 6px; border-radius: 10px; font-size: 10px; font-weight: 700; background: rgba(239,68,68,.12); color: #dc2626; border: 1px solid rgba(239,68,68,.25); vertical-align: middle; margin-left: 4px; } /* ── Temp Users Panel — status badges ───────────────────────────────────────── */ .temp-status-badge { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px; text-transform: uppercase; letter-spacing: .04em; } .temp-status-active { background: rgba(245,158,11,.12); color: #d97706; } .temp-status-expired { background: rgba(239,68,68,.1); color: #dc2626; } .temp-status-converted { background: rgba(16,185,129,.12); color: #059669; } /* ── Temp Users Panel — progress bar ────────────────────────────────────────── */ .temp-progress-wrap { height: 6px; background: #f3f4f6; border-radius: 6px; overflow: hidden; margin-bottom: 4px; } .temp-progress-bar { height: 100%; border-radius: 6px; transition: width .3s; } .temp-progress-label { font-size: 11.5px; color: #9ca3af; margin-bottom: 12px; } #adminTempBody { display: flex; flex-direction: column; padding: 20px; } /* ── Insurance verification status badges (own profile card) ───────────────── */ .ins-verif-badge-verified { background: rgba(16,185,129,.15) !important; color: #10b981 !important; border-color: rgba(16,185,129,.35) !important; } .ins-verif-badge-pending { background: rgba(245,158,11,.12) !important; color: #f59e0b !important; border-color: rgba(245,158,11,.35) !important; } .ins-verif-badge-release { background: rgba(6,182,212,.12) !important; color: #06b6d4 !important; border-color: rgba(6,182,212,.35) !important; } .ins-verif-badge-release:hover { opacity: .85; } /* ── Insurance Verification Modal ──────────────────────────────────────────── */ .ins-steps-row { display: flex; align-items: center; gap: 0; margin-bottom: 24px; } .ins-step { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 0 0 auto; } .ins-step-dot { width: 32px; height: 32px; border-radius: 50%; background: var(--surface2); border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--text-muted); transition: all .2s; } .ins-step-dot.ins-step-active { background: #06b6d4; border-color: #06b6d4; color: #000; } .ins-step-dot.ins-step-done { background: #10b981; border-color: #10b981; color: #fff; } .ins-step-label { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; font-weight: 500; } .ins-step-connector { flex: 1; height: 2px; background: var(--border); margin: 0 8px; margin-bottom: 20px; } .ins-step-hint { font-size: 13.5px; color: var(--text-muted); margin: 0 0 16px; line-height: 1.5; } .ins-upload-zone { border: 2px dashed var(--border); border-radius: 10px; padding: 24px 16px; text-align: center; cursor: pointer; transition: border-color .15s, background .15s; margin-bottom: 4px; } .ins-upload-zone:hover, .ins-upload-zone.ins-drag-over { border-color: #06b6d4; background: rgba(6,182,212,.05); } .ins-upload-zone.ins-file-selected { border-color: #10b981; background: rgba(16,185,129,.05); } .ins-divider { display: flex; align-items: center; gap: 10px; margin: 16px 0; color: var(--text-muted); font-size: 12px; } .ins-divider::before, .ins-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); } .ins-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 500px) { .ins-form-grid { grid-template-columns: 1fr; } } .ins-release-box { background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; max-height: 260px; overflow-y: auto; } .ins-release-title { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 12px; text-transform: uppercase; letter-spacing: .04em; } .ins-release-text { font-size: 12.5px; color: var(--text-muted); line-height: 1.65; } .ins-release-text p { margin: 0 0 10px; } .ins-release-text ul { margin: 0 0 10px; padding-left: 18px; } .ins-release-text li { margin-bottom: 4px; } .ins-agree-row { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; cursor: pointer; font-size: 13px; color: var(--text-muted); line-height: 1.5; } .ins-agree-row input[type="checkbox"] { margin-top: 2px; flex-shrink: 0; } .ins-error { color: #ef4444; font-size: 12.5px; margin-top: 8px; padding: 8px 12px; background: rgba(239,68,68,.08); border-radius: 6px; } /* ── Admin Insurance Releases Table ────────────────────────────────────────── */ .rel-table-wrap { overflow-x: auto; border-radius: 8px; border: 1px solid #e5e7eb; } .rel-table { width: 100%; border-collapse: collapse; font-size: 13px; background: #fff; } .rel-table th { background: #f9fafb; padding: 10px 12px; text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #6b7280; border-bottom: 1px solid #e5e7eb; white-space: nowrap; } .rel-table td { padding: 12px; border-bottom: 1px solid #f3f4f6; color: #111827; vertical-align: top; } .rel-table tr:last-child td { border-bottom: none; } .rel-table tr:hover td { background: #f9fafb; } .rel-badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } .rel-badge-verified { background: #d1fae5; color: #065f46; } .rel-badge-pending { background: #fef3c7; color: #92400e; } .rel-badge-expired { background: #fee2e2; color: #991b1b; } .rel-badge-incomplete { background: #f3f4f6; color: #6b7280; } /* ── Lists Panel ──────────────────────────────────────────────────────────── */ .lists-panel-item:hover { background: var(--surface2) !important; } /* ── ESIGN Electronic Signature ───────────────────────────────────────────── */ /* Scrollable document container */ .sig-doc-wrap { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: 14px; background: var(--surface2); } .sig-doc-header { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--surface); border-bottom: 1px solid var(--border); font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; } .sig-doc-scroll { max-height: 220px; overflow-y: auto; overscroll-behavior: contain; padding: 16px; scroll-behavior: smooth; } .sig-doc-scroll::-webkit-scrollbar { width: 5px; } .sig-doc-scroll::-webkit-scrollbar-track { background: transparent; } .sig-doc-scroll::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 4px; } .sig-doc-body { font-size: 13px; color: var(--text-muted); line-height: 1.7; display: flex; flex-direction: column; gap: 10px; } .sig-doc-body p { margin: 0; } .sig-doc-body ul { padding-left: 18px; } .sig-doc-body li { margin-bottom: 4px; } .sig-doc-body strong { color: var(--text); } /* Scroll-to-bottom unlock notice */ .sig-scroll-notice { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 14px; background: rgba(59,130,246,.1); border-top: 1px solid rgba(59,130,246,.2); font-size: 11px; font-weight: 600; color: var(--accent); animation: sigPulse 2s ease-in-out infinite; } @keyframes sigPulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } } /* Identity verification banner */ .sig-identity-banner { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--primary-dim); border: 1px solid rgba(16,185,129,.25); border-radius: var(--radius); margin-bottom: 14px; color: var(--primary); } .sig-identity-banner > svg { flex-shrink: 0; } .sig-identity-banner > div { flex: 1; min-width: 0; } .sig-identity-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #6ee7b7; margin-bottom: 2px; } .sig-identity-value { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sig-auth-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; background: rgba(16,185,129,.2); border: 1px solid rgba(16,185,129,.35); border-radius: 20px; font-size: 10px; font-weight: 700; color: #6ee7b7; white-space: nowrap; flex-shrink: 0; } /* Signature form */ .sig-form { transition: opacity .3s; } .sig-form.unlocked { opacity: 1 !important; pointer-events: auto !important; } /* Typed-name signature preview */ .sig-name-preview { min-height: 36px; margin-top: 8px; padding: 6px 12px; background: var(--surface); border: 1px dashed var(--border-light); border-radius: var(--radius-sm); display: flex; align-items: center; } .sig-cursive { font-family: 'Brush Script MT', 'Segoe Script', 'Dancing Script', cursive; font-size: 22px; color: var(--primary); line-height: 1.2; pointer-events: none; user-select: none; } .sig-name-input { font-size: 14px; } /* ── Signature Certificate ────────────────────────────────────────────────── */ .sig-cert-wrap { display: flex; flex-direction: column; align-items: center; padding: 24px 16px; text-align: center; } .sig-cert-check { width: 64px; height: 64px; border-radius: 50%; background: var(--primary-dim); border: 2px solid rgba(16,185,129,.3); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; } .sig-cert-title { font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 8px; } .sig-cert-sub { font-size: 13px; color: var(--text-muted); max-width: 420px; line-height: 1.6; margin-bottom: 20px; } .sig-cert-card { width: 100%; max-width: 480px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: 16px; text-align: left; } .sig-cert-header-row { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--surface); border-bottom: 1px solid var(--border); font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; } .sig-cert-row { display: flex; align-items: flex-start; gap: 8px; padding: 9px 14px; font-size: 12px; border-bottom: 1px solid var(--border); line-height: 1.4; } .sig-cert-row:last-child { border-bottom: none; } .sig-cert-lbl { flex-shrink: 0; width: 110px; font-weight: 600; color: var(--text-muted); font-size: 11px; padding-top: 1px; } .sig-cert-row > span:last-child { flex: 1; color: var(--text); word-break: break-all; } .sig-cert-hash .sig-cert-lbl { padding-top: 3px; } .sig-hash-val { font-family: 'SF Mono', 'Fira Mono', 'Courier New', monospace; font-size: 11px; color: var(--text-muted); background: var(--surface); padding: 2px 6px; border-radius: 4px; border: 1px solid var(--border); word-break: break-all; } /* ESIGN Act compliance statement */ .sig-cert-legal { max-width: 480px; font-size: 11px; color: var(--text-faint); line-height: 1.6; text-align: center; margin-top: 4px; margin-bottom: 4px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); } .lists-panel-item.active { background: var(--accent-dim) !important; } /* ════════════════════════════════════════════════════════════════════════════ TOOLS HUB ════════════════════════════════════════════════════════════════════════════ */ .tools-hub { max-width: 1000px; margin: 0 auto; padding: 28px 24px 80px; } .tools-hub-header { margin-bottom: 24px; } .tools-hub-title { font-size: 20px; font-weight: 700; color: var(--text); margin: 0 0 4px; } .tools-hub-sub { font-size: 13px; color: var(--text-muted); margin: 0; } .tools-loading { padding: 48px; text-align: center; color: var(--text-muted); } .tools-empty { padding: 48px; text-align: center; color: var(--text-muted); } .tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; } .tool-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; display: flex; flex-direction: column; gap: 10px; transition: box-shadow .15s, border-color .15s; } .tool-card:not(.tool-card-soon):not(.tool-card-locked):hover { border-color: var(--primary); box-shadow: 0 4px 16px rgba(16,185,129,.12); } .tool-card-soon { opacity: .65; } .tool-card-locked { border-color: rgba(139,92,246,.3); } .tool-card-locked:hover { border-color: rgba(139,92,246,.6); box-shadow: 0 4px 16px rgba(139,92,246,.12); cursor: pointer; } .tool-card-locked .tool-card-icon { background: rgba(139,92,246,.1); color: #a78bfa; } .tool-card-tag-lock { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 7px; border-radius: 99px; background: rgba(139,92,246,.15); color: #a78bfa; display: inline-flex; align-items: center; } .tool-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } .tool-card-icon { width: 48px; height: 48px; border-radius: 12px; background: rgba(16,185,129,.1); display: flex; align-items: center; justify-content: center; color: var(--primary); flex-shrink: 0; } .tool-card-icon-muted { background: var(--surface-2); color: var(--text-muted); } .tool-card-tag { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 7px; border-radius: 99px; background: rgba(16,185,129,.12); color: var(--primary); } .tool-card-tag-soon { background: var(--surface-2); color: var(--text-muted); } .tool-card-tag-available { background: rgba(16,185,129,.15); color: #10b981; } .tool-card-name { font-size: 15px; font-weight: 700; color: var(--text); } .tool-card-desc { font-size: 12px; color: var(--text-muted); line-height: 1.6; flex: 1; } .tool-card-btn { margin-top: 4px; width: 100%; } /* ════════════════════════════════════════════════════════════════════════════ TOOL APP SHELL (shared by all tools — full-page "app within app") ════════════════════════════════════════════════════════════════════════════ */ .tool-app-shell { display: flex; flex-direction: column; height: 100%; min-height: 0; } /* ── JCS Top bar ──────────────────────────────────────────────────────────── */ .jcs-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 20px; border-bottom: 1px solid var(--border); background: var(--surface); flex-shrink: 0; flex-wrap: wrap; } .jcs-topbar-left { display: flex; align-items: center; gap: 10px; } .jcs-back-btn { display: flex; align-items: center; gap: 4px; color: var(--text-muted); font-weight: 500; } .jcs-back-btn:hover { color: var(--text); } .jcs-topbar-divider { width: 1px; height: 16px; background: var(--border); flex-shrink: 0; } .jcs-topbar-title { font-size: 16px; font-weight: 700; color: var(--text); } .jcs-topbar-right { display: flex; align-items: center; gap: 8px; } /* ── JCS Stats bar ────────────────────────────────────────────────────────── */ .jcs-stats-bar { display: flex; border-bottom: 1px solid var(--border); background: var(--surface2); flex-shrink: 0; flex-wrap: wrap; } .jcs-stat-item { display: flex; flex-direction: column; align-items: flex-start; padding: 10px 22px; border-right: 1px solid var(--border); min-width: 130px; gap: 1px; } .jcs-stat-item:last-child { border-right: none; } .jcs-stat-item-accent { background: rgba(16,185,129,.03); } .jcs-stat-val { font-size: 20px; font-weight: 700; color: var(--text); line-height: 1.2; letter-spacing: -.01em; } .jcs-stat-profit { color: #059669 !important; } .jcs-stat-key { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; } /* ── Yearly Goal tracker ─────────────────────────────────────────────────── */ .jcs-goal-divider { width: 1px; background: var(--border); margin: 8px 0; flex-shrink: 0; margin-left: 14px; } .jcs-goal-stat:hover { background: rgba(99,102,241,.06); } .jcs-goal-edit-hint { font-size: 9px; opacity: .5; margin-left: 2px; font-style: normal; } .jcs-goal-status-val { font-size: 15px !important; letter-spacing: .04em; } .jcs-goal-ontrack { background: rgba(16,185,129,.06); } .jcs-goal-ontrack .jcs-goal-status-val { color: #059669 !important; } .jcs-goal-ontrack .jcs-stat-key { color: #059669 !important; opacity: .8; } .jcs-goal-needswork { background: rgba(245,158,11,.06); } .jcs-goal-needswork .jcs-goal-status-val { color: #d97706 !important; } .jcs-goal-needswork .jcs-stat-key { color: #d97706 !important; opacity: .8; } .jcs-goal-missed { background: rgba(239,68,68,.06); } .jcs-goal-missed .jcs-goal-status-val { color: #ef4444 !important; } .jcs-goal-missed .jcs-stat-key { color: #ef4444 !important; opacity: .8; } /* ── Tabs + toolbar ───────────────────────────────────────────────────────── */ .jcs-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 16px 0 0; border-bottom: 1px solid var(--border); background: var(--surface); flex-shrink: 0; flex-wrap: wrap; } .jcs-tabs { display: flex; align-items: stretch; gap: 0; } .jcs-tab { padding: 10px 18px; font-size: 14px; font-weight: 600; color: var(--text-muted); background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: color .15s, border-color .15s; white-space: nowrap; } .jcs-tab:hover:not(.jcs-tab-active) { color: var(--text); } .jcs-tab-active { color: var(--primary); border-bottom-color: var(--primary); } .jcs-tab-badge { font-size: 10px; font-weight: 700; background: var(--primary); color: #fff; padding: 1px 5px; border-radius: 99px; line-height: 1.4; } .jcs-toolbar-right { display: flex; align-items: center; gap: 8px; padding: 6px 0; flex-shrink: 0; } .jcs-tab-actions { display: flex; align-items: center; gap: 6px; padding-right: 8px; border-right: 1px solid var(--border); margin-right: 2px; } .jcs-tab-actions:empty { display: none; } /* Legacy compat */ .tool-app-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 24px; border-bottom: 1px solid var(--border); background: var(--surface); flex-shrink: 0; flex-wrap: wrap; } .tool-app-nav { display: flex; align-items: center; gap: 12px; } .tool-app-title { font-size: 17px; font-weight: 700; color: var(--text); margin: 0; } .tool-app-actions { display: flex; align-items: center; gap: 8px; } .tool-app-stats { display: flex; gap: 0; border-bottom: 1px solid var(--border); background: var(--surface2); flex-shrink: 0; flex-wrap: wrap; } .tool-stat { display: flex; flex-direction: column; align-items: center; padding: 12px 24px; border-right: 1px solid var(--border); min-width: 120px; } .tool-stat:last-child { border-right: none; } .tool-stat-num { font-size: 22px; font-weight: 700; color: var(--text); line-height: 1.2; } .tool-stat-label { font-size: 11px; color: var(--text-muted); margin-top: 2px; text-transform: uppercase; letter-spacing: .04em; } /* Body (scrollable) */ .tool-app-body { flex: 1; overflow-y: auto; padding: 20px 24px; } .tool-form-body { padding: 0; } /* Empty state */ .jcs-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 60px 24px; text-align: center; color: var(--text-muted); font-size: 15px; } /* ════════════════════════════════════════════════════════════════════════════ JCS PROJECT CARDS (list view) ════════════════════════════════════════════════════════════════════════════ */ .jcs-project-grid { display: flex; flex-direction: column; gap: 12px; } .jcs-proj-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: box-shadow .15s; } .jcs-proj-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,.07); } .jcs-proj-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 16px 10px; border-bottom: 1px solid var(--border); } .jcs-proj-name { font-size: 15px; font-weight: 700; color: var(--text); } .jcs-proj-client { font-size: 13px; color: var(--text-muted); margin-top: 2px; } .jcs-proj-year { font-size: 11px; font-weight: 600; color: var(--text-muted); } .jcs-proj-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 2px 8px; border-radius: 99px; } .jcs-badge-profit { background: rgba(16,185,129,.12); color: #059669; } .jcs-badge-loss { background: rgba(239,68,68,.1); color: #dc2626; } .jcs-proj-card-stats { display: flex; flex-direction: column; padding: 10px 16px; } .jcs-pstat { display: flex; align-items: center; justify-content: space-between; font-size: 13px; padding: 3px 0; gap: 8px; } .jcs-pstat-l { color: var(--text-muted); } .jcs-pstat-v { font-weight: 600; color: var(--text); } .jcs-pstat-bal { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 6px; } .jcs-profit { color: #059669 !important; } .jcs-loss { color: #dc2626 !important; } .jcs-proj-card-foot { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--border); background: var(--surface2); } /* ════════════════════════════════════════════════════════════════════════════ JCS FORM (full-page, no overlay) ════════════════════════════════════════════════════════════════════════════ */ .jcs-form-section { padding: 16px 24px; border-bottom: 1px solid var(--border); } .jcs-form-section-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); margin-bottom: 10px; } .jcs-form-grid-4 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 12px; } @media (max-width: 640px) { .jcs-form-grid-4 { grid-template-columns: 1fr; } } /* Two-column P&L body */ .jcs-pl-layout { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--border); } @media (max-width: 760px) { .jcs-pl-layout { grid-template-columns: 1fr; } } .jcs-pl-col { display: flex; flex-direction: column; } .jcs-pl-col-left { border-right: 1px solid var(--border); } .jcs-client-area { resize: vertical; min-height: 70px; } .jcs-form-section-table { padding-bottom: 0; } .jcs-table-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .jcs-inline-table-wrap { overflow-x: auto; } .jcs-inline-table { width: 100%; border-collapse: collapse; font-size: 12px; } .jcs-inline-table thead tr th:first-child { border-radius: 6px 0 0 6px; padding-left: 10px; } .jcs-inline-table thead tr th:last-child { border-radius: 0 6px 6px 0; } .jcs-inline-table thead th { background: var(--surface2); color: var(--text-muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 7px 4px; text-align: left; border-bottom: none; white-space: nowrap; } .jcs-inline-table tbody tr:not(:last-child) td { border-bottom: 1px solid var(--border); } .jcs-inline-table tbody td { padding: 3px 3px; vertical-align: middle; } .jcs-tcell { font-size: 12px !important; padding: 4px 6px !important; height: 28px !important; min-width: 0; } .jcs-num { text-align: right !important; } /* Materials Qty input — small centered number, spinners hidden */ .jcs-qty-input { text-align: center !important; padding-left: 4px !important; padding-right: 4px !important; -moz-appearance: textfield; } .jcs-qty-input::-webkit-outer-spin-button, .jcs-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Materials Line Total — read-only display cell */ .jcs-mat-total-cell { text-align: right; padding-right: 8px !important; } .jcs-mat-total { display: inline-block; font-size: 12px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; min-width: 64px; text-align: right; } /* Materials row expand chevron (Brand / Color / Dimensions sub-row) */ .jcs-mat-expand { background: none; border: 1px solid transparent; cursor: pointer; color: var(--text-muted); font-size: 12px; line-height: 1; padding: 3px 4px; border-radius: 4px; transition: color .15s, background .15s, border-color .15s; } .jcs-mat-expand:hover { color: var(--text); background: rgba(0,0,0,.04); } .jcs-mat-expand-open { color: var(--primary, #2563eb); } /* Small dot when details are filled in but the row is collapsed */ .jcs-mat-expand-filled:not(.jcs-mat-expand-open)::after { content: ""; display: inline-block; width: 5px; height: 5px; margin-left: 3px; border-radius: 50%; background: var(--primary, #2563eb); vertical-align: middle; } /* Materials details sub-row (Brand, Color, Dimensions, timestamp) */ .jcs-mat-details-row > td { padding: 4px 6px 10px !important; background: rgba(0,0,0,.02); border-top: 0; } .jcs-mat-details-grid { display: grid; grid-template-columns: minmax(140px,1fr) minmax(140px,1fr) minmax(180px,1.2fr); gap: 8px 10px; align-items: end; } .jcs-mat-details-grid .field { margin: 0; } .jcs-mat-details-grid .field-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); margin-bottom: 2px; display: block; } .jcs-mat-details-grid .field-input { font-size: 12px; padding: 6px 8px; } .jcs-mat-dim-group { display: flex; align-items: center; gap: 4px; } .jcs-mat-dim-input { width: 100%; min-width: 0; text-align: center; padding: 6px 4px !important; -moz-appearance: textfield; } .jcs-mat-dim-input::-webkit-outer-spin-button, .jcs-mat-dim-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .jcs-mat-dim-sep { color: var(--text-muted); font-size: 11px; flex: 0 0 auto; } .jcs-mat-details-meta { grid-column: 1 / -1; font-size: 10.5px; color: var(--text-muted); font-style: italic; margin-top: 2px; } @media (max-width: 640px) { .jcs-mat-details-grid { grid-template-columns: 1fr 1fr; } .jcs-mat-dim-field { grid-column: 1 / -1; } } @media (max-width: 480px) { .jcs-mat-details-grid { grid-template-columns: 1fr; } } .jcs-del-btn { background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 13px; padding: 3px 5px; border-radius: 4px; transition: color .15s, background .15s; } .jcs-del-btn:hover { color: var(--danger); background: rgba(239,68,68,.08); } .jcs-col-subtotal { padding: 8px 0 12px; font-size: 12px; color: var(--text-muted); } .jcs-col-subtotal strong { color: var(--text); } /* Balance bar */ .jcs-balance-bar { padding: 18px 24px; background: var(--surface2); border-top: 1px solid var(--border); } .jcs-balance-inner { max-width: 380px; margin-left: auto; } .jcs-bal-item { display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 13px; padding: 4px 0; color: var(--text-muted); } .jcs-bal-minus span:last-child { color: #b91c1c; } .jcs-bal-total { display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 15px; font-weight: 700; color: var(--text); margin-top: 8px; padding-top: 10px; border-top: 2px solid var(--border); } .jcs-bal-profit { color: #059669 !important; } .jcs-bal-loss { color: #dc2626 !important; } /* ════════════════════════════════════════════════════════════════════════════ JCS SEARCH + YEAR FILTER BAR ════════════════════════════════════════════════════════════════════════════ */ .jcs-search-bar { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--border); background: var(--surface); flex-shrink: 0; } .jcs-search-wrap { flex: 1; position: relative; display: flex; align-items: center; } .jcs-search-icon { position: absolute; left: 10px; color: var(--text-muted); pointer-events: none; flex-shrink: 0; } .jcs-search-input { width: 100%; height: 34px; padding: 0 32px 0 32px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: var(--surface2); color: var(--text); font-size: 13px; outline: none; transition: border-color .15s; } .jcs-search-input:focus { border-color: var(--primary); background: var(--surface); } .jcs-search-clear { position: absolute; right: 8px; background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 12px; padding: 2px 4px; border-radius: 4px; line-height: 1; } .jcs-search-clear:hover { color: var(--text); } /* JCS Year Dropdown (custom) */ .jcs-year-dd { position: relative; flex-shrink: 0; } .jcs-year-dd-btn { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: var(--surface2); color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer; outline: none; white-space: nowrap; transition: border-color .15s, background .15s; min-width: 118px; justify-content: space-between; } .jcs-year-dd-btn:hover, .jcs-year-dd-btn-open { border-color: var(--primary); background: var(--surface); } .jcs-year-dd-caret { opacity: .65; transition: transform .18s; flex-shrink: 0; } .jcs-year-dd-btn-open .jcs-year-dd-caret { transform: rotate(180deg); } .jcs-year-dd-panel { position: absolute; top: calc(100% + 4px); right: 0; min-width: 100%; background: var(--surface2); border: 1.5px solid var(--border); border-radius: var(--radius-sm); box-shadow: 0 8px 24px rgba(0,0,0,.35); z-index: 9999; overflow: hidden; } .jcs-year-dd-option { padding: 8px 14px; font-size: 13px; font-weight: 500; color: var(--text); cursor: pointer; transition: background .12s; white-space: nowrap; } .jcs-year-dd-option:hover { background: rgba(99,102,241,.15); color: var(--primary); } .jcs-year-dd-active { color: var(--primary); background: rgba(99,102,241,.12); font-weight: 700; } /* JCS Pagination */ .jcs-pagination { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); } .jcs-page-btn { padding: 6px 16px; border-radius: 7px; border: 1.5px solid var(--border); background: var(--surface); color: var(--text-muted); font-size: 13px; font-weight: 600; cursor: pointer; transition: all .15s; } .jcs-page-btn:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); } .jcs-page-btn:disabled { opacity: .4; cursor: default; } .jcs-page-info { font-size: 13px; color: var(--text-muted); } /* Balance hint message */ .jcs-bal-hint { font-size: 11.5px; color: #dc2626; text-align: right; margin: 8px 0 0; font-weight: 500; } /* ════════════════════════════════════════════════════════════════════════════ JCS FORM OVERLAY MODAL ════════════════════════════════════════════════════════════════════════════ */ .jcs-form-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 1100; display: flex; align-items: flex-start; justify-content: center; /* Modal is the scroll container (see below) so overlay stays fixed. Overlay keeps overflow:auto as a fallback in case an embedded modal variant sets overflow:visible + max-height greater than viewport. */ overflow-y: auto; padding: 16px 8px 32px; -webkit-overflow-scrolling: touch; } .jcs-form-modal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); width: 100%; max-width: 1400px; box-shadow: 0 24px 64px rgba(0,0,0,.4); overflow: visible; flex-shrink: 0; animation: fadeInUp .18s ease; display: flex; flex-direction: column; } /* Project Tracker form: modal is its OWN scroll container so the sticky header (.jcs-form-hdr) pins correctly as the form scrolls. We scope this only to .jcs-pl-modal — other modals that share .jcs-form-modal (Estimate form, Invoice form, small dialogs) already set their own overflow rules. */ .jcs-form-modal.jcs-pl-modal { max-height: calc(100vh - 48px); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } /* New form modal header */ .jcs-form-hdr { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--border); background: var(--surface); position: sticky; top: 0; z-index: 20; flex-shrink: 0; } .jcs-form-hdr-info { min-width: 0; } .jcs-form-hdr-title { font-size: 15px; font-weight: 700; color: var(--text); margin: 0; } .jcs-form-hdr-sub { font-size: 11px; color: var(--text-muted); margin-top: 1px; } .jcs-form-hdr-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .jcs-form-close-btn { font-size: 16px; line-height: 1; padding: 6px 10px !important; color: var(--text-muted); } /* Legacy compat */ .jcs-form-modal-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border); background: var(--surface); position: sticky; top: 0; z-index: 20; flex-shrink: 0; } .jcs-form-modal-title { font-size: 16px; font-weight: 700; color: var(--text); margin: 0; } .jcs-form-modal-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; } .jcs-form-modal-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } /* Money input with $ prefix */ .jcs-money-wrap { position: relative; display: flex; align-items: center; } .jcs-money-prefix { position: absolute; left: 9px; font-size: 13px; color: var(--text-muted); pointer-events: none; z-index: 1; line-height: 1; } .jcs-money-input { padding-left: 22px !important; } @media (max-width: 600px) { /* ── Form overlay: full-screen on mobile ────────────────────────────────── The MODAL itself is the one scroll container — works for all form types (Estimates jcs-form-body, Project Tracker jcs-pl-layout, etc.). Sticky headers stay pinned as the modal scrolls. */ .jcs-form-overlay { padding: 0 !important; align-items: stretch !important; overflow: hidden !important; } .jcs-form-modal { max-width: 100% !important; max-height: 100% !important; height: 100% !important; border-radius: 0 !important; overflow-x: hidden !important; overflow-y: auto !important; /* modal is the scroll container */ -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; } /* Both header styles sticky within the scrolling modal */ .jcs-form-hdr, .jcs-form-topbar { position: sticky !important; top: 0 !important; z-index: 20; flex-shrink: 0; padding: 10px 14px !important; background: var(--surface) !important; /* must cover scrolling content */ } .jcs-form-title { font-size: 13px; } /* Remove all inner scroll containers — let the modal handle scrolling */ .jcs-form-body { overflow: visible !important; flex: none !important; } .jcs-pl-col { overflow: visible !important; max-height: none !important; } .jcs-pl-layout { overflow: visible !important; } /* Prevent iOS Safari auto-zoom on input focus (triggers when font-size < 16px) */ input.field-input, select.field-input, textarea.field-input, .field-input { font-size: 16px !important; } /* Tools hub: full-width single column, tighter padding */ .tools-hub { padding: 16px 12px 80px; } .tools-grid { grid-template-columns: 1fr; gap: 12px; } .tool-card { padding: 16px; } } /* ════════════════════════════════════════════════════════════════════════════ JCS REPORT PICKER (inline, inserted after stats bar) ════════════════════════════════════════════════════════════════════════════ */ .jcs-report-picker { border-bottom: 1px solid var(--border); background: rgba(16,185,129,.04); padding: 10px 24px; animation: fadeInUp .15s ease; flex-shrink: 0; } .jcs-report-picker-inner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } @media (max-width: 600px) { .tool-app-topbar { padding: 12px 16px; } .tool-app-body { padding: 16px; } .jcs-form-section { padding: 12px 16px; } .tool-stat { padding: 10px 16px; min-width: 80px; } .tool-stat-num { font-size: 16px; } } /* ════════════════════════════════════════════════════════════════════════════ JCS PROJECT CARD — updated elements ════════════════════════════════════════════════════════════════════════════ */ .jcs-proj-client-sub { color: var(--text-faint); } .jcs-badge-neutral { background: var(--surface2); color: var(--text-muted); border: 1px solid var(--border); } /* ── Estimate card layout ──────────────────────────────────────────────────── */ .jcs-proj-info { display: flex; flex-direction: column; min-width: 0; flex: 1; } .jcs-proj-meta { font-size: 12px; color: var(--text-muted); margin-top: 3px; } /* Estimate card list — constrained width with padding */ .est-card-list { display: flex; flex-direction: column; gap: 10px; max-width: 860px; margin: 0 auto; padding: 16px 20px; } /* Stats grid — horizontal cells, scoped to estimate cards only */ .jcs-proj-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); border-top: 1px solid var(--border); } /* Scoped overrides so estimate stats don't conflict with project tracker */ .jcs-proj-stats .jcs-pstat { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; padding: 7px 12px; font-size: 12px; border-right: 1px solid var(--border); gap: 0; } .jcs-proj-stats .jcs-pstat:last-child { border-right: none; } .jcs-proj-stats .jcs-pstat-l { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 3px; white-space: nowrap; } .jcs-proj-stats .jcs-pstat-profit { border-left: 2px solid var(--primary); background: rgba(99,102,241,.04); } .jcs-profit-val { color: #059669 !important; font-size: 14px !important; } /* Card action buttons row */ .jcs-proj-actions { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--border); background: var(--surface2); } .jcs-del-link { color: var(--text-muted) !important; } .jcs-pstat-expandable { flex-direction: column; align-items: stretch; padding: 0; } .jcs-pstat-toggle { display: flex; justify-content: space-between; align-items: center; width: 100%; background: none; border: none; cursor: pointer; padding: 6px 0; font-size: inherit; color: inherit; text-align: left; } .jcs-pstat-toggle:hover { opacity: .8; } .jcs-pstat-detail { padding: 4px 0 6px 8px; border-top: 1px solid var(--border); } .jcs-pstat-detail-row { display: flex; align-items: center; gap: 6px; padding: 3px 0; font-size: 12px; } .jcs-pstat-detail-name { flex: 1; min-width: 0; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .jcs-pstat-detail-link { font-size: 11px; color: var(--primary); flex-shrink: 0; } .jcs-pstat-detail-amt { font-size: 12px; font-weight: 600; color: var(--text); flex-shrink: 0; margin-left: auto; } .jcs-receipt-list { margin-bottom: 8px; } .jcs-receipt-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 12px; } .jcs-receipt-row:last-child { border-bottom: none; } .jcs-receipt-info { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; } .jcs-receipt-name { color: var(--primary); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .jcs-receipt-name:hover { text-decoration: underline; } .jcs-receipt-cat { font-size: 10px; font-weight: 600; background: rgba(99,102,241,.15); color: var(--primary); border-radius: 4px; padding: 1px 6px; flex-shrink: 0; white-space: nowrap; } .jcs-receipt-date { font-size: 11px; color: var(--text-muted); flex-shrink: 0; } .jcs-receipt-upload-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; background: none; border: 1px dashed var(--border); border-radius: 6px; font-size: 12px; color: var(--text-muted); cursor: pointer; transition: border-color .15s, color .15s; margin-top: 4px; } .jcs-receipt-upload-btn:hover { border-color: var(--primary); color: var(--primary); } .jcs-receipt-panel { margin-top: 10px; background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; padding: 14px; display: flex; flex-direction: column; gap: 10px; } .jcs-receipt-panel-row { display: flex; flex-direction: column; } .jcs-del-link:hover { color: var(--danger) !important; } .jcs-report-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; margin-bottom: 8px; } .jcs-report-info { min-width: 0; flex: 1; } .jcs-report-name { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .jcs-report-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; } .jcs-report-type { color: var(--primary); font-weight: 600; } /* ════════════════════════════════════════════════════════════════════════════ JCS EXPENSES TAB ════════════════════════════════════════════════════════════════════════════ */ /* Section wrappers */ .jcs-exp-section { padding: 16px 20px; } .jcs-exp-section + .jcs-exp-section { border-top: 1px solid var(--border); } .jcs-exp-section-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; gap: 8px; } .jcs-exp-section-title { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--text); } .jcs-exp-section-sub { font-size: 11px; color: var(--text-muted); } .jcs-exp-total-badge { font-size: 12px; font-weight: 700; color: #f59e0b; background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.2); border-radius: 99px; padding: 2px 10px; } /* Job profit summary */ .jcs-exp-job-list { display: flex; flex-direction: column; gap: 6px; } .jcs-exp-job-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; transition: border-color .15s; } .jcs-exp-job-row:hover { border-color: var(--border-light); } .jcs-exp-job-name { flex: 1; min-width: 140px; display: flex; flex-direction: column; gap: 2px; } .jcs-exp-job-title { font-size: 13px; font-weight: 600; color: var(--text); } .jcs-exp-job-cust { font-size: 11px; color: var(--text-muted); } .jcs-exp-job-stat { display: flex; flex-direction: column; align-items: flex-end; min-width: 72px; } .jcs-exp-job-label { font-size: 10px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; } .jcs-exp-job-val { font-size: 13px; font-weight: 600; color: var(--text); } .jcs-exp-job-open { color: var(--text-muted) !important; font-size: 14px; padding: 4px 8px !important; flex-shrink: 0; } .jcs-exp-job-open:hover { color: var(--primary) !important; } /* Category breakdown pills */ .jcs-exp-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; } .jcs-exp-cat-pill { display: inline-flex; align-items: center; gap: 6px; background: var(--surface2); border: 1px solid var(--border); border-radius: 99px; padding: 4px 12px; font-size: 11px; font-weight: 600; } .jcs-exp-cat-name { color: var(--text-muted); } .jcs-exp-cat-amt { color: #f59e0b; } /* Expense rows */ .jcs-exp-list { display: flex; flex-direction: column; gap: 6px; } .jcs-exp-row { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; transition: border-color .15s; } .jcs-exp-row:hover { border-color: var(--border-light); } .jcs-exp-row-main { display: flex; align-items: center; gap: 10px; } .jcs-exp-row-info { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; } .jcs-exp-cat-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; background: rgba(245,158,11,.12); color: #f59e0b; border: 1px solid rgba(245,158,11,.2); border-radius: 4px; padding: 2px 7px; white-space: nowrap; flex-shrink: 0; } .jcs-exp-row-desc { font-size: 13px; color: var(--text); font-weight: 500; } .jcs-exp-row-date { font-size: 11px; color: var(--text-muted); } .jcs-exp-row-alloc { font-size: 11px; color: var(--primary); } .jcs-exp-row-notes { font-size: 11px; color: var(--text-muted); font-style: italic; width: 100%; } .jcs-exp-row-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .jcs-exp-row-amt { font-size: 14px; font-weight: 700; color: var(--text); white-space: nowrap; } .jcs-exp-row-actions { display: flex; gap: 2px; } .jcs-exp-empty-inline { font-size: 13px; color: var(--text-muted); padding: 16px 0; } /* Allocation toggle (iOS-style switch) */ .jcs-exp-alloc-toggle-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .jcs-exp-alloc-switch { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; cursor: pointer; } .jcs-exp-alloc-switch input { opacity: 0; width: 0; height: 0; } .jcs-exp-alloc-thumb { position: absolute; inset: 0; border-radius: 22px; background: var(--border); transition: .2s; } .jcs-exp-alloc-thumb::before { content: ''; position: absolute; width: 16px; height: 16px; border-radius: 50%; left: 3px; top: 3px; background: #fff; transition: .2s; } .jcs-exp-alloc-switch input:checked + .jcs-exp-alloc-thumb { background: var(--primary); } .jcs-exp-alloc-switch input:checked + .jcs-exp-alloc-thumb::before { transform: translateX(18px); } /* Allocation rows */ .jcs-exp-alloc-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; } .jcs-exp-alloc-row { display: flex; align-items: center; gap: 10px; } .jcs-exp-alloc-proj { flex: 1; font-size: 13px; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .jcs-exp-alloc-input-wrap { position: relative; flex-shrink: 0; } .jcs-exp-alloc-pct { width: 70px !important; text-align: right; padding-right: 22px !important; } .jcs-exp-alloc-pct-sign { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--text-muted); pointer-events: none; } .jcs-exp-alloc-dollar { font-size: 12px; color: var(--text-muted); min-width: 60px; text-align: right; flex-shrink: 0; } .jcs-exp-alloc-footer { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding-top: 8px; border-top: 1px solid var(--border); } .jcs-exp-alloc-total-label { font-size: 12px; color: var(--text-muted); } .jcs-exp-alloc-total-val { font-size: 13px; font-weight: 700; color: var(--text); } @media (max-width: 600px) { .jcs-exp-section { padding: 12px 14px; } .jcs-exp-job-row { flex-direction: column; align-items: flex-start; } .jcs-exp-job-stat { align-items: flex-start; flex-direction: row; gap: 6px; align-items: center; } .jcs-exp-job-label::after { content: ':'; } .jcs-exp-job-open { align-self: flex-end; } .jcs-exp-alloc-proj { font-size: 12px; } } /* ════════════════════════════════════════════════════════════════════════════ JCS FORM — grid layouts + customer section ════════════════════════════════════════════════════════════════════════════ */ .jcs-form-section-hdr { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; } .jcs-form-section-hdr .jcs-form-section-title { margin-bottom: 0; } /* 3-column project info grid */ .jcs-form-grid-3 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 12px; } @media (max-width: 640px) { .jcs-form-grid-3 { grid-template-columns: 1fr; } } /* 2-column customer fields grid */ .jcs-form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } @media (max-width: 500px) { .jcs-form-grid-2 { grid-template-columns: 1fr; } } .jcs-field-span-2 { grid-column: span 2; } @media (max-width: 500px) { .jcs-field-span-2 { grid-column: span 1; } } /* Customer picker */ .jcs-cust-picker-wrap { flex-shrink: 0; } .jcs-cust-picker { font-size: 12px !important; height: 30px !important; padding: 0 8px !important; } /* ════════════════════════════════════════════════════════════════════════════ JCS BALANCE BAR — updated (profit row, divider, no "Balanced" row) ════════════════════════════════════════════════════════════════════════════ */ .jcs-bal-divider { height: 1px; background: var(--border); margin: 8px 0; } .jcs-bal-profit-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 16px; font-weight: 700; color: #059669; padding: 2px 0; } /* Reserves line inside balance bar — visually a sub-allocation of Profit. */ .jcs-bal-reserves-row { color: var(--text-muted); font-size: 12px; padding-left: 12px; margin-top: 2px; } .jcs-bal-reserves-row span:last-child { color: #b45309; font-weight: 600; } .jcs-bal-netprofit-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 14px; font-weight: 700; color: var(--text); padding: 4px 0 2px; border-top: 1px dashed var(--border); margin-top: 4px; } .jcs-bal-netprofit-row span:last-child { color: #059669; } /* Reserves row on the project card (list view). Muted, slightly indented so it reads as a sub-allocation of the Profit row that follows. */ .jcs-pstat-reserves { color: var(--text-muted); } .jcs-pstat-reserves .jcs-pstat-v { color: #b45309; font-weight: 600; } /* Row that holds the Reserves label + mode toggle. */ .jcs-reserves-hdr { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; } /* Segmented [% | $] mode toggle. */ .jcs-reserves-mode-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; background: var(--surface); } .jcs-reserves-mode-toggle .jcs-mode-btn { background: transparent; border: 0; color: var(--text-muted); font-size: 11px; font-weight: 600; line-height: 1; padding: 4px 10px; cursor: pointer; transition: background .12s, color .12s; } .jcs-reserves-mode-toggle .jcs-mode-btn + .jcs-mode-btn { border-left: 1px solid var(--border); } .jcs-reserves-mode-toggle .jcs-mode-btn:hover { color: var(--text); } .jcs-reserves-mode-toggle .jcs-mode-btn.jcs-mode-active { background: var(--surface2); color: var(--text); } /* Percent input variant — trailing "%" suffix instead of a $ prefix. */ .jcs-pct-wrap { position: relative; } .jcs-pct-input { -moz-appearance: textfield; padding-right: 28px; /* room for the suffix */ } .jcs-pct-input::-webkit-inner-spin-button, .jcs-pct-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .jcs-pct-suffix { left: auto !important; right: 10px !important; color: var(--text-muted); font-weight: 500; } /* Small hint line below the Reserves input showing the counterpart value (e.g. "= $300.00 of $2,000.00 profit" in % mode). */ .jcs-reserves-hint { font-size: 11px; color: var(--text-muted); margin-top: 4px; min-height: 14px; line-height: 1.25; } /* Mobile: allow the mode toggle to wrap neatly. */ @media (max-width: 520px) { .jcs-reserves-hdr { flex-wrap: wrap; row-gap: 4px; } .jcs-reserves-mode-toggle { margin-left: auto; } } /* Icon-only gear in the Project Tracker topbar. */ .jcs-settings-btn { display: inline-flex; align-items: center; justify-content: center; padding: 6px 8px; color: var(--text-muted); } .jcs-settings-btn:hover { color: var(--text); } /* ════════════════════════════════════════════════════════════════════════════ JCS CUSTOMERS TAB ════════════════════════════════════════════════════════════════════════════ */ .jcs-customer-list { display: flex; flex-direction: column; gap: 8px; } .jcs-cust-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: box-shadow .15s; } .jcs-cust-card:hover { box-shadow: 0 2px 10px rgba(0,0,0,.06); } .jcs-cust-card-open { border-color: var(--primary); } .jcs-cust-card-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; user-select: none; } .jcs-cust-card-head:hover { background: var(--surface2); } .jcs-cust-avatar { width: 38px; height: 38px; border-radius: 50%; background: rgba(16,185,129,.12); color: var(--primary); font-size: 15px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .jcs-cust-info { flex: 1; min-width: 0; } .jcs-cust-name { font-size: 14px; font-weight: 600; color: var(--text); } .jcs-cust-meta { font-size: 12px; color: var(--text-muted); margin-top: 1px; } .jcs-cust-summary { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; } .jcs-cust-proj-count { font-size: 11px; color: var(--text-muted); } .jcs-cust-proj-val { font-size: 13px; font-weight: 700; color: var(--text); } .jcs-cust-chevron { color: var(--text-muted); flex-shrink: 0; transition: transform .2s; } .jcs-cust-chevron-open { transform: rotate(180deg); } .jcs-cust-card-body { border-top: 1px solid var(--border); background: var(--surface2); } .jcs-cust-details { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; } .jcs-cust-detail-row { display: flex; gap: 12px; font-size: 13px; align-items: baseline; } .jcs-cust-dl { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); min-width: 56px; flex-shrink: 0; } .jcs-cust-link { color: var(--primary); text-decoration: none; } .jcs-cust-link:hover { text-decoration: underline; } .jcs-cust-projects { border-top: 1px solid var(--border); padding: 12px 16px; } .jcs-cust-proj-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-bottom: 8px; } .jcs-cust-proj-summary { font-size: 12px; color: var(--text-muted); margin-bottom: 10px; } .jcs-cust-proj-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border); } .jcs-cust-proj-row:first-of-type { border-top: none; } .jcs-cust-proj-name { font-size: 13px; font-weight: 600; color: var(--text); } .jcs-cust-proj-year { font-size: 11px; color: var(--text-muted); margin-top: 2px; } .jcs-cust-no-proj { border-top: 1px solid var(--border); padding: 12px 16px; font-size: 12px; color: var(--text-muted); } .jcs-cust-card-actions { border-top: 1px solid var(--border); padding: 8px 16px; display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; } /* Linked-record badge shown instead of the "→ Add to …" button once linked */ .mat-linked-badge { font-size: 11px; font-weight: 600; color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, transparent); border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent); border-radius: 20px; padding: 2px 10px; white-space: nowrap; margin-right: auto; } /* Cross-link button — sits left of Edit so it doesn't crowd the danger actions */ .mat-link-btn { margin-right: auto; color: var(--primary) !important; font-size: 12px; } /* ── Mobile button label helpers ───────────────────────────────────────────── */ /* Default: show full label, hide short label */ .btn-label-short { display: none; } .btn-label-full { display: inline; } @media (max-width: 600px) { /* ── Topbar ─────────────────────────────────────────────────────────────── */ .jcs-topbar { padding: 8px 12px; gap: 8px; } .jcs-topbar-title { font-size: 14px; } /* ── Stats bar — compact, dollar amounts only, no counts ──────────────── */ .jcs-stats-bar { flex-wrap: nowrap; overflow-x: auto; } .jcs-stat-item { min-width: 80px; padding: 6px 10px; } .jcs-stat-val { font-size: 14px; } /* shrunk from 20px → 14px on mobile */ .jcs-stat-key { font-size: 9px; } /* ── Toolbar — two-row layout: tabs on top, actions below ──────────────── */ .jcs-toolbar { flex-direction: column; flex-wrap: nowrap; padding: 0; gap: 0; } /* Row 1: horizontally scrollable tabs (full width) */ .jcs-tabs { width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; flex-shrink: 0; } .jcs-tabs::-webkit-scrollbar { display: none; } .jcs-tab { padding: 10px 14px; font-size: 12px; } /* Row 2: action buttons + search + year (full width row below tabs) */ .jcs-toolbar-right { width: 100%; border-top: 1px solid var(--border); padding: 6px 10px; gap: 6px; justify-content: flex-end; } .jcs-search-wrap { flex: 1; min-width: 60px; max-width: 160px; } .jcs-search-input { font-size: 12px; } .jcs-year-dd-btn { font-size: 12px; padding: 5px 8px; min-width: 72px; } /* ── Form section ───────────────────────────────────────────────────────── */ .jcs-form-section { padding: 12px 14px; } /* Library form grids — single column so every field gets its own full-width row */ .jcs-form-grid-3 { grid-template-columns: 1fr; gap: 10px; } .jcs-form-grid-2 { grid-template-columns: 1fr; gap: 10px; } /* Estimate form Date/Year/Status — override to stay 3 compact columns */ .est-info-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; } /* ── Estimate card list — edge-to-edge ─────────────────────────────────── */ .est-card-list { max-width: none; padding: 10px; } /* ── Mobile button label swap ───────────────────────────────────────────── */ .btn-label-short { display: inline; } .btn-label-full { display: none; } /* ── Card action row ────────────────────────────────────────────────────── */ .jcs-proj-actions { gap: 6px; padding: 8px 10px; flex-wrap: wrap; } .jcs-proj-actions .btn { font-size: 12px; padding: 5px 10px; } /* ── Hide Import CSV buttons on mobile ──────────────────────────────────── */ .jcs-import-btn { display: none !important; } } /* ════════════════════════════════════════════════════════════════════════════ JCS LIBRARY TABS (Materials · Suppliers · Sub Contractors) ════════════════════════════════════════════════════════════════════════════ */ .jcs-lib-list { display: flex; flex-direction: column; gap: 8px; } .jcs-lib-hint { font-size: 12px; color: var(--text-muted); padding: 4px 0 8px; border-bottom: 1px solid var(--border); margin-bottom: 4px; } /* Library card — shares expand pattern with customer cards */ .jcs-lib-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: box-shadow .15s; } .jcs-lib-card:hover { box-shadow: 0 2px 10px rgba(0,0,0,.06); } .jcs-lib-card-open { border-color: var(--primary); } .jcs-lib-card-head { display: flex; align-items: center; gap: 12px; padding: 11px 16px; cursor: pointer; user-select: none; } .jcs-lib-card-head:hover { background: var(--surface2); } .jcs-lib-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; } .jcs-lib-icon-mat { background: rgba(16,185,129,.1); } .jcs-lib-icon-sup { background: rgba(99,102,241,.1); } .jcs-lib-icon-sub { background: rgba(245,158,11,.1); color: #b45309; font-size: 14px; font-weight: 700; } .jcs-lib-info { flex: 1; min-width: 0; } .jcs-lib-name { font-size: 15px; font-weight: 600; color: var(--text); } .jcs-lib-meta { font-size: 13px; color: var(--text-muted); margin-top: 1px; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; } .jcs-lib-price { font-size: 14px; font-weight: 700; color: #059669; flex-shrink: 0; } .jcs-lib-card-body { border-top: 1px solid var(--border); background: var(--surface2); } /* ── Customers: Card grid view ────────────────────────────────────────────── */ .jcs-cust-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; } .jcs-cust-card-item { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 16px; display: flex; flex-direction: column; gap: 10px; transition: box-shadow .15s, border-color .15s; cursor: pointer; } .jcs-cust-card-item:hover { box-shadow: 0 2px 12px rgba(0,0,0,.1); border-color: var(--border-light); } .jcs-cust-card-avatar { width: 42px; height: 42px; border-radius: 50%; background: rgba(99,102,241,.12); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; flex-shrink: 0; } .jcs-cust-card-name { font-size: 15px; font-weight: 700; color: var(--text); line-height: 1.3; } .jcs-cust-card-loc { font-size: 12px; color: var(--text-muted); } .jcs-cust-card-contact { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .jcs-cust-card-foot { display: flex; gap: 6px; margin-top: auto; padding-top: 4px; } @media (max-width: 600px) { .jcs-cust-card-grid { grid-template-columns: 1fr 1fr; gap: 8px; } } /* ── Estimates Pro: Product folders ──────────────────────────────────────── */ /* Folder card at the root view; click anywhere on the head to enter */ .est-folder-card { cursor: pointer; } .est-folder-card .jcs-lib-card-head { padding-right: 12px; } .est-folder-list { margin-bottom: 12px; } /* Breadcrumb shown when inside a folder */ .est-folder-crumb { display: flex; align-items: center; gap: 8px; padding: 8px 4px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--border); flex-wrap: wrap; } .est-folder-crumb-sep { color: var(--text-muted); font-size: 13px; opacity: .6; } .est-folder-crumb-current { font-size: 14px; font-weight: 600; color: var(--text); } .est-folder-crumb-count { font-size: 11px; color: var(--text-muted); background: var(--surface2); padding: 2px 8px; border-radius: 99px; border: 1px solid var(--border); } .est-folder-crumb-actions { margin-left: auto; display: flex; gap: 4px; } /* Small folder chip shown inline on a product name (root / search only) */ .est-folder-chip { display: inline-flex; align-items: center; font-size: 10px; font-weight: 600; color: #059669; background: rgba(16,185,129,.1); padding: 1px 7px; border-radius: 99px; margin-left: 4px; vertical-align: 1px; } /* Section label between folders and unfiled products */ .est-section-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); padding: 10px 4px 6px; } /* Search-result header — makes it visually obvious search spans all folders */ .est-search-header { display: flex; align-items: baseline; gap: 8px; padding: 6px 4px 10px; border-bottom: 1px solid var(--border); margin-bottom: 8px; flex-wrap: wrap; } .est-search-header-count { font-size: 13px; font-weight: 700; color: var(--text); } .est-search-header-scope { font-size: 11px; color: var(--text-muted); } @media (max-width: 640px) { .est-folder-crumb { padding-bottom: 8px; } .est-folder-crumb-actions { margin-left: 0; width: 100%; } } /* ── Estimates Pro: multi-select mode on Products tab ───────────────────── */ /* Give the list extra bottom padding in select mode so the last card is not obscured by the sticky action bar at the bottom of the viewport. */ .est-list-select-mode { padding-bottom: 80px; } /* In select mode cards show a pointer cursor on their whole head */ .est-card-selectable .jcs-lib-card-head { cursor: pointer; } .est-card-selectable:hover { box-shadow: 0 2px 10px rgba(0,0,0,.06); } /* Custom checkbox pill (we draw it ourselves — no ) so clicks on it bubble up to the card-head handler consistently. */ .est-check { width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--border); background: var(--surface); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: transparent; transition: background .12s, border-color .12s, color .12s; } .est-card-selected .est-check { background: var(--primary); border-color: var(--primary); color: #fff; } .est-card-selected { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 6%, var(--surface)); } .est-card-selected .jcs-lib-card-head { background: transparent; } /* Inert folder cards while in select mode — desaturated, no pointer cursor */ .est-folder-card-inert { opacity: .55; cursor: default; pointer-events: none; } /* Sticky action bar at the bottom of the viewport */ .est-select-bar { position: fixed; left: 50%; transform: translateX(-50%); bottom: 16px; z-index: 1000; display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.08); max-width: calc(100% - 24px); } .est-select-bar-count { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text); padding-right: 10px; border-right: 1px solid var(--border); flex-shrink: 0; } .est-select-bar-dot { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 99px; background: var(--primary); color: #fff; font-size: 12px; font-weight: 700; } .est-select-bar-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .est-select-bar-danger { color: var(--danger); } .est-select-bar-danger:not(:disabled):hover { background: rgba(239,68,68,.1); color: var(--danger); } .est-select-bar-danger:disabled { color: var(--text-muted); opacity: .55; } /* Undo toast — richer than #toastNotif (clickable, contains a button). Lives slightly above the default toast so it doesn't collide if both appear. `position: relative` + extra bottom padding to host the countdown bar. */ .est-undo-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(12px); z-index: 2100; display: flex; align-items: center; gap: 8px; padding: 8px 6px 12px 16px; background: var(--card); color: var(--text); border: 1px solid var(--border-light); border-radius: 10px; box-shadow: var(--shadow); font-size: 13px; font-weight: 500; opacity: 0; transition: opacity .22s, transform .22s; max-width: calc(100% - 24px); overflow: hidden; /* clip the progress bar to the rounded corners */ } .est-undo-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } .est-undo-toast-msg { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .est-undo-toast-btn { background: none; border: none; color: var(--primary); font-size: 13px; font-weight: 700; padding: 4px 10px; border-radius: 6px; cursor: pointer; transition: background .15s; } .est-undo-toast-btn:hover:not(:disabled) { background: rgba(16,185,129,.12); } .est-undo-toast-btn:disabled { opacity: .5; cursor: not-allowed; } .est-undo-toast-close { background: none; border: none; color: var(--text-muted); font-size: 14px; padding: 4px 8px; border-radius: 6px; cursor: pointer; line-height: 1; } .est-undo-toast-close:hover { color: var(--text); background: var(--surface2); } /* Countdown progress bar — pinned to the bottom inside edge. Duration is driven by the --est-undo-duration CSS var set inline from JS so it matches the dismiss timer exactly. scaleX gives a silky-smooth shrink. */ .est-undo-toast-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: transparent; } .est-undo-toast-progress-bar { height: 100%; width: 100%; background: var(--primary); opacity: .6; transform-origin: left center; animation: est-undo-toast-shrink var(--est-undo-duration, 7000ms) linear forwards; } /* Pause the countdown bar whenever the pointer is over the toast. JS pauses the dismiss timer in lockstep so the bar's visual state stays accurate. */ .est-undo-toast:hover .est-undo-toast-progress-bar { animation-play-state: paused; } @keyframes est-undo-toast-shrink { from { transform: scaleX(1); } to { transform: scaleX(0); } } @media (max-width: 640px) { .est-undo-toast { left: 12px; right: 12px; transform: translateY(12px); max-width: none; } .est-undo-toast.show { transform: translateY(0); } .est-undo-toast-msg { white-space: normal; } } /* Move-to-folder picker options — vertical list with hover state */ .est-move-folder-list { display: flex; flex-direction: column; gap: 4px; max-height: 50vh; overflow-y: auto; } .est-move-folder-opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--text); text-align: left; transition: background .12s, border-color .12s; } .est-move-folder-opt:hover:not(:disabled) { background: var(--surface2); border-color: var(--primary); } .est-move-folder-opt:disabled { opacity: .5; cursor: not-allowed; } .est-move-folder-icon { width: 28px; height: 28px; border-radius: 8px; background: rgba(16,185,129,.12); color: #059669; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; } .est-move-folder-name { flex: 1; min-width: 0; } .est-move-folder-new { border-style: dashed; } @media (max-width: 640px) { .est-select-bar { left: 8px; right: 8px; transform: none; bottom: 10px; padding: 8px 10px; gap: 8px; } .est-select-bar-count { padding-right: 8px; font-size: 12px; } .est-select-bar-actions .btn { padding-left: 8px; padding-right: 8px; } .est-list-select-mode { padding-bottom: 100px; } } /* Trade pill */ .jcs-trade-pill { display: inline-flex; align-items: center; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 1px 7px; border-radius: 99px; background: rgba(245,158,11,.12); color: #b45309; } /* ICH linked badge */ .jcs-ich-badge { display: inline-flex; align-items: center; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: rgba(16,185,129,.12); color: var(--primary); flex-shrink: 0; } .jcs-ich-btn { background: none; border: none; cursor: pointer; padding: 0; } .jcs-link-btn { background: none; border: none; cursor: pointer; color: var(--primary); font-size: inherit; padding: 0; text-align: left; transition: opacity .15s; } .jcs-link-btn:hover { opacity: .75; } .jcs-ich-search-results { position: fixed; background: var(--surface); border: 1.5px solid var(--border); border-radius: 8px; z-index: 99999; max-height: 260px; overflow-y: auto; box-shadow: 0 8px 32px rgba(0,0,0,.35); } .jcs-ich-result-row { padding: 10px 14px; cursor: pointer; border-bottom: 1px solid var(--border); transition: background .12s; } .jcs-ich-result-row:last-child { border-bottom: none; } .jcs-ich-result-row:hover { background: rgba(99,102,241,.12); } .jcs-ich-result-name { font-size: 13px; font-weight: 600; color: var(--text); } .jcs-ich-result-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; } .jcs-ich-result-empty { padding: 12px 14px; font-size: 13px; color: var(--text-muted); text-align: center; } /* Inline table custom search dropdowns (Materials + Subs) */ .jcs-tcell-dd { position: fixed; background: var(--surface); border: 1.5px solid var(--border); border-radius: 8px; z-index: 99999; max-height: 220px; overflow-y: auto; box-shadow: 0 8px 24px rgba(0,0,0,.3); } .jcs-tcell-dd-row { padding: 8px 12px; cursor: pointer; border-bottom: 1px solid var(--border); transition: background .12s; } .jcs-tcell-dd-row:last-child { border-bottom: none; } .jcs-tcell-dd-row:hover { background: rgba(99,102,241,.12); } /* Keyboard-nav active state — slightly stronger than hover so it reads as "this is what Enter will commit" when the user is arrow-keying through matches. Kept in the same family as the hover tint to feel consistent. */ .jcs-tcell-dd-row.jcs-tcell-dd-row-active { background: rgba(99,102,241,.22); box-shadow: inset 2px 0 0 rgba(99,102,241,.7); } .jcs-tcell-dd-name { font-size: 12.5px; font-weight: 600; color: var(--text); } .jcs-tcell-dd-meta { font-size: 11px; color: var(--text-muted); margin-top: 1px; } /* "+ Create new product" — appended to the product autocomplete when the typed query doesn't match an existing library product. Visually separated from the match rows so it's unmistakable that this is an action, not a match. */ .jcs-tcell-dd-create { border-top: 1px dashed var(--border); background: var(--surface2); } .jcs-tcell-dd-create:hover { background: rgba(16,185,129,.12); } .jcs-tcell-dd-create .jcs-tcell-dd-name { color: #059669; } /* Library form modal — narrower than the main form */ .jcs-lib-form-modal { max-width: 700px; } /* ── Form topbar (sticky header with title + action buttons) ─────────────── */ .jcs-form-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--border); background: var(--surface); position: sticky; top: 0; z-index: 10; flex-shrink: 0; } .jcs-form-title { font-size: 15px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ── Form body (two-column layout inside estimate form) ──────────────────── */ .jcs-form-body { display: flex; gap: 0; min-height: 0; } @media (max-width: 700px) { .jcs-form-body { flex-direction: column; } } /* Right column gets a left border separator */ .jcs-pl-col-right { border-left: 1px solid var(--border); padding-left: 0; } /* ══════════════════════════════════════════════════════════════════════════════ Estimates Pro — CSS ══════════════════════════════════════════════════════════════════════════════ */ /* ── Status badge ────────────────────────────────────────────────────────────── */ .est-status-badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .est-status-draft { background: rgba(148,163,184,.15); color: #94a3b8; } .est-status-sent { background: rgba(59,130,246,.15); color: #60a5fa; } .est-status-accepted{ background: rgba(16,185,129,.15); color: #34d399; } .est-status-paid { background: rgba(245,158,11,.15); color: #fbbf24; } .est-status-declined{ background: rgba(239,68,68,.15); color: #f87171; } /* ── Estimate card ───────────────────────────────────────────────────────────── */ .est-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 10px; overflow: hidden; transition: border-color .15s; } .est-card:hover { border-color: var(--border-light); } .est-card-header { display: flex; align-items: center; gap: 12px; padding: 14px 18px; cursor: pointer; user-select: none; } .est-card-num { font-size: 13px; font-weight: 700; color: var(--primary); flex-shrink: 0; min-width: 72px; } .est-card-customer { flex: 1; font-size: 13.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .est-card-date { font-size: 12px; color: var(--text-muted); flex-shrink: 0; } .est-card-total { font-size: 14px; font-weight: 700; color: var(--text); flex-shrink: 0; min-width: 80px; text-align: right; } .est-card-chevron { width: 16px; height: 16px; color: var(--text-muted); flex-shrink: 0; transition: transform .2s; } .est-card-chevron.open { transform: rotate(180deg); } .est-card-body { border-top: 1px solid var(--border); padding: 14px 18px; display: flex; flex-direction: column; gap: 14px; } /* item rows inside expanded estimate */ .est-item-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); padding: 3px 0; border-bottom: 1px solid rgba(255,255,255,.04); } .est-item-row:last-child { border-bottom: none; } .est-item-name { flex: 1; color: var(--text); } .est-item-qty { flex-shrink: 0; min-width: 40px; text-align: right; } .est-item-price{ flex-shrink: 0; min-width: 70px; text-align: right; } .est-item-total{ flex-shrink: 0; min-width: 80px; text-align: right; font-weight: 600; color: var(--text); } /* ── Totals grid ─────────────────────────────────────────────────────────────── */ .est-totals-grid { display: flex; flex-direction: column; gap: 6px; padding: 12px 16px; background: var(--surface2); border-radius: var(--radius-sm); border: 1px solid var(--border); } .est-total-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--text-muted); } .est-total-row .label { } .est-total-row .val { font-weight: 600; color: var(--text); } .est-grand-total { border-top: 1px solid var(--border); padding-top: 8px; margin-top: 4px; font-size: 15px; font-weight: 700; color: var(--primary); } .est-grand-total .val { color: var(--primary); } .est-balance-row { color: var(--accent); } .est-balance-row .val { color: var(--accent); } /* ── Card action bar ────────────────────────────────────────────────────────── */ .est-card-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .est-status-select { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-size: 12px; padding: 5px 10px; cursor: pointer; outline: none; } .est-status-select:focus { border-color: var(--primary); } /* ── Terms tab ───────────────────────────────────────────────────────────────── */ .est-term-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 8px; transition: border-color .15s; } .est-term-row:hover { border-color: var(--border-light); } .est-term-toggle { position: relative; width: 36px; height: 20px; flex-shrink: 0; margin-top: 2px; } .est-term-toggle input { opacity: 0; width: 0; height: 0; } .est-term-check { position: absolute; inset: 0; background: var(--surface2); border: 1px solid var(--border); border-radius: 999px; cursor: pointer; transition: background .2s, border-color .2s; } .est-term-toggle input:checked + .est-term-check { background: var(--primary); border-color: var(--primary); } .est-term-dot { position: absolute; width: 14px; height: 14px; background: #fff; border-radius: 50%; top: 2px; left: 2px; transition: transform .2s; pointer-events: none; } .est-term-toggle input:checked ~ .est-term-dot { transform: translateX(16px); } .est-term-text { flex: 1; font-size: 13px; color: var(--text); line-height: 1.55; } .est-term-inactive .est-term-text { color: var(--text-muted); text-decoration: line-through; opacity: .6; } /* Inline rich-text editor on a term row (Bold / Italic / Underline only) */ .est-term-row.est-term-editing { flex-direction: column; align-items: stretch; padding: 10px 12px; gap: 8px; border-color: var(--primary); } .est-term-editor { display: flex; flex-direction: column; gap: 8px; width: 100%; } .est-term-toolbar { display: flex; align-items: center; gap: 4px; padding: 4px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); } .est-tb-btn { min-width: 28px; height: 28px; padding: 0 8px; background: transparent; border: 1px solid transparent; border-radius: 4px; cursor: pointer; font-size: 13px; color: var(--text); transition: background .12s, border-color .12s; } .est-tb-btn:hover { background: var(--card); border-color: var(--border); } .est-tb-btn:active { background: var(--border); } .est-tb-btn b, .est-tb-btn i, .est-tb-btn u { font-style: inherit; } .est-tb-btn i { font-style: italic; } .est-tb-btn u { text-decoration: underline; } .est-tb-hint { margin-left: auto; padding-right: 6px; font-size: 11px; color: var(--text-muted); } .est-term-ce { min-height: 72px; padding: 10px 12px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 13px; color: var(--text); line-height: 1.55; outline: none; white-space: pre-wrap; word-wrap: break-word; } .est-term-ce:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(16,185,129,.12); } .est-term-ce:empty::before { content: attr(data-placeholder); color: var(--text-muted); pointer-events: none; } .est-term-editor-actions { display: flex; justify-content: flex-end; gap: 8px; } @media (max-width: 600px) { .est-tb-hint { display: none; } .est-term-editor-actions { justify-content: stretch; } .est-term-editor-actions .btn { flex: 1; } } .est-term-edit-btn { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 2px 6px; border-radius: 4px; font-size: 12px; transition: color .15s, background .15s; flex-shrink: 0; } .est-term-edit-btn:hover { color: var(--text); background: rgba(255,255,255,.06); } /* ── Terms library: category sections ──────────────────────────────────────── */ .est-term-cat-section { margin-bottom: 20px; } .est-term-cat-header { display: flex; align-items: center; justify-content: space-between; padding: 5px 4px 7px; border-bottom: 1px solid var(--border); margin-bottom: 8px; } .est-term-cat-label { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; } .est-term-cat-add { font-size: 11px; padding: 2px 8px; height: auto; line-height: 1.6; color: var(--primary); border-color: var(--primary); opacity: .85; } .est-term-cat-add:hover { opacity: 1; } .est-term-move-btn { font-size: 11px; padding: 0 5px; opacity: .7; } .est-term-move-btn:hover:not(:disabled) { opacity: 1; } .est-term-move-btn:disabled { opacity: .25; cursor: default; } .est-term-cat-empty { font-size: 12px; color: var(--text-muted); padding: 6px 4px 4px; font-style: italic; } /* ── Editor meta row (category dropdown) ──────────────────────────────────── */ .est-term-editor-meta { display: flex; align-items: center; gap: 8px; margin-top: 2px; } .est-term-meta-label { font-size: 11px; color: var(--text-muted); flex-shrink: 0; } /* ── Send modal: T&C picker ────────────────────────────────────────────────── */ .est-terms-picker { border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 0; overflow: hidden; background: var(--surface2); } .est-terms-picker summary { list-style: none; } .est-terms-picker summary::-webkit-details-marker { display: none; } .est-terms-picker-summary { display: flex; align-items: center; gap: 6px; padding: 10px 14px; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--text); user-select: none; transition: background .15s; } .est-terms-picker-summary:hover { background: rgba(255,255,255,.04); } .est-terms-picker[open] .est-terms-picker-summary svg { transform: rotate(180deg); } .est-terms-picker-summary svg { transition: transform .2s; } .est-terms-active-cats { font-size: 11px; font-weight: 500; color: var(--text-muted); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .est-terms-count-badge { margin-left: auto; flex-shrink: 0; font-size: 11px; font-weight: 600; color: var(--primary); background: rgba(16,185,129,.1); border: 1px solid rgba(16,185,129,.25); border-radius: 999px; padding: 1px 8px; } .est-terms-picker-body { padding: 4px 14px 12px; border-top: 1px solid var(--border); max-height: 260px; overflow-y: auto; } .est-terms-send-group { margin-bottom: 10px; } .est-terms-send-group-hdr { padding: 6px 0 4px; border-bottom: 1px solid var(--border); margin-bottom: 4px; } .est-terms-send-group-all { display: flex; align-items: center; gap: 7px; cursor: pointer; } .est-terms-send-group-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); } .est-terms-send-item { display: flex; align-items: flex-start; gap: 8px; padding: 5px 0 5px 4px; cursor: pointer; border-radius: 4px; transition: background .12s; } .est-terms-send-item:hover { background: rgba(255,255,255,.04); } .est-terms-send-cb { flex-shrink: 0; margin-top: 2px; cursor: pointer; accent-color: var(--primary); } .est-terms-send-item-text { font-size: 12px; color: var(--text-muted); line-height: 1.45; } /* ── Product form: custom fields ─────────────────────────────────────────────── */ .est-custom-field-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .est-custom-field-row .field-input { flex: 1; } .est-custom-field-del { background: none; border: none; cursor: pointer; color: var(--danger); font-size: 16px; padding: 0 4px; line-height: 1; opacity: .7; transition: opacity .15s; } .est-custom-field-del:hover { opacity: 1; } /* ── Estimate form: line items ───────────────────────────────────────────────── */ .est-line-item { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 8px; position: relative; } .est-line-item-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .est-line-item-name { flex: 1; font-size: 13px; font-weight: 600; color: var(--text); } .est-line-item-del { background: none; border: none; cursor: pointer; color: var(--danger); font-size: 18px; line-height: 1; opacity: .7; transition: opacity .15s; padding: 0; } .est-line-item-del:hover { opacity: 1; } .est-line-item-row { display: grid; grid-template-columns: 1fr 90px 100px 90px; gap: 8px; align-items: end; } @media (max-width: 540px) { .est-line-item-row { grid-template-columns: 1fr 1fr; } } @media (max-width: 380px) { .est-line-item-row { grid-template-columns: 1fr; } } .est-line-item-notes { margin-top: 8px; } /* ── Discount row in form ────────────────────────────────────────────────────── */ .est-discount-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 6px; } .est-discount-name { font-size: 13px; color: var(--text); flex: 1; } .est-discount-val { font-size: 13px; color: var(--text-muted); } .est-discount-del { background: none; border: none; cursor: pointer; color: var(--danger); font-size: 16px; opacity: .7; transition: opacity .15s; padding: 0 4px; } .est-discount-del:hover { opacity: 1; } /* ── Estimate form live totals bar ───────────────────────────────────────────── */ .est-live-totals { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; } /* ── Stats bar extras ────────────────────────────────────────────────────────── */ .est-stat-divider { width: 1px; background: var(--border); margin: 8px 0; } /* ── Product card ────────────────────────────────────────────────────────────── */ .est-product-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 10px; overflow: hidden; transition: border-color .15s; } .est-product-card:hover { border-color: var(--border-light); } .est-product-card-header { display: flex; align-items: center; gap: 12px; padding: 14px 18px; cursor: pointer; user-select: none; } .est-product-img { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; background: var(--surface2); border: 1px solid var(--border); flex-shrink: 0; } .est-product-img-placeholder { width: 40px; height: 40px; border-radius: 6px; background: var(--surface2); border: 1px solid var(--border); flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--text-faint); font-size: 18px; } .est-product-name { flex: 1; font-size: 13.5px; font-weight: 600; color: var(--text); } .est-product-price { font-size: 14px; font-weight: 700; color: var(--primary); flex-shrink: 0; } .est-product-body { border-top: 1px solid var(--border); padding: 14px 18px; } .est-product-desc { font-size: 13px; color: var(--text-muted); margin-bottom: 10px; line-height: 1.55; } .est-product-field { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-muted); padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,.04); } .est-product-field:last-child { border-bottom: none; } .est-product-field-label { font-weight: 600; color: var(--text); min-width: 100px; } /* ── Discount card ───────────────────────────────────────────────────────────── */ .est-discount-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 18px; margin-bottom: 8px; display: flex; align-items: center; gap: 12px; transition: border-color .15s; } .est-discount-card:hover { border-color: var(--border-light); } .est-discount-card-icon { font-size: 22px; flex-shrink: 0; } .est-discount-card-name { flex: 1; font-size: 13.5px; font-weight: 600; color: var(--text); } .est-discount-card-val { font-size: 14px; font-weight: 700; color: var(--accent); } .est-discount-card-type { font-size: 11px; color: var(--text-muted); margin-left: 4px; } /* ── Year dropdown (Estimates Pro, mirrors JCS version) ──────────────────────── */ .est-year-dd { position: relative; flex-shrink: 0; } .est-year-dd-btn { display:flex; align-items:center; gap:6px; height:34px; padding:0 12px; background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text); font-size:13px; font-weight:600; cursor:pointer; transition:border-color .15s; white-space:nowrap; } .est-year-dd-btn:hover{ border-color:var(--primary); } .est-year-dd-caret { width:14px; height:14px; color:var(--text-muted); transition:transform .2s; } .est-year-dd-btn.open .est-year-dd-caret { transform:rotate(180deg); } .est-year-dd-panel { position:absolute; top:calc(100% + 4px); right:0; background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius-sm); box-shadow:0 8px 24px rgba(0,0,0,.35); z-index:9999; min-width:120px; overflow:hidden; } .est-year-dd-option { padding:8px 14px; font-size:13px; cursor:pointer; color:var(--text); transition:background .12s; } .est-year-dd-option:hover { background:rgba(99,102,241,.12); } .est-year-dd-active { color:var(--primary); background:rgba(99,102,241,.12); font-weight:700; } /* ── Empty state inside tabs ─────────────────────────────────────────────────── */ .est-empty-state { text-align: center; padding: 48px 24px; color: var(--text-muted); } .est-empty-state svg { width: 48px; height: 48px; margin-bottom: 12px; opacity: .3; } .est-empty-state p { font-size: 14px; margin-bottom: 16px; } /* ── Customer lookup in estimate form ────────────────────────────────────────── */ .est-cust-result { padding: 10px 14px; cursor: pointer; border-bottom: 1px solid var(--border); transition: background .12s; } .est-cust-result:last-child { border-bottom: none; } .est-cust-result:hover { background: rgba(99,102,241,.12); } .est-cust-result-name { font-size: 13px; font-weight: 600; color: var(--text); } .est-cust-result-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; } /* ── Image upload in product form ────────────────────────────────────────────── */ .est-img-preview { width: 80px; height: 80px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); cursor: pointer; } .est-img-upload-btn { width: 80px; height: 80px; border: 2px dashed var(--border); border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 11px; color: var(--text-muted); cursor: pointer; background: var(--surface2); transition: border-color .15s, color .15s; } .est-img-upload-btn:hover { border-color: var(--primary); color: var(--primary); } /* ── Radio group (discount form) ─────────────────────────────────────────────── */ .est-radio-group { display: flex; gap: 16px; align-items: center; } .est-radio-label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text); cursor: pointer; } .est-radio-label input[type=radio] { accent-color: var(--primary); width: 15px; height: 15px; } /* ── Nav tabs shared style (Estimates Pro) ───────────────────────────────────── */ .est-tab-nav { display: flex; gap: 2px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 3px; flex-wrap: wrap; } .est-tab-btn { flex: 1; min-width: 80px; padding: 7px 14px; background: none; border: none; border-radius: 5px; color: var(--text-muted); font-size: 13px; font-weight: 500; cursor: pointer; transition: background .15s, color .15s; white-space: nowrap; } .est-tab-btn:hover { color: var(--text); background: rgba(255,255,255,.05); } .est-tab-btn.active { background: var(--card); color: var(--text); font-weight: 600; } /* ════════════════════════════════════════════════════════════════════════ 3D Estimator Pro ════════════════════════════════════════════════════════════════════════ */ .e3d-key-indicator { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 99px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; border: 1px solid transparent; } .e3d-key-ok { background: rgba(16,185,129,.12); color: #10b981; border-color: rgba(16,185,129,.3); } .e3d-key-missing { background: rgba(245,158,11,.12); color: #f59e0b; border-color: rgba(245,158,11,.3); cursor: help; } /* Project grid */ .e3d-project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; padding: 16px 20px; } .e3d-project-card { background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; padding: 14px; cursor: pointer; transition: border-color .15s, transform .15s; display: flex; flex-direction: column; gap: 8px; } .e3d-project-card:hover { border-color: var(--primary); transform: translateY(-1px); } .e3d-project-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; } .e3d-project-card-title { font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.3; } .e3d-project-card-del { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 2px 4px; border-radius: 4px; opacity: .6; transition: opacity .15s, color .15s, background .15s; display: flex; align-items: center; } .e3d-project-card-del:hover { opacity: 1; color: #ef4444; background: rgba(239,68,68,.08); } .e3d-project-card-cust { font-size: 12px; color: var(--text-muted); margin-top: -4px; } .e3d-project-card-meta { display: flex; flex-wrap: wrap; gap: 5px; } .e3d-chip { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; padding: 2px 7px; border-radius: 4px; background: var(--surface); color: var(--text-muted); border: 1px solid var(--border); } .e3d-chip-ok { background: rgba(16,185,129,.12); color: #10b981; border-color: rgba(16,185,129,.3); } .e3d-chip-pending { background: rgba(245,158,11,.12); color: #f59e0b; border-color: rgba(245,158,11,.3); } .e3d-chip-accent { background: rgba(99,102,241,.15); color: #818cf8; border-color: rgba(99,102,241,.35); } .e3d-project-card-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--border); } .e3d-stat { display: flex; flex-direction: column; align-items: flex-start; } .e3d-stat-v { font-size: 15px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; } .e3d-stat-k { font-size: 9px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .3px; margin-top: 1px; } /* Detail view grid */ .e3d-detail-grid { display: grid; grid-template-columns: 280px minmax(0, 1fr) 320px; gap: 14px; padding: 14px 16px; align-items: start; } @media (max-width: 1200px) { .e3d-detail-grid { grid-template-columns: 1fr 1fr; } .e3d-panel-3d { grid-column: 1 / -1; order: -1; } } @media (max-width: 768px) { .e3d-detail-grid { grid-template-columns: 1fr; padding: 10px 8px; gap: 10px; } } .e3d-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 4px; } .e3d-panel-3d { padding: 12px; min-height: 480px; } .e3d-panel-title { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); margin-bottom: 8px; } .e3d-panel-hint { font-size: 10px; font-weight: 500; text-transform: none; letter-spacing: 0; margin-left: auto; color: var(--text-muted); opacity: .7; } .e3d-title-input { background: transparent; border: none; color: var(--text); font-size: 14px; font-weight: 700; padding: 4px 6px; border-radius: 4px; min-width: 200px; max-width: 400px; } .e3d-title-input:hover, .e3d-title-input:focus { background: var(--surface2); outline: none; } /* Photos */ .e3d-photos-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-bottom: 8px; } .e3d-photo-thumb { position: relative; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; aspect-ratio: 4/3; background: var(--surface2); } .e3d-photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .e3d-photo-del { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 50%; background: rgba(0,0,0,.7); color: #fff; border: none; font-size: 14px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; } .e3d-photo-del:hover { background: #ef4444; } .e3d-photos-empty { grid-column: 1 / -1; padding: 24px 12px; text-align: center; font-size: 11px; color: var(--text-muted); line-height: 1.5; background: var(--surface2); border-radius: 6px; border: 1px dashed var(--border); } .e3d-photo-actions { display: flex; gap: 6px; } /* AI box */ .e3d-ai-box { background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; padding: 12px; margin-top: 4px; } .e3d-ai-status { display: flex; align-items: center; gap: 10px; } .e3d-ai-spinner { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--border); border-top-color: var(--primary); animation: e3d-spin .8s linear infinite; flex-shrink: 0; } @keyframes e3d-spin { to { transform: rotate(360deg); } } .e3d-ai-status-title { font-size: 12px; font-weight: 700; color: var(--text); } .e3d-ai-status-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; } .e3d-ai-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin: 10px 0 8px; } .e3d-ai-kv { background: var(--surface); padding: 6px 8px; border-radius: 5px; display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 11px; } .e3d-ai-kv span { color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .3px; font-size: 9px; } .e3d-ai-kv strong { color: var(--text); font-variant-numeric: tabular-nums; font-size: 12px; } .e3d-ai-obs { font-size: 11px; color: var(--text-muted); line-height: 1.55; background: var(--surface); padding: 8px 10px; border-radius: 5px; border-left: 2px solid var(--primary); margin-top: 4px; } .e3d-ai-actions { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; } .e3d-ai-idle { text-align: left; } .e3d-ai-error { display: flex; flex-direction: column; gap: 6px; } /* 3D canvas */ .e3d-canvas-wrap { width: 100%; height: 420px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: #1a1d24; margin-bottom: 12px; } .e3d-canvas-wrap canvas { display: block; width: 100% !important; height: 100% !important; } .e3d-canvas-err { padding: 80px 20px; text-align: center; color: #f59e0b; font-size: 13px; } /* Dimension inputs */ .e3d-dim-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; } .e3d-dim-field { display: flex; flex-direction: column; gap: 4px; font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .3px; position: relative; } .e3d-dim-field input { padding: 8px 10px; background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; transition: border-color .15s; } .e3d-dim-field input:focus { outline: none; border-color: var(--primary); } .e3d-dim-field em { color: var(--primary); font-style: italic; font-weight: 700; } .e3d-dim-suffix { position: absolute; right: 10px; bottom: 9px; font-size: 11px; color: var(--text-muted); pointer-events: none; text-transform: none; } /* Measurements panel */ .e3d-meas-list { display: flex; flex-direction: column; } .e3d-meas-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 4px; border-bottom: 1px solid var(--border); font-size: 12px; } .e3d-meas-row:last-child { border-bottom: none; } .e3d-meas-row.e3d-meas-net { background: rgba(99,102,241,.06); padding: 10px 8px; margin: 0 -4px; border-radius: 5px; } .e3d-meas-label { color: var(--text-muted); } .e3d-meas-val { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 13px; } .e3d-meas-unit { font-size: 10px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .3px; } .e3d-waste-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; } /* Settings tab */ .e3d-settings { padding: 20px; max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; } .e3d-settings-section { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 18px 20px; } .e3d-settings-title { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 8px; } .e3d-settings-desc { font-size: 12px; color: var(--text-muted); line-height: 1.65; } .e3d-settings-keybox { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; } .e3d-settings-key-current { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: rgba(16,185,129,.08); border: 1px solid rgba(16,185,129,.25); border-radius: 6px; font-size: 12px; color: var(--text); } .e3d-settings-key-current code { background: var(--surface2); padding: 2px 6px; border-radius: 3px; font-size: 11px; color: var(--text-muted); } .e3d-settings-key-row { display: flex; gap: 6px; align-items: center; } .e3d-settings-key-row input { flex: 1; } .e3d-settings-key-status { font-size: 11px; min-height: 14px; } /* ─── Manage Lists modal (openManageListsModal) ───────────────────────────── On narrow viewports, stack the contractor count + last-modified timestamp below the list name instead of crowding them on a single line, and put the Rename/Delete actions on their own row so tap targets stay comfortable. */ @media (max-width: 480px) { #manageListsModal .ml-row { flex-wrap: wrap; gap: 6px !important; padding: 10px 14px !important; } #manageListsModal .ml-view { flex-wrap: wrap; row-gap: 2px; width: 100%; flex: 1 1 100% !important; } #manageListsModal .ml-view > span:first-child { flex: 1 1 100%; white-space: normal !important; } #manageListsModal .ml-view > span:not(:first-child) { margin-left: 0 !important; padding-left: 0 !important; border-left: none !important; } #manageListsModal .ml-view > span:nth-child(n+3) { position: relative; padding-left: 8px !important; margin-left: 4px !important; } #manageListsModal .ml-view > span:nth-child(n+3)::before { content: "·"; position: absolute; left: 0; color: var(--text-faint); } #manageListsModal .ml-actions { width: 100%; justify-content: flex-end; } #manageListsModal .ml-actions button { flex: 0 0 auto; padding: 7px 12px !important; font-size: 12px !important; } #manageListsModal .ml-edit { width: 100%; flex: 1 1 100% !important; flex-wrap: wrap; } #manageListsModal .ml-edit-input { flex: 1 1 100% !important; } } /* ══════════════════════════════════════════════════════════════════════════ Social Review — Usage widget + Upkeep (monthly sweeps) ══════════════════════════════════════════════════════════════════════════ */ /* ── Google usage this month (under dashboard, always visible) ──────────── */ .sr-usage { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px 16px; margin-bottom: 14px; } .sr-usage-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; gap: 8px; flex-wrap: wrap; } .sr-usage-title { font-size: 13px; font-weight: 700; color: #111827; } .sr-usage-sub { font-size: 11px; color: #6b7280; } .sr-usage-refresh { font-size: 11px; background: #f3f4f6; border: 1px solid #d1d5db; color: #374151; border-radius: 6px; padding: 3px 8px; cursor: pointer; } .sr-usage-refresh:hover { background: #e5e7eb; } /* Right-side action row inside the usage widget header — holds the GCP quotas link and the Refresh button side-by-side. */ .sr-usage-head-actions { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* External link to Google Cloud Console quotas page. Same visual weight as .sr-usage-refresh but with Google-blue accent + external-link icon so the admin can spot at a glance that it leaves the app. */ .sr-usage-gcp-link { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: #4285F4; background: rgba(66,133,244,.08); border: 1px solid rgba(66,133,244,.25); border-radius: 6px; padding: 3px 9px; text-decoration: none; white-space: nowrap; } .sr-usage-gcp-link:hover { background: rgba(66,133,244,.15); border-color: rgba(66,133,244,.4); text-decoration: none; } .sr-usage-gcp-link svg { flex-shrink: 0; } .sr-usage-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .sr-usage-tile { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 6px; padding: 8px 10px; } .sr-usage-tile-lbl { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #6b7280; line-height: 1.2; } .sr-usage-tile-n { font-size: 15px; font-weight: 700; color: #111827; line-height: 1.2; margin-top: 3px; } .sr-usage-tile-n .sr-usage-cap { font-size: 11px; font-weight: 500; color: #9ca3af; margin-left: 4px; } .sr-usage-tile-bar { height: 4px; background: #e5e7eb; border-radius: 999px; overflow: hidden; margin-top: 6px; } .sr-usage-tile-bar-fill { height: 100%; background: #10b981; transition: width .3s, background .3s; } .sr-usage-tile.is-warn .sr-usage-tile-bar-fill { background: #f59e0b; } .sr-usage-tile.is-over .sr-usage-tile-bar-fill { background: #ef4444; } .sr-usage-tile.is-warn .sr-usage-tile-n { color: #b45309; } .sr-usage-tile.is-over .sr-usage-tile-n { color: #b91c1c; } @media (max-width: 720px) { .sr-usage-grid { grid-template-columns: repeat(2, 1fr); } } /* ── Safety ceiling banner inside Batch view ───────────────────────────── */ .sr-ceiling-banner { background: #fffbeb; border: 1px solid #fcd34d; border-radius: 6px; padding: 10px 12px; margin-top: 12px; font-size: 12px; color: #78350f; line-height: 1.5; } .sr-ceiling-banner.is-over { background: #fef2f2; border-color: #fca5a5; color: #7f1d1d; } .sr-ceiling-banner strong { font-weight: 700; } /* ── Upkeep view: two sweep cards (close-detection + review refresh) ───── */ .sr-upkeep-intro { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 14px 16px; margin-bottom: 14px; } .sr-upkeep-title { font-size: 16px; font-weight: 700; color: #111827; } .sr-upkeep-sub { font-size: 12px; color: #6b7280; margin-top: 4px; line-height: 1.5; } .sr-sweep-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 14px 16px; margin-bottom: 12px; } .sr-sweep-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; } .sr-sweep-title-wrap { min-width: 0; flex: 1 1 260px; } .sr-sweep-title { font-size: 14px; font-weight: 700; color: #111827; } .sr-sweep-sku { display: inline-block; margin-left: 6px; padding: 2px 6px; border-radius: 4px; background: #eef2ff; color: #3730a3; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; vertical-align: middle; } .sr-sweep-sku.is-essentials { background: #ecfdf5; color: #065f46; } .sr-sweep-sku.is-reviews { background: #fef2f2; color: #991b1b; } .sr-sweep-desc { font-size: 12px; color: #6b7280; line-height: 1.5; margin-top: 4px; } .sr-sweep-scope { font-size: 12px; color: #374151; background: #f3f4f6; border-radius: 6px; padding: 6px 10px; font-weight: 600; white-space: nowrap; } .sr-sweep-scope strong { color: #111827; } .sr-sweep-controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; } .sr-sweep-progress-bar { height: 8px; background: #f3f4f6; border-radius: 999px; overflow: hidden; margin: 10px 0; } .sr-sweep-progress-fill { height: 100%; background: linear-gradient(90deg, #3b82f6, #60a5fa); transition: width .3s; } .sr-sweep-counters { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 8px; } .sr-sweep-counter { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 6px; padding: 8px 10px; text-align: center; } .sr-sweep-counter-n { font-size: 17px; font-weight: 700; color: #111827; line-height: 1; } .sr-sweep-counter-lbl { font-size: 10px; color: #6b7280; text-transform: uppercase; letter-spacing: .04em; margin-top: 3px; font-weight: 600; } .sr-sweep-counter.is-checked .sr-sweep-counter-n { color: #2563eb; } .sr-sweep-counter.is-changed .sr-sweep-counter-n { color: #b45309; } .sr-sweep-counter.is-skipped .sr-sweep-counter-n { color: #9ca3af; } .sr-sweep-counter.is-error .sr-sweep-counter-n { color: #b91c1c; } .sr-sweep-log { max-height: 200px; overflow-y: auto; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 6px; padding: 6px 8px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px; line-height: 1.5; color: #374151; margin-top: 10px; } .sr-sweep-log-row { padding: 2px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sr-sweep-log-row.is-checked { color: #2563eb; } .sr-sweep-log-row.is-changed { color: #b45309; font-weight: 600; } .sr-sweep-log-row.is-skipped { color: #9ca3af; } .sr-sweep-log-row.is-error { color: #b91c1c; } .sr-sweep-status { font-size: 12px; color: #6b7280; margin-top: 8px; } .sr-sweep-status.is-done { color: #059669; font-weight: 600; } .sr-sweep-status.is-stopped { color: #b45309; font-weight: 600; } /* Review sweep mode toggle — "stale only" vs. "all in scope" + threshold selector. Sits between the scope row and the run controls. */ .sr-sweep-mode { margin-top: 12px; padding: 10px 12px; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; } .sr-sweep-mode-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; } .sr-sweep-mode-opt { flex: 1 1 180px; display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: #fff; border: 1px solid #e5e7eb; border-radius: 6px; cursor: pointer; transition: border-color .15s, background .15s; } .sr-sweep-mode-opt:hover { border-color: #9ca3af; } .sr-sweep-mode-opt.is-active { border-color: #2563eb; background: #eff6ff; } .sr-sweep-mode-opt input[type="radio"] { margin: 0; flex-shrink: 0; } .sr-sweep-mode-lbl { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .sr-sweep-mode-title { font-size: 13px; font-weight: 600; color: #111827; line-height: 1.2; } .sr-sweep-mode-count { font-size: 11px; color: #6b7280; font-variant-numeric: tabular-nums; } .sr-sweep-mode-threshold { display: flex; flex-direction: column; gap: 3px; min-width: 130px; } .sr-sweep-mode-threshold-lbl { font-size: 10px; color: #6b7280; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; } .sr-sweep-mode-threshold select { padding: 6px 8px; border: 1px solid #d1d5db; border-radius: 6px; background: #fff; font-size: 12px; color: #111827; cursor: pointer; } .sr-sweep-mode-threshold select:disabled { cursor: not-allowed; opacity: .6; } .sr-sweep-mode-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; font-size: 11px; color: #6b7280; } .sr-sweep-mode-last { font-weight: 600; color: #374151; } @media (max-width: 720px) { .sr-sweep-counters { grid-template-columns: repeat(2, 1fr); } .sr-sweep-mode-opt { flex-basis: 100%; } .sr-sweep-mode-threshold { min-width: 0; width: 100%; } } /* Utility card — shares look of sweep cards but quieter (no billing SKU badge, no cost lines). Used for one-shot housekeeping actions like the public mirror rebuild. */ .sr-utility-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 14px 16px; margin-top: 12px; display: flex; flex-direction: column; gap: 10px; } .sr-utility-head { display: flex; flex-direction: column; gap: 4px; } .sr-utility-title { font-size: 14px; font-weight: 600; color: #111827; } .sr-utility-sub { font-size: 12px; color: #6b7280; line-height: 1.5; } .sr-utility-sub code { background: #f3f4f6; border: 1px solid #e5e7eb; border-radius: 4px; padding: 1px 5px; font-size: 11px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .sr-utility-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .sr-utility-status { font-size: 12px; color: #6b7280; } .sr-utility-status.is-running { color: #4338ca; } .sr-utility-status.is-done { color: #065f46; } .sr-utility-status.is-error { color: #b91c1c; } /* ═══════════════════════════════════════════════════════════════════════════ SOCIAL HUB (.soc-*) ═══════════════════════════════════════════════════════════════════════════ */ /* ── Shell — uses shared tool-app-shell / tool-app-topbar from main CSS ── */ .soc-inner { max-width: 1400px; margin: 0 auto; padding: 0 24px 40px; } /* ── Tabs ───────────────────────────────────────────────────────────────── */ .soc-tabs { display: flex; gap: 4px; border-bottom: 2px solid #e5e7eb; margin-bottom: 20px; } .soc-tab { background: none; border: none; padding: 8px 16px; font-size: 14px; font-weight: 500; color: #6b7280; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: color 0.15s, border-color 0.15s; } .soc-tab:hover { color: #111827; } .soc-tab-active { color: #111827; border-bottom-color: #111827; } /* ── Compose button ─────────────────────────────────────────────────────── */ .soc-compose-btn { background: #111827; color: #fff; border: none; border-radius: 6px; padding: 8px 16px; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: opacity 0.15s; } .soc-compose-btn:hover { opacity: 0.85; } /* ── Loading / empty / error ────────────────────────────────────────────── */ .soc-loading, .soc-empty, .soc-err { text-align: center; color: #6b7280; padding: 48px 16px; font-size: 14px; } .soc-empty { display: flex; flex-direction: column; align-items: center; gap: 14px; } /* ── Posts toolbar (filter bar + view toggle) ───────────────────────────── */ .soc-posts-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; } .soc-filter-bar { display: flex; align-items: center; gap: 6px; flex: 1; flex-wrap: wrap; } .soc-filter-label { font-size: 11px; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; } .soc-filter-chips { display: flex; gap: 4px; flex-wrap: wrap; } .soc-filter-sep { width: 1px; height: 18px; background: #e5e7eb; flex-shrink: 0; margin: 0 4px; } .soc-filter-chip { font-size: 12px; font-weight: 500; padding: 3px 10px; border-radius: 12px; border: 1px solid #d1d5db; background: #fff; color: #374151; cursor: pointer; transition: background 0.1s, border-color 0.1s, color 0.1s; } .soc-filter-chip:hover { background: #f3f4f6; } .soc-filter-chip.soc-filter-chip-active { background: #111827; border-color: #111827; color: #fff; } .soc-filter-chip-published.soc-filter-chip-active { background: #065f46; border-color: #065f46; } .soc-filter-chip-scheduled.soc-filter-chip-active { background: #1e40af; border-color: #1e40af; } .soc-filter-chip-failed.soc-filter-chip-active { background: #b91c1c; border-color: #b91c1c; } .soc-view-toggle { display: flex; gap: 2px; margin-left: auto; flex-shrink: 0; } .soc-new-post-btn { margin-left: 12px; flex-shrink: 0; white-space: nowrap; } .soc-view-btn { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border: 1px solid #d1d5db; border-radius: 6px; background: #fff; color: #6b7280; cursor: pointer; transition: background 0.1s, color 0.1s; } .soc-view-btn:hover { background: #f3f4f6; color: #111827; } .soc-view-btn.soc-view-btn-active { background: #111827; border-color: #111827; color: #fff; } /* ── Posts table ─────────────────────────────────────────────────────────── */ .soc-table-wrap { overflow-x: auto; border: 1px solid #e5e7eb; border-radius: 8px; } .soc-table { width: 100%; border-collapse: collapse; font-size: 13px; color: #111827; } .soc-table thead { background: #f9fafb; border-bottom: 1px solid #e5e7eb; } .soc-table th { padding: 9px 12px; text-align: left; font-size: 11px; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; } .soc-tr { border-top: 1px solid #f3f4f6; cursor: pointer; transition: background 0.1s; } .soc-tr:first-child { border-top: none; } .soc-tr:hover { background: #f9fafb; } .soc-table td { padding: 10px 12px; vertical-align: middle; } .soc-th-media, .soc-td-media { width: 60px; } .soc-th-status { width: 100px; } .soc-th-date { width: 160px; } .soc-th-social { width: 100px; } .soc-th-actions { width: 1%; white-space: nowrap; } .soc-td-actions { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; padding-right: 14px; } .soc-table-thumb { width: 48px; height: 48px; object-fit: cover; border-radius: 5px; display: block; border: 1px solid #e5e7eb; } .soc-table-thumb-empty { width: 48px; height: 48px; border-radius: 5px; background: #f3f4f6; border: 1px dashed #d1d5db; } .soc-table-caption { display: block; line-height: 1.4; max-width: 340px; word-break: break-word; } .soc-table-error { font-size: 11px; color: #b91c1c; margin-top: 3px; } .soc-td-date { font-size: 12px; color: #374151; white-space: nowrap; } .soc-btn-live { font-size: 12px; font-weight: 500; padding: 5px 10px; border-radius: 5px; border: 1px solid #a7f3d0; background: #f0fdf4; color: #065f46; white-space: nowrap; text-decoration: none; cursor: pointer; display: inline-flex; align-items: center; transition: background 0.12s; } .soc-btn-live:hover { background: #d1fae5; } /* ── Posts calendar ──────────────────────────────────────────────────────── */ .soc-cal-wrap { border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; background: #fff; } .soc-cal-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-bottom: 1px solid #e5e7eb; background: #f9fafb; } .soc-cal-month-label { font-size: 15px; font-weight: 600; color: #111827; } .soc-cal-nav { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1; border: 1px solid #e5e7eb; border-radius: 5px; background: #fff; color: #374151; cursor: pointer; transition: background 0.1s; } .soc-cal-nav:hover { background: #f3f4f6; } .soc-cal-dow-row { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid #e5e7eb; background: #f9fafb; } .soc-cal-dow { padding: 6px 4px; text-align: center; font-size: 11px; font-weight: 600; color: #6b7280; text-transform: uppercase; } .soc-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); } .soc-cal-cell { min-height: 100px; padding: 6px 5px; border-right: 1px solid #f3f4f6; border-bottom: 1px solid #f3f4f6; vertical-align: top; overflow: hidden; } .soc-cal-cell:nth-child(7n) { border-right: none; } .soc-cal-cell-empty { background: #fafafa; } .soc-cal-cell-today { background: #fefce8; } .soc-cal-day-num { font-size: 12px; font-weight: 600; color: #374151; margin-bottom: 5px; } .soc-cal-cell-today .soc-cal-day-num { background: #111827; color: #fff; border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 11px; } /* ── Calendar post card ─────────────────────────────────────────────────── */ .soc-cal-card { background: #fff; border: 1px solid #e5e7eb; border-left-width: 3px; border-radius: 5px; margin-bottom: 4px; padding: 5px 6px 4px; cursor: pointer; overflow: hidden; transition: box-shadow 0.1s; } .soc-cal-card:hover { box-shadow: 0 1px 4px rgba(0,0,0,0.10); } .soc-cal-card--published { border-left-color: #059669; } .soc-cal-card--scheduled { border-left-color: #3b82f6; } .soc-cal-card--draft { border-left-color: #9ca3af; } .soc-cal-card--failed { border-left-color: #ef4444; } .soc-cal-card-top { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin-bottom: 2px; } .soc-cal-card-time { font-size: 10px; font-weight: 600; color: #6b7280; white-space: nowrap; } .soc-cal-card-plats { display: flex; gap: 3px; align-items: center; flex-shrink: 0; } .soc-plat-icon { display: block; flex-shrink: 0; } .soc-cal-card-caption { font-size: 11px; line-height: 1.35; color: #111827; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-bottom: 4px; word-break: break-word; } .soc-cal-card-img { width: 100%; border-radius: 3px; display: block; margin-bottom: 4px; max-height: 80px; object-fit: cover; } .soc-cal-card-footer { display: flex; align-items: center; } .soc-cal-card-footer .soc-badge { font-size: 9px; padding: 1px 5px; } /* ── See more button ────────────────────────────────────────────────────── */ .soc-cal-seemore { display: block; width: 100%; font-size: 10px; font-weight: 600; color: #3b82f6; background: none; border: none; padding: 2px 0; text-align: left; cursor: pointer; transition: color 0.1s; } .soc-cal-seemore:hover { color: #1d4ed8; } /* ── Day popup ───────────────────────────────────────────────────────────── */ .soc-day-popup-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.35); display: flex; align-items: center; justify-content: center; z-index: 9100; padding: 16px; } .soc-day-popup { background: #fff; border-radius: 10px; box-shadow: 0 8px 32px rgba(0,0,0,0.18); width: 100%; max-width: 420px; max-height: 80vh; display: flex; flex-direction: column; overflow: hidden; } .soc-day-popup-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 12px; border-bottom: 1px solid #e5e7eb; flex-shrink: 0; } .soc-day-popup-title { font-size: 15px; font-weight: 600; color: #111827; } .soc-day-popup-close { background: none; border: none; font-size: 16px; color: #6b7280; cursor: pointer; padding: 2px 6px; border-radius: 4px; line-height: 1; } .soc-day-popup-close:hover { background: #f3f4f6; color: #111; } .soc-day-popup-list { overflow-y: auto; padding: 8px 0; flex: 1; } .soc-day-popup-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 16px; cursor: pointer; transition: background 0.1s; border-bottom: 1px solid #f3f4f6; } .soc-day-popup-row:last-child { border-bottom: none; } .soc-day-popup-row:hover { background: #f9fafb; } .soc-day-popup-thumb { width: 48px; height: 48px; object-fit: cover; border-radius: 5px; flex-shrink: 0; border: 1px solid #e5e7eb; } .soc-day-popup-thumb-empty { width: 48px; height: 48px; border-radius: 5px; background: #f3f4f6; border: 1px dashed #d1d5db; flex-shrink: 0; } .soc-day-popup-row-body { flex: 1; min-width: 0; } .soc-day-popup-row-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; } .soc-day-popup-time { font-size: 12px; font-weight: 600; color: #374151; } .soc-day-popup-plats { display: flex; gap: 3px; align-items: center; } .soc-day-popup-caption { font-size: 13px; color: #374151; line-height: 1.4; word-break: break-word; } /* ── Legacy list rows (kept for reference, hidden) ───────────────────────── */ .soc-post-row { display: none; } .soc-post-error { font-size: 12px; color: #b91c1c; margin-top: 4px; } /* ── Status badges ──────────────────────────────────────────────────────── */ .soc-badge { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 10px; text-transform: uppercase; letter-spacing: 0.03em; } .soc-badge-draft { background: #f3f4f6; color: #374151; } .soc-badge-scheduled { background: #dbeafe; color: #1e40af; } .soc-badge-published { background: #d1fae5; color: #065f46; } .soc-badge-error { background: #fee2e2; color: #b91c1c; } /* ── Platform chips ─────────────────────────────────────────────────────── */ .soc-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: #374151; background: #f3f4f6; border-radius: 10px; padding: 2px 8px; } .soc-chip svg { vertical-align: middle; flex-shrink: 0; } /* ── Small action buttons ───────────────────────────────────────────────── */ .soc-btn-sm { font-size: 12px; font-weight: 500; padding: 5px 11px; border-radius: 5px; border: 1px solid #d1d5db; background: #fff; color: #374151; cursor: pointer; white-space: nowrap; transition: background 0.12s; } .soc-btn-sm:hover { background: #f3f4f6; } .soc-btn-sm.soc-btn-primary { background: #111827; color: #fff; border-color: #111827; } .soc-btn-sm.soc-btn-primary:hover { opacity: 0.85; } .soc-btn-sm.soc-btn-danger { color: #b91c1c; border-color: #fca5a5; } .soc-btn-sm.soc-btn-danger:hover { background: #fee2e2; } .soc-btn-secondary { background: #fff; color: #374151; border: 1px solid #d1d5db; } /* ── Connections tab ────────────────────────────────────────────────────── */ .soc-connect-grid { display: flex; flex-direction: column; gap: 12px; } .soc-connect-card { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; } .soc-connect-card-connected { border-color: #a7f3d0; background: #f0fdf4; } .soc-connect-card-icon { flex-shrink: 0; } .soc-connect-card-info { flex: 1; min-width: 0; } .soc-connect-card-name { font-size: 15px; font-weight: 600; color: #111827; margin-bottom: 2px; } .soc-connect-card-detail { font-size: 13px; color: #374151; } .soc-connect-card-none { color: #9ca3af; } .soc-connect-card-since { font-size: 12px; color: #6b7280; margin-top: 2px; } .soc-btn-connect { background: #111827; color: #fff; border: none; border-radius: 6px; padding: 8px 16px; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: opacity 0.15s; } .soc-btn-connect:hover { opacity: 0.85; } .soc-connect-card-soon { opacity: 0.6; background: #f9fafb; } .soc-btn-soon { display: inline-block; background: #e5e7eb; color: #6b7280; border-radius: 6px; padding: 8px 16px; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: default; } .soc-connect-help { margin-top: 18px; padding: 16px 18px; border: 1px solid #e5e7eb; border-radius: 8px; background: #f9fafb; } .soc-connect-help-title { font-size: 14px; font-weight: 700; color: #111827; margin-bottom: 10px; } .soc-connect-help-steps { margin: 0 0 10px; padding-left: 20px; } .soc-connect-help-steps li { font-size: 13px; color: #374151; margin-bottom: 7px; line-height: 1.55; } .soc-connect-help-note { font-size: 12.5px; color: #6b7280; line-height: 1.6; } .soc-connect-note { font-size: 12px; color: #6b7280; margin-top: 16px; line-height: 1.5; padding: 10px 14px; background: #f9fafb; border-radius: 6px; border: 1px solid #e5e7eb; } /* ── Compose / Edit modal ───────────────────────────────────────────────── */ .soc-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); display: flex; align-items: center; justify-content: center; z-index: 9000; padding: 16px; } .soc-modal { background: #fff; border-radius: 10px; width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.2); display: flex; flex-direction: column; } /* Wider compose variant: panels scroll internally, modal stays fixed */ .soc-modal--compose { max-height: 90vh; overflow: hidden; /* panels handle their own scrolling */ } .soc-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 12px; border-bottom: 1px solid #e5e7eb; position: sticky; top: 0; background: #fff; z-index: 1; } .soc-modal-header h3 { font-size: 16px; font-weight: 700; color: #111827; margin: 0; } .soc-modal-close { background: none; border: none; font-size: 18px; color: #6b7280; cursor: pointer; padding: 2px 6px; line-height: 1; border-radius: 4px; } .soc-modal-close:hover { background: #f3f4f6; color: #111827; } .soc-modal-body { padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; flex: 1; } .soc-modal-footer { padding: 12px 20px 16px; border-top: 1px solid #e5e7eb; display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; } .soc-label { font-size: 13px; font-weight: 600; color: #374151; display: block; margin-bottom: 4px; } .soc-label-opt { font-weight: 400; color: #9ca3af; } .soc-textarea, .soc-input { width: 100%; box-sizing: border-box; border: 1px solid #d1d5db; border-radius: 6px; padding: 9px 11px; font-size: 14px; color: #111827; font-family: inherit; background: #fff; transition: border-color 0.15s; resize: vertical; } .soc-textarea:focus, .soc-input:focus { outline: none; border-color: #6b7280; } .soc-platform-checks { display: flex; flex-direction: column; gap: 8px; } .soc-check-label { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #374151; cursor: pointer; } .soc-check-label input[type=checkbox] { width: 15px; height: 15px; cursor: pointer; } .soc-check-label svg { flex-shrink: 0; } .soc-check-label em { font-style: normal; color: #9ca3af; font-size: 12px; } .soc-check-disabled { opacity: 0.55; cursor: default; } .soc-check-disabled input { cursor: not-allowed; } .soc-modal-btn-cancel { background: none; border: 1px solid #d1d5db; border-radius: 6px; padding: 8px 16px; font-size: 14px; color: #374151; cursor: pointer; } .soc-modal-btn-cancel:hover { background: #f3f4f6; } .soc-modal-btn-save { background: #111827; color: #fff; border: none; border-radius: 6px; padding: 8px 18px; font-size: 14px; font-weight: 600; cursor: pointer; transition: opacity 0.15s; } .soc-modal-btn-save:hover { opacity: 0.85; } .soc-modal-btn-save:disabled { opacity: 0.5; cursor: not-allowed; } .soc-modal-btn-save.soc-btn-secondary { background: #fff; color: #374151; border: 1px solid #d1d5db; font-weight: 500; } .soc-modal-btn-save.soc-btn-secondary:hover { background: #f3f4f6; } .soc-modal-live-btn { margin-right: auto; /* push to left side of footer, away from the Save buttons */ font-size: 13px; padding: 7px 12px; } /* View Live when it's the only button (published view-only modal) */ .soc-modal-live-btn-right { font-size: 14px; font-weight: 600; padding: 8px 18px; border-radius: 6px; border: 1px solid #a7f3d0; background: #f0fdf4; color: #065f46; white-space: nowrap; text-decoration: none; display: inline-flex; align-items: center; transition: background 0.12s; } .soc-modal-live-btn-right:hover { background: #d1fae5; } /* Preview-only modal (published post view): hide editor, center preview */ .soc-compose-body--preview-only .soc-editor-panel { display: none; } .soc-compose-body--preview-only .soc-preview-panel { flex: 1; border-left: none; max-width: 520px; margin: 0 auto; } /* ── Page picker ─────────────────────────────────────────────────────────── */ .soc-page-picker { max-width: 480px; margin: 24px auto; padding: 0 16px; } .soc-page-picker-title { font-size: 15px; font-weight: 600; color: #111827; margin-bottom: 10px; } .soc-page-picker-search { width: 100%; box-sizing: border-box; padding: 9px 12px; border: 1px solid #d1d5db; border-radius: 7px; font-size: 14px; color: #111827; background: #fff; margin-bottom: 10px; outline: none; } .soc-page-picker-search:focus { border-color: #1877F2; box-shadow: 0 0 0 3px rgba(24,119,242,.12); } .soc-page-picker-list { display: flex; flex-direction: column; gap: 10px; } .soc-page-picker-btn { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; background: #fff; border: 1px solid #d1d5db; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 500; color: #111827; text-align: left; transition: border-color 0.15s, background 0.15s; } .soc-page-picker-btn:hover { border-color: #1877F2; background: #f0f5ff; } .soc-page-picker-btn:disabled { opacity: 0.6; cursor: not-allowed; } .soc-page-picker-divider { display: flex; align-items: center; gap: 10px; font-size: 12px; color: #9ca3af; margin: 16px 0 10px; } .soc-page-picker-divider::before, .soc-page-picker-divider::after { content: ''; flex: 1; height: 1px; background: #e5e7eb; } .soc-page-picker-manual { display: flex; gap: 8px; align-items: center; } .soc-page-picker-manual-btn { flex-shrink: 0; padding: 9px 16px; background: #1877F2; color: #fff; border: none; border-radius: 7px; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; } .soc-page-picker-manual-btn:hover { opacity: 0.88; } .soc-page-picker-manual-btn:disabled { opacity: 0.5; cursor: not-allowed; } .soc-page-picker-note { margin-top: 14px; font-size: 12px; color: #6b7280; line-height: 1.5; } /* ── Compose modal: split-pane editor + preview ─────────────────────────── */ .soc-modal--compose { max-width: min(1160px, 96vw); width: 96vw; } .soc-compose-body { display: flex; gap: 0; overflow: hidden; flex: 1; min-height: 0; height: 0; /* forces flex children to fill without blowing out modal height */ } .soc-editor-panel { flex: 1 1 0; min-width: 0; padding: 20px 20px 16px; overflow-y: auto; border-right: 1px solid #e5e7eb; } .soc-preview-panel { flex: 0 0 420px; width: 420px; background: #f3f4f6; padding: 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; } .soc-preview-panel-title { font-size: 13px; font-weight: 600; color: #374151; } .soc-preview-tabs { display: flex; gap: 4px; border-bottom: 2px solid #e5e7eb; padding-bottom: 0; } .soc-preview-tab { display: flex; align-items: center; gap: 4px; padding: 6px 10px; font-size: 13px; font-weight: 500; color: #6b7280; background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -2px; cursor: pointer; border-radius: 4px 4px 0 0; } .soc-preview-tab--active { color: #1877F2; border-bottom-color: #1877F2; } /* Facebook mock card */ .soc-fb-card { background: #fff; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,.12); overflow: hidden; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } .soc-fb-card-top { display: flex; align-items: center; gap: 8px; padding: 10px 12px 6px; } .soc-fb-avatar { width: 36px; height: 36px; border-radius: 50%; background: #1877F2; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .soc-fb-avatar--sm { width: 26px; height: 26px; background: #6b7280; } .soc-fb-card-meta { flex: 1; min-width: 0; } .soc-fb-page-name { font-size: 13px; font-weight: 700; color: #050505; } .soc-fb-timestamp { font-size: 11px; color: #65676b; display: flex; align-items: center; gap: 3px; } .soc-fb-dots { font-size: 18px; color: #65676b; cursor: default; } .soc-fb-card-text { padding: 4px 12px 10px; font-size: 14px; color: #050505; line-height: 1.5; word-break: break-word; white-space: pre-wrap; } .soc-fb-card-image { line-height: 0; } .soc-fb-card-actions { display: flex; gap: 0; border-top: 1px solid #e5e7eb; padding: 2px 4px; } .soc-fb-card-actions span { flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 8px 4px; font-size: 13px; font-weight: 600; color: #65676b; border-radius: 4px; cursor: default; } .soc-fb-first-comment { display: flex; gap: 8px; align-items: flex-start; padding: 8px 12px 12px; border-top: 1px solid #f0f2f5; background: #f0f2f5; } .soc-fb-comment-bubble { background: #fff; border-radius: 0 12px 12px 12px; padding: 6px 10px; font-size: 13px; color: #050505; flex: 1; min-width: 0; word-break: break-word; } .soc-fb-comment-name { font-weight: 700; font-size: 12px; margin-bottom: 2px; } /* ── Formatting toolbar ──────────────────────────────────────────────────── */ .soc-toolbar-wrap { position: relative; } .soc-toolbar { display: flex; align-items: center; gap: 2px; padding: 4px 6px; background: #f9fafb; border: 1px solid #e5e7eb; border-bottom: none; border-radius: 6px 6px 0 0; } .soc-toolbar-btn { display: flex; align-items: center; justify-content: center; width: 30px; height: 28px; border: none; background: none; border-radius: 4px; cursor: pointer; font-size: 14px; color: #374151; transition: background 0.12s; } .soc-toolbar-btn:hover { background: #e5e7eb; } .soc-toolbar-btn--bold b { font-weight: 900; font-size: 15px; } .soc-toolbar-btn--italic i { font-style: italic; font-family: Georgia, serif; } .soc-toolbar-sep { width: 1px; height: 18px; background: #d1d5db; margin: 0 4px; } .soc-textarea--caption { border-radius: 0 0 6px 6px; border-top: none; } .soc-textarea--sm { font-size: 13px; resize: vertical; min-height: 60px; } /* ── Emoji picker ────────────────────────────────────────────────────────── */ .soc-emoji-picker { position: absolute; top: calc(100% + 2px); left: 0; z-index: 9999; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,.14); padding: 10px; width: 300px; max-height: 240px; overflow-y: auto; } .soc-emoji-group-label { font-size: 10px; font-weight: 600; color: #9ca3af; text-transform: uppercase; letter-spacing: .05em; margin: 8px 0 4px; } .soc-emoji-group-label:first-child { margin-top: 0; } .soc-emoji-row { display: flex; flex-wrap: wrap; gap: 2px; } .soc-emoji-btn { width: 32px; height: 32px; font-size: 18px; border: none; background: none; border-radius: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.1s; } .soc-emoji-btn:hover { background: #f3f4f6; } /* ── Image upload zone ──────────────────────────────────────────────────── */ .soc-img-zone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 2px dashed #d1d5db; border-radius: 10px; padding: 28px 16px; cursor: pointer; transition: border-color 0.15s, background 0.15s; background: #f9fafb; color: #6b7280; text-align: center; user-select: none; } .soc-img-zone:hover, .soc-img-zone--drag { border-color: #1877F2; background: #f0f5ff; color: #1877F2; } .soc-img-zone svg { opacity: 0.5; transition: opacity 0.15s; } .soc-img-zone:hover svg, .soc-img-zone--drag svg { opacity: 1; } .soc-img-zone span { font-size: 14px; } .soc-img-zone em { font-size: 11px; color: #9ca3af; font-style: normal; } .soc-img-preview-wrap { display: flex; align-items: flex-start; gap: 12px; padding: 10px; border: 1px solid #e5e7eb; border-radius: 8px; background: #f9fafb; } .soc-img-thumb { width: 80px; height: 80px; object-fit: cover; border-radius: 6px; border: 1px solid #e5e7eb; flex-shrink: 0; } .soc-img-remove-btn { margin-left: auto; padding: 4px 10px; font-size: 12px; border: 1px solid #fca5a5; border-radius: 6px; background: #fff; color: #ef4444; cursor: pointer; transition: background 0.15s; } .soc-img-remove-btn:hover { background: #fef2f2; } .soc-img-progress-wrap { display: flex; flex-direction: column; gap: 6px; padding: 12px 0 4px; } .soc-img-progress-track { height: 6px; border-radius: 3px; background: #e5e7eb; overflow: hidden; } .soc-img-progress-bar { height: 100%; border-radius: 3px; background: #1877F2; transition: width 0.2s ease; } .soc-img-progress-label { font-size: 12px; color: #6b7280; } .soc-img-url-row { margin-top: 6px; text-align: right; } .soc-img-url-toggle { font-size: 12px; color: #6b7280; text-decoration: none; } .soc-img-url-toggle:hover { color: #1877F2; text-decoration: underline; } /* ── Post button dropdown ────────────────────────────────────────────────── */ .soc-post-btn-wrap { position: relative; display: inline-flex; } .soc-post-main-btn { display: flex; align-items: center; gap: 2px; } .soc-post-dropdown { position: absolute; bottom: calc(100% + 6px); right: 0; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; box-shadow: 0 8px 28px rgba(0,0,0,.14); min-width: 260px; z-index: 10000; padding: 6px; overflow: hidden; } .soc-post-option { display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 10px 12px; border: none; background: none; border-radius: 7px; cursor: pointer; text-align: left; transition: background 0.12s; } .soc-post-option:hover { background: #f3f4f6; } .soc-post-option svg { flex-shrink: 0; margin-top: 2px; } .soc-post-option div { display: flex; flex-direction: column; gap: 2px; } .soc-post-option strong { font-size: 14px; color: #111827; } .soc-post-option span { font-size: 12px; color: #6b7280; } /* ── Date picker overlay ─────────────────────────────────────────────────── */ .soc-dp-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); display: flex; align-items: center; justify-content: center; z-index: 10001; padding: 16px; } .soc-dp-modal { background: #fff; border-radius: 12px; box-shadow: 0 24px 60px rgba(0,0,0,0.22); width: 100%; max-width: 340px; overflow: hidden; display: flex; flex-direction: column; } .soc-dp-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 12px; border-bottom: 1px solid #e5e7eb; font-size: 15px; font-weight: 600; color: #111827; } .soc-dp-x { background: none; border: none; font-size: 18px; color: #6b7280; cursor: pointer; padding: 2px 6px; border-radius: 4px; } .soc-dp-x:hover { background: #f3f4f6; color: #111; } .soc-dp-body { padding: 16px 20px; } .soc-dp-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .soc-dp-nav-btn { background: none; border: 1px solid #e5e7eb; border-radius: 6px; width: 30px; height: 30px; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #374151; } .soc-dp-nav-btn:hover { background: #f3f4f6; } .soc-dp-month { font-size: 15px; font-weight: 600; color: #111827; } /* Calendar grid */ .soc-cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; margin-bottom: 6px; } .soc-cal-dow div { font-size: 11px; font-weight: 600; color: #9ca3af; padding: 4px 0; } .soc-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 16px; } .soc-cal-empty { height: 34px; } .soc-cal-day { height: 34px; border: none; background: none; border-radius: 6px; font-size: 13px; color: #111827; cursor: pointer; transition: background 0.12s, color 0.12s; } .soc-cal-day:hover:not([disabled]) { background: #f3f4f6; } .soc-cal-today { font-weight: 700; color: #1877F2; } .soc-cal-past { color: #d1d5db; cursor: not-allowed; } .soc-cal-picked { background: #1877F2 !important; color: #fff !important; font-weight: 600; } /* Time row */ .soc-dp-time { display: flex; align-items: center; gap: 6px; justify-content: center; padding: 8px 0 2px; } .soc-dp-sel { border: 1px solid #d1d5db; border-radius: 6px; padding: 6px 8px; font-size: 14px; color: #111827; background: #fff; cursor: pointer; } .soc-dp-sel:focus { outline: none; border-color: #1877F2; } .soc-dp-colon { font-size: 16px; font-weight: 600; color: #374151; } .soc-dp-footer { display: flex; gap: 8px; justify-content: flex-end; padding: 14px 20px 16px; border-top: 1px solid #e5e7eb; } .soc-dp-cancel-btn { padding: 8px 16px; border: 1px solid #d1d5db; border-radius: 6px; background: none; font-size: 14px; color: #374151; cursor: pointer; } .soc-dp-cancel-btn:hover { background: #f3f4f6; } .soc-dp-confirm-btn { padding: 8px 18px; border: none; border-radius: 6px; background: #1877F2; color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: opacity 0.15s; } .soc-dp-confirm-btn:hover { opacity: 0.88; } .soc-dp-confirm-btn[disabled] { opacity: 0.4; cursor: not-allowed; } /* ── Statistics tab ─────────────────────────────────────────────────────── */ .soc-stats-wrap { display: flex; flex-direction: column; gap: 20px; width: 100%; } .soc-stats-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .soc-stats-range-btns { display: flex; gap: 3px; } .soc-stats-range-btn { font-size: 13px; font-weight: 500; padding: 5px 14px; border-radius: 6px; border: 1px solid #d1d5db; background: #fff; color: #374151; cursor: pointer; transition: background 0.1s, border-color 0.1s, color 0.1s; } .soc-stats-range-btn:hover { background: #f3f4f6; } .soc-stats-range-btn--active { background: #111827; border-color: #111827; color: #fff; } .soc-stats-refresh-btn { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; padding: 5px 12px; border-radius: 6px; border: 1px solid #d1d5db; background: #fff; color: #374151; cursor: pointer; transition: background 0.1s; } .soc-stats-refresh-btn:hover { background: #f3f4f6; } .soc-stats-refresh-btn:disabled { opacity: 0.5; cursor: not-allowed; } .soc-stats-note { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #1e40af; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 7px; padding: 9px 14px; } .soc-stats-loading { text-align: center; padding: 60px 16px; color: #6b7280; font-size: 14px; } /* Summary cards — 6 across on desktop */ .soc-stats-cards { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; } .soc-stats-card { background: #fff; border: 1px solid #e5e7eb; border-top: 3px solid #e5e7eb; border-radius: 10px; padding: 18px 20px 16px; } .soc-stats-card--muted { opacity: 0.45; } .soc-stats-card--blue { border-top-color: #3b82f6; } .soc-stats-card--red { border-top-color: #ef4444; } .soc-stats-card--purple { border-top-color: #8b5cf6; } .soc-stats-card--green { border-top-color: #10b981; } .soc-stats-card--amber { border-top-color: #f59e0b; } .soc-stats-card--cyan { border-top-color: #06b6d4; } .soc-stats-card-value { font-size: 34px; font-weight: 700; color: #111827; line-height: 1; margin-bottom: 7px; } .soc-stats-card-label { font-size: 11px; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: 0.04em; } .soc-stats-card-sub { font-size: 11px; color: #9ca3af; margin-top: 3px; } /* Chart */ .soc-stats-chart-wrap { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 14px 16px 10px; } .soc-stats-chart-title { font-size: 13px; font-weight: 600; color: #374151; margin-bottom: 8px; } .soc-stats-chart { width: 100%; height: 160px; display: block; } /* Section title above top-posts table */ .soc-stats-section-title { font-size: 14px; font-weight: 600; color: #111827; margin-top: 4px; margin-bottom: 6px; } /* Number cells in stats table */ .soc-stats-num { font-size: 13px; font-weight: 600; color: #111827; text-align: right; white-space: nowrap; } .soc-stats-table th { text-align: right; } .soc-stats-table th:first-child, .soc-stats-table th:nth-child(2), .soc-stats-table th:nth-child(3) { text-align: left; } .soc-stats-table td:nth-child(3) { font-size: 12px; color: #6b7280; white-space: nowrap; } /* ── Mid-size adjustments (tablet / narrow desktop) ─────────────────────── */ @media (max-width: 900px) { .soc-stats-cards { grid-template-columns: repeat(3, 1fr); } .soc-stats-card-value { font-size: 28px; } } /* ── Mobile adjustments ─────────────────────────────────────────────────── */ @media (max-width: 600px) { .soc-inner { padding: 0 12px 24px; } /* ── Toolbar: stack filters above view-toggle row ── */ .soc-posts-toolbar { flex-direction: column; align-items: stretch; gap: 8px; } .soc-filter-bar { flex-wrap: nowrap; /* single row — scroll horizontally */ overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 5px; padding-bottom: 2px; /* room for scrollbar if shown */ } .soc-filter-label { display: none; } /* hide "Filter:" label — chips speak for themselves */ .soc-filter-sep { display: none; } .soc-filter-chips { flex-wrap: nowrap; gap: 5px; } /* view toggle + new-post button live on their own row to the right */ .soc-view-toggle { margin-left: 0; } .soc-new-post-btn { margin-left: auto; } /* ── List view table: card layout ── */ /* Outer wrap gets horizontal scroll as a fallback */ .soc-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Hide low-priority columns */ .soc-th-date, .soc-td-date, .soc-th-social, .soc-td-social, .soc-th-media, .soc-td-media { display: none; } /* Convert rows to cards */ .soc-table, .soc-table tbody { display: block; } .soc-table thead { display: none; } .soc-tr { display: flex; flex-direction: column; gap: 6px; padding: 12px 0; border-top: 1px solid #f3f4f6; } .soc-tr:first-child { border-top: none; } .soc-table td { display: block; padding: 0; font-size: 13px; } .soc-table-caption { max-width: none; font-size: 13px; line-height: 1.4; } .soc-td-actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 2px; } /* ── Calendar: compact cells ── */ .soc-cal-cell { min-height: 54px; padding: 3px 2px; } .soc-cal-card { padding: 3px 4px; } .soc-cal-card-img { display: none; } .soc-cal-card-caption { -webkit-line-clamp: 1; font-size: 10px; } .soc-cal-card-time { font-size: 9px; } .soc-cal-dow-row { font-size: 9px; } .soc-cal-day-num { font-size: 10px; margin-bottom: 2px; } .soc-cal-month-label { font-size: 13px; } /* ── Stats tab ── */ .soc-stats-cards { grid-template-columns: repeat(2, 1fr); } .soc-stats-card-value { font-size: 22px; } .soc-stats-range-btns { gap: 2px; } .soc-stats-range-btn { font-size: 12px; padding: 4px 10px; } .soc-stats-toolbar { gap: 6px; } /* ── Connections tab ── */ .soc-connect-card { flex-wrap: wrap; gap: 10px; } /* ── Compose / Edit modal ── */ .soc-modal { border-radius: 8px; } .soc-modal--compose { width: 100%; max-width: 100%; border-radius: 0; min-height: 100dvh; } .soc-compose-body { flex-direction: column; } .soc-editor-panel { border-right: none; border-bottom: 1px solid #e5e7eb; } .soc-preview-panel { flex: none; width: 100%; } .soc-modal-footer { flex-direction: column-reverse; } .soc-modal-btn-save, .soc-modal-btn-cancel { width: 100%; text-align: center; } .soc-modal-live-btn { width: 100%; text-align: center; margin-right: 0; justify-content: center; } .soc-img-zone { padding: 20px 12px; } .soc-img-thumb { width: 64px; height: 64px; } .soc-emoji-picker { width: calc(100vw - 40px); } } /* ═══════════════════════════════════════════════════════════════════════════ ICH WEBSITE PANEL (adminIchWebsitePanel) ══════════════════════════════════════════════════════════════════════════ */ /* Inner tab strip */ .ich-tabs { display: flex; align-items: center; gap: 2px; border-bottom: 2px solid #f3f4f6; margin-bottom: 24px; flex-wrap: wrap; } .ich-tab { display: inline-flex; align-items: center; gap: 5px; padding: 10px 16px; background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -2px; font-size: 13px; font-weight: 500; color: #6b7280; cursor: pointer; transition: color .15s, border-color .15s; white-space: nowrap; } .ich-tab:hover { color: #374151; } .ich-tab.is-active { color: #6366f1; border-bottom-color: #6366f1; font-weight: 600; } .ich-tab--products { color: #059669; } .ich-tab--products.is-active { color: #059669; border-bottom-color: #059669; } .ich-tab--products:hover { color: #047857; } /* Overview quick cards */ .ich-quick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; margin-bottom: 8px; } .ich-quick-card { display: flex; flex-direction: column; gap: 4px; padding: 16px; background: #fff; border: 1.5px solid #e5e7eb; border-radius: 12px; text-decoration: none; color: inherit; cursor: pointer; transition: border-color .15s, box-shadow .15s; } .ich-quick-card:hover { border-color: #a5b4fc; box-shadow: 0 2px 10px rgba(99,102,241,.08); } .ich-qc-icon { color: #6366f1; margin-bottom: 4px; } .ich-qc-label { font-size: 13px; font-weight: 600; color: #111827; } .ich-qc-url { font-size: 11px; color: #9ca3af; } /* GHL button grid */ .ich-ghl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; } .ich-ghl-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px; background: #fff; border: 1.5px solid #e5e7eb; border-radius: 10px; font-size: 13px; font-weight: 500; color: #374151; cursor: pointer; text-align: left; transition: border-color .15s, background .15s; } .ich-ghl-btn:hover { border-color: #a5b4fc; background: #fafafe; color: #6366f1; } /* Product cards */ .ich-prod-card { background: #fff; border: 1.5px solid #e5e7eb; border-radius: 14px; padding: 18px 20px; margin-bottom: 16px; transition: box-shadow .15s; } .ich-prod-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,.06); } .ich-prod-archived { opacity: .65; } .ich-prod-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .ich-prod-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .ich-prod-name { font-size: 15px; font-weight: 700; color: #111827; } .ich-prod-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; } .ich-prod-desc { font-size: 13px; color: #6b7280; margin: 6px 0 4px; line-height: 1.5; } .ich-prod-meta { font-size: 11px; color: #9ca3af; margin: 4px 0 14px; } .ich-prod-meta code { font-family: 'Fira Mono', 'Courier New', monospace; font-size: 11px; background: #f3f4f6; padding: 1px 5px; border-radius: 4px; color: #6b7280; } /* Status badges */ .ich-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: 600; letter-spacing: .03em; } .ich-badge--on { background: #dcfce7; color: #15803d; } .ich-badge--off { background: #f3f4f6; color: #9ca3af; } /* Prices list inside a product card */ .ich-prices-list { border-top: 1px solid #f3f4f6; padding-top: 12px; display: flex; flex-direction: column; gap: 8px; } .ich-no-prices { font-size: 12px; color: #9ca3af; margin: 0; padding: 4px 0; } .ich-price-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .ich-price-info { display: flex; align-items: baseline; gap: 4px; } .ich-price-dollars { font-size: 15px; font-weight: 700; color: #111827; } .ich-price-interval { font-size: 12px; color: #6b7280; } .ich-price-id-row { display: flex; align-items: center; gap: 8px; } .ich-price-id { font-family: 'Fira Mono', 'Courier New', monospace; font-size: 11px; background: #f3f4f6; padding: 3px 8px; border-radius: 5px; color: #374151; } .ich-copy-btn { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; background: none; border: 1.5px solid #e5e7eb; border-radius: 6px; font-size: 11px; font-weight: 600; color: #6b7280; cursor: pointer; transition: border-color .15s, color .15s; white-space: nowrap; } .ich-copy-btn:hover { border-color: #6366f1; color: #6366f1; } /* Mobile tweaks */ @media (max-width: 600px) { .ich-tabs { gap: 0; } .ich-tab { padding: 9px 12px; font-size: 12px; } .ich-quick-grid { grid-template-columns: repeat(2, 1fr); } .ich-ghl-grid { grid-template-columns: 1fr 1fr; } .ich-prod-header { flex-direction: column; } .ich-price-row { flex-direction: column; align-items: flex-start; } }