*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'DM Sans', sans-serif; background: #f4f6fa; color: #1a1d2e; min-height: 100vh; } /* ─── TOPBAR ─────────────────────────────────────────────────────────────── */ .topbar { display: flex; align-items: center; justify-content: space-between; padding: 0 2rem; height: 64px; border-bottom: 1px solid rgba(0,0,0,0.08); background: #fff; } .brand-logo { height: 32px; } .topbar-right { display: flex; align-items: center; gap: 1rem; } .client-pill { display: flex; align-items: center; gap: 0.6rem; background: #f0f2f8; border: 1px solid rgba(0,0,0,0.08); border-radius: 999px; padding: 0.35rem 0.9rem 0.35rem 0.35rem; } .client-ava { width: 28px; height: 28px; border-radius: 50%; background: #4f6ef7; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700; color: #fff; } .client-name { font-size: 0.85rem; font-weight: 500; color: #1a1d2e; } .portal-hub-btn { background: transparent; color: #6b7280; border: 1px solid rgba(0,0,0,0.12); border-radius: 999px; font-size: 0.8rem; font-weight: 500; padding: 0.3rem 0.85rem; text-decoration: none; transition: background 0.15s, color 0.15s, border-color 0.15s; } .portal-hub-btn:hover { background: #f0f2f8; color: #4f6ef7; border-color: rgba(79,110,247,0.3); } /* ─── DASHBOARD HERO ─────────────────────────────────────────────────────── */ .dash-hero { padding: 2rem 2rem 0; } .back-btn { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; font-weight: 500; color: #6b7280; text-decoration: none; } .back-btn:hover { color: #4f6ef7; } .dash-greeting { font-size: 0.85rem; color: #6b7280; margin-bottom: 0.3rem; margin-top: 1rem; } .dash-greeting strong { color: #1a1d2e; font-weight: 600; } .dash-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 1.25rem; } .dash-stats-3 { grid-template-columns: repeat(3, 1fr); } .dash-stat { background: #fff; border: 1px solid rgba(0,0,0,0.08); border-radius: 14px; padding: 1.25rem 1.5rem; } .dash-stat-val { font-size: 2rem; font-weight: 700; line-height: 1; color: #1a1d2e; } .dash-stat-lbl { font-size: 0.78rem; color: #6b7280; margin-top: 0.4rem; } .dash-stat.attention .dash-stat-val { color: #e07c00; } .dash-stat.online .dash-stat-val { color: #16a34a; } .dash-live-row { display: flex; align-items: center; gap: 0.5rem; margin-top: 1rem; font-size: 0.78rem; color: #6b7280; } .live-dot { width: 8px; height: 8px; border-radius: 50%; background: #16a34a; flex-shrink: 0; } @media (max-width: 640px) { .dash-stats { grid-template-columns: repeat(2, 1fr); } } /* ─── SECTION ────────────────────────────────────────────────────────────── */ .section { padding: 2rem; } .section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; } .section-head h2 { font-size: 1rem; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: 0.05em; } .alert-count { color: #e07c00; margin-left: 6px; } .section-title-row { display: flex; align-items: center; justify-content: space-between; margin-top: 1rem; flex-wrap: wrap; gap: 0.75rem; } .section-title-row .dash-greeting { margin-top: 0; } /* ─── SITE GRID / CARDS ──────────────────────────────────────────────────── */ .site-grid { display: flex; flex-direction: column; gap: 0.75rem; } .site-card { display: flex; align-items: center; gap: 1rem; background: #fff; border: 2px solid #cbd2e0; border-radius: 14px; padding: 1rem 1.25rem; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; position: relative; } .site-card:hover { border-color: #4f6ef7; box-shadow: 0 4px 12px rgba(79,110,247,0.12); } .card-icon-wrap { width: 40px; height: 40px; border-radius: 10px; background: rgba(79,110,247,0.1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .card-icon-wrap svg { width: 20px; height: 20px; fill: none; stroke: #4f6ef7; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .card-icon-wrap.ic-high { background: rgba(224,124,0,0.1); } .card-icon-wrap.ic-high svg { stroke: #e07c00; } .card-icon-wrap.ic-info { background: rgba(79,110,247,0.1); } .card-icon-wrap.ic-info svg { stroke: #4f6ef7; } .card-icon-wrap.ic-ppm { background: rgba(22,163,74,0.1); } .card-icon-wrap.ic-ppm svg { stroke: #16a34a; } .card-e-main { flex: 1; min-width: 0; } .card-e-name { font-weight: 600; font-size: 0.95rem; color: #1a1d2e; } .card-e-addr { font-size: 0.78rem; color: #6b7280; margin-top: 0.2rem; } .card-e-meta { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.4rem; } .card-e-sub { font-size: 0.8rem; color: #6b7280; } .card-e-arrow { display: flex; align-items: center; flex-shrink: 0; } .card-e-arrow svg { width: 18px; height: 18px; stroke: #6b7280; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* ─── BADGES ─────────────────────────────────────────────────────────────── */ .s-badge { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.75rem; font-weight: 500; padding: 0.25rem 0.6rem; border-radius: 999px; } /* Severity */ .s-critical { background: rgba(185,28,28,0.1); color: #b91c1c; } .s-high { background: rgba(194,65,12,0.1); color: #c2410c; } .s-medium { background: rgba(161,98,7,0.1); color: #a16207; } .s-low { background: rgba(21,128,61,0.1); color: #15803d; } /* Severity dots */ .s-dot { width: 6px; height: 6px; border-radius: 50%; } .s-dot-critical { background: #b91c1c; } .s-dot-high { background: #f97316; } .s-dot-medium { background: #eab308; } .s-dot-low { background: #16a34a; } /* Ticket / alert status */ .s-open { background: rgba(79,110,247,0.1); color: #4f6ef7; } .s-client_review { background: rgba(234,179,8,0.12); color: #a16207; } .s-closed { background: rgba(107,114,128,0.1); color: #6b7280; } .s-disregarded { background: rgba(107,114,128,.12); color: #4b5563; } .s-dot-disregarded { background: #9ca3af; } /* Misc */ .s-online { background: rgba(22,163,74,0.1); color: #16a34a; } .s-alert { background: rgba(224,124,0,0.1); color: #e07c00; } .s-ppm { background: rgba(22,163,74,0.15); color: #16a34a; } .s-ok { background: rgba(22,163,74,0.15); color: #16a34a; } .s-inspection { background: rgba(56,189,248,0.15); color: #0ea5e9; } .s-dot-online { background: #16a34a; } /* ─── NOTIFICATION BADGE ─────────────────────────────────────────────────── */ .notif-badge { position: absolute; top: -8px; right: -8px; background: #dc2626; color: #fff; font-size: 11px; font-weight: 700; border-radius: 999px; min-width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; padding: 0 5px; box-sizing: border-box; border: 2px solid #fff; } /* ─── CONSTRUCTION BANNER ────────────────────────────────────────────────── */ .banner-construction { background: linear-gradient(135deg, #1a1d2e 0%, #2d3258 100%); padding: 1rem 2rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } .banner-icon { width: 36px; height: 36px; border-radius: 10px; background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .banner-icon svg { width: 20px; height: 20px; } .banner-body { flex: 1; min-width: 0; } .banner-title { font-size: 0.85rem; font-weight: 700; color: #fff; margin-bottom: 0.15rem; } .banner-sub { font-size: 0.78rem; color: rgba(255,255,255,0.6); line-height: 1.5; } .banner-tag { font-size: 0.72rem; font-weight: 600; background: rgba(245,158,11,0.15); color: #f59e0b; border: 1px solid rgba(245,158,11,0.3); border-radius: 999px; padding: 0.25rem 0.75rem; white-space: nowrap; flex-shrink: 0; } /* ─── LANDING ────────────────────────────────────────────────────────────── */ .landing-wrap { min-height: calc(100vh - 64px); display: flex; align-items: center; justify-content: center; padding: 2rem; } .landing-card { background: #fff; border: 2px solid #cbd2e0; border-radius: 20px; padding: 2.5rem; width: 100%; max-width: 420px; } .landing-logo { height: 36px; margin-bottom: 2rem; } .landing-title { font-size: 1.3rem; font-weight: 700; color: #1a1d2e; margin-bottom: 0.4rem; } .landing-sub { font-size: 0.85rem; color: #6b7280; margin-bottom: 2rem; line-height: 1.6; } .landing-actions { display: flex; justify-content: flex-end; margin-top: 1.5rem; } .error-code { font-size: 4rem; font-weight: 700; color: #cbd2e0; line-height: 1; margin-bottom: 1rem; } /* ─── FOOTER ─────────────────────────────────────────────────────────────── */ .site-footer { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 2rem; border-top: 1px solid rgba(0,0,0,0.08); font-size: 0.78rem; color: #6b7280; margin-top: 4rem; } .site-footer a { color: #6b7280; text-decoration: none; transition: color 0.15s; } .site-footer a:hover { color: #4f6ef7; } /* ─── PRIVACY POLICY ─────────────────────────────────────────────────────── */ .privacy-updated { font-size: 0.78rem; color: #6b7280; margin-top: 0.25rem; margin-bottom: 2rem; } .privacy-block { margin-bottom: 2rem; } .privacy-block h2 { font-size: 0.95rem; font-weight: 700; color: #1a1d2e; margin-bottom: 0.75rem; } .privacy-block p { font-size: 0.875rem; color: #4b5563; line-height: 1.7; margin-bottom: 0.75rem; } .privacy-block ul { padding-left: 1.25rem; margin-bottom: 0.75rem; } .privacy-block ul li { font-size: 0.875rem; color: #4b5563; line-height: 1.7; margin-bottom: 0.35rem; } .privacy-block a { color: #4f6ef7; text-decoration: none; } .privacy-block a:hover { text-decoration: underline; } .attachment-link { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.5rem; font-size: 0.78rem; color: #6b7280; text-decoration: none; transition: color 0.15s; } .attachment-link:hover { color: #4f6ef7; } .attachment-link svg { width: 14px !important; height: 14px !important; min-width: 14px; min-height: 14px; flex-shrink: 0; } /* ─── TABLE ──────────────────────────────────────────────────────────────── */ .insp-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; } .insp-table th { text-align: left; font-weight: 600; color: #6b7280; padding: 0.5rem 0.75rem; border-bottom: 1px solid rgba(0,0,0,0.08); } .insp-table td { padding: 0.75rem; border-bottom: 1px solid rgba(0,0,0,0.06); color: #1a1d2e; vertical-align: top; } .insp-table tbody tr:last-child td { border-bottom: none; } /* ─── MODAL ──────────────────────────────────────────────────────────────── */ .overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); backdrop-filter: blur(4px); z-index: 100; align-items: center; justify-content: center; padding: 1.5rem; } .overlay.open { display: flex; } #modal-rfq-attach.open, #modal-chat-attach.open { z-index: 110; } #modal-file-viewer.open { z-index: 120; } #modal-action-confirm { z-index: 200; } #overlay-secret-renew { z-index: 200; } #overlay-email-preview { z-index: 200; } .modal { background: #fff; border: 1px solid rgba(0,0,0,0.08); border-radius: 24px; width: 90vw; max-width: 1100px; overflow: hidden; max-height: 88vh; display: flex; flex-direction: column; } .modal-sm { max-width: 420px; } .modal-hero { padding: 1.75rem 1.75rem 1.25rem; position: relative; border-bottom: 1px solid rgba(0,0,0,0.08); flex-shrink: 0; } .modal-close { position: absolute; top: 1.25rem; right: 1.25rem; background: #f0f2f8; border: none; border-radius: 50%; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; } .modal-close svg { width: 16px; height: 16px; stroke: #1a1d2e; fill: none; stroke-width: 2; stroke-linecap: round; } .modal-site-name { font-size: 1.2rem; font-weight: 700; color: #1a1d2e; padding-right: 2rem; } .modal-site-addr { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: #6b7280; margin-top: 0.4rem; flex-wrap: wrap; } .modal-site-addr svg { width: 13px; height: 13px; stroke: #6b7280; fill: none; stroke-width: 2; flex-shrink: 0; } .modal-chips { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.75rem; } .spec-chip { font-size: 0.75rem; background: #f0f2f8; border-radius: 999px; padding: 0.25rem 0.65rem; color: #4b5563; } .cat-chip-contracted { background: rgba(20,184,166,0.12); color: #0f766e; } .modal-body { padding: 1.5rem 1.75rem 2rem; overflow-y: auto; } .modal-body h3 { font-size: 0.85rem; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 1rem; } .modal-body .card { overflow-x: auto; } .modal-hero-actions { margin-top: 0.75rem; } .options-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; } .option-btn { display: flex; flex-direction: column; gap: 0.25rem; background: #f4f6fa; border: 1px solid rgba(0,0,0,0.08); border-radius: 14px; padding: 1rem 1.1rem; text-decoration: none; color: inherit; transition: background 0.15s; position: relative; } .option-btn:hover { background: #e8ecf5; } .opt-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-bottom: 0.4rem; } .opt-icon svg { width: 17px; height: 17px; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .ic-alerts { background: rgba(224,124,0,0.12); } .ic-alerts svg { stroke: #e07c00; } .ic-tickets { background: rgba(79,110,247,0.12); } .ic-tickets svg { stroke: #4f6ef7; } .ic-ppm { background: rgba(22,163,74,0.12); } .ic-ppm svg { stroke: #16a34a; } .ic-services { background: rgba(147,51,234,0.12); } .ic-services svg { stroke: #9333ea; } .ic-finance { background: rgba(22,163,74,0.12); } .ic-finance svg { stroke: #16a34a; } .ic-hs { background: rgba(224,124,0,0.12); } .ic-hs svg { stroke: #e07c00; } .ic-access { background: rgba(79,110,247,0.12); } .ic-access svg { stroke: #4f6ef7; } .ic-monitoring { background: rgba(56,189,248,0.12); } .ic-monitoring svg { stroke: #0ea5e9; } .ic-esg { background: rgba(21,128,61,0.12); } .ic-esg svg { stroke: #15803d; } .opt-label { font-size: 0.9rem; font-weight: 600; color: #1a1d2e; } .opt-desc { font-size: 0.75rem; color: #6b7280; } .opt-arrow { position: absolute; top: 1rem; right: 1rem; } .opt-arrow svg { width: 14px; height: 14px; stroke: #6b7280; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .modal-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; margin-bottom: 1.25rem; } .modal-stats .dash-stat { padding: 0.75rem 1rem; border: 1px solid rgba(0,0,0,0.08); border-radius: 14px; background: #fff; } .modal-stats .dash-stat-val { font-size: 1.1rem; } .modal-stats .dash-stat-lbl { font-size: 0.72rem; } /* ─── CHAT ───────────────────────────────────────────────────────────────── */ .chat-wrap { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1rem; } .chat-msg { display: flex; align-items: flex-end; gap: 6px; } .chat-msg.us { flex-direction: row-reverse; } .chat-msg.them { flex-direction: row; } .chat-msg-body { display: flex; flex-direction: column; gap: 0.25rem; max-width: 80%; } .chat-msg.us .chat-msg-body { align-items: flex-end; } .chat-msg.them .chat-msg-body { align-items: flex-start; } .chat-bubble { padding: 0.75rem 1rem; border-radius: 14px; font-size: 0.875rem; line-height: 1.5; } .chat-bubble-wrap { position: relative; max-width: 100%; min-width: 0; } .chat-bubble-wrap.has-reactions { margin-bottom: 14px; } .chat-msg-body .chat-bubble { max-width: 100%; } .chat-msg.them .chat-bubble { background: #f0f2f8; color: #1a1d2e; border-bottom-left-radius: 4px; } .chat-msg.us .chat-bubble { background: #4f6ef7; color: #fff; border-bottom-right-radius: 4px; } .chat-meta { font-size: 0.7rem; color: #6b7280; } .chat-msg.notif-highlight .chat-bubble { outline: 2px solid #ef4444; outline-offset: 2px; } .chat-avatar { width: 28px; height: 28px; border-radius: 50%; background: #4f6ef7; color: #fff; font-size: .65rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; } .chat-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .chat-input-row { display: flex; gap: 0.5rem; align-items: flex-end; border-top: 1px solid rgba(0,0,0,0.08); padding-top: 1rem; margin-top: 0.5rem; } /* Chat file attachments */ .chat-files { display: flex; flex-direction: column; gap: 0.3rem; margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid rgba(255,255,255,0.2); } .chat-msg.them .chat-files { border-top-color: rgba(0,0,0,0.08); } .chat-file-link { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; font-weight: 500; text-decoration: none; border-radius: 6px; padding: 0.2rem 0; transition: opacity 0.15s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; background: none; border: none; cursor: pointer; font-family: inherit; } .chat-file-link svg { width: 13px; height: 13px; flex-shrink: 0; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .chat-msg.us .chat-file-link { color: rgba(255,255,255,0.85); } .chat-msg.us .chat-file-link svg { stroke: rgba(255,255,255,0.85); } .chat-msg.us .chat-file-link:hover { color: #fff; opacity: 0.95; } .chat-msg.them .chat-file-link { color: #4f6ef7; } .chat-msg.them .chat-file-link svg { stroke: #4f6ef7; } .chat-msg.them .chat-file-link:hover { color: #3b5be0; } /* Chat compose — input row + clip inside textarea */ .chat-compose-row { display: flex; gap: .5rem; align-items: flex-end; } .chat-input-wrap { position: relative; flex: 1; min-width: 0; } .chat-input-wrap .form-textarea { padding-right: 4rem; } .chat-clip-btn { position: absolute; top: 6px; right: 6px; padding: .2rem; color: #9ca3af; background: none; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 4px; } .chat-clip-btn:hover { color: #4f6ef7; } .chat-clip-btn svg { width: 15px; height: 15px; } .chat-emoji-btn { position: absolute; top: 6px; right: 28px; padding: .2rem; background: none; border: none; cursor: pointer; font-size: 1rem; line-height: 1; border-radius: 4px; opacity: .55; } .chat-emoji-btn:hover, .chat-emoji-btn.active { opacity: 1; } .chat-clip-active { color: #4f6ef7 !important; } /* Chat file list — below compose row */ .chat-file-list { display: none; flex-direction: column; gap: .25rem; padding-top: .15rem; } .chat-file-list.has-files { display: flex; } .chat-file-item { display: flex; align-items: center; gap: .35rem; font-size: .74rem; color: #4b5563; min-width: 0; } .chat-file-item svg { width: 12px; height: 12px; flex-shrink: 0; stroke: #9ca3af; } .chat-file-item-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .chat-file-remove { background: none; border: none; cursor: pointer; color: #9ca3af; padding: 0 .1rem; line-height: 1; flex-shrink: 0; font-size: 1rem; font-family: inherit; } .chat-file-remove:hover { color: #ef4444; } /* Reaction picker */ .chat-reaction-picker { position: fixed; z-index: 9999; background: #fff; border-radius: 24px; padding: .3rem .45rem; box-shadow: 0 4px 20px rgba(0,0,0,.18), 0 1px 4px rgba(0,0,0,.1); display: flex; gap: .05rem; } .chat-reaction-pick-btn { background: none; border: none; cursor: pointer; font-size: 1.4rem; padding: .2rem .28rem; border-radius: 50%; transition: transform .12s, background .1s; line-height: 1; } .chat-reaction-pick-btn:hover { background: #f3f4f6; transform: scale(1.3); } /* Reaction pills on bubbles — absolutely positioned relative to .chat-bubble-wrap */ .chat-reactions { position: absolute; bottom: -13px; display: flex; flex-wrap: wrap; gap: .25rem; z-index: 1; padding: 0 4px; } .chat-reactions.us { left: -4px; } .chat-reactions:not(.us) { right: -4px; } .chat-reaction-pill { display: inline-flex; align-items: center; gap: .2rem; font-size: .72rem; background: #f3f4f6; border: 1.5px solid transparent; border-radius: 12px; padding: .12rem .42rem; cursor: pointer; font-family: inherit; transition: border-color .1s, background .1s; line-height: 1.4; } .chat-reaction-pill.you { background: #eff2fe; border-color: #4f6ef7; } .chat-reaction-pill:hover { background: #e5e7eb; } .chat-reaction-pill.you:hover { background: #dde3fd; } /* Compact picker: 4 favourites + plus button */ .chat-reaction-plus-btn { background: #e5e7eb; border: none; cursor: pointer; font-size: 1.1rem; width: 2.1rem; height: 2.1rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #374151; font-family: inherit; transition: background .1s; flex-shrink: 0; line-height: 1; } .chat-reaction-plus-btn:hover { background: #d1d5db; } /* Expanded emoji grid */ .chat-reaction-grid { position: fixed; z-index: 10003; background: #fff; border-radius: 14px; padding: .6rem; box-shadow: 0 8px 32px rgba(0,0,0,.22), 0 2px 8px rgba(0,0,0,.1); display: grid; grid-template-columns: repeat(8,1fr); gap: .1rem; max-height: 220px; overflow-y: auto; width: 280px; } .chat-reaction-grid-btn { background: none; border: none; cursor: pointer; font-size: 1.35rem; padding: .3rem; border-radius: 8px; line-height: 1; transition: background .1s; } .chat-reaction-grid-btn:hover { background: #f3f4f6; } /* Reaction info panel */ .reaction-info-backdrop { position: fixed; inset: 0; z-index: 10001; background: rgba(0,0,0,.35); } .reaction-info-panel { position: fixed; bottom: 0; left: 0; right: 0; z-index: 10002; background: #fff; border-radius: 18px 18px 0 0; padding: 1rem 1rem .5rem; max-height: 70vh; display: flex; flex-direction: column; box-shadow: 0 -4px 24px rgba(0,0,0,.15); animation: slideUp .22s ease; } @keyframes slideUp { from { transform: translateY(60px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .reaction-info-header { font-size: .82rem; font-weight: 600; color: #6b7280; margin-bottom: .6rem; } .reaction-info-tabs { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .7rem; } .reaction-info-tab { background: #f3f4f6; border: 1.5px solid transparent; border-radius: 20px; padding: .2rem .6rem; font-size: .8rem; cursor: pointer; font-family: inherit; transition: border-color .1s, background .1s; line-height: 1.4; } .reaction-info-tab.active { background: #eff2fe; border-color: #4f6ef7; color: #4f6ef7; } .reaction-info-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: .5rem; margin-bottom: .75rem; } .reaction-info-row { display: flex; align-items: center; gap: .65rem; } .reaction-info-avatar { width: 32px; height: 32px; border-radius: 50%; background: #e2e6ef; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 600; color: #4f6ef7; overflow: hidden; } .reaction-info-avatar img { width: 100%; height: 100%; object-fit: cover; } .reaction-info-name { flex: 1; font-size: .875rem; color: #1a1d2e; } .reaction-info-emoji { font-size: 1.1rem; line-height: 1; } .reaction-info-quick { display: flex; gap: .35rem; justify-content: center; padding: .5rem 0 .25rem; border-top: 1px solid #f3f4f6; } .reaction-info-quick-btn { background: none; border: none; cursor: pointer; font-size: 1.35rem; padding: .25rem .4rem; border-radius: 8px; font-family: inherit; transition: background .1s, transform .1s; line-height: 1; } .reaction-info-quick-btn:hover { background: #f3f4f6; transform: scale(1.2); } .reaction-info-quick-btn.you { background: #eff2fe; } /* ─── CHAT ACTION BAR (mobile long-press) ───────────────────────────────── */ .chat-action-bar { position: fixed; z-index: 9999; background: #fff; border-radius: 14px; padding: .35rem .5rem; box-shadow: 0 4px 20px rgba(0,0,0,.18), 0 1px 4px rgba(0,0,0,.1); display: flex; gap: .15rem; } .chat-action-btn { display: flex; flex-direction: column; align-items: center; gap: .15rem; background: none; border: none; cursor: pointer; padding: .35rem .65rem; border-radius: 10px; font-family: inherit; transition: background .1s; } .chat-action-btn:hover { background: #f3f4f6; } .chat-action-btn svg { width: 18px; height: 18px; stroke: #374151; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .chat-action-btn span { font-size: .65rem; color: #6b7280; font-weight: 500; } .chat-action-divider { width: 1px; background: #e5e7eb; margin: .25rem .1rem; flex-shrink: 0; } /* ─── DESKTOP HOVER ICONS ───────────────────────────────────────────────── */ .chat-hover-actions { position: absolute; top: -10px; display: none; gap: .15rem; z-index: 2; background: #fff; border-radius: 8px; padding: .15rem; box-shadow: 0 1px 6px rgba(0,0,0,.12); } .chat-msg.them .chat-hover-actions { right: -8px; } .chat-msg.us .chat-hover-actions { left: -8px; } @media (hover: hover) { .chat-msg:hover .chat-hover-actions { display: flex; } } .chat-msg--picker-open .chat-hover-actions { display: flex !important; } .chat-hover-btn { background: none; border: none; cursor: pointer; width: 26px; height: 26px; border-radius: 6px; display: flex; align-items: center; justify-content: center; transition: background .1s; padding: 0; } .chat-hover-btn:hover { background: #f3f4f6; } .chat-hover-btn svg { width: 14px; height: 14px; stroke: #6b7280; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* ─── REPLY COMPOSE BAR ─────────────────────────────────────────────────── */ .chat-reply-bar { display: flex; align-items: center; gap: .5rem; background: #f0f2f8; border-left: 3px solid #4f6ef7; border-radius: 0 8px 8px 0; padding: .45rem .6rem; margin-bottom: .35rem; } .chat-reply-bar-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; } .chat-reply-bar-sender { font-size: .72rem; font-weight: 700; color: #4f6ef7; } .chat-reply-bar-body { font-size: .75rem; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chat-reply-bar-close { background: none; border: none; cursor: pointer; color: #9ca3af; font-size: 1.1rem; line-height: 1; padding: .1rem .25rem; border-radius: 4px; flex-shrink: 0; font-family: inherit; } .chat-reply-bar-close:hover { color: #374151; } /* ─── REPLY QUOTE IN BUBBLE ─────────────────────────────────────────────── */ .chat-reply-quote { border-left: 3px solid rgba(79,110,247,.5); background: rgba(0,0,0,.06); border-radius: 0 6px 6px 0; padding: .3rem .5rem; margin-bottom: .4rem; cursor: pointer; } .chat-reply-quote-sender { display: block; font-size: .7rem; font-weight: 700; color: #4f6ef7; } .chat-reply-quote-body { display: block; font-size: .72rem; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; } .chat-msg.us .chat-reply-quote { border-left-color: rgba(255,255,255,.4); background: rgba(255,255,255,.15); } .chat-msg.us .chat-reply-quote-sender { color: rgba(255,255,255,.85); } .chat-msg.us .chat-reply-quote-body { color: rgba(255,255,255,.7); } /* ─── SCROLL-TO HIGHLIGHT ───────────────────────────────────────────────── */ @keyframes replyFlash { 0% { outline: 2px solid transparent; outline-offset: 2px; } 30% { outline: 2px solid #4f6ef7; outline-offset: 2px; } 100% { outline: 2px solid transparent; outline-offset: 2px; } } .chat-msg.reply-highlight .chat-bubble { animation: replyFlash 1.5s ease; } /* ─── BUTTONS ────────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 0.4rem; font-family: inherit; font-size: 0.85rem; font-weight: 600; padding: 0.6rem 1rem; border-radius: 10px; border: none; cursor: pointer; transition: background 0.15s; } .btn-primary { background: #4f6ef7; color: #fff; } .btn-primary:hover:not(:disabled) { background: #3b5be0; } .btn-primary:disabled { background: #c7d0f9; color: rgba(255,255,255,0.7); cursor: not-allowed; } .btn-ghost { background: #f0f2f8; color: #6b7280; } .btn-ghost:hover { background: #e2e6ef; } .btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } .btn-ghost.wo-unread-row { border: 2px solid #dc2626; } .btn-fire { font-size: .78rem; padding: .4rem .75rem; flex-shrink: 0; } .btn-fire svg { width: 13px; height: 13px; flex-shrink: 0; } .btn-icon { padding: .4rem; } /* ─── FORMS ──────────────────────────────────────────────────────────────── */ .form-group { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; } .form-group--flush { margin-bottom: 0; } .form-group--mt { margin-top: .75rem; } .form-label { font-size: 0.8rem; font-weight: 600; color: #1a1d2e; } .form-input, .form-select { border: 1.5px solid #e2e6ef; border-radius: 10px; padding: 0.6rem 0.85rem; font-family: inherit; font-size: 0.875rem; color: #1a1d2e; background: #f4f6fa; outline: none; transition: border-color 0.15s; width: 100%; } .form-input:focus, .form-select:focus { border-color: #4f6ef7; } .form-textarea { flex: 1; border: 1.5px solid #e2e6ef; border-radius: 10px; padding: 0.6rem 0.85rem; font-family: inherit; font-size: 0.875rem; color: #1a1d2e; background: #f4f6fa; resize: none; outline: none; transition: border-color 0.15s; width: 100%; } .form-textarea:focus { border-color: #4f6ef7; } .form-actions { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 0.5rem; } .form-error { font-size: .78rem; color: #b91c1c; margin-top: .25rem; } .check-list { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.5rem; } .check-list label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: #1a1d2e; cursor: pointer; } .consent-row { display: flex; align-items: flex-start; gap: 0.65rem; padding: 0.75rem 0 0.25rem; } .consent-row input[type="checkbox"] { margin-top: 0.2rem; flex-shrink: 0; cursor: pointer; } .consent-row label { font-size: 0.84rem; color: #1a1d2e; line-height: 1.5; cursor: pointer; } .consent-row--pad-top { padding-top: 0.25rem; padding-bottom: 0; } .date-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; } .upload-zone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; border: 2px dashed #cbd2e0; border-radius: 12px; padding: 1.5rem; cursor: pointer; background: #f4f6fa; } .upload-zone span { font-size: 0.85rem; font-weight: 600; color: #1a1d2e; } .upload-zone-hint { font-size: 0.75rem; color: #6b7280; } .upload-zone svg { width: 28px; height: 28px; } .upload-filename { font-size: 0.78rem; color: #4f6ef7; text-align: center; } /* ─── ALERT PANELS ───────────────────────────────────────────────────────── */ .alert-panel { display: flex; align-items: flex-start; gap: 0.75rem; border-radius: 12px; padding: 1rem 1.1rem; margin-bottom: 1.25rem; } .alert-panel--mb { margin-bottom: 1rem; } .alert-panel-icon { flex-shrink: 0; margin-top: 0.1rem; } .alert-panel-icon svg { width: 22px; height: 22px; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .alert-panel-body { font-size: 0.83rem; line-height: 1.6; } .alert-panel-title { display: block; font-weight: 700; margin-bottom: 0.2rem; } .alert-panel.alert-amber { background: rgba(245,158,11,0.08); border: 1px solid rgba(245,158,11,0.35); } .alert-panel.alert-amber .alert-panel-body { color: #92600a; } .alert-panel.alert-amber .alert-panel-title { color: #78500a; } .alert-panel.alert-amber .alert-panel-icon svg { stroke: #f59e0b; } .alert-panel.alert-red { background: rgba(220,38,38,0.07); border: 1px solid rgba(220,38,38,0.3); } .alert-panel.alert-red .alert-panel-body { color: #991b1b; } .alert-panel.alert-red .alert-panel-title { color: #7f1d1d; } .alert-panel.alert-red .alert-panel-icon svg { stroke: #dc2626; } .warning-box { border-radius: 10px; padding: 1rem 1.25rem; margin-bottom: 0.75rem; font-size: 0.875rem; line-height: 1.6; } .warning-box.warning-amber { background: rgba(224,124,0,0.08); border: 1px solid rgba(224,124,0,0.2); } .warning-box.warning-red { background: rgba(220,38,38,0.07); border: 1px solid rgba(220,38,38,0.3); color: #991b1b; } .warning-box.warning-red strong { color: #7f1d1d; } .phone-highlight { display: none; margin-top: 0.6rem; padding: 0.5rem 0.75rem; background: rgba(220,38,38,0.08); border-radius: 8px; font-weight: 600; color: #7f1d1d; } /* ─── PAGE LAYOUT ────────────────────────────────────────────────────────── */ .page { max-width: 720px; margin: 0 auto; padding: 2rem; } .page-title { font-size: 1.6rem; font-weight: 700; color: #1a1d2e; margin-bottom: 0.4rem; } .page-sub { font-size: 0.95rem; color: #6b7280; margin-bottom: 2rem; line-height: 1.6; } /* ─── CONTENT CARDS ──────────────────────────────────────────────────────── */ .card { background: #fff; border: 1px solid rgba(0,0,0,0.08); border-radius: 14px; margin-bottom: 1.25rem; } .card-padded { padding: 1.5rem; } .card-title { font-size: 1rem; font-weight: 700; color: #1a1d2e; margin-bottom: 0.5rem; } .card-body { font-size: 0.9rem; color: #4b5563; line-height: 1.7; } .analogy-box { background: #f0f2f8; border-radius: 10px; padding: 1rem 1.25rem; margin-top: 1rem; font-size: 0.875rem; color: #4b5563; line-height: 1.6; } .analogy-box strong { color: #1a1d2e; } /* ─── SCORE BANDS ────────────────────────────────────────────────────────── */ .score-band { display: grid; grid-template-columns: 1fr 220px; align-items: center; padding: 0.85rem 1.25rem; border-bottom: 1px solid rgba(0,0,0,0.06); } .score-band:last-child { border-bottom: none; } .band-content { min-width: 0; } .band-title { font-size: 0.9rem; font-weight: 600; color: #1a1d2e; margin-bottom: 0.25rem; } .band-desc { font-size: 0.85rem; color: #4b5563; line-height: 1.6; } .band-actions { display: flex; gap: 0.5rem; align-items: center; border-left: 2px solid rgba(0,0,0,0.08); padding-left: 1rem; } .band-content .band-actions { border-left: none; padding-left: 0; margin-top: 0.75rem; } .col-header-row { display: grid; grid-template-columns: 1fr 220px; align-items: center; padding: 0.6rem 1.25rem; border-bottom: 1px solid rgba(0,0,0,0.06); } .col-header-left { font-size: 0.72rem; color: #6b7280; } .col-header-sgu-wrap { display: flex; align-items: center; border-left: 2px solid rgba(0,0,0,0.08); padding-left: 1rem; } .col-header-sgu { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.72rem; color: #6b7280; background: #f0f2f8; border-radius: 6px; padding: 0.3rem 0.6rem; } .col-header-sgu svg { width: 11px; height: 11px; stroke: #6b7280; fill: none; stroke-width: 2; flex-shrink: 0; } /* ─── TASK TYPES ─────────────────────────────────────────────────────────── */ .task-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin-top: 1rem; } .task-type { border-radius: 10px; padding: 1rem; text-align: center; } .task-type.high-t { background: rgba(194,65,12,0.08); } .task-type.med-t { background: rgba(161,98,7,0.08); } .task-type.low-t { background: rgba(21,128,61,0.08); } .task-weight { font-size: 1.3rem; font-weight: 700; margin-bottom: 0.2rem; } .task-type.high-t .task-weight, .task-type.high-t .task-type-label { color: #c2410c; } .task-type.med-t .task-weight, .task-type.med-t .task-type-label { color: #a16207; } .task-type.low-t .task-weight, .task-type.low-t .task-type-label { color: #15803d; } .task-type-label { font-size: 0.8rem; font-weight: 700; margin-bottom: 0.3rem; } .task-type-desc { font-size: 0.78rem; color: #4b5563; line-height: 1.5; } /* ─── RULES LIST ─────────────────────────────────────────────────────────── */ .rule-row { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.75rem 0; border-bottom: 1px solid rgba(0,0,0,0.06); font-size: 0.875rem; } .rule-row:last-child { border-bottom: none; } .rule-icon { width: 28px; height: 28px; border-radius: 8px; background: #f0f2f8; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 0.9rem; } .rule-text { color: #4b5563; line-height: 1.6; } .rule-text strong { color: #1a1d2e; } /* ─── MWP EXAMPLES ───────────────────────────────────────────────────────── */ .mwp-example { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-top: 1rem; } .mwp-box { background: #f4f6fa; border-radius: 10px; padding: 1rem; font-size: 0.85rem; } .mwp-box-title { font-weight: 700; color: #1a1d2e; margin-bottom: 0.3rem; } .mwp-box-body { color: #4b5563; line-height: 1.6; font-size: 0.8rem; } .mwp-score { font-size: 1.4rem; font-weight: 700; margin: 0.4rem 0 0.2rem; } .mwp-score--critical { color: #b91c1c; } .mwp-score--medium { color: #a16207; } /* ─── EXAMPLES ───────────────────────────────────────────────────────────── */ .examples-intro { margin-bottom: 0.75rem; } .example-row { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 0; border-bottom: 1px solid rgba(0,0,0,0.06); font-size: 0.875rem; } .example-row:last-child { border-bottom: none; } .example-tasks { color: #4b5563; flex: 1; } .example-score { font-weight: 700; color: #1a1d2e; width: 60px; text-align: right; margin-right: 0.75rem; } /* ─── BREADCRUMBS ────────────────────────────────────────────────────────── */ .breadcrumbs { background: #fff; border-bottom: 1px solid #e8e8e8; padding: 0 2rem; } .breadcrumb-list { display: flex; align-items: center; gap: 0.25rem; list-style: none; margin: 0; padding: 0.65rem 0; font-size: 0.8rem; } .breadcrumb-item a { color: #6b7280; text-decoration: none; transition: color 0.15s; } .breadcrumb-item a:hover { color: #111; } .breadcrumb-item.active { color: #111; font-weight: 500; } .breadcrumb-item + .breadcrumb-item::before { content: "/"; color: #d1d5db; margin-right: 0.25rem; } .breadcrumb-hub-link { margin-left:auto; } .breadcrumb-hub-link::before { content:none !important; } .breadcrumb-hub-link a { color:#4f6ef7; font-weight:500; text-decoration:none; transition:color .15s; } .breadcrumb-hub-link a:hover { color:#2563eb; } /* ─── DATATABLES ─────────────────────────────────────────────────────────── */ .dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select { border: 1.5px solid #e2e6ef; border-radius: 10px; padding: 0.4rem 0.75rem; font-family: 'DM Sans', sans-serif; font-size: 0.85rem; color: #1a1d2e; background: #f4f6fa; outline: none; } .dataTables_wrapper .dataTables_filter input:focus, .dataTables_wrapper .dataTables_length select:focus { border-color: #4f6ef7; } .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter { font-size: 0.78rem; color: #6b7280; font-family: 'DM Sans', sans-serif; } .dataTables_wrapper .dataTables_paginate .paginate_button { border-radius: 8px !important; font-family: 'DM Sans', sans-serif !important; font-size: 0.78rem !important; color: #6b7280 !important; border: none !important; } .dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background: #4f6ef7 !important; color: #fff !important; border: none !important; } .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: #f0f2f8 !important; color: #1a1d2e !important; } table.dataTable thead th { font-family: 'DM Sans', sans-serif; font-size: 0.78rem; font-weight: 600; color: #6b7280; border-bottom: 1px solid rgba(0,0,0,0.08) !important; } table.dataTable tbody td { font-size: 0.85rem; color: #1a1d2e; } table.dataTable tbody tr:hover { background: #f8f9fc; } table.dataTable { border-collapse: collapse !important; } /* ─── MOBILE ─────────────────────────────────────────────────────────────── */ @media (max-width: 600px) { .modal-stats { grid-template-columns: repeat(2, 1fr); } .modal-body .card { overflow-x: auto; } .modal-body .insp-table { min-width: 480px; } .modal { width: calc(100vw - 2rem); max-width: calc(100vw - 2rem); } .overlay { padding: 1rem; } .modal-body { padding: 1rem; } .modal-hero { padding: 1.25rem 1rem; } .dataTables_wrapper { overflow-x: auto; max-width: 100%; } table.dataTable { min-width: 600px; width: 100% !important; } .dataTables_wrapper .dataTables_filter input { max-width: 100%; width: 100%; box-sizing: border-box; } } /* ─── PROFILE ────────────────────────────────────────────────────────────── */ .profile-btn { display:flex; align-items:center; gap:0.6rem; background:#f0f2f8; border:1px solid rgba(0,0,0,0.08); border-radius:999px; padding:0.3rem 0.9rem 0.3rem 0.3rem; cursor:pointer; transition:background 0.15s; } .profile-btn:hover { background:#e2e6ef; } .profile-avatar { width:32px; height:32px; border-radius:50%; background:#4f6ef7; display:flex; align-items:center; justify-content:center; font-size:0.72rem; font-weight:700; color:#fff; flex-shrink:0; overflow:hidden; } .profile-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; } .profile-name { font-size:0.85rem; font-weight:500; color:#1a1d2e; } .profile-modal-avatar-wrap { display:flex; flex-direction:column; align-items:center; gap:0.75rem; margin-bottom:1.5rem; } .profile-modal-avatar { width:80px; height:80px; border-radius:50%; background:#4f6ef7; display:flex; align-items:center; justify-content:center; font-size:1.4rem; font-weight:700; color:#fff; overflow:hidden; flex-shrink:0; position:relative; cursor:pointer; } .profile-modal-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; } .profile-modal-avatar-overlay { position:absolute; inset:0; background:rgba(0,0,0,0.4); border-radius:50%; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity 0.15s; } .profile-modal-avatar:hover .profile-modal-avatar-overlay { opacity:1; } .profile-modal-avatar-overlay svg { width:22px; height:22px; stroke:#fff; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .profile-upload-hint { font-size:0.75rem; color:#9ca3af; } /* ─── NOTIFICATION PREFERENCES (profile modal) ──────────────────────────── */ .notif-divider { border:none; border-top:1px solid rgba(0,0,0,0.08); margin:0.5rem 0 1rem; } .notif-toggle-row { display:flex; align-items:center; justify-content:space-between; padding:0.5rem 0; margin-bottom:0.25rem; } .notif-toggle-row .form-label { margin:0; font-size:0.8rem; display:flex; align-items:center; gap:0.5rem; } .notif-toggle-row .form-label svg { width:16px; height:16px; stroke:#6b7280; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .toggle-switch { position:relative; width:40px; height:22px; flex-shrink:0; } .toggle-switch input { opacity:0; width:0; height:0; } .toggle-slider { position:absolute; inset:0; background:#e2e6ef; border-radius:999px; cursor:pointer; transition:background 0.2s; } .toggle-slider::before { content:""; position:absolute; left:2px; top:2px; width:18px; height:18px; background:#fff; border-radius:50%; transition:transform 0.2s; box-shadow:0 1px 3px rgba(0,0,0,0.15); } .toggle-switch input:checked + .toggle-slider { background:#4f6ef7; } .toggle-switch input:checked + .toggle-slider::before { transform:translateX(18px); } .notif-settings-toggle { display:flex; align-items:center; gap:0.35rem; background:none; border:none; cursor:pointer; font-family:inherit; font-size:0.75rem; font-weight:500; color:#9ca3af; padding:0.25rem 0; transition:color 0.15s; } .notif-settings-toggle:hover { color:#6b7280; } .notif-settings-toggle svg { width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform 0.2s; } .notif-settings-toggle.open svg { transform:rotate(90deg); } .notif-settings-panel { max-height:0; overflow:hidden; transition:max-height 0.25s ease-out, opacity 0.2s; opacity:0; } .notif-settings-panel.open { max-height:500px; opacity:1; transition:max-height 0.35s ease-in, opacity 0.2s; } .notif-settings-inner { padding:0.75rem 0 0.25rem; } .notif-sub-label { font-size:0.75rem; font-weight:600; color:#6b7280; text-transform:uppercase; letter-spacing:0.04em; margin-bottom:0.5rem; } .notif-check-list { display:flex; flex-direction:column; gap:0.4rem; margin-bottom:1rem; } .notif-check-item { display:flex; align-items:center; gap:0.6rem; font-size:0.82rem; color:#1a1d2e; cursor:pointer; } .notif-check-item input[type="checkbox"], .notif-check-item input[type="radio"] { accent-color:#4f6ef7; width:15px; height:15px; cursor:pointer; flex-shrink:0; } .notif-site-list { display:flex; flex-direction:column; gap:0.35rem; padding:0.5rem 0 0.25rem 1.4rem; border-left:2px solid #e2e6ef; margin-left:0.45rem; margin-top:-0.25rem; margin-bottom:0.75rem; } /* ─── NOTIFICATION BANNER ────────────────────────────────────────────────── */ .notif-banner { display:flex; align-items:center; gap:0.75rem; background:rgba(79,110,247,0.06); border:1px solid rgba(79,110,247,0.18); border-radius:14px; padding:0.75rem 1.25rem; margin:1rem 2rem 0; cursor:pointer; transition:background 0.15s, border-color 0.15s; } .notif-banner:hover { background:rgba(79,110,247,0.1); border-color:rgba(79,110,247,0.3); } .notif-banner svg { width:20px; height:20px; stroke:#4f6ef7; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; } .notif-banner span { font-size:0.82rem; color:#1a1d2e; line-height:1.4; flex:1; } .notif-banner-close { background:none; border:none; font-size:1.2rem; color:#9ca3af; cursor:pointer; padding:0 0.25rem; line-height:1; flex-shrink:0; transition:color 0.15s; } .notif-banner-close:hover { color:#1a1d2e; } .notif-banner--blocked { background:rgba(224,124,0,0.06); border-color:rgba(224,124,0,0.18); cursor:default; } .notif-banner--blocked:hover { background:rgba(224,124,0,0.08); border-color:rgba(224,124,0,0.25); } .notif-banner--blocked svg { stroke:#e07c00; } /* ─── iOS INSTALL PROMPT ─────────────────────────────────────────────────── */ .notif-ios-card { background:#f8fafc; border:1px solid #e5e7eb; border-radius:10px; padding:1rem; margin-bottom:.75rem; } .notif-ios-card-hdr { display:flex; align-items:center; gap:.45rem; font-weight:600; font-size:.88rem; color:#1a1d2e; margin-bottom:.5rem; } .notif-ios-card-hdr svg { width:17px; height:17px; stroke:#ea580c; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; } .notif-ios-intro { font-size:.81rem; color:#6b7280; margin-bottom:.6rem; line-height:1.5; } .notif-ios-steps { margin:0; padding-left:1.15rem; font-size:.81rem; color:#374151; line-height:1.8; } .notif-share-icon { display:inline-block; vertical-align:middle; width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; margin:0 1px; } .notif-ios-banner { display:flex; align-items:flex-start; gap:.6rem; background:#fff7ed; border:1px solid #fed7aa; border-radius:14px; padding:.75rem 1rem; margin:1rem 2rem 0; } .notif-ios-banner-icon { width:18px; height:18px; flex-shrink:0; stroke:#ea580c; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; margin-top:1px; } .notif-ios-banner span { font-size:.82rem; color:#92400e; line-height:1.45; flex:1; } .notif-ios-banner-close { background:none; border:none; font-size:1.2rem; color:#d97706; cursor:pointer; padding:0 0.25rem; line-height:1; flex-shrink:0; } .notif-ios-banner-close:hover { color:#92400e; } /* ─── SYSTEM ALERT BANNER ───────────────────────────────────────────────── */ .sys-alert-banner { display:flex; align-items:center; gap:0.75rem; border-radius:14px; padding:0.75rem 1.25rem; margin:1rem 2rem 0; cursor:pointer; transition:background 0.15s, border-color 0.15s; } .sys-alert-banner svg { width:20px; height:20px; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; } .sys-alert-banner span { font-size:0.82rem; line-height:1.4; flex:1; } .sys-alert-banner .sys-alert-link { font-weight:600; text-decoration:underline; margin-left:0.25rem; } .sys-alert-banner--amber { background:rgba(224,124,0,0.06); border:1px solid rgba(224,124,0,0.18); } .sys-alert-banner--amber:hover { background:rgba(224,124,0,0.1); border-color:rgba(224,124,0,0.3); } .sys-alert-banner--amber svg { stroke:#e07c00; } .sys-alert-banner--amber span { color:#92400e; } .sys-alert-banner--red { background:rgba(185,28,28,0.06); border:1px solid rgba(185,28,28,0.22); } .sys-alert-banner--red:hover { background:rgba(185,28,28,0.1); border-color:rgba(185,28,28,0.35); } .sys-alert-banner--red svg { stroke:#b91c1c; } .sys-alert-banner--red span { color:#991b1b; } /* ─── SECRET RENEW MODAL ────────────────────────────────────────────────── */ .modal-md { max-width:560px; } .renew-steps { list-style:none; padding:0; counter-reset:renew; } .renew-steps li { position:relative; padding:0.6rem 0 0.6rem 2.2rem; font-size:0.85rem; color:#1a1d2e; line-height:1.55; border-left:2px solid #e2e6ef; margin-left:0.7rem; } .renew-steps li::before { counter-increment:renew; content:counter(renew); position:absolute; left:-0.85rem; top:0.5rem; width:1.5rem; height:1.5rem; background:#4f6ef7; color:#fff; font-size:0.72rem; font-weight:700; border-radius:50%; display:flex; align-items:center; justify-content:center; } .renew-steps li:last-child { border-left-color:transparent; } .renew-steps code { background:#f0f2f8; padding:0.1rem 0.4rem; border-radius:4px; font-size:0.8rem; } .renew-steps a { color:#4f6ef7; text-decoration:underline; } .renew-expiry-row { display:flex; align-items:center; gap:0.75rem; margin-top:1.25rem; padding:1rem; background:#f8fafc; border:1px solid #e5e7eb; border-radius:10px; } .renew-expiry-row label { font-size:0.82rem; font-weight:600; color:#6b7280; white-space:nowrap; } .renew-expiry-row input[type="date"] { flex:1; font-size:0.85rem; padding:0.4rem 0.6rem; border:1px solid #cbd5e1; border-radius:8px; font-family:inherit; } .renew-expiry-row .btn { flex-shrink:0; } /* ─── TICKETS PAGE ───────────────────────────────────────────────────────── */ /* Tabs */ .modal-tabs { display:flex; border-bottom:1px solid rgba(0,0,0,.08); margin:.75rem 0 0; } .modal-tab { padding:.6rem 1.1rem; font-size:.875rem; font-weight:600; color:#6b7280; cursor:pointer; border:none; border-bottom:2px solid transparent; margin-bottom:-1px; background:none; font-family:inherit; transition:color .15s; } .modal-tab.active { color:#4f6ef7; border-bottom-color:#4f6ef7; } .tab-panel { display:none; flex-direction:column; flex:1; min-height:0; overflow:hidden; } .tab-panel.active { display:flex; } /* Scrollable areas */ .actions-scroll { flex:1; overflow-y:auto; padding:1.25rem 1.75rem 1.5rem; display:flex; flex-direction:column; gap:1.1rem; } .actions-scroll h3 { font-size:.85rem; font-weight:600; color:#6b7280; text-transform:uppercase; letter-spacing:.05em; margin-bottom:.6rem; } .chat-scroll { flex:1; overflow-y:auto; padding:1rem 1.75rem .5rem; display:flex; flex-direction:column; gap:.85rem; } .chat-foot { padding:.75rem 1.75rem 1.25rem; border-top:1px solid rgba(0,0,0,.08); display:flex; flex-direction:column; gap:.5rem; flex-shrink:0; } /* Chat attach modal */ .attach-section { margin-bottom:1.25rem; } .attach-section-head { font-size:.78rem; font-weight:600; color:#6b7280; text-transform:uppercase; letter-spacing:.04em; margin:0 0 .5rem; display:flex; align-items:center; gap:.4rem; } .attach-file-row { display:flex; align-items:center; gap:.5rem; padding:.35rem .4rem; border-radius:6px; } .attach-file-row:hover { background:#f7f8fc; } .attach-file-check { display:flex; align-items:center; flex-shrink:0; } .attach-file-check input[type="checkbox"] { accent-color:#4f6ef7; width:15px; height:15px; cursor:pointer; } .attach-file-name { flex:1; background:none; border:none; text-align:left; font-size:.83rem; color:#1a1d2e; cursor:pointer; padding:0; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:inherit; } .attach-file-name:hover { color:#4f6ef7; text-decoration:underline; } .attach-status-badge { font-size:.7rem; font-weight:500; padding:.15rem .5rem; border-radius:999px; white-space:nowrap; flex-shrink:0; } .attach-badge-released { background:rgba(22,163,74,.1); color:#15803d; } .attach-badge-hidden { background:rgba(234,179,8,.12); color:#92400e; } .attach-badge-private { background:rgba(107,114,128,.1); color:#4b5563; } .attach-file-view-btn { background:none; border:none; cursor:pointer; color:#9ca3af; padding:.15rem; display:flex; align-items:center; flex-shrink:0; border-radius:4px; } .attach-file-view-btn:hover { color:#4f6ef7; } .attach-file-view-btn svg { width:14px; height:14px; } .attach-upload-section { border-top:1px solid rgba(0,0,0,.07); padding-top:1rem; margin-top:.5rem; } .attach-new-names { font-size:.75rem; color:#6b7280; margin-top:.35rem; } .attach-empty { font-size:.85rem; color:#9ca3af; margin:0 0 1rem; } /* Workflow steps */ /* ─── WORKFLOW TRACK CARDS ───────────────────────────────────────────────── */ .wf-tracks { display:flex; gap:.75rem; margin-top:.5rem; } .wf-track-card { flex:1; min-width:0; background:#f4f6fa; border:1.5px solid #e2e6ef; border-radius:14px; padding:1rem 1.1rem; cursor:pointer; transition:border-color .15s, background .15s; } .wf-track-card:hover { border-color:#4f6ef7; background:#f0f2ff; } .wf-track-label { font-size:.72rem; font-weight:700; color:#6b7280; letter-spacing:.04em; text-transform:uppercase; margin-bottom:.45rem; } .wf-track-next { font-size:.84rem; font-weight:600; color:#1a1d2e; margin-bottom:.5rem; } .wf-track-next span { color:#4f6ef7; } .wf-track-progress { display:flex; align-items:center; gap:.5rem; } .wf-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; } .wf-dot--done { background:#16a34a; } .wf-dot--next { background:#4f6ef7; } .wf-dot--idle { background:#d1d5db; } .wf-track-count { font-size:.7rem; color:#9ca3af; font-weight:500; } .wf-track-complete { font-size:.84rem; font-weight:600; color:#16a34a; margin-bottom:.5rem; } /* ─── WORKFLOW STEP CARDS (inside modal) ────────────────────────────────── */ .wf-step-card { border:1.5px solid #e2e6ef; border-radius:12px; margin-bottom:.75rem; overflow:hidden; } .wf-step-card:last-child { margin-bottom:0; } .wf-step-header { display:flex; align-items:center; justify-content:space-between; padding:.65rem .85rem; border-bottom:1px solid rgba(0,0,0,.06); background:#fafbfc; } .wf-step-num { font-size:.875rem; font-weight:700; color:#1a1d2e; } .wf-state-badge { font-size:.68rem; font-weight:600; padding:.15rem .5rem; border-radius:999px; white-space:nowrap; } .wf-state-badge--done { background:rgba(22,163,74,.1); color:#16a34a; } .wf-state-badge--next { background:rgba(79,110,247,.1); color:#4f6ef7; } .wf-state-badge--idle { background:#f0f2f8; color:#9ca3af; } .wf-state-badge--gated { background:rgba(224,124,0,.12); color:#e07c00; } .wf-step-body { padding:.75rem .85rem; } .wf-step-body .btn-fire { margin-top:.25rem; } .wf-step-meta { font-size:.78rem; color:#6b7280; margin-bottom:.25rem; } .wf-step-evidence { display:inline-flex; align-items:center; gap:.35rem; font-size:.78rem; font-weight:600; color:#16a34a; cursor:pointer; text-decoration:underline; text-decoration-style:dotted; } .wf-step-evidence:hover { color:#15803d; } .wf-step-idle-text { font-size:.8rem; color:#b0b5c0; font-style:italic; } .wf-step-note { font-size:.75rem; color:#9ca3af; margin-top:.35rem; font-style:italic; } /* Approval gate card */ .wf-gate-card { background:rgba(224,124,0,.05); border:1.5px solid rgba(224,124,0,.2); border-radius:10px; padding:.85rem; } .wf-gate-icon { margin-bottom:.35rem; } .wf-gate-message { font-size:.85rem; font-weight:700; color:#b45309; margin-bottom:.25rem; } .wf-gate-hint { font-size:.75rem; color:#92400e; margin-bottom:.65rem; line-height:1.4; } .wf-gate-status { font-size:.78rem; padding:.5rem .65rem; border-radius:8px; margin-bottom:.5rem; } .wf-gate-status--pending { background:rgba(224,124,0,.08); color:#92400e; } .wf-gate-status--rejected { background:rgba(185,28,28,.06); color:#b91c1c; margin-bottom:.65rem; } .wf-gate-reason { font-style:italic; margin-top:.2rem; font-size:.75rem; } .wf-gate-form { display:flex; flex-direction:column; gap:.4rem; } .wf-gate-form textarea { font-size:.8rem; border:1.5px solid #e2e6ef; border-radius:8px; padding:.5rem; resize:vertical; min-height:48px; } .wf-gate-form textarea.input-error { border-color:#b91c1c; } .wf-gate-form .btn { align-self:flex-start; } .wf-gate-cooldown { font-size:.78rem; color:#92400e; font-style:italic; padding:.35rem 0; } /* Legacy step classes kept for evidence modals */ .step-ind { width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; } .step-ind svg { width:12px; height:12px; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; } .step-meta { font-size:.72rem; color:#9ca3af; flex-shrink:0; } /* Stage pill */ .stage-pill { display:inline-flex; font-size:.72rem; font-weight:600; padding:.2rem .55rem; border-radius:999px; background:rgba(79,110,247,.08); color:#4f6ef7; border:1px solid rgba(79,110,247,.18); white-space:nowrap; } /* Assign row */ .assign-row { display:flex; align-items:center; gap:.75rem; width:100%; background:#f4f6fa; border:1.5px solid #e2e6ef; border-radius:12px; padding:.75rem 1rem; cursor:pointer; font-family:inherit; transition:background .15s; } .assign-row:hover { background:#e8ecf5; } .assign-info { flex:1; text-align:left; } .assign-info strong { display:block; font-size:.875rem; color:#1a1d2e; } .assign-info span { font-size:.75rem; color:#6b7280; } .assign-chevron { width:16px; height:16px; flex-shrink:0; fill:none; stroke:#6b7280; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } /* Assignment history */ .assign-history { display:flex; flex-direction:column; gap:.5rem; } .assign-history-row { display:flex; align-items:flex-start; gap:.65rem; font-size:.82rem; padding:.5rem 0; border-bottom:1px solid rgba(0,0,0,.06); } .assign-history-row:last-child { border-bottom:none; } .assign-history-icon { width:26px; height:26px; border-radius:50%; background:rgba(79,110,247,.1); display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:.1rem; } .assign-history-icon svg { width:13px; height:13px; stroke:#4f6ef7; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .assign-history-body { flex:1; } .assign-history-name { font-weight:600; color:#1a1d2e; } .assign-history-detail { font-size:.75rem; color:#6b7280; margin-top:.15rem; } .assign-role { font-weight:400; color:#6b7280; } /* Path badge */ .path-badge { font-size:.72rem; font-weight:600; color:#6b7280; background:#f0f2f8; padding:.2rem .6rem; border-radius:999px; white-space:nowrap; } /* Workflow status pill */ .wf-status-pill { display:inline-flex; align-items:center; gap:.4rem; font-size:.72rem; font-weight:600; padding:.2rem .5rem .2rem .65rem; border-radius:999px; background:rgba(79,110,247,.08); color:#4f6ef7; border:1px solid rgba(79,110,247,.2); cursor:pointer; transition:background .15s; white-space:nowrap; font-family:inherit; } .wf-status-pill:hover { background:rgba(79,110,247,.16); } .wf-status-pill svg { width:11px; height:11px; stroke:#4f6ef7; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; } /* Set workflow button */ .set-wf-btn { display:inline-flex; align-items:center; gap:.4rem; font-family:inherit; font-size:.78rem; font-weight:600; padding:.35rem .75rem; border-radius:10px; border:none; cursor:pointer; background:#f0f2f8; color:#6b7280; transition:background .15s; } .set-wf-btn:hover { background:#e2e6ef; } .set-wf-btn svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; } /* Workflow config */ .wf-section-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:.6rem; } .wf-unconfigured { font-size:.85rem; color:#6b7280; } .wf-opt-grid { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; margin-top:.5rem; } .wf-opt-card { border:1.5px solid #e2e6ef; border-radius:12px; padding:.85rem .9rem; display:flex; flex-direction:column; gap:.2rem; background:#f4f6fa; cursor:pointer; transition:border-color .15s, background .15s; } .wf-opt-card:hover { border-color:#4f6ef7; background:#f0f2ff; } .wf-opt-card.selected { border-color:#4f6ef7; background:#eef1fe; } .wf-opt-icon { width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; margin-bottom:.35rem; } .wf-opt-icon svg { width:16px; height:16px; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .wf-opt-icon--green { background:rgba(22,163,74,.1); } .wf-opt-icon--blue { background:rgba(79,110,247,.1); } .wf-opt-icon--purple { background:rgba(147,51,234,.1); } .wf-opt-title { font-size:.9rem; font-weight:700; color:#1a1d2e; } .wf-opt-desc { font-size:.75rem; color:#6b7280; } /* (Old two-column/SP-complete layout removed -- replaced by track cards above) */ /* ====== RFQ & Email conversation styles ====== */ /* Email history toggle at top of SP modal */ .wf-email-history { margin-bottom:.75rem; } .wf-email-history-toggle { display:flex; align-items:center; gap:.4rem; width:100%; padding:.6rem .85rem; border:1.5px solid #e2e6ef; border-radius:10px; background:#f8f9fc; font-family:inherit; font-size:.82rem; font-weight:600; color:#4f6ef7; cursor:pointer; transition:background .15s; } .wf-email-history-toggle:hover { background:#eef1fe; } .wf-email-history-toggle svg { stroke:#4f6ef7; flex-shrink:0; } .wf-email-history-body { padding:.5rem 0; } /* RFQ compose section */ .rfq-loading { text-align:center; padding:1rem; color:#9ca3af; font-size:.82rem; } .rfq-loading-sm { color:#9ca3af; font-size:.78rem; font-style:italic; padding:.25rem 0; } .rfq-no-contacts { color:#9ca3af; font-size:.78rem; font-style:italic; } .rfq-compose-section { margin-top:.5rem; } /* PO form */ .po-quote-summary { background:#f0fdf4; border:1.5px solid #bbf7d0; border-radius:10px; padding:.6rem .75rem; margin-bottom:.75rem; } .po-quote-label { font-size:.68rem; font-weight:700; color:#16a34a; text-transform:uppercase; letter-spacing:.04em; margin-bottom:.2rem; } .po-quote-sp { font-size:.85rem; font-weight:600; color:#1a1d2e; } .po-quote-files { margin-top:.35rem; display:flex; flex-wrap:wrap; gap:.3rem; } .po-form { display:flex; flex-direction:column; gap:.1rem; } .po-action-section { margin-top:.5rem; } .po-create-btn { margin-top:.5rem; display:inline-flex; align-items:center; gap:.4rem; } /* PO line items table */ .po-line-items-wrap { overflow-x:auto; } .po-line-items-table { display:flex; flex-direction:column; gap:0; min-width:780px; } .po-line-header { display:grid; grid-template-columns:3fr 55px 80px 120px 120px 110px 70px 32px; gap:5px; padding:0 0 .35rem; border-bottom:1.5px solid #e2e6ef; margin-bottom:.35rem; } .po-line-header span { font-size:.65rem; font-weight:700; color:#6b7280; text-transform:uppercase; letter-spacing:.04em; } .po-line-row { display:grid; grid-template-columns:3fr 55px 80px 120px 120px 110px 70px 32px; gap:5px; align-items:center; padding:.25rem 0; } .po-line-row + .po-line-row { border-top:1px solid #f0f2f8; } .po-line-input { font-size:.78rem; padding:.3rem .4rem; border:1.5px solid #d1d5db; border-radius:6px; background:#fff; min-width:0; } .po-line-input:focus { border-color:#4f6ef7; outline:none; } .po-line-desc { width:100%; } .po-line-qty { width:100%; text-align:center; } .po-line-price { width:100%; text-align:right; } .po-line-vat, .po-line-account { width:100%; font-size:.72rem; } .po-line-total { font-size:.78rem; font-weight:600; color:#1a1d2e; text-align:right; padding-right:.25rem; } .po-line-remove { width:28px; height:28px; border:none; background:none; color:#9ca3af; font-size:1.1rem; cursor:pointer; border-radius:6px; display:flex; align-items:center; justify-content:center; } .po-line-remove:hover { background:rgba(185,28,28,.08); color:#b91c1c; } .po-line-add { margin-top:.35rem; font-size:.78rem; } /* PO totals */ .po-totals-row { display:flex; justify-content:flex-end; gap:1.2rem; padding:.6rem 0; border-top:1.5px solid #e2e6ef; margin-top:.25rem; } .po-total-label { font-size:.78rem; color:#6b7280; } .po-total-label strong { color:#1a1d2e; } /* PO Xero contact linking */ .po-xero-contact-section { margin-bottom:.75rem; } .po-xero-linked { display:flex; align-items:center; gap:.35rem; font-size:.8rem; color:#16a34a; font-weight:600; padding:.4rem .6rem; background:#f0fdf4; border:1.5px solid #bbf7d0; border-radius:8px; } .po-xero-unlinked { border:1.5px solid #fbbf24; background:#fffbeb; border-radius:10px; padding:.75rem; } .po-xero-label { font-size:.78rem; font-weight:700; color:#92400e; margin-bottom:.5rem; } .po-xero-search-row { display:flex; gap:.4rem; margin-bottom:.5rem; } .po-xero-search-input { flex:1; font-size:.8rem; } .po-xero-results { display:flex; flex-direction:column; gap:.35rem; max-height:200px; overflow-y:auto; margin-bottom:.5rem; } .po-xero-contact-card { display:flex; justify-content:space-between; align-items:center; padding:.45rem .6rem; border:1px solid #e2e6ef; border-radius:8px; background:#fff; } .po-xero-contact-card:hover { border-color:#4f6ef7; } .po-xero-contact-info { flex:1; min-width:0; } .po-xero-contact-name { font-size:.8rem; font-weight:600; color:#1a1d2e; } .po-xero-contact-detail { font-size:.7rem; color:#6b7280; } .po-xero-create-btn { font-size:.75rem; } .po-xero-create-form { border:1px solid #e2e6ef; border-radius:8px; padding:.6rem; background:#fff; } .po-xero-section-label { font-size:.72rem; font-weight:700; color:#6b7280; text-transform:uppercase; letter-spacing:.04em; margin:.6rem 0 .3rem; } .po-xero-payment-details { border:none; margin-top:.25rem; } .po-xero-payment-details[open] .po-xero-section-label { color:#4f6ef7; } .po-form-disabled { opacity:.45; pointer-events:none; } .po-delivery-radios { display:flex; flex-direction:column; gap:.35rem; } .po-delivery-opt { display:flex; align-items:center; gap:.4rem; font-size:.8rem; cursor:pointer; padding:.25rem 0; } .po-delivery-opt input { margin:0; } .po-delivery-hint { font-size:.72rem; color:#9ca3af; } /* Invoice review modal */ .inv-review-sub { font-size:.82rem; color:#6b7280; margin-bottom:1rem; } .inv-compare { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; margin-bottom:1rem; } .inv-compare-card { background:#f8f9fc; border:1.5px solid #e2e6ef; border-radius:10px; padding:.75rem; } .inv-compare-label { font-size:.62rem; font-weight:700; color:#9ca3af; text-transform:uppercase; letter-spacing:.04em; margin-bottom:.5rem; } .inv-compare-row { display:flex; justify-content:space-between; font-size:.82rem; padding:.2rem 0; } .inv-compare-row strong { color:#1a1d2e; } .inv-compare-gross { font-size:.95rem; font-weight:700; border-top:1.5px solid #e2e6ef; padding-top:.35rem; margin-top:.25rem; } .inv-variance { padding:.5rem .75rem; border-radius:8px; font-size:.82rem; font-weight:600; margin-bottom:1rem; display:flex; align-items:center; gap:.4rem; } .inv-variance--match { background:rgba(22,163,74,.08); color:#16a34a; } .inv-variance--over { background:rgba(220,38,38,.06); color:#dc2626; } .inv-variance--under { background:rgba(224,124,0,.08); color:#e07c00; } .inv-review-files { margin-bottom:.75rem; } .inv-review-files-label { font-size:.68rem; font-weight:700; color:#9ca3af; text-transform:uppercase; letter-spacing:.04em; margin-bottom:.25rem; } .inv-review-notes { font-size:.8rem; color:#6b7280; font-style:italic; background:#f8f9fc; padding:.5rem .65rem; border-radius:8px; margin-bottom:.75rem; } .inv-review-actions { border-top:1.5px solid #e2e6ef; padding-top:.75rem; } .inv-review-actions-row { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.5rem; } .inv-review-input-area { display:none; margin-top:.5rem; } .inv-review-input-area.visible { display:block; } .inv-review-input-area textarea { width:100%; font-size:.8rem; border:1.5px solid #e2e6ef; border-radius:8px; padding:.5rem; resize:vertical; min-height:48px; font-family:inherit; margin-bottom:.4rem; } .inv-review-input-area input[type="number"] { width:180px; font-size:.8rem; border:1.5px solid #e2e6ef; border-radius:8px; padding:.4rem .5rem; margin-bottom:.4rem; } .inv-paid-progress { margin-bottom:.75rem; } .inv-paid-bar { height:6px; background:#e2e6ef; border-radius:3px; overflow:hidden; margin-top:.25rem; } .inv-paid-bar-fill { height:100%; background:#16a34a; border-radius:3px; transition:width .3s; } .inv-report-file-row { display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.4rem; padding:.35rem .5rem; background:#f8f9fc; border:1px solid #e2e6ef; border-radius:8px; } .inv-release-btn { font-size:.72rem !important; white-space:nowrap; flex-shrink:0; } .inv-inline-pdf { width:100%; height:500px; border:1.5px solid #e2e6ef; border-radius:8px; margin-bottom:.5rem; } .inv-inline-pdf-wrap { margin-bottom:.75rem; } .inv-inline-pdf-toggle { font-size:.78rem; font-weight:600; color:#6b7280; cursor:pointer; margin-bottom:.35rem; display:flex; align-items:center; gap:.35rem; } .inv-inline-pdf-toggle:hover { color:#4f6ef7; } /* Quote selection modal */ .sq-info { margin-bottom:.5rem; } .sq-sp { font-size:.92rem; font-weight:700; color:#1a1d2e; margin-bottom:.35rem; } .sq-files-label { font-size:.72rem; font-weight:600; color:#9ca3af; text-transform:uppercase; letter-spacing:.04em; margin-bottom:.25rem; } .sq-file { display:flex; align-items:center; gap:.35rem; font-size:.8rem; color:#4b5563; padding:.15rem 0; } .po-delivery-engineers { margin:.15rem 0; } .po-delivery-eng-summary { font-size:.78rem; font-weight:600; color:#6b7280; cursor:pointer; padding:.25rem 0; } .po-delivery-eng-summary:hover { color:#4f6ef7; } .po-delivery-engineers[open] .po-delivery-opt { padding-left:.75rem; } .rfq-recipient--locked { opacity:.55; cursor:default; } .po-line-exp { width:100%; font-size:.72rem; } /* PO loading overlay */ .po-loading-overlay { position:absolute; inset:0; background:rgba(255,255,255,.92); display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:10; border-radius:8px; } .po-loading-spinner { width:36px; height:36px; border:3px solid #e2e6ef; border-top-color:#4f6ef7; border-radius:50%; animation:po-spin .8s linear infinite; } @keyframes po-spin { to { transform:rotate(360deg); } } .po-loading-text { margin-top:.75rem; font-size:.85rem; color:#6b7280; font-weight:500; } /* PO success view */ .po-success-view { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:2rem 1rem; text-align:center; min-height:300px; } .po-success-icon { width:56px; height:56px; margin-bottom:1rem; } .po-success-title { font-size:1.1rem; font-weight:700; color:#1a1d2e; margin-bottom:.25rem; } .po-success-number { font-size:1.4rem; font-weight:800; color:#16a34a; margin-bottom:.5rem; } .po-success-detail { font-size:.85rem; color:#6b7280; margin-bottom:1.5rem; } /* Invoice cards (pay invoice step) */ .inv-card { border:1.5px solid #e2e6ef; border-radius:10px; padding:.75rem; margin-bottom:.5rem; background:#fff; } .inv-card-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:.4rem; } .inv-card-sp { font-size:.82rem; font-weight:600; color:#1a1d2e; } .inv-status { font-size:.68rem; font-weight:700; padding:.15rem .45rem; border-radius:999px; } .inv-status--received { background:rgba(79,110,247,.1); color:#4f6ef7; } .inv-status--under_review { background:rgba(224,124,0,.1); color:#e07c00; } .inv-status--approved { background:rgba(22,163,74,.1); color:#16a34a; } .inv-status--paid { background:#16a34a; color:#fff; } /* Client quote line items grid (7 columns: type, desc, qty, price, vat, account, remove) */ .cq-line-header { display:grid; grid-template-columns:90px 2fr 50px 85px 75px 90px 28px; gap:5px; padding:0 0 .35rem; border-bottom:1.5px solid #e2e6ef; margin-bottom:.35rem; } .cq-line-header span { font-size:.65rem; font-weight:700; color:#6b7280; text-transform:uppercase; letter-spacing:.04em; } .cq-line-row { display:grid; grid-template-columns:90px 2fr 50px 85px 75px 90px 28px; gap:5px; align-items:center; padding:.25rem 0; } .cq-line-row + .cq-line-row { border-top:1px solid #f0f2f8; } .cq-line-row .po-line-input { font-size:.75rem; padding:.25rem .35rem; border:1.5px solid #e2e6ef; border-radius:6px; width:100%; box-sizing:border-box; } .cq-line-row .po-line-input:focus { border-color:#4f6ef7; outline:none; } .inv-status--rejected { background:rgba(185,28,28,.1); color:#b91c1c; } .inv-status--variance_requested { background:rgba(224,124,0,.1); color:#e07c00; } .inv-status--sent { background:rgba(79,110,247,.1); color:#4f6ef7; } .inv-status--accepted { background:rgba(22,163,74,.1); color:#16a34a; } .inv-status--draft { background:rgba(107,114,128,.1); color:#6b7280; } .inv-card-details { margin-bottom:.4rem; } .inv-detail-row { display:flex; justify-content:space-between; font-size:.75rem; padding:.15rem 0; } .inv-detail-label { color:#9ca3af; font-weight:600; } .inv-detail-amount { font-weight:700; color:#1a1d2e; } .inv-files-section { margin:.4rem 0; } .inv-files-label { font-size:.68rem; font-weight:700; color:#9ca3af; text-transform:uppercase; letter-spacing:.03em; margin-bottom:.2rem; } .inv-notes { font-size:.75rem; color:#6b7280; font-style:italic; margin:.3rem 0; } .inv-actions { display:flex; gap:.4rem; margin-top:.5rem; padding-top:.4rem; border-top:1px solid #f0f2f8; } .inv-paid-meta { font-size:.72rem; color:#16a34a; font-weight:600; margin-top:.3rem; } /* Finance tab */ .finance-tab-scroll { padding:.5rem .75rem; overflow-y:auto; max-height:60vh; } .finance-section { margin-bottom:1rem; } .finance-section-head { font-size:.78rem; font-weight:700; color:#6b7280; text-transform:uppercase; letter-spacing:.04em; margin-bottom:.4rem; display:flex; align-items:center; gap:.4rem; } .finance-record-card { border:1.5px solid #e2e6ef; border-radius:10px; padding:.6rem .75rem; margin-bottom:.4rem; background:#fff; } .finance-record-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:.2rem; } .finance-record-title { font-size:.82rem; font-weight:600; color:#1a1d2e; } .finance-record-detail { font-size:.75rem; color:#4b5563; } .finance-record-meta { font-size:.68rem; color:#9ca3af; margin-top:.15rem; } .finance-record-files { margin-top:.3rem; display:flex; flex-wrap:wrap; gap:.3rem; } .finance-empty { font-size:.78rem; color:#9ca3af; font-style:italic; padding:.25rem 0; } .rfq-compose-header { font-size:.82rem; font-weight:700; color:#1a1d2e; margin-bottom:.5rem; padding-bottom:.35rem; border-bottom:1px solid rgba(0,0,0,.06); } .rfq-sent-section { margin-bottom:.75rem; } .rfq-sent-header { font-size:.78rem; font-weight:700; color:#6b7280; text-transform:uppercase; letter-spacing:.04em; margin-bottom:.35rem; } /* SP selection chips */ .rfq-sp-picker { display:flex; flex-wrap:wrap; gap:.4rem; } .rfq-sp-chip { display:inline-flex; align-items:center; gap:.3rem; padding:.3rem .65rem; border:1.5px solid #e2e6ef; border-radius:999px; font-size:.78rem; color:#1a1d2e; cursor:pointer; transition:border-color .15s, background .15s; user-select:none; } .rfq-sp-chip:hover { border-color:#4f6ef7; background:#f0f2ff; } .rfq-sp-chip input { accent-color:#4f6ef7; } .rfq-sp-chip input:checked + span { color:#4f6ef7; font-weight:600; } .rfq-sp-chip--sent { border-style:dashed; opacity:.5; cursor:default; } .rfq-sp-chip-sent { font-size:.65rem; color:#16a34a; font-weight:600; margin-left:.2rem; } /* Per-SP compose form */ .rfq-sp-form { border:1.5px solid #e2e6ef; border-radius:10px; padding:.75rem .85rem; margin-top:.6rem; background:#fafbfc; } .rfq-sp-form-title { font-size:.85rem; font-weight:700; color:#4f6ef7; margin-bottom:.5rem; padding-bottom:.3rem; border-bottom:1px solid rgba(79,110,247,.15); } /* Contact chips (to/cc) */ .rfq-contact-chip { display:inline-flex; align-items:center; gap:.25rem; padding:.2rem .5rem; border:1px solid #e2e6ef; border-radius:6px; font-size:.72rem; color:#1a1d2e; cursor:pointer; margin-right:.3rem; margin-bottom:.3rem; } .rfq-contact-chip input { accent-color:#4f6ef7; } .rfq-recipient-list { display:flex; flex-wrap:wrap; gap:.15rem; } /* Attachment zone within RFQ */ .rfq-attach-zone { margin-top:.35rem; } .rfq-file-list { display:flex; flex-direction:column; gap:.25rem; margin-top:.35rem; } .rfq-file-item { display:flex; align-items:center; justify-content:space-between; padding:.25rem .5rem; background:#f0f2f8; border-radius:6px; font-size:.75rem; } .rfq-file-item--existing { background:#e8f0fe; } .rfq-file-remove { background:none; border:none; color:#b91c1c; cursor:pointer; font-size:.8rem; font-weight:700; padding:0 .3rem; } /* Conversation cards */ .rfq-conv-card { border:1.5px solid #e2e6ef; border-radius:10px; padding:.6rem .75rem; margin-bottom:.5rem; background:#fff; } .rfq-conv-card--clickable { cursor:pointer; transition:background .15s, border-color .15s; } .rfq-conv-card--clickable:hover { background:#f8f9fc; border-color:#c7cee0; } .rfq-conv-card--open { border-color:#4f6ef7; background:#f8f9ff; } .rfq-conv-card--sm { padding:.4rem .6rem; margin-bottom:.35rem; } .rfq-conv-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:.2rem; } .rfq-conv-sp { font-size:.82rem; font-weight:600; color:#1a1d2e; } .rfq-conv-subject { font-size:.78rem; color:#6b7280; } .rfq-conv-meta { font-size:.72rem; color:#9ca3af; margin-top:.15rem; } .rfq-conv-status { font-size:.68rem; font-weight:600; padding:.15rem .45rem; border-radius:999px; } .rfq-status--pending { background:rgba(234,179,8,.1); color:#ca8a04; } .rfq-status--received { background:rgba(22,163,74,.1); color:#16a34a; } .rfq-status--closed { background:#f0f2f8; color:#9ca3af; } .rfq-conv-thread { padding-top:.45rem; } /* Email thread messages */ .email-thread-msg { padding:.5rem .6rem; border-radius:8px; margin-bottom:.4rem; font-size:.78rem; transition:background .1s; } .email-thread-msg[style*="cursor:pointer"]:hover { filter:brightness(.97); } .email-out { background:rgba(79,110,247,.04); border-left:3px solid #4f6ef7; } .email-in { background:rgba(22,163,74,.04); border-left:3px solid #16a34a; } .email-thread-header { display:flex; align-items:center; gap:.4rem; margin-bottom:.15rem; } .email-type-badge { font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:.1rem .4rem; border-radius:4px; flex-shrink:0; } .email-type-badge--rfq { background:rgba(79,110,247,.1); color:#4f6ef7; } .email-type-badge--follow-up { background:rgba(224,124,0,.1); color:#e07c00; } .email-type-badge--info { background:rgba(22,163,74,.1); color:#16a34a; } .email-type-badge--email { background:#f0f2f8; color:#6b7280; } .email-thread-sender { font-weight:600; color:#1a1d2e; font-size:.78rem; } .email-thread-date { font-size:.68rem; color:#9ca3af; margin-left:auto; flex-shrink:0; } .email-reply-btn { background:none; border:none; cursor:pointer; padding:.1rem; flex-shrink:0; opacity:.4; transition:opacity .15s; } .email-reply-btn:hover { opacity:1; } .email-reply-btn svg { width:14px; height:14px; stroke:#4f6ef7; } .email-thread-subject { font-size:.72rem; color:#6b7280; margin-bottom:.15rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .email-thread-att-count { font-size:.65rem; color:#9ca3af; display:block; margin-bottom:.1rem; } .email-expand-btn { margin-top:.1rem; } .email-full-body { margin-top:.3rem; padding:.4rem; background:#f8f9fc; border-radius:6px; font-size:.75rem; color:#374151; } .email-preview-note { font-size:.68rem; color:#9ca3af; font-style:italic; margin-bottom:.3rem; } .email-attachment-chip { display:inline-flex; align-items:center; gap:.2rem; padding:.15rem .4rem; background:#f0f2f8; border-radius:5px; font-size:.68rem; color:#4f6ef7; font-weight:500; } .email-attachment-chip--clickable { cursor:pointer; transition:background .15s; } .email-attachment-chip--clickable:hover { background:#e0e7ff; } .email-att-details { margin-top:.25rem; border:none; } .email-att-summary { display:flex; align-items:center; gap:.3rem; font-size:.68rem; font-weight:600; color:#6b7280; cursor:pointer; list-style:none; user-select:none; padding:.15rem 0; } .email-att-summary::-webkit-details-marker { display:none; } .email-att-label { font-size:.62rem; text-transform:uppercase; letter-spacing:.03em; color:#9ca3af; } .email-att-panel { display:flex; flex-wrap:wrap; gap:.3rem; padding:.25rem 0; } .email-att-quote-btn { margin-top:.25rem; font-size:.68rem; } /* Unflagged email attachments in payInvoice step */ .unflagged-att-section { margin-top:.75rem; padding-top:.5rem; border-top:1px solid rgba(0,0,0,.06); } .unflagged-att-header { font-size:.78rem; font-weight:700; color:#1a1d2e; margin-bottom:.15rem; } .unflagged-att-sub { font-size:.68rem; color:#6b7280; margin-bottom:.4rem; } .unflagged-att-list { display:flex; flex-direction:column; gap:.35rem; } .unflagged-att-row { display:flex; align-items:center; gap:.4rem; padding:.35rem .5rem; background:#f8f9fb; border-radius:8px; border:1px solid #e2e6ef; } .unflagged-att-view { flex-shrink:0; padding:.15rem; } .unflagged-att-name { flex:1; font-size:.74rem; font-weight:500; color:#1a1d2e; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; } .unflagged-att-sp { font-size:.66rem; color:#9ca3af; flex-shrink:0; } .unflagged-att-flag { flex-shrink:0; font-size:.68rem; padding:.15rem .45rem; } .quote-view-btn { display:inline-flex; align-items:center; gap:.3rem; font-size:.72rem; } /* Quote comparison cards */ .quote-comparison { margin-top:.5rem; } .quote-comparison-header { font-size:.82rem; font-weight:700; color:#1a1d2e; margin-bottom:.5rem; padding-bottom:.3rem; border-bottom:1px solid rgba(0,0,0,.06); } .quote-cards { display:flex; flex-direction:column; gap:.5rem; } .quote-card { border:1.5px solid #e2e6ef; border-radius:10px; padding:.65rem .75rem; background:#fff; transition:border-color .15s; } .quote-card--selected { border-color:#16a34a; background:rgba(22,163,74,.03); } .quote-card--rejected { opacity:.55; } .quote-card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:.25rem; } .quote-card-sp { font-size:.85rem; font-weight:700; color:#1a1d2e; } .quote-status { font-size:.68rem; font-weight:600; padding:.15rem .45rem; border-radius:999px; } .quote-status--selected { background:rgba(22,163,74,.1); color:#16a34a; } .quote-status--received { background:rgba(79,110,247,.1); color:#4f6ef7; } .quote-status--pending { background:rgba(234,179,8,.1); color:#ca8a04; } .quote-status--rejected { background:#f0f2f8; color:#9ca3af; } .quote-card-meta { font-size:.75rem; color:#6b7280; margin-bottom:.25rem; } .quote-card-files { display:flex; flex-wrap:wrap; gap:.25rem; margin-bottom:.35rem; } .quote-card-notes { font-size:.75rem; color:#6b7280; font-style:italic; margin-bottom:.35rem; } .quote-select-btn { margin-top:.3rem; } .quote-selected-badge { display:inline-flex; align-items:center; gap:.3rem; font-size:.78rem; font-weight:600; color:#16a34a; margin-top:.25rem; } .quote-reset-row { margin-top:.5rem; text-align:right; } /* Ticket divider */ .tk-divider { height:1px; background:rgba(0,0,0,.07); } /* Evidence modals */ .evidence-log-row { display:flex; gap:.65rem; padding:.6rem 0; border-bottom:1px solid rgba(0,0,0,.06); font-size:.85rem; } .evidence-log-row:last-child { border-bottom:none; } .evidence-log-label { font-weight:600; color:#1a1d2e; min-width:110px; flex-shrink:0; } .evidence-log-value { color:#4b5563; line-height:1.5; flex:1; } .evidence-log-value a { color:#4f6ef7; text-decoration:none; } .evidence-log-value a:hover { text-decoration:underline; } .finance-preview-table { width:100%; border-collapse:collapse; font-size:.82rem; } .finance-preview-table th { text-align:left; font-weight:600; color:#6b7280; padding:.4rem .6rem; border-bottom:1px solid rgba(0,0,0,.08); } .finance-preview-table td { padding:.55rem .6rem; border-bottom:1px solid rgba(0,0,0,.06); color:#1a1d2e; } .finance-preview-table tr:last-child td { border-bottom:none; } /* Email preview */ .view-email-btn { display:inline-flex; align-items:center; gap:.4rem; font-family:inherit; font-size:.78rem; font-weight:600; padding:.35rem .75rem; border-radius:10px; border:1.5px solid #e2e6ef; cursor:pointer; background:#f4f6fa; color:#4f6ef7; transition:background .15s; } .view-email-btn:hover { background:#eef1fe; border-color:#4f6ef7; } .view-email-btn svg { width:14px; height:14px; stroke:#4f6ef7; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; } .email-preview-wrap { border:1px solid #e2e6ef; border-radius:12px; overflow:hidden; background:#fff; } .email-preview-header { background:#f4f6fa; border-bottom:1px solid #e2e6ef; padding:.85rem 1rem; display:flex; flex-direction:column; gap:.35rem; } .email-preview-subject { font-size:.95rem; font-weight:700; color:#1a1d2e; margin-bottom:.1rem; } .email-preview-row { display:flex; gap:.5rem; font-size:.78rem; } .email-preview-field { font-weight:600; color:#6b7280; min-width:38px; flex-shrink:0; } .email-preview-val { color:#1a1d2e; } .email-preview-body { padding:0; } .email-preview-body iframe { width:100%; border:none; display:block; min-height:320px; } .fv-modal-body { padding:1.25rem; overflow-y:auto; min-height:0; } .fv-footer { display:flex;align-items:center;justify-content:flex-end;gap:.75rem;padding:.85rem 1.25rem;border-top:1px solid #e5e7eb;flex-shrink:0; } .fv-download-btn { display:inline-flex;align-items:center;gap:.4rem;padding:.4rem 1rem;background:#1d4ed8;color:#fff;border:none;border-radius:7px;font-size:.84rem;font-weight:500;cursor:pointer; } .fv-download-btn:hover { background:#1e40af; } .fv-download-btn svg { width:13px;height:13px;flex-shrink:0; } /* ─── FILE DROP ──────────────────────────────────────────────────────────── */ .file-drop-details { margin-bottom: .75rem; } .file-drop-toggle { display: flex; align-items: center; gap: .5rem; font-size: .8rem; font-weight: 600; color: #4b5563; cursor: pointer; list-style: none; padding: .5rem .6rem; border-radius: 8px; background: #f4f6fa; border: 1px solid rgba(0,0,0,.07); user-select: none; } .file-drop-toggle::-webkit-details-marker { display: none; } .file-drop-toggle svg:first-child { width: 14px; height: 14px; stroke: #6b7280; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } .file-drop-count { background: #e2e6ef; color: #4b5563; font-size: .7rem; font-weight: 700; border-radius: 999px; padding: .1rem .45rem; } .file-drop-chevron { width: 14px; height: 14px; stroke: #6b7280; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; margin-left: auto; transition: transform .2s; } .file-drop-details[open] .file-drop-chevron { transform: rotate(180deg); } .file-drop-panel { padding: .4rem 0 .25rem; display: flex; flex-direction: column; gap: 0; } /* Section collapsibles inside the file drop panel */ .file-drop-section { border: none; } .file-drop-subhead { display: flex; align-items: center; gap: .35rem; font-size: .7rem; font-weight: 700; color: #9ca3af; text-transform: uppercase; letter-spacing: .05em; padding: .5rem .25rem .3rem; cursor: pointer; list-style: none; user-select: none; } .file-drop-subhead::-webkit-details-marker { display: none; } .file-drop-section-chevron { width: 12px; height: 12px; stroke: #9ca3af; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; transition: transform .2s; } .file-drop-section[open] .file-drop-section-chevron { transform: rotate(180deg); } .file-drop-section-panel { display: flex; flex-direction: column; } .file-drop-row { display: flex; align-items: center; gap: .4rem; padding: .2rem 0; } .file-drop-item { flex: 1; display: flex; align-items: center; gap: .4rem; font-size: .8rem; color: #1a1d2e; font-weight: 500; background: none; border: none; cursor: pointer; font-family: inherit; text-align: left; padding: .3rem .25rem; border-radius: 6px; transition: background .15s; min-width: 0; } .file-drop-item:hover { background: #f0f2f8; } .file-drop-item svg { width: 13px; height: 13px; stroke: #6b7280; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } .file-drop-item span, .file-drop-item { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .file-drop-note { font-size: .72rem; color: #6b7280; padding: .15rem .25rem .25rem 1.4rem; line-height: 1.4; } .file-drop-subgroup-label { font-size:.68rem; color:#9ca3af; font-weight:600; padding:.4rem .25rem .15rem; text-transform:uppercase; letter-spacing:.03em; } .fv-note { font-size: .82rem; color: #6b7280; padding: .75rem 1.25rem 0; line-height: 1.5; } /* Login-specific additions only — everything else uses existing stylesheet */ .login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:2rem 1rem; } .login-tabs { display:flex; border:1px solid rgba(0,0,0,.08); border-radius:10px; overflow:hidden; margin-bottom:1.5rem; } .login-tab { flex:1; padding:.55rem; font-family:inherit; font-size:.875rem; font-weight:500; background:#f4f6fa; border:none; cursor:pointer; color:#6b7280; transition:background .15s,color .15s; } .login-tab.active { background:#fff; color:#1a1d2e; font-weight:600; } .btn-full { width:100%; justify-content:center; padding:.65rem 1rem; font-size:.95rem; } .spinner { display:inline-block; width:14px; height:14px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:spin .6s linear infinite; } /* ─── DOCUMENT (shared: PO, Quote) ──────────────────────────────────────── */ .po-doc { font-size:.82rem; color:#1a1d2e; } .po-doc-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:1.25rem; padding-bottom:1rem; border-bottom:2px solid #e2e6ef; } .po-doc-header-left { } .po-doc-header-logo { height:32px; margin-bottom:.5rem; } .po-doc-header-title { font-size:1.1rem; font-weight:700; color:#1a1d2e; } .po-doc-header-right { text-align:right; } .po-doc-header-right .po-doc-po-num { font-size:1.1rem; font-weight:700; color:#4f6ef7; } .po-doc-section { margin-bottom:1rem; } .po-doc-section-label { font-size:.68rem; font-weight:700; color:#9ca3af; text-transform:uppercase; letter-spacing:.04em; margin-bottom:.25rem; } .po-doc-section-value { font-size:.82rem; color:#1a1d2e; line-height:1.5; } .po-doc-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1rem; } .po-doc-line-table { width:100%; border-collapse:collapse; margin:1rem 0; font-size:.78rem; } .po-doc-line-table th { text-align:left; font-size:.68rem; font-weight:700; color:#9ca3af; text-transform:uppercase; letter-spacing:.04em; padding:.5rem .4rem; border-bottom:2px solid #e2e6ef; } .po-doc-line-table td { padding:.5rem .4rem; border-bottom:1px solid #f0f2f8; } .po-doc-line-table .text-right { text-align:right; } .po-doc-totals { display:flex; justify-content:flex-end; margin:1rem 0; } .po-doc-totals-table { font-size:.82rem; } .po-doc-totals-table td { padding:.25rem .75rem; } .po-doc-totals-table .total-label { font-weight:600; text-align:right; color:#6b7280; } .po-doc-totals-table .total-value { font-weight:700; text-align:right; } .po-doc-totals-table .total-gross { font-size:.95rem; color:#1a1d2e; border-top:2px solid #1a1d2e; } .po-doc-actions { display:flex; gap:.5rem; margin-top:1.25rem; padding-top:1rem; border-top:1.5px solid #e2e6ef; } .po-doc-actions .btn { font-size:.78rem; } @keyframes spin { to { transform:rotate(360deg); } } /* ── NOTIFICATION BELL ── */ .notif-bell-btn { position:relative; background:none; border:none; cursor:pointer; padding:6px; border-radius:10px; transition:background .15s; display:flex; align-items:center; justify-content:center; } .notif-bell-btn:hover { background:rgba(0,0,0,.04); } .notif-bell-btn svg { width:20px; height:20px; color:#1a1d2e; } .notif-bell-badge { position:absolute; top:-2px; right:-4px; background:#ef4444; color:#fff; font-size:10px; font-weight:700; min-width:18px; height:18px; border-radius:9px; display:flex; align-items:center; justify-content:center; padding:0 4px; border:2px solid #fff; animation:notif-pulse 2s ease-in-out infinite; } @keyframes notif-pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.12)} } /* ── NOTIFICATION OVERLAY ── */ /* Mobile: bottom sheet */ .notif-overlay-backdrop { position:fixed; inset:0; background:rgba(15,18,36,.55); backdrop-filter:blur(4px); z-index:200; display:flex; align-items:flex-end; justify-content:center; opacity:0; pointer-events:none; transition:opacity .25s ease; } .notif-overlay-backdrop.open { opacity:1; pointer-events:all; } .notif-overlay-panel { width:100%; max-width:420px; background:#fff; border-radius:24px 24px 0 0; padding:0 0 32px; transform:translateY(100%); transition:transform .35s cubic-bezier(.32,.72,0,1); max-height:92vh; overflow-y:auto; } .notif-overlay-backdrop.open .notif-overlay-panel { transform:translateY(0); } /* Desktop: centered modal */ @media (min-width:768px) { .notif-overlay-backdrop { align-items:center; } .notif-overlay-panel { border-radius:20px; padding:0 0 24px; max-height:80vh; transform:scale(.95); opacity:0; } .notif-overlay-backdrop.open .notif-overlay-panel { transform:scale(1); opacity:1; } } .notif-overlay-handle { width:36px; height:4px; background:#e4e6ed; border-radius:2px; margin:12px auto 0; } .notif-overlay-header { display:flex; align-items:center; justify-content:space-between; padding:16px 20px 12px; border-bottom:1px solid #e4e6ed; position:sticky; top:0; background:#fff; z-index:1; } .notif-overlay-title { font-size:17px; font-weight:700; color:#1a1d2e; display:flex; align-items:center; gap:10px; } .notif-overlay-total { background:#ef4444; color:#fff; font-size:12px; font-weight:700; padding:2px 8px; border-radius:100px; } .notif-overlay-close { width:30px; height:30px; border-radius:50%; background:#f0f1f5; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; color:#8a8fa8; font-size:16px; transition:background .15s; } .notif-overlay-close:hover { background:#e4e6ed; } .notif-overlay-body { padding:16px 20px 0; } .notif-overlay-group { margin-bottom:20px; } .notif-overlay-group-label { font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#8a8fa8; margin-bottom:8px; padding:0 2px; } .notif-overlay-divider { height:1px; background:#e4e6ed; margin:4px 0 20px; } /* Notification item */ .notif-overlay-item { display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:14px; border:1px solid #e4e6ed; margin-bottom:8px; cursor:pointer; transition:all .15s ease; background:#fff; } .notif-overlay-item:hover { border-color:#2563eb; box-shadow:0 2px 12px rgba(37,99,235,.08); transform:translateY(-1px); } .notif-overlay-item--dimmed { opacity:.45; } .notif-overlay-item--dimmed:hover { opacity:.6; } .notif-overlay-item-icon { width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; } .notif-overlay-item-content { flex:1; min-width:0; } .notif-overlay-item-name { font-size:14px; font-weight:600; color:#1a1d2e; } .notif-overlay-item-count { font-size:13px; font-weight:700; min-width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; padding:0 6px; } .notif-overlay-item-chevron { color:#8a8fa8; font-size:14px; flex-shrink:0; } /* Colour variants */ .notif-overlay-item--accent .notif-overlay-item-icon { background:#eff4ff; color:#2563eb; } .notif-overlay-item--accent .notif-overlay-item-count { background:#eff4ff; color:#2563eb; } .notif-overlay-item--purple .notif-overlay-item-icon { background:#f3f0ff; color:#7c3aed; } .notif-overlay-item--purple .notif-overlay-item-count { background:#f3f0ff; color:#7c3aed; } .notif-overlay-item--warning .notif-overlay-item-icon { background:#fef9c3; color:#a16207; } .notif-overlay-item--warning .notif-overlay-item-count { background:#fef9c3; color:#a16207; } .notif-overlay-item--orange .notif-overlay-item-icon { background:#fff7ed; color:#ea580c; } .notif-overlay-item--orange .notif-overlay-item-count { background:#fff7ed; color:#ea580c; } .notif-overlay-item--danger .notif-overlay-item-icon { background:#fee2e2; color:#ef4444; } .notif-overlay-item--danger .notif-overlay-item-count { background:#fee2e2; color:#ef4444; } .notif-overlay-item--teal .notif-overlay-item-icon { background:#f0fdfa; color:#0d9488; } .notif-overlay-item--teal .notif-overlay-item-count { background:#f0fdfa; color:#0d9488; } /* Mark all read button */ .notif-overlay-mark-all { width:100%; background:none; border:1.5px solid #e4e6ed; border-radius:12px; padding:12px; font-family:inherit; font-size:14px; font-weight:600; color:#8a8fa8; cursor:pointer; margin-top:4px; transition:all .15s; } .notif-overlay-mark-all:hover { border-color:#2563eb; color:#2563eb; background:#eff4ff; } /* Sub-item rows (expandable drill-down) */ .notif-overlay-subitems { padding:0 16px 8px 54px; } .notif-overlay-subrow { display:flex; align-items:center; gap:8px; padding:6px 10px; border-radius:8px; font-size:12px; margin-bottom:2px; background:#f8f9fb; } .notif-overlay-subrow-label { flex:1; color:#4b5563; font-weight:500; } .notif-overlay-subrow-count { font-weight:700; color:#1a1d2e; min-width:24px; text-align:right; } .notif-overlay-subrow-mark { background:none; border:1.5px solid #e4e6ed; border-radius:6px; width:26px; height:26px; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:12px; color:#8a8fa8; transition:all .15s; flex-shrink:0; } .notif-overlay-subrow-mark:hover { border-color:#22c55e; color:#22c55e; background:#f0fdf4; } .notif-overlay-item-chevron { cursor:pointer; user-select:none; } /* ── BADGE POPOVER ── */ .badge-popover-wrap { animation:badge-pop-in .15s ease; } @keyframes badge-pop-in { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } } .badge-popover { background:#fff; border:1px solid #e4e6ed; border-radius:12px; padding:8px 12px; box-shadow:0 4px 16px rgba(0,0,0,.12); min-width:180px; } .badge-popover-row { display:flex; align-items:center; gap:8px; padding:4px 0; font-size:12px; } .badge-popover-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; } .badge-popover-label { flex:1; color:#4b5563; font-weight:500; } /* ── SUBMIT REPORT step body ── */ .sr-step-container, .sr-done-content { display:flex; flex-direction:column; gap:.65rem; } .sr-header-card { background:#f8fafc; border:1px solid #e4e6ed; border-radius:10px; padding:.5rem .75rem; font-size:.85rem; color:#1a1d2e; } .sr-header-count strong { color:#1a1d2e; } .sr-report-list { display:flex; flex-direction:column; gap:.3rem; } .sr-empty-state { background:#fafbfc; border:1px dashed #d1d5db; border-radius:10px; padding:.8rem 1rem; font-size:.82rem; color:#6b7280; text-align:center; } .sr-empty-state em { color:#4f6ef7; font-style:normal; font-weight:600; } .sr-actions { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; } .sr-mark-btn[disabled] { opacity:.55; cursor:not-allowed; filter:grayscale(.2); } .sr-defer-note { display:flex; gap:.5rem; align-items:flex-start; background:#fffbeb; border:1px solid #fde68a; border-left:3px solid #e07c00; border-radius:8px; padding:.55rem .7rem; font-size:.8rem; line-height:1.4; color:#78350f; } .sr-defer-note a { color:#4f6ef7; font-weight:600; text-decoration:underline; } .sr-defer-note a:hover { color:#3d57d3; } /* ── PO verification — finance-box three states + modal ── */ .pv-po-box { margin-top:.5rem; padding:.6rem .75rem; border-radius:8px; display:flex; flex-direction:column; gap:.4rem; } .pv-po-box--unverified { background:#f0fdf4; border:1px solid #bbf7d0; } .pv-po-box--verified { background:#eef2ff; border:1px solid #c7d2fe; } .pv-po-head { display:flex; align-items:center; justify-content:space-between; gap:.5rem; flex-wrap:wrap; } .pv-po-head strong { color:#1a1d2e; } .pv-verified-row { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; padding-top:.25rem; } .pv-verified-badge { display:inline-flex; align-items:center; padding:.15rem .55rem; border-radius:999px; background:#4f6ef7; color:#fff; font-size:.72rem; font-weight:600; letter-spacing:.02em; } .pv-verified-meta { font-size:.72rem; color:#4b5563; } .pv-verified-detail { font-size:.8rem; color:#1a1d2e; padding-top:.15rem; } .pv-verified-detail strong { color:#1a1d2e; } .pv-var-section { margin-top:.35rem; } .pv-var-title { font-size:.72rem; font-weight:600; color:#6b7280; text-transform:uppercase; letter-spacing:.04em; margin-bottom:.25rem; } .pv-var-table { width:100%; border-collapse:collapse; font-size:.78rem; background:#fff; border:1px solid #e5e7eb; border-radius:6px; overflow:hidden; } .pv-var-table th, .pv-var-table td { padding:.35rem .55rem; text-align:left; border-bottom:1px solid #f0f2f8; } .pv-var-table th { background:#f9fafb; font-weight:600; color:#6b7280; font-size:.7rem; text-transform:uppercase; letter-spacing:.04em; } .pv-var-table tbody tr:last-child td { border-bottom:none; } .pv-var-table td:first-child { color:#4b5563; font-weight:500; width:38%; } .pv-var-table td:last-child { color:#1a1d2e; } .pv-var-empty { margin-top:.35rem; font-size:.78rem; color:#6b7280; font-style:italic; } .pv-actions { display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.35rem; } /* Verify PO modal body */ .pv-modal-top { background:#f8fafc; border:1px solid #e2e8f0; border-radius:10px; padding:.7rem .85rem; margin-bottom:.9rem; } .pv-client-entered { display:flex; justify-content:space-between; align-items:baseline; gap:.75rem; margin-bottom:.4rem; flex-wrap:wrap; } .pv-sub-label { font-size:.72rem; font-weight:600; color:#6b7280; text-transform:uppercase; letter-spacing:.04em; } .pv-sub-value { font-size:.92rem; color:#1a1d2e; font-weight:600; font-family:'SF Mono', Menlo, Consolas, monospace; } .pv-modal-hint { font-size:.78rem; color:#4b5563; line-height:1.5; } .pv-var-block { margin-bottom:1rem; } .pv-var-block-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:.25rem; gap:.75rem; } .pv-var-block-title { font-size:.88rem; font-weight:600; color:#1a1d2e; } .pv-var-block-sub { font-size:.74rem; color:#6b7280; margin-bottom:.6rem; line-height:1.45; } .pv-var-hint { font-size:.78rem; color:#6b7280; font-style:italic; padding:.5rem .2rem; } .pv-var-hint em { color:#4f6ef7; font-style:normal; font-weight:600; } .pv-var-rows { display:flex; flex-direction:column; gap:.4rem; } .pv-var-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; gap:.4rem; align-items:center; } .pv-var-row .form-input { font-size:.82rem; padding:.4rem .55rem; } .pv-var-remove { width:32px; height:32px; border:1px solid #fecaca; background:#fef2f2; color:#b91c1c; border-radius:6px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:background .15s; } .pv-var-remove:hover { background:#fee2e2; } .pv-var-table { width:100%; border-collapse:collapse; margin-bottom:.5rem; } .pv-var-table td { font-size:.82rem; padding:.35rem .5rem; border-bottom:1px solid #f0f1f5; } .pv-var-table-name { font-weight:600; color:#1a1d2e; white-space:nowrap; width:40%; } .pv-var-table-value { color:#4b5563; } .pv-pdf-block { margin-top:1rem; margin-bottom:.75rem; } .pv-pdf-title { font-size:.74rem; font-weight:600; color:#6b7280; text-transform:uppercase; letter-spacing:.04em; margin-bottom:.4rem; } .pv-pdf-frame { width:100%; height:60vh; min-height:420px; border:1px solid #e5e7eb; border-radius:8px; background:#f9fafb; display:block; } @media (max-width:640px) { .pv-var-row { grid-template-columns:minmax(0,1fr) auto; grid-template-rows:auto auto; } .pv-var-row .pv-var-name { grid-column:1 / -1; } .pv-pdf-frame { height:45vh; } } /* Invoice Client step */ .ic-summary-card, .ic-invoice-card { background:#f8f9fc; border:1.5px solid #e2e6ef; border-radius:10px; padding:.85rem; margin-bottom:.75rem; } .ic-summary-title { font-size:.88rem; font-weight:600; color:#1a1d2e; margin-bottom:.4rem; } .ic-invoice-head { display:flex; align-items:center; gap:.5rem; margin-bottom:.4rem; } .ic-invoice-head strong { font-size:.88rem; color:#1a1d2e; } .ic-status-badge { font-size:.68rem; font-weight:600; padding:.15rem .4rem; border-radius:6px; } .ic-status--draft { background:rgba(156,163,175,.12); color:#6b7280; } .ic-status--sent { background:rgba(79,110,247,.1); color:#4f6ef7; } .ic-status--paid { background:rgba(22,163,74,.1); color:#16a34a; } .ic-invoice-amounts { display:flex; gap:1rem; flex-wrap:wrap; font-size:.82rem; color:#4b5563; margin-bottom:.35rem; } .ic-invoice-detail { font-size:.82rem; color:#4b5563; margin-bottom:.25rem; } .ic-invoice-vars { display:flex; gap:.4rem; flex-wrap:wrap; margin:.35rem 0; } .ic-var-chip { font-size:.72rem; background:#eef2ff; border:1px solid #e0e7ff; border-radius:6px; padding:.2rem .45rem; color:#1e293b; } .ic-actions { margin-top:.5rem; } .ic-empty { font-size:.82rem; color:#9ca3af; font-style:italic; padding:.5rem 0; } /* Invoice review modal */ .ic-review-header { display:flex; gap:1.5rem; flex-wrap:wrap; margin-bottom:.75rem; padding-bottom:.75rem; border-bottom:1px solid #e2e6ef; } .ic-review-header-left { } .ic-review-label { font-size:.68rem; font-weight:600; color:#6b7280; text-transform:uppercase; letter-spacing:.04em; } .ic-review-value { font-size:.88rem; font-weight:600; color:#1a1d2e; } .ic-review-po-section { background:#f8f9fc; border:1px solid #e2e6ef; border-radius:8px; padding:.6rem .75rem; margin-bottom:.75rem; } .ic-review-po-row { font-size:.82rem; color:#4b5563; margin-bottom:.15rem; } .ic-review-po-row strong { color:#1a1d2e; } .ic-review-lines { margin-bottom:.75rem; } .ic-review-title { font-size:.82rem; font-weight:600; color:#1a1d2e; margin-bottom:.4rem; } .ic-line-table { width:100%; border-collapse:collapse; font-size:.82rem; } .ic-line-table th { text-align:left; font-weight:600; color:#6b7280; font-size:.72rem; text-transform:uppercase; letter-spacing:.03em; padding:.4rem .5rem; border-bottom:2px solid #e2e6ef; } .ic-line-table td { padding:.45rem .5rem; border-bottom:1px solid #f0f1f5; color:#1a1d2e; } .ic-col-num { text-align:right; white-space:nowrap; } .ic-review-totals { display:flex; flex-direction:column; align-items:flex-end; gap:.15rem; padding-top:.5rem; border-top:1px solid #e2e6ef; } .ic-review-total-row { display:flex; gap:1.5rem; font-size:.82rem; color:#4b5563; } .ic-review-total-row span:last-child { min-width:80px; text-align:right; } .ic-review-total-gross { font-weight:700; font-size:.88rem; color:#1a1d2e; padding-top:.2rem; border-top:1px solid #1a1d2e; } /* Invoice preview (review modal) */ .inv-preview { background:#fff; border:1px solid #d1d5db; border-radius:4px; padding:2rem 2.25rem; margin-bottom:1rem; box-shadow:0 1px 4px rgba(0,0,0,.06); } .inv-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:1.5rem; padding-bottom:1rem; border-bottom:2px solid #1a1d2e; } .inv-header-brand { display:flex; align-items:center; gap:.75rem; } .inv-logo { height:36px; width:auto; } .inv-company-name { font-size:.88rem; font-weight:600; color:#1a1d2e; } .inv-header-title { font-size:1.6rem; font-weight:700; color:#1a1d2e; letter-spacing:.06em; } .inv-meta-row { display:flex; justify-content:space-between; gap:2rem; margin-bottom:1.25rem; } .inv-meta-col { flex:1; } .inv-meta-col--right { flex:0 0 auto; text-align:right; } .inv-meta-label { font-size:.68rem; font-weight:600; color:#6b7280; text-transform:uppercase; letter-spacing:.04em; } .inv-meta-value { font-size:.84rem; color:#1a1d2e; } .inv-meta-field { display:flex; justify-content:space-between; gap:1rem; margin-bottom:.2rem; } .inv-meta-field .inv-meta-label { white-space:nowrap; } .inv-meta-field .inv-meta-value { text-align:right; } .inv-meta-tbd { font-style:italic; color:#9ca3af; } .inv-client-name { font-size:.92rem; font-weight:700; margin-bottom:.1rem; } .inv-vars-section { background:#f8f9fc; border:1px solid #e2e6ef; border-radius:6px; padding:.6rem .85rem; margin-bottom:1rem; } .inv-var-row { display:flex; justify-content:space-between; gap:1rem; font-size:.82rem; margin-bottom:.15rem; } .inv-var-row .inv-meta-label { flex:0 0 auto; } .inv-var-row .inv-meta-value { text-align:right; } .inv-line-table { width:100%; border-collapse:collapse; margin-bottom:1rem; } .inv-line-table thead { border-bottom:2px solid #e2e6ef; } .inv-line-table th { font-size:.68rem; font-weight:600; color:#6b7280; text-transform:uppercase; letter-spacing:.03em; padding:.5rem .5rem; text-align:left; } .inv-th-num { text-align:right; } .inv-line-table td { font-size:.84rem; color:#1a1d2e; padding:.55rem .5rem; border-bottom:1px solid #f0f1f5; } .inv-td-num { text-align:right; white-space:nowrap; } .inv-empty-lines { text-align:center; color:#b91c1c; font-style:italic; padding:1rem; } .inv-totals { display:flex; flex-direction:column; align-items:flex-end; gap:.2rem; padding-top:.5rem; } .inv-total-row { display:flex; gap:2rem; font-size:.84rem; color:#4b5563; } .inv-total-row span:last-child { min-width:100px; text-align:right; } .inv-total-gross { font-size:1rem; font-weight:700; color:#1a1d2e; padding-top:.35rem; margin-top:.2rem; border-top:2px solid #1a1d2e; } .inv-controls { margin-bottom:.75rem; } @media (max-width:640px) { .inv-preview { padding:1rem 1.25rem; } .inv-meta-row { flex-direction:column; gap:.75rem; } .inv-meta-col--right { text-align:left; } .inv-meta-field { justify-content:flex-start; } } /* Finance tab collapsible groups */ .fin-group { margin-bottom:.75rem; border:1.5px solid #e2e6ef; border-radius:10px; overflow:hidden; } .fin-group-head { display:flex; align-items:center; gap:.5rem; padding:.65rem .85rem; background:#f8f9fc; cursor:pointer; user-select:none; } .fin-group-head:hover { background:#eef2ff; } .fin-group-chevron { width:16px; height:16px; flex:none; color:#6b7280; transition:transform .2s; } .fin-group-title { font-size:.88rem; font-weight:700; color:#1a1d2e; } .fin-group-body { padding:.5rem .85rem .85rem; } .fin-group--collapsed .fin-group-body { display:none; } .fin-group--collapsed .fin-group-chevron { transform:rotate(-90deg); } .ic-reply-form { background:#f8f9fc; border:1px solid #e2e6ef; border-radius:8px; padding:.85rem; margin-top:.5rem; } .ic-email-compose { margin-top:.75rem; } .ic-email-title { font-size:.82rem; font-weight:600; color:#1a1d2e; margin-bottom:.5rem; } .ic-recipient-list { display:flex; flex-direction:column; gap:.25rem; } .ic-recipient-check { font-size:.82rem; color:#4b5563; display:flex; align-items:center; gap:.35rem; cursor:pointer; } .ic-no-contacts { font-size:.78rem; color:#b91c1c; font-style:italic; } .badge-popover-count { font-weight:700; color:#1a1d2e; min-width:20px; text-align:right; }