/* NEXT CRM โ€” unified stylesheet. Edit this file for all CRM styling. Sections preserve the original cascade; local CSS imports are expanded. */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap'); .brief-work .crm-table-footer { border-top:1px solid #dce5f0; background:#f7f9fd; padding:14px 24px; font-size:10px; } /* ========================================================================== SECTION: CRM briefing design system Shared screen styling for admin, clients, portal, AI and authentication. Modules retain ownership of their layout, fields, data and interactions. ========================================================================== */ body.crm-briefing { --brief-ink:#263954; --brief-muted:#52647c; --brief-canvas:#f4f7fb; --brief-surface:#fff; --brief-soft:#f7f9fd; --brief-line:#dce5f0; --brief-strong-line:#c8d4e4; --brief-green:#17253b; --brief-sage:#4165e8; --brief-clay:#9b675c; --brief-ochre:#c69a54; --u-bg:var(--brief-canvas); --u-surface:var(--brief-surface); --u-soft:var(--brief-soft); --u-text:var(--brief-ink); --u-strong:#17253b; --u-muted:var(--brief-muted); --u-border:var(--brief-line); --u-border-strong:var(--brief-strong-line); --u-primary:var(--brief-green); --u-primary-hover:#243954; --u-link:var(--brief-green); --u-danger:#875348; --u-radius:16px; --u-radius-sm:8px; --u-shadow:0 4px 16px #29443806; --u-shadow-soft:0 4px 16px #29443804; --nx-primary:var(--brief-green); --nx-primary-strong:#243954; --nx-primary-soft:#eef3ff; --nx-text:var(--brief-ink); --nx-border:var(--brief-line); --pro-primary:var(--brief-green); --pro-primary-soft:#eef3ff; background:var(--brief-canvas)!important; color:var(--brief-ink)!important; font-family:Inter,"Segoe UI",Arial,sans-serif; -webkit-font-smoothing:antialiased; } @media screen { body.crm-briefing.nextcrm-modern .customer-content, body.crm-briefing.nextcrm-modern .next-ai-content, body.crm-briefing.portal-professional .portal-main { background:var(--brief-canvas)!important;color:var(--brief-ink)!important; } body.crm-briefing.nextcrm-modern .customer-topbar, body.crm-briefing.portal-professional .portal-shell-header { background:#fff!important;border-color:var(--brief-line)!important;box-shadow:none!important; } body.crm-briefing.nextcrm-modern .customer-sidebar { background:#f7f9fd!important;border-color:var(--brief-line)!important; } body.crm-briefing.nextcrm-modern .customer-profile-card { background:#fff!important;border:1px solid var(--brief-line)!important;border-radius:12px!important;box-shadow:none!important; } body.crm-briefing.nextcrm-modern .customer-sidebar nav :is(a,summary) { font-size:12px!important;font-weight:550!important;color:#52647c!important;border-radius:8px!important; } body.crm-briefing.nextcrm-modern .customer-sidebar nav a.active { background:#17253b!important;color:#fff!important;border-color:#17253b!important; } body.crm-briefing.nextcrm-modern .customer-sidebar nav a.active svg { color:#d3e2c5!important; } body.crm-briefing.nextcrm-modern .customer-sidebar nav :is(a,summary):hover { background:#f7f9fd!important;color:#17253b!important; } body.crm-briefing.nextcrm-modern .customer-global-search { background:#f7f9fd!important;border:1px solid #dce5f0!important;border-radius:9px!important; } body.crm-briefing.nextcrm-modern .customer-content :is(h1,h2,h3), body.crm-briefing.portal-professional .portal-main :is(h1,h2,h3) { color:#263954!important;text-shadow:none!important; } /* Page introductions: typographic hierarchy rather than large tinted boxes. */ body.crm-briefing.nextcrm-modern .customer-content :is( .page-intro,.customer-page-heading,.sales-heading,.expense-page-head,.expense-form-head, .staff-head,.contacts-head,.contract-head,.contract-workspace-head,.contract-form-heading, .items-head,.order-head,.support-head,.announce-head,.timecard-head,.leave-head, .event-page-head,.main-task-heading,.project-detail-heading,.project-form-heading, .invoice-heading,.invoice-detail-heading,.estimate-heading,.payment-detail-heading, .payment-form-heading,.predefined-page-head,.predefined-form-heading, .project-subtab-head,.kb-page-head,.kb-form-heading,.report-heading, .customer-form-heading,.client-page-head,.channels-head,.commerce-heading ) { background:transparent!important;border:0!important;border-radius:0!important; box-shadow:none!important;padding:12px 0 24px!important;margin-bottom:0!important; } body.crm-briefing.nextcrm-modern .customer-content :is( .page-intro,.customer-page-heading,.sales-heading,.expense-page-head,.staff-head, .contacts-head,.contract-head,.items-head,.order-head,.support-head,.event-page-head, .main-task-heading,.project-detail-heading,.invoice-heading,.estimate-heading, .kb-page-head,.payment-form-heading,.predefined-page-head,.commerce-heading )::before { display:none!important; } body.crm-briefing.nextcrm-modern .customer-content :is( .page-intro,.customer-page-heading,.sales-heading,.expense-page-head,.staff-head, .contacts-head,.contract-head,.items-head,.order-head,.event-page-head, .main-task-heading,.project-detail-heading,.invoice-heading,.estimate-heading, .kb-page-head,.payment-form-heading,.predefined-page-head,.commerce-heading ) h1 { font-size:clamp(24px,2.2vw,32px)!important;font-weight:650!important;letter-spacing:-.9px!important;line-height:1.2!important; } body.crm-briefing.nextcrm-modern .customer-content :is(.eyebrow,[class*="-eyebrow"]) { color:#52647c!important;font-size:10px!important;font-weight:700!important;letter-spacing:.13em!important; } body.crm-briefing.nextcrm-modern .customer-content :is( .client-overview-hero,.contact-hero,.staff-hero,.profile-hero,.mp-hero,.commerce-hero, .kb-dashboard-hero,.kb-form-hero,.project-gantt-heading,.nai-settings-hero ) { background:#eef3ff!important;border:1px solid #dce5f0!important;box-shadow:none!important;color:#263954!important;border-radius:16px!important; } body.crm-briefing.nextcrm-modern .customer-content :is([class*="-hero"]) p { color:#52647c!important; } /* List, record and form surfaces. Do not impose dimensions or hide content. */ body.crm-briefing.nextcrm-modern .customer-content :is( .panel,.form-panel,.table-panel,.customer-table-card,.sales-card,.subscription-index-card, .subscription-form-card,.kb-table-card,.kb-form-card,.contract-card,.contracts-card, .contacts-card,.staff-panel,.settings-card,.settings-nav-card,.expense-list-panel, .expense-detail-panel,.expense-receipt-card,.expense-form-card,.items-card,.order-card, .process-card,.support-card,.report-card,.commerce-card,.announce-card,.timecard-card, .leave-card,.file-card,.messages-card,.ticket-card,.module-summary,.client-card, .project-subtab-shell,.project-gantt-card,.project-detail-panel,.main-task-card, .invoice-list-card,.invoice-contact-card,.payment-contact-card,.estimate-contact-card, .proposal-contact-card,.client-overview-card,.profile-card,.staff-card,.event-calendar-card ) { background:#fff!important;border:1px solid #dce5f0!important;border-radius:16px!important;box-shadow:0 4px 16px #29443804!important; } body.crm-briefing.nextcrm-modern .customer-content :is( .client-invoice-summary>div,.project-detail-summary-card,.items-summary-grid>div, .commerce-stats>div,.payment-detail-summary>div,.invoice-contact-summary>div, .estimate-contact-summary>div,.client-summary-grid>div,.leave-summary-cards>div, .report-metric,.event-summary-grid>div,.main-task-status-card,.subscription-summary-item ) { background:#fff!important;border:1px solid #dce5f0!important;border-radius:12px!important;box-shadow:none!important; } body.crm-briefing.nextcrm-modern .customer-content :is(.project-detail-summary-card,.report-metric,.event-summary-grid>div,.client-invoice-summary>div) strong { color:#17253b!important;font-weight:600!important;font-variant-numeric:tabular-nums;letter-spacing:-.5px; } /* Tables share the operations desk rhythm. Document print styles remain intact. */ body.crm-briefing.nextcrm-modern .customer-content table, body.crm-briefing.portal-professional .portal-main table { border-collapse:separate!important;border-spacing:0!important;background:#fff!important;color:#263954!important; } body.crm-briefing.nextcrm-modern .customer-content table thead th, body.crm-briefing.portal-professional .portal-main table thead th { background:#f7f9fd!important;color:#52647c!important;border:0!important;border-bottom:1px solid #dce5f0!important; padding:13px 16px!important;height:auto!important;font-size:11px!important;font-weight:600!important; letter-spacing:.025em!important;line-height:1.4!important;box-shadow:none!important; } body.crm-briefing.nextcrm-modern .customer-content table tbody td, body.crm-briefing.portal-professional .portal-main table tbody td { background:#fff!important;color:#263954!important;border:0!important;border-bottom:1px solid #e8eef6!important; padding:15px 16px!important;font-size:12px!important;line-height:1.55!important;box-shadow:none!important; } body.crm-briefing.nextcrm-modern .customer-content table tbody tr:hover td, body.crm-briefing.portal-professional .portal-main table tbody tr:hover td { background:#f7f9fd!important; } body.crm-briefing.nextcrm-modern .customer-content table td a:not(.btn):not([class*="button"]):not([class*="delete"]), body.crm-briefing.portal-professional .portal-main table td a { color:#17253b!important;font-weight:600!important; } body.crm-briefing.nextcrm-modern .customer-content table td a:hover { text-decoration:underline!important;text-underline-offset:3px; } body.crm-briefing.nextcrm-modern .customer-content :is( .table-toolbar,.customer-table-toolbar,.sales-toolbar,.subscription-table-tools,.kb-table-toolbar, .items-toolbar,.contacts-toolbar,.staff-toolbar,.commerce-toolbar,.leave-toolbar,.announce-toolbar, .timecard-toolbar,.ticket-toolbar,.file-toolbar,.support-toolbar,.order-toolbar,.expense-list-toolbar ) { background:#fff!important;border-color:#dce5f0!important;padding:16px!important;gap:9px!important; } body.crm-briefing :is(.crm-table-footer,.customer-table-footer,.client-task-footer,.client-invoice-footer, .invoice-list-footer,.project-footer,.sales-footer,.subscription-list-footer,.items-footer,.contract-footer) { background:#f7f9fd!important;border-color:#dce5f0!important;color:#52647c!important;box-shadow:none!important; } /* Forms: labels, accessible focus, validation and disabled controls. */ body.crm-briefing.nextcrm-modern :is(.customer-content,.next-ai-content) :is( input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=submit]):not([type=button]),select,textarea), body.crm-briefing.portal-professional .portal-main :is(input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea) { background:#fff!important;border-color:#c8d4e4!important;color:#17253b!important;border-radius:8px!important; font-size:12px!important;box-shadow:none!important; } body.crm-briefing.nextcrm-modern :is(.customer-content,.next-ai-content) :is(input,select,textarea):focus-visible, body.crm-briefing.portal-professional .portal-main :is(input,select,textarea):focus-visible { border-color:#4165e8!important;outline:2px solid #c8d4e4!important;outline-offset:2px!important;box-shadow:none!important; } body.crm-briefing.nextcrm-modern :is(.customer-content,.next-ai-content) :is(input,select,textarea):disabled { background:#f4f7fb!important;color:#52647c!important;cursor:not-allowed; } body.crm-briefing :is(input,textarea)::placeholder { color:#52647c!important; } body.crm-briefing :is(input[type=checkbox],input[type=radio]) { accent-color:#17253b!important; } body.crm-briefing.nextcrm-modern .customer-content :is(label>span,.field>span,.estimate-field>span,.settings-field>label) { color:#263954!important;font-size:11px!important;font-weight:600!important; } body.crm-briefing.nextcrm-modern .customer-content :is( .form-actions,.subscription-form-actions,.expense-form-actions,.kb-form-actions,.settings-footer, .estimate-form-footer,.invoice-form-footer,.payment-form-footer,.proposal-form-footer ) { background:#f7f9fd!important;border-color:#dce5f0!important;box-shadow:none!important; } /* Tabs and record navigation. */ body.crm-briefing.nextcrm-modern .customer-content :is( .project-detail-tabs,.project-form-tabs,.client-form-tabs,.customer-form-tabs,.contract-tabs, .invoice-tabs,.estimate-tabs,.payment-tabs,.lead-detail-tabs,.leave-tabs,.profile-tabs, .staff-tabs,.portal-message-tabs,.settings-tabs,.nai-settings-nav ) { background:#f7f9fd!important;border:1px solid #dce5f0!important;border-radius:10px!important;box-shadow:none!important;gap:4px!important;padding:5px!important; } body.crm-briefing.nextcrm-modern .customer-content :is( .project-detail-tabs,.project-form-tabs,.client-form-tabs,.customer-form-tabs,.contract-tabs, .invoice-tabs,.estimate-tabs,.payment-tabs,.lead-detail-tabs,.leave-tabs,.profile-tabs, .staff-tabs,.settings-tabs,.nai-settings-nav ) :is(a,button,label) { color:#52647c!important;font-size:11px!important;font-weight:600!important;border-radius:7px!important;border-color:transparent!important;box-shadow:none!important; } body.crm-briefing.nextcrm-modern .customer-content :is( .project-detail-tabs,.project-form-tabs,.client-form-tabs,.customer-form-tabs,.contract-tabs, .invoice-tabs,.estimate-tabs,.payment-tabs,.lead-detail-tabs,.leave-tabs,.profile-tabs, .staff-tabs,.settings-tabs,.nai-settings-nav ) :is(.active,.selected,[aria-selected=true]) { background:#fff!important;color:#17253b!important;border-color:#c8d4e4!important; } body.crm-briefing.nextcrm-modern .client-kb-nav a.active, body.crm-briefing.portal-professional .portal-primary-nav a.active { background:#17253b!important;color:#fff!important;border-color:#17253b!important; } body.crm-briefing.nextcrm-modern .customer-content :is( .badge,.sales-status,.lead-status,.subscription-status-badge,.contract-status,.commerce-status, .kb-status,.client-invoice-status-kb,.main-task-status,.project-detail-status ) { border-radius:5px!important;font-size:10px!important;font-weight:600!important;box-shadow:none!important; } body.crm-briefing.nextcrm-modern .customer-content :is(.status-paid,.status-completed,.status-active,.status-resolved) { background:#eef3ff!important;border-color:#d5e1c8!important;color:#567a45!important; } body.crm-briefing.nextcrm-modern .customer-content :is(.status-overdue,.status-unpaid,.status-danger,.status-cancelled) { background:#f5eae6!important;border-color:#e6ccc3!important;color:#875348!important; } /* Dialogs: same materials as record cards; preserve open/close mechanics. */ body.crm-briefing :is(dialog,.client-modal-card,.contact-modal,.todo-modal,.lead-modal-card, .task-modal,.tm-modal,.items-modal,.invoice-modal,.expense-modal,.event-modal-card, .announce-modal-card,.kb-modal-card,.client-contract-modal-card,.client-note-modal-card, .pw-modal,.pf-modal,.message-modal,.modal-content) { background:#fff!important;border-color:#dce5f0!important;border-radius:16px!important; box-shadow:0 24px 90px #29443826!important;color:#263954!important; } body.crm-briefing :is(.todo-modal-head,.todo-modal-foot,.contact-modal-head,.items-modal-head, .items-modal-footer,.event-modal-head,.event-modal-footer,.lead-modal-head,.task-modal-header, .tm-header,.tm-sidebar,.pf-modal-head,.client-modal-head,.client-modal-footer) { background:#f7f9fd!important;border-color:#dce5f0!important;box-shadow:none!important; } body.crm-briefing :is(.modal-backdrop,.todo-modal-backdrop,.contact-modal-backdrop, .items-modal-backdrop,.lead-modal-backdrop,.event-modal-backdrop) { backdrop-filter:blur(4px); } /* Data visualization, Gantt and board surfaces โ€” retain semantic status colors. */ body.crm-briefing.nextcrm-modern .customer-content :is(.report-chart-card,.report-breakdown-card,.contract-chart,.profile-chart) { background:#fff!important;border:1px solid #dce5f0!important;border-radius:16px!important;box-shadow:none!important; } body.crm-briefing.nextcrm-modern .customer-content :is(.report-chart-wrap,.chart-bars) { background:#f7f9fd!important;border-radius:10px!important;box-shadow:none!important; } body.crm-briefing.nextcrm-modern .customer-content :is(.report-chart-tooltip,.project-gantt-tooltip) { background:#17253b!important;color:#fff!important;border-color:#17253b!important;border-radius:8px!important; } body.crm-briefing.nextcrm-modern .customer-content :is(.project-gantt-board-header,.project-gantt-months,.project-gantt-name-head) { background:#f7f9fd!important;color:#52647c!important;border-color:#dce5f0!important; } body.crm-briefing.nextcrm-modern .customer-content .project-gantt-row { background:#fff!important;border-color:#e8eef6!important; } body.crm-briefing.nextcrm-modern .customer-content .project-gantt-row:nth-child(even) { background:#f7f9fd!important; } body.crm-briefing.nextcrm-modern .customer-content .project-gantt-bar { background:#17253b!important;border-color:#17253b!important;border-radius:5px!important;box-shadow:none!important;color:#fff!important; } body.crm-briefing.nextcrm-modern .customer-content .project-gantt-bar.milestone { background:#4165e8!important;border-color:#4165e8!important; } body.crm-briefing.nextcrm-modern .customer-content .project-gantt-bar:is(.status-completed,.status-complete,.status-done) { background:#4165e8!important;border-color:#4165e8!important; } body.crm-briefing.nextcrm-modern .customer-content .project-gantt-today-line { border-color:#c69a54!important; } body.crm-briefing.nextcrm-modern .customer-content :is(.lead-column,.task-kanban-column,.milestone-column,.pw-milestone-column) { background:#eef3ff!important;border-color:#dce5f0!important;border-radius:12px!important;box-shadow:none!important; } body.crm-briefing.nextcrm-modern .customer-content :is(.lead-card,.task-kanban-card,.milestone-task-card,.pw-milestone-task) { background:#fff!important;border:1px solid #dce5f0!important;border-radius:10px!important;box-shadow:0 2px 8px #29443804!important; } body.crm-briefing.nextcrm-modern .customer-content :is(.event-view-switch,.event-toolbar,.event-weekdays) { background:#f7f9fd!important;color:#52647c!important;border-color:#dce5f0!important;box-shadow:none!important; } body.crm-briefing.nextcrm-modern .customer-content .event-day { border-color:#dce5f0!important;background:#fff!important; } body.crm-briefing.nextcrm-modern .customer-content .event-day.today { background:#eef3ff!important; } /* AI and customer portal use the same palette without flattening chat layouts. */ body.crm-briefing .nai-settings-shell { --nai-bg:#f4f7fb;--nai-ink:#263954;--nai-muted:#52647c;--nai-line:#dce5f0;--nai-primary:#17253b;--nai-shadow:0 4px 16px #29443804; } body.crm-briefing.next-ai-shell :is(.ai-history-panel,.ai-chat-card,.ai-inspector-panel>section,.nai-settings-section,.nai-provider-card,.nai-agent-card) { background:#fff!important;border-color:#dce5f0!important;border-radius:14px!important;box-shadow:none!important; } body.crm-briefing.next-ai-shell :is(.ai-agent-avatar,.ai-brand-icon,.nai-agent-icon,.nai-metric-icon) { background:#eef3ff!important;color:#567a45!important;box-shadow:none!important; } body.crm-briefing.next-ai-shell :is(.ai-message.assistant,.ai-message-content,.ai-context-chip) { border-color:#dce5f0!important;background:#f7f9fd!important;color:#17253b!important; } body.crm-briefing.portal-professional :is(.portal-dashboard-hero,.portal-profile-hero,.portal-detail-head) { background:#eef3ff!important;color:#263954!important;border-color:#dce5f0!important;border-radius:16px!important;box-shadow:none!important; } body.crm-briefing.portal-professional :is(.portal-card,.portal-panel,.portal-profile-card,.portal-message-card) { background:#fff!important;border-color:#dce5f0!important;border-radius:16px!important;box-shadow:0 4px 16px #29443804!important; } body.crm-briefing.login-modern { background:#f4f7fb!important; } body.crm-briefing.login-modern :is(.login-modern-intro,.login-brand-panel) { background:#17253b!important;color:#fff!important;box-shadow:none!important; } body.crm-briefing.login-modern :is(.login-modern-form,.login-form-panel) { background:#fff!important;border-color:#dce5f0!important;box-shadow:none!important; } body.crm-briefing.login-modern :is(button[type=submit],.login-submit) { background:#17253b!important;border-color:#17253b!important;color:#fff!important;box-shadow:none!important; } body.crm-briefing.login-modern :is(input[type=email],input[type=password],input[type=text]) { background:#f7f9fd!important;color:#263954!important;border-color:#c8d4e4!important;border-radius:8px!important; } body.crm-briefing.login-modern a { color:#294dbf!important; } body.crm-briefing.login-modern :is(input,button):focus-visible { outline:2px solid #4165e8!important;outline-offset:3px!important; } } @media screen and (max-width:700px) { body.crm-briefing.nextcrm-modern .customer-content table :is(th,td) { padding:12px!important; } body.crm-briefing.nextcrm-modern .customer-content :is(.table-toolbar,.customer-table-toolbar,.sales-toolbar,.items-toolbar,.contacts-toolbar,.staff-toolbar) { flex-wrap:wrap!important; } body.crm-briefing.nextcrm-modern .customer-content :is(.project-detail-tabs,.contract-tabs,.invoice-tabs,.payment-tabs,.lead-detail-tabs) { overflow-x:auto; } } @media (prefers-reduced-motion:reduce) { body.crm-briefing *,body.crm-briefing *::before,body.crm-briefing *::after { animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important; } } /* Remaining module introductions, public screens and report controls. */ @media screen { body.crm-briefing.nextcrm-modern .customer-content :is(header[class*="-heading"],header[class*="-page-head"]):not(.brief-card-heading) { background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:12px 0 24px!important; } body.crm-briefing.nextcrm-modern .customer-content :is(header[class*="-heading"],header[class*="-page-head"]):not(.brief-card-heading) h1 { font-size:clamp(24px,2.2vw,32px)!important;font-weight:650!important;letter-spacing:-.9px!important;line-height:1.2!important; } body.crm-briefing.nextcrm-modern .customer-content :is(section[class$="-card"],article[class$="-card"],div[class$="-card"]) { background:#fff!important;border-color:#dce5f0!important;border-radius:16px!important;box-shadow:0 4px 16px #29443804!important; } body.crm-briefing.nextcrm-modern .customer-content :is(.client-table-toolbar,.invoice-contact-toolbar,.payment-contact-toolbar,.estimate-contact-toolbar,.proposal-contact-toolbar) { background:#fff!important;border-color:#dce5f0!important;padding:16px!important; } body.crm-briefing.nextcrm-modern .customer-content :is(.client-summary-grid,.invoice-contact-summary,.payment-contact-summary,.estimate-contact-summary)>a { background:#fff!important;border-color:#dce5f0!important;border-radius:12px!important;box-shadow:none!important;color:#52647c!important; } body.crm-briefing.nextcrm-modern .customer-content :is(.client-summary-grid,.invoice-contact-summary,.payment-contact-summary,.estimate-contact-summary)>a.active { background:#eef3ff!important;border-color:#c8d4e4!important;color:#17253b!important; } body.crm-briefing .report-tabs { background:#f7f9fd!important;border-color:#dce5f0!important;border-radius:10px!important;padding:5px!important;gap:4px!important;box-shadow:none!important; } body.crm-briefing .report-tabs a { background:transparent!important;color:#52647c!important;border-color:transparent!important;border-radius:7px!important;font-weight:600!important;box-shadow:none!important; } body.crm-briefing .report-tabs a.active { background:#fff!important;color:#17253b!important;border-color:#c8d4e4!important; } body.crm-briefing .report-period a { background:#fff!important;color:#52647c!important;border-color:#dce5f0!important;box-shadow:none!important; } body.crm-briefing .report-period a.active { background:#17253b!important;color:#fff!important;border-color:#17253b!important; } body.crm-briefing .ai-agent-mini-list a.active { background:#eef3ff!important;border-color:#c8d4e4!important;color:#17253b!important; } body.crm-briefing .ai-history-list a.active { background:#f7f9fd!important;border-color:#c8d4e4!important; } body.crm-briefing .login-modern-brand { background:#17253b!important;color:#fff!important;box-shadow:none!important; } body.crm-briefing .login-modern-panel { background:#fff!important;color:#263954!important; } body.crm-briefing .login-modern-panel :is(.login-modern-kicker,.login-modern-heading>span,.login-modern-form-eyebrow) { color:#294dbf!important; } body.crm-briefing :is(.login-modern-security,.login-modern-protection,.login-modern-note,.login-modern-trust) { background:#f7f9fd!important;border-color:#dce5f0!important;color:#52647c!important; } body.crm-briefing .login-modern-trust svg { color:#4165e8!important; } body.crm-briefing .login-modern-orb { background:#4165e8!important;opacity:.12!important; } body.crm-briefing .login-modern-shell { border:1px solid #dce5f0!important;border-radius:20px!important;box-shadow:0 16px 60px #2944380c!important; } body.crm-briefing .login-modern :is(.login-modern-orb,.login-modern-grid), body.crm-briefing .login-modern-grid { opacity:.12!important; } body.crm-briefing .login-modern-feature-icon { background:#ffffff12!important;color:#c3d8b2!important;border-color:#ffffff25!important; } body.crm-briefing .login-preview-chart>span { background:#4165e8!important; } body.crm-briefing .login-preview-stats>i { background:#d0dcbf!important; } body.crm-briefing :is(.installer .card,.subscription-public-paper,.subscription-checkout-card,.public-contract-paper,.public-contract-grid>aside) { background:#fff!important;color:#263954!important;border:1px solid #dce5f0!important;border-radius:16px!important;box-shadow:0 4px 16px #29443804!important; } body.crm-briefing .installer header { background:#17253b!important;color:#fff!important;border-radius:16px!important;box-shadow:none!important; } body.crm-briefing :is(.installer button,.installer .button,.public-contract button,.subscription-public-action a) { background:#17253b!important;color:#fff!important;border-color:#17253b!important;border-radius:8px!important;box-shadow:none!important; } body.crm-briefing .installer :is(input,select) { border-color:#c8d4e4!important;background:#fff!important;color:#17253b!important;border-radius:8px!important; } body.crm-briefing :is(.subscription-public-header,.subscription-public-hero,.public-contract>header) { border-color:#dce5f0!important;color:#263954!important;box-shadow:none!important; } body.crm-briefing .subscription-checkout-spinner { border-color:#dce5f0!important;border-top-color:#17253b!important; } } /* ============================================================ SECTION: app.css ============================================================ */ :root{font-size:18px;font-family:Inter,Arial,sans-serif;color:#252b37;background:#fff;font-synthesis:none}*{box-sizing:border-box}body{margin:0}a{text-decoration:none;color:inherit}button,input,select,textarea{font:inherit}button{cursor:pointer}svg{width:18px;height:18px;stroke-width:1.85}.app-shell{display:flex;min-height:100vh}.sidebar{width:276px;flex:none;background:#121213;color:#d0d0d4;position:sticky;top:0;height:100vh;z-index:20}.brand{height:72px;display:flex;align-items:center;gap:13px;padding:0 29px;color:#fff}.brand-symbol{position:relative;width:24px;height:25px;display:block}.brand-symbol span{position:absolute;bottom:1px;width:8px;height:23px;background:#f52d67;border-radius:2px;transform:skew(-20deg)}.brand-symbol span:nth-child(1){left:1px}.brand-symbol span:nth-child(2){left:10px;height:17px;background:#fd3e76}.brand-symbol span:nth-child(3){left:18px;height:11px;background:#ec255d}.brand-name{font-size:18px;font-weight:800;letter-spacing:1.4px}.brand-name b{font-weight:600;color:#f7f7f9}.sidebar-inner{height:calc(100vh - 72px);display:flex;flex-direction:column}.side-nav{overflow:auto;flex:1;padding:12px 21px 26px;scrollbar-color:#343438 transparent;scrollbar-width:thin}.nav-heading{font-size:12px;color:#77777e;font-weight:700;letter-spacing:.6px;margin:24px 10px 10px}.nav-heading:first-child{margin-top:10px}.nav-item{height:37px;display:flex;align-items:center;gap:12px;padding:0 11px;border-radius:6px;color:#c6c6cc;font-size:14px;font-weight:600;margin-bottom:1px}.nav-item svg{width:17px;height:17px;color:#8b8b94}.nav-item:hover{background:#202023;color:#fff}.nav-item.active{background:#202022;color:#70a0ff}.nav-item.active svg{color:#377dff}.sidebar-bottom{border-top:1px solid #28282d;display:flex;gap:10px;align-items:center;padding:15px 20px}.sidebar-user-icon,.top-avatar{width:32px;height:32px;flex:none;display:grid;place-items:center;border-radius:50%;background:#d4ebdf;color:#18885c;font-size:13px;font-weight:800}.profile{flex:1;min-width:0}.profile b,.profile small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.profile b{font-size:13px;color:#f7f7f9}.profile small{font-size:12px;color:#85858d;margin-top:3px}.icon-button{border:0;background:transparent;color:#8c929e;padding:5px;display:inline-flex;align-items:center;justify-content:center}.icon-button:hover{color:#4088ff}.sidebar-logout{color:#83838b}.sidebar-backdrop{display:none}.main-wrap{flex:1;min-width:0;display:flex;flex-direction:column}.topbar{height:69px;flex:none;display:flex;justify-content:space-between;align-items:center;padding:0 30px;border-bottom:1px solid #e9e9ee;background:#fff}.topbar-left,.top-actions{display:flex;align-items:center}.topbar-left{gap:31px}.top-link{font-size:14px;font-weight:600;color:#4f5560}.top-link:hover,.top-link.current{color:#171b23}.top-actions{gap:21px}.top-icon{color:#6f7786;display:flex;align-items:center}.top-icon svg{width:18px;height:18px}.top-icon:hover{color:#377dff}.top-divider{height:22px;width:1px;background:#e7e8ee;margin-left:-4px}.top-avatar{border:2px solid #2cbb70;background:#f1efe5;color:#9a6a43}.mobile-menu{display:none}.main-content{width:100%;max-width:1500px;margin:0 auto;padding:27px 30px 70px;flex:1}.site-footer{display:flex;justify-content:space-between;border-top:1px solid #eceef1;color:#a0a5ae;font-size:13px;padding:20px 30px}.page-intro{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:0 0 27px}.page-intro h1{font-size:22px;letter-spacing:-.55px;margin:0 0 5px;font-weight:700}.page-intro p{font-size:14px;color:#7b8390;margin:0;line-height:1.5}.eyebrow{font-size:12px;font-weight:700;color:#7a8290;letter-spacing:.9px;display:block;margin-bottom:8px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:6px;border:1px solid transparent;padding:9px 13px;font-size:13px;font-weight:600;min-height:34px;white-space:nowrap}.btn svg{width:15px;height:15px}.btn-primary{background:#1b84ff;border-color:#1b84ff;color:white}.btn-primary:hover{background:#0872eb}.btn-secondary{background:#fff;border-color:#dfe2e7;color:#343b46}.btn-secondary:hover{background:#f8f9fb}.btn-danger{background:#fff;border-color:#f2ced3;color:#d75061}.btn-danger:hover{background:#fff3f4}.flash{display:flex;align-items:center;gap:8px;background:#e6f8ef;border:1px solid #bdebd2;color:#168a57;padding:11px 15px;border-radius:6px;font-size:14px;margin-bottom:18px}.panel,.stat-card,.welcome-card,.module-summary{border:1px solid #e5e7eb;background:#fff;border-radius:10px;box-shadow:0 1px 2px #15182205}.dashboard-top{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:stretch}.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px}.stat-card{height:160px;padding:17px 21px;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;transition:border-color .15s,transform .15s}.stat-card:hover{border-color:#a7caff;transform:translateY(-2px)}.stat-icon{height:29px;width:29px;display:grid;place-items:center;border-radius:6px;margin-bottom:auto}.stat-icon svg{width:22px;height:22px}.stat-icon.blue{color:#226cbd;background:#e9f3ff}.stat-icon.purple{color:#7b58ce;background:#f0eafe}.stat-icon.green{color:#0e9e75;background:#dff7ee}.stat-icon.orange{color:#d99a36;background:#fff2db}.stat-number{font-size:27px;font-weight:600;letter-spacing:-1.1px;line-height:1.1}.stat-label{font-size:14px;color:#555d69;margin-top:4px}.welcome-card{min-height:350px;position:relative;overflow:hidden;display:flex;flex-direction:column}.welcome-content{position:relative;z-index:2;padding:35px 40px 20px;max-width:385px}.avatar-stack{display:flex;margin:0 0 24px}.avatar-stack span{width:34px;height:34px;display:grid;place-items:center;border:2px solid #fff;border-radius:50%;background:#dbdfe9;color:#49536b;font-size:11px;font-weight:800;margin-right:-7px}.avatar-stack span:nth-child(2){background:#ffdabd;color:#ac6646}.avatar-stack span:nth-child(3){background:#c7dcfa;color:#426da7}.avatar-stack span:nth-child(4){background:#18c56c;color:#fff}.welcome-content h2{font-size:21px;line-height:1.45;margin:0 0 14px;font-weight:700;letter-spacing:-.5px}.welcome-content p{font-size:14px;color:#656d78;line-height:1.65;margin:0}.welcome-visual{position:absolute;right:8%;top:26%;width:145px;height:145px;display:grid;place-items:center;border:1px solid #e2e8f6;border-radius:30px;transform:rotate(-9deg);background:linear-gradient(135deg,#fff,#f8fbff);box-shadow:0 12px 30px #8bade52e}.welcome-visual svg{width:63px;height:63px;color:#4d8bff;stroke-width:1.2;transform:rotate(9deg)}.visual-dot{position:absolute;width:15px;height:15px;border-radius:50%;background:#1ec879;box-shadow:0 0 0 5px #dff9ec}.dot-a{right:-18px;top:25px}.dot-b{left:-18px;bottom:24px;background:#fb5b77;box-shadow:0 0 0 5px #ffe9ee}.dot-c{right:15px;bottom:-15px;background:#ffbf49;box-shadow:0 0 0 5px #fff4d9}.welcome-orbit{position:absolute;border:1px solid #eef2fa;border-radius:50%;width:350px;height:350px;right:-120px;top:-80px}.orbit-two{width:480px;height:480px;right:-175px;top:-140px}.welcome-footer{margin-top:auto;border-top:1px solid #e9ebef;text-align:center;font-size:13px;color:#377dff;font-weight:600;padding:17px;display:flex;align-items:center;justify-content:center;gap:8px;position:relative;z-index:2}.welcome-footer svg{width:14px}.dashboard-grid{display:grid;grid-template-columns:1fr 1.45fr;gap:30px;margin-top:30px}.lower-grid{grid-template-columns:1fr 1fr}.panel-head{min-height:58px;display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid #e8eaee}.panel-head h2{font-size:15px;font-weight:700;margin:0}.panel-head p{font-size:13px;color:#8b929e;margin:4px 0 0}.panel-head>svg{width:16px;color:#a5aab4}.text-link{display:inline-flex;align-items:center;gap:5px;color:#2878e7;font-size:13px;font-weight:600}.text-link svg{width:13px}.highlights-body{padding:22px 20px}.highlights-body>span{font-size:13px;color:#737c89}.highlight-value{font-size:27px;letter-spacing:-.8px;font-weight:700;margin:8px 0 25px}.positive{font-size:12px;letter-spacing:0;font-weight:700;background:#def8e8;color:#16aa67;padding:5px 8px;border-radius:4px;vertical-align:middle}.highlight-bars{display:flex;gap:4px;height:7px;margin-bottom:24px}.highlight-bars span{border-radius:2px}.highlight-bars span:nth-child(1){background:#0fc879;flex:6}.highlight-bars span:nth-child(2){background:#e52e4c;flex:2}.highlight-bars span:nth-child(3){background:#8e55fc;flex:1}.highlight-metrics{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #eef0f2;padding-top:20px}.highlight-metrics div{border-right:1px solid #eef0f2;padding-left:13px}.highlight-metrics div:first-child{padding-left:0}.highlight-metrics div:last-child{border-right:0}.highlight-metrics b,.highlight-metrics small{display:block}.highlight-metrics b{font-size:16px}.highlight-metrics small{font-size:12px;color:#8d95a0;margin-top:5px}.pipeline{padding:17px 21px 23px}.pipeline-row{display:flex;align-items:center;gap:14px;height:37px;font-size:13px;color:#626b79}.pipeline-row>span{width:83px;flex:none}.pipeline-track{height:7px;background:#f0f2f6;border-radius:10px;flex:1;overflow:hidden}.pipeline-track div{height:100%;border-radius:10px}.pipeline-row b{width:20px;text-align:right;color:#343b45}.attention-list,.activity-list{padding:7px 20px}.attention-list a,.activity-list a{display:flex;align-items:center;gap:12px;min-height:58px;border-bottom:1px solid #eef0f2}.attention-list a:last-child,.activity-list a:last-child{border-bottom:0}.attention-icon,.activity-icon{width:31px;height:31px;border-radius:6px;display:grid;place-items:center;flex:none}.attention-icon svg,.activity-icon svg{width:16px}.amber{background:#fff4dd;color:#dba442}.red{background:#ffebec;color:#e15c6a}.indigo{background:#eeeaff;color:#8876d9}.teal{background:#e3f6f4;color:#17a6a3}.attention-list a>span:nth-child(2),.activity-list a>span:nth-child(2){flex:1;min-width:0}.attention-list b,.activity-list b{display:block;font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.attention-list small,.activity-list small{display:block;font-size:12px;color:#939ba7;margin-top:4px}.attention-list strong{font-size:15px;font-weight:700}.activity-icon{background:#eaf2ff;color:#317eeb}.activity-list time{font-size:12px;color:#9ca3ae;white-space:nowrap}.empty-mini{padding:30px;color:#8b939e;font-size:14px}.module-summary{display:inline-flex;align-items:center;gap:13px;padding:13px 16px;margin-bottom:20px;min-width:175px}.summary-icon{display:grid;place-items:center;width:35px;height:35px;background:#eaf3ff;color:#247ae7;border-radius:6px}.summary-icon svg{width:18px}.module-summary strong,.module-summary small{display:block}.module-summary strong{font-size:18px}.module-summary small{font-size:12px;color:#929aa6;margin-top:3px}.table-panel{overflow:hidden}.table-toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 20px}.filters{display:flex;gap:9px;flex-wrap:wrap}.search-input{position:relative}.search-input svg{position:absolute;left:11px;top:9px;width:16px;color:#9299a5}.search-input input{padding-left:34px!important;width:240px}.search-input input,.filters select,.field input,.field select,.field textarea,.login-box input{border:1px solid #dfe2e8;background:#fff;border-radius:6px;outline:none;color:#333b47;font-size:13px;padding:9px 10px}.search-input input:focus,.filters select:focus,.field input:focus,.field select:focus,.field textarea:focus,.login-box input:focus{border-color:#5a9af0;box-shadow:0 0 0 3px #eaf3ff}.record-count{font-size:13px;color:#8e96a2}.table-scroll{overflow-x:auto}table{border-collapse:collapse;width:100%;font-size:13px}th{text-align:left;font-size:12px;color:#76808e;font-weight:600;background:#fafafa}td,th{padding:14px 20px;border-top:1px solid #e9ebef}td{color:#67717e}td:first-child{color:#2e3744}.record-title{font-weight:600}.record-title:hover{color:#277ff0}.badge{display:inline-block;background:#eaf4ff;color:#2678d5;border-radius:4px;padding:5px 8px;font-size:12px;font-weight:600;white-space:nowrap}.row-arrow{color:#9299a4}.row-arrow svg{width:15px}.muted{color:#8e97a4}.empty-state{text-align:center;padding:60px 20px}.empty-state>span{display:grid;place-items:center;width:52px;height:52px;border-radius:10px;background:#eef5ff;color:#4286e3;margin:auto}.empty-state h3{font-size:17px;margin:19px 0 6px}.empty-state p{font-size:13px;color:#9099a6;margin:0 0 18px}.pagination{border-top:1px solid #eaecf0;padding:15px 20px}.pagination nav{font-size:13px}.pagination nav>div:first-child{display:none}.pagination nav>div:last-child{display:flex;align-items:center;justify-content:space-between}.pagination a,.pagination span{padding:4px;color:#377bde}.back-link{display:block;font-size:13px;font-weight:600;color:#4f85d5;margin:0 0 11px}.form-panel{max-width:930px}.form-section{padding:25px 29px;border-bottom:1px solid #e9ebef}.form-section h2{font-size:15px;margin:0 0 5px}.form-section>p{font-size:13px;color:#9098a3;margin:0 0 23px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:19px}.field{display:flex;flex-direction:column;gap:8px;font-size:13px;font-weight:600;color:#4e5967}.field em{font-style:normal;color:#e66069}.field input,.field select{height:37px}.field textarea{resize:vertical}.field.wide{grid-column:1/-1}.field-error{color:#d24b5b;font-size:13px}.form-actions{padding:19px 29px;display:flex;justify-content:flex-end;gap:9px}.detail-meta{font-size:13px;color:#929aa6;margin-left:9px}.header-actions{display:flex;gap:9px}.detail-panel{max-width:930px}.detail-grid{display:grid;grid-template-columns:1fr 1fr;padding:5px 22px 22px}.detail-grid>div{padding:18px 7px;border-bottom:1px solid #eceef1;min-width:0}.detail-grid small,.detail-grid strong{display:block}.detail-grid small{font-size:12px;color:#8b94a0;margin-bottom:8px}.detail-grid strong{font-size:13px;color:#37404c;font-weight:600;white-space:pre-wrap;overflow-wrap:anywhere}.login-page{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;background:#fff}.login-art{background:#111215;color:#fff;position:relative;overflow:hidden;display:flex;flex-direction:column;padding:44px 58px}.login-logo{font-size:25px;font-weight:800;letter-spacing:1px;position:relative;z-index:2}.login-logo span{color:#f23268}.login-message{margin:auto 0;position:relative;z-index:2;max-width:470px}.eyebrow.light{color:#ec5284}.login-message h1{font-size:45px;line-height:1.18;letter-spacing:-2px;margin:19px 0}.login-message p{color:#a8a9b2;font-size:16px;line-height:1.7}.art-circles span{position:absolute;border:1px solid #ffffff11;border-radius:50%;width:660px;height:660px;right:-300px;bottom:-180px}.art-circles span:nth-child(2){width:490px;height:490px;right:-210px;bottom:-100px}.art-circles span:nth-child(3){width:300px;height:300px;right:-110px;bottom:0;background:#f0256620}.art-footer{font-size:13px;color:#72747c;z-index:2}.login-panel{display:grid;place-items:center;padding:40px}.login-box{width:min(100%,390px)}.login-mobile-brand{display:none}.login-box h2{font-size:26px;letter-spacing:-.7px;margin:11px 0 6px}.login-box>.muted{font-size:14px;margin:0 0 31px}.login-box label:not(.checkbox){display:flex;flex-direction:column;gap:8px;font-size:13px;font-weight:600;color:#48525f;margin:0 0 19px}.login-box input{height:42px}.checkbox{display:flex;align-items:center;gap:7px;font-size:13px;color:#68717e;margin:4px 0 25px}.checkbox input{width:15px;height:15px}.login-submit{height:41px;width:100%;justify-content:space-between}.login-hint{color:#929aa6;font-size:12px;line-height:1.6;margin-top:26px}@media(max-width:1250px){.sidebar{width:240px}.dashboard-top{gap:16px}.stat-grid{gap:16px}.dashboard-grid{gap:16px}.welcome-content{padding:29px}.welcome-visual{right:4%;opacity:.65}}@media(max-width:950px){.dashboard-top{grid-template-columns:1fr}.stat-card{height:142px}.welcome-card{min-height:260px}.welcome-content{padding:25px 30px}.dashboard-grid{grid-template-columns:1fr 1fr}.topbar-left{gap:17px}}@media(max-width:760px){.sidebar{position:fixed;left:-276px;width:276px;transition:left .2s}.sidebar.open{left:0}.sidebar.open+.sidebar-backdrop{display:block;position:fixed;inset:0;background:#0008;z-index:19}.mobile-menu{display:inline-flex}.topbar{padding:0 17px}.topbar-left{gap:15px}.top-link:not(.current){display:none}.top-actions{gap:14px}.main-content{padding:24px 17px 50px}.dashboard-grid{grid-template-columns:1fr}.site-footer{padding:16px}.login-page{grid-template-columns:1fr}.login-art{display:none}.login-mobile-brand{display:block;font-size:22px;font-weight:800;color:#20242d;margin-bottom:40px}.table-toolbar{display:block}.record-count{display:none}}@media(max-width:520px){.page-intro{align-items:flex-start;flex-direction:column}.stat-grid{gap:10px}.stat-card{padding:14px;height:132px}.stat-number{font-size:24px}.stat-label{font-size:12px}.welcome-visual{display:none}.form-grid,.detail-grid{grid-template-columns:1fr}.field.wide{grid-column:auto}.header-actions{margin-top:3px}.search-input input{width:190px}.activity-list time{display:none}} .login-logo{display:flex;align-items:center;gap:11px;letter-spacing:1.2px}.login-logo>.brand-symbol{width:25px;height:25px;flex:none} .login-custom-logo{display:block;max-width:210px;max-height:58px;object-fit:contain}.login-mobile-brand .login-custom-logo{max-width:180px;max-height:48px} /* Expense workspace */ .expense-page,.expense-form-page{display:grid;gap:18px}.expense-page-head,.expense-form-head,.expense-actions-row,.expense-list-toolbar,.expense-detail-head,.expense-detail-actions,.expense-existing-receipt{display:flex;align-items:center;justify-content:space-between;gap:14px}.expense-page-head h1,.expense-form-head h1{margin:0}.expense-page-head p,.expense-form-head p,.expense-detail-head p{margin:5px 0 0;color:#6b778c}.expense-summary-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.expense-summary-card{background:#fff;border:1px solid #dde5ef;border-radius:10px;padding:15px 16px;box-shadow:0 2px 5px #1c2b4010}.expense-summary-card span{display:block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#7a8798}.expense-summary-card strong{display:block;margin-top:6px;font-size:17px;color:#213047}.expense-summary-card.total{border-top:3px solid #e6a21a}.expense-summary-card.billable,.expense-summary-card.billed{border-top:3px solid #32a852}.expense-summary-card.nonbillable{border-top:3px solid #e2a61c}.expense-summary-card.uninvoiced{border-top:3px solid #e45555}.expense-actions-left,.expense-filter-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.expense-filter-form select,.expense-list-toolbar select{border:1px solid #ccd7e5;border-radius:7px;background:#fff;padding:9px 10px;color:#24354a}.expense-workspace{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}.expense-workspace.has-selection{grid-template-columns:minmax(520px,1.05fr) minmax(420px,1.1fr)}.expense-list-panel,.expense-detail-panel{overflow:hidden}.expense-list-toolbar{padding:15px 18px;border-bottom:1px solid #e5eaf1;color:#6b778c}.expense-table-wrap{overflow:auto}.expense-table{width:100%;border-collapse:collapse;font-size:13px}.expense-table th{padding:11px 10px;text-align:left;white-space:nowrap;background:#f8fafc;border-bottom:1px solid #e2e7ee;color:#536176}.expense-table td{padding:13px 10px;border-bottom:1px solid #edf0f4;white-space:nowrap;vertical-align:top}.expense-table tr:hover,.expense-table tr.is-selected{background:#f7faff}.expense-row-link{color:#24466e;text-decoration:none}.expense-row-link:hover{text-decoration:underline}.expense-not-invoiced{display:block;color:#e24040;font-size:11px;margin-top:3px}.expense-billed{color:#248a45;font-weight:700}.expense-pagination{padding:14px 18px}.expense-detail-tabs{height:42px;border-bottom:1px solid #e1e7ef;display:flex;align-items:end;padding:0 18px}.expense-detail-tabs span{padding:12px 2px 9px;border-bottom:2px solid transparent;font-weight:600}.expense-detail-tabs .active{border-color:#1e2d42}.expense-detail-head{padding:18px;border-bottom:1px solid #e6ebf1;align-items:flex-start}.expense-detail-category{font-size:17px;font-weight:700;color:#20324a}.expense-detail-head h2{margin:4px 0 0;font-size:15px;font-weight:500}.expense-detail-actions{justify-content:flex-end}.expense-detail-body{display:grid;grid-template-columns:1fr 330px;gap:26px;padding:24px}.expense-amount-line{display:flex;gap:10px;align-items:baseline}.expense-amount-line small{color:#6b778c}.expense-amount-line strong{font-size:22px}.expense-detail-info p{margin:8px 0;color:#425169}.expense-grand-total{font-weight:600}.expense-meta-list{display:grid;gap:9px;margin:20px 0}.expense-meta-list div{display:grid;grid-template-columns:95px 1fr;gap:8px}.expense-meta-list dt{font-weight:600;color:#26384f}.expense-meta-list dd{margin:0;color:#536176}.expense-note{margin-top:18px}.expense-note small{font-weight:700}.expense-note p{white-space:pre-wrap}.expense-receipt-card h3{margin:0 0 10px}.expense-receipt-box{min-height:150px;border:1px dashed #bac7d8;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:18px;color:#59687c}.expense-receipt-box svg{width:28px;height:28px}.expense-receipt-box a:not(.btn){color:#2567c7;text-decoration:none}.expense-receipt-box.has-file{border-style:solid;background:#f9fbfd}.expense-form-card{max-width:920px;margin:0 auto;overflow:hidden}.expense-receipt-upload{display:block;margin:20px;border:1px dashed #b8c6d7;border-radius:10px;cursor:pointer}.expense-receipt-upload input{display:none}.expense-receipt-upload span{min-height:110px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#34465e}.expense-receipt-upload small{color:#7b899b}.expense-existing-receipt{margin:-8px 20px 18px;padding:10px 12px;background:#f7f9fc;border-radius:8px}.expense-existing-receipt a{color:#235d9f;text-decoration:none;display:flex;gap:6px;align-items:center}.expense-form-section{padding:20px;border-top:1px solid #e5eaf1}.expense-form-grid{display:grid;gap:16px}.expense-form-grid.two{grid-template-columns:1fr 1fr}.expense-form-grid.three{grid-template-columns:repeat(3,1fr)}.expense-form-grid.amount-grid{grid-template-columns:2fr .7fr .7fr 1fr}.expense-form-card .field{display:grid;gap:7px}.expense-form-card .field span{font-weight:600;color:#27384d}.expense-form-card input,.expense-form-card select,.expense-form-card textarea{width:100%;box-sizing:border-box;border:1px solid #ccd7e5;border-radius:7px;padding:10px 11px;background:#fff;color:#24354a;font:inherit}.expense-form-card textarea{resize:vertical}.expense-amount-box{margin:0 20px 20px;border:1px solid #dce4ee;border-radius:10px;padding:18px;background:#fbfcfe}.expense-check-field{display:flex;align-items:center;gap:10px;padding:10px 0}.expense-check-field input{width:auto}.expense-check-field span{display:grid}.expense-check-field small{font-weight:400;color:#7a8798}.expense-recurring-fields{display:grid;grid-template-columns:140px 180px;gap:14px;margin-top:12px}.expense-recurring-fields[hidden]{display:none}.expense-form-card .form-actions{padding:18px 20px;border-top:1px solid #e5eaf1}.expense-form-card em{color:#d43d4f}.field-error{color:#bd2d3b}.alert-error{color:#a32431;background:#fff3f4;border:1px solid #f2c3c8;padding:10px 14px;border-radius:8px} @media(max-width:1180px){.expense-summary-grid{grid-template-columns:repeat(3,1fr)}.expense-workspace.has-selection{grid-template-columns:1fr}.expense-detail-body{grid-template-columns:1fr}} @media(max-width:760px){.expense-summary-grid{grid-template-columns:1fr 1fr}.expense-actions-row,.expense-page-head,.expense-form-head{align-items:stretch;flex-direction:column}.expense-filter-form{align-items:stretch}.expense-form-grid.two,.expense-form-grid.three,.expense-form-grid.amount-grid{grid-template-columns:1fr}.expense-recurring-fields{grid-template-columns:1fr}.expense-summary-card strong{font-size:15px}} /* ==========================================================================\n NEXT CRM Modern Authentication Experience ยท 2026\n ========================================================================== */ .login-page.login-modern{display:block;min-height:100vh;background:#f4f7fb;color:#17233a;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif} .login-modern-shell{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(520px,.92fr);min-height:100vh} .login-modern-brand{position:relative;overflow:hidden;display:flex;min-height:100vh;flex-direction:column;padding:38px clamp(36px,5vw,76px) 32px;background:linear-gradient(145deg,#17164f 0%,#312e81 34%,#2563eb 72%,#0891b2 100%);color:#fff} .login-modern-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent 78%);pointer-events:none} .login-modern-orb{position:absolute;border-radius:50%;filter:blur(2px);pointer-events:none}.login-modern-orb.orb-one{width:420px;height:420px;right:-120px;top:-145px;background:radial-gradient(circle,rgba(129,140,248,.38),rgba(129,140,248,0) 68%)}.login-modern-orb.orb-two{width:520px;height:520px;left:-245px;bottom:-275px;background:radial-gradient(circle,rgba(34,211,238,.22),rgba(34,211,238,0) 68%)} .login-modern-brand-head,.login-modern-brand-foot,.login-modern-copy,.login-modern-preview{position:relative;z-index:2}.login-modern-brand-head{display:flex;align-items:center;justify-content:space-between;gap:18px}.login-modern-logo{display:flex;align-items:center;gap:11px;color:#fff;font-size:20px;font-weight:850;letter-spacing:-.35px}.login-modern-logo .login-custom-logo{max-width:190px;max-height:50px;filter:brightness(0) invert(1)}.login-modern-logo-mark{width:36px;height:36px;display:flex;align-items:flex-end;justify-content:center;gap:3px;padding:8px 7px;border:1px solid rgba(255,255,255,.22);border-radius:11px;background:rgba(255,255,255,.13);box-shadow:inset 0 1px rgba(255,255,255,.18)}.login-modern-logo-mark i{display:block;width:5px;border-radius:99px;background:#fff}.login-modern-logo-mark i:nth-child(1){height:9px;opacity:.72}.login-modern-logo-mark i:nth-child(2){height:15px}.login-modern-logo-mark i:nth-child(3){height:21px;opacity:.85}.login-modern-secure{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(255,255,255,.08);color:#dce9ff;font-size:10.5px;font-weight:700;backdrop-filter:blur(6px)}.login-modern-secure>span{width:7px;height:7px;border-radius:50%;background:#5ee2a0;box-shadow:0 0 0 4px rgba(94,226,160,.12)} .login-modern-copy{max-width:650px;margin:auto 0 18px}.login-modern-kicker{display:inline-flex;align-items:center;min-height:28px;padding:0 10px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(255,255,255,.09);color:#dfe8ff;font-size:9.5px;font-weight:900;letter-spacing:.15em}.login-modern-copy h1{max-width:610px;margin:18px 0 14px;color:#fff;font-size:clamp(38px,4vw,60px);line-height:1.03;font-weight:900;letter-spacing:-2.2px}.login-modern-copy>p{max-width:570px;margin:0;color:#dbe8ff;font-size:15px;line-height:1.75} .login-modern-features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:31px}.login-modern-features article{display:flex;gap:10px;min-width:0;padding:13px;border:1px solid rgba(255,255,255,.13);border-radius:13px;background:rgba(255,255,255,.075);backdrop-filter:blur(7px)}.login-modern-feature-icon{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:9px;background:rgba(255,255,255,.13)}.login-modern-feature-icon svg{width:16px;height:16px}.login-modern-feature-icon.blue{color:#bfdbfe}.login-modern-feature-icon.violet{color:#ddd6fe}.login-modern-feature-icon.cyan{color:#a5f3fc}.login-modern-features strong,.login-modern-features small{display:block}.login-modern-features strong{color:#fff;font-size:11px}.login-modern-features small{margin-top:3px;color:#c9d7ef;font-size:9.5px;line-height:1.35} .login-modern-preview{width:min(470px,75%);margin:0 0 30px auto;padding:15px;border:1px solid rgba(255,255,255,.16);border-radius:16px;background:rgba(255,255,255,.08);box-shadow:0 22px 45px rgba(10,15,70,.16);backdrop-filter:blur(9px);transform:perspective(900px) rotateY(-4deg) rotateX(1deg)}.login-preview-top{display:flex;align-items:center;gap:5px;color:#dce6fb;font-size:9px}.login-preview-top>span{width:6px;height:6px;border-radius:50%;background:#fda4af}.login-preview-top>span:nth-child(2){background:#fde68a}.login-preview-top>span:nth-child(3){background:#86efac}.login-preview-top b{margin-left:6px;font-weight:700}.login-preview-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:12px 0}.login-preview-stats i{height:42px;border:1px solid rgba(255,255,255,.10);border-radius:8px;background:rgba(255,255,255,.09)}.login-preview-stats i:nth-child(2){background:rgba(167,139,250,.16)}.login-preview-stats i:nth-child(3){background:rgba(34,211,238,.13)}.login-preview-stats i:nth-child(4){background:rgba(52,211,153,.13)}.login-preview-chart{height:76px;display:flex;align-items:flex-end;gap:6px;padding:10px;border-radius:9px;background:rgba(7,16,57,.14)}.login-preview-chart span{flex:1;border-radius:5px 5px 2px 2px;background:linear-gradient(#60a5fa,#a78bfa);opacity:.85}.login-preview-chart span:nth-child(1){height:28%}.login-preview-chart span:nth-child(2){height:46%}.login-preview-chart span:nth-child(3){height:38%}.login-preview-chart span:nth-child(4){height:70%}.login-preview-chart span:nth-child(5){height:58%}.login-preview-chart span:nth-child(6){height:88%} .login-modern-brand-foot{display:flex;align-items:center;justify-content:space-between;gap:18px;color:#bfcae6;font-size:10.5px} .login-modern-panel{display:grid;place-items:center;min-height:100vh;padding:48px clamp(30px,5vw,76px);background:radial-gradient(circle at 90% 4%,rgba(79,70,229,.065),transparent 27%),radial-gradient(circle at 3% 95%,rgba(6,182,212,.055),transparent 28%),#f7f9fc}.login-modern-form-wrap{width:min(100%,475px)}.login-modern-mobile-brand{display:none}.login-modern-card{padding:34px 36px 31px;border:1px solid #e1e7f0;border-radius:22px;background:rgba(255,255,255,.97);box-shadow:0 24px 70px rgba(31,46,75,.11)}.login-modern-heading>span{display:block;margin-bottom:8px;color:#4f46e5;font-size:9.5px;font-weight:900;letter-spacing:.15em}.login-modern-heading h2{margin:0;color:#17233a;font-size:30px;line-height:1.16;font-weight:900;letter-spacing:-.85px}.login-modern-heading p{margin:9px 0 0;color:#738197;font-size:12.5px;line-height:1.6}.login-modern-form{margin-top:28px}.login-modern-field{display:block;margin:0 0 17px}.login-modern-field>span{display:block;margin-bottom:7px;color:#34455f;font-size:11.5px;font-weight:800}.login-modern-control{position:relative}.login-modern-control>svg{position:absolute;left:13px;top:50%;width:16px;height:16px;transform:translateY(-50%);color:#8290a5;stroke-width:1.8}.login-modern-control input{display:block;width:100%;height:46px;padding:0 13px 0 40px;border:1px solid #d5deea;border-radius:11px;background:#fff;color:#25364f;font-size:12.5px;outline:0;transition:border-color .15s,box-shadow .15s,background .15s}.login-modern-control input::placeholder{color:#a2adbc}.login-modern-control input:hover{border-color:#b9c8db}.login-modern-control input:focus{border-color:#8aa9eb;box-shadow:0 0 0 4px rgba(37,99,235,.08);background:#fff}.login-modern-control.has-toggle input{padding-right:63px}.login-password-toggle{position:absolute;right:7px;top:50%;height:32px;padding:0 9px;transform:translateY(-50%);border:0;border-radius:7px;background:#f5f7fa;color:#66778d;font-size:9.5px;font-weight:800}.login-password-toggle:hover{background:#edf3ff;color:#315fc5}.login-modern-error{margin:-9px 0 14px;padding:8px 10px;border:1px solid #fecdd3;border-radius:8px;background:#fff1f2;color:#b42336;font-size:10.5px}.login-modern-options{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:3px 0 21px}.login-modern-options>a{color:#315fc5;font-size:11px;font-weight:800}.login-modern-options>a:hover{color:#1d4ed8}.login-modern-check{display:flex;align-items:center;gap:7px;color:#5e6d82;font-size:11px}.login-modern-check input{width:16px;height:16px;margin:0;accent-color:#4f46e5}.login-modern-submit{width:100%;height:47px;display:flex;align-items:center;justify-content:space-between;padding:0 15px;border:0;border-radius:11px;background:linear-gradient(135deg,#4338ca 0%,#2563eb 58%,#0891b2 100%);color:#fff;font-size:12px;font-weight:850;box-shadow:0 10px 24px rgba(37,99,235,.22);transition:transform .15s,box-shadow .15s,filter .15s}.login-modern-submit:hover{transform:translateY(-1px);box-shadow:0 14px 30px rgba(37,99,235,.28);filter:saturate(1.08)}.login-modern-submit svg{width:17px;height:17px;transition:transform .15s}.login-modern-submit:hover svg{transform:translateX(2px)}.login-modern-trust{display:flex;align-items:flex-start;gap:9px;margin-top:22px;padding:12px 13px;border:1px solid #e2e9f2;border-radius:11px;background:linear-gradient(100deg,#f9fbff,#f8f7ff);color:#718096;font-size:10px;line-height:1.5}.login-modern-trust svg{width:16px;height:16px;flex:none;margin-top:1px;color:#4f63d5}.login-modern-alert{display:flex;align-items:center;gap:9px;margin-bottom:20px;padding:11px 12px;border-radius:10px;font-size:11px}.login-modern-alert.success{border:1px solid #bdebd4;background:#ecfdf5;color:#087a52}.login-modern-alert svg{width:16px;height:16px}.login-modern-back{display:inline-flex;align-items:center;gap:5px;margin-top:20px;color:#49617f;font-size:11px;font-weight:800}.login-modern-back:hover{color:#315fc5}.login-modern-back svg{width:14px;height:14px}.login-modern-legal{margin:17px 0 0;text-align:center;color:#9aa5b4;font-size:9.5px;letter-spacing:.02em} @media(max-width:1180px){.login-modern-shell{grid-template-columns:minmax(0,.95fr) minmax(480px,1.05fr)}.login-modern-brand{padding-left:38px;padding-right:38px}.login-modern-copy h1{font-size:43px}.login-modern-features{grid-template-columns:1fr}.login-modern-features article:nth-child(3){display:none}.login-modern-preview{width:86%}} @media(max-width:900px){.login-modern-shell{display:block}.login-modern-brand{display:none}.login-modern-panel{min-height:100vh;padding:30px 18px}.login-modern-form-wrap{width:min(100%,500px)}.login-modern-mobile-brand{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 auto 20px;color:#24364f;font-size:18px}.login-modern-mobile-brand .login-modern-logo-mark{border-color:#d7e1ee;background:linear-gradient(135deg,#4338ca,#2563eb);box-shadow:0 6px 18px rgba(37,99,235,.18)}.login-modern-mobile-brand .login-custom-logo{max-width:185px;max-height:48px}.login-modern-card{padding:31px 29px}} @media(max-width:520px){.login-modern-panel{padding:22px 12px}.login-modern-card{padding:25px 19px;border-radius:17px}.login-modern-heading h2{font-size:25px}.login-modern-options{align-items:flex-start;flex-direction:column;gap:10px}.login-modern-control input{height:45px}.login-modern-submit{height:46px}} @media(prefers-reduced-motion:reduce){.login-modern-submit,.login-modern-submit svg,.login-modern-card,.login-modern-features article{transition:none!important}} /* ============================================================ SECTION: crm-shell.css ============================================================ */ :root{--customer-line:#d9e0e9;--customer-blue:#2f70e8;--customer-text:#1c2940}.customer-theme{background:#f7f9fc;color:var(--customer-text);font-family:Inter,Arial,sans-serif;font-size:15px}.customer-theme .customer-topbar{position:sticky;top:0;z-index:30;height:58px;background:#fff;border-bottom:1px solid #dce2ea;box-shadow:0 1px 2px #1e293b0a;display:flex;align-items:center;justify-content:space-between}.customer-topbar-brand{height:100%;width:230px;flex:none;display:flex;align-items:center;gap:17px;padding:0 19px}.customer-menu-button{border:0;background:transparent;color:#687587;padding:0;display:flex}.customer-menu-button svg{width:17px}.customer-brand{display:flex;align-items:center;gap:9px;color:#343c4b}.customer-brand .brand-symbol{width:23px;height:25px}.customer-brand .brand-symbol span:first-child{background:#29bcd5}.customer-brand .brand-symbol span:nth-child(2){background:#333d50}.customer-brand .brand-symbol span:nth-child(3){background:#333d50}.customer-brand strong{font-size:26px;letter-spacing:-1px;font-weight:700}.customer-topbar-center{display:flex;align-items:center;gap:12px;margin-left:auto;margin-right:auto}.customer-global-search{position:relative}.customer-global-search svg{position:absolute;top:10px;left:11px;width:16px;color:#8897a9}.customer-global-search input{width:350px;height:36px;border:0;border-radius:8px;background:#f3f5f8;padding:0 13px 0 37px;color:#334155;outline:none}.customer-global-search input:focus{box-shadow:0 0 0 2px #97b9f7}.customer-plus{width:28px;height:28px;border-radius:50%;background:#2469e8;color:#fff;display:grid;place-items:center}.customer-plus svg{width:19px;height:19px}.customer-topbar-right{display:flex;align-items:center;gap:23px;padding:0 30px;color:#536076;white-space:nowrap}.customer-topbar-right a:hover{color:#1f6de1}.customer-topbar-right svg{width:17px;height:17px;color:#63738b}.customer-app{display:flex;min-height:calc(100vh - 58px)}.customer-sidebar{width:230px;flex:none;background:#fff;border-right:1px solid #dce2ea;padding:18px 9px;min-height:calc(100vh - 58px)}.customer-profile-card{display:flex;align-items:center;gap:10px;margin:0 3px 18px;padding:12px 10px;border:1px solid #cdd8e5;border-radius:8px;min-height:60px}.customer-profile-avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#d9f4e8;color:#346c62;font-size:15px;font-weight:700}.customer-profile-card b,.customer-profile-card small{display:block;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.customer-profile-card b{font-size:15px}.customer-profile-card small{font-size:13px;color:#66758a;margin-top:2px}.customer-sidebar nav{display:flex;flex-direction:column;gap:1px}.customer-sidebar nav a{height:36px;display:flex;align-items:center;gap:15px;padding:0 13px;border:1px solid transparent;border-radius:5px;font-size:15px;font-weight:600;color:#25344a}.customer-sidebar nav a svg{width:18px;height:18px;color:#677b95}.customer-sidebar nav a:hover{background:#f3f6fb}.customer-sidebar nav a.active{background:#fff;border-color:#d1d9e5;box-shadow:0 1px 2px #1f293714;color:#15233a}.customer-sidebar nav a.active svg{color:#172c4c}.customer-content{min-width:0;flex:1;padding:25px 25px 65px;background:#f8f9fc}.customer-page-heading{margin:0 0 14px}.customer-page-heading h1{font-size:23px;line-height:1.2;margin:0 0 3px;letter-spacing:-.45px}.customer-page-heading a{color:#2367d8;font-size:15px}.customer-page-heading a span{font-size:19px}.customer-stat-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin-bottom:24px}.customer-stat-grid>a,.customer-stat-grid>div{border:1px solid #d4dce8;background:#fff;border-radius:9px;min-height:46px;padding:12px 14px;white-space:nowrap;box-shadow:0 2px 3px #1f29370a;font-size:14px;color:#29384f}.customer-stat-grid>a:hover{border-color:#91b8f4}.customer-stat-grid b{font-weight:700;color:#101f34}.customer-stat-grid .text-green{color:#219d61}.customer-stat-grid .text-red{color:#eb3642}.customer-stat-grid .text-blue{color:#1671d6}.customer-actions{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}.customer-actions-left{display:flex;gap:5px;align-items:center}.customer-new-button,.customer-import-button,.customer-filter-button{display:inline-flex;align-items:center;gap:7px;min-height:35px;padding:0 11px;border:1px solid #cdd7e5;border-radius:8px;background:#fff;color:#1d2c43;font-size:14px;font-weight:600;box-shadow:0 2px 2px #1e293b0a}.customer-new-button{background:#1d2b40;color:#fff;border-color:#1d2b40}.customer-new-button:hover{background:#0e1c31}.customer-actions svg{width:15px;height:15px}.customer-import-button{cursor:pointer}.customer-import-button:hover,.customer-filter-button:hover{background:#f1f5fb}.customer-filter-panel{display:none;align-items:flex-end;gap:12px;background:#fff;border:1px solid #dce3ed;padding:14px;margin-bottom:9px;border-radius:7px}.customer-filter-panel.open{display:flex}.customer-filter-panel label{display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:600}.customer-filter-panel input,.customer-filter-panel select{height:35px;border:1px solid #cfd9e6;border-radius:5px;padding:0 9px;font-size:14px;background:#fff}.customer-filter-panel>a{padding:9px;color:#517194}.customer-table-card{background:#fff;border:1px solid #dce2ea;border-radius:8px;box-shadow:0 3px 6px #1e293b18;overflow:hidden}.customer-table-toolbar{min-height:65px;display:flex;align-items:center;justify-content:space-between;padding:10px 24px;gap:15px}.customer-table-controls{display:flex;align-items:center}.customer-table-controls form{display:flex}.customer-table-controls select,.customer-table-controls>a{height:31px;border:1px solid #cbd5e2;background:#fff;color:#25364f;padding:0 11px;font-size:13px;display:flex;align-items:center}.customer-table-controls form:first-child select{border-radius:6px 0 0 6px;min-width:75px}.customer-table-controls form:nth-child(3) select{border-left:0;cursor:pointer}.customer-table-controls>a:nth-child(2){border-left:0}.customer-table-controls .customer-refresh{border-radius:0 6px 6px 0;border-left:0;width:33px;justify-content:center}.customer-refresh svg{width:14px}.customer-table-search{display:flex;height:31px}.customer-table-search button{width:42px;border:1px solid #cbd5e2;border-radius:6px 0 0 6px;background:#fff;color:#3a526f}.customer-table-search button svg{width:17px}.customer-table-search input{width:198px;border:1px solid #cbd5e2;border-left:0;border-radius:0 6px 6px 0;outline:none;padding:0 10px;font-size:13px}.customer-table-scroll{overflow-x:auto}.customer-data-table{width:100%;border-collapse:collapse;min-width:1150px;font-size:14px}.customer-data-table th{background:#f8fafc;color:#21314c;font-weight:600;text-align:left;white-space:nowrap}.customer-data-table td,.customer-data-table th{padding:13px 11px;border-top:1px solid #e7ebf2;height:58px}.customer-data-table th{height:40px;padding-top:8px;padding-bottom:8px}.customer-data-table tbody tr:hover{background:#fbfcff}.customer-data-table .check-col{width:51px;text-align:center}.customer-data-table .number-col{width:65px;text-align:center}.customer-data-table .customer-company{min-width:240px;font-weight:500}.customer-data-table .customer-company a:hover{color:#246de3;text-decoration:underline}.customer-data-table td{color:#263954}.customer-data-table td:nth-child(4){min-width:155px}.customer-data-table td:nth-child(5){min-width:200px}.customer-data-table td:nth-child(6){min-width:150px}.customer-data-table td:nth-child(7){min-width:84px}.customer-data-table td:nth-child(8){min-width:150px}.customer-data-table .customer-date{white-space:nowrap;min-width:150px}.customer-data-table input[type=checkbox]{appearance:none;width:17px;height:17px;border:1px solid #cbd5e2;border-radius:3px;background:#fff;vertical-align:middle;margin:0;cursor:pointer}.customer-data-table input[type=checkbox]:checked{background:#2e75ec;border-color:#2e75ec;box-shadow:inset 0 0 0 3px #fff}.customer-switch{width:49px;height:21px;border:0;border-radius:20px;background:#cbd5e1;padding:2px;display:flex;align-items:center}.customer-switch.on{background:#347af1;justify-content:flex-end}.customer-switch span{width:17px;height:17px;border-radius:50%;background:#fff;box-shadow:0 1px 2px #0002}.customer-group{display:inline-block;border:1px solid #dae1eb;border-radius:5px;background:#fcfdff;color:#33455d;font-size:13px;padding:4px 7px;margin:2px 4px 2px 0;white-space:nowrap}.customer-empty{text-align:center;padding:42px!important;color:#64748b!important}.customer-empty a{color:#236ee8;text-decoration:underline}.customer-table-footer{height:62px;display:flex;justify-content:space-between;align-items:center;padding:0 24px;border-top:1px solid #e5eaf1;color:#67758a;font-size:14px}.customer-pages{display:flex;align-items:center;gap:15px}.customer-pages .current{background:#e9edf3;color:#1c2b44;border-radius:6px;padding:8px 11px;font-weight:600}.customer-pages a:hover{color:#1e6be8}.customer-errors{border:1px solid #f1b8c0;background:#fff1f3;color:#b42337;padding:11px 14px;border-radius:6px;margin-bottom:15px}.customer-theme .page-intro h1{font-size:23px}.customer-theme .panel,.customer-theme .form-panel{border-color:#dce2ea;box-shadow:0 2px 5px #1e293b0a}.customer-theme .btn-primary{background:#1d2b40;border-color:#1d2b40}.customer-theme .main-content{padding:0}.customer-theme .detail-panel,.customer-theme .form-panel{max-width:1050px}@media(max-width:1500px){.customer-stat-grid{grid-template-columns:repeat(3,1fr)}.customer-topbar-right{gap:14px}.customer-global-search input{width:250px}}@media(max-width:1100px){.customer-topbar-brand{width:220px}.customer-sidebar{width:220px}.customer-topbar-right a:nth-child(-n+2){display:none}.customer-content{padding:22px}.customer-stat-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:760px){.customer-sidebar{position:fixed;top:58px;bottom:0;left:-230px;z-index:29;width:230px;overflow:auto;transition:left .2s}.customer-sidebar-open .customer-sidebar{left:0}.customer-topbar-brand{width:auto;padding:0 12px}.customer-brand strong{font-size:20px}.customer-topbar-center{margin-right:8px}.customer-global-search input{width:140px}.customer-topbar-right{display:none}.customer-content{padding:18px 12px}.customer-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.customer-stat-grid>a,.customer-stat-grid>div{font-size:12px;padding:10px;min-height:44px}.customer-table-toolbar{padding:12px;flex-wrap:wrap}.customer-table-search{margin-left:auto}.customer-filter-panel.open{flex-wrap:wrap}.customer-page-heading h1{font-size:21px}}@media(max-width:460px){.customer-global-search{display:none}.customer-actions{align-items:flex-start}.customer-actions-left{flex-wrap:wrap}.customer-filter-button{margin-left:5px}.customer-table-search input{width:150px}} .customer-form-wrap{max-width:895px;margin:2px auto 0}.customer-form-heading{margin:0 0 13px}.customer-form-heading a{display:inline-block;font-size:13px;color:#547092;margin-bottom:6px}.customer-form-heading h1{font-size:20px;margin:0;font-weight:700;letter-spacing:-.2px}.customer-form-card{background:#fff;border:1px solid #dce3ed;border-radius:7px;box-shadow:0 3px 5px #1e293b18;overflow:hidden}.customer-form-tabs{height:49px;display:flex;align-items:stretch;gap:0;padding:0 24px;background:#f9fafc;border-bottom:1px solid #dfe5ed}.customer-form-tabs button{padding:0 13px;border:0;border-bottom:1px solid transparent;background:transparent;font-size:15px;color:#2b3b50}.customer-form-tabs button.active{border-bottom-color:#17243a;color:#17243a;font-weight:600}.customer-tab-panel{padding:27px 24px 37px}.customer-tab-panel[hidden]{display:none}.customer-form-field{display:flex;flex-direction:column;gap:8px;margin-bottom:15px;font-size:14px;font-weight:600;color:#314258}.customer-form-field>span:first-child em{font-style:normal;color:#e03f4f}.customer-form-field input,.customer-form-field select,.customer-form-field textarea{width:100%;border:1px solid #cbd6e5;border-radius:6px;background:#fff;color:#24354c;font-size:14px;font-weight:400;outline:0;box-shadow:0 1px 2px #1f293b08}.customer-form-field input,.customer-form-field select{height:35px;padding:0 10px}.customer-form-field textarea{padding:10px;resize:vertical;min-height:94px}.customer-form-field input:focus,.customer-form-field select:focus,.customer-form-field textarea:focus{border-color:#4785ef;box-shadow:0 0 0 3px #e8f0ff}.customer-form-field small{color:#c33b4e;font-size:13px}.customer-form-field input::placeholder{color:#8492a7}.customer-group-input{display:flex}.customer-group-input input{border-radius:6px 0 0 6px}.customer-group-input button{width:39px;flex:none;display:grid;place-items:center;border:1px solid #cbd6e5;border-left:0;border-radius:0 6px 6px 0;background:#fff;color:#1b2d46}.customer-group-input button svg{width:16px}.customer-form-two{display:grid;grid-template-columns:1fr 1fr;gap:30px}.customer-address-fields{border-top:1px solid #e4e9f1;margin-top:20px;padding-top:22px}.customer-form-footer{display:flex;justify-content:flex-end;gap:7px;padding:12px 24px 14px;border-top:1px solid #dce3ed;background:#fafbfd}.customer-form-footer button{border-radius:6px;min-height:34px;padding:0 12px;font-size:14px;font-weight:600}.customer-form-primary{background:#1d2b40;border:1px solid #1d2b40;color:#fff}.customer-form-secondary{background:#fff;border:1px solid #cfd9e7;color:#22334b}.customer-form-primary:hover{background:#0e1c31}.customer-form-secondary:hover{background:#f5f8fc}.customer-address-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px}.customer-address-header{display:flex;justify-content:space-between;align-items:center;gap:6px;border-bottom:1px solid #e4e9f1;padding-bottom:14px;margin-bottom:20px}.customer-address-header h2{margin:0;font-size:16px}.customer-address-header button{border:0;background:transparent;color:#2369d8;font-size:13px;padding:0}.customer-address-grid .customer-form-field textarea{min-height:88px}@media(max-width:760px){.customer-form-wrap{max-width:none}.customer-form-two,.customer-address-grid{grid-template-columns:1fr;gap:0}.customer-form-tabs{padding:0 12px}.customer-tab-panel{padding:20px 16px}.customer-form-footer{padding:12px 16px}} .customer-detail-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}.customer-detail-heading .badge{margin-top:5px}.customer-detail-heading>a,.customer-form-footer>a{display:inline-flex;align-items:center;justify-content:center;padding:0 12px;border-radius:6px;min-height:34px;font-size:14px;font-weight:600}.customer-detail-tab{display:flex;align-items:center;border-bottom:1px solid #1d2b40;padding:0 13px;font-size:15px;font-weight:600}.customer-detail-grid{display:grid;grid-template-columns:1fr 1fr;padding:10px 24px 25px}.customer-detail-grid>div{padding:13px 6px;border-bottom:1px solid #e8edf3;min-width:0}.customer-detail-grid small,.customer-detail-grid strong{display:block}.customer-detail-grid small{font-size:13px;color:#78869a;margin-bottom:6px}.customer-detail-grid strong{font-size:14px;font-weight:600;overflow-wrap:anywhere;white-space:pre-wrap}.customer-detail-addresses{border-top:1px solid #e8edf3;display:grid;grid-template-columns:1fr 1fr;gap:30px;padding:24px 30px}.customer-detail-addresses h2{font-size:15px;margin:0 0 12px}.customer-detail-addresses p{font-size:14px;color:#46566d;white-space:pre-wrap;margin:0 0 7px}@media(max-width:760px){.customer-detail-grid,.customer-detail-addresses{grid-template-columns:1fr}} /* ============================================================ SECTION: clients.css ============================================================ */ /* ========================================================== Clients admin โ€” Knowledge Base aligned workspace ========================================================== */ .client-admin-page{max-width:1540px;margin:0 auto;color:#31455b} .client-page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:18px} .client-eyebrow{display:block;margin-bottom:5px;color:#6d63e8;font-size:10px;font-weight:850;letter-spacing:.14em;text-transform:uppercase} .client-page-head h1{margin:0;color:#17233a;font-size:29px;line-height:1.15;font-weight:820;letter-spacing:-.75px} .client-page-head p{margin:6px 0 0;color:#748399;font-size:13px} .client-head-links{display:flex;align-items:center;gap:10px;margin-top:7px;color:#8593a7;font-size:11.5px} .client-head-links a,.client-head-links button{display:inline-flex;align-items:center;gap:6px;border:0;padding:0;background:transparent;color:#315fc5;font:inherit;font-size:12px;font-weight:800;cursor:pointer;text-decoration:none} .client-head-links a:hover,.client-head-links button:hover{color:#1d4ed8}.client-head-links svg{width:14px;height:14px} .client-new-button{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 15px;border-radius:10px;background:linear-gradient(135deg,#4338ca,#2563eb);color:#fff!important;font-size:12px;font-weight:800;text-decoration:none;box-shadow:0 9px 20px rgba(37,99,235,.22)} .client-new-button:hover{transform:translateY(-1px);box-shadow:0 12px 24px rgba(37,99,235,.28)}.client-new-button svg{width:16px;height:16px} .client-summary-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:14px} .client-summary-grid a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:62px;padding:12px 14px;border:1px solid #e1e7f0;border-radius:12px;background:linear-gradient(135deg,#fff,#f9fbff);color:#526279;text-decoration:none;box-shadow:0 4px 14px rgba(31,46,75,.035)} .client-summary-grid a:hover{border-color:#c8d8ec;background:#f8fbff}.client-summary-grid span{font-size:10.5px;font-weight:750}.client-summary-grid strong{color:#243751;font-size:20px} .client-table-card{overflow:hidden;border:1px solid #e1e7f0;border-radius:16px;background:#fff;box-shadow:0 10px 30px rgba(31,46,75,.07)} .client-table-toolbar{min-height:66px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 16px;border-bottom:1px solid #e7ecf3;background:linear-gradient(100deg,#fff 0%,#f8fbff 52%,#f7f4ff 100%)} .client-table-left{display:flex;align-items:center;gap:7px;flex-wrap:wrap} .client-page-size select,.client-bulk-form select,.client-tool-button,.client-icon-button,.client-table-search input,.client-table-search span{height:36px;border:1px solid #ccd7e6;background:#fff;color:#3d4d64;font:inherit} .client-page-size select,.client-bulk-form select{min-width:72px;padding:0 29px 0 11px;border-radius:9px} .client-tool-button,.client-icon-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:9px;padding:0 11px;font-size:11.5px;font-weight:750;text-decoration:none} .client-tool-button:hover,.client-icon-button:hover{border-color:#aac3eb;background:#eff5ff;color:#1d4ed8}.client-tool-button svg,.client-icon-button svg{width:14px;height:14px}.client-icon-button{width:36px;padding:0} .client-table-search{display:flex;height:36px}.client-table-search span{width:39px;display:grid;place-items:center;border-radius:9px 0 0 9px;border-right:0;color:#718198}.client-table-search span svg{width:15px;height:15px}.client-table-search input{width:min(280px,28vw);min-height:36px!important;padding:0 11px;border-radius:0 9px 9px 0;outline:0}.client-table-search input:focus{border-color:#8eb0eb!important;box-shadow:0 0 0 3px rgba(37,99,235,.08)!important} .client-table-scroll{overflow:auto}.client-data-table{width:100%;min-width:1080px;border-collapse:separate;border-spacing:0;background:#fff} .client-data-table thead th{height:43px;padding:10px 14px;background:linear-gradient(90deg,#eef4ff,#f6f4ff)!important;border-bottom:1px solid #dfe7f2!important;color:#3d4f68!important;font-size:10.5px!important;font-weight:850!important;letter-spacing:.055em!important;text-transform:uppercase!important} .client-data-table tbody td{padding:11px 14px!important;border-bottom:1px solid #edf1f5!important;background:#fff;color:#34445b;font-size:12.5px!important;vertical-align:middle}.client-data-table tbody tr:hover td{background:#f8fbff!important} .client-check-col{width:42px;text-align:center!important}.client-options-col{width:92px}.client-name-cell{display:flex;align-items:center;gap:11px;min-width:0}.client-avatar{width:36px;height:36px;flex:none;display:grid;place-items:center;border-radius:10px;background:linear-gradient(135deg,#eef2ff,#e8f8ff);color:#4f63db;font-size:12px;font-weight:850} .client-name-cell>div{min-width:0}.client-name-cell>div>a{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#203f72!important;font-weight:780!important}.client-name-cell small{display:block;margin-top:2px;color:#98a3b2;font-size:9.5px}.client-inline-actions{display:flex;align-items:center;gap:5px;margin-top:3px;color:#a1abba;font-size:10px}.client-inline-actions a{color:#55729a!important;font:inherit;font-size:10px!important;font-weight:600!important}.client-inline-actions a:hover{color:#1d4ed8!important} .client-status{display:inline-flex;align-items:center;gap:6px;min-height:26px;padding:3px 8px;border:0;border-radius:999px;font:inherit;font-size:10.5px;font-weight:800;cursor:pointer}.client-status span{width:7px;height:7px;border-radius:50%}.client-status.active{background:#e8fbf4;color:#07855f}.client-status.active span{background:#12a474}.client-status.inactive{background:#f1f3f6;color:#68778b}.client-status.inactive span{background:#91a0b2}.client-status.prospect{background:#fff4e5;color:#b65f00}.client-status.prospect span{background:#f59e0b} .client-badge-list{display:flex;gap:4px;flex-wrap:wrap}.client-group-badge{display:inline-flex;align-items:center;min-height:24px;padding:3px 8px;border-radius:999px;background:#eef4ff;color:#315fc5;font-size:10.5px;font-weight:800}.client-muted{color:#9aa6b5}.client-created{display:block;color:#4f6077;font-size:11px;font-weight:700}.client-created-time{display:block;margin-top:2px;color:#96a2b1;font-size:9.5px} .client-row-actions{display:flex;align-items:center;justify-content:flex-end;gap:6px}.client-row-actions form{display:inline-flex;margin:0;padding:0}.client-row-actions a,.client-row-delete{width:32px;height:32px;display:grid;place-items:center;padding:0;border:1px solid #dbe4ef;border-radius:8px;background:#fff;color:#43638f;text-decoration:none;cursor:pointer}.client-row-actions a:hover{border-color:#abc6ef;background:#eef5ff;color:#1d4ed8}.client-row-delete{font:inherit;color:#c94a55}.client-row-delete:hover{border-color:#efb8be;background:#fff2f3;color:#b4232f}.client-row-actions svg,.client-row-delete svg{width:14px;height:14px} .client-empty{text-align:center!important;padding:48px 18px!important;color:#8794a7!important}.client-empty svg{width:25px;height:25px;margin-bottom:8px}.client-empty strong,.client-empty span{display:block}.client-empty strong{color:#516176}.client-empty span{margin-top:3px;font-size:11px} .client-table-footer{min-height:62px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 16px;border-top:1px solid #e5eaf1;background:#fbfcff;color:#748196;font-size:11.5px}.client-pagination{display:flex;align-items:center;gap:5px}.client-pagination a,.client-pagination span{min-width:34px;height:34px;display:grid;place-items:center;padding:0 9px;border:1px solid transparent;border-radius:9px;color:#5c6d83;text-decoration:none;font-weight:700}.client-pagination a:hover{border-color:#c9d8eb;background:#eef5ff;color:#1d4ed8}.client-pagination a.current{border-color:#dbe4ef;background:#eaf1fb;color:#1f3554}.client-pagination span.disabled{color:#aab4c1} .client-modal{position:fixed;z-index:1250;inset:0;display:none;place-items:center;padding:18px;background:rgba(15,23,42,.5);backdrop-filter:blur(4px)}.client-modal.is-open{display:grid} .client-modal-card{width:min(620px,calc(100vw - 30px));max-height:calc(100vh - 40px);overflow:auto;border:1px solid rgba(255,255,255,.72);border-radius:17px;background:#fff;box-shadow:0 26px 70px rgba(15,23,42,.24)}.client-modal-card-lg{width:min(980px,calc(100vw - 30px))} .client-modal-card>header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:17px 19px;border-bottom:1px solid #e7ecf3;background:linear-gradient(100deg,#f8fbff,#f7f4ff)}.client-modal-card>header span{display:block;color:#6d63e8;font-size:9.5px;font-weight:850;text-transform:uppercase;letter-spacing:.12em}.client-modal-card>header h2{margin:2px 0 0;color:#20314a;font-size:17px}.client-modal-card>header p{margin:4px 0 0;color:#8996a8;font-size:10.5px} .client-modal-card>header>button,.client-modal-close{width:32px;height:32px;display:grid;place-items:center;border:1px solid #dbe4ef;border-radius:9px;background:#fff;color:#64748b;cursor:pointer;text-decoration:none}.client-modal-card>header>button:hover,.client-modal-close:hover{border-color:#aac3eb;background:#eff5ff;color:#1d4ed8}.client-modal-card>header svg{width:15px;height:15px} .client-filter-form,.client-import-form{padding:20px}.client-filter-form>label{display:grid;gap:7px;margin-bottom:15px;color:#32445f;font-size:12px;font-weight:800}.client-filter-form input,.client-filter-form select{width:100%;height:42px;min-height:42px!important;padding:0 12px;border:1px solid #cbd7e5;border-radius:10px;background:#fff;color:#24364f;outline:0}.client-filter-form input:focus,.client-filter-form select:focus{border-color:#84a9eb!important;box-shadow:0 0 0 4px rgba(37,99,235,.08)!important} .client-filter-form>footer,.client-import-form>footer{display:flex;justify-content:flex-end;gap:8px;margin:20px -20px -20px;padding:15px 20px;border-top:1px solid #e7ecf3;background:linear-gradient(90deg,#fbfcff,#f7f5ff)} .client-upload-box{position:relative;display:flex;align-items:center;gap:12px;min-height:90px;padding:16px;border:1px dashed #cbd7e5;border-radius:11px;background:#fbfcfe;color:#4d6079;cursor:pointer}.client-upload-box:hover{border-color:#aac3eb;background:#eff5ff}.client-upload-box>svg{width:25px;color:#4f63db}.client-upload-box strong,.client-upload-box small{display:block}.client-upload-box strong{font-size:12px}.client-upload-box small{margin-top:3px;color:#8996a7;font-size:10px}.client-upload-box input{position:absolute;inset:0;opacity:0;cursor:pointer} .client-errors{display:flex;gap:10px;margin:16px 20px 0;padding:12px 14px;border:1px solid #f2c4c0;border-radius:10px;background:#fff5f4;color:#a7352e;font-size:11px}.client-errors>svg{width:17px;height:17px;flex:none}.client-errors strong{display:block;margin-bottom:4px}.client-errors ul{margin:0;padding-left:17px} .client-form-tabs{display:flex;gap:3px;overflow:auto;background:#f9fbfd;border-bottom:1px solid #e2e7ef;padding:8px 14px 0}.client-form-tabs button{white-space:nowrap;border:0;background:transparent;color:#5f6d80;padding:9px 11px 10px;border-bottom:2px solid transparent;border-radius:6px 6px 0 0;font:inherit;font-weight:650;font-size:12px;cursor:pointer}.client-form-tabs button:hover{background:#f0f4f9;color:#344256}.client-form-tabs button.active{color:#175daa;border-bottom-color:#2f78d4;background:#fff} .client-form-panel{padding:23px 24px 5px}.client-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}.client-form-grid label,.client-address-grid label{display:grid;gap:7px;color:#32445f;font-size:12px;font-weight:800}.client-form-grid label.wide{grid-column:1/-1}.client-form-grid em{color:#e11d48;font-style:normal} .client-form-grid input,.client-form-grid select,.client-form-grid textarea,.client-address-grid input,.client-address-grid textarea{width:100%;min-height:42px!important;padding:9px 12px;border:1px solid #cbd7e5;border-radius:10px;background:#fff;color:#24364f;outline:0}.client-form-grid textarea,.client-address-grid textarea{resize:vertical}.client-form-grid input:focus,.client-form-grid select:focus,.client-form-grid textarea:focus,.client-address-grid input:focus,.client-address-grid textarea:focus{border-color:#84a9eb!important;box-shadow:0 0 0 4px rgba(37,99,235,.08)!important} .client-group-input{display:grid;grid-template-columns:minmax(0,1fr) 42px}.client-group-input input{border-radius:10px 0 0 10px}.client-group-input a{display:grid;place-items:center;border:1px solid #cbd7e5;border-left:0;border-radius:0 10px 10px 0;background:#fff;color:#315fc5}.client-group-input a:hover{background:#eef5ff}.client-group-input svg{width:16px} .client-address-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.client-address-grid section{padding:16px;border:1px solid #e1e7f0;border-radius:12px;background:#fbfcfe}.client-address-grid label{margin-top:12px}.client-address-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.client-address-heading h3{margin:0;color:#31435c;font-size:13px}.client-address-heading button{border:0;background:transparent;color:#315fc5;font:inherit;font-size:10.5px;font-weight:750;cursor:pointer} .client-form-actions{display:flex;justify-content:space-between;gap:8px;padding:15px 24px;border-top:1px solid #e7ecf3;background:linear-gradient(90deg,#fbfcff,#f7f5ff)}.client-form-actions>div{display:flex;gap:8px} .client-primary,.client-secondary{min-height:39px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 14px;border-radius:9px;font-size:12px;font-weight:800;text-decoration:none;cursor:pointer}.client-secondary{border:1px solid #cfdae8;background:#fff;color:#53647a}.client-secondary:hover{background:#f7f9fc}.client-primary{border:0;background:linear-gradient(135deg,#4338ca,#2563eb);color:#fff!important;box-shadow:0 8px 18px rgba(37,99,235,.2)}.client-primary:hover{transform:translateY(-1px);box-shadow:0 11px 22px rgba(37,99,235,.26)}.client-primary svg,.client-secondary svg{width:15px} @media(max-width:1050px){.client-summary-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.client-table-search input{width:220px}} @media(max-width:760px){.client-page-head{align-items:flex-start;flex-direction:column}.client-summary-grid{grid-template-columns:1fr 1fr}.client-table-toolbar{align-items:stretch;flex-direction:column}.client-table-search,.client-table-search input{width:100%}.client-table-search input{flex:1}.client-form-grid,.client-address-grid{grid-template-columns:1fr}.client-form-grid label.wide{grid-column:auto}.client-form-actions{align-items:stretch;flex-direction:column-reverse}.client-form-actions>div{width:100%}.client-form-actions .client-primary,.client-form-actions .client-secondary{flex:1}.client-table-footer{align-items:flex-start;flex-direction:column}} @media(max-width:480px){.client-summary-grid{grid-template-columns:1fr}.client-head-links{align-items:flex-start;flex-direction:column}} /* ========================================================== Clients โ€” Invoice design system alignment ยท 2026-10-01 ========================================================== */ .client-admin-page{max-width:1600px;margin:0 auto;color:#263954} .client-page-head{display:flex;align-items:center;justify-content:space-between;gap:22px;margin:0 0 14px;padding:18px 20px;border:1px solid #dce4ef;border-radius:14px;background:linear-gradient(120deg,#fff 62%,#f5f8ff 100%);box-shadow:0 6px 20px rgba(31,48,76,.055)} .client-eyebrow{margin-bottom:4px;color:#5f6bd6;font-size:10px;font-weight:850;letter-spacing:.1em} .client-page-head h1{margin:0;font-size:24px;line-height:1.2;font-weight:800;letter-spacing:-.025em;color:#18263b} .client-page-head p{margin:5px 0 0;color:#76859a;font-size:12px} .client-head-links{display:flex;align-items:center;gap:7px;margin-top:9px} .client-head-links a,.client-head-links button{min-height:30px;padding:0 9px;border:1px solid #d5deea;border-radius:7px;background:#fff;color:#55708f;font-size:10.5px;font-weight:700;box-shadow:0 1px 2px rgba(30,48,76,.03)} .client-head-links a:hover,.client-head-links button:hover{border-color:#b9c9df;background:#f7f9fd;color:#285fc1} .client-new-button{min-height:36px;padding:0 12px;border:1px solid #3157df;border-radius:8px;background:#3157df;color:#fff!important;font-size:12px;font-weight:750;box-shadow:0 6px 14px rgba(49,87,223,.18)} .client-new-button:hover{background:#2749c6;transform:none;box-shadow:0 7px 16px rgba(49,87,223,.2)} .client-summary-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-bottom:12px} .client-summary-grid a{min-height:46px;padding:0 13px;border:1px solid #dce4ed;border-radius:10px;background:#fff;color:#52647c;box-shadow:none;font-size:11px} .client-summary-grid a:hover{border-color:#9bb5f0;background:#f2f6ff;color:#285fc1} .client-summary-grid a:hover strong{color:#285fc1} .client-summary-grid span{font-size:11px;font-weight:650}.client-summary-grid strong{font-size:14px;color:#21344f} .client-table-card{border:1px solid #dce3ec;border-radius:12px;box-shadow:0 5px 18px rgba(31,48,76,.055)} .client-table-toolbar{min-height:62px;padding:10px 14px;background:linear-gradient(90deg,#fbfcff,#f7f9ff);border-bottom:1px solid #e3e9f1} .client-page-size select,.client-bulk-form select,.client-tool-button,.client-icon-button,.client-table-search input,.client-table-search span{height:32px;border-color:#cbd6e4;color:#34465e;font-size:11px} .client-page-size select,.client-bulk-form select{border-radius:6px;padding:0 8px} .client-tool-button,.client-icon-button{border-radius:6px;padding:0 9px;font-size:11px;font-weight:650}.client-icon-button{width:32px;padding:0} .client-table-search{height:32px}.client-table-search span{width:38px;border-radius:6px 0 0 6px}.client-table-search input{width:210px;min-height:32px!important;border-radius:0 6px 6px 0;padding:0 10px} .client-data-table{min-width:1080px;border-collapse:collapse} .client-data-table thead th{height:40px;padding:0 11px!important;background:#f8fafc!important;color:#21314c!important;font-size:10.5px!important;font-weight:750!important;letter-spacing:0!important;text-transform:none!important;border-bottom:1px solid #e4eaf1!important} .client-data-table thead th+th{border-left:1px solid #e7ebf1!important} .client-data-table tbody td{height:62px;padding:10px 11px!important;border-bottom:1px solid #e8edf3!important;color:#33465f!important;font-size:12px!important} .client-data-table tbody tr:hover td{background:#fbfcff!important} .client-avatar{width:32px;height:32px;border-radius:9px;background:#eef3ff;color:#4965d7;font-size:11px} .client-name-cell>div>a{color:#1f4f95!important;font-weight:800!important}.client-name-cell small{font-size:9px}.client-inline-actions{font-size:9.5px}.client-inline-actions a{font-size:9.5px!important;font-weight:650!important} .client-status{min-height:23px;padding:0 8px;border:1px solid #d7e0eb;border-radius:999px;font-size:9.5px;font-weight:750}.client-status span{display:none}.client-status.active{background:#eefaf4;border-color:#d5f0e1;color:#198754}.client-status.inactive{background:#f4f6f9;border-color:#dfe5ec;color:#66778b}.client-status.prospect{background:#fff8ec;border-color:#f1dfba;color:#a56d10} .client-group-badge{min-height:23px;padding:0 8px;border:1px solid #d7e3fb;border-radius:999px;background:#eef4ff;color:#315fc5;font-size:9.5px;font-weight:750} .client-created{font-size:10.5px}.client-created-time{font-size:9px} .client-row-actions a,.client-row-delete{width:30px;height:30px;border-radius:7px}.client-row-actions svg,.client-row-delete svg{width:13px;height:13px} .client-table-footer{min-height:58px;padding:0 14px;border-top:1px solid #e6ebf2;background:#fff;color:#718096;font-size:11px} .client-pagination a,.client-pagination span{min-width:30px;height:30px;border-radius:7px}.client-pagination a.current{background:#eaf0f8;color:#25405f} /* Client filter/import/create-edit modals โ€” invoice form language */ .client-modal{background:rgba(15,23,42,.48);backdrop-filter:blur(4px)} .client-modal-card{border:0;border-radius:14px;box-shadow:0 24px 70px rgba(15,23,42,.25)}.client-modal-card-lg{width:min(1040px,calc(100vw - 30px))} .client-modal-card>header{min-height:72px;padding:16px 18px;border-bottom:1px solid #e3e9f1;background:linear-gradient(120deg,#fff 58%,#f5f8ff 100%)} .client-modal-card>header span{color:#5f6bd6;font-size:9px;letter-spacing:.1em}.client-modal-card>header h2{margin:3px 0 0;color:#18263b;font-size:19px}.client-modal-card>header p{margin:4px 0 0;color:#76859a;font-size:10.5px} .client-modal-card>header>button,.client-modal-close{width:32px;height:32px;border-radius:7px;border-color:#d4dfec;color:#55729a}.client-modal-card>header>button:hover,.client-modal-close:hover{background:#f5f8fd;color:#285fc1;border-color:#b9c9df} .client-form-tabs{padding:9px 18px 0;background:#fbfcff;border-bottom:1px solid #e3e9f1}.client-form-tabs button{padding:9px 12px 10px;border-radius:6px 6px 0 0;font-size:11px;font-weight:700}.client-form-tabs button.active{color:#285fc1;border-bottom-color:#3157df;background:#fff} .client-form-panel{padding:20px 22px 6px}.client-form-grid{gap:13px 16px}.client-form-grid label,.client-address-grid label{gap:6px;color:#374b66;font-size:11.5px;font-weight:750} .client-form-grid input,.client-form-grid select,.client-form-grid textarea,.client-address-grid input,.client-address-grid textarea{min-height:38px!important;padding:8px 10px;border:1px solid #cfd9e5;border-radius:7px;background:#fff;color:#263954;font-size:12.5px;box-shadow:none} .client-form-grid input:focus,.client-form-grid select:focus,.client-form-grid textarea:focus,.client-address-grid input:focus,.client-address-grid textarea:focus{border-color:#86aaf0!important;box-shadow:0 0 0 3px rgba(59,130,246,.08)!important} .client-group-input{grid-template-columns:minmax(0,1fr) 38px}.client-group-input input{border-radius:7px 0 0 7px}.client-group-input a{border-color:#cfd9e5;border-radius:0 7px 7px 0} .client-address-grid{gap:18px}.client-address-grid section{padding:14px;border:1px solid #dfe6ef;border-radius:10px;background:#fbfcfe}.client-address-heading h3{font-size:12px}.client-address-heading button{font-size:10px} .client-form-actions{padding:13px 22px;border-top:1px solid #e1e7ef;background:rgba(255,255,255,.97)} .client-primary,.client-secondary{min-height:36px;padding:0 12px;border-radius:7px;font-size:11.5px;font-weight:750}.client-primary{background:#1f4f95;box-shadow:none}.client-primary:hover{background:#173f7b;transform:none;box-shadow:none}.client-secondary{border-color:#cbd6e4;color:#51647d} .client-filter-form,.client-import-form{padding:18px}.client-filter-form>label{font-size:11.5px}.client-filter-form input,.client-filter-form select{height:38px;min-height:38px!important;border-radius:7px;border-color:#cfd9e5;font-size:12px}.client-filter-form>footer,.client-import-form>footer{margin:18px -18px -18px;padding:13px 18px;background:#fbfcff} .client-upload-box{min-height:82px;border-radius:9px;background:#fbfcfe} /* Standalone Add/Edit Client page */ .customer-form-wrap{max-width:1100px;margin:0 auto;padding:4px 0 28px;color:#263954} .customer-form-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin:0 0 16px;padding:18px 20px;border:1px solid #dce4ef;border-radius:14px;background:linear-gradient(120deg,#fff 58%,#f5f8ff 100%);box-shadow:0 6px 20px rgba(31,48,76,.055)} .customer-form-heading a{display:inline-flex;align-items:center;gap:6px;margin-bottom:8px;color:#315fc5;font-size:11px;font-weight:700;text-decoration:none}.customer-form-heading h1{margin:0;color:#18263b;font-size:24px;letter-spacing:-.025em} .customer-form-card{overflow:hidden;border:1px solid #dce3ec;border-radius:14px;background:#fff;box-shadow:0 7px 24px rgba(31,48,76,.06)} .customer-form-tabs{display:flex;gap:3px;padding:9px 18px 0;border-bottom:1px solid #e3e9f1;background:#fbfcff}.customer-form-tabs button{padding:9px 12px 10px;border:0;border-bottom:2px solid transparent;border-radius:6px 6px 0 0;background:transparent;color:#5f6d80;font-size:11px;font-weight:700;cursor:pointer}.customer-form-tabs button.active{border-bottom-color:#3157df;background:#fff;color:#285fc1} .customer-tab-panel{padding:22px 24px 6px}.customer-form-field{display:grid;gap:6px;margin-bottom:13px;color:#374b66;font-size:11.5px;font-weight:750}.customer-form-field input,.customer-form-field select,.customer-form-field textarea{width:100%;box-sizing:border-box;min-height:38px;padding:8px 10px;border:1px solid #cfd9e5;border-radius:7px;background:#fff;color:#263954;font:inherit;font-size:12.5px;outline:0}.customer-form-field input:focus,.customer-form-field select:focus,.customer-form-field textarea:focus{border-color:#86aaf0;box-shadow:0 0 0 3px rgba(59,130,246,.08)}.customer-form-field small{color:#c0263f;font-size:10.5px}.customer-form-field em{color:#dc3545;font-style:normal} .customer-form-two{display:grid;grid-template-columns:1fr 1fr;gap:16px}.customer-address-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}.customer-address-fields>.customer-form-field:first-child{grid-column:1/-1}.customer-group-input{display:grid;grid-template-columns:minmax(0,1fr) 38px}.customer-group-input input{border-radius:7px 0 0 7px}.customer-group-input a{display:grid;place-items:center;border:1px solid #cfd9e5;border-left:0;border-radius:0 7px 7px 0;background:#fff;color:#315fc5}.customer-group-input svg{width:15px} .customer-address-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.customer-address-grid>div{padding:16px;border:1px solid #dfe6ef;border-radius:10px;background:#fbfcfe}.customer-address-header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}.customer-address-header h2{margin:0;color:#31435c;font-size:13px}.customer-address-header button{border:0;background:transparent;color:#315fc5;font-size:10px;font-weight:700;cursor:pointer} .customer-form-footer{display:flex;justify-content:flex-end;gap:8px;padding:14px 24px;border-top:1px solid #e1e7ef;background:#fbfcff}.customer-form-primary,.customer-form-secondary{min-height:36px;padding:0 12px;border-radius:7px;font-size:11.5px;font-weight:750;cursor:pointer}.customer-form-primary{border:1px solid #1f4f95;background:#1f4f95;color:#fff}.customer-form-secondary{border:1px solid #cbd6e4;background:#fff;color:#51647d} @media(max-width:760px){.client-page-head,.customer-form-heading{align-items:flex-start;flex-direction:column}.client-summary-grid{grid-template-columns:repeat(2,1fr)}.customer-form-two,.customer-address-fields,.customer-address-grid{grid-template-columns:1fr}.customer-address-fields>.customer-form-field:first-child{grid-column:auto}.client-table-toolbar{align-items:stretch;flex-direction:column}.client-table-search,.client-table-search input{width:100%}.client-head-links{flex-wrap:wrap}} @media(max-width:480px){.client-summary-grid{grid-template-columns:1fr}} /* ============================================================ SECTION: dashboard-base.css ============================================================ */ .customer-sidebar{position:sticky;top:58px;align-self:flex-start;height:calc(100vh - 58px);overflow-y:auto;scrollbar-width:thin}.customer-sidebar .nav-group summary{height:36px;display:flex;align-items:center;gap:15px;padding:0 13px;border:1px solid transparent;border-radius:5px;font-size:15px;font-weight:600;color:#25344a;cursor:pointer;list-style:none}.customer-sidebar .nav-group summary::-webkit-details-marker{display:none}.customer-sidebar .nav-group summary:hover{background:#f3f6fb}.customer-sidebar .nav-group summary svg{width:18px;height:18px;color:#677b95}.customer-sidebar .nav-group summary .nav-chevron{width:14px;height:14px;margin-left:auto;transition:transform .2s}.customer-sidebar .nav-group[open] summary .nav-chevron{transform:rotate(180deg)}.customer-sidebar .nav-children{padding:0 0 3px 46px}.customer-sidebar .nav-children a{height:29px;padding:0 8px;font-size:14px;font-weight:500}.customer-sidebar nav a.nav-subitem{height:29px;padding-left:45px;font-size:14px;font-weight:500}.customer-sidebar nav a.nav-subitem svg{width:14px;height:14px} .crm-dashboard{max-width:1760px;margin:auto;color:#26384d}.dash-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:18px}.dash-hero{position:relative;overflow:hidden;padding:25px 28px;border-radius:20px;background:radial-gradient(circle at 85% 20%,rgba(75,113,255,.32),transparent 32%),radial-gradient(circle at 55% 120%,rgba(19,196,151,.2),transparent 35%),linear-gradient(125deg,#152238 0%,#1e3151 58%,#263f68 100%);box-shadow:0 18px 40px rgba(23,36,58,.16)}.dash-heading-copy,.dash-heading-actions{position:relative;z-index:1}.dash-eyebrow{display:block;margin-bottom:6px;color:#8fe4cf;font-size:10px;font-weight:850;letter-spacing:.14em;text-transform:uppercase}.dash-hero h1{margin:0;color:#fff;font-size:29px;letter-spacing:-.035em}.dash-hero p{margin:5px 0 0;color:#bac8dc;font-size:14px}.dash-heading-actions{display:flex;align-items:center;gap:9px}.dash-date{display:inline-flex;align-items:center;gap:7px;padding:9px 12px;border:1px solid rgba(255,255,255,.16);border-radius:10px;background:rgba(255,255,255,.08);color:#dce7f5;font-size:12px;font-weight:650;backdrop-filter:blur(8px)}.dash-date svg{width:14px;height:14px}.dash-options{display:inline-flex;align-items:center;gap:6px;border:1px solid #fff;border-radius:10px;padding:10px 14px;background:#fff;color:#1d2d46;font-size:12px;font-weight:700;box-shadow:0 7px 18px rgba(0,0,0,.18)}.dash-options svg{width:14px;height:14px} .dash-command-bar{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:-6px 0 18px;padding:12px 14px;border:1px solid #dfe6ef;border-radius:15px;background:rgba(255,255,255,.86);box-shadow:0 8px 24px rgba(31,46,75,.05);backdrop-filter:blur(12px)}.dash-command-copy{display:flex;align-items:center;gap:10px}.dash-command-copy>span{width:36px;height:36px;display:grid;place-items:center;border-radius:10px;background:linear-gradient(145deg,#ede9fe,#dbeafe);color:#555bdc}.dash-command-copy svg{width:17px}.dash-command-copy strong,.dash-command-copy small{display:block}.dash-command-copy strong{font-size:13px}.dash-command-copy small{font-size:11px;color:#8a96a6;margin-top:2px}.dash-command-actions{display:flex;gap:7px;flex-wrap:wrap}.dash-command-actions a{display:flex;align-items:center;gap:7px;padding:8px 11px;border:1px solid #e0e6ef;border-radius:9px;background:#fff;color:#40516a;font-size:12px;font-weight:700;box-shadow:0 2px 6px rgba(31,46,75,.04)}.dash-command-actions a:hover{border-color:#b8cbed;background:#f4f8ff;color:#205ebd;transform:translateY(-1px)}.dash-command-actions svg{width:14px;height:14px} .dash-notice{min-height:64px;margin-bottom:18px;padding:11px 15px;border:1px solid #d9e8e5;border-radius:14px;background:linear-gradient(90deg,#f0fbf7,#f7fbff);color:#597269;box-shadow:0 6px 18px rgba(35,72,77,.045);display:flex;gap:10px;align-items:center}.dash-notice-icon{display:grid!important;place-items:center;width:37px;height:37px;flex:none;border-radius:11px;background:#d9f7ec;color:#0c936c}.dash-notice-icon svg{width:18px!important;height:18px!important}.dash-notice>span:nth-child(2){display:flex;flex-direction:column;gap:2px}.dash-notice strong{color:#173c36;font-size:13px}.dash-notice small{font-size:11px}.dash-notice>a{display:flex;align-items:center;gap:5px;margin-left:auto;color:#176f61;font-size:12px;font-weight:750;white-space:nowrap}.dash-notice>a svg{width:13px;height:13px} .dash-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:20px}.dash-kpi{isolation:isolate;position:relative;min-height:112px;padding:18px 17px 27px;border:1px solid #e1e7f0;border-radius:16px;background:#fff;box-shadow:0 9px 25px rgba(31,46,75,.06);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;overflow:hidden;color:#26384d}.dash-kpi:after{content:"";position:absolute;z-index:-1;right:-25px;top:-35px;width:115px;height:115px;border-radius:50%;background:rgba(79,70,229,.055)}.dash-kpi:nth-child(2):after{background:rgba(16,185,129,.065)}.dash-kpi:nth-child(3):after{background:rgba(59,130,246,.065)}.dash-kpi:nth-child(4):after{background:rgba(100,116,139,.065)}.dash-kpi:hover{border-color:#c9d5e7;box-shadow:0 15px 34px rgba(31,46,75,.11);transform:translateY(-3px)}.dash-kpi span{max-width:165px;display:flex;align-items:center;gap:8px;color:#536177;font-size:12px;line-height:1.35}.dash-kpi span svg{box-sizing:content-box;width:18px;height:18px;padding:9px;border-radius:11px;background:#fff0f2;color:#ed3f59;box-shadow:inset 0 0 0 1px #ffe0e5}.dash-kpi:nth-child(2) span svg{background:#e8fbf4;color:#0ba876;box-shadow:inset 0 0 0 1px #d1f4e7}.dash-kpi:nth-child(3) span svg{background:#ebf3ff;color:#3578ed;box-shadow:inset 0 0 0 1px #d9e8ff}.dash-kpi:nth-child(4) span svg{background:#eef1f5;color:#58687e;box-shadow:inset 0 0 0 1px #e0e5ec}.dash-kpi strong{position:absolute;right:18px;top:22px;font-size:22px;letter-spacing:-.03em}.dash-kpi small{font-size:12px;color:#7c8a9c}.dash-kpi .kpi-line{height:5px;position:absolute;left:17px;bottom:15px;max-width:calc(100% - 34px);border-radius:20px}.kpi-line.red{background:#fa344c}.kpi-line.green{background:#14b96a}.kpi-line.blue{background:#2869e7}.kpi-line.slate{background:#526176} .dash-columns{display:grid;grid-template-columns:minmax(0,1.85fr) minmax(300px,.9fr);gap:20px}.dash-primary,.dash-secondary{display:flex;flex-direction:column;gap:20px;min-width:0}.dash-card{background:#fff;border:1px solid #e0e6ef;border-radius:16px;box-shadow:0 9px 28px rgba(31,46,75,.055);overflow:hidden;transition:box-shadow .18s ease}.dash-card:hover{box-shadow:0 13px 34px rgba(31,46,75,.085)}.dash-card-head{min-height:56px;padding:0 19px;background:linear-gradient(180deg,#fff,#fcfdff);border-bottom:1px solid #e9edf3;display:flex;align-items:center;justify-content:space-between;gap:10px}.dash-card-head h2,.overview-column h2{font-size:14px;font-weight:750;margin:0;display:flex;align-items:center;gap:7px;color:#1e2b42}.dash-card-head svg,.overview-column h2 svg{width:17px;height:17px;color:#526ee8}.dash-card-head>a{padding:6px 9px;border-radius:7px;background:#f2f5fa;color:#315fc5;font-size:11px;font-weight:750}.overview-columns{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;padding:23px 21px 18px}.overview-column:not(:last-child){padding-right:22px;border-right:1px solid #edf1f5}.overview-column h2{margin-bottom:19px}.overview-row{display:block;position:relative;margin:0 0 14px;padding-bottom:10px;font-size:12px;color:#526178}.overview-row span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.overview-row small{position:absolute;right:0;top:0;color:#9aa6b8;font-size:11px}.overview-row:after,.overview-row i{content:"";height:5px;position:absolute;left:0;bottom:0;border-radius:20px}.overview-row:after{width:100%;background:#edf0f4}.overview-row i{z-index:1}.overview-totals{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:14px 20px;border-top:1px solid #e8edf3;background:#fafbfd}.overview-totals a{padding:11px 12px;border:1px solid #e0e6ee;border-radius:9px;background:#fff}.overview-totals span,.overview-totals b{display:block}.overview-totals span{font-size:11px;color:#789}.overview-totals b{margin-top:3px;font-size:16px;color:#1f2d44} .dash-tabs{display:flex;gap:18px;padding:0 19px;border-bottom:1px solid #e8edf3;overflow-x:auto;white-space:nowrap}.dash-tabs button{appearance:none;border:0;border-bottom:2px solid transparent;background:transparent;font:inherit;font-size:13px;color:#526178;padding:12px 0;cursor:pointer}.dash-tabs button:hover{color:#1e5fc7}.dash-tabs button.selected{color:#2464d7;border-bottom-color:#2464d7;font-weight:700}.dash-work-tabs [data-dashboard-panel][hidden]{display:none}.dash-table-scroll{overflow-x:auto}.dash-table{border-collapse:collapse;width:100%;min-width:540px;font-size:12px}.dash-table th{text-align:left;padding:12px 13px;background:#f6f8fc;color:#6b778b;font-size:10px;letter-spacing:.055em;text-transform:uppercase}.dash-table td{padding:13px;border-bottom:1px solid #edf0f4;color:#3c4d66;vertical-align:top}.dash-table td a{color:#273b5a}.dash-table tbody tr:hover{background:#f9fbff}.dash-badge{display:inline-flex;border:1px solid #bcd1fb;border-radius:20px;padding:4px 8px;background:#edf4ff;color:#316ddb}.dash-empty{text-align:center;color:#8694a6;padding:23px!important;font-size:12px}.calendar-grid{margin:0 19px 19px;border:1px solid #e2e8f0;border-radius:10px;overflow:hidden}.calendar-weekdays,.calendar-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}.calendar-weekdays span{text-align:center;padding:9px;border-right:1px solid #e4eaf2;border-bottom:1px solid #e4eaf2;background:#f7f9fc;color:#536379;font-size:11px;font-weight:750}.calendar-day{min-height:88px;border-right:1px solid #e4eaf2;border-bottom:1px solid #e4eaf2;padding:7px 5px;min-width:0;font-size:11px}.calendar-day>span{display:block;text-align:right;color:#758499}.calendar-day.muted{background:#fafbfc}.calendar-day.today{background:#f2f7ff}.calendar-day.today>span{color:#fff;background:#2b6fe8;border-radius:50%;width:18px;height:18px;text-align:center;line-height:18px;margin-left:auto}.calendar-day a{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff;padding:4px 5px;margin-top:3px;border-radius:5px;background:#467ddc;font-size:10px}.calendar-day .event-projects{background:#ba318f}.calendar-day .event-invoices{background:#eb8120}.calendar-day .event-contracts{background:#64b92c}.todo-group{padding:16px 18px}.todo-group h3{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:#d79000;margin:0 0 8px}.todo-group>a{display:flex;align-items:flex-start;gap:8px;padding:11px 2px;border-bottom:1px solid #edf0f4;color:#384961;font-size:12px}.todo-group small{display:block;color:#99a5b3;margin-top:3px;font-size:11px}.todo-check{width:15px;height:15px;border:1px solid #cbd5e1;border-radius:50%;flex:none}.project-activity{padding:13px 20px}.project-activity a{display:block;position:relative;border-left:1px solid #d2dbe7;margin-left:4px;padding:6px 0 18px 15px}.project-activity a:before{content:"";width:8px;height:8px;position:absolute;left:-5px;top:9px;border:2px solid #fff;background:#6681e8;border-radius:50%;box-shadow:0 0 0 1px #6681e8}.project-activity small,.project-activity b,.project-activity span{display:block}.project-activity small{font-size:10px;color:#929eae}.project-activity b{font-size:12px;color:#2564c7;margin:3px 0}.project-activity span{font-size:11px;color:#69788d}.goals-card{padding-bottom:8px}.goal-row{display:block;padding:14px 18px;border-bottom:1px solid #edf0f4;font-size:12px}.goal-row span{display:flex;justify-content:space-between;gap:8px}.goal-row b{color:#249f57}.goal-row>i{display:block;background:#edf1f6;height:7px;margin:8px 0 4px;border-radius:20px;overflow:hidden}.goal-row em{display:block;background:linear-gradient(90deg,#5b5ce2,#3b82f6);height:7px}.goal-row small{color:#8b98aa;font-size:10px} /* Only redesigned area: Payment Records */ .payment-modern-card{overflow:visible}.payment-head{align-items:flex-start;padding-top:14px;padding-bottom:14px}.payment-head>div{min-width:0}.payment-head h2{margin-bottom:4px}.payment-head p{margin:0;color:#8b97a8;font-size:11px}.payment-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:18px 20px 8px}.payment-metrics>div{position:relative;padding:14px 15px;border:1px solid #e6ebf2;border-radius:13px;background:linear-gradient(180deg,#fff,#fafcff)}.payment-metrics span,.payment-metrics strong,.payment-metrics small{display:block}.payment-metrics span{font-size:10px;font-weight:750;letter-spacing:.06em;text-transform:uppercase;color:#8a97a9}.payment-metrics strong{margin-top:5px;font-size:18px;letter-spacing:-.02em;color:#1e2b42}.payment-metrics small{margin-top:4px;font-size:10px;color:#8b97a8}.payment-metrics small.up{color:#159d68}.payment-metrics small.down{color:#d64555}.payment-metrics small svg{width:11px;height:11px;margin-right:3px;vertical-align:-2px}.payment-legend{display:flex;justify-content:flex-end;gap:15px;padding:8px 22px 0;color:#758297;font-size:10px}.payment-legend span{display:inline-flex;align-items:center;gap:6px}.payment-legend i{width:9px;height:9px;border-radius:3px}.payment-legend i.current{background:linear-gradient(180deg,#5b6ee1,#3b82f6)}.payment-legend i.previous{background:#dfe6f1}.payment-chart-modern{height:280px;margin:4px 20px 22px;padding:18px 12px 0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:14px;align-items:end;border:1px solid #e6ebf2;border-radius:14px;background:linear-gradient(180deg,#fbfdff,#fff),repeating-linear-gradient(to top,transparent 0 49px,#edf1f5 49px 50px);box-shadow:inset 0 1px 0 #fff}.payment-day{height:220px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;position:relative}.payment-bars-modern{height:176px;width:100%;display:flex;align-items:flex-end;justify-content:center;gap:7px}.payment-bars-modern b{display:block;width:min(26px,32%);min-height:3px;border-radius:8px 8px 3px 3px;transition:height .25s ease,transform .15s ease,filter .15s ease}.payment-bars-modern b.previous{background:linear-gradient(180deg,#e6ebf3,#cbd5e1)}.payment-bars-modern b.current{background:linear-gradient(180deg,#6c63e8 0%,#3b82f6 100%);box-shadow:0 8px 18px rgba(59,130,246,.18)}.payment-day:hover .payment-bars-modern b{transform:translateY(-3px);filter:saturate(1.08)}.payment-day>span{margin-top:10px;color:#526178;font-size:11px;font-weight:750}.payment-day>small{margin-top:2px;color:#9aa6b4;font-size:9px} @media(max-width:1200px){.dash-columns{grid-template-columns:minmax(0,1.45fr) minmax(270px,.8fr)}.overview-columns{gap:12px}.payment-metrics{grid-template-columns:repeat(2,1fr)}}@media(max-width:950px){.dash-columns{grid-template-columns:1fr}.dash-secondary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}.dash-kpis{grid-template-columns:repeat(2,1fr)}.overview-column:not(:last-child){padding-right:0;border-right:0}}@media(max-width:800px){.dash-command-bar{align-items:flex-start;flex-direction:column}.dash-command-actions{width:100%}.dash-command-actions a{flex:1;min-width:125px;justify-content:center}}@media(max-width:760px){.dash-secondary{grid-template-columns:1fr}.overview-columns{grid-template-columns:1fr}.dash-kpis{grid-template-columns:1fr}.dash-hero{align-items:flex-start;flex-direction:column}.dash-heading-actions{width:100%;justify-content:space-between}.payment-chart-modern{gap:7px;margin-left:10px;margin-right:10px;padding-left:4px;padding-right:4px}.payment-bars-modern{gap:3px}.payment-bars-modern b{width:35%}}@media(max-width:520px){.payment-metrics{grid-template-columns:1fr}.payment-day>small{display:none}.payment-chart-modern{height:235px}.payment-day{height:180px}.payment-bars-modern{height:140px}}@media(prefers-reduced-motion:reduce){.dash-kpi,.dash-card,.payment-bars-modern b{transition:none}.dash-kpi:hover,.payment-day:hover .payment-bars-modern b{transform:none}} /* Dashboard productivity panels */ .todo-card .dash-card-head{align-items:center}.todo-head-links{display:flex;gap:5px}.todo-head-links a{padding:5px 7px;border-radius:6px;color:#315fc5;font-size:10px;font-weight:750}.todo-head-links a+a{border-left:1px solid #dbe3ef}.todo-group{padding:13px 16px}.todo-group+.todo-group{border-top:1px solid #edf0f4}.todo-group h3{display:flex;align-items:center;gap:5px;margin:0 0 6px;font-size:10px;text-transform:none;letter-spacing:.01em}.todo-group h3 svg{width:12px;height:12px}.todo-open h3{color:#d69000}.todo-done h3{color:#16a266}.todo-row{display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:start;gap:8px;padding:10px 0;border-bottom:1px solid #edf0f4}.todo-row:last-child{border-bottom:0}.todo-row>form{margin:0}.todo-row>a{min-width:0;color:#37465e}.todo-row>a b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-weight:650}.todo-row>a small{display:flex;align-items:center;gap:4px;margin-top:3px;color:#96a1b1;font-size:9px}.todo-row>a small svg{width:10px;height:10px}.todo-check{width:17px;height:17px;display:grid;place-items:center;margin-top:1px;padding:0;border:1px solid #ced7e4;border-radius:4px;background:#fff;color:#fff;cursor:pointer}.todo-check:hover{border-color:#2e78eb;background:#edf5ff}.todo-check svg{width:11px;height:11px}.todo-row.completed>a b{text-decoration:line-through;color:#758399}.todo-row.completed>.todo-check{border-color:#22b573;background:#22b573}.todo-actions{display:flex;align-items:center;gap:2px;opacity:.25;transition:opacity .15s}.todo-row:hover .todo-actions{opacity:1}.todo-actions a,.todo-actions button{width:24px;height:24px;display:grid;place-items:center;padding:0;border:0;border-radius:6px;background:transparent;color:#77869a;cursor:pointer}.todo-actions a:hover,.todo-actions button:hover{background:#eef3fa;color:#2869d8}.todo-actions svg{width:12px;height:12px}.dash-empty.compact{padding:10px!important}.dash-activity-list{padding:6px 14px}.dash-activity-list>a{display:grid;grid-template-columns:34px minmax(0,1fr) 16px;align-items:center;gap:9px;padding:10px 4px;border-bottom:1px solid #edf0f4;color:#34445c}.dash-activity-list>a:last-child{border-bottom:0}.dash-activity-icon{width:31px;height:31px;display:grid;place-items:center;border-radius:9px;background:#eef4ff;color:#3d70d8}.dash-activity-icon svg{width:14px}.dash-activity-list b,.dash-activity-list small{display:block}.dash-activity-list b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}.dash-activity-list small{margin-top:2px;color:#8b98aa;font-size:9px}.dash-activity-list>a>svg{width:13px;color:#a4afbd} /* ============================================================ SECTION: full-crm-audit.css ============================================================ */ /* NEXT CRM FULL LEFT-MENU UI AUDIT 2026-09-30 */ /* Shared readability + text visibility */ .nextcrm-modern{--audit-blue:#2563eb;--audit-indigo:#4f46e5;--audit-violet:#7c3aed;--audit-cyan:#06b6d4;--audit-green:#059669;--audit-orange:#ea580c;--audit-rose:#e11d48;--audit-text:#1e293b;--audit-muted:#64748b} .nextcrm-modern .customer-content{color:var(--audit-text)} .nextcrm-modern :where(h1,h2,h3,h4,strong,th){text-rendering:optimizeLegibility} .nextcrm-modern :where(p,small,.muted,[class*="empty"]){color:var(--audit-muted)} .nextcrm-modern a{transition:color .15s ease,background .15s ease,border-color .15s ease,box-shadow .15s ease,transform .15s ease} .nextcrm-modern button{transition:background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease,transform .15s ease} .nextcrm-modern .page-intro{min-height:96px;display:flex;align-items:center;justify-content:space-between;gap:18px} .nextcrm-modern .page-intro .eyebrow{display:block;margin-bottom:5px;font-size:10px;font-weight:900;letter-spacing:.13em;text-transform:uppercase} .nextcrm-modern .page-intro h1{margin:0 0 5px!important;font-size:25px!important;line-height:1.1}.nextcrm-modern .page-intro p{margin:0!important;font-size:13px} /* Sidebar audit: clearer grouping, active text and child visibility */ .nextcrm-modern .nextcrm-main-nav{padding-bottom:22px}.nextcrm-modern .nav-section-label{margin-top:16px!important;font-size:9px!important;font-weight:900!important;letter-spacing:.14em!important;text-transform:uppercase} .nextcrm-modern .nextcrm-main-nav>a,.nextcrm-modern .nav-group>summary{min-height:39px!important;border:1px solid transparent!important;border-radius:10px!important;font-weight:700!important;color:#40526a!important} .nextcrm-modern .nextcrm-main-nav>a>svg,.nextcrm-modern .nav-group>summary>svg:first-child{width:17px!important;height:17px!important} .nextcrm-modern .nav-children{margin:4px 0 8px 17px!important;padding:3px 0 3px 12px!important;border-left:2px solid #e7edf7!important}.nextcrm-modern .nav-children a{min-height:31px!important;padding:7px 9px!important;border-radius:8px!important;color:#66758a!important;font-size:11.5px!important;font-weight:650!important}.nextcrm-modern .nav-children a:hover{color:#3347a7!important}.nextcrm-modern .nav-children a.active{color:#4338ca!important;font-weight:850!important} /* EVENTS */ .nextcrm-modern .event-page{padding:0!important}.nextcrm-modern .event-shell{border:0!important;border-radius:18px!important;box-shadow:0 13px 34px rgba(43,59,92,.08)!important;background:#fff!important}.nextcrm-modern .event-heading{position:relative;overflow:hidden;min-height:92px!important;padding:18px 20px!important;background:radial-gradient(circle at 91% 15%,rgba(255,255,255,.16),transparent 22%),linear-gradient(120deg,#4338ca,#2563eb 56%,#0891b2)!important;color:#fff;border:0!important}.nextcrm-modern .event-heading h1{font-size:25px!important;font-weight:850!important;color:#fff!important}.nextcrm-modern .event-heading select,.nextcrm-modern .event-heading .event-button{border-color:rgba(255,255,255,.3)!important;background:rgba(255,255,255,.95)!important;border-radius:10px!important}.nextcrm-modern .event-label-strip{background:linear-gradient(90deg,#f8fbff,#faf7ff)!important}.nextcrm-modern .event-label-strip a{border:1px solid #d9e4f5!important;border-radius:999px!important;background:#fff!important;font-weight:750}.nextcrm-modern .event-calendar-nav h2{font-weight:850!important;color:#243b64!important}.nextcrm-modern .event-calendar-nav a,.nextcrm-modern .event-view-switch>*{border-color:#d6e0ee!important}.nextcrm-modern .event-view-switch b{background:linear-gradient(135deg,#4f46e5,#2563eb)!important;color:#fff!important}.nextcrm-modern .event-day.today{background:linear-gradient(135deg,#fff7db,#fff0bd)!important}.nextcrm-modern .event-pill{border-radius:5px!important;box-shadow:0 3px 8px rgba(30,41,59,.12)} /* CONTACTS / CLIENTS */ .nextcrm-modern .contacts-card{border:0!important;border-radius:17px!important;box-shadow:0 12px 30px rgba(43,59,92,.075)!important}.nextcrm-modern .contacts-toolbar{background:linear-gradient(90deg,#fbfdff,#f7faff,#faf7ff)!important;border-bottom:1px solid #e5ebf4}.nextcrm-modern .contact-person span{border-radius:10px!important;background:linear-gradient(135deg,#e0e7ff,#dbeafe)!important;color:#4338ca!important;font-weight:850}.nextcrm-modern .contact-switch.on{background:linear-gradient(90deg,#4f46e5,#2563eb)!important}.nextcrm-modern .contacts-card footer{background:linear-gradient(90deg,#fbfdff,#faf8ff)!important} .nextcrm-modern :where(.customer-detail-page,.client-profile-page) :where(.customer-detail-card,.client-card,.customer-card){border-radius:16px!important;box-shadow:0 10px 28px rgba(43,59,92,.065)!important} /* CONTRACTS */ .nextcrm-modern .contract-page{padding:0!important}.nextcrm-modern .contract-page>h1{display:inline-flex;align-items:center;min-height:52px;margin:0 0 14px!important;padding:0 18px;border-left:4px solid #7c3aed;border-radius:12px;background:linear-gradient(90deg,#fff,#f7f8ff);box-shadow:0 8px 22px rgba(43,59,92,.055);font-size:24px!important}.nextcrm-modern .contract-stats{gap:12px!important}.nextcrm-modern .contract-stat{min-height:72px!important;border:0!important;border-radius:14px!important;box-shadow:0 9px 22px rgba(43,59,92,.07)!important;font-weight:750}.nextcrm-modern .contract-stat:nth-child(5n+1){background:linear-gradient(145deg,#eff6ff,#dbeafe)!important}.nextcrm-modern .contract-stat:nth-child(5n+2){background:linear-gradient(145deg,#ecfdf5,#d1fae5)!important}.nextcrm-modern .contract-stat:nth-child(5n+3){background:linear-gradient(145deg,#fff7ed,#ffedd5)!important}.nextcrm-modern .contract-stat:nth-child(5n+4){background:linear-gradient(145deg,#f5f3ff,#ede9fe)!important}.nextcrm-modern .contract-stat:nth-child(5n){background:linear-gradient(145deg,#fff1f2,#ffe4e6)!important}.nextcrm-modern .contract-primary{border:0!important;background:linear-gradient(135deg,#4f46e5,#2563eb)!important;box-shadow:0 7px 17px rgba(37,99,235,.18)}.nextcrm-modern .contract-chart,.nextcrm-modern .contract-table-card,.nextcrm-modern .contract-form-card,.nextcrm-modern .contract-detail-card{border-radius:16px!important;border-color:#dfe7f2!important;box-shadow:0 11px 28px rgba(43,59,92,.065)!important}.nextcrm-modern .contract-table-card{border-top:4px solid #7c3aed!important} /* SUBSCRIPTIONS */ .nextcrm-modern .subscription-index{color:#23344d}.nextcrm-modern .subscription-summary{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:11px!important}.nextcrm-modern .subscription-statuses>a,.nextcrm-modern .subscription-summary>a,.nextcrm-modern .subscription-summary>div{border:0!important;border-radius:14px!important;box-shadow:0 9px 22px rgba(43,59,92,.07)!important}.nextcrm-modern .subscription-summary>*:nth-child(5n+1){background:linear-gradient(145deg,#eff6ff,#dbeafe)!important}.nextcrm-modern .subscription-summary>*:nth-child(5n+2){background:linear-gradient(145deg,#f5f3ff,#ede9fe)!important}.nextcrm-modern .subscription-summary>*:nth-child(5n+3){background:linear-gradient(145deg,#ecfdf5,#d1fae5)!important}.nextcrm-modern .subscription-summary>*:nth-child(5n+4){background:linear-gradient(145deg,#fff7ed,#ffedd5)!important}.nextcrm-modern .subscription-summary>*:nth-child(5n){background:linear-gradient(145deg,#fff1f2,#ffe4e6)!important}.nextcrm-modern .subscription-index-card,.nextcrm-modern .subscription-form-card{border-radius:16px!important;border-color:#dfe7f2!important;box-shadow:0 11px 28px rgba(43,59,92,.07)!important}.nextcrm-modern .subscription-index-card{border-top:4px solid #06b6d4!important}.nextcrm-modern .subscription-dark{background:linear-gradient(135deg,#4f46e5,#2563eb)!important;border-color:transparent!important} /* PRODUCTS / ITEMS / COMMERCE */ .nextcrm-modern .items-page{color:#22354d}.nextcrm-modern .items-card,.nextcrm-modern .order-card,.nextcrm-modern .store-card,.nextcrm-modern .process-card{border-radius:16px!important;border-color:#dfe7f2!important;box-shadow:0 11px 28px rgba(43,59,92,.065)!important}.nextcrm-modern .items-card{border-top:4px solid #059669!important}.nextcrm-modern .items-primary,.nextcrm-modern .order-actions .items-primary{background:linear-gradient(135deg,#059669,#0d9488)!important;border-color:transparent!important;color:#fff!important}.nextcrm-modern .items-toolbar,.nextcrm-modern .order-toolbar,.nextcrm-modern .store-head{background:linear-gradient(90deg,#fbfdff,#f5fffb,#f7faff)!important}.nextcrm-modern .store-price{color:#047857!important;font-weight:900!important} /* STAFF / TEAM */ .nextcrm-modern .staff-panel{border:0!important;border-radius:17px!important;box-shadow:0 12px 30px rgba(43,59,92,.075)!important;overflow:hidden}.nextcrm-modern .staff-toolbar{background:linear-gradient(90deg,#fbfdff,#f7faff,#faf7ff)!important}.nextcrm-modern .staff-avatar{background:linear-gradient(135deg,#e0e7ff,#dbeafe)!important;color:#4338ca!important}.nextcrm-modern .staff-switch.on{background:linear-gradient(90deg,#4f46e5,#2563eb)!important}.nextcrm-modern .staff-profile-hero{background:radial-gradient(circle at 88% 12%,rgba(255,255,255,.15),transparent 23%),linear-gradient(120deg,#4338ca,#2563eb 55%,#0891b2)!important;color:#fff!important;border-radius:18px!important;box-shadow:0 16px 36px rgba(37,99,235,.17)!important}.nextcrm-modern .staff-profile-hero :where(h1,h2,h3,p,span,small,strong){color:inherit!important} /* FILES */ .nextcrm-modern .file-manager-page{border:0!important;border-radius:18px!important;box-shadow:0 14px 34px rgba(43,59,92,.08)!important;min-height:calc(100vh - 120px)!important}.nextcrm-modern .file-sidebar-panel{background:linear-gradient(180deg,#fbfdff,#f7f9ff)!important}.nextcrm-modern .file-sidebar-panel>a{min-height:36px;border-radius:9px!important;font-weight:700}.nextcrm-modern .file-sidebar-panel>a.active{background:linear-gradient(90deg,#eef2ff,#eff6ff)!important;color:#4338ca!important}.nextcrm-modern .file-center-panel>header{min-height:65px!important;height:auto!important;background:radial-gradient(circle at 88% 5%,rgba(255,255,255,.17),transparent 22%),linear-gradient(120deg,#4338ca,#2563eb 58%,#0891b2)!important;color:#fff;border:0!important}.nextcrm-modern .file-center-panel>header h1{color:#fff!important;font-size:20px!important;font-weight:850!important}.nextcrm-modern .file-center-panel>header svg{color:#fff}.nextcrm-modern .file-center-panel>header .file-btn{background:#fff!important;color:#3152a4!important;border-color:rgba(255,255,255,.4)!important;border-radius:9px!important;font-weight:800}.nextcrm-modern .file-breadcrumb{background:linear-gradient(90deg,#f8fbff,#faf7ff)!important}.nextcrm-modern .file-row{border-radius:10px!important;padding:11px!important}.nextcrm-modern .file-row:hover{background:linear-gradient(90deg,#f1f5ff,#f7fbff)!important}.nextcrm-modern .file-row strong{font-weight:750!important;color:#30445f}.nextcrm-modern .file-detail-panel{background:#fbfdff}.nextcrm-modern .file-detail-panel>header{background:linear-gradient(90deg,#f7faff,#faf7ff)!important} /* MESSAGES */ .nextcrm-modern .messages-page :where(.message-layout,.omni-layout,.channel-manage){border-radius:17px!important;border-color:#dfe7f2!important;box-shadow:0 12px 30px rgba(43,59,92,.07)!important;overflow:hidden}.nextcrm-modern .message-list-panel,.nextcrm-modern .omni-conversations{background:linear-gradient(180deg,#fbfdff,#f8faff)!important}.nextcrm-modern .message-primary,.nextcrm-modern .channel-save{background:linear-gradient(135deg,#4f46e5,#2563eb)!important;border-color:transparent!important;color:#fff!important}.nextcrm-modern .channel-card{border-radius:14px!important;box-shadow:0 7px 20px rgba(43,59,92,.055)!important}.nextcrm-modern .omni-nav a.active{background:linear-gradient(135deg,#4f46e5,#2563eb)!important;color:#fff!important} /* NEXT AI */ .nextcrm-modern .ai-workspace,.nextcrm-modern .ai-chat-card,.nextcrm-modern .ai-history-panel,.nextcrm-modern .ai-settings-card{border-radius:17px!important;border-color:#dfe7f2!important;box-shadow:0 12px 30px rgba(43,59,92,.07)!important}.nextcrm-modern .ai-panel-head,.nextcrm-modern .ai-chat-header,.nextcrm-modern .ai-settings-heading{background:linear-gradient(90deg,#f8fbff,#f8f6ff)!important}.nextcrm-modern .ai-new-chat,.nextcrm-modern .ai-composer button{background:linear-gradient(135deg,#7c3aed,#2563eb)!important;color:#fff!important;border-color:transparent!important}.nextcrm-modern .ai-context-badge{background:#eef2ff!important;color:#4338ca!important}.nextcrm-modern .ai-provider-status.active{background:#ecfdf5!important;color:#047857!important} /* REPORTS */ .nextcrm-modern .report-heading{position:relative;overflow:hidden;min-height:102px;padding:18px 20px!important;border-radius:18px;background:radial-gradient(circle at 91% 10%,rgba(255,255,255,.14),transparent 23%),linear-gradient(120deg,#312e81,#2563eb 58%,#0891b2)!important;box-shadow:0 16px 36px rgba(37,99,235,.17)!important;color:#fff}.nextcrm-modern .report-heading :where(h1,p,.report-eyebrow){color:#fff!important}.nextcrm-modern .report-period{border-color:rgba(255,255,255,.25)!important;background:rgba(255,255,255,.12)!important;backdrop-filter:blur(5px)}.nextcrm-modern .report-period a{color:#eaf2ff!important}.nextcrm-modern .report-period a.active{background:#fff!important;color:#3346a5!important}.nextcrm-modern .report-card,.nextcrm-modern .report-chart-card,.nextcrm-modern .report-breakdown-card{border-radius:16px!important;box-shadow:0 10px 27px rgba(43,59,92,.065)!important} /* SALES specialty lists */ .nextcrm-modern .sales-audit-intro .btn{white-space:nowrap}.nextcrm-modern .sales-actions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}.nextcrm-modern .sales-primary{background:linear-gradient(135deg,#4f46e5,#2563eb)!important;border-color:transparent!important;box-shadow:0 7px 17px rgba(37,99,235,.17)!important}.nextcrm-modern .sales-secondary{border-radius:9px!important;background:#fff!important;border-color:#d5dfec!important;color:#52657d!important} /* Help / Support / Settings continuity */ .nextcrm-modern :where(.kb-page,.help-page,.support-setup-page,.predefined-replies-page){color:#22354d}.nextcrm-modern :where(.kb-card,.help-card,.support-card,.predefined-replies-card){border-radius:16px!important;box-shadow:0 10px 28px rgba(43,59,92,.065)!important}.nextcrm-modern :where(.kb-primary,.support-primary,.reply-primary){background:linear-gradient(135deg,#4f46e5,#2563eb)!important;color:#fff!important;border-color:transparent!important} /* Fix old dark/gray buttons that visually break the dashboard language */ .nextcrm-modern :where(.project-new,.project-form-footer button,.pw-dark,.lead-dark,.subscription-dark,.contract-primary){background:linear-gradient(135deg,#4f46e5,#2563eb)!important;border-color:transparent!important;color:#fff!important} @media(max-width:900px){.nextcrm-modern .event-heading,.nextcrm-modern .report-heading,.nextcrm-modern .page-intro{align-items:flex-start;flex-direction:column}.nextcrm-modern .contract-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}.nextcrm-modern .file-manager-page{border-radius:14px!important}} @media(max-width:620px){.nextcrm-modern .contract-stats{grid-template-columns:1fr!important}.nextcrm-modern .page-intro h1{font-size:22px!important}} /* ============================================================ SECTION: full-crm-audit-fixes.css ============================================================ */ /* NEXT CRM audit addendum: headings / remaining visibility gaps */ .nextcrm-modern .staff-page:not(:has(.page-intro))::before, .nextcrm-modern .contacts-page:not(:has(.page-intro))::before, .nextcrm-modern .sales-page:not(:has(.sales-heading)):not(:has(.page-intro))::before{ display:flex;align-items:center;min-height:82px;box-sizing:border-box;margin:0 0 16px;padding:18px 20px 18px 24px; border:1px solid #dfe7f4;border-radius:17px;background:radial-gradient(circle at 92% 15%,rgba(99,102,241,.12),transparent 22%),linear-gradient(115deg,#fff,#f7faff 55%,#f8f6ff); box-shadow:0 10px 28px rgba(42,61,100,.065);color:#17213a;font-size:24px;font-weight:850;letter-spacing:-.65px; border-left:4px solid #6366f1; } .nextcrm-modern .staff-page:not(:has(.page-intro))::before{content:"Team Members"} .nextcrm-modern .contacts-page:not(:has(.page-intro))::before{content:"Contacts"} .nextcrm-modern .sales-page:not(:has(.sales-heading)):not(:has(.page-intro))::before{content:"Sales Workspace"} .nextcrm-modern .staff-page,.nextcrm-modern .contacts-page,.nextcrm-modern .sales-page{max-width:1700px;margin-left:auto;margin-right:auto} .nextcrm-modern .staff-panel,.nextcrm-modern .contacts-card,.nextcrm-modern .sales-card{overflow:hidden} .nextcrm-modern :where(.staff-toolbar,.contacts-toolbar,.sales-toolbar) :where(input,select,button,a){font-weight:650} .nextcrm-modern :where(.staff-list,.contacts-card table,.sales-card table) tbody td{color:#33465d!important} .nextcrm-modern :where(.staff-list,.contacts-card table,.sales-card table) tbody td small{color:#77869a!important} .nextcrm-modern .staff-row-actions a{color:#315fc5!important}.nextcrm-modern .staff-row-actions button{color:#be123c!important} .nextcrm-modern .contacts-empty,.nextcrm-modern .sales-card td[colspan]{color:#7a889c!important;background:linear-gradient(135deg,#fbfdff,#faf8ff)!important} @media(max-width:700px){ .nextcrm-modern .staff-page:not(:has(.page-intro))::before,.nextcrm-modern .contacts-page:not(:has(.page-intro))::before,.nextcrm-modern .sales-page:not(:has(.sales-heading)):not(:has(.page-intro))::before{min-height:70px;font-size:21px;border-radius:14px} } /* ============================================================ SECTION: dashboard.css ============================================================ */ /* ========================================================== NEXT CRM Dashboard โ€” final unified CRM polish Light Invoice-style surfaces, compact density, soft blue accents ========================================================== */ .crm-dashboard{ --dash-text:#263954; --dash-title:#18263b; --dash-muted:#748399; --dash-line:#dce4ed; --dash-line-soft:#e8edf3; --dash-soft:#f7f9fc; --dash-soft-blue:#f2f6ff; --dash-blue:#3157df; --dash-blue-dark:#285fc1; --dash-green:#198754; --dash-amber:#a56d10; --dash-red:#b63b45; width:100%; max-width:1600px; margin:0 auto; color:var(--dash-text); } /* Header */ .crm-dashboard .dash-heading{margin:0 0 12px} .crm-dashboard .dash-hero{ min-height:92px; padding:18px 20px; border:1px solid var(--dash-line); border-radius:14px; background:linear-gradient(120deg,#fff 62%,#f5f8ff 100%)!important; box-shadow:0 6px 20px rgba(31,48,76,.055)!important; } .crm-dashboard .dash-hero:before,.crm-dashboard .dash-hero:after{display:none!important} .crm-dashboard .dash-eyebrow{margin-bottom:4px;color:#5f6bd6!important;font-size:10px;font-weight:850;letter-spacing:.1em} .crm-dashboard .dash-hero h1{margin:0;color:var(--dash-title)!important;font-size:24px;line-height:1.2;letter-spacing:-.025em} .crm-dashboard .dash-hero p{margin:5px 0 0;color:#76859a!important;font-size:12px} .crm-dashboard .dash-heading-actions{gap:8px;flex-wrap:wrap;justify-content:flex-end} .crm-dashboard .dash-date,.crm-dashboard .dash-options{ min-height:36px; box-sizing:border-box; display:inline-flex; align-items:center; gap:6px; padding:0 12px; border:1px solid #ced8e5!important; border-radius:8px!important; background:#fff!important; color:#34506f!important; font-size:12px; font-weight:750; box-shadow:none!important; backdrop-filter:none!important; } .crm-dashboard .dash-date svg,.crm-dashboard .dash-options svg{width:14px;height:14px;color:#55729a} .crm-dashboard .dash-options:hover{border-color:#b9c9df!important;background:#f7f9fd!important;color:var(--dash-blue-dark)!important} /* Quick actions */ .crm-dashboard .dash-command-bar{ min-height:58px; margin:0 0 12px; padding:9px 12px; border:1px solid var(--dash-line); border-radius:12px; background:linear-gradient(90deg,#fbfcff,#f7f9ff)!important; box-shadow:0 5px 18px rgba(31,48,76,.04)!important; backdrop-filter:none!important; } .crm-dashboard .dash-command-copy>span{width:32px;height:32px;border-radius:8px;background:#eef3ff!important;color:#4965d7!important} .crm-dashboard .dash-command-copy svg{width:15px;height:15px} .crm-dashboard .dash-command-copy strong{color:#21344f;font-size:12px} .crm-dashboard .dash-command-copy small{color:#8a98aa;font-size:10px} .crm-dashboard .dash-command-actions{gap:5px} .crm-dashboard .dash-command-actions a{ min-height:32px; box-sizing:border-box; padding:0 9px; border:1px solid #d4dfec!important; border-radius:7px!important; background:#fff!important; color:#55729a!important; font-size:11px; font-weight:700; box-shadow:none!important; transform:none!important; } .crm-dashboard .dash-command-actions a:hover{border-color:#b9c9df!important;background:#f5f8fd!important;color:var(--dash-blue-dark)!important;transform:none!important} .crm-dashboard .dash-command-actions svg{width:13px;height:13px} /* Notice */ .crm-dashboard .dash-notice{ min-height:52px; margin:0 0 12px; padding:8px 12px; border:1px solid #dbe5f2; border-radius:10px; background:#f7faff!important; color:#5e7087; box-shadow:none!important; } .crm-dashboard .dash-notice-icon{width:32px;height:32px;border-radius:8px;background:#eaf2ff!important;color:#315fc5!important} .crm-dashboard .dash-notice-icon svg{width:15px!important;height:15px!important} .crm-dashboard .dash-notice strong{color:#263a54;font-size:11.5px} .crm-dashboard .dash-notice small{font-size:10px;color:#8190a3} .crm-dashboard .dash-notice>a{color:#315fc5;font-size:11px;font-weight:750} /* KPI cards */ .crm-dashboard .dash-kpis{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:12px} .crm-dashboard .dash-kpi{ min-height:82px; padding:12px 13px 13px; border:1px solid var(--dash-line)!important; border-radius:10px!important; background:#fff!important; box-shadow:none!important; color:var(--dash-text)!important; transform:none!important; overflow:hidden; } .crm-dashboard .dash-kpi:after{display:none!important} .crm-dashboard .dash-kpi:hover{border-color:#c9d6e7!important;background:#fbfcff!important;box-shadow:0 4px 12px rgba(31,48,76,.04)!important;transform:none!important} .crm-dashboard .dash-kpi-head{display:flex;align-items:center;gap:8px;min-width:0} .crm-dashboard .dash-kpi-icon{width:29px;height:29px;flex:none;display:grid!important;place-items:center;border-radius:8px;background:#f1f5fb;color:#60738d!important} .crm-dashboard .dash-kpi-icon svg{width:14px!important;height:14px!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:inherit!important} .crm-dashboard .dash-kpi-label{display:block!important;min-width:0;max-width:none!important;color:#6f7f93!important;font-size:9.5px!important;font-weight:800;letter-spacing:.035em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .crm-dashboard .dash-kpi-value{display:flex;align-items:baseline;gap:5px;margin-top:7px} .crm-dashboard .dash-kpi-value strong{position:static!important;color:#21344f!important;font-size:19px!important;line-height:1.1;letter-spacing:-.02em} .crm-dashboard .dash-kpi-value span,.crm-dashboard .dash-kpi-value small{display:inline!important;color:#94a0b0!important;font-size:10px!important} .crm-dashboard .dash-kpi-progress{position:absolute;left:13px;right:13px;bottom:9px;height:4px;border-radius:999px;background:#edf1f5;overflow:hidden} .crm-dashboard .dash-kpi-progress i{display:block;height:100%;min-width:3px;border-radius:inherit} .crm-dashboard .dash-kpi-progress .red{background:#e47a83}.crm-dashboard .dash-kpi-progress .green{background:#49a97b}.crm-dashboard .dash-kpi-progress .blue{background:#6688d8}.crm-dashboard .dash-kpi-progress .slate{background:#8290a3} .crm-dashboard .dash-kpi-invoices .dash-kpi-icon{background:#fff4f4;color:#b8565e!important} .crm-dashboard .dash-kpi-leads .dash-kpi-icon{background:#eefaf4;color:#278c63!important} .crm-dashboard .dash-kpi-projects .dash-kpi-icon{background:#f2f6ff;color:#315fc5!important} .crm-dashboard .dash-kpi-tasks .dash-kpi-icon{background:#f4f6f9;color:#65758a!important} /* Main layout */ .crm-dashboard .dash-columns{grid-template-columns:minmax(0,1.72fr) minmax(300px,.88fr);gap:12px} .crm-dashboard .dash-primary,.crm-dashboard .dash-secondary{gap:12px} .crm-dashboard .dash-card{ border:1px solid #dce3ec!important; border-radius:12px!important; background:#fff!important; box-shadow:0 5px 18px rgba(31,48,76,.045)!important; transition:none!important; } .crm-dashboard .dash-card:hover{box-shadow:0 5px 18px rgba(31,48,76,.045)!important} .crm-dashboard .dash-card-head{ min-height:54px; padding:0 14px; border-bottom:1px solid #e3e9f1; background:linear-gradient(90deg,#fbfcff,#f7f9ff)!important; } .crm-dashboard .dash-card-head h2,.crm-dashboard .overview-column h2{color:#21314c;font-size:12.5px;font-weight:800} .crm-dashboard .dash-card-head h2 svg,.crm-dashboard .overview-column h2 svg{width:14px;height:14px;color:#5573be} .crm-dashboard .dash-card-head>a,.crm-dashboard .todo-head-links a,.crm-dashboard .todo-head-links label{ min-height:27px; display:inline-flex; align-items:center; box-sizing:border-box; padding:0 8px!important; border:1px solid #d7e0eb!important; border-radius:7px!important; background:#fff!important; color:#55729a!important; font-size:10px!important; font-weight:750!important; text-decoration:none; } .crm-dashboard .dash-card-head>a:hover,.crm-dashboard .todo-head-links a:hover,.crm-dashboard .todo-head-links label:hover{background:#f5f8fd!important;color:#285fc1!important;border-color:#b9c9df!important} /* Sales overview */ .crm-dashboard .overview-columns{gap:18px;padding:17px 16px 14px} .crm-dashboard .overview-column:not(:last-child){padding-right:17px;border-right:1px solid #edf1f5} .crm-dashboard .overview-column h2{margin-bottom:13px} .crm-dashboard .overview-row{margin-bottom:10px;padding-bottom:8px;color:#596a81;font-size:10.5px} .crm-dashboard .overview-row small{font-size:9.5px;color:#98a4b3} .crm-dashboard .overview-row:after,.crm-dashboard .overview-row i{height:4px} .crm-dashboard .overview-row:after{background:#edf1f5} .crm-dashboard .overview-row i{background:#6f8ed8!important} .crm-dashboard .overview-totals{gap:8px;padding:10px 14px;background:#fbfcfe} .crm-dashboard .overview-totals a{padding:9px 10px;border:1px solid #e0e6ef;border-radius:8px;background:#fff} .crm-dashboard .overview-totals span{color:#7a889b;font-size:9.5px} .crm-dashboard .overview-totals b{margin-top:3px;color:#21344f;font-size:14px} /* Work tabs + tables */ .crm-dashboard .dash-tabs{gap:16px;padding:0 14px;background:#fff} .crm-dashboard .dash-tabs button{padding:11px 0 10px;color:#63738a;font-size:11px} .crm-dashboard .dash-tabs button:hover{color:#285fc1} .crm-dashboard .dash-tabs button.selected{color:#315fc5;border-bottom-color:#3157df;font-weight:750} .crm-dashboard .dash-table{min-width:540px;font-size:11px} .crm-dashboard .dash-table th{height:38px;padding:0 11px;border-bottom:1px solid #e4eaf1;background:#f8fafc;color:#53647a;font-size:9.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase} .crm-dashboard .dash-table th+th{border-left:1px solid #e7ebf1} .crm-dashboard .dash-table td{height:48px;padding:8px 11px;border-bottom:1px solid #e8edf3;color:#3f5169;vertical-align:middle} .crm-dashboard .dash-table tbody tr:hover td{background:#fbfcff} .crm-dashboard .dash-table td a{color:#1f4f95;font-weight:700} .crm-dashboard .dash-badge{min-height:21px;box-sizing:border-box;padding:0 7px;border:1px solid #d7e0eb;border-radius:999px;background:#f7f9fc;color:#5a6b80;font-size:9px;font-weight:750} .crm-dashboard .dash-empty{padding:18px!important;color:#8b98aa;font-size:10.5px} /* Calendar */ .crm-dashboard .calendar-grid{margin:0 14px 14px;border:1px solid #e1e7ef;border-radius:9px} .crm-dashboard .calendar-weekdays span{padding:7px;border-color:#e6ebf2;background:#f8fafc;color:#5e6e83;font-size:9.5px} .crm-dashboard .calendar-day{min-height:76px;border-color:#e9edf3;background:#fff} .crm-dashboard .calendar-day:hover{background:#fbfcff} /* Payment chart */ .crm-dashboard .payment-metrics{gap:8px;padding:14px 14px 8px} .crm-dashboard .payment-metrics>div{padding:10px 11px;border:1px solid #e0e6ef;border-radius:9px;background:#fff!important;box-shadow:none!important} .crm-dashboard .payment-metrics span{color:#8693a5;font-size:9px}.crm-dashboard .payment-metrics strong{color:#21344f;font-size:16px}.crm-dashboard .payment-metrics small{font-size:9px} .crm-dashboard .payment-legend{padding:7px 14px 0;font-size:9px} .crm-dashboard .payment-chart-modern{height:250px;margin:4px 14px 14px;padding:14px 8px 0;border:1px solid #e6ebf2;border-radius:10px;background:#fbfcfe!important;box-shadow:none!important} .crm-dashboard .payment-bars-modern b.current{background:#6f8ed8!important;box-shadow:none!important}.crm-dashboard .payment-bars-modern b.previous{background:#dfe5ee!important} /* Donut / small analytics */ .crm-dashboard .dash-chart-card{min-height:0} .crm-dashboard .dash-donut-wrap{gap:12px;padding:14px} .crm-dashboard .dash-donut{width:126px;box-shadow:inset 0 0 0 1px rgba(28,44,70,.04)} .crm-dashboard .dash-donut:after{inset:27px;box-shadow:0 0 0 1px #edf1f5} .crm-dashboard .dash-donut b{color:#21344f;font-size:18px}.crm-dashboard .dash-donut small{color:#8c99aa;font-size:8.5px} .crm-dashboard .dash-chart-legend{gap:6px}.crm-dashboard .dash-chart-legend>span{font-size:9.5px}.crm-dashboard .dash-chart-legend small{background:#f3f6fa;color:#62738a} /* To-do / activity / team / goals */ .crm-dashboard .todo-group{padding:10px 13px}.crm-dashboard .todo-group h3{margin-bottom:4px;font-size:9.5px}.crm-dashboard .todo-row{gap:7px;padding:8px 0}.crm-dashboard .todo-row>a b{font-size:10.5px}.crm-dashboard .todo-row>a small{font-size:8.5px}.crm-dashboard .todo-actions a,.crm-dashboard .todo-actions button{width:23px;height:23px} .crm-dashboard .project-activity,.crm-dashboard .team-overview-list,.crm-dashboard .dash-activity-list{padding:6px 13px} .crm-dashboard .project-activity>a,.crm-dashboard .team-overview-list>a,.crm-dashboard .dash-activity-list>a{border-bottom-color:#edf1f5} .crm-dashboard .team-avatar{width:31px;height:31px;border-radius:8px;background:#eef3ff!important;color:#4965d7!important} .crm-dashboard .team-copy i,.crm-dashboard .goal-row>i{background:#edf1f5}.crm-dashboard .team-copy em,.crm-dashboard .goal-row>i>em{background:#6f8ed8!important} .crm-dashboard .goal-row{padding:11px 14px}.crm-dashboard .goal-row span{font-size:10.5px}.crm-dashboard .goal-row small{font-size:9px;color:#8996a8} /* Modal */ .crm-dashboard~.todo-modal-backdrop .todo-modal,.dashboard-todo-modal .todo-modal{border:1px solid #dce3ec;border-radius:12px;background:#fff;box-shadow:0 24px 60px rgba(15,23,42,.2)} .dashboard-todo-modal .todo-modal-head{min-height:54px;padding:0 16px;border-bottom:1px solid #e5eaf1;background:linear-gradient(90deg,#fbfcff,#f7f9ff)} .dashboard-todo-modal .todo-modal-head h2{color:#21314c;font-size:14px} .dashboard-todo-modal .todo-modal-body{padding:16px}.dashboard-todo-modal textarea{border:1px solid #cbd6e4;border-radius:7px!important;box-shadow:none!important} .dashboard-todo-modal textarea:focus{outline:3px solid #e7efff;border-color:#8ca7e8} .dashboard-todo-modal .todo-modal-foot{padding:12px 16px;border-top:1px solid #e5eaf1;background:#fbfcfe} .dashboard-todo-modal .todo-secondary,.dashboard-todo-modal .todo-save{min-height:34px;display:inline-flex;align-items:center;padding:0 12px;border-radius:7px;font-size:11px;font-weight:750} .dashboard-todo-modal .todo-secondary{border:1px solid #cfd9e5;background:#fff;color:#52647c}.dashboard-todo-modal .todo-save{border:1px solid #3157df;background:#3157df;color:#fff} /* Responsive */ @media(max-width:1200px){.crm-dashboard .dash-columns{grid-template-columns:minmax(0,1.4fr) minmax(275px,.82fr)}.crm-dashboard .overview-columns{gap:12px}} @media(max-width:1000px){.crm-dashboard .dash-columns{grid-template-columns:1fr}.crm-dashboard .dash-secondary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}.crm-dashboard .dash-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:760px){.crm-dashboard .dash-hero{align-items:flex-start;flex-direction:column}.crm-dashboard .dash-heading-actions{width:100%;justify-content:flex-start}.crm-dashboard .dash-command-bar{align-items:flex-start;flex-direction:column}.crm-dashboard .dash-command-actions{width:100%}.crm-dashboard .dash-command-actions a{flex:1;justify-content:center;min-width:115px}.crm-dashboard .dash-secondary{grid-template-columns:1fr}.crm-dashboard .overview-columns{grid-template-columns:1fr}.crm-dashboard .overview-column:not(:last-child){padding-right:0;border-right:0}.crm-dashboard .overview-totals{grid-template-columns:1fr}.crm-dashboard .dash-kpis{grid-template-columns:1fr}.crm-dashboard .dash-notice{align-items:flex-start}.crm-dashboard .dash-notice>a{margin-left:0}} @media(max-width:520px){.crm-dashboard .dash-hero{padding:16px}.crm-dashboard .dash-hero h1{font-size:21px}.crm-dashboard .dash-heading-actions{display:grid;grid-template-columns:1fr}.crm-dashboard .dash-date,.crm-dashboard .dash-options{justify-content:center}.crm-dashboard .dash-command-actions{display:grid;grid-template-columns:1fr 1fr}.crm-dashboard .dash-donut-wrap{grid-template-columns:1fr}.crm-dashboard .dash-donut{width:116px}} /* 2026-10-01 โ€” Dashboard hero contrast hardening */ body .crm-dashboard section.dash-heading.dash-hero{ background:linear-gradient(120deg,#ffffff 58%,#f3f7ff 100%)!important; border-color:#d8e2ee!important; } body .crm-dashboard section.dash-heading.dash-hero .dash-eyebrow{ color:#4f6f9f!important; -webkit-text-fill-color:#4f6f9f!important; opacity:1!important; text-shadow:none!important; background:none!important; } body .crm-dashboard section.dash-heading.dash-hero h1{ color:#17233a!important; -webkit-text-fill-color:#17233a!important; opacity:1!important; text-shadow:none!important; background:none!important; } body .crm-dashboard section.dash-heading.dash-hero p{ color:#66768c!important; -webkit-text-fill-color:#66768c!important; opacity:1!important; text-shadow:none!important; background:none!important; } body .crm-dashboard section.dash-heading.dash-hero .dash-date, body .crm-dashboard section.dash-heading.dash-hero .dash-options{ color:#344a63!important; -webkit-text-fill-color:#344a63!important; background:#fff!important; border-color:#cfd9e6!important; opacity:1!important; text-shadow:none!important; } body .crm-dashboard section.dash-heading.dash-hero .dash-date svg, body .crm-dashboard section.dash-heading.dash-hero .dash-options svg{ color:#5d7694!important; stroke:#5d7694!important; opacity:1!important; } /* 2026-10-04 โ€” Executive dashboard hierarchy */ .crm-dashboard .dash-section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin:17px 2px 8px}.crm-dashboard .dash-section-heading>div>span{display:block;margin-bottom:3px;color:#7a8798;font-size:8.5px;font-weight:850;letter-spacing:.12em;text-transform:uppercase}.crm-dashboard .dash-section-heading h2{margin:0;color:#1f3048;font-size:15px;letter-spacing:-.02em}.crm-dashboard .dash-section-heading>small{color:#8b97a7;font-size:9.5px;text-align:right}.crm-dashboard .dash-operations-heading{margin-top:15px} .crm-dashboard .dash-kpis-financial{gap:10px;margin-bottom:0}.crm-dashboard .dash-kpis-financial .dash-kpi{position:relative;min-height:116px;padding:14px 15px;border-radius:12px!important}.crm-dashboard .dash-kpis-financial .dash-kpi:before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:#dbe5f2}.crm-dashboard .dash-kpis-financial .dash-kpi-value{margin-top:11px}.crm-dashboard .dash-kpis-financial .dash-kpi-value strong{font-size:22px!important}.crm-dashboard .dash-kpi-context{position:absolute;left:15px;right:15px;bottom:12px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:9px;border-top:1px solid #edf1f5}.crm-dashboard .dash-kpi-context span,.crm-dashboard .dash-kpi-context b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px}.crm-dashboard .dash-kpi-context span{color:#8996a8;font-weight:600}.crm-dashboard .dash-kpi-context b{color:#5c6e85;font-weight:800}.crm-dashboard .dash-kpi-income:before{background:#32a672}.crm-dashboard .dash-kpi-income .dash-kpi-icon{background:#eaf9f1;color:#188356!important}.crm-dashboard .dash-kpi-receivables:before{background:#e7a538}.crm-dashboard .dash-kpi-receivables .dash-kpi-icon{background:#fff7e8;color:#a66b0e!important}.crm-dashboard .dash-kpi-expenses:before{background:#df6a74}.crm-dashboard .dash-kpi-expenses .dash-kpi-icon{background:#fff0f1;color:#b84a54!important}.crm-dashboard .dash-kpi-profit:before{background:#5378d8}.crm-dashboard .dash-kpi-profit .dash-kpi-icon{background:#eef3ff;color:#315fc5!important}.crm-dashboard .dash-kpi-profit.is-negative:before{background:#d75762}.crm-dashboard .dash-kpi-profit.is-negative .dash-kpi-value strong,.crm-dashboard .dash-kpi-profit.is-negative .dash-kpi-context b{color:#b63e48!important} .crm-dashboard .dash-operations-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:14px}.crm-dashboard .dash-operation-card{min-height:76px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:11px 12px;border:1px solid #dfe6ef;border-radius:11px;background:#fff;color:#2c3f58;text-decoration:none;box-shadow:0 4px 13px rgba(31,48,76,.035);transition:.16s ease}.crm-dashboard .dash-operation-card:hover{border-color:#c4d3e7;background:#fbfcff;box-shadow:0 7px 18px rgba(31,48,76,.055);transform:translateY(-1px)}.crm-dashboard .dash-operation-card>span:nth-child(2){min-width:0}.crm-dashboard .dash-operation-card small,.crm-dashboard .dash-operation-card strong,.crm-dashboard .dash-operation-card em{display:block}.crm-dashboard .dash-operation-card small{color:#7b899c;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}.crm-dashboard .dash-operation-card strong{margin-top:2px;color:#20344f;font-size:19px;line-height:1.05}.crm-dashboard .dash-operation-card em{margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#96a1b0;font-size:8.5px;font-style:normal}.crm-dashboard .dash-operation-card>svg{width:13px;height:13px;color:#a0acba}.crm-dashboard .dash-operation-icon{width:34px;height:34px;display:grid!important;place-items:center;border-radius:9px;background:#f1f5fb;color:#60738d}.crm-dashboard .dash-operation-icon svg{width:15px;height:15px}.crm-dashboard .dash-operation-icon.projects{background:#eef3ff;color:#315fc5}.crm-dashboard .dash-operation-icon.tasks{background:#f2f5f9;color:#5f7087}.crm-dashboard .dash-operation-icon.leads{background:#edf9f4;color:#27865f}.crm-dashboard .dash-operation-icon.tickets{background:#fff5e9;color:#a86c13} @media(max-width:1000px){.crm-dashboard .dash-operations-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.crm-dashboard .dash-section-heading{align-items:flex-start}.crm-dashboard .dash-section-heading>small{max-width:45%}} @media(max-width:620px){.crm-dashboard .dash-section-heading{align-items:flex-start;flex-direction:column;gap:3px;margin-top:15px}.crm-dashboard .dash-section-heading>small{max-width:none;text-align:left}.crm-dashboard .dash-kpis-financial{grid-template-columns:1fr!important}.crm-dashboard .dash-operations-grid{grid-template-columns:1fr 1fr}.crm-dashboard .dash-operation-card{grid-template-columns:auto minmax(0,1fr);min-height:72px}.crm-dashboard .dash-operation-card>svg{display:none}} @media(max-width:430px){.crm-dashboard .dash-operations-grid{grid-template-columns:1fr}} /* ============================================================ SECTION: ai.css ============================================================ */ /* NEXT AI dedicated workspace โ€” isolated from other CRM modules */ :root{ --nai-bg:#f5f7fb; --nai-card:#ffffff; --nai-card-2:#f8faff; --nai-ink:#18253a; --nai-muted:#75849a; --nai-line:#e2e8f0; --nai-line-strong:#d3dcea; --nai-primary:#3157df; --nai-primary-2:#4f46e5; --nai-success:#1f9b69; --nai-warning:#c07b14; --nai-danger:#bf4a55; --nai-shadow:0 10px 28px rgba(25,40,68,.07); } .next-ai-shell, .next-ai-shell *{box-sizing:border-box} .next-ai-shell{background:var(--nai-bg);overflow:hidden} .next-ai-shell .next-ai-app-shell{min-height:calc(100vh - 56px)} .next-ai-shell .next-ai-content{padding:14px!important;overflow:hidden!important;background:var(--nai-bg)!important} .next-ai-shell .next-ai-topbar-title{display:flex;align-items:center;gap:7px;color:#344862;font-size:12px;font-weight:800;white-space:nowrap} .next-ai-shell .next-ai-topbar-title svg{width:15px;height:15px;color:var(--nai-primary)} .next-ai-shell .next-ai-topbar-title small{padding-left:2px;color:#98a4b4;font-size:9px;font-weight:650} .next-ai-shell .next-ai-page{ width:100%; height:calc(100vh - 84px); min-height:620px; display:grid; grid-template-columns:248px minmax(0,1fr) 266px; gap:12px; color:var(--nai-ink); overflow:hidden; } .next-ai-shell .next-ai-page a{text-decoration:none} .next-ai-shell .ai-history-panel, .next-ai-shell .ai-chat-card, .next-ai-shell .ai-inspector-panel>section{ min-width:0; border:1px solid var(--nai-line); border-radius:14px; background:var(--nai-card); box-shadow:var(--nai-shadow); } /* LEFT SIDEBAR */ .next-ai-shell .ai-history-panel{display:flex;flex-direction:column;padding:12px;overflow:hidden} .next-ai-shell .ai-brand-block{display:flex;align-items:center;gap:10px;padding:3px 2px 12px;border-bottom:1px solid #eef2f6} .next-ai-shell .ai-brand-icon, .next-ai-shell .ai-agent-avatar, .next-ai-shell .ai-inspector-head>span{ display:grid;place-items:center;flex:none;color:#fff; background:linear-gradient(135deg,var(--nai-primary-2),#2563eb) } .next-ai-shell .ai-brand-icon{width:36px;height:36px;border-radius:11px} .next-ai-shell .ai-brand-icon svg{width:17px;height:17px} .next-ai-shell .ai-brand-block strong,.next-ai-shell .ai-brand-block small{display:block} .next-ai-shell .ai-brand-block strong{font-size:13px;line-height:1.2} .next-ai-shell .ai-brand-block small{margin-top:3px;color:#8e9aab;font-size:8px;font-weight:800;letter-spacing:.08em;text-transform:uppercase} .next-ai-shell .ai-new-chat, .next-ai-shell .ai-setup-provider{ min-height:38px;display:inline-flex;align-items:center;justify-content:center;gap:7px; padding:0 12px;border:0;border-radius:9px;background:#18253a;color:#fff!important; font-size:10px;font-weight:800;box-shadow:none } .next-ai-shell .ai-new-chat{width:100%;margin:12px 0} .next-ai-shell .ai-new-chat svg,.next-ai-shell .ai-setup-provider svg{width:14px;height:14px} .next-ai-shell .ai-new-chat:hover,.next-ai-shell .ai-setup-provider:hover{background:#243954} .next-ai-shell .ai-side-section-title{display:flex;align-items:center;justify-content:space-between;padding:7px 5px 5px;color:#8a96a7;font-size:8px;font-weight:850;letter-spacing:.09em;text-transform:uppercase} .next-ai-shell .ai-side-section-title small{padding:2px 6px;border-radius:99px;background:#eef2f7;color:#7f8b9b;font-size:8px} .next-ai-shell .ai-history-title{margin-top:8px;padding-top:12px;border-top:1px solid #eef2f6} .next-ai-shell .ai-agent-mini-list{display:flex;flex-direction:column;gap:3px;overflow:auto;max-height:260px;padding-right:2px} .next-ai-shell .ai-agent-mini-list>a{display:grid;grid-template-columns:30px minmax(0,1fr);gap:8px;align-items:center;padding:7px;border:1px solid transparent;border-radius:9px;color:#43556d} .next-ai-shell .ai-agent-mini-list>a>span{width:30px;height:30px;display:grid;place-items:center;border-radius:8px;background:#f0f4fb;color:#58719b} .next-ai-shell .ai-agent-mini-list svg{width:14px;height:14px} .next-ai-shell .ai-agent-mini-list strong,.next-ai-shell .ai-agent-mini-list small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .next-ai-shell .ai-agent-mini-list strong{font-size:10px} .next-ai-shell .ai-agent-mini-list small{margin-top:2px;color:#96a1af;font-size:8px} .next-ai-shell .ai-agent-mini-list>a:hover,.next-ai-shell .ai-agent-mini-list>a.active{border-color:#d8e2f3;background:#f4f7ff;color:#204a93} .next-ai-shell .ai-agent-mini-list>a.active>span{background:#e8efff;color:var(--nai-primary)} .next-ai-shell .ai-history-list{display:flex;flex-direction:column;gap:3px;min-height:0;overflow:auto;padding-right:2px} .next-ai-shell .ai-history-list>a{padding:8px;border-radius:8px;color:#43536a} .next-ai-shell .ai-history-list>a:hover,.next-ai-shell .ai-history-list>a.active{background:#f1f5fb} .next-ai-shell .ai-history-list span,.next-ai-shell .ai-history-list small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .next-ai-shell .ai-history-list span{font-size:9.5px;font-weight:700} .next-ai-shell .ai-history-list small{margin-top:3px;color:#98a3b1;font-size:7.5px} .next-ai-shell .ai-history-list>p{padding:9px;color:#98a3b1;font-size:9px} /* CENTER CHAT */ .next-ai-shell .ai-chat-card{display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;overflow:hidden} .next-ai-shell .ai-chat-header{min-height:72px;padding:12px 14px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--nai-line);background:linear-gradient(90deg,#fff,#f8faff)} .next-ai-shell .ai-chat-identity{display:flex;align-items:center;gap:10px;min-width:0} .next-ai-shell .ai-agent-avatar{width:40px;height:40px;border-radius:12px} .next-ai-shell .ai-agent-avatar svg{width:18px;height:18px} .next-ai-shell .ai-kicker{display:block;color:#6d7ed5;font-size:7.5px;font-weight:900;letter-spacing:.12em} .next-ai-shell .ai-chat-header h1{margin:2px 0 0;color:#1b2c45;font-size:17px;line-height:1.2;letter-spacing:-.02em} .next-ai-shell .ai-chat-header p{margin:3px 0 0;max-width:620px;color:#7b889b;font-size:9px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .next-ai-shell .ai-chat-actions{display:flex;align-items:center;gap:6px;flex:none} .next-ai-shell .ai-chat-actions>a,.next-ai-shell .ai-chat-actions button{min-height:32px;display:inline-flex;align-items:center;gap:6px;padding:0 9px;border:1px solid #d8e0eb;border-radius:8px;background:#fff;color:#53657d;font-size:9px;font-weight:750;cursor:pointer} .next-ai-shell .ai-chat-actions svg{width:13px;height:13px} .next-ai-shell .ai-chat-actions .ai-delete-chat{width:32px;padding:0;justify-content:center;color:var(--nai-danger)} .next-ai-shell .ai-control-bar{display:grid;grid-template-columns:minmax(150px,.75fr) minmax(220px,1.2fr) auto;gap:9px;align-items:end;padding:9px 12px;border-bottom:1px solid #e8edf3;background:#fbfcfe} .next-ai-shell .ai-control-bar label>span{display:block;margin-bottom:4px;color:#8793a4;font-size:7.5px;font-weight:850;letter-spacing:.06em;text-transform:uppercase} .next-ai-shell .ai-control-bar select{width:100%;height:34px;border:1px solid #d1dbe8;border-radius:8px;background:#fff;padding:0 9px;color:#40526a;font-size:9px;outline:none} .next-ai-shell .ai-control-bar select:focus{border-color:#9eb2e4;box-shadow:0 0 0 3px #edf2ff} .next-ai-shell .ai-provider-health{min-height:34px;display:flex;align-items:center;gap:8px;padding:0 10px;border:1px solid #e0e6ef;border-radius:8px;background:#fff;white-space:nowrap} .next-ai-shell .ai-provider-health>span{width:7px;height:7px;border-radius:50%;background:#c6ced8;flex:none} .next-ai-shell .ai-provider-health>span.online{background:#28a36d;box-shadow:0 0 0 3px #e8f7ef} .next-ai-shell .ai-provider-health>span.offline{background:#d85b65} .next-ai-shell .ai-provider-health strong,.next-ai-shell .ai-provider-health small{display:block} .next-ai-shell .ai-provider-health strong{font-size:8.5px} .next-ai-shell .ai-provider-health small{margin-top:1px;color:#96a1af;font-size:7.5px} .next-ai-shell .ai-messages{min-height:0;overflow:auto;display:flex;flex-direction:column;gap:10px;padding:18px;background:#f7f9fc;scroll-behavior:smooth} .next-ai-shell .ai-message{max-width:min(78%,760px);padding:10px 12px;border-radius:12px;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.5;font-size:10px} .next-ai-shell .ai-message.user{align-self:flex-end;background:#1b2a41;color:#fff;border-bottom-right-radius:4px} .next-ai-shell .ai-message.assistant{align-self:flex-start;background:#fff;border:1px solid #dde5ef;color:#273951;border-bottom-left-radius:4px;box-shadow:0 4px 12px rgba(25,39,63,.035)} .next-ai-shell .ai-message-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:5px} .next-ai-shell .ai-message-meta strong{font-size:8.5px} .next-ai-shell .ai-message-meta small{color:#97a2b1;font-size:7.5px} .next-ai-shell .ai-message.user .ai-message-meta small{color:#c8d2e0} .next-ai-shell .ai-empty{margin:auto;max-width:650px;padding:24px;text-align:center;color:#6f7e92} .next-ai-shell .ai-empty>span{width:58px;height:58px;display:grid;place-items:center;margin:0 auto 12px;border-radius:17px;background:linear-gradient(135deg,#eef1ff,#e7f4ff);color:var(--nai-primary)} .next-ai-shell .ai-empty>span svg{width:24px;height:24px} .next-ai-shell .ai-empty h2{margin:0;color:#22344e;font-size:19px} .next-ai-shell .ai-empty p{margin:6px auto 15px;max-width:460px;font-size:10px;line-height:1.5} .next-ai-shell .ai-starter-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px} .next-ai-shell .ai-starter-grid button{min-height:54px;padding:9px;border:1px solid #dbe3ee;border-radius:9px;background:#fff;color:#53657c;font-size:9px;line-height:1.35;cursor:pointer} .next-ai-shell .ai-starter-grid button:hover{border-color:#becde4;background:#f7f9ff;color:var(--nai-primary)} .next-ai-shell .ai-composer{padding:10px 12px;border-top:1px solid var(--nai-line);background:#fff} .next-ai-shell .ai-composer-box{border:1px solid #cbd6e4;border-radius:11px;background:#fff;overflow:hidden;box-shadow:0 4px 16px rgba(31,48,76,.04)} .next-ai-shell .ai-composer textarea{display:block;width:100%;min-height:64px;max-height:170px;resize:vertical;border:0;outline:0;padding:11px 12px 5px;background:transparent;color:#26384f;font:inherit;font-size:10px;line-height:1.45} .next-ai-shell .ai-composer-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:5px 7px 7px 11px} .next-ai-shell .ai-composer-foot small{display:flex;align-items:center;gap:5px;color:#8996a7;font-size:7.5px} .next-ai-shell .ai-composer-foot small svg{width:11px;height:11px} .next-ai-shell .ai-composer button{min-height:32px;display:inline-flex;align-items:center;gap:6px;padding:0 11px;border:0;border-radius:8px;background:#18253a;color:#fff;font-size:9px;font-weight:800;cursor:pointer} .next-ai-shell .ai-composer button svg{width:12px;height:12px} .next-ai-shell .ai-composer button:disabled{opacity:.55;cursor:wait} /* RIGHT INSPECTOR */ .next-ai-shell .ai-inspector-panel{min-width:0;display:flex;flex-direction:column;gap:10px;overflow:auto;padding-right:1px} .next-ai-shell .ai-inspector-panel>section{padding:13px} .next-ai-shell .ai-inspector-head{display:flex;align-items:center;gap:9px} .next-ai-shell .ai-inspector-head>span{width:34px;height:34px;border-radius:10px} .next-ai-shell .ai-inspector-head svg{width:15px;height:15px} .next-ai-shell .ai-inspector-head small,.next-ai-shell .ai-inspector-head strong{display:block} .next-ai-shell .ai-inspector-head small{color:#8d99a9;font-size:7px;font-weight:900;letter-spacing:.09em} .next-ai-shell .ai-inspector-head strong{margin-top:2px;font-size:10px} .next-ai-shell .ai-inspector-panel h3{margin:0 0 8px;color:#31435b;font-size:10px} .next-ai-shell .ai-inspector-panel>section>p{margin:8px 0 0;color:#7c899b;font-size:8.5px;line-height:1.5} .next-ai-shell .ai-context-chips{display:flex;flex-wrap:wrap;gap:5px} .next-ai-shell .ai-context-chips span{padding:5px 7px;border-radius:7px;background:#f0f4fa;color:#526986;font-size:7.5px;font-weight:750} .next-ai-shell .ai-inspector-note{font-size:8.5px!important} .next-ai-shell .ai-readonly-card{display:flex;gap:9px;background:linear-gradient(135deg,#f6fbf8,#fff)!important;border-color:#d7ede1!important} .next-ai-shell .ai-readonly-card>svg{width:18px;height:18px;color:#269263;flex:none} .next-ai-shell .ai-readonly-card strong{font-size:9.5px} .next-ai-shell .ai-readonly-card p{margin:4px 0 0!important} /* SETTINGS PAGE โ€” retain a clean isolated presentation */ .next-ai-shell .ai-settings-page{display:flex;flex-direction:column;gap:14px;color:var(--nai-ink)} .next-ai-shell .ai-settings-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:18px} .next-ai-shell .ai-settings-card{padding:17px;border:1px solid var(--nai-line);border-radius:14px;background:#fff;box-shadow:var(--nai-shadow)} /* Responsive */ @media(max-width:1320px){ .next-ai-shell .next-ai-page{grid-template-columns:230px minmax(0,1fr)} .next-ai-shell .ai-inspector-panel{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible} .next-ai-shell .next-ai-page{overflow:auto;height:calc(100vh - 84px)} } @media(max-width:1000px){ .next-ai-shell{overflow:auto} .next-ai-shell .next-ai-content{overflow:auto!important} .next-ai-shell .next-ai-page{height:auto;min-height:calc(100vh - 84px);grid-template-columns:1fr} .next-ai-shell .ai-history-panel{max-height:none;order:2} .next-ai-shell .ai-chat-card{min-height:650px;order:1} .next-ai-shell .ai-inspector-panel{order:3;grid-template-columns:1fr 1fr} .next-ai-shell .ai-control-bar{grid-template-columns:1fr 1fr} .next-ai-shell .ai-provider-health{grid-column:1/-1} } @media(max-width:680px){ .next-ai-shell .next-ai-content{padding:8px!important} .next-ai-shell .next-ai-topbar-title small{display:none} .next-ai-shell .next-ai-page{gap:8px} .next-ai-shell .ai-chat-header{align-items:flex-start;flex-direction:column} .next-ai-shell .ai-chat-actions{width:100%;justify-content:flex-end} .next-ai-shell .ai-control-bar{grid-template-columns:1fr} .next-ai-shell .ai-provider-health{grid-column:auto} .next-ai-shell .ai-messages{padding:12px} .next-ai-shell .ai-message{max-width:92%} .next-ai-shell .ai-starter-grid{grid-template-columns:1fr} .next-ai-shell .ai-inspector-panel{grid-template-columns:1fr} } /* Refined NEXT AI workspace */ .next-ai-shell{--nai-bg:#f4f6fb;--nai-ink:#202b43;--nai-primary:#6356e5;--nai-line:#e7eaf2} .next-ai-shell .next-ai-content{padding:24px!important} .next-ai-shell .next-ai-page{height:calc(100dvh - 106px);min-height:640px;grid-template-columns:220px minmax(0,1fr) 228px;gap:18px} .next-ai-shell .ai-history-panel{background:#f9faff;box-shadow:none;padding:16px;border-radius:18px} .next-ai-shell .ai-brand-block strong{font-size:17px;letter-spacing:-.5px} .next-ai-shell .ai-brand-block small{font-size:10px;letter-spacing:0;text-transform:none} .next-ai-shell .ai-new-chat{font-size:12px;min-height:42px;border-radius:10px;background:#6356e5} .next-ai-shell .ai-side-section-title{font-size:11px;letter-spacing:.04em;margin-top:12px} .next-ai-shell .ai-agent-mini-list a{padding:10px 8px;border-radius:10px} .next-ai-shell .ai-agent-mini-list strong{font-size:12px} .next-ai-shell .ai-agent-mini-list small{font-size:10px;line-height:1.5} .next-ai-shell .ai-agent-mini-list a.active{background:#edeaff;border-color:#d9d3ff} .next-ai-shell .ai-history-list span{font-size:12px} .next-ai-shell .ai-history-list small,.next-ai-shell .ai-history-list>p{font-size:10px} .next-ai-shell .ai-chat-card{border-radius:20px;box-shadow:0 8px 30px #23396308} .next-ai-shell .ai-chat-header{padding:20px;min-height:92px;background:#fff} .next-ai-shell .ai-chat-header h1{font-size:20px;letter-spacing:-.5px} .next-ai-shell .ai-chat-header p{font-size:12px;white-space:normal;line-height:1.5} .next-ai-shell .ai-kicker{font-size:9px;color:#8274c9} .next-ai-shell .ai-chat-actions>a,.next-ai-shell .ai-chat-actions button{font-size:11px;min-height:36px} .next-ai-shell .ai-control-bar{padding:12px 18px;grid-template-columns:1fr 1.3fr;background:#fafbff} .next-ai-shell .ai-control-bar label>span{font-size:9px} .next-ai-shell .ai-control-bar select{height:38px;font-size:12px} .next-ai-shell .ai-provider-health{grid-column:1/-1;border:0;background:transparent;padding:0;min-height:22px} .next-ai-shell .ai-provider-health strong{font-size:10px;font-weight:600} .next-ai-shell .ai-provider-health small{display:none} .next-ai-shell .ai-messages{background:radial-gradient(ellipse at 50% 10%,#f3f0ff 0,transparent 65%),#fff;padding:24px;gap:18px} .next-ai-shell .ai-empty{padding:24px 0;max-width:560px;width:100%} .next-ai-shell .ai-empty>span{width:64px;height:64px;border-radius:20px;background:#eeeaff;box-shadow:0 0 0 8px #f7f5ff;margin-bottom:24px} .next-ai-shell .ai-welcome-label{font-size:9px;font-weight:700;letter-spacing:.12em;color:#9387b7;margin-bottom:10px} .next-ai-shell .ai-empty h2{font-size:27px;letter-spacing:-1px;line-height:1.2} .next-ai-shell .ai-empty p{font-size:13px;line-height:1.7;margin:12px auto 25px} .next-ai-shell .ai-starter-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .next-ai-shell .ai-starter-grid button{font-size:12px;text-align:left;padding:16px;min-height:72px;line-height:1.6;border-radius:12px;transition:background .15s,transform .15s} .next-ai-shell .ai-starter-grid button:hover{background:#f6f3ff;transform:translateY(-2px);border-color:#c8bcfa} .next-ai-shell .ai-message{font-size:14px;line-height:1.8;padding:15px 18px;max-width:90%;border-radius:16px} .next-ai-shell .ai-message.user{background:#6356e5} .next-ai-shell .ai-message-meta strong{font-size:11px}.next-ai-shell .ai-message-meta small{font-size:10px} .next-ai-shell .ai-composer{padding:16px 20px 20px;border-top:0} .next-ai-shell .ai-composer-box{border-radius:16px;border-color:#ddd9ed;box-shadow:0 4px 18px #5647a80a} .next-ai-shell .ai-composer-box:focus-within{border-color:#9987e5;box-shadow:0 0 0 3px #f2eeff} .next-ai-shell .ai-composer textarea{font-size:14px;padding:16px;min-height:80px} .next-ai-shell .ai-composer-foot small{font-size:10px;line-height:1.5} .next-ai-shell .ai-composer button{font-size:12px;background:#6356e5;min-height:36px} .next-ai-shell .ai-inspector-panel>section{padding:18px;border-radius:16px;box-shadow:none} .next-ai-shell .ai-inspector-head strong,.next-ai-shell .ai-inspector-panel h3{font-size:13px} .next-ai-shell .ai-inspector-head small{font-size:8px} .next-ai-shell .ai-inspector-panel>section>p,.next-ai-shell .ai-inspector-note{font-size:11px!important;line-height:1.8} .next-ai-shell .ai-context-chips span{font-size:10px;background:#f2efff;color:#7767ac} .next-ai-shell .ai-readonly-card strong{font-size:12px} .next-ai-shell .ai-pending{color:#8775b0;font-style:italic} .next-ai-shell a:focus-visible,.next-ai-shell button:focus-visible{outline:3px solid #a998e9;outline-offset:3px} .next-ai-shell:has(.ai-settings-page){overflow:auto}.next-ai-shell:has(.ai-settings-page) .next-ai-content{overflow:visible!important} @media(max-width:1450px){.next-ai-shell .next-ai-page{grid-template-columns:210px minmax(0,1fr)}.next-ai-shell .ai-inspector-panel{display:none}} @media(max-width:1050px){.next-ai-shell .next-ai-content{padding:14px!important}.next-ai-shell .next-ai-page{grid-template-columns:1fr;height:auto;min-height:0;overflow:visible}.next-ai-shell .ai-chat-card{min-height:750px}.next-ai-shell .ai-messages{max-height:650px}.next-ai-shell .ai-history-panel{order:2}.next-ai-shell .ai-agent-mini-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:600px){.next-ai-shell .next-ai-content{padding:8px!important}.next-ai-shell .ai-chat-header{padding:16px}.next-ai-shell .ai-empty h2{font-size:23px}.next-ai-shell .ai-starter-grid{grid-template-columns:1fr}.next-ai-shell .ai-control-bar{grid-template-columns:1fr}.next-ai-shell .ai-messages{padding:16px}.next-ai-shell .ai-composer{padding:12px}.next-ai-shell .ai-composer-foot small{max-width:70%;font-size:9px}.next-ai-shell .ai-agent-mini-list{grid-template-columns:1fr}} /* ============================================================ SECTION: announcements.css ============================================================ */ .announce-page,.announce-detail{width:100%;color:#2c3e50}.announce-shell{background:#fff;border:1px solid #e2e7ed;border-radius:6px;overflow:hidden}.announce-head{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-bottom:1px solid #e7ebf0}.announce-head h1{margin:0;font-size:18px;font-weight:500}.announce-btn,.announce-primary,.announce-secondary{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 11px;border:1px solid #dbe2ea;border-radius:6px;background:#fff;color:#40546a;font:inherit;cursor:pointer}.announce-btn svg{width:15px}.announce-toolbar{display:flex;justify-content:space-between;padding:12px 16px;border-bottom:1px solid #edf0f4}.announce-search{display:flex;align-items:center;width:230px;border:1px solid #d9e0e8;border-radius:6px;background:#fff}.announce-search input{flex:1;border:0;outline:0;padding:8px 10px}.announce-search svg{width:16px;margin-right:8px;color:#99a5b2}.announce-table{width:100%;border-collapse:collapse}.announce-table th,.announce-table td{padding:13px 14px;border-bottom:1px solid #edf0f4;text-align:left;font-size:13px}.announce-table th{font-weight:600;background:#fff}.announce-table td>a{color:#1f69b3;text-decoration:none}.announce-avatar{width:28px;height:28px;display:inline-grid;place-items:center;margin-right:8px;border-radius:50%;background:#e7edf4;color:#52677e;font-size:11px;font-weight:700}.announce-status{display:inline-block;padding:3px 7px;border-radius:5px;font-size:11px}.announce-status.published{background:#e8f7ee;color:#16834b}.announce-status.draft{background:#eef1f5;color:#69788a}.announce-actions{white-space:nowrap}.announce-actions button{width:28px;height:28px;display:inline-grid;place-items:center;border:1px solid #e0e5eb;border-radius:50%;background:#fff;color:#7f8d9e;cursor:pointer}.announce-actions form{display:inline}.announce-actions svg{width:14px}.announce-empty{text-align:center;color:#8c99a7;padding:28px!important}.announce-footer{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;color:#8b98a7;font-size:12px}.announce-footer nav>div:first-child{display:none}.announce-footer nav>div:last-child{display:flex;gap:4px}.announce-footer nav a,.announce-footer nav span{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:30px;border:1px solid #dce3ea;border-radius:5px;background:#fff;color:#56697e;text-decoration:none}.announce-modal{position:fixed;z-index:1100;inset:0;display:none;align-items:center;justify-content:center;padding:18px;background:#0f172a80}.announce-modal.is-open{display:flex}.announce-modal-card{width:min(680px,calc(100vw - 30px));background:#fff;border-radius:7px;box-shadow:0 20px 60px #0f172a55}.announce-modal-card>header{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;border-bottom:1px solid #e5eaf0}.announce-modal-card>header h2{margin:0;font-size:17px;font-weight:500}.announce-modal-card>header button{border:0;background:none;color:#7c8998;cursor:pointer}.announce-modal-card>header svg{width:18px}.announce-form-body{padding:18px 20px}.announce-form-body>label,.announce-grid label{display:grid;gap:6px;margin-bottom:14px;font-size:13px;color:#526579}.announce-form-body input,.announce-form-body textarea,.announce-form-body select{box-sizing:border-box;width:100%;padding:9px 10px;border:1px solid #dce3ea;border-radius:5px;background:#f9fafb;font:inherit;color:#33475c}.announce-form-body textarea{min-height:140px;resize:vertical}.announce-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.announce-modal-card footer{display:flex;justify-content:flex-end;gap:8px;padding:12px 20px;border-top:1px solid #e7ebf0}.announce-primary{background:#5d8ef0;border-color:#5d8ef0;color:#fff}.announce-detail{max-width:900px;margin:0 auto}.announce-back{display:block;margin:5px 0 10px;text-align:right;color:#2d70b3;text-decoration:none}.announce-detail-card{padding:26px;background:#fff;border:1px solid #e4e8ed;border-radius:6px}.announce-detail-card h1{margin:0 0 8px;font-size:30px;font-weight:400}.announce-meta{margin:0 0 15px;color:#95a1ae;font-size:13px}.announce-meta span{color:#2d70b3}.announce-body{font-size:15px;line-height:1.7;color:#405368}.announce-detail-card img{display:block;width:100%;margin-top:14px;border-radius:2px}.announce-table-wrap{overflow:auto}@media(max-width:700px){.announce-grid{grid-template-columns:1fr}.announce-head{align-items:flex-start;gap:10px;flex-direction:column}.announce-search{width:100%}.announce-table{min-width:760px}.announce-detail-card{padding:18px}.announce-detail-card h1{font-size:24px}} /* ============================================================ SECTION: client-detail.css ============================================================ */ .client-shell{display:grid;grid-template-columns:255px minmax(0,1fr);gap:25px;align-items:start;color:#233044}.client-nav h1{font-size:20px;margin:2px 0 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.client-nav a{height:38px;display:flex;align-items:center;gap:14px;padding:0 10px;border-radius:6px;color:#273449;text-decoration:none;font-size:16px}.client-nav a:hover,.client-nav a.active{background:#fff;color:#1556ed}.client-nav svg{width:17px;height:17px;color:#94a1b5}.client-nav a.active svg{color:#1556ed}.client-nav a span{flex:1}.client-nav a small{font-size:14px}.client-main{min-width:0}.client-main h2{font-size:20px;margin:2px 0 12px}.client-card{background:#fff;border:1px solid #dce3ee;border-radius:7px;box-shadow:0 2px 4px #1b2b401c;padding:24px;margin-bottom:20px}.client-tabs{display:flex;gap:4px;border-bottom:1px solid #dce3ee;margin:-24px -24px 24px;padding:0 24px}.client-tabs a{padding:16px 13px;text-decoration:none;color:#233044;font-size:16px}.client-tabs a.active{border-bottom:1px solid #233044}.client-profile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 28px}.client-profile-grid div{display:flex;flex-direction:column;gap:6px}.client-profile-grid small{font-size:15px;color:#6f7f92}.client-profile-grid strong{font-size:16px;font-weight:500;white-space:pre-wrap}.client-addresses{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:24px;border-top:1px solid #e2e7ef;padding-top:20px}.client-addresses h3{font-size:17px}.client-addresses p{font-size:16px;line-height:1.6}.client-actions{display:flex;gap:8px;margin-bottom:16px}.client-profile-grid+.client-actions,.client-addresses+.client-actions{justify-content:flex-end;margin-top:20px;margin-bottom:0}.client-primary,.client-add summary{display:inline-flex;align-items:center;background:#202d40;color:white;border:0;border-radius:7px;padding:9px 12px;text-decoration:none;font-size:15px;font-weight:600;cursor:pointer}.client-add summary{width:max-content;list-style:none;margin-bottom:16px}.client-add form{display:flex;flex-direction:column;gap:12px;max-width:500px;margin-bottom:20px}.client-add label,.client-map-form label{display:flex;flex-direction:column;gap:6px;font-size:15px;font-weight:600}.client-add input,.client-add textarea,.client-map-form input,.client-toolbar input{border:1px solid #ccd6e4;border-radius:6px;padding:8px 10px;color:#233044;font:inherit}.client-add label:has(input[type=checkbox]){flex-direction:row}.client-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;color:#758399;font-size:15px}.client-toolbar input{width:220px}.client-table-wrap{overflow-x:auto}.client-table-wrap table{border-collapse:collapse;width:100%;font-size:16px}.client-table-wrap th{text-align:left;background:#f8faff;border:1px solid #e3e8f1;font-weight:500;padding:11px 10px;white-space:nowrap}.client-table-wrap td{border-bottom:1px solid #e8edf4;padding:13px 10px;vertical-align:top;white-space:nowrap}.client-table-wrap td a,.client-map-link a{color:#1556ed;text-decoration:none}.client-table-wrap td a:hover{text-decoration:underline}.client-table-wrap td[colspan]{color:#64748b}.client-muted{display:block;color:#7c899c;margin-top:5px}.client-status{border:1px solid #c4d6fc;color:#1556ed;border-radius:6px;padding:3px 7px}.client-pagination{color:#6d7c90;font-size:15px;margin-top:20px}.client-delete{background:none;border:0;color:#bc3030;cursor:pointer}.client-map-form{display:flex;gap:24px;align-items:end}.client-map-form label{flex:1}.client-map-form button{margin-bottom:0}.client-notice{background:#eff6ff;padding:15px;border-left:3px solid #2a9eea;color:#225eaa}.client-statement-head{display:flex;justify-content:space-between;text-align:right;padding:10px 0 25px;border-bottom:1px solid #e4e9f0}.client-statement-summary{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:25px 0 35px;font-size:16px;line-height:1.6}.client-statement-summary>div:last-child div{display:flex;justify-content:space-between;border-bottom:1px solid #e7ebf2;padding:4px 0}@media(max-width:950px){.client-shell{grid-template-columns:1fr}.client-nav{display:flex;flex-wrap:wrap;gap:3px}.client-nav h1{width:100%}.client-nav a{width:auto}.client-nav a span{display:none}}@media(max-width:640px){.client-profile-grid,.client-addresses,.client-statement-summary{grid-template-columns:1fr}.client-map-form{flex-direction:column;align-items:stretch}.client-toolbar input{width:140px}} .client-statement{padding:24px}.client-statement-toolbar{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}.client-statement-period{display:flex;gap:8px;flex-wrap:wrap}.client-statement-period select,.client-statement-period input,.client-statement-period button{height:35px;border:1px solid #cbd5e1;border-radius:6px;background:#fff;color:#24334a;padding:0 10px;font:inherit}.client-statement-period select{min-width:280px}.client-statement-period button{cursor:pointer}.client-statement-tools{display:flex;gap:8px}.client-statement-tools button,.client-statement-tools a{display:grid;place-items:center;width:36px;height:36px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;color:#24334a;cursor:pointer}.client-statement-tools button:disabled{opacity:.45;cursor:not-allowed}.client-statement-tools svg{width:16px;height:16px}.client-statement-company{text-align:right;min-height:115px;line-height:1.4;font-size:14px;color:#111827}.client-statement-overview{display:grid;grid-template-columns:1fr 40%;gap:35px;border-top:1px solid #e4e9f0;padding-top:20px;min-height:235px}.client-statement-overview address{font-style:normal;line-height:1.45;font-size:14px}.client-statement-account h3{margin:0;text-align:right;font-size:18px}.client-statement-account p{margin:0 0 18px;text-align:right;color:#68778b;font-size:13px}.client-statement-account dl{margin:0;padding-top:17px;border-top:1px solid #e4e9f0}.client-statement-account dl div{display:flex;justify-content:space-between;gap:12px;padding:5px;font-size:14px}.client-statement-account dt,.client-statement-account dd{margin:0}.client-statement-account dl .total{border-top:1px solid #e4e9f0;font-weight:600}.client-statement-caption{text-align:center;font-size:14px;margin:8px 0 30px}.client-statement-table table{font-size:14px}.client-statement-table th,.client-statement-table td{border:1px solid #e1e7f0;padding:10px}.client-statement-table th{background:#fff;color:#17263d}.client-statement-table td:nth-child(n+3),.client-statement-table th:nth-child(n+3){text-align:right}.client-statement-table tbody tr:nth-child(odd){background:#fafcff}.client-statement-table .client-statement-balance{font-weight:600;background:#fff}.client-statement-table .client-statement-balance td:first-child{text-align:right}@media(max-width:750px){.client-statement-overview{grid-template-columns:1fr}.client-statement-toolbar{flex-wrap:wrap}.client-statement-period select{min-width:200px}}@media print{.customer-topbar,.customer-sidebar,.client-nav,.client-main>h2,.client-statement-toolbar{display:none!important}.customer-app,.customer-content,.client-shell{display:block!important;padding:0!important;margin:0!important}.client-card.client-statement{border:0;box-shadow:none;margin:0;padding:0}.client-statement-table{overflow:visible}.client-statement-table table{min-width:0}} .client-statement-custom{display:flex;gap:8px;flex-wrap:wrap}.client-statement-custom[hidden]{display:none} .client-task-card{padding:24px}.client-task-actions{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.client-task-filter-button{display:inline-flex;align-items:center;gap:5px;padding:8px 10px;border:1px solid #cbd5e1;border-radius:7px;background:#fff;color:#314158;cursor:pointer}.client-task-filter-button svg{width:15px;height:15px}.client-task-relations{border-bottom:1px solid #e1e7ef;padding-bottom:19px;font-size:14px}.client-task-relations strong{display:block;margin-bottom:9px}.client-task-relations>div{display:flex;gap:14px;flex-wrap:wrap}.client-task-relations label{display:flex;align-items:center;gap:5px;font-weight:600;cursor:pointer}.client-task-relations input{width:17px;height:17px;accent-color:#2563eb}.client-task-extra{display:flex;gap:12px;align-items:end;padding:14px 0}.client-task-extra[hidden]{display:none}.client-task-extra label{display:grid;gap:5px;font-size:13px}.client-task-extra select,.client-task-extra button{height:33px;border:1px solid #cbd5e1;border-radius:5px;background:#fff;color:#334155;padding:0 8px}.client-task-toolbar{display:flex;justify-content:space-between;align-items:center;margin:19px 0 12px}.client-task-toolbar>div,.client-task-toolbar>label{display:flex;align-items:center}.client-task-toolbar select,.client-task-toolbar a,.client-task-toolbar button,.client-task-toolbar label{height:32px;border:1px solid #cbd5e1;border-radius:5px;background:#fff;color:#536278;padding:0 10px;font-size:13px}.client-task-toolbar a{display:grid;place-items:center;text-decoration:none}.client-task-toolbar button{cursor:pointer}.client-task-toolbar svg{width:16px;height:16px}.client-task-toolbar label{padding:0 8px}.client-task-toolbar input{width:185px;border:0;outline:0;padding:0 8px;font:inherit}.client-task-table{min-width:960px}.client-task-table th,.client-task-table td{padding:10px;border:1px solid #e6ebf1;font-size:14px}.client-task-table th{background:#f8faff}.client-task-table .task-detail-link{font-weight:500}.client-task-tag{display:inline-block;margin-right:4px;padding:3px 6px;border-radius:3px;background:#f0f2f5;font-style:normal;font-size:12px}.client-task-footer{display:flex;justify-content:space-between;align-items:center;margin-top:19px;color:#68778b;font-size:13px}.client-task-footer>div{display:flex;align-items:center;gap:12px}.client-task-footer button{border:0;background:none;color:#68778b;cursor:pointer}.client-task-footer button:disabled{opacity:.4;cursor:not-allowed}#client-task-page{padding:5px 10px;border-radius:5px;background:#e9edf3;color:#172033} .client-contact-name{min-height:43px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.client-contact-row-actions{display:flex;align-items:center;gap:5px;min-height:18px;margin-top:5px;opacity:0;visibility:hidden;transition:opacity .15s;color:#9aa5b4;font-size:13px}.client-contact-name:hover .client-contact-row-actions,.client-contact-name:focus-within .client-contact-row-actions{opacity:1;visibility:visible}.client-contact-row-actions a{border:0;background:none;padding:0;color:#3374d4!important;font:inherit;cursor:pointer}.client-contact-row-actions button{border:0;background:none;padding:0;color:inherit!important;font:inherit;cursor:pointer}.client-contact-row-actions form{display:inline;margin:0}.client-contact-row-actions a:hover{color:#3374d4!important;text-decoration:underline}.client-contact-row-actions button:hover{color:inherit!important;text-decoration:underline} .client-main:has(.client-overview-hero)>h2{display:none}.client-overview-hero{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:25px 27px;margin-bottom:14px;border:1px solid #dce4ef;border-radius:12px;background:linear-gradient(135deg,#fff 55%,#f2f7ff);box-shadow:0 5px 18px #1e293b0b}.client-overview-identity{display:flex;align-items:center;gap:17px;min-width:0}.client-overview-avatar{width:62px;height:62px;flex:none;display:grid;place-items:center;border-radius:17px;background:linear-gradient(145deg,#1e5ed7,#3989f5);color:#fff;font-size:21px;font-weight:800;box-shadow:0 8px 18px #2666d833}.client-overview-title{display:flex;align-items:center;gap:10px}.client-overview-title h2{display:block!important;margin:0!important;font-size:24px!important;letter-spacing:-.45px}.client-overview-title+.client-overview-identity{}.client-overview-state{display:inline-flex;padding:4px 8px;border-radius:999px;background:#eef2f7;color:#55657b;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px}.client-overview-state.active{background:#e9f9f0;color:#14834a}.client-overview-identity p{margin:5px 0 9px;color:#75849a;font-size:13px}.client-overview-links{display:flex;align-items:center;gap:15px;flex-wrap:wrap}.client-overview-links a,.client-overview-links span{display:flex;align-items:center;gap:5px;color:#50627a;font-size:13px}.client-overview-links svg{width:14px;height:14px;color:#3478df}.client-overview-actions{display:flex;align-items:center;gap:8px;flex:none}.client-overview-actions a{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 12px}.client-overview-actions svg{width:15px}.client-overview-secondary{border:1px solid #cfdae8;border-radius:7px;background:#fff;color:#293a50;font-weight:600;font-size:14px}.client-overview-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:14px}.client-overview-stats>a{position:relative;display:flex;align-items:center;gap:12px;min-width:0;padding:17px;border:1px solid #dce4ef;border-radius:10px;background:#fff;box-shadow:0 3px 10px #1e293b08;color:#24344b}.client-overview-stats>a:hover{border-color:#a8c6f6;transform:translateY(-1px)}.client-overview-stats>a>span{width:39px;height:39px;flex:none;display:grid;place-items:center;border-radius:10px;background:#edf4ff;color:#286bd8}.client-overview-stats>a>span.violet{background:#f3efff;color:#7451d6}.client-overview-stats>a>span.green{background:#eaf9f1;color:#15945a}.client-overview-stats>a>span.orange{background:#fff4e7;color:#d57b16}.client-overview-stats svg{width:19px}.client-overview-stats strong,.client-overview-stats small{display:block}.client-overview-stats strong{font-size:18px;line-height:1.1}.client-overview-stats small{margin-top:4px;color:#77869a;font-size:12px}.client-overview-stats em{margin-left:auto;color:#8b98aa;font-size:11px;font-style:normal;white-space:nowrap}.client-overview-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(330px,.88fr);gap:14px}.client-overview-panel{margin:0;padding:0;border:1px solid #dce4ef;border-radius:10px;background:#fff;box-shadow:0 3px 12px #1e293b08;overflow:hidden}.client-overview-panel>header{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid #e8edf4}.client-overview-panel>header h3{margin:0 0 3px;font-size:15px}.client-overview-panel>header p{margin:0;color:#8a97a8;font-size:12px}.client-overview-panel>header>a{color:#2f71dc;font-size:12px;font-weight:600}.client-overview-details dl{display:grid;grid-template-columns:1fr 1fr;margin:0;padding:9px 20px 18px}.client-overview-details dl>div{min-width:0;padding:13px 5px;border-bottom:1px solid #edf1f6}.client-overview-details dt{display:flex;align-items:center;gap:7px;color:#7b899b;font-size:12px}.client-overview-details dt svg{width:14px;color:#5078ae}.client-overview-details dd{margin:6px 0 0 21px;overflow:hidden;text-overflow:ellipsis;color:#26364d;font-size:13px;font-weight:600}.client-overview-contact-list>a,.client-overview-activity>a{display:flex;align-items:center;gap:11px;padding:12px 20px;border-bottom:1px solid #edf1f6;color:#26364d}.client-overview-contact-list>a:last-child,.client-overview-activity>a:last-child{border:0}.client-overview-contact-list>a:hover,.client-overview-activity>a:hover{background:#f9fbfe}.client-overview-contact-list>a>span{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:50%;background:#edf4ff;color:#286bd8;font-size:11px;font-weight:800}.client-overview-contact-list div,.client-overview-activity div{min-width:0}.client-overview-contact-list strong,.client-overview-contact-list small,.client-overview-activity strong,.client-overview-activity small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.client-overview-contact-list strong,.client-overview-activity strong{font-size:13px}.client-overview-contact-list small,.client-overview-activity small{margin-top:3px;color:#8794a6;font-size:11px}.client-overview-contact-list em{margin-left:auto;padding:3px 7px;border-radius:99px;background:#f1f4f8;color:#77869a;font-size:10px;font-style:normal}.client-overview-contact-list em.active{background:#e8f8ef;color:#16824a}.client-overview-addresses>div{display:grid;grid-template-columns:1fr 1fr}.client-overview-addresses article{position:relative;min-height:136px;padding:18px 20px}.client-overview-addresses article+article{border-left:1px solid #edf1f6}.client-overview-addresses article>span{width:31px;height:31px;display:grid;place-items:center;border-radius:8px;background:#eef4ff;color:#286bd8}.client-overview-addresses article>span svg{width:16px}.client-overview-addresses h4{margin:12px 0 7px;font-size:13px}.client-overview-addresses article p{margin:0;color:#69798e;font-size:12px;line-height:1.55}.client-overview-activity>a>span{width:31px;height:31px;flex:none;display:grid;place-items:center;border-radius:8px;background:#f1f5fa;color:#52729d}.client-overview-activity svg{width:15px}.client-overview-activity time{margin-left:auto;color:#9aa5b4;font-size:10px;white-space:nowrap}.client-overview-empty{padding:25px 20px;margin:0;color:#8795a7;font-size:13px}@media(max-width:1250px){.client-overview-stats{grid-template-columns:repeat(2,1fr)}.client-overview-grid{grid-template-columns:1fr}}@media(max-width:700px){.client-overview-hero{align-items:flex-start;flex-direction:column}.client-overview-actions{width:100%}.client-overview-actions a{flex:1;justify-content:center}.client-overview-stats{grid-template-columns:1fr}.client-overview-details dl,.client-overview-addresses>div{grid-template-columns:1fr}.client-overview-addresses article+article{border-left:0;border-top:1px solid #edf1f6}.client-overview-links{align-items:flex-start;flex-direction:column;gap:6px}} .client-invoice-card{padding:24px}.client-invoice-actions{display:flex;gap:6px;margin-bottom:15px}.client-invoice-actions a{display:inline-flex;align-items:center;gap:6px}.client-invoice-actions svg{width:16px;height:16px}.client-invoice-secondary{display:inline-flex;align-items:center;border:1px solid #ccd6e4;border-radius:7px;padding:8px 11px;color:#24354c;background:#fff;font-weight:600}.client-invoice-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:20px}.client-invoice-summary article{border:1px solid #d5deea;border-radius:7px;padding:12px 16px;min-height:60px}.client-invoice-summary span,.client-invoice-summary strong{display:block}.client-invoice-summary span{font-size:14px;margin-bottom:5px;color:#dc8500}.client-invoice-summary article:nth-child(2) span{color:#59697f}.client-invoice-summary article:nth-child(3) span{color:#17a35b}.client-invoice-summary strong{font-size:15px}.client-invoice-toolbar{display:flex;justify-content:space-between;align-items:center;margin:0 0 0}.client-invoice-toolbar>div{display:flex}.client-invoice-toolbar select,.client-invoice-toolbar a,.client-invoice-toolbar label{height:31px;border:1px solid #cbd5e2;background:#fff;color:#293a52}.client-invoice-toolbar select{border-radius:6px 0 0 6px;padding:0 12px}.client-invoice-toolbar a{display:grid;place-items:center;padding:0 12px;border-left:0}.client-invoice-toolbar a:last-child{border-radius:0 6px 6px 0}.client-invoice-toolbar a svg{width:14px}.client-invoice-toolbar label{display:flex;align-items:center;border-radius:6px}.client-invoice-toolbar label svg{width:17px;margin:0 8px}.client-invoice-toolbar input{height:29px;width:190px;border:0;border-left:1px solid #cbd5e2;padding:0 10px;outline:0}.client-invoice-table{min-width:900px;margin-top:12px;font-size:14px!important}.client-invoice-table th,.client-invoice-table td{padding:11px 10px!important;height:54px}.client-invoice-table th{font-weight:600!important;background:#f7f9fc!important}.client-invoice-tag{display:inline-block;background:#f0f3f7;border-radius:4px;padding:3px 6px;margin:2px;font-size:12px}.client-invoice-status{display:inline-block;border:1px solid #d5deea;border-radius:6px;padding:4px 8px;font-size:12px}.client-invoice-status.status-paid{color:#159650;background:#f4fff8;border-color:#bde8cb}.client-invoice-status.status-partially-paid{color:#ae7200;background:#fffaf0;border-color:#eed493}.client-invoice-status.status-overdue,.client-invoice-status.status-unpaid,.client-invoice-status.status-sent{color:#d33b44;background:#fff7f7;border-color:#f3c9cd}.client-invoice-status.status-draft{color:#5e6c7f;background:#f8fafc}.client-invoice-empty{text-align:center!important;color:#718097!important}.client-invoice-footer{display:flex;align-items:center;justify-content:space-between;padding-top:18px;color:#6c7b90;font-size:13px}.client-invoice-footer div{display:flex;align-items:center;gap:12px}.client-invoice-footer button{border:0;background:none;color:#7c899d}.client-invoice-footer b{padding:7px 10px;border-radius:5px;background:#e8edf3;color:#25364c}@media(max-width:760px){.client-invoice-summary{grid-template-columns:1fr}.client-invoice-toolbar{align-items:flex-start;gap:10px;flex-wrap:wrap}.client-invoice-toolbar label{margin-left:auto}} /* High-contrast table headers for client invoice and credit-note lists */ .client-invoice-table thead th{ color:#000!important; font-weight:800!important; background:#f1f3f5!important; border-bottom:2px solid #cfd6df!important; letter-spacing:.01em; } .client-invoice-table thead th a, .client-invoice-table thead th span{ color:#000!important; font-weight:800!important; } /* Client Notes table โ€” Knowledge Base reference */ .client-notes-card{padding:0!important;overflow:hidden;border:0!important;border-radius:18px!important;background:#fff;box-shadow:0 14px 36px rgba(31,46,75,.08)!important} .client-notes-card>.client-add{margin:0;padding:16px 18px;border-bottom:1px solid #e7ecf3;background:linear-gradient(100deg,#fff 0%,#f8fbff 55%,#f7f4ff 100%)} .client-notes-card>.client-add>summary{display:inline-flex;align-items:center;min-height:38px;margin:0;padding:0 13px;border:0;border-radius:9px;background:linear-gradient(135deg,#4338ca,#2563eb);color:#fff;font-size:12px;font-weight:800;box-shadow:0 8px 18px rgba(37,99,235,.18);cursor:pointer} .client-notes-card>.client-add[open]>summary{margin-bottom:14px} .client-notes-card>.client-add form{max-width:none;margin:0;padding:14px;border:1px solid #e1e8f1;border-radius:12px;background:#fff} .client-notes-toolbar{min-height:62px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 18px;border-bottom:1px solid #e7ecf3;background:#fff} .client-notes-toolbar>div{display:flex;align-items:center;gap:10px} .client-notes-toolbar span{color:#5f6e83;font-size:10px;font-weight:900;letter-spacing:.075em} .client-notes-toolbar strong{display:inline-flex;align-items:center;min-height:25px;padding:3px 9px;border-radius:999px;background:#eef4ff;color:#315fc5;font-size:10.5px} .client-notes-toolbar small{color:#8795a8;font-size:11px} .client-notes-table-wrap{margin:0!important;overflow:auto} .client-notes-table{width:100%;min-width:760px!important;border-collapse:separate!important;border-spacing:0!important} .client-notes-table thead th{height:46px!important;padding:10px 14px!important;border:0!important;border-bottom:1px solid #dfe7f2!important;background:linear-gradient(90deg,#eef4ff,#f6f4ff)!important;color:#3d4f68!important;font-size:10.5px!important;font-weight:850!important;letter-spacing:.055em!important;text-transform:uppercase!important} .client-notes-table thead th:first-child{width:62%} .client-notes-table thead th:nth-child(2){width:190px} .client-notes-table thead th:last-child{width:115px} .client-notes-table tbody td{height:66px!important;padding:11px 14px!important;border:0!important;border-bottom:1px solid #edf1f5!important;background:#fff!important;color:#34445b!important;font-size:12.5px!important;vertical-align:middle!important} .client-notes-table tbody tr:hover td{background:linear-gradient(90deg,#f8fbff,#fbfaff)!important} .client-note-cell{display:flex;align-items:center;gap:11px;min-width:0} .client-note-icon{width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:11px;background:linear-gradient(135deg,#e9edff,#e3f8ff);color:#4655ca} .client-note-icon svg{width:16px;height:16px} .client-note-cell>div{min-width:0} .client-note-cell strong,.client-note-cell small{display:block} .client-note-cell strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#203f72;font-size:12.5px;font-weight:800} .client-note-cell small{margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#7b899d;font-size:10.5px} .client-note-date{display:block;color:#4d5f77;font-size:11.5px;font-weight:700} .client-note-date small{display:block;margin-top:3px;color:#94a0b0;font-size:10px;font-weight:500} .client-notes-table td form{margin:0} .client-note-delete{min-width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 9px;border:1px solid #dbe4ef;border-radius:8px;background:#fff;color:#64748b;font:inherit;font-size:10.5px;font-weight:750;cursor:pointer} .client-note-delete svg{width:14px;height:14px} .client-note-delete:hover{border-color:#fecaca;background:#fff1f2;color:#dc2626} .client-notes-empty{padding:48px 18px!important;text-align:center!important;color:#8794a7!important} .client-notes-empty>svg{display:block;width:27px;height:27px;margin:0 auto 8px;color:#9aa7b8} .client-notes-empty strong,.client-notes-empty span{display:block} .client-notes-empty strong{color:#516176;font-size:12.5px} .client-notes-empty span{margin-top:3px;font-size:11px} .client-notes-footer{min-height:58px;display:flex;align-items:center;padding:12px 18px;border-top:1px solid #e5eaf1;background:#fbfcff;color:#748196;font-size:11.5px} @media(max-width:700px){.client-notes-toolbar{align-items:flex-start;flex-direction:column}.client-notes-toolbar small{white-space:normal}.client-note-delete span{display:none}.client-note-delete{width:32px;padding:0}} /* ========================================================== Client detail โ€” Knowledge Base parity ========================================================== */ .client-shell{grid-template-columns:250px minmax(0,1fr);gap:18px;max-width:1540px;margin:0 auto;color:#31455b} .client-nav{padding:13px;border:1px solid #e1e7f0;border-radius:16px;background:#fff;box-shadow:0 10px 30px rgba(31,46,75,.07)} .client-nav h1{margin:2px 3px 12px;color:#17233a;font-size:17px;font-weight:820;letter-spacing:-.35px} .client-nav a{height:38px;gap:10px;padding:0 10px;border-radius:9px;color:#53647a;font-size:12px;font-weight:700} .client-nav a:hover{background:#f7f9fc;color:#315fc5}.client-nav a.active{background:linear-gradient(135deg,#eef4ff,#f4f0ff);color:#315fc5}.client-nav a small{font-size:10px} .client-main>h2{margin:0 0 14px;color:#17233a;font-size:24px;font-weight:820;letter-spacing:-.5px} .client-card{border:1px solid #e1e7f0;border-radius:16px;box-shadow:0 10px 30px rgba(31,46,75,.07)} .client-primary,.client-add summary{min-height:38px;border-radius:9px;background:linear-gradient(135deg,#4338ca,#2563eb);font-size:11.5px;font-weight:800;box-shadow:0 8px 18px rgba(37,99,235,.18)} .client-toolbar{padding:11px 13px;border:1px solid #e7ecf3;border-radius:10px;background:linear-gradient(100deg,#fff,#f8fbff)}.client-toolbar input{height:36px;border-radius:9px} .client-table-wrap{border:1px solid #e1e7f0;border-radius:12px;overflow:auto}.client-table-wrap table{font-size:12.5px} .client-table-wrap th{height:43px;padding:10px 14px!important;background:linear-gradient(90deg,#eef4ff,#f6f4ff)!important;border:0!important;border-bottom:1px solid #dfe7f2!important;color:#3d4f68!important;font-size:10.5px!important;font-weight:850!important;letter-spacing:.055em!important;text-transform:uppercase!important} .client-table-wrap td{padding:11px 14px!important;border-bottom:1px solid #edf1f5!important;background:#fff;color:#34445b;font-size:12.5px!important}.client-table-wrap tbody tr:hover td{background:#f8fbff!important} @media(max-width:950px){.client-nav{display:flex;padding:10px}.client-nav h1{width:100%}.client-nav a{width:auto}} /* ========================================================== Client detail workspace โ€” Knowledge Base visual system ========================================================== */ .client-kb-page{max-width:1540px;margin:0 auto;color:#20314a} .client-kb-hero{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:144px;margin:0 0 18px;padding:24px 26px;border:1px solid rgba(255,255,255,.22);border-radius:20px;background:linear-gradient(135deg,#312e81 0%,#2563eb 55%,#06b6d4 100%);box-shadow:0 18px 42px rgba(37,99,235,.18);color:#fff} .client-kb-hero:before{content:"";position:absolute;right:-55px;top:-105px;width:240px;height:240px;border-radius:50%;background:rgba(255,255,255,.1)} .client-kb-hero:after{content:"";position:absolute;right:190px;bottom:-112px;width:190px;height:190px;border-radius:50%;background:rgba(255,255,255,.06)} .client-kb-hero-main,.client-kb-hero-actions{position:relative;z-index:1} .client-kb-hero-main{display:flex;align-items:center;gap:16px;min-width:0} .client-kb-hero-icon{width:54px;height:54px;flex:none;display:grid;place-items:center;border:1px solid rgba(255,255,255,.2);border-radius:15px;background:rgba(255,255,255,.14);backdrop-filter:blur(5px)} .client-kb-hero-icon svg{width:25px;height:25px;color:#fff} .client-kb-eyebrow{display:block;margin-bottom:4px;color:#dbeafe;font-size:10px;font-weight:850;letter-spacing:.13em;text-transform:uppercase} .client-kb-title-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.client-kb-title-row h1{margin:0;color:#fff!important;font-size:30px;line-height:1.08;font-weight:900;letter-spacing:-.7px} .client-kb-status{display:inline-flex;align-items:center;min-height:25px;padding:3px 9px;border:1px solid rgba(255,255,255,.23);border-radius:999px;background:rgba(255,255,255,.13);color:#fff;font-size:10px;font-weight:800} .client-kb-hero-main p{margin:6px 0 0;max-width:650px;color:#eaf3ff;font-size:12.5px;line-height:1.55} .client-kb-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:11px}.client-kb-meta span,.client-kb-meta a{display:inline-flex;align-items:center;gap:5px;min-height:29px;padding:0 9px;border:1px solid rgba(255,255,255,.2);border-radius:8px;background:rgba(255,255,255,.09);color:#fff!important;font-size:10.5px;font-weight:750;text-decoration:none}.client-kb-meta a:hover{background:rgba(255,255,255,.18)}.client-kb-meta svg{width:12px;height:12px} .client-kb-hero-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}.client-kb-hero-stat{min-width:96px;padding:10px 11px;border:1px solid rgba(255,255,255,.2);border-radius:12px;background:rgba(255,255,255,.11);backdrop-filter:blur(5px)}.client-kb-hero-stat span,.client-kb-hero-stat strong{display:block}.client-kb-hero-stat span{color:#dce9ff;font-size:9px;font-weight:800;letter-spacing:.065em;text-transform:uppercase}.client-kb-hero-stat strong{margin-top:3px;color:#fff;font-size:20px;line-height:1} .client-kb-edit{min-height:42px;display:inline-flex;align-items:center;gap:7px;padding:0 14px;border:1px solid rgba(255,255,255,.28);border-radius:10px;background:#fff;color:#3046ad!important;font-size:11.5px;font-weight:850;text-decoration:none;box-shadow:0 9px 20px rgba(15,23,42,.13)}.client-kb-edit:hover{background:#f8fbff;transform:translateY(-1px)}.client-kb-edit svg{width:14px;height:14px} .client-kb-shell{grid-template-columns:260px minmax(0,1fr)!important;gap:18px!important;max-width:none!important;margin:0!important;align-items:start} .client-kb-nav{position:sticky;top:76px;padding:0!important;overflow:hidden;border:0!important;border-radius:18px!important;background:#fff!important;box-shadow:0 14px 36px rgba(31,46,75,.08)!important} .client-kb-nav-head{min-height:66px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 15px;border-bottom:1px solid #e7ecf3;background:linear-gradient(100deg,#fff,#f7faff 55%,#f7f4ff)}.client-kb-nav-head span,.client-kb-nav-head strong{display:block}.client-kb-nav-head span{color:#6d63e8;font-size:9.5px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.client-kb-nav-head strong{margin-top:3px;color:#31435c;font-size:12.5px}.client-kb-nav-head>svg{width:17px;height:17px;color:#72839b} .client-kb-nav-search{position:relative;display:block;margin:12px}.client-kb-nav-search>svg{position:absolute;left:10px;top:10px;width:14px;height:14px;color:#8290a3}.client-kb-nav-search input{width:100%;height:35px;padding:0 10px 0 32px;border:1px solid #d5deea;border-radius:9px;background:#fbfcff;color:#33465f;font-size:11px;outline:0}.client-kb-nav-search input:focus{border-color:#8eb0eb;box-shadow:0 0 0 3px rgba(37,99,235,.08)} .client-kb-nav nav{display:flex;flex-direction:column;gap:2px;max-height:calc(100vh - 260px);overflow:auto;padding:0 9px 11px}.client-kb-nav nav a{min-height:39px;height:auto!important;display:flex!important;align-items:center!important;gap:10px!important;padding:8px 10px!important;border:1px solid transparent;border-radius:9px!important;color:#53647a!important;font-size:11.5px!important;font-weight:720!important;text-decoration:none}.client-kb-nav nav a:hover{border-color:#e2e9f2;background:#f8fbff!important;color:#315fc5!important}.client-kb-nav nav a.active{border-color:#d8e3f7;background:linear-gradient(135deg,#eef4ff,#f4f0ff)!important;color:#315fc5!important}.client-kb-nav nav a svg{width:15px!important;height:15px!important;color:#7b8ca2!important}.client-kb-nav nav a.active svg{color:#4f63db!important}.client-kb-nav nav a span{flex:1;min-width:0}.client-kb-nav nav a small{min-width:22px;height:22px;display:grid;place-items:center;padding:0 5px;border-radius:999px;background:#eef3fb;color:#60728c;font-size:9px!important;font-weight:800}.client-kb-nav nav a.active small{background:#fff;color:#315fc5} .client-kb-main{min-width:0}.client-kb-section-head{min-height:88px;display:flex;align-items:center;gap:13px;margin-bottom:14px;padding:15px 17px;border:1px solid #e1e7f0;border-radius:16px;background:linear-gradient(100deg,#fff 0%,#f8fbff 60%,#f8f5ff 100%);box-shadow:0 10px 30px rgba(31,46,75,.055)} .client-kb-section-icon{width:43px;height:43px;flex:none;display:grid;place-items:center;border-radius:12px;background:linear-gradient(135deg,#e9edff,#e3f8ff);color:#4655ca}.client-kb-section-icon svg{width:18px;height:18px} .client-kb-section-copy{min-width:0;flex:1}.client-kb-section-copy>span{display:block;color:#7c8ba0;font-size:9.5px;font-weight:780}.client-kb-section-copy h2{margin:2px 0 3px!important;color:#20314a!important;font-size:19px!important;line-height:1.2;font-weight:850!important;letter-spacing:-.3px!important}.client-kb-section-copy p{margin:0;color:#7b899d;font-size:11px;line-height:1.5}.client-kb-section-count{display:inline-flex;align-items:center;min-height:28px;padding:3px 9px;border:1px solid #d6e2fb;border-radius:999px;background:#eff4ff;color:#315fc5;font-size:10px;font-weight:800;white-space:nowrap} .client-kb-main>.client-card{border:0!important;border-radius:18px!important;box-shadow:0 14px 36px rgba(31,46,75,.08)!important} .client-kb-main>.client-card>.client-toolbar{margin:0 0 14px!important} @media(max-width:1050px){.client-kb-hero{align-items:flex-start;flex-direction:column}.client-kb-hero-actions{width:100%;justify-content:flex-start}.client-kb-shell{grid-template-columns:230px minmax(0,1fr)!important}.client-kb-nav{position:static}} @media(max-width:820px){.client-kb-shell{grid-template-columns:1fr!important}.client-kb-nav{display:block!important}.client-kb-nav nav{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));max-height:none}.client-kb-nav h1{display:none}.client-kb-section-head{align-items:flex-start}.client-kb-section-count{margin-left:auto}} @media(max-width:620px){.client-kb-hero{padding:19px 17px;border-radius:15px}.client-kb-hero-main{align-items:flex-start}.client-kb-hero-icon{width:44px;height:44px}.client-kb-title-row h1{font-size:24px}.client-kb-hero-actions{display:grid;grid-template-columns:repeat(3,1fr)}.client-kb-edit{grid-column:1/-1;justify-content:center}.client-kb-nav nav{grid-template-columns:1fr}.client-kb-section-head{padding:13px}.client-kb-section-copy p{display:none}.client-kb-section-count{display:none}} /* ========================================================== Client Contracts โ€” Knowledge Base style workspace ========================================================== */ .client-contract-workspace{display:grid;gap:14px}.client-contract-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.client-contract-summary>div{display:flex;align-items:center;gap:12px;min-height:68px;padding:12px 14px;border:1px solid #e1e7f0;border-radius:13px;background:linear-gradient(135deg,#fff,#f9fbff);box-shadow:0 4px 14px rgba(31,46,75,.035)}.client-contract-summary-icon{width:38px;height:38px;display:grid;place-items:center;flex:none;border-radius:10px;background:#eef4ff;color:#315fc5}.client-contract-summary-icon.green{background:#e9faf2;color:#119166}.client-contract-summary-icon.violet{background:#f3efff;color:#7354d6}.client-contract-summary-icon svg{width:17px}.client-contract-summary small,.client-contract-summary strong{display:block}.client-contract-summary small{color:#8190a3;font-size:10.5px;font-weight:750}.client-contract-summary strong{margin-top:3px;color:#243751;font-size:17px;line-height:1.1} .client-contract-card{overflow:hidden;border:1px solid #e1e7f0;border-radius:16px;background:#fff;box-shadow:0 10px 30px rgba(31,46,75,.07)}.client-contract-toolbar{min-height:68px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 16px;border-bottom:1px solid #e7ecf3;background:linear-gradient(100deg,#fff 0%,#f8fbff 52%,#f7f4ff 100%)}.client-contract-toolbar-copy span,.client-contract-toolbar-copy strong{display:block}.client-contract-toolbar-copy span{color:#6d63e8;font-size:9.5px;font-weight:850;letter-spacing:.11em}.client-contract-toolbar-copy strong{margin-top:3px;color:#33465f;font-size:12px}.client-contract-toolbar-actions{display:flex;align-items:center;gap:8px}.client-contract-search{display:flex;height:36px}.client-contract-search>i,.client-contract-search>svg{width:39px!important;height:36px!important;padding:10px;border:1px solid #ccd7e6;border-right:0;border-radius:9px 0 0 9px;background:#fff;color:#718198}.client-contract-search input{width:min(245px,26vw);height:36px;min-height:36px!important;padding:0 11px;border:1px solid #ccd7e6;border-radius:0 9px 9px 0;background:#fff;color:#34455e;outline:0}.client-contract-search input:focus{border-color:#8eb0eb!important;box-shadow:0 0 0 3px rgba(37,99,235,.08)!important}.client-contract-new{height:36px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 12px;border:0;border-radius:9px;background:linear-gradient(135deg,#4338ca,#2563eb);color:#fff;font:inherit;font-size:11.5px;font-weight:800;cursor:pointer;box-shadow:0 7px 16px rgba(37,99,235,.2)}.client-contract-new:hover{transform:translateY(-1px);box-shadow:0 10px 20px rgba(37,99,235,.26)}.client-contract-new svg{width:14px} .client-contract-table-scroll{overflow:auto}.client-contract-table{width:100%;min-width:1080px;border-collapse:separate;border-spacing:0;background:#fff}.client-contract-table thead th{height:43px;padding:10px 14px;background:linear-gradient(90deg,#eef4ff,#f6f4ff)!important;border-bottom:1px solid #dfe7f2!important;color:#3d4f68!important;font-size:10.5px!important;font-weight:850!important;letter-spacing:.055em!important;text-transform:uppercase!important;text-align:left}.client-contract-table tbody td{padding:11px 14px!important;border-bottom:1px solid #edf1f5!important;background:#fff;color:#34445b;font-size:12.5px!important;vertical-align:middle}.client-contract-table tbody tr:hover td{background:#f8fbff!important}.client-contract-table th:first-child{width:30%}.client-contract-name-cell{display:flex;align-items:center;gap:11px;min-width:245px}.client-contract-doc{width:36px;height:36px;display:grid;place-items:center;flex:none;border-radius:10px;background:linear-gradient(135deg,#eef2ff,#e8f8ff);color:#4f63db}.client-contract-doc svg{width:16px}.client-contract-name-cell>div{min-width:0}.client-contract-name{display:block;max-width:320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#203f72!important;font-weight:780!important;text-decoration:none}.client-contract-name:hover{color:#1d4ed8!important}.client-contract-name-cell small{display:block;margin-top:2px;color:#98a3b2;font-size:9.5px}.client-contract-inline-actions{display:flex;align-items:center;gap:5px;margin-top:4px;color:#a1abba;font-size:10px}.client-contract-inline-actions a,.client-contract-inline-actions button{border:0;padding:0;background:transparent;color:#55729a!important;font:inherit;font-size:10px!important;font-weight:650!important;text-decoration:none;cursor:pointer}.client-contract-inline-actions a:hover,.client-contract-inline-actions button:hover{color:#1d4ed8!important;text-decoration:underline}.client-contract-inline-actions form{display:inline;margin:0}.client-contract-inline-actions button.danger{color:#c5414d!important}.client-contract-inline-actions button.danger:hover{color:#a9212e!important}.client-contract-type{display:inline-flex;align-items:center;min-height:24px;padding:3px 8px;border-radius:999px;background:#eef4ff;color:#315fc5;font-size:10.5px;font-weight:800;white-space:nowrap}.client-contract-value{color:#1d3657}.client-contract-date,.client-contract-date-sub{display:block;white-space:nowrap}.client-contract-date{font-weight:700;color:#4b5d75}.client-contract-date-sub{margin-top:2px;color:#96a2b1;font-size:9.5px}.client-contract-signature,.client-contract-status{display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:3px 8px;border-radius:999px;font-size:10.5px;font-weight:800;white-space:nowrap}.client-contract-signature{background:#f2f4f7;color:#627187}.client-contract-signature.signed{background:#e8fbf4;color:#07855f}.client-contract-status{background:#eef2f7;color:#68778b}.client-contract-status i{width:6px;height:6px;border-radius:50%;background:#91a0b2}.client-contract-status.active{background:#e8fbf4;color:#07855f}.client-contract-status.active i{background:#12a474}.client-contract-status.expired{background:#fff1f2;color:#be3342}.client-contract-status.expired i{background:#e24b5a}.client-contract-empty{text-align:center!important;padding:48px 18px!important;color:#8794a7!important}.client-contract-empty>svg{width:25px;height:25px;margin-bottom:8px}.client-contract-empty strong,.client-contract-empty span{display:block}.client-contract-empty strong{color:#516176}.client-contract-empty span{margin-top:3px;font-size:11px}.client-contract-footer{min-height:58px;display:flex;align-items:center;padding:12px 16px;border-top:1px solid #e5eaf1;background:#fbfcff;color:#748196;font-size:11.5px} .client-contract-modal{position:fixed;z-index:1400;inset:0;display:none;place-items:center;padding:20px;background:rgba(15,23,42,.52);backdrop-filter:blur(5px)}.client-contract-modal.is-open{display:grid}.client-contract-modal-card{position:relative;width:min(820px,calc(100vw - 32px));max-height:calc(100vh - 40px);overflow:auto;border:1px solid rgba(255,255,255,.72);border-radius:18px;background:#fff;box-shadow:0 28px 80px rgba(15,23,42,.28)}.client-contract-modal-card:before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,#7c3aed,#2563eb,#06b6d4)}.client-contract-modal-card>header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:20px 22px 17px;border-bottom:1px solid #e7ecf3;background:linear-gradient(100deg,#fbfdff,#f7f5ff)}.client-contract-modal-title-wrap{display:flex;align-items:center;gap:12px}.client-contract-modal-icon{width:39px;height:39px;display:grid;place-items:center;border-radius:11px;background:linear-gradient(135deg,#eef2ff,#e8f8ff);color:#4f63db}.client-contract-modal-icon svg{width:17px}.client-contract-modal-eyebrow{display:block;color:#6d63e8;font-size:9.5px;font-weight:850;letter-spacing:.12em;text-transform:uppercase}.client-contract-modal-card h3{margin:2px 0 0;color:#20314a;font-size:18px}.client-contract-modal-card header p{margin:4px 0 0;color:#8996a8;font-size:10.5px}.client-contract-modal-close{width:34px;height:34px;display:grid;place-items:center;border:1px solid #dbe4ef;border-radius:9px;background:#fff;color:#64748b;cursor:pointer}.client-contract-modal-close:hover{border-color:#aac3eb;background:#eff5ff;color:#1d4ed8}.client-contract-modal-close svg{width:15px}.client-contract-client-context{display:flex;align-items:center;gap:10px;margin:18px 22px 0;padding:11px 13px;border:1px solid #dfe7f1;border-radius:11px;background:#f8fbff}.client-contract-context-icon{width:32px;height:32px;display:grid;place-items:center;border-radius:9px;background:#edf4ff;color:#315fc5}.client-contract-context-icon svg{width:15px}.client-contract-client-context small,.client-contract-client-context strong{display:block}.client-contract-client-context small{color:#8b98aa;font-size:9.5px;text-transform:uppercase;letter-spacing:.08em}.client-contract-client-context strong{margin-top:1px;color:#31445d;font-size:12px}.client-contract-context-id{margin-left:auto;color:#8a97a8;font-size:10.5px;font-weight:750}.client-contract-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px;padding:20px 22px 6px}.client-contract-form-grid label{display:grid;gap:7px;color:#32445f;font-size:12px;font-weight:800}.client-contract-form-grid label.wide{grid-column:1/-1}.client-contract-form-grid label>span em{color:#e11d48;font-style:normal}.client-contract-form-grid input,.client-contract-form-grid select,.client-contract-form-grid textarea{width:100%;min-height:42px!important;padding:9px 12px;border:1px solid #cbd7e5;border-radius:10px;background:#fff;color:#24364f;outline:0;font:inherit;font-size:12px}.client-contract-form-grid textarea{resize:vertical;line-height:1.5}.client-contract-form-grid input:focus,.client-contract-form-grid select:focus,.client-contract-form-grid textarea:focus{border-color:#84a9eb!important;box-shadow:0 0 0 4px rgba(37,99,235,.08)!important}.client-contract-type-control,.client-contract-money{display:grid}.client-contract-type-control{grid-template-columns:minmax(0,1fr) 42px}.client-contract-type-control select{border-radius:10px 0 0 10px}.client-contract-type-control button{display:grid;place-items:center;border:1px solid #cbd7e5;border-left:0;border-radius:0 10px 10px 0;background:#fff;color:#315fc5;cursor:pointer}.client-contract-type-control button:hover{background:#eef5ff}.client-contract-type-control button svg{width:15px}.client-contract-money{grid-template-columns:42px minmax(0,1fr)}.client-contract-money>span{display:grid;place-items:center;border:1px solid #cbd7e5;border-right:0;border-radius:10px 0 0 10px;background:#f8fafc;color:#627187}.client-contract-money input{border-radius:0 10px 10px 0}.client-contract-check{grid-template-columns:18px 1fr!important;align-items:center;gap:2px 9px!important;padding:11px 12px;border:1px solid #e1e7f0;border-radius:10px;background:#fbfcfe}.client-contract-check input{width:16px!important;height:16px!important;min-height:16px!important;padding:0!important;accent-color:#2563eb}.client-contract-check>span strong,.client-contract-check>span small{display:block}.client-contract-check>span small{margin-top:2px;color:#8996a8;font-size:10px;font-weight:500}.client-contract-error{color:#c0263f;font-size:10.5px}.client-contract-modal-card footer{display:flex;justify-content:flex-end;gap:8px;padding:14px 22px 16px;border-top:1px solid #e7ecf3;background:linear-gradient(90deg,#fbfcff,#f7f5ff)}.client-contract-primary,.client-contract-secondary{min-height:38px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 13px;border-radius:9px;font:inherit;font-size:11.5px;font-weight:800;cursor:pointer}.client-contract-secondary{border:1px solid #cfdae8;background:#fff;color:#53647a}.client-contract-secondary:hover{background:#f7f9fc}.client-contract-primary{border:0;background:linear-gradient(135deg,#4338ca,#2563eb);color:#fff;box-shadow:0 8px 18px rgba(37,99,235,.2)}.client-contract-primary:hover{transform:translateY(-1px);box-shadow:0 11px 22px rgba(37,99,235,.26)}.client-contract-primary svg{width:14px} @media(max-width:820px){.client-contract-summary{grid-template-columns:1fr}.client-contract-toolbar{align-items:stretch;flex-direction:column}.client-contract-toolbar-actions{align-items:stretch;flex-wrap:wrap}.client-contract-search{flex:1}.client-contract-search input{width:100%}.client-contract-form-grid{grid-template-columns:1fr}.client-contract-form-grid label.wide{grid-column:auto}} @media(max-width:520px){.client-contract-toolbar-actions{flex-direction:column}.client-contract-search,.client-contract-new{width:100%}.client-contract-modal{padding:10px}.client-contract-modal-card{width:100%;max-height:calc(100vh - 20px)}.client-contract-modal-card>header,.client-contract-form-grid,.client-contract-modal-card footer{padding-left:15px;padding-right:15px}.client-contract-client-context{margin-left:15px;margin-right:15px}} /* ========================================================== Client Contracts โ€” exact Knowledge Base table parity ========================================================== */ .client-kb-section-actions{margin-left:auto;display:flex;align-items:center;gap:10px;flex:none} .client-contract-header-new{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 15px;border:0;border-radius:10px;background:linear-gradient(135deg,#4338ca,#2563eb);color:#fff;font:inherit;font-size:12px;font-weight:800;cursor:pointer;box-shadow:0 9px 20px rgba(37,99,235,.22)} .client-contract-header-new:hover{transform:translateY(-1px);box-shadow:0 12px 24px rgba(37,99,235,.28)} .client-contract-header-new svg{width:16px;height:16px} .client-contract-workspace{display:block} .client-contract-table-card{overflow:hidden;border:1px solid #e1e7f0;border-radius:16px;background:#fff;box-shadow:0 10px 30px rgba(31,46,75,.07)} .client-contract-table-toolbar{min-height:66px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 16px;border-bottom:1px solid #e7ecf3;background:linear-gradient(100deg,#fff 0%,#f8fbff 52%,#f7f4ff 100%)} .client-contract-table-left{display:flex;align-items:center;gap:7px} .client-contract-tool-button,.client-contract-icon-button,.client-contract-table-search input,.client-contract-table-search span{height:36px;border:1px solid #ccd7e6;background:#fff;color:#3d4d64;font:inherit} .client-contract-tool-button,.client-contract-icon-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:9px;padding:0 11px;font-size:11.5px;font-weight:750;text-decoration:none} .client-contract-tool-button:hover,.client-contract-icon-button:hover{border-color:#aac3eb;background:#eff5ff;color:#1d4ed8} .client-contract-tool-button svg,.client-contract-icon-button svg{width:14px;height:14px}.client-contract-icon-button{width:36px;padding:0} .client-contract-table-search{display:flex;height:36px}.client-contract-table-search span{width:39px;display:grid;place-items:center;border-radius:9px 0 0 9px;border-right:0;color:#718198}.client-contract-table-search span svg{width:15px;height:15px}.client-contract-table-search input{width:min(280px,28vw);min-height:36px!important;padding:0 11px;border-radius:0 9px 9px 0;outline:0}.client-contract-table-search input:focus{border-color:#8eb0eb!important;box-shadow:0 0 0 3px rgba(37,99,235,.08)!important} .client-contract-table-scroll{overflow:auto}.client-contract-data-table{width:100%;min-width:1020px;border-collapse:separate;border-spacing:0;background:#fff} .client-contract-data-table thead th{height:43px;padding:10px 14px;background:linear-gradient(90deg,#eef4ff,#f6f4ff)!important;border:0!important;border-bottom:1px solid #dfe7f2!important;color:#3d4f68!important;font-size:10.5px!important;font-weight:850!important;letter-spacing:.055em!important;text-transform:uppercase!important;text-align:left} .client-contract-data-table tbody td{padding:11px 14px!important;border:0!important;border-bottom:1px solid #edf1f5!important;background:#fff;color:#34445b;font-size:12.5px!important;vertical-align:middle}.client-contract-data-table tbody tr:hover td{background:#f8fbff!important} .client-contract-data-table th:first-child{width:37%}.client-contract-options-col{width:125px} .client-contract-article-cell{display:flex;align-items:center;gap:11px;min-width:0}.client-contract-article-icon{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:10px;background:linear-gradient(135deg,#eef2ff,#e8f8ff);color:#4f63db}.client-contract-article-icon svg{width:15px}.client-contract-article-cell>div{min-width:0}.client-contract-article-cell>div>a{display:block;max-width:330px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#203f72!important;font-weight:750!important;text-decoration:none}.client-contract-article-cell small{display:block;margin-top:2px;color:#98a3b2;font-size:9.5px} .client-contract-row-inline-actions{display:flex;align-items:center;gap:5px;margin-top:3px;color:#a1abba;font-size:10px}.client-contract-row-inline-actions a,.client-contract-row-inline-actions button{border:0;padding:0;background:transparent;color:#55729a!important;font:inherit;font-size:10px;cursor:pointer;text-decoration:none}.client-contract-row-inline-actions a:hover,.client-contract-row-inline-actions button:hover{color:#1d4ed8!important}.client-contract-row-inline-actions form{display:inline;margin:0} .client-contract-group-badge,.client-contract-status,.client-contract-signature{display:inline-flex;align-items:center;min-height:24px;padding:3px 8px;border-radius:999px;font-size:10.5px;font-weight:800}.client-contract-group-badge{background:#eef4ff;color:#315fc5}.client-contract-status.active,.client-contract-signature.signed{background:#e8fbf4;color:#07855f}.client-contract-status.expired{background:#fff4e5;color:#b65f00}.client-contract-status,.client-contract-signature{background:#f2f4f7;color:#627187} .client-contract-row-actions{display:flex;align-items:center;gap:6px}.client-contract-row-actions form{margin:0}.client-contract-row-actions a,.client-contract-row-actions button{width:32px;height:32px;display:grid;place-items:center;padding:0;border:1px solid #dbe4ef;border-radius:8px;background:#fff;color:#43638f;cursor:pointer;text-decoration:none}.client-contract-row-actions a:hover,.client-contract-row-actions button:hover{border-color:#abc6ef;background:#eef5ff;color:#1d4ed8}.client-contract-row-actions button.danger:hover{border-color:#fecaca;background:#fff1f2;color:#dc2626}.client-contract-row-actions svg{width:14px;height:14px} .client-contract-table-footer{min-height:62px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 16px;border-top:1px solid #e5eaf1;background:#fbfcff;color:#748196;font-size:11.5px} @media(max-width:820px){.client-kb-section-actions{margin-left:auto}.client-contract-table-toolbar{align-items:stretch;flex-direction:column}.client-contract-table-search,.client-contract-table-search input{width:100%}.client-contract-table-search input{flex:1}} @media(max-width:620px){.client-kb-section-actions{width:100%;margin-left:0;justify-content:space-between}.client-contract-header-new{min-height:36px;padding:0 11px}.client-contract-table-footer{align-items:flex-start;flex-direction:column}} /* ========================================================== Client Contacts โ€” exact Knowledge Base table parity ========================================================== */ .client-contact-header-new{ display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 15px; border:0;border-radius:10px;background:linear-gradient(135deg,#4338ca,#2563eb);color:#fff!important; font-size:12px;font-weight:800;text-decoration:none;box-shadow:0 9px 20px rgba(37,99,235,.22) } .client-contact-header-new:hover{transform:translateY(-1px);box-shadow:0 12px 24px rgba(37,99,235,.28)} .client-contact-header-new svg{width:16px;height:16px} .client-contact-workspace{min-width:0} .client-contact-table-card{ overflow:hidden;border:1px solid #e1e7f0;border-radius:16px;background:#fff; box-shadow:0 10px 30px rgba(31,46,75,.07) } .client-contact-table-toolbar{ min-height:66px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 16px; border-bottom:1px solid #e7ecf3;background:linear-gradient(100deg,#fff 0%,#f8fbff 52%,#f7f4ff 100%) } .client-contact-table-left{display:flex;align-items:center;gap:7px;flex-wrap:wrap} .client-contact-tool-button,.client-contact-icon-button,.client-contact-table-search input,.client-contact-table-search span{ height:36px;border:1px solid #ccd7e6;background:#fff;color:#3d4d64;font:inherit } .client-contact-tool-button,.client-contact-icon-button{ display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:9px;padding:0 11px; font-size:11.5px;font-weight:750;text-decoration:none } .client-contact-tool-button:hover,.client-contact-icon-button:hover{ border-color:#aac3eb;background:#eff5ff;color:#1d4ed8 } .client-contact-tool-button svg,.client-contact-icon-button svg{width:14px;height:14px} .client-contact-icon-button{width:36px;padding:0} .client-contact-table-search{display:flex;height:36px} .client-contact-table-search span{ width:39px;display:grid;place-items:center;border-radius:9px 0 0 9px;border-right:0;color:#718198 } .client-contact-table-search span svg{width:15px;height:15px} .client-contact-table-search input{ width:min(280px,28vw);min-height:36px!important;padding:0 11px;border-radius:0 9px 9px 0;outline:0 } .client-contact-table-search input:focus{ border-color:#8eb0eb!important;box-shadow:0 0 0 3px rgba(37,99,235,.08)!important } .client-contact-table-scroll{overflow:auto} .client-contact-data-table{ width:100%;min-width:940px;border-collapse:separate!important;border-spacing:0!important;background:#fff } .client-contact-data-table thead th{ height:43px;padding:10px 14px!important;border:0!important;border-bottom:1px solid #dfe7f2!important; background:linear-gradient(90deg,#eef4ff,#f6f4ff)!important;color:#3d4f68!important; font-size:10.5px!important;font-weight:850!important;letter-spacing:.055em!important;text-transform:uppercase!important } .client-contact-data-table tbody td{ height:66px;padding:11px 14px!important;border:0!important;border-bottom:1px solid #edf1f5!important; background:#fff!important;color:#34445b!important;font-size:12.5px!important;vertical-align:middle!important } .client-contact-data-table tbody tr:hover td{background:#f8fbff!important} .client-contact-data-table th:first-child{width:34%} .client-contact-options-col{width:125px;text-align:right!important} .client-contact-person-cell{display:flex;align-items:center;gap:11px;min-width:0} .client-contact-avatar{ width:36px;height:36px;flex:none;display:grid;place-items:center;border-radius:10px; background:linear-gradient(135deg,#eef2ff,#e8f8ff);color:#4f63db;font-size:11px;font-weight:850 } .client-contact-person-cell>div{min-width:0} .client-contact-person-cell>div>a{ display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#203f72!important; font-weight:750!important;text-decoration:none } .client-contact-person-cell>div>a:hover{color:#1d4ed8!important} .client-contact-person-cell small{display:block;margin-top:2px;color:#98a3b2;font-size:9.5px} .client-contact-inline-actions{display:flex!important;align-items:center;gap:5px;min-height:16px;margin-top:3px;color:#a1abba;font-size:10px;opacity:1!important;visibility:visible!important} .client-contact-inline-actions a,.client-contact-inline-actions button{ border:0;padding:0;background:transparent;color:#55729a!important;font:inherit;font-size:10px!important; font-weight:600!important;text-decoration:none;cursor:pointer } .client-contact-inline-actions a:hover,.client-contact-inline-actions button:hover{color:#1d4ed8!important;text-decoration:none} .client-contact-inline-actions form{display:inline;margin:0;padding:0} .client-contact-primary-text{color:#3d4f68;font-size:12px;font-weight:650} .client-contact-muted-text{color:#66758a;font-size:12px} .client-contact-status{ display:inline-flex;align-items:center;min-height:24px;padding:3px 8px;border-radius:999px; background:#eef4ff;color:#315fc5;font-size:10.5px;font-weight:800 } .client-contact-status.active{background:#e8fbf4;color:#07855f} .client-contact-status.inactive{background:#f1f3f6;color:#68778b} .client-contact-option-actions{display:flex;align-items:center;justify-content:flex-end;gap:6px} .client-contact-option-actions form{display:inline-flex;margin:0;padding:0} .client-contact-option-actions a,.client-contact-option-actions button{ width:32px;height:32px;display:grid;place-items:center;padding:0;border:1px solid #dbe4ef;border-radius:8px; background:#fff;color:#43638f;text-decoration:none;cursor:pointer;font:inherit } .client-contact-option-actions a:hover,.client-contact-option-actions button:hover{ border-color:#abc6ef;background:#eef5ff;color:#1d4ed8 } .client-contact-option-actions svg{width:14px;height:14px} .client-contact-empty{text-align:center!important;padding:48px 18px!important;color:#8794a7!important} .client-contact-empty>svg{display:block;width:27px;height:27px;margin:0 auto 8px;color:#9aa7b8} .client-contact-empty strong,.client-contact-empty span{display:block} .client-contact-empty strong{color:#516176;font-size:12.5px} .client-contact-empty span{margin-top:3px;font-size:11px} .client-contact-table-footer{ min-height:62px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 16px; border-top:1px solid #e5eaf1;background:#fbfcff;color:#748196;font-size:11.5px } @media(max-width:760px){ .client-contact-table-toolbar{align-items:stretch;flex-direction:column} .client-contact-table-search,.client-contact-table-search input{width:100%} .client-contact-table-search input{flex:1} } /* Contacts delete neutralized to match View/Edit */ .client-contact-option-actions button{border-color:#dbe4ef!important;background:#fff!important;color:#43638f!important} .client-contact-option-actions button:hover{border-color:#abc6ef!important;background:#eef5ff!important;color:#1d4ed8!important} /* Contact inline Delete โ€” render exactly like Edit/View text links */ .client-contact-inline-actions form > button.client-contact-inline-delete{ appearance:none!important; -webkit-appearance:none!important; display:inline!important; width:auto!important; height:auto!important; min-width:0!important; min-height:0!important; margin:0!important; padding:0!important; border:0!important; border-radius:0!important; background:transparent!important; background-image:none!important; box-shadow:none!important; color:#55729a!important; font:inherit!important; font-size:10px!important; font-weight:600!important; line-height:inherit!important; letter-spacing:normal!important; text-transform:none!important; text-decoration:none!important; cursor:pointer!important; } .client-contact-inline-actions form > button.client-contact-inline-delete:hover, .client-contact-inline-actions form > button.client-contact-inline-delete:focus, .client-contact-inline-actions form > button.client-contact-inline-delete:active{ border:0!important; background:transparent!important; background-image:none!important; box-shadow:none!important; color:#1d4ed8!important; text-decoration:none!important; outline:none!important; transform:none!important; } /* ========================================================== Client Notes โ€” Contacts/Knowledge Base table parity ========================================================== */ .client-note-header-new{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 15px;border:0;border-radius:10px;background:linear-gradient(135deg,#4338ca,#2563eb);color:#fff!important;font:inherit;font-size:12px;font-weight:800;cursor:pointer;box-shadow:0 9px 20px rgba(37,99,235,.22)} .client-note-header-new:hover{transform:translateY(-1px);box-shadow:0 12px 24px rgba(37,99,235,.28)}.client-note-header-new svg{width:16px;height:16px} .client-note-workspace{min-width:0}.client-note-table-card{overflow:hidden;border:1px solid #e1e7f0;border-radius:16px;background:#fff;box-shadow:0 10px 30px rgba(31,46,75,.07)} .client-note-table-toolbar{min-height:66px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 16px;border-bottom:1px solid #e7ecf3;background:linear-gradient(100deg,#fff 0%,#f8fbff 52%,#f7f4ff 100%)} .client-note-table-left{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.client-note-tool-button,.client-note-icon-button,.client-note-table-search input,.client-note-table-search span{height:36px;border:1px solid #ccd7e6;background:#fff;color:#3d4d64;font:inherit}.client-note-tool-button,.client-note-icon-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:9px;padding:0 11px;font-size:11.5px;font-weight:750;text-decoration:none;cursor:pointer}.client-note-tool-button:hover,.client-note-icon-button:hover{border-color:#aac3eb;background:#eff5ff;color:#1d4ed8}.client-note-tool-button svg,.client-note-icon-button svg{width:14px;height:14px}.client-note-icon-button{width:36px;padding:0} .client-note-table-search{display:flex;height:36px}.client-note-table-search span{width:39px;display:grid;place-items:center;border-radius:9px 0 0 9px;border-right:0;color:#718198}.client-note-table-search span svg{width:15px;height:15px}.client-note-table-search input{width:min(280px,28vw);min-height:36px!important;padding:0 11px;border-radius:0 9px 9px 0;outline:0}.client-note-table-search input:focus{border-color:#8eb0eb!important;box-shadow:0 0 0 3px rgba(37,99,235,.08)!important} .client-note-table-scroll{overflow:auto}.client-note-data-table{width:100%;min-width:860px;border-collapse:separate;border-spacing:0;background:#fff}.client-note-data-table thead th{height:43px;padding:10px 14px;background:linear-gradient(90deg,#eef4ff,#f6f4ff)!important;border:0!important;border-bottom:1px solid #dfe7f2!important;color:#3d4f68!important;font-size:10.5px!important;font-weight:850!important;letter-spacing:.055em!important;text-transform:uppercase!important;text-align:left}.client-note-data-table tbody td{padding:11px 14px!important;border:0!important;border-bottom:1px solid #edf1f5!important;background:#fff;color:#34445b;font-size:12.5px!important;vertical-align:middle}.client-note-data-table tbody tr:hover td{background:#f8fbff!important}.client-note-data-table th:first-child{width:32%}.client-note-data-table th:nth-child(2){width:38%}.client-note-options-col{width:90px} .client-note-person-cell{display:flex;align-items:center;gap:11px;min-width:0}.client-note-avatar{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:10px;background:linear-gradient(135deg,#eef2ff,#e8f8ff);color:#4f63db}.client-note-avatar svg{width:15px;height:15px}.client-note-person-cell>div{min-width:0}.client-note-person-cell strong{display:block;max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#203f72;font-size:12.5px;font-weight:780}.client-note-person-cell small{display:block;margin-top:2px;color:#98a3b2;font-size:9.5px}.client-note-details{display:block;max-width:430px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#5f6f84}.client-note-date-main,.client-note-date-time{display:block}.client-note-date-main{color:#4b5d75;font-weight:700}.client-note-date-time{margin-top:2px;color:#96a2b1;font-size:9.5px} .client-note-option-actions{display:flex;align-items:center;gap:6px}.client-note-option-actions form{margin:0}.client-note-option-actions button{width:32px;height:32px;display:grid;place-items:center;padding:0;border:1px solid #dbe4ef;border-radius:8px;background:#fff;color:#43638f;cursor:pointer}.client-note-option-actions button:hover{border-color:#abc6ef;background:#eef5ff;color:#1d4ed8}.client-note-option-actions svg{width:14px;height:14px} .client-note-empty{text-align:center!important;padding:48px 18px!important;color:#8794a7!important}.client-note-empty>svg{width:25px;height:25px;margin-bottom:8px}.client-note-empty strong,.client-note-empty span{display:block}.client-note-empty strong{color:#516176}.client-note-empty span{margin-top:3px;font-size:11px}.client-note-table-footer{min-height:62px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 16px;border-top:1px solid #e5eaf1;background:#fbfcff;color:#748196;font-size:11.5px} .client-note-modal{position:fixed;z-index:1450;inset:0;display:none;place-items:center;padding:20px;background:rgba(15,23,42,.52);backdrop-filter:blur(5px)}.client-note-modal.is-open{display:grid}.client-note-modal-card{position:relative;width:min(650px,calc(100vw - 32px));max-height:calc(100vh - 40px);overflow:auto;border:1px solid rgba(255,255,255,.72);border-radius:18px;background:#fff;box-shadow:0 28px 80px rgba(15,23,42,.28)}.client-note-modal-card:before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,#7c3aed,#2563eb,#06b6d4)}.client-note-modal-card>header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:20px 22px 17px;border-bottom:1px solid #e7ecf3;background:linear-gradient(100deg,#fbfdff,#f7f5ff)}.client-note-modal-title-wrap{display:flex;align-items:center;gap:12px}.client-note-modal-icon{width:39px;height:39px;display:grid;place-items:center;border-radius:11px;background:linear-gradient(135deg,#eef2ff,#e8f8ff);color:#4f63db}.client-note-modal-icon svg{width:17px}.client-note-modal-eyebrow{display:block;color:#6d63e8;font-size:9.5px;font-weight:850;letter-spacing:.12em;text-transform:uppercase}.client-note-modal-card h3{margin:2px 0 0;color:#20314a;font-size:18px}.client-note-modal-card header p{margin:4px 0 0;color:#8996a8;font-size:10.5px}.client-note-modal-close{width:34px;height:34px;display:grid;place-items:center;border:1px solid #dbe4ef;border-radius:9px;background:#fff;color:#64748b;cursor:pointer}.client-note-modal-close:hover{border-color:#aac3eb;background:#eff5ff;color:#1d4ed8}.client-note-modal-close svg{width:15px} .client-note-client-context{display:flex;align-items:center;gap:10px;margin:18px 22px 0;padding:11px 13px;border:1px solid #dfe7f1;border-radius:11px;background:#f8fbff}.client-note-context-icon{width:32px;height:32px;display:grid;place-items:center;border-radius:9px;background:#edf4ff;color:#315fc5}.client-note-context-icon svg{width:15px}.client-note-client-context small,.client-note-client-context strong{display:block}.client-note-client-context small{color:#8b98aa;font-size:9.5px;text-transform:uppercase;letter-spacing:.08em}.client-note-client-context strong{margin-top:1px;color:#31445d;font-size:12px}.client-note-context-id{margin-left:auto;color:#8a97a8;font-size:10.5px;font-weight:750}.client-note-form-grid{display:grid;gap:16px;padding:20px 22px 6px}.client-note-form-grid label{display:grid;gap:7px;color:#32445f;font-size:12px;font-weight:800}.client-note-form-grid label>span em{color:#e11d48;font-style:normal}.client-note-form-grid input,.client-note-form-grid textarea{width:100%;min-height:42px!important;padding:9px 12px;border:1px solid #cbd7e5;border-radius:10px;background:#fff;color:#24364f;outline:0;font:inherit;font-size:12px;box-sizing:border-box}.client-note-form-grid textarea{resize:vertical;line-height:1.5}.client-note-form-grid input:focus,.client-note-form-grid textarea:focus{border-color:#84a9eb!important;box-shadow:0 0 0 4px rgba(37,99,235,.08)!important}.client-note-modal-card footer{display:flex;justify-content:flex-end;gap:8px;padding:14px 22px 16px;border-top:1px solid #e7ecf3;background:linear-gradient(90deg,#fbfcff,#f7f5ff)}.client-note-primary,.client-note-secondary{min-height:38px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 13px;border-radius:9px;font:inherit;font-size:11.5px;font-weight:800;cursor:pointer}.client-note-secondary{border:1px solid #cfdae8;background:#fff;color:#53647a}.client-note-secondary:hover{background:#f7f9fc}.client-note-primary{border:0;background:linear-gradient(135deg,#4338ca,#2563eb);color:#fff;box-shadow:0 8px 18px rgba(37,99,235,.2)}.client-note-primary:hover{transform:translateY(-1px);box-shadow:0 11px 22px rgba(37,99,235,.26)}.client-note-primary svg{width:14px} @media(max-width:820px){.client-note-table-toolbar{align-items:stretch;flex-direction:column}.client-note-table-search,.client-note-table-search input{width:100%}.client-note-table-search input{flex:1}} @media(max-width:620px){.client-note-header-new{min-height:36px;padding:0 11px}.client-note-table-footer{align-items:flex-start;flex-direction:column}.client-note-modal{padding:10px}.client-note-modal-card{width:100%;max-height:calc(100vh - 20px)}.client-note-modal-card>header,.client-note-form-grid,.client-note-modal-card footer{padding-left:15px;padding-right:15px}.client-note-client-context{margin-left:15px;margin-right:15px}} .client-note-tool-label{cursor:default}.client-note-tool-label:hover{border-color:#ccd7e6;background:#fff;color:#3d4d64} /* Client Notes โ€” inline actions plus View/Edit popup states */ .client-note-inline-actions{display:flex;align-items:center;gap:5px;margin-top:4px;color:#a1abba;font-size:10px} .client-note-inline-actions form{display:inline;margin:0}.client-note-inline-actions span{color:#a1abba} .client-note-inline-actions button{appearance:none!important;-webkit-appearance:none!important;display:inline!important;width:auto!important;height:auto!important;min-width:0!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;background-image:none!important;box-shadow:none!important;color:#55729a!important;font:inherit!important;font-size:10px!important;font-weight:600!important;line-height:inherit!important;text-transform:none!important;cursor:pointer!important} .client-note-inline-actions button:hover,.client-note-inline-actions button:focus{background:transparent!important;box-shadow:none!important;color:#1d4ed8!important;text-decoration:none!important;outline:none!important;transform:none!important} .client-note-option-actions{display:flex;align-items:center;gap:6px}.client-note-option-actions form{margin:0}.client-note-option-actions button{width:32px;height:32px;display:grid;place-items:center;padding:0;border:1px solid #dbe4ef;border-radius:8px;background:#fff;color:#43638f;cursor:pointer}.client-note-option-actions button:hover{border-color:#abc6ef;background:#eef5ff;color:#1d4ed8}.client-note-option-actions svg{width:14px;height:14px} .client-note-view-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px 16px;padding:20px 22px 8px}.client-note-view-grid>div{padding:13px 14px;border:1px solid #e1e7f0;border-radius:11px;background:#fbfcff}.client-note-view-grid>div.wide{grid-column:1/-1}.client-note-view-grid span,.client-note-view-grid strong{display:block}.client-note-view-grid span{color:#7e8ba0;font-size:9.5px;font-weight:850;letter-spacing:.06em;text-transform:uppercase}.client-note-view-grid strong{margin-top:5px;color:#24364f;font-size:12.5px}.client-note-view-grid p{margin:7px 0 0;white-space:pre-wrap;color:#516176;font-size:12px;line-height:1.6} @media(max-width:620px){.client-note-view-grid{grid-template-columns:1fr;padding-left:15px;padding-right:15px}.client-note-view-grid>div.wide{grid-column:auto}} /* ========================================================== Client Statement โ€” Contacts / Knowledge Base parity + A4 document ========================================================== */ .client-statement-workspace{display:grid;gap:14px} .client-statement-controls{min-height:66px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 16px;border:1px solid #e1e7f0;border-radius:16px;background:linear-gradient(100deg,#fff 0%,#f8fbff 54%,#f7f4ff 100%);box-shadow:0 10px 30px rgba(31,46,75,.06)} .client-statement-period{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.client-statement-period select,.client-statement-period input,.client-statement-period button{height:36px;min-height:36px;border:1px solid #ccd7e6;border-radius:9px;background:#fff;color:#34455e;padding:0 11px;font:inherit;font-size:11.5px;outline:0}.client-statement-period select{min-width:225px}.client-statement-period select:focus,.client-statement-period input:focus{border-color:#8eb0eb;box-shadow:0 0 0 3px rgba(37,99,235,.08)}.client-statement-period button{cursor:pointer;font-weight:750;color:#315fc5}.client-statement-period button:hover{background:#eff5ff;border-color:#aac3eb}.client-statement-custom{display:flex;gap:8px;flex-wrap:wrap}.client-statement-custom[hidden]{display:none!important} .client-statement-tools{display:flex;align-items:center;gap:7px}.client-statement-tools button,.client-statement-tools a{width:36px;height:36px;display:grid;place-items:center;border:1px solid #ccd7e6;border-radius:9px;background:#fff;color:#43638f;text-decoration:none;cursor:pointer}.client-statement-tools button:hover,.client-statement-tools a:hover{border-color:#aac3eb;background:#eff5ff;color:#1d4ed8}.client-statement-tools button:disabled{opacity:.42;cursor:not-allowed;background:#fff}.client-statement-tools svg{width:15px;height:15px} .client-statement-document{position:relative;overflow:hidden;width:100%;padding:28px 30px 24px;border:1px solid #dfe6f0;border-radius:18px;background:#fff;box-shadow:0 14px 36px rgba(31,46,75,.08);color:#26364d;-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}.client-statement-document:before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,#4338ca,#2563eb,#06b6d4)} .client-statement-document-head{display:flex;align-items:flex-start;justify-content:space-between;gap:28px;padding:6px 0 23px;border-bottom:1px solid #e7ecf3}.client-statement-brand{display:flex;align-items:center;gap:14px;min-width:0}.client-statement-logo{width:54px;height:54px;flex:none;display:grid;place-items:center;overflow:hidden;border:1px solid #e1e7f0;border-radius:13px;background:#fff;box-shadow:0 5px 14px rgba(31,46,75,.06)}.client-statement-logo img{display:block;width:100%;height:100%;object-fit:contain;padding:5px}.client-statement-logo-fallback{background:linear-gradient(135deg,#eef2ff,#e8f8ff);color:#4655ca;font-size:19px;font-weight:900}.client-statement-brand>div{min-width:0}.client-statement-brand strong{display:block;color:#17263d;font-size:18px;font-weight:900;letter-spacing:-.3px}.client-statement-brand p{max-width:520px;margin:5px 0 0;color:#69798e;font-size:10.5px;line-height:1.45}.client-statement-brand small{display:block;margin-top:4px;color:#8794a6;font-size:10px}.client-statement-title-block{text-align:right;flex:none}.client-statement-title-block span,.client-statement-title-block strong,.client-statement-title-block small{display:block}.client-statement-title-block span{color:#315fc5;font-size:18px;font-weight:900;letter-spacing:.015em;text-transform:uppercase}.client-statement-title-block strong{margin-top:5px;color:#4d6079;font-size:10.5px}.client-statement-title-block small{margin-top:4px;color:#9aa5b4;font-size:9.5px} .client-statement-party-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(330px,.92fr);gap:28px;padding:24px 0 25px}.client-statement-billto{padding:5px 0}.client-statement-billto>span{display:block;margin-bottom:9px;color:#7b899d;font-size:9.5px;font-weight:900;letter-spacing:.09em;text-transform:uppercase}.client-statement-billto>strong{display:block;margin-bottom:7px;color:#20314a;font-size:14px;font-weight:850}.client-statement-billto p{margin:2px 0;color:#65758a;font-size:11px;line-height:1.5}.client-statement-summary-card{overflow:hidden;border:1px solid #dfe7f1;border-radius:13px;background:#fbfdff}.client-statement-summary-card>header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-bottom:1px solid #e5ebf3;background:linear-gradient(100deg,#f8fbff,#f7f5ff)}.client-statement-summary-card>header span,.client-statement-summary-card>header small{display:block}.client-statement-summary-card>header span{color:#324760;font-size:11px;font-weight:850;text-transform:uppercase;letter-spacing:.045em}.client-statement-summary-card>header small{margin-top:2px;color:#8a97a8;font-size:9.5px}.client-statement-summary-card>header svg{width:18px;height:18px;color:#596cd8}.client-statement-summary-card dl{margin:0;padding:8px 14px 10px}.client-statement-summary-card dl>div{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:8px 0;color:#4d5f77;font-size:10.5px}.client-statement-summary-card dt,.client-statement-summary-card dd{margin:0}.client-statement-summary-card dd{font-weight:750;color:#2f4058}.client-statement-summary-card .total{margin-top:2px;border-top:1px solid #dfe7f1;padding-top:10px}.client-statement-summary-card .total dt,.client-statement-summary-card .total dd{font-weight:900;color:#1f3657} .client-statement-table-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin:3px 0 11px}.client-statement-table-heading span,.client-statement-table-heading small{display:block}.client-statement-table-heading span{color:#223750;font-size:12.5px;font-weight:850}.client-statement-table-heading small{margin-top:3px;color:#8b98aa;font-size:9.5px}.client-statement-table-heading>strong{display:inline-flex;align-items:center;min-height:25px;padding:3px 9px;border-radius:999px;background:#eef4ff;color:#315fc5;font-size:9.5px;font-weight:850} .client-statement-table-wrap{overflow:auto;border:1px solid #dfe7f1;border-radius:12px}.client-statement-data-table{width:100%;min-width:820px;border-collapse:separate;border-spacing:0}.client-statement-data-table thead th{height:43px;padding:10px 13px;border:0!important;border-bottom:1px solid #dfe7f2!important;background:linear-gradient(90deg,#eef4ff,#f6f4ff)!important;color:#3d4f68!important;font-size:9.5px!important;font-weight:900!important;letter-spacing:.055em!important;text-transform:uppercase!important;text-align:left}.client-statement-data-table tbody td{height:52px;padding:10px 13px!important;border:0!important;border-bottom:1px solid #edf1f5!important;background:#fff;color:#34445b;font-size:10.5px!important;vertical-align:middle}.client-statement-data-table tbody tr:hover td{background:#f8fbff!important}.client-statement-data-table th:nth-child(3),.client-statement-data-table th:nth-child(4),.client-statement-data-table th:nth-child(5),.client-statement-data-table td:nth-child(3),.client-statement-data-table td:nth-child(4),.client-statement-data-table td:nth-child(5){text-align:right}.client-statement-data-table td:nth-child(2) a{color:#234f92!important;font-weight:800;text-decoration:none}.client-statement-data-table td:nth-child(2) a:hover{color:#1d4ed8!important}.client-statement-data-table td:nth-child(2) small{display:block;margin-top:3px;color:#97a3b2;font-size:9px}.client-statement-entry-type{display:inline-flex;align-items:center;min-height:21px;margin-right:7px;padding:2px 7px;border-radius:999px;background:#eef4ff;color:#315fc5;font-size:8.5px;font-weight:850}.client-statement-entry-type.payment{background:#e8fbf4;color:#07855f} .client-statement-balance-due{width:min(330px,100%);margin:18px 0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:15px 16px;border:1px solid #d8e3f2;border-radius:12px;background:linear-gradient(100deg,#f8fbff,#f7f5ff)}.client-statement-balance-due span{color:#50627a;font-size:10.5px;font-weight:900;text-transform:uppercase;letter-spacing:.045em}.client-statement-balance-due strong{color:#244fac;font-size:15px;font-weight:900} .client-statement-document-footer{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:24px;padding-top:13px;border-top:1px solid #edf1f5;color:#929dab;font-size:9px}.client-statement-document-footer strong{color:#728096} @media(max-width:900px){.client-statement-controls{align-items:stretch;flex-direction:column}.client-statement-tools{justify-content:flex-end}.client-statement-party-grid{grid-template-columns:1fr}.client-statement-title-block{text-align:left}.client-statement-document-head{flex-direction:column}.client-statement-period select{min-width:180px}} @media(max-width:620px){.client-statement-document{padding:22px 16px 18px;border-radius:14px}.client-statement-brand{align-items:flex-start}.client-statement-logo{width:46px;height:46px}.client-statement-title-block span{font-size:15px}.client-statement-period,.client-statement-custom{align-items:stretch;flex-direction:column}.client-statement-period select,.client-statement-period input,.client-statement-period button{width:100%}.client-statement-tools{justify-content:flex-start}.client-statement-balance-due{width:100%}} @media print{ @page{size:A4;margin:10mm} body:has(#client-statement-document) *{visibility:hidden!important} body:has(#client-statement-document) #client-statement-document,body:has(#client-statement-document) #client-statement-document *{visibility:visible!important} body:has(#client-statement-document) #client-statement-document{position:absolute!important;left:0!important;top:0!important;width:100%!important;max-width:none!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:#fff!important;-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important} .client-statement-document:before{display:none!important} .client-statement-data-table{min-width:0!important} .client-statement-table-wrap{overflow:visible!important} .client-statement-data-table thead{display:table-header-group} .client-statement-data-table tr{break-inside:avoid;page-break-inside:avoid} .client-statement-document a{color:inherit!important;text-decoration:none!important} } /* ========================================================== Client Invoices โ€” exact Contacts / Knowledge Base parity ========================================================== */ .client-invoice-header-new{ display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 15px; border:0;border-radius:10px;background:linear-gradient(135deg,#4338ca,#2563eb);color:#fff!important; font-size:12px;font-weight:800;text-decoration:none;box-shadow:0 9px 20px rgba(37,99,235,.22) } .client-invoice-header-new:hover{transform:translateY(-1px);box-shadow:0 12px 24px rgba(37,99,235,.28)} .client-invoice-header-new svg{width:16px;height:16px} .client-invoice-workspace{min-width:0} .client-invoice-table-card{overflow:hidden;border:1px solid #e1e7f0;border-radius:16px;background:#fff;box-shadow:0 10px 30px rgba(31,46,75,.07)} .client-invoice-table-toolbar{ min-height:66px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 16px; border-bottom:1px solid #e7ecf3;background:linear-gradient(100deg,#fff 0%,#f8fbff 52%,#f7f4ff 100%) } .client-invoice-table-left{display:flex;align-items:center;gap:7px;flex-wrap:wrap} .client-invoice-tool-button,.client-invoice-icon-button,.client-invoice-table-search input,.client-invoice-table-search span{ height:36px;border:1px solid #ccd7e6;background:#fff;color:#3d4d64;font:inherit } .client-invoice-tool-button,.client-invoice-icon-button{ display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:9px;padding:0 11px; font-size:11.5px;font-weight:750;text-decoration:none } .client-invoice-tool-button:hover,.client-invoice-icon-button:hover{border-color:#aac3eb;background:#eff5ff;color:#1d4ed8} .client-invoice-tool-button svg,.client-invoice-icon-button svg{width:14px;height:14px} .client-invoice-icon-button{width:36px;padding:0} .client-invoice-table-search{display:flex;height:36px} .client-invoice-table-search span{width:39px;display:grid;place-items:center;border-radius:9px 0 0 9px;border-right:0;color:#718198} .client-invoice-table-search span svg{width:15px;height:15px} .client-invoice-table-search input{width:min(280px,28vw);min-height:36px!important;padding:0 11px;border-radius:0 9px 9px 0;outline:0} .client-invoice-table-search input:focus{border-color:#8eb0eb!important;box-shadow:0 0 0 3px rgba(37,99,235,.08)!important} .client-invoice-table-scroll{overflow:auto} .client-invoice-data-table{width:100%;min-width:1060px;border-collapse:separate!important;border-spacing:0!important;background:#fff} .client-invoice-data-table thead th{ height:43px;padding:10px 14px!important;border:0!important;border-bottom:1px solid #dfe7f2!important; background:linear-gradient(90deg,#eef4ff,#f6f4ff)!important;color:#3d4f68!important; font-size:10.5px!important;font-weight:850!important;letter-spacing:.055em!important;text-transform:uppercase!important } .client-invoice-data-table tbody td{ height:66px;padding:11px 14px!important;border:0!important;border-bottom:1px solid #edf1f5!important; background:#fff!important;color:#34445b!important;font-size:12.5px!important;vertical-align:middle!important } .client-invoice-data-table tbody tr:hover td{background:#f8fbff!important} .client-invoice-data-table th:first-child{width:25%} .client-invoice-options-col{width:125px;text-align:right!important} .client-invoice-person-cell{display:flex;align-items:center;gap:11px;min-width:0} .client-invoice-avatar{width:36px;height:36px;flex:none;display:grid;place-items:center;border-radius:10px;background:linear-gradient(135deg,#eef2ff,#e8f8ff);color:#4f63db} .client-invoice-avatar svg{width:15px;height:15px} .client-invoice-person-cell>div{min-width:0} .client-invoice-person-cell>div>a{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#203f72!important;font-weight:750!important;text-decoration:none} .client-invoice-person-cell>div>a:hover{color:#1d4ed8!important} .client-invoice-person-cell small{display:block;margin-top:2px;color:#98a3b2;font-size:9.5px} .client-invoice-inline-actions{display:flex!important;align-items:center;gap:5px;min-height:16px;margin-top:3px;color:#a1abba;font-size:10px;opacity:1!important;visibility:visible!important} .client-invoice-inline-actions a,.client-invoice-inline-actions button{border:0;padding:0;background:transparent;color:#55729a!important;font:inherit;font-size:10px!important;font-weight:600!important;text-decoration:none;cursor:pointer} .client-invoice-inline-actions a:hover,.client-invoice-inline-actions button:hover{color:#1d4ed8!important;text-decoration:none} .client-invoice-inline-actions form{display:inline;margin:0;padding:0} .client-invoice-primary-text{color:#3d4f68;font-size:12px;font-weight:700} .client-invoice-muted-text{color:#66758a;font-size:12px} .client-invoice-status-kb{display:inline-flex;align-items:center;min-height:24px;padding:3px 8px;border-radius:999px;background:#eef4ff;color:#315fc5;font-size:10.5px;font-weight:800;white-space:nowrap} .client-invoice-status-kb.paid{background:#e8fbf4;color:#07855f} .client-invoice-status-kb.unpaid,.client-invoice-status-kb.overdue{background:#fff4f4;color:#b94a55} .client-invoice-status-kb.partially-paid{background:#fff8e8;color:#9a6a10} .client-invoice-status-kb.draft{background:#f1f3f6;color:#68778b} .client-invoice-option-actions{display:flex;align-items:center;justify-content:flex-end;gap:6px} .client-invoice-option-actions form{display:inline-flex;margin:0;padding:0} .client-invoice-option-actions a,.client-invoice-option-actions button{width:32px;height:32px;display:grid;place-items:center;padding:0;border:1px solid #dbe4ef;border-radius:8px;background:#fff;color:#43638f;text-decoration:none;cursor:pointer;font:inherit} .client-invoice-option-actions a:hover,.client-invoice-option-actions button:hover{border-color:#abc6ef;background:#eef5ff;color:#1d4ed8} .client-invoice-option-actions svg{width:14px;height:14px} .client-invoice-empty-kb{text-align:center!important;padding:48px 18px!important;color:#8794a7!important} .client-invoice-empty-kb>svg{display:block;width:27px;height:27px;margin:0 auto 8px;color:#9aa7b8} .client-invoice-empty-kb strong,.client-invoice-empty-kb span{display:block} .client-invoice-empty-kb strong{color:#516176;font-size:12.5px} .client-invoice-empty-kb span{margin-top:3px;font-size:11px} .client-invoice-table-footer{min-height:62px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 16px;border-top:1px solid #e5eaf1;background:#fbfcff;color:#748196;font-size:11.5px} .client-invoice-footer-summary{display:flex;align-items:center;gap:15px;flex-wrap:wrap;justify-content:flex-end} .client-invoice-footer-summary span{white-space:nowrap} .client-invoice-footer-summary strong{color:#42546c;font-weight:800} @media(max-width:900px){ .client-invoice-table-toolbar{align-items:stretch;flex-direction:column} .client-invoice-table-search,.client-invoice-table-search input{width:100%} .client-invoice-table-search input{flex:1} .client-invoice-table-footer{align-items:flex-start;flex-direction:column} .client-invoice-footer-summary{justify-content:flex-start} } /* Invoice inline Delete โ€” match Contacts Edit/View/Delete visibility */ .client-invoice-inline-actions form > button.client-invoice-inline-delete{ appearance:none!important; -webkit-appearance:none!important; display:inline!important; width:auto!important; height:auto!important; min-width:0!important; min-height:0!important; margin:0!important; padding:0!important; border:0!important; border-radius:0!important; background:transparent!important; background-image:none!important; box-shadow:none!important; color:#55729a!important; font:inherit!important; font-size:10px!important; font-weight:600!important; line-height:inherit!important; letter-spacing:normal!important; text-transform:none!important; text-decoration:none!important; cursor:pointer!important; } .client-invoice-inline-actions form > button.client-invoice-inline-delete:hover, .client-invoice-inline-actions form > button.client-invoice-inline-delete:focus, .client-invoice-inline-actions form > button.client-invoice-inline-delete:active{ border:0!important; background:transparent!important; background-image:none!important; box-shadow:none!important; color:#1d4ed8!important; text-decoration:none!important; outline:none!important; transform:none!important; } /* ========================================================== Client workspace โ€” Invoice design system alignment ยท 2026-10-01 ========================================================== */ .client-kb-page{max-width:1600px;margin:0 auto;color:#263954} .client-kb-hero{min-height:0;margin:0 0 14px;padding:18px 20px;border:1px solid #dce4ef;border-radius:14px;background:linear-gradient(120deg,#fff 62%,#f5f8ff 100%);box-shadow:0 6px 20px rgba(31,48,76,.055);color:#263954} .client-kb-hero:before,.client-kb-hero:after{display:none} .client-kb-hero-main{gap:13px}.client-kb-hero-icon{width:42px;height:42px;border:0;border-radius:10px;background:#eef3ff;color:#4965d7;backdrop-filter:none}.client-kb-hero-icon svg{width:18px;height:18px;color:#4965d7} .client-kb-eyebrow{margin-bottom:3px;color:#5f6bd6;font-size:9.5px;letter-spacing:.1em}.client-kb-title-row{gap:8px}.client-kb-title-row h1{color:#18263b!important;font-size:24px;line-height:1.15;font-weight:800;letter-spacing:-.025em} .client-kb-status{min-height:23px;padding:0 8px;border:1px solid #d7e0eb;border-radius:999px;background:#f7f9fc;color:#5a6b80;font-size:9.5px;font-weight:750}.client-kb-status.active{background:#eefaf4;border-color:#d5f0e1;color:#198754}.client-kb-status.inactive{background:#f4f6f9;color:#66778b}.client-kb-status.prospect{background:#fff8ec;border-color:#f1dfba;color:#a56d10} .client-kb-hero-main p{margin:5px 0 0;color:#76859a;font-size:11.5px;line-height:1.45}.client-kb-meta{gap:6px;margin-top:8px}.client-kb-meta span,.client-kb-meta a{min-height:26px;padding:0 8px;border:1px solid #dce4ed;border-radius:6px;background:#fff;color:#55708f!important;font-size:9.5px;font-weight:650}.client-kb-meta a:hover{background:#f7f9fd;color:#285fc1!important}.client-kb-meta svg{width:11px;height:11px} .client-kb-hero-actions{gap:7px}.client-kb-hero-stat{min-width:88px;padding:8px 10px;border:1px solid #dce4ed;border-radius:9px;background:#fff;backdrop-filter:none}.client-kb-hero-stat span{color:#718096;font-size:8.5px}.client-kb-hero-stat strong{margin-top:2px;color:#21344f;font-size:16px}.client-kb-edit{min-height:36px;padding:0 12px;border:1px solid #3157df;border-radius:8px;background:#3157df;color:#fff!important;font-size:11px;font-weight:750;box-shadow:0 6px 14px rgba(49,87,223,.18)}.client-kb-edit:hover{background:#2749c6;transform:none} .client-kb-shell{grid-template-columns:235px minmax(0,1fr)!important;gap:14px!important}.client-kb-nav{top:76px;border:1px solid #dce3ec!important;border-radius:12px!important;box-shadow:0 5px 18px rgba(31,48,76,.055)!important}.client-kb-nav-head{min-height:58px;padding:11px 13px;border-bottom:1px solid #e3e9f1;background:linear-gradient(90deg,#fbfcff,#f7f9ff)}.client-kb-nav-head span{color:#5f6bd6;font-size:9px}.client-kb-nav-head strong{font-size:11.5px}.client-kb-nav-search{margin:10px}.client-kb-nav-search input{height:32px;border-radius:6px;border-color:#cbd6e4;background:#fff;font-size:10.5px}.client-kb-nav-search>svg{top:9px;width:13px;height:13px}.client-kb-nav nav{gap:1px;padding:0 8px 9px}.client-kb-nav nav a{min-height:36px;padding:7px 9px!important;border-radius:7px!important;color:#53647a!important;font-size:10.5px!important;font-weight:650!important}.client-kb-nav nav a:hover{border-color:#e0e7f0;background:#f8fafc!important;color:#285fc1!important}.client-kb-nav nav a.active{border-color:#cfdcf2;background:#eef3fb!important;color:#1f4f95!important}.client-kb-nav nav a svg{width:14px!important;height:14px!important}.client-kb-nav nav a.active svg{color:#3157df!important}.client-kb-nav nav a small{min-width:20px;height:20px;background:#f1f4f8;font-size:8.5px!important}.client-kb-nav nav a.active small{background:#fff;color:#285fc1} .client-kb-section-head{min-height:72px;margin-bottom:10px;padding:12px 14px;border:1px solid #dce4ef;border-radius:12px;background:linear-gradient(120deg,#fff 64%,#f5f8ff 100%);box-shadow:0 4px 14px rgba(31,48,76,.045)}.client-kb-section-icon{width:36px;height:36px;border-radius:9px;background:#eef3ff;color:#4965d7}.client-kb-section-icon svg{width:15px;height:15px}.client-kb-section-copy>span{font-size:9px}.client-kb-section-copy h2{margin:1px 0 2px!important;color:#18263b!important;font-size:17px!important;font-weight:800!important}.client-kb-section-copy p{font-size:10.5px}.client-kb-section-count{min-height:24px;padding:0 8px;border-color:#d7e3fb;background:#eef4ff;color:#315fc5;font-size:9px}.client-kb-section-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:flex-end} .client-contact-header-new,.client-contract-header-new,.client-note-header-new,.client-invoice-header-new{min-height:34px!important;padding:0 11px!important;border:1px solid #3157df!important;border-radius:7px!important;background:#3157df!important;color:#fff!important;font-size:10.5px!important;font-weight:750!important;box-shadow:0 5px 12px rgba(49,87,223,.16)!important}.client-contact-header-new:hover,.client-contract-header-new:hover,.client-note-header-new:hover,.client-invoice-header-new:hover{background:#2749c6!important;transform:none!important}.client-contact-header-new svg,.client-contract-header-new svg,.client-note-header-new svg,.client-invoice-header-new svg{width:13px!important;height:13px!important} .client-kb-main>.client-card{border:1px solid #dce3ec!important;border-radius:12px!important;box-shadow:0 5px 18px rgba(31,48,76,.055)!important;background:#fff!important} /* Overview */ .client-overview-hero{padding:18px 20px;margin-bottom:10px;border:1px solid #dce4ef;border-radius:12px;background:#fff;box-shadow:0 4px 14px rgba(31,48,76,.045)}.client-overview-avatar{width:50px;height:50px;border-radius:12px;background:#eef3ff;color:#4965d7;font-size:17px;box-shadow:none}.client-overview-title h2{font-size:20px!important;color:#18263b!important}.client-overview-identity p{margin:4px 0 7px;font-size:11px}.client-overview-links{gap:10px}.client-overview-links a,.client-overview-links span{font-size:10.5px}.client-overview-links svg{width:12px;height:12px}.client-overview-secondary{min-height:34px!important;border-radius:7px!important;font-size:10.5px!important}.client-overview-actions .client-primary{min-height:34px!important;font-size:10.5px!important} .client-overview-stats{gap:8px;margin-bottom:10px}.client-overview-stats>a{min-height:66px;padding:11px 12px;border:1px solid #dce4ed;border-radius:10px;box-shadow:none}.client-overview-stats>a>span{width:32px;height:32px;border-radius:8px;background:#eef3ff;color:#4965d7}.client-overview-stats svg{width:15px}.client-overview-stats strong{font-size:15px}.client-overview-stats small{margin-top:2px;font-size:10px}.client-overview-stats em{font-size:9px}.client-overview-grid{gap:10px}.client-overview-panel{border:1px solid #dce3ec;border-radius:12px;box-shadow:0 5px 18px rgba(31,48,76,.04)}.client-overview-panel>header{padding:13px 14px;background:linear-gradient(90deg,#fbfcff,#f7f9ff);border-bottom:1px solid #e3e9f1}.client-overview-panel>header h3{font-size:12.5px}.client-overview-panel>header p{font-size:10px}.client-overview-panel>header>a{font-size:10px}.client-overview-details dl{padding:7px 14px 14px}.client-overview-details dl>div{padding:10px 4px}.client-overview-details dt{font-size:10px}.client-overview-details dd{margin-top:4px;font-size:11px}.client-overview-contact-list>a,.client-overview-activity>a{padding:10px 14px}.client-overview-contact-list strong,.client-overview-activity strong{font-size:11px}.client-overview-contact-list small,.client-overview-activity small{font-size:9.5px}.client-overview-addresses article{min-height:120px;padding:14px}.client-overview-addresses h4{font-size:11px}.client-overview-addresses article p{font-size:10.5px} /* Shared tables and cards across client sections */ .client-contact-table-card,.client-invoice-table-card,.client-contract-table-card,.client-note-table-card,.client-task-card,.client-invoice-card{border:1px solid #dce3ec!important;border-radius:12px!important;box-shadow:0 5px 18px rgba(31,48,76,.055)!important;background:#fff!important;overflow:hidden!important} .client-contact-table-toolbar,.client-invoice-table-toolbar,.client-contract-table-toolbar,.client-note-table-toolbar,.client-task-toolbar,.client-invoice-toolbar{min-height:58px!important;padding:10px 12px!important;border-bottom:1px solid #e3e9f1!important;background:linear-gradient(90deg,#fbfcff,#f7f9ff)!important} .client-contact-tool-button,.client-contact-icon-button,.client-invoice-tool-button,.client-invoice-icon-button,.client-contract-tool-button,.client-contract-icon-button,.client-note-tool-button,.client-note-icon-button{height:32px!important;border:1px solid #cbd6e4!important;border-radius:6px!important;background:#fff!important;color:#34465e!important;font-size:10.5px!important;font-weight:650!important;box-sizing:border-box}.client-contact-icon-button,.client-invoice-icon-button,.client-contract-icon-button,.client-note-icon-button{width:32px!important;padding:0!important}.client-contact-tool-button:hover,.client-invoice-tool-button:hover,.client-contract-tool-button:hover,.client-note-tool-button:hover{background:#f5f8fd!important;color:#285fc1!important;border-color:#b9c9df!important} .client-contact-table-search,.client-invoice-table-search,.client-contract-table-search,.client-note-table-search{height:32px!important}.client-contact-table-search span,.client-invoice-table-search span,.client-contract-table-search span,.client-note-table-search span{height:32px!important;width:38px!important;border:1px solid #cbd6e4!important;border-right:0!important;border-radius:6px 0 0 6px!important;background:#fff!important}.client-contact-table-search input,.client-invoice-table-search input,.client-contract-table-search input,.client-note-table-search input{height:32px!important;min-height:32px!important;width:210px!important;border:1px solid #cbd6e4!important;border-left:0!important;border-radius:0 6px 6px 0!important;background:#fff!important;font-size:10.5px!important} .client-contact-data-table,.client-invoice-data-table,.client-contract-data-table,.client-note-data-table,.client-task-table,.client-invoice-table{border-collapse:collapse!important;background:#fff!important}.client-contact-data-table thead th,.client-invoice-data-table thead th,.client-contract-data-table thead th,.client-note-data-table thead th,.client-task-table thead th,.client-invoice-table thead th{height:40px!important;padding:0 10px!important;border-top:0!important;border-bottom:1px solid #e4eaf1!important;background:#f8fafc!important;color:#21314c!important;font-size:10px!important;font-weight:750!important;letter-spacing:0!important;text-transform:none!important}.client-contact-data-table tbody td,.client-invoice-data-table tbody td,.client-contract-data-table tbody td,.client-note-data-table tbody td,.client-task-table tbody td,.client-invoice-table tbody td{height:58px!important;padding:9px 10px!important;border-bottom:1px solid #e8edf3!important;background:#fff!important;color:#33465f!important;font-size:11px!important;vertical-align:middle!important}.client-contact-data-table tbody tr:hover td,.client-invoice-data-table tbody tr:hover td,.client-contract-data-table tbody tr:hover td,.client-note-data-table tbody tr:hover td,.client-task-table tbody tr:hover td,.client-invoice-table tbody tr:hover td{background:#fbfcff!important} .client-contact-avatar,.client-invoice-avatar,.client-note-avatar,.client-contract-article-icon{width:32px!important;height:32px!important;border-radius:9px!important;background:#eef3ff!important;color:#4965d7!important}.client-contact-avatar svg,.client-invoice-avatar svg,.client-note-avatar svg,.client-contract-article-icon svg{width:14px!important;height:14px!important}.client-contact-inline-actions,.client-invoice-inline-actions,.client-contract-row-inline-actions,.client-note-inline-actions{font-size:9px!important}.client-contact-inline-actions a,.client-contact-inline-actions button,.client-invoice-inline-actions a,.client-invoice-inline-actions button,.client-contract-row-inline-actions a,.client-contract-row-inline-actions button,.client-note-inline-actions a,.client-note-inline-actions button{font-size:9px!important;font-weight:650!important;color:#55729a!important} .client-contact-option-actions a,.client-contact-option-actions button,.client-invoice-option-actions a,.client-invoice-option-actions button,.client-contract-row-actions a,.client-contract-row-actions button,.client-note-option-actions a,.client-note-option-actions button{width:30px!important;height:30px!important;border:1px solid #d4dfec!important;border-radius:7px!important;background:#fff!important;color:#55729a!important}.client-contact-option-actions svg,.client-invoice-option-actions svg,.client-contract-row-actions svg,.client-note-option-actions svg{width:13px!important;height:13px!important} .client-contact-table-footer,.client-invoice-table-footer,.client-contract-table-footer,.client-note-table-footer,.client-task-footer,.client-invoice-footer{min-height:56px!important;margin:0!important;padding:0 12px!important;border-top:1px solid #e6ebf2!important;background:#fff!important;color:#718096!important;font-size:10.5px!important} .client-contact-status,.client-invoice-status-kb,.client-contract-status,.client-contract-signature,.client-task-table .pw-task-status,.client-task-table .pw-priority{min-height:22px!important;padding:0 7px!important;border-radius:999px!important;font-size:9px!important;font-weight:750!important} /* Generic client record sections: payments, proposals, estimates, subscriptions, expenses, projects, tickets, files/vault/reminders/map */ .client-kb-main>.client-card{padding:0!important}.client-kb-main>.client-card>.client-actions{margin:0;padding:10px 12px;border-bottom:1px solid #e3e9f1;background:linear-gradient(90deg,#fbfcff,#f7f9ff)}.client-kb-main>.client-card>.client-toolbar{min-height:52px;margin:0!important;padding:9px 12px!important;border-bottom:1px solid #e3e9f1;background:#fff;color:#718096;font-size:10.5px}.client-kb-main>.client-card>.client-toolbar input{height:31px;width:210px;border:1px solid #cbd6e4;border-radius:6px;padding:0 9px;font-size:10.5px}.client-kb-main>.client-card>.client-table-wrap{overflow:auto}.client-kb-main>.client-card>.client-table-wrap table{width:100%;min-width:900px;border-collapse:collapse;font-size:11px}.client-kb-main>.client-card>.client-table-wrap th{height:40px;padding:0 10px;border-top:0;border-bottom:1px solid #e4eaf1;background:#f8fafc;color:#21314c;font-size:10px;font-weight:750}.client-kb-main>.client-card>.client-table-wrap td{height:56px;padding:9px 10px;border-bottom:1px solid #e8edf3;color:#33465f;vertical-align:middle}.client-kb-main>.client-card>.client-pagination{min-height:54px;margin:0;padding:0 12px;display:flex;align-items:center;border-top:1px solid #e6ebf2;color:#718096;font-size:10.5px} .client-add{padding:12px}.client-add summary{min-height:34px;padding:0 11px;border-radius:7px;background:#1f4f95;font-size:10.5px}.client-add form{max-width:none;padding:14px;border:1px solid #e1e7ef;border-radius:9px;background:#fbfcfe}.client-add label,.client-map-form label{font-size:10.5px}.client-add input,.client-add textarea,.client-map-form input{min-height:36px;border:1px solid #cfd9e5;border-radius:7px;font-size:11px}.client-map-form{padding:14px;gap:14px}.client-map-link,.client-notice{margin:0 14px 14px}.client-notice{border:1px solid #dbe7f7;border-left:3px solid #3157df;border-radius:7px;background:#f4f8ff;font-size:10.5px} /* Credit notes */ .client-invoice-summary{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important;margin:0 0 10px!important}.client-invoice-summary>div,.client-invoice-summary>a{min-height:46px!important;padding:0 12px!important;border:1px solid #dce4ed!important;border-radius:10px!important;background:#fff!important;color:#52647c!important;box-shadow:none!important}.client-invoice-summary strong{font-size:14px!important;color:#21344f!important}.client-invoice-actions{padding:10px 12px!important;border-bottom:1px solid #e3e9f1!important;background:linear-gradient(90deg,#fbfcff,#f7f9ff)!important}.client-invoice-secondary{min-height:32px!important;border-radius:6px!important;font-size:10.5px!important} /* Contracts */ .client-contract-summary{gap:8px!important}.client-contract-summary>div{min-height:58px!important;padding:10px 12px!important;border:1px solid #dce4ed!important;border-radius:10px!important;background:#fff!important;box-shadow:none!important}.client-contract-summary-icon{width:32px!important;height:32px!important;border-radius:8px!important}.client-contract-summary small{font-size:9.5px!important}.client-contract-summary strong{font-size:14px!important}.client-contract-modal{background:rgba(15,23,42,.48)!important;backdrop-filter:blur(4px)}.client-contract-modal-card,.client-note-modal-card{border:0!important;border-radius:14px!important;box-shadow:0 24px 70px rgba(15,23,42,.25)!important}.client-contract-modal-card>header,.client-note-modal-card>header{background:linear-gradient(120deg,#fff 58%,#f5f8ff 100%)!important;border-bottom:1px solid #e3e9f1!important}.client-contract-primary,.client-note-primary{background:#1f4f95!important;border-radius:7px!important;box-shadow:none!important}.client-contract-secondary,.client-note-secondary{border-radius:7px!important} /* Tasks */ .client-task-card{padding:0!important}.client-task-actions{margin:0!important;padding:10px 12px;border-bottom:1px solid #e3e9f1;background:linear-gradient(90deg,#fbfcff,#f7f9ff)}.client-task-filter-button{height:32px;padding:0 9px;border-radius:6px;font-size:10.5px}.client-task-relations{padding:12px;border-bottom:1px solid #e8edf3;font-size:10.5px}.client-task-extra{padding:10px 12px}.client-task-extra label{font-size:10px}.client-task-extra select,.client-task-extra button{height:31px;border-radius:6px;font-size:10.5px}.client-task-toolbar{margin:0!important;padding:10px 12px!important}.client-task-toolbar select,.client-task-toolbar a,.client-task-toolbar button,.client-task-toolbar label{height:31px;border-radius:6px;font-size:10.5px}.client-task-toolbar input{width:170px;font-size:10.5px}.client-task-tag{font-size:9px} /* Notes */ .client-note-details{max-width:420px;white-space:normal!important;color:#66758a!important;line-height:1.4}.client-note-date-main{font-size:10.5px!important}.client-note-date-time{font-size:9px!important}.client-note-view-grid{font-size:11px!important}.client-note-modal{background:rgba(15,23,42,.48)!important;backdrop-filter:blur(4px)} /* Statement โ€” invoice document treatment */ .client-statement-controls{margin-bottom:10px!important;padding:10px 12px!important;border:1px solid #dce3ec!important;border-radius:10px!important;background:linear-gradient(90deg,#fbfcff,#f7f9ff)!important;box-shadow:none!important}.client-statement-period select,.client-statement-period input,.client-statement-period button{height:32px!important;border:1px solid #cbd6e4!important;border-radius:6px!important;font-size:10.5px!important}.client-statement-tools button,.client-statement-tools a{width:32px!important;height:32px!important;border-radius:6px!important}.client-statement-document{padding:26px 28px 22px;border:1px solid #dce3ec;border-radius:12px;box-shadow:0 7px 24px rgba(31,48,76,.06)}.client-statement-document:before{height:3px;background:#3157df}.client-statement-logo{width:48px;height:48px;border-radius:10px}.client-statement-brand strong{font-size:17px}.client-statement-title-block span{color:#1f4f95;font-size:17px}.client-statement-summary-card{border-radius:10px!important;box-shadow:none!important}.client-statement-data-table thead th{height:40px!important;background:#f8fafc!important;color:#21314c!important;letter-spacing:0!important;text-transform:none!important}.client-statement-data-table tbody td{height:50px!important}.client-statement-balance-due{border-radius:10px;background:#f7f9fd}.client-statement-balance-due strong{color:#1f4f95} @media(max-width:1050px){.client-kb-shell{grid-template-columns:220px minmax(0,1fr)!important}.client-kb-hero{align-items:flex-start}.client-kb-hero-actions{width:auto}} @media(max-width:820px){.client-kb-shell{grid-template-columns:1fr!important}.client-kb-nav{position:static}.client-kb-nav nav{grid-template-columns:repeat(2,minmax(0,1fr))!important}.client-kb-hero{align-items:flex-start;flex-direction:column}.client-kb-hero-actions{width:100%;justify-content:flex-start}.client-overview-grid{grid-template-columns:1fr}.client-contact-table-toolbar,.client-invoice-table-toolbar,.client-contract-table-toolbar,.client-note-table-toolbar{align-items:stretch!important;flex-direction:column}.client-contact-table-search,.client-contact-table-search input,.client-invoice-table-search,.client-invoice-table-search input,.client-contract-table-search,.client-contract-table-search input,.client-note-table-search,.client-note-table-search input{width:100%!important}} @media(max-width:620px){.client-kb-hero{padding:16px;border-radius:12px}.client-kb-title-row h1{font-size:21px!important}.client-kb-hero-actions{display:grid;grid-template-columns:repeat(3,1fr)}.client-kb-edit{grid-column:1/-1;justify-content:center}.client-kb-nav nav{grid-template-columns:1fr!important}.client-kb-section-head{padding:11px}.client-overview-stats,.client-invoice-summary{grid-template-columns:1fr!important}.client-statement-document{padding:20px 14px 16px}} /* ========================================================== Client Workspace โ†’ Payments โ€” Invoice-matched redesign ========================================================== */ .client-payment-header-new{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 11px;border:1px solid #3157df;border-radius:7px;background:#3157df;color:#fff!important;text-decoration:none;font-size:10.5px;font-weight:800;box-shadow:0 5px 12px rgba(49,87,223,.14)} .client-payment-header-new:hover{background:#2749c7;border-color:#2749c7}.client-payment-header-new svg{width:13px;height:13px} .client-payment-workspace{max-width:none!important;margin:0!important;color:#263954}.client-payment-summary{grid-template-columns:repeat(5,minmax(0,1fr))!important;margin:0 0 10px!important}.client-payment-summary a,.client-payment-total-card{min-height:52px!important;padding:0 12px!important;border:1px solid #dce4ed!important;border-radius:10px!important;background:#fff!important;color:#52647c!important;box-shadow:none!important} .client-payment-summary a{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;text-decoration:none!important}.client-payment-summary a.active{border-color:#9bb5f0!important;background:#f2f6ff!important;color:#285fc1!important}.client-payment-summary a.active strong{color:#285fc1!important}.client-payment-summary span{font-size:10px!important;font-weight:750!important}.client-payment-summary strong{font-size:14px!important;color:#21344f!important}.client-payment-total-card{display:flex;align-items:center;justify-content:space-between;gap:8px}.client-payment-total-card strong{color:#198754!important} .client-payment-list-card{border-radius:12px!important;box-shadow:0 5px 18px rgba(31,48,76,.055)!important}.client-payment-list-card .payment-contact-toolbar{min-height:56px!important;padding:9px 12px!important;background:linear-gradient(90deg,#fbfcff,#f7f9ff)!important}.client-payment-list-card .payment-contact-toolbar-left>a,.client-payment-list-card .payment-contact-toolbar-left>button{height:31px!important;padding:0 9px!important;font-size:10.5px!important}.client-payment-list-card .payment-contact-toolbar-left>a:first-child{border-left:1px solid #cbd6e4!important;border-radius:6px!important;background:#3157df!important;border-color:#3157df!important;color:#fff!important;margin-right:6px}.client-payment-list-card .client-payment-reset{border-left:1px solid #cbd6e4!important;border-radius:6px!important}.client-payment-list-card .payment-contact-toolbar-left svg{width:12px!important;height:12px!important} .client-payment-search{display:flex!important;align-items:center!important;height:31px!important}.client-payment-search>span{display:grid;place-items:center;width:37px;height:31px;border:1px solid #cbd6e4;border-radius:6px 0 0 6px;background:#fff;color:#718198}.client-payment-search>span svg{width:12px;height:12px}.client-payment-search input{height:31px!important;width:210px!important;border:1px solid #cbd6e4!important;border-left:0!important;border-radius:0 6px 6px 0!important;padding:0 9px!important;font-size:10.5px!important;outline:0}.client-payment-search input:focus{border-color:#8eb0eb!important;box-shadow:0 0 0 3px rgba(37,99,235,.06)!important} .client-payment-table{min-width:1020px!important}.client-payment-table th{height:38px!important;padding:0 10px!important;background:#f8fafc!important;color:#21314c!important;font-size:10px!important;font-weight:750!important}.client-payment-table td{height:62px!important;padding:9px 10px!important;font-size:11px!important}.client-payment-table .payment-contact-avatar{width:30px!important;height:30px!important;border-radius:8px!important}.client-payment-table .payment-contact-number{font-size:11.5px!important}.client-payment-table .payment-contact-identity small{font-size:8.5px!important}.client-payment-table .payment-contact-inline-actions{font-size:8.5px!important}.client-payment-table .payment-contact-status{min-height:23px!important;padding:3px 7px!important;font-size:9.5px!important}.client-payment-table .payment-transaction-id{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9.5px!important}.client-payment-table .payment-contact-options a{width:29px!important;height:29px!important;border-radius:7px!important}.client-payment-table .payment-contact-options svg{width:12px!important;height:12px!important}.client-payment-footer{min-height:50px!important;padding:8px 12px!important;font-size:10.5px!important}.client-payment-footer>div{display:flex;align-items:center;gap:6px}.client-payment-footer b{display:inline-flex;align-items:center;min-height:27px;padding:0 8px;border-radius:6px;background:#eef3fb;color:#445d7c;font-size:10px}.client-payment-list-card .payment-contact-empty{padding:42px 18px!important}.client-payment-list-card .payment-contact-empty>i{width:22px;height:22px;margin-bottom:7px}.client-payment-list-card .payment-contact-empty strong,.client-payment-list-card .payment-contact-empty span{display:block}.client-payment-list-card .payment-contact-empty strong{color:#53647a;font-size:12px}.client-payment-list-card .payment-contact-empty span{margin:4px 0 9px;font-size:10px}.client-payment-list-card .payment-contact-empty a{font-size:10.5px;font-weight:750} @media(max-width:900px){.client-payment-summary{grid-template-columns:repeat(2,minmax(0,1fr))!important}.client-payment-total-card{grid-column:1/-1}.client-payment-list-card .payment-contact-toolbar{align-items:stretch!important;flex-direction:column!important}.client-payment-search,.client-payment-search input{width:100%!important}} @media(max-width:560px){.client-payment-summary{grid-template-columns:1fr!important}.client-payment-total-card{grid-column:auto}.client-payment-list-card .payment-contact-toolbar-left{flex-wrap:wrap!important}} /* ========================================================== Client workspace modules โ€” Invoice-matched redesign Proposals / Credit Notes / Estimates / Subscriptions / Expenses / Contracts / Projects / Tasks / Tickets / Files / Reminders / Map ========================================================== */ .client-module-header-new{ display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:0 12px; border:1px solid #3157df;border-radius:8px;background:#3157df;color:#fff!important; font:inherit;font-size:11.5px;font-weight:800;text-decoration:none;cursor:pointer;box-shadow:0 6px 14px rgba(49,87,223,.16) } .client-module-header-new.secondary{border-color:#ced8e5;background:#fff;color:#34506f!important;box-shadow:none} .client-module-header-new svg{width:14px;height:14px} .client-module-workspace,.client-resource-workspace,.client-map-workspace{color:#263954} .client-module-summary,.client-resource-summary,.client-map-summary{grid-template-columns:repeat(5,minmax(0,1fr));margin-bottom:12px} .client-module-summary article,.client-resource-summary article,.client-map-summary article{ display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:46px;padding:0 13px; border:1px solid #dce4ed;border-radius:10px;background:#fff;box-shadow:0 3px 12px rgba(31,48,76,.035) } .client-module-summary article span,.client-resource-summary article span,.client-map-summary article span{color:#52647c;font-size:10.5px;font-weight:700} .client-module-summary article strong,.client-resource-summary article strong,.client-map-summary article strong{color:#21344f;font-size:13.5px;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .client-module-list-card,.client-resource-card,.client-map-card,.client-map-preview-card{ background:#fff;border:1px solid #dce3ec;border-radius:12px;box-shadow:0 5px 18px rgba(31,48,76,.055);overflow:hidden } .client-module-toolbar-right{display:flex;align-items:center;gap:8px}.client-module-status-filter{ height:32px;min-width:145px;border:1px solid #cbd6e4;border-radius:6px;background:#fff;color:#34465e;padding:0 9px;font:inherit;font-size:11px } .client-module-search span,.client-resource-search span{width:38px;height:32px;display:grid;place-items:center;border:1px solid #cbd6e4;border-right:0;border-radius:6px 0 0 6px;background:#fff;color:#718198} .client-module-search input,.client-resource-search input{width:210px!important;height:32px!important;border:1px solid #cbd6e4!important;border-left:0!important;border-radius:0 6px 6px 0!important;padding:0 10px!important;background:#fff!important;color:#34465e!important;font-size:11px!important} .client-module-search svg,.client-resource-search svg{width:13px;height:13px}.client-module-table{min-width:1120px}.client-module-table td{height:64px}.client-module-options-head{text-align:right!important;width:70px}.client-module-identity .invoice-contact-avatar{background:#eef3ff;color:#4965d7}.client-module-empty{text-align:center!important;padding:42px 18px!important;color:#77869b!important}.client-module-empty svg{display:block;width:25px;height:25px;margin:0 auto 8px}.client-module-empty strong,.client-module-empty span,.client-module-empty a{display:block}.client-module-empty strong{color:#516176}.client-module-empty span{margin-top:3px;font-size:11px}.client-module-empty a{width:max-content;margin:10px auto 0;color:#285fc1;text-decoration:none;font-weight:700}.client-module-footer b,.client-resource-footer b{max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:#eaf0f8!important;color:#25405f!important;padding:7px 10px;border-radius:7px} /* Dedicated credit notes โ€” align to invoice list */ .client-invoice-card{ padding:0!important;border:1px solid #dce3ec!important;border-radius:12px!important;background:#fff!important; box-shadow:0 5px 18px rgba(31,48,76,.055)!important;overflow:hidden!important } .client-invoice-actions{display:flex!important;align-items:center!important;gap:7px!important;margin:0!important;padding:12px 14px!important;border-bottom:1px solid #e3e9f1!important;background:linear-gradient(90deg,#fbfcff,#f7f9ff)!important} .client-invoice-actions .client-primary,.client-invoice-secondary{min-height:34px!important;display:inline-flex!important;align-items:center!important;gap:6px!important;padding:0 11px!important;border-radius:7px!important;font-size:11.5px!important;text-decoration:none!important}.client-invoice-actions svg{width:13px;height:13px}.client-invoice-actions .client-primary{background:#3157df!important;border:1px solid #3157df!important;color:#fff!important}.client-invoice-secondary{border:1px solid #cbd6e4!important;background:#fff!important;color:#34506f!important} .client-invoice-summary{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important;margin:0!important;padding:12px 14px!important;border-bottom:1px solid #e5eaf1!important;background:#fff!important}.client-invoice-summary article{min-height:58px!important;padding:10px 13px!important;border:1px solid #dce4ed!important;border-radius:9px!important;background:#fff!important;box-shadow:none!important}.client-invoice-summary span,.client-invoice-summary strong{display:block!important}.client-invoice-summary span{color:#66778d!important;font-size:10px!important;font-weight:750!important;text-transform:uppercase!important;letter-spacing:.045em!important}.client-invoice-summary strong{margin-top:6px!important;color:#21344f!important;font-size:16px!important} .client-invoice-toolbar{min-height:58px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;padding:9px 14px!important;margin:0!important;border-bottom:1px solid #e4eaf1!important;background:#fbfcff!important}.client-invoice-toolbar>div{display:flex!important}.client-invoice-toolbar select,.client-invoice-toolbar a{height:32px!important;box-sizing:border-box!important;border:1px solid #cbd6e4!important;background:#fff!important;color:#34465e!important;font-size:11px!important}.client-invoice-toolbar select{min-width:72px!important;padding:0 8px!important;border-radius:6px 0 0 6px!important}.client-invoice-toolbar a{width:34px!important;display:grid!important;place-items:center!important;border-left:0!important;border-radius:0 6px 6px 0!important}.client-invoice-toolbar label{display:flex!important;align-items:center!important;margin:0!important}.client-invoice-toolbar label>i,.client-invoice-toolbar label>svg{width:38px!important;height:32px!important;padding:9px!important;box-sizing:border-box!important;border:1px solid #cbd6e4!important;border-right:0!important;border-radius:6px 0 0 6px!important;background:#fff!important;color:#718198!important}.client-invoice-toolbar input{width:210px!important;height:32px!important;border:1px solid #cbd6e4!important;border-radius:0 6px 6px 0!important;padding:0 10px!important;font-size:11px!important}.client-invoice-table{min-width:980px!important;font-size:12px!important}.client-invoice-table th{height:40px!important;padding:0 11px!important;background:#f8fafc!important;color:#21314c!important;font-size:10.5px!important;font-weight:750!important;border-bottom:1px solid #e4eaf1!important}.client-invoice-table td{height:62px!important;padding:10px 11px!important;border-bottom:1px solid #e8edf3!important;color:#33465f!important}.client-invoice-status{display:inline-flex!important;align-items:center!important;min-height:23px!important;padding:0 8px!important;border:1px solid #d7e0eb!important;border-radius:999px!important;background:#f7f9fc!important;color:#5a6b80!important;font-size:9.5px!important;font-weight:750!important}.client-invoice-status.status-paid,.client-invoice-status.status-completed,.client-invoice-status.status-active{background:#eefaf4!important;border-color:#d5f0e1!important;color:#198754!important}.client-invoice-status.status-draft,.client-invoice-status.status-pending{background:#fff8ec!important;border-color:#f1dfba!important;color:#a56d10!important}.client-invoice-status.status-cancelled,.client-invoice-status.status-rejected{background:#fff2f2!important;border-color:#f3d0d0!important;color:#b63b45!important}.client-invoice-footer{min-height:58px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;padding:0 14px!important;margin:0!important;border-top:1px solid #e6ebf2!important;color:#718096!important;font-size:11px!important}.client-invoice-footer button,.client-invoice-footer b{min-width:30px;height:30px;border:1px solid #dce4ed;border-radius:7px;background:#fff;color:#66778d}.client-invoice-footer b{display:grid;place-items:center;background:#eaf0f8;color:#25405f} /* Contracts โ€” invoice list + invoice form modal */ .client-contract-workspace{color:#263954}.client-contract-table-card{border:1px solid #dce3ec!important;border-radius:12px!important;background:#fff!important;box-shadow:0 5px 18px rgba(31,48,76,.055)!important;overflow:hidden!important}.client-contract-table-toolbar{min-height:62px!important;padding:10px 14px!important;border-bottom:1px solid #e3e9f1!important;background:linear-gradient(90deg,#fbfcff,#f7f9ff)!important}.client-contract-tool-button,.client-contract-icon-button{height:32px!important;border:1px solid #cbd6e4!important;border-radius:6px!important;background:#fff!important;color:#34465e!important;font-size:11px!important}.client-contract-tool-button{padding:0 10px!important}.client-contract-icon-button{width:34px!important}.client-contract-table-search{height:32px!important}.client-contract-table-search span{width:38px!important;border:1px solid #cbd6e4!important;border-right:0!important;border-radius:6px 0 0 6px!important;background:#fff!important}.client-contract-table-search input{width:210px!important;height:32px!important;border:1px solid #cbd6e4!important;border-left:0!important;border-radius:0 6px 6px 0!important;font-size:11px!important}.client-contract-data-table{min-width:1100px!important;font-size:12px!important}.client-contract-data-table th{height:40px!important;padding:0 11px!important;background:#f8fafc!important;color:#21314c!important;font-size:10.5px!important;font-weight:750!important;text-transform:none!important;letter-spacing:0!important}.client-contract-data-table td{height:64px!important;padding:10px 11px!important;border-bottom:1px solid #e8edf3!important}.client-contract-article-icon{width:32px!important;height:32px!important;border-radius:9px!important;background:#eef3ff!important;color:#4965d7!important}.client-contract-group-badge,.client-contract-status,.client-contract-signature{min-height:23px!important;padding:0 8px!important;border-radius:999px!important;font-size:9.5px!important;font-weight:750!important}.client-contract-row-actions a,.client-contract-row-actions button{width:30px!important;height:30px!important;border:1px solid #d4dfec!important;border-radius:7px!important;background:#fff!important;color:#55729a!important}.client-contract-table-footer{min-height:58px!important;padding:0 14px!important;background:#fff!important;border-top:1px solid #e6ebf2!important;font-size:11px!important} .client-contract-modal{background:rgba(15,23,42,.52)!important;backdrop-filter:blur(4px)!important}.client-contract-modal-card{width:min(1000px,calc(100vw - 28px))!important;max-height:calc(100vh - 34px)!important;border:1px solid rgba(255,255,255,.72)!important;border-radius:16px!important;box-shadow:0 28px 80px rgba(15,23,42,.28)!important}.client-contract-modal-card>header{padding:18px 20px!important;background:linear-gradient(120deg,#fff 58%,#f5f8ff 100%)!important;border-bottom:1px solid #e2e8f0!important}.client-contract-modal-icon{background:#eef3ff!important;color:#4965d7!important}.client-contract-modal-eyebrow{color:#5f6bd6!important}.client-contract-client-context{margin:16px 20px 0!important;border:1px solid #dce4ed!important;border-radius:10px!important;background:#f8fbff!important}.client-contract-form-grid{padding:18px 20px!important;gap:14px!important}.client-contract-form-grid input,.client-contract-form-grid select,.client-contract-form-grid textarea{border:1px solid #cfd9e5!important;border-radius:7px!important;background:#fff!important}.client-contract-modal-card footer{padding:14px 20px!important;border-top:1px solid #e1e7ef!important;background:#fbfcff!important}.client-contract-primary{background:#3157df!important;border-color:#3157df!important}.client-contract-secondary{background:#fff!important;border:1px solid #cfd9e5!important;color:#51647d!important} /* Tasks โ€” invoice workspace treatment */ .client-task-card{padding:0!important;border:1px solid #dce3ec!important;border-radius:12px!important;background:#fff!important;box-shadow:0 5px 18px rgba(31,48,76,.055)!important;overflow:hidden!important}.client-task-actions{min-height:60px!important;padding:10px 14px!important;margin:0!important;border-bottom:1px solid #e3e9f1!important;background:linear-gradient(90deg,#fbfcff,#f7f9ff)!important}.client-task-actions .client-primary{min-height:34px!important;background:#3157df!important;border:1px solid #3157df!important;color:#fff!important;border-radius:7px!important;font-size:11.5px!important}.client-task-filter-button{height:34px!important;border:1px solid #cbd6e4!important;border-radius:7px!important;color:#34465e!important;font-size:11.5px!important}.client-task-relations{margin:0!important;padding:12px 14px!important;border-bottom:1px solid #e5eaf1!important;background:#fff!important;font-size:11px!important}.client-task-relations strong{color:#52647c!important;font-size:10px!important;text-transform:uppercase!important;letter-spacing:.05em!important}.client-task-relations label{font-size:11px!important;font-weight:650!important;color:#51647d!important}.client-task-extra{padding:12px 14px!important;border-bottom:1px solid #e5eaf1!important;background:#f9fbfe!important}.client-task-extra label{font-size:10.5px!important;font-weight:700!important;color:#53647a!important}.client-task-extra select,.client-task-extra button{height:32px!important;border:1px solid #cfd9e5!important;border-radius:6px!important;font-size:11px!important}.client-task-toolbar{min-height:58px!important;margin:0!important;padding:9px 14px!important;border-bottom:1px solid #e4eaf1!important;background:#fbfcff!important}.client-task-toolbar select,.client-task-toolbar a,.client-task-toolbar button,.client-task-toolbar label{height:32px!important;border:1px solid #cbd6e4!important;border-radius:6px!important;background:#fff!important;color:#34465e!important;font-size:11px!important}.client-task-toolbar input{width:190px!important;font-size:11px!important}.client-task-table{min-width:1050px!important;font-size:12px!important}.client-task-table th{height:40px!important;padding:0 11px!important;background:#f8fafc!important;color:#21314c!important;font-size:10.5px!important;font-weight:750!important;border:0!important;border-bottom:1px solid #e4eaf1!important}.client-task-table td{height:62px!important;padding:10px 11px!important;border:0!important;border-bottom:1px solid #e8edf3!important;color:#33465f!important}.client-task-table tbody tr:hover td{background:#fbfcff!important}.client-task-tag{border-radius:999px!important;background:#eef4ff!important;color:#315fc5!important;font-size:9.5px!important;font-weight:700!important}.client-task-footer{min-height:58px!important;margin:0!important;padding:0 14px!important;border-top:1px solid #e6ebf2!important;color:#718096!important;font-size:11px!important}.client-task-footer button{min-width:30px;height:30px;border:1px solid #dce4ed!important;border-radius:7px!important;background:#fff!important;padding:0 9px!important}.client-task-footer #client-task-page{min-width:30px;height:30px;display:grid;place-items:center;border-radius:7px;background:#eaf0f8!important;color:#25405f!important} /* Files + Reminders */ .client-resource-toolbar button{height:32px;display:inline-flex;align-items:center;gap:5px;padding:0 9px;border:1px solid #cbd6e4;background:#fff;color:#34465e;font:inherit;font-size:11px;cursor:pointer}.client-resource-toolbar button:first-child{border-radius:6px 0 0 6px}.client-resource-toolbar .invoice-contact-refresh{border-radius:0 6px 6px 0!important}.client-resource-create{border-bottom:1px solid #e4eaf1;background:#fbfcff}.client-resource-create>summary{cursor:pointer;list-style:none;padding:12px 14px;color:#3157df;font-size:11px;font-weight:800}.client-resource-create>summary::-webkit-details-marker{display:none}.client-resource-create form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:0 14px 14px}.client-resource-create label{display:grid;gap:5px;color:#53647a;font-size:10.5px;font-weight:700}.client-resource-create input,.client-resource-create textarea{min-height:36px;box-sizing:border-box;border:1px solid #cfd9e5;border-radius:7px;background:#fff;color:#30435c;padding:8px 10px;font:inherit;font-size:11.5px}.client-resource-create textarea{resize:vertical}.client-resource-check{grid-template-columns:auto 1fr!important;align-items:center!important;justify-content:start}.client-resource-check input{width:16px!important;min-height:16px!important}.client-resource-create-actions{display:flex;align-items:end}.client-resource-create-actions .client-primary{min-height:36px!important;display:inline-flex!important;align-items:center!important;gap:6px!important;background:#3157df!important;border:1px solid #3157df!important;color:#fff!important;border-radius:7px!important;font-size:11.5px!important}.client-resource-table{min-width:760px}.client-resource-title{display:block;color:#203f72;font-size:11.5px}.client-resource-table small{display:block;margin-top:2px;color:#8a98aa;font-size:9.5px} /* Map */ .client-map-summary{grid-template-columns:repeat(4,minmax(0,1fr))}.client-map-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);gap:12px}.client-map-card,.client-map-preview-card{padding:0!important}.client-map-card-head{display:flex;align-items:center;gap:10px;padding:15px 16px;border-bottom:1px solid #e4eaf1;background:linear-gradient(90deg,#fbfcff,#f7f9ff)}.client-map-card-head strong,.client-map-card-head small{display:block}.client-map-card-head strong{color:#21344f;font-size:12.5px}.client-map-card-head small{margin-top:2px;color:#8492a5;font-size:10px}.client-map-modern-form{display:grid!important;grid-template-columns:1fr 1fr!important;gap:14px!important;align-items:end!important;padding:18px 16px!important}.client-map-modern-form label{display:grid!important;gap:6px!important;font-size:10.5px!important;font-weight:700!important;color:#53647a!important}.client-map-modern-form input{height:38px!important;border:1px solid #cfd9e5!important;border-radius:7px!important;background:#fff!important;padding:0 10px!important;font-size:12px!important}.client-map-modern-form small{color:#8996a8;font-size:9.5px;font-weight:500}.client-map-form-actions{grid-column:1/-1;display:flex;justify-content:flex-end}.client-map-form-actions .client-primary{min-height:36px!important;display:inline-flex!important;align-items:center!important;gap:6px!important;background:#3157df!important;border:1px solid #3157df!important;color:#fff!important;border-radius:7px!important;font-size:11.5px!important}.client-map-preview-card{display:flex;min-height:250px;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px!important;background:linear-gradient(145deg,#fff,#f5f8ff)!important}.client-map-preview-icon{width:54px;height:54px;display:grid;place-items:center;border-radius:15px;background:#eef3ff;color:#4965d7}.client-map-preview-icon svg{width:25px;height:25px}.client-map-preview-eyebrow{margin-top:12px;color:#5f6bd6;font-size:9.5px;font-weight:850;letter-spacing:.1em;text-transform:uppercase}.client-map-preview-card h3{margin:5px 0 3px;color:#21344f;font-size:18px}.client-map-preview-card p{max-width:330px;margin:4px auto 14px;color:#718096;font-size:11px;line-height:1.55}.client-map-open{display:inline-flex;align-items:center;gap:6px;min-height:35px;padding:0 12px;border:1px solid #3157df;border-radius:7px;background:#3157df;color:#fff!important;text-decoration:none;font-size:11px;font-weight:800}.client-map-not-configured{display:inline-flex;align-items:center;gap:5px;padding:6px 9px;border-radius:999px;background:#fff8ec;color:#a56d10;font-size:10px;font-weight:700} /* Status unification for generic client modules */ .client-module-workspace .invoice-contact-status.status-active,.client-module-workspace .invoice-contact-status.status-completed,.client-module-workspace .invoice-contact-status.status-complete,.client-module-workspace .invoice-contact-status.status-accepted,.client-module-workspace .invoice-contact-status.status-paid,.client-module-workspace .invoice-contact-status.status-done,.client-module-workspace .invoice-contact-status.status-resolved{background:#eefaf4;border-color:#d5f0e1;color:#198754} .client-module-workspace .invoice-contact-status.status-draft,.client-module-workspace .invoice-contact-status.status-pending,.client-module-workspace .invoice-contact-status.status-open,.client-module-workspace .invoice-contact-status.status-in-progress,.client-module-workspace .invoice-contact-status.status-sent{background:#fff8ec;border-color:#f1dfba;color:#a56d10} .client-module-workspace .invoice-contact-status.status-cancelled,.client-module-workspace .invoice-contact-status.status-canceled,.client-module-workspace .invoice-contact-status.status-rejected,.client-module-workspace .invoice-contact-status.status-expired,.client-module-workspace .invoice-contact-status.status-closed{background:#fff2f2;border-color:#f3d0d0;color:#b63b45} @media(max-width:1100px){.client-module-summary,.client-resource-summary{grid-template-columns:repeat(3,1fr)}.client-map-grid{grid-template-columns:1fr}.client-map-summary{grid-template-columns:repeat(2,1fr)}} @media(max-width:760px){.client-module-toolbar{flex-wrap:wrap}.client-module-toolbar-right{width:100%;flex-wrap:wrap}.client-module-status-filter{flex:1}.client-module-search{margin-left:auto}.client-resource-toolbar{flex-wrap:wrap}.client-resource-create form{grid-template-columns:1fr}.client-map-modern-form{grid-template-columns:1fr!important}.client-map-form-actions{grid-column:auto}.client-invoice-summary{grid-template-columns:1fr!important}.client-contract-table-toolbar,.client-task-actions,.client-task-toolbar{flex-wrap:wrap!important}.client-module-summary,.client-resource-summary,.client-map-summary{grid-template-columns:repeat(2,1fr)}} @media(max-width:480px){.client-module-summary,.client-resource-summary,.client-map-summary{grid-template-columns:1fr}.client-module-search,.client-resource-search{width:100%}.client-module-search input,.client-resource-search input{width:100%!important}.client-module-toolbar-right{align-items:stretch}.client-module-status-filter{width:100%}} /* ========================================================== Clients โ†’ Proposals โ€” Invoice-matched dedicated workspace ========================================================== */ .client-proposal-workspace{max-width:1600px;margin:0 auto;color:#263954} .client-proposal-summary{grid-template-columns:repeat(7,minmax(0,1fr))} .client-proposal-list-card{overflow:hidden} .client-proposal-toolbar-new{background:#3157df!important;color:#fff!important;border-color:#3157df!important;font-weight:800!important;box-shadow:0 5px 12px rgba(49,87,223,.14)} .client-proposal-search button{cursor:default}.client-proposal-search button:hover{background:#fff;color:#34465e} .client-proposal-table{min-width:1080px}.client-proposal-table td{height:66px} .client-proposal-subject{display:block;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#40536d;font-weight:650} .client-proposal-value{color:#213d64;font-size:12px}.client-proposal-muted{color:#77869a;font-size:11px} .proposal-contact-status.status-expired{background:#fff2f2;border-color:#f3d0d0;color:#b63b45} .proposal-contact-status.status-cancelled,.proposal-contact-status.status-canceled{background:#f4f6f9;border-color:#dde3eb;color:#68778b} .client-proposal-empty>svg{display:block;width:25px;height:25px;margin:0 auto 8px;color:#9aa7b8}.client-proposal-empty strong,.client-proposal-empty span{display:block}.client-proposal-empty strong{color:#516176}.client-proposal-empty span{margin:3px 0 8px;font-size:11px} .client-proposal-footer-summary{display:flex;align-items:center;gap:18px}.client-proposal-footer-summary span{color:#7b899d;font-size:10.5px}.client-proposal-footer-summary strong{margin-left:4px;color:#29415f;font-size:11px} @media(max-width:1100px){.client-proposal-summary{grid-template-columns:repeat(4,1fr)}} @media(max-width:760px){.client-proposal-summary{grid-template-columns:repeat(2,1fr)}.client-proposal-toolbar{flex-wrap:wrap}.client-proposal-search{margin-left:auto}.client-proposal-footer{align-items:flex-start;flex-direction:column;padding:12px 14px}.client-proposal-footer-summary{flex-wrap:wrap;gap:10px}} /* ========================================================== Clients โ†’ Credit Notes โ€” Invoice workspace parity ========================================================== */ .client-credit-workspace{min-width:0} .client-credit-primary-tool{ background:#3157df!important;border-color:#3157df!important;color:#fff!important; box-shadow:0 5px 12px rgba(49,87,223,.16) } .client-credit-primary-tool:hover{background:#284dcc!important;border-color:#284dcc!important;color:#fff!important} .client-credit-note-table{min-width:1040px} .client-credit-note-table th:first-child{width:25%} .client-credit-avatar{background:linear-gradient(135deg,#eef2ff,#e9f7ff)!important;color:#4965d7!important} .client-credit-remaining{font-size:12px;font-weight:750;white-space:nowrap} .client-credit-remaining.has-balance{color:#9a6a10} .client-credit-remaining.is-applied{color:#07855f} .client-credit-status.open,.client-credit-status.active,.client-credit-status.sent{background:#eef5ff;color:#2e67b1} .client-credit-status.applied,.client-credit-status.closed,.client-credit-status.completed{background:#e8fbf4;color:#07855f} .client-credit-status.partially-applied,.client-credit-status.partial{background:#fff8e8;color:#9a6a10} .client-credit-status.refunded{background:#f5f2ff;color:#7054b4} .client-credit-status.void,.client-credit-status.cancelled,.client-credit-status.canceled{background:#fff4f4;color:#b94a55} .client-credit-status.draft{background:#f1f3f6;color:#68778b} .client-credit-footer-summary strong:last-child{color:#42546c} @media(max-width:900px){.client-credit-note-table{min-width:900px}} /* ========================================================== Clients โ†’ Estimates โ€” Invoice workspace parity ========================================================== */ .client-estimate-workspace{min-width:0} .client-estimate-table-card{overflow:hidden} .client-estimate-data-table{min-width:1080px} .client-estimate-data-table th:first-child{width:24%} .client-estimate-avatar{background:linear-gradient(135deg,#eef3ff,#f0f7ff)!important;color:#4965d7!important} .client-estimate-status.sent{background:#eef5ff;color:#2e67b1} .client-estimate-status.accepted{background:#e8fbf4;color:#07855f} .client-estimate-status.declined{background:#fff4f4;color:#b94a55} .client-estimate-status.expired{background:#fff8e8;color:#9a6a10} .client-estimate-status.draft{background:#f1f3f6;color:#68778b} .client-estimate-empty a{display:inline-flex;margin-top:9px;color:#3157df!important;font-size:10.5px;font-weight:750;text-decoration:none} .client-estimate-footer-summary strong{color:#42546c} @media(max-width:900px){.client-estimate-data-table{min-width:900px}} /* Clients โ†’ Subscriptions โ€” Invoice-style workspace */ .client-subscription-summary{grid-template-columns:repeat(5,minmax(0,1fr));margin-bottom:12px} .client-subscription-summary article{min-height:60px} .client-subscription-summary article:nth-child(1) span{color:#315fc5} .client-subscription-summary article:nth-child(2) span{color:#168754} .client-subscription-summary article:nth-child(3) span{color:#2f70c8} .client-subscription-summary article:nth-child(4) span{color:#b26a11} .client-subscription-summary article:nth-child(5) span{color:#8b4b58} .client-subscription-data-table{min-width:1120px} .client-subscription-avatar{background:linear-gradient(135deg,#edf4ff,#eef8ff);color:#2f6fd2} .client-subscription-status.active{background:#e8fbf4;color:#07855f} .client-subscription-status.future{background:#edf5ff;color:#2868b7} .client-subscription-status.past-due,.client-subscription-status.unpaid{background:#fff2f2;color:#b94a55} .client-subscription-status.incomplete{background:#fff8e8;color:#9a6a10} .client-subscription-status.canceled,.client-subscription-status.cancelled{background:#f4f5f7;color:#7b8796} .client-subscription-status.incomplete-expired{background:#f2f0f5;color:#75647f} .client-subscription-status.not-subscribed{background:#f1f3f6;color:#68778b} @media(max-width:1100px){.client-subscription-summary{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:700px){.client-subscription-summary{grid-template-columns:1fr}} /* Clients โ†’ Expenses โ€” Invoice-style workspace */ .client-expense-workspace{min-width:0} .client-expense-summary{grid-template-columns:repeat(3,minmax(0,1fr))!important} .client-expense-summary article:nth-child(1) span{color:#315fc5!important} .client-expense-summary article:nth-child(2) span{color:#2f70c8!important} .client-expense-summary article:nth-child(3) span{color:#68778b!important} .client-expense-summary article:nth-child(4) span{color:#b26a11!important} .client-expense-summary article:nth-child(5) span{color:#168754!important} .client-expense-summary article:nth-child(6) span{color:#4b5f78!important} .client-expense-toolbar{gap:10px} .client-expense-toolbar-right{display:flex;align-items:center;gap:8px;margin-left:auto} .client-expense-billing-filter{height:32px;min-width:124px;border:1px solid #cbd6e4;border-radius:6px;background:#fff;color:#34465e;padding:0 8px;font:inherit;font-size:10.5px} .client-expense-primary-tool{background:#3157df!important;border-color:#3157df!important;color:#fff!important;box-shadow:0 5px 12px rgba(49,87,223,.16)} .client-expense-primary-tool:hover{background:#284dcc!important;border-color:#284dcc!important;color:#fff!important} .client-expense-data-table{min-width:1160px} .client-expense-data-table th:first-child{width:24%} .client-expense-avatar{background:linear-gradient(135deg,#eef3ff,#eef8ff)!important;color:#315fc5!important} .client-expense-tax{display:block;margin-top:3px;color:#8b98a9;font-size:9px} .client-expense-billing.billed{background:#e8fbf4;color:#07855f} .client-expense-billing.not-invoiced{background:#fff8e8;color:#9a6a10} .client-expense-billing.non-billable{background:#f1f3f6;color:#68778b} .client-expense-status.paid{background:#e8fbf4;color:#07855f} .client-expense-status.approved{background:#edf5ff;color:#2868b7} .client-expense-status.draft{background:#f1f3f6;color:#68778b} .client-expense-empty a{display:inline-flex;margin-top:9px;color:#3157df!important;font-size:10.5px;font-weight:750;text-decoration:none} .client-expense-footer-summary strong{color:#42546c} @media(max-width:900px){.client-expense-data-table{min-width:980px}} @media(max-width:760px){.client-expense-toolbar{flex-wrap:wrap}.client-expense-toolbar-right{width:100%;margin-left:0}.client-expense-billing-filter{flex:1}.client-expense-search{margin-left:auto}.client-expense-summary{grid-template-columns:repeat(2,minmax(0,1fr))!important}} @media(max-width:520px){.client-expense-summary{grid-template-columns:1fr!important}.client-expense-toolbar-right{align-items:stretch;flex-direction:column}.client-expense-billing-filter,.client-expense-search{width:100%!important}.client-expense-search input{width:100%!important}} /* ========================================================== Client Projects โ€” Invoice workspace parity ========================================================== */ .client-project-workspace{color:#263954} .client-project-summary{grid-template-columns:repeat(6,minmax(0,1fr));margin-bottom:12px} .client-project-summary article{min-height:66px;border:1px solid #dce4ef;border-radius:9px;background:#fff;box-shadow:0 3px 10px rgba(30,41,59,.04);padding:12px 14px} .client-project-summary article span,.client-project-summary article strong{display:block} .client-project-summary article span{margin-bottom:5px;color:#66778d;font-size:10.5px;font-weight:750} .client-project-summary article strong{color:#1f314a;font-size:14px;font-weight:850} .client-project-list-card{overflow:hidden;border:1px solid #dce4ef!important;border-radius:10px!important;background:#fff!important;box-shadow:0 3px 12px rgba(30,41,59,.05)!important} .client-project-toolbar{padding:12px 14px!important;border-bottom:1px solid #e5ebf3!important;background:#fff!important} .client-project-toolbar-left{gap:0!important} .client-project-toolbar-left>a{min-height:34px;display:inline-flex!important;align-items:center!important;gap:7px!important;padding:0 11px!important;text-decoration:none!important;font-size:11px!important;font-weight:750!important} .client-project-toolbar-left .client-project-new{border:1px solid #3157df!important;border-radius:7px 0 0 7px!important;background:#3157df!important;color:#fff!important} .client-project-toolbar-left .client-project-new:hover{background:#2748c8!important;color:#fff!important} .client-project-toolbar-left .client-project-all{border:1px solid #cbd5e2!important;border-left:0!important;border-radius:0!important;background:#fff!important;color:#31445d!important} .client-project-toolbar-left .invoice-contact-refresh{border-radius:0 7px 7px 0!important} .client-project-toolbar-left svg{width:14px;height:14px} .client-project-toolbar-right{display:flex;align-items:center;gap:8px} .client-project-status-filter{height:34px!important;min-width:135px;border:1px solid #cbd6e4!important;border-radius:7px!important;background:#fff!important;color:#42536a!important;padding:0 30px 0 10px!important;font-size:11px!important} .client-project-search span{height:34px!important}.client-project-search input{height:34px!important} .client-project-table-wrap{overflow:auto} .client-project-table{min-width:1180px!important;margin-top:0!important} .client-project-table thead th{height:44px!important;padding:10px 12px!important;background:#f1f3f5!important;color:#000!important;font-size:10.5px!important;font-weight:800!important;letter-spacing:.01em!important;text-transform:none!important;border:0!important;border-bottom:2px solid #cfd6df!important} .client-project-table tbody td{height:68px!important;padding:10px 12px!important;border-bottom:1px solid #e9eef5!important;background:#fff!important;color:#34445b!important;font-size:12px!important;vertical-align:middle!important} .client-project-table tbody tr:hover td{background:#f8fbff!important} .client-project-identity{min-width:250px} .client-project-avatar{background:#edf3ff!important;color:#315fc5!important} .client-project-identity small{max-width:250px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .client-project-budget{color:#203a5e;font-size:12px;font-weight:800} .client-project-date{color:#506176;font-size:11.5px;font-weight:650;white-space:nowrap} .client-project-date.overdue{color:#c33b48} .client-project-members{display:flex;align-items:center;min-width:115px} .client-project-members>span{width:28px;height:28px;display:grid;place-items:center;margin-left:-6px;border:2px solid #fff;border-radius:50%;background:#eaf1ff;color:#315fc5;font-size:10px;font-weight:850} .client-project-members>span:first-child{margin-left:0} .client-project-members>em{margin-left:6px;color:#738197;font-size:10.5px;font-style:normal;font-weight:750} .client-project-muted{color:#9aa6b6} .client-project-progress{display:flex;align-items:center;gap:8px;min-width:125px} .client-project-progress>div{width:82px;height:7px;overflow:hidden;border-radius:99px;background:#e8edf4} .client-project-progress>div>span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#3157df,#28a7e8)} .client-project-progress>strong{width:34px;color:#53647b;font-size:10.5px;font-weight:800;text-align:right} .client-project-status{white-space:nowrap} .client-project-workspace .invoice-contact-status.status-not-started{background:#f5f7fa;border-color:#dce3eb;color:#66768a} .client-project-workspace .invoice-contact-status.status-in-progress{background:#eef5ff;border-color:#cfe0fb;color:#2466c7} .client-project-workspace .invoice-contact-status.status-on-hold{background:#fff8e9;border-color:#f1dfb5;color:#9d6a12} .client-project-workspace .invoice-contact-status.status-completed{background:#eefaf4;border-color:#d5f0e1;color:#198754} .client-project-workspace .invoice-contact-status.status-cancelled,.client-project-workspace .invoice-contact-status.status-canceled{background:#fff2f2;border-color:#f3d0d0;color:#b63b45} .client-project-options{justify-content:flex-end} .client-project-footer{gap:14px;flex-wrap:wrap} .client-project-footer>div{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .client-project-footer b{padding:6px 9px;border-radius:6px;background:#eaf0f8;color:#25405f} @media(max-width:1200px){.client-project-summary{grid-template-columns:repeat(3,1fr)}} @media(max-width:760px){.client-project-summary{grid-template-columns:repeat(2,1fr)}.client-project-toolbar{align-items:flex-start!important;gap:10px!important;flex-wrap:wrap!important}.client-project-toolbar-right{width:100%;flex-wrap:wrap}.client-project-search{margin-left:auto}.client-project-footer{align-items:flex-start!important;flex-direction:column}} @media(max-width:480px){.client-project-summary{grid-template-columns:1fr}.client-project-toolbar-left{width:100%;flex-wrap:wrap}.client-project-toolbar-left>a{border-radius:7px!important;border:1px solid #cbd5e2!important;margin:0 4px 4px 0}.client-project-toolbar-left .client-project-new{border-color:#3157df!important}.client-project-toolbar-right{align-items:stretch}.client-project-status-filter,.client-project-search{width:100%;margin:0}.client-project-search input{width:100%!important}} /* Client Projects โ€” exact Client Invoice layout */ .client-project-workspace .client-project-invoice-table{min-width:1120px!important} .client-project-invoice-avatar{background:#eef4ff!important;color:#315fc5!important} .client-project-invoice-date.overdue{color:#c33b48!important;font-weight:800!important} .client-project-workspace .client-invoice-status-kb.not-started{background:#f1f3f6!important;color:#68778b!important} .client-project-workspace .client-invoice-status-kb.in-progress{background:#eef5ff!important;color:#2466c7!important} .client-project-workspace .client-invoice-status-kb.on-hold{background:#fff8e9!important;color:#9d6a12!important} .client-project-workspace .client-invoice-status-kb.completed{background:#e8fbf4!important;color:#07855f!important} .client-project-workspace .client-invoice-status-kb.cancelled, .client-project-workspace .client-invoice-status-kb.canceled{background:#fff2f2!important;color:#b63b45!important} .client-project-invoice-footer-summary{display:flex;align-items:center;gap:16px;flex-wrap:wrap} .client-project-invoice-footer-summary span{color:#6c7b90;font-size:12px} .client-project-invoice-footer-summary strong{margin-left:4px;color:#24364d;font-weight:850} @media(max-width:760px){.client-project-invoice-footer-summary{gap:9px}} /* ========================================================== Client Tickets / Files / Reminders / Map / Tasks โ€” exact Client Invoice workspace parity ========================================================== */ .client-invoice-tool-button{cursor:pointer} .client-ticket-invoice-table{min-width:1040px!important} .client-ticket-priority{display:inline-flex;align-items:center;min-height:24px;padding:3px 8px;border-radius:999px;background:#f1f3f6;color:#68778b;font-size:10.5px;font-weight:800;white-space:nowrap} .client-ticket-priority.priority-medium,.client-ticket-priority.priority-normal{background:#eef4ff;color:#315fc5} .client-ticket-priority.priority-high{background:#fff8e8;color:#9a6a10} .client-ticket-priority.priority-urgent{background:#fff2f2;color:#b63b45} .client-ticket-invoice-workspace .client-invoice-status-kb.open,.client-ticket-invoice-workspace .client-invoice-status-kb.in-progress,.client-ticket-invoice-workspace .client-invoice-status-kb.pending{background:#eef4ff;color:#315fc5} .client-ticket-invoice-workspace .client-invoice-status-kb.resolved,.client-ticket-invoice-workspace .client-invoice-status-kb.closed,.client-ticket-invoice-workspace .client-invoice-status-kb.completed{background:#e8fbf4;color:#07855f} .client-ticket-invoice-workspace .client-invoice-status-kb.cancelled,.client-ticket-invoice-workspace .client-invoice-status-kb.canceled{background:#fff2f2;color:#b63b45} .client-resource-invoice-create,.client-map-invoice-editor{padding:14px 16px;border-bottom:1px solid #e5eaf1;background:#fbfcff} .client-resource-invoice-create[hidden],.client-map-invoice-editor[hidden]{display:none!important} .client-resource-create-copy,.client-map-editor-copy{display:flex;align-items:center;gap:10px;margin-bottom:12px} .client-resource-create-copy strong,.client-map-editor-copy strong{display:block;color:#263954;font-size:12px} .client-resource-create-copy small,.client-map-editor-copy small{display:block;margin-top:2px;color:#8290a3;font-size:10.5px} .client-resource-invoice-create form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:12px;align-items:end} .client-resource-invoice-create label,.client-map-invoice-editor label{display:grid;gap:5px;color:#53647a;font-size:10.5px;font-weight:750} .client-resource-invoice-create input,.client-resource-invoice-create textarea,.client-map-invoice-editor input{box-sizing:border-box;min-height:36px;border:1px solid #ccd7e6;border-radius:8px;background:#fff;color:#34465e;padding:8px 10px;font:inherit;font-size:11.5px;outline:0} .client-resource-invoice-create textarea{resize:vertical} .client-resource-inline-check{display:flex!important;align-items:center!important;gap:8px!important;height:36px} .client-resource-inline-check input{width:16px;min-height:16px!important} .client-resource-wide-field{grid-column:1 / span 2} .client-resource-save-button,.client-map-save-button{height:36px!important;background:#3157df!important;border-color:#3157df!important;color:#fff!important} .client-resource-invoice-table{min-width:840px!important} .client-resource-reminder-title,.client-map-location-name{display:block;color:#203f72;font-size:12px;font-weight:750} .client-resource-invoice-workspace .client-invoice-status-kb.visible,.client-resource-invoice-workspace .client-invoice-status-kb.upcoming{background:#e8fbf4;color:#07855f} .client-resource-invoice-workspace .client-invoice-status-kb.private,.client-resource-invoice-workspace .client-invoice-status-kb.no-date{background:#f1f3f6;color:#68778b} .client-resource-invoice-workspace .client-invoice-status-kb.past-due{background:#fff2f2;color:#b63b45} .client-map-toolbar-status{margin-left:auto} .client-map-invoice-editor{display:flex;align-items:flex-end;gap:18px} .client-map-editor-copy{flex:1;margin:0;min-width:240px} .client-map-invoice-editor form{display:grid;grid-template-columns:minmax(150px,1fr) minmax(150px,1fr) auto;gap:10px;align-items:end;flex:1.35} .client-map-invoice-table{min-width:760px!important} .client-map-invoice-workspace .client-invoice-status-kb.configured{background:#e8fbf4;color:#07855f} .client-map-invoice-workspace .client-invoice-status-kb.not-set{background:#f1f3f6;color:#68778b} .client-task-invoice-filters{display:grid;grid-template-columns:minmax(300px,1.6fr) repeat(3,minmax(130px,.55fr)) auto;gap:12px;align-items:end;padding:12px 16px;border-bottom:1px solid #e5eaf1;background:#fbfcff} .client-task-invoice-filters[hidden]{display:none!important} .client-task-invoice-filters>label{display:grid;gap:5px;color:#53647a;font-size:10.5px;font-weight:750} .client-task-invoice-filters select{height:36px;border:1px solid #ccd7e6;border-radius:8px;background:#fff;color:#34465e;padding:0 9px;font:inherit;font-size:11px} .client-task-relation-filter>span{display:block;margin-bottom:6px;color:#53647a;font-size:10.5px;font-weight:750} .client-task-relation-filter>div{display:flex;align-items:center;gap:9px;flex-wrap:wrap} .client-task-relation-filter label{display:inline-flex;align-items:center;gap:4px;color:#65758a;font-size:10.5px;font-weight:650} .client-task-relation-filter input{width:15px;height:15px;accent-color:#3157df} .client-task-invoice-table{min-width:1120px!important} .client-task-title-button{display:block;max-width:250px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:0;background:transparent;padding:0;color:#203f72;font:inherit;font-size:12.5px;font-weight:750;cursor:pointer;text-align:left} .client-task-title-button:hover{color:#1d4ed8} .client-task-quick-select{max-width:150px;min-height:30px;border:1px solid #d8e1eb;border-radius:999px;background:#f1f3f6;color:#68778b;padding:0 9px;font:inherit;font-size:10px;font-weight:750;outline:0;cursor:pointer} .client-task-quick-select.task-status-in-progress{background:#eef4ff;color:#315fc5} .client-task-quick-select.task-status-testing{background:#ecfbff;color:#0d7f9f} .client-task-quick-select.task-status-awaiting-feedback{background:#fff8e8;color:#9a6a10} .client-task-quick-select.task-status-complete{background:#e8fbf4;color:#07855f} .client-task-quick-select.task-priority-medium{background:#eef4ff;color:#315fc5} .client-task-quick-select.task-priority-high{background:#fff8e8;color:#9a6a10} .client-task-quick-select.task-priority-urgent{background:#fff2f2;color:#b63b45} .client-task-assignee{display:flex;align-items:center;gap:7px}.client-task-assignee>span{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:#e8f1fb;color:#315f8b;font-size:10px;font-weight:800}.client-task-assignee>span.empty{background:#f1f3f6;color:#8794a7}.client-task-assignee small{color:#69798e;font-size:10.5px;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .client-task-tags{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.client-task-tags em{display:inline-flex;padding:3px 7px;border-radius:999px;background:#eef4ff;color:#315fc5;font-size:9px;font-weight:700;font-style:normal} .client-task-overdue{color:#b63b45!important;font-weight:750} .client-task-page-button{height:29px;border:1px solid #dbe4ef;border-radius:7px;background:#fff;color:#53647a;padding:0 8px;font:inherit;font-size:10px;cursor:pointer}.client-task-page-button:disabled{opacity:.45;cursor:not-allowed}.client-task-invoice-workspace #client-task-page{display:inline-grid;place-items:center;min-width:29px;height:29px;border-radius:7px;background:#eaf0f8;color:#25405f;font-size:10px} @media(max-width:1100px){.client-task-invoice-filters{grid-template-columns:1fr 1fr}.client-task-relation-filter{grid-column:1 / -1}.client-map-invoice-editor{align-items:stretch;flex-direction:column}.client-map-invoice-editor form{width:100%}} @media(max-width:760px){.client-resource-invoice-create form,.client-map-invoice-editor form{grid-template-columns:1fr}.client-resource-wide-field{grid-column:auto}.client-task-invoice-filters{grid-template-columns:1fr}.client-task-relation-filter{grid-column:auto}.client-map-toolbar-status{margin-left:0}} /* ============================================================ SECTION: commerce.css ============================================================ */ .commerce-page{color:#243247}.commerce-hero{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:24px}.commerce-heading{display:flex;align-items:center;gap:16px}.commerce-heading h1{font-size:27px;letter-spacing:-.7px;margin:0 0 5px}.commerce-heading p{color:#788496;margin:0;font-size:14px}.commerce-icon{width:50px;height:50px;display:grid;place-items:center;border-radius:14px;color:#fff;background:linear-gradient(145deg,#226fe5,#65a2ff);box-shadow:0 10px 25px #287be42c}.commerce-icon svg{width:23px}.commerce-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:20px}.commerce-stats article{position:relative;background:linear-gradient(150deg,#fff,#f8fbff);border:1px solid #e4eaf2;border-radius:13px;padding:18px 20px;box-shadow:0 6px 18px #24334c0b;overflow:hidden}.commerce-stats span,.commerce-stats strong{display:block}.commerce-stats span{color:#7a8798;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}.commerce-stats strong{font-size:25px;margin-top:7px}.commerce-stats i{position:absolute;right:16px;bottom:15px;color:#87a8d6;width:23px}.commerce-card{background:#fff;border:1px solid #e0e7f0;border-radius:13px;box-shadow:0 8px 25px #263b5810;overflow:hidden}.commerce-toolbar{display:flex;align-items:center;gap:9px;padding:17px 19px;border-bottom:1px solid #edf0f4}.commerce-search{position:relative;margin-right:auto}.commerce-search svg{position:absolute;left:11px;top:10px;width:16px;color:#8a96a6}.commerce-toolbar input,.commerce-toolbar select{height:38px;border:1px solid #d9e1eb;border-radius:8px;background:#fff;color:#344154;padding:0 11px;font:inherit;font-size:13px}.commerce-toolbar input{width:280px;padding-left:35px}.commerce-toolbar input:focus,.commerce-toolbar select:focus{outline:0;border-color:#5e9df2;box-shadow:0 0 0 3px #eaf3ff}.commerce-clear{font-size:13px;color:#5d718e}.commerce-table-wrap{overflow:auto}.commerce-table{min-width:1020px}.commerce-table th{background:#f8fafc;color:#6f7c8d;text-transform:uppercase;font-size:11px;letter-spacing:.45px;padding:13px 16px;border-top:0}.commerce-table td{padding:16px;border-top:1px solid #edf0f4;vertical-align:middle;color:#59677a}.commerce-table tbody tr{transition:background .15s}.commerce-table tbody tr:hover{background:#f8fbff}.commerce-title{display:block;color:#1e3b67;font-weight:700;white-space:nowrap}.commerce-title:hover{color:#2175dd}.commerce-table td:first-child small{display:block;color:#9aa5b3;margin-top:4px}.commerce-table td span[title]{display:block;max-width:240px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.commerce-status{display:inline-flex;border-radius:999px;padding:5px 9px;background:#eef3f8;color:#5d6a79;font-size:11px;font-weight:700}.status-active,.status-completed{background:#e2f8eb;color:#13824d}.status-processing{background:#e8f2ff;color:#246fc2}.status-draft{background:#f1f3f6;color:#687484}.status-cancelled,.status-inactive{background:#ffe9eb;color:#ba4251}.commerce-qty{display:inline-grid;place-items:center;min-width:31px;height:27px;border-radius:7px;background:#eef4ff;color:#2e6cbe;font-weight:700}.commerce-open{width:32px;height:32px;display:grid;place-items:center;border:1px solid #dde5ef;border-radius:8px;color:#56718f}.commerce-open svg{width:15px}.commerce-open:hover{background:#eaf3ff;color:#2475dc}.commerce-empty{text-align:center;padding:65px 20px}.commerce-empty>span{width:58px;height:58px;display:grid;place-items:center;margin:0 auto 16px;border-radius:16px;background:#eaf3ff;color:#317fe5}.commerce-empty h2{font-size:18px;margin:0 0 6px}.commerce-empty p{color:#8995a5;margin:0 0 18px}.commerce-footer{display:flex;align-items:center;justify-content:space-between;padding:15px 19px;border-top:1px solid #edf0f4;color:#7c8999;font-size:13px}.commerce-footer nav>div:first-child{display:none}.commerce-footer nav>div:last-child{display:flex;gap:5px;align-items:center}.commerce-footer nav a,.commerce-footer nav span{padding:5px 8px}.items-field-help{font-size:12px;color:#7d8999;font-weight:400}.items-field-help a{color:#246fce}@media(max-width:900px){.commerce-stats{grid-template-columns:repeat(2,1fr)}.commerce-toolbar{flex-wrap:wrap}.commerce-search{width:100%;margin:0}.commerce-toolbar input{width:100%}}@media(max-width:600px){.commerce-hero{align-items:flex-start;flex-direction:column}.commerce-stats{grid-template-columns:1fr 1fr}.commerce-footer{align-items:flex-start;gap:10px;flex-direction:column}} /* ===================================================================== Sales & Finance โ†’ Order List โ€” exact Invoice design companion The Order module reuses invoices.css, invoice-form.css and invoice-workspace.css for the same layout, spacing and component system. ===================================================================== */ /* Order statuses inside the Invoice badge components */ .invoice-contact-status.order-status.status-new, .invoice-status.order-status.status-new{background:#eef5ff!important;border-color:#d7e5fb!important;color:#2e67b1!important} .invoice-contact-status.order-status.status-confirmed, .invoice-status.order-status.status-confirmed{background:#f6f2ff!important;border-color:#ded3f6!important;color:#7054b4!important} .invoice-contact-status.order-status.status-processing, .invoice-status.order-status.status-processing{background:#fff8ec!important;border-color:#f1dfba!important;color:#a56d10!important} .invoice-contact-status.order-status.status-completed, .invoice-status.order-status.status-completed{background:#eefaf4!important;border-color:#d5f0e1!important;color:#198754!important} .invoice-contact-status.order-status.status-cancelled, .invoice-status.order-status.status-cancelled{background:#fff2f2!important;border-color:#f3d0d0!important;color:#b63b45!important} .order-invoice-client-link{color:#285fc1!important;text-decoration:none!important;font-weight:650} .order-invoice-client-link:hover{text-decoration:underline!important} /* New / Edit Order: Order-specific content inside the Invoice form shell */ .order-invoice-form-page .invoice-contact-card{overflow:visible!important} .order-invoice-form-page .estimate-columns{padding-bottom:22px!important} .order-invoice-number span{ min-width:58px!important;display:grid!important;place-items:center!important; background:#f4f7fb!important;color:#52647b!important;font-size:11px!important;font-weight:800!important } .order-invoice-money{ display:flex!important;align-items:stretch!important;width:100%!important;min-height:38px!important; overflow:hidden!important;border:1px solid #cfd9e5!important;border-radius:7px!important;background:#fff!important } .order-invoice-money>span{ min-width:42px!important;display:grid!important;place-items:center!important; border-right:1px solid #dbe3ed!important;background:#f5f7fa!important; color:#66788d!important;font-size:12px!important;font-weight:800!important } .order-invoice-money input{min-height:36px!important;border:0!important;border-radius:0!important;box-shadow:none!important} .order-invoice-client-card,.order-invoice-total-card{ min-height:88px;display:flex;align-items:center;gap:12px;padding:14px 15px; border:1px solid #e1e7ef;border-radius:10px;background:#fbfcfe } .order-invoice-client-icon,.order-invoice-summary-icon{ width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:9px;background:#eef3ff;color:#4965d7 } .order-invoice-client-icon svg,.order-invoice-summary-icon svg{width:15px;height:15px} .order-invoice-client-card div{min-width:0;display:flex;flex-direction:column} .order-invoice-client-card small,.order-invoice-total-card>span{ color:#8190a3;font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase } .order-invoice-client-card strong,.order-invoice-total-card strong{ margin-top:3px;color:#1d304a;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap } .order-invoice-client-card div>span,.order-invoice-total-card small{margin-top:3px;color:#8996a8;font-size:10px} .order-invoice-total-card{align-items:flex-start;justify-content:center;flex-direction:column} .order-invoice-total-card strong{font-size:22px} .order-invoice-summary-section{ margin:0 24px 22px;padding:16px;border:1px solid #e1e7ef;border-radius:11px;background:#fbfcfe } .order-invoice-summary-head{display:flex;align-items:center;gap:10px;margin-bottom:13px} .order-invoice-summary-head h2{margin:0;color:#1c2d45;font-size:14px} .order-invoice-summary-head p{margin:3px 0 0;color:#8190a3;font-size:10.5px} .order-invoice-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px} .order-invoice-summary-grid>div{ min-height:60px;display:flex;flex-direction:column;justify-content:center; padding:10px 12px;border:1px solid #e4eaf2;border-radius:9px;background:#fff } .order-invoice-summary-grid span{color:#8190a3;font-size:9px;font-weight:800;letter-spacing:.05em;text-transform:uppercase} .order-invoice-summary-grid strong{margin-top:4px;color:#263954;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .order-invoice-savebar{ display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:10px!important; margin:0!important;padding:14px 24px!important;border-top:1px solid #e1e7ef!important; background:rgba(255,255,255,.96)!important;box-shadow:0 -8px 24px rgba(30,48,76,.05)!important } .order-invoice-savebar a{ min-height:36px;display:inline-flex;align-items:center;padding:0 13px;border:1px solid #cbd5e1; border-radius:7px;background:#fff;color:#52647b;text-decoration:none;font-size:12px;font-weight:750 } .order-invoice-savebar button{ min-height:36px!important;display:inline-flex!important;align-items:center!important;gap:6px!important; padding:0 15px!important;border:1px solid #3157df!important;border-radius:7px!important; background:#3157df!important;color:#fff!important;font-size:12px!important;font-weight:750!important } .order-invoice-savebar svg{width:14px;height:14px} /* View Order: exact Invoice workspace with Order data */ .order-invoice-workspace .invoice-stat-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important} .order-invoice-workspace .invoice-money a{min-width:115px!important} .order-invoice-workspace .invoice-workspace-actions form{display:inline-flex!important;margin:0!important} .order-invoice-workspace .order-workspace-delete{ min-height:31px!important;display:inline-flex!important;align-items:center!important;padding:0 9px!important; border:1px solid #edcfd3!important;border-radius:5px!important;background:#fff!important; color:#a43e49!important;cursor:pointer!important } .order-invoice-company-block strong{display:block;color:#17233a;font-size:15px} .order-invoice-company-block address{margin-top:6px!important} .order-invoice-items table{min-width:560px!important} .order-invoice-items th:last-child,.order-invoice-items td:last-child{text-align:right!important} .order-invoice-signature{width:230px;margin:64px 0 8px auto;text-align:center;color:#222} .order-invoice-signature-line{height:30px;border-bottom:1px solid #555;margin-bottom:7px} .order-invoice-signature strong{font-size:11px} @media(max-width:900px){ .order-invoice-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .order-invoice-workspace .invoice-money{width:100%!important} } @media(max-width:760px){ .order-invoice-summary-section{margin:0 16px 18px} .order-invoice-summary-grid{grid-template-columns:1fr} } /* ============================================================ SECTION: contact-profile.css ============================================================ */ .contact-view{max-width:1380px;margin:0 auto;color:#1e293b}.contact-view-top{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:18px}.contact-back{display:inline-flex;align-items:center;gap:7px;color:#5b6b80;font-size:14px;font-weight:600}.contact-back:hover{color:#246ee9}.contact-back svg,.contact-view-actions svg{width:15px}.contact-view-actions{display:flex;gap:9px}.contact-view-actions form{margin:0}.contact-edit,.contact-delete{height:37px;padding:0 13px;border-radius:7px;display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600}.contact-edit{background:#1e2b3d;color:#fff}.contact-delete{background:#fff;color:#dc3e4f;border:1px solid #efc9cf}.contact-hero,.contact-panel{background:#fff;border:1px solid #dfe5ee;border-radius:11px;box-shadow:0 3px 12px #1e293b0a}.contact-hero{padding:28px 30px;display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:20px;background:linear-gradient(115deg,#fff 55%,#f5f9ff)}.contact-identity{display:flex;align-items:center;gap:20px;min-width:0}.contact-identity>span,.contact-identity>img{width:82px;height:82px;border-radius:22px;flex:none}.contact-identity>span{display:grid;place-items:center;background:linear-gradient(135deg,#367bea,#65a2ff);color:#fff;font-size:25px;font-weight:700;box-shadow:0 8px 20px #367bea30}.contact-identity>img{object-fit:cover}.contact-title-line{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.contact-title-line h1{font-size:26px;margin:0;letter-spacing:-.5px}.contact-state{padding:4px 8px;border-radius:20px;background:#f1f5f9;color:#64748b;font-size:11px}.contact-state.active{background:#e4f8ed;color:#169857}.contact-identity p{margin:7px 0 12px;color:#6b788b;font-size:14px}.contact-identity p em{font-style:normal;color:#a0a9b6;margin:0 3px}.contact-identity p a{color:#246ee9;font-weight:600}.contact-quick{display:flex;gap:18px;flex-wrap:wrap}.contact-quick a{display:inline-flex;align-items:center;gap:6px;color:#475569;font-size:13px}.contact-quick svg{width:14px;color:#7c8da5}.contact-meta{display:grid;grid-template-columns:auto auto;gap:8px 17px;padding-left:27px;border-left:1px solid #e5eaf1;font-size:12px}.contact-meta small{color:#8a97a8}.contact-meta strong{font-weight:600;color:#34445a}.contact-view-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(300px,.8fr);gap:20px;align-items:start}.contact-view-grid main,.contact-view-grid aside{display:flex;flex-direction:column;gap:20px}.contact-panel{overflow:hidden}.contact-panel>header{display:flex;align-items:center;gap:12px;padding:18px 21px;border-bottom:1px solid #e8edf3}.contact-panel>header>span{width:34px;height:34px;border-radius:8px;display:grid;place-items:center;background:#eaf2ff;color:#2f72d8}.contact-panel>header>span.purple{background:#f0ebff;color:#7754ca}.contact-panel>header>span.amber{background:#fff2dc;color:#d58a19}.contact-panel>header>span.green{background:#e6f8ef;color:#17a164}.contact-panel>header>span.blue{background:#e7f3ff;color:#2380d6}.contact-panel header svg{width:17px}.contact-panel h2{font-size:15px;margin:0}.contact-panel header p{font-size:12px;color:#8a97a8;margin:3px 0 0}.contact-details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:6px 21px 20px;gap:0 28px}.contact-details>div{padding:15px 2px;border-bottom:1px solid #edf1f5}.contact-details small,.contact-details strong{display:block}.contact-details small{font-size:11px;color:#8b98a9;margin-bottom:6px;text-transform:uppercase;letter-spacing:.45px}.contact-details strong{font-size:13px;font-weight:600;color:#35445a;overflow-wrap:anywhere}.contact-chip-list{display:flex;flex-wrap:wrap;gap:10px;padding:20px 21px}.contact-chip-list span{display:inline-flex;align-items:center;gap:6px;padding:8px 11px;border-radius:7px;font-size:12px;font-weight:600}.contact-chip-list .enabled{background:#eaf8f1;color:#168c58}.contact-chip-list .disabled{background:#f3f5f8;color:#9aa4b2}.contact-chip-list svg{width:13px}.contact-notification-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:14px 21px 20px;gap:8px 20px}.contact-notification-grid>div{display:grid;grid-template-columns:22px 1fr auto;align-items:center;padding:10px;border:1px solid #e9edf3;border-radius:7px;color:#9aa4b1;font-size:12px}.contact-notification-grid>div.enabled{color:#35445a;border-color:#dce8f9;background:#f8fbff}.contact-notification-grid svg{width:14px}.contact-notification-grid b{font-size:10px;text-transform:uppercase;color:#9ba5b2}.contact-notification-grid .enabled b{color:#238863}.contact-account dl,.contact-audit dl{margin:0;padding:6px 20px 17px}.contact-account dl div,.contact-audit dl div{display:flex;justify-content:space-between;gap:15px;padding:12px 0;border-bottom:1px solid #edf1f5;font-size:12px}.contact-account dl div:last-child,.contact-audit dl div:last-child{border:0}.contact-account dt,.contact-audit dt{color:#8794a5}.contact-account dd,.contact-audit dd{margin:0;text-align:right;color:#34445a;overflow-wrap:anywhere}.contact-account dd.good{color:#169857}.contact-company>a{display:grid;grid-template-columns:1fr auto;align-items:center;padding:20px;color:#34445a}.contact-company>a b,.contact-company>a small{grid-column:1;display:block}.contact-company>a small{color:#8a97a8;margin-top:5px;font-size:11px}.contact-company>a svg{grid-column:2;grid-row:1/3;width:17px;color:#5d8ed7}.contact-empty{padding:20px;color:#8a97a8;font-size:12px}@media(max-width:950px){.contact-view-grid{grid-template-columns:1fr}.contact-view-grid aside{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.contact-hero{align-items:flex-start}.contact-meta{display:none}}@media(max-width:640px){.contact-view-top,.contact-hero{align-items:flex-start;flex-direction:column}.contact-view-actions{width:100%}.contact-edit,.contact-delete{flex:1;justify-content:center}.contact-identity{align-items:flex-start}.contact-identity>span,.contact-identity>img{width:60px;height:60px;border-radius:15px}.contact-details,.contact-notification-grid,.contact-view-grid aside{grid-template-columns:1fr}.contact-quick{gap:8px}.contact-title-line h1{font-size:22px}} /* ============================================================ SECTION: contacts.css ============================================================ */ .contacts-page{padding:0;color:#25344a}.contacts-card{background:#fff;border:1px solid #dce2ea;border-radius:8px;box-shadow:0 3px 6px #1e293b18;overflow:hidden}.contacts-toolbar{min-height:66px;display:flex;align-items:center;justify-content:space-between;padding:9px 24px;gap:15px}.contacts-toolbar>div{display:flex}.contacts-toolbar>div form{display:flex}.contacts-toolbar select,.contacts-toolbar>div>a{box-sizing:border-box;height:32px;border:1px solid #cbd5e2;background:#fff;color:#25364f;padding:0 11px;font-size:13px;display:flex;align-items:center;text-decoration:none}.contacts-toolbar select{border-radius:6px 0 0 6px;min-width:75px}.contacts-toolbar>div>a{border-left:0}.contacts-toolbar>div>a:last-child{border-radius:0 6px 6px 0}.contacts-toolbar svg{width:14px}.contacts-search{display:flex;height:32px}.contacts-search button{width:43px;border:1px solid #cbd5e2;border-radius:6px 0 0 6px;background:#fff;color:#3a526f}.contacts-search input{width:200px;border:1px solid #cbd5e2;border-left:0;border-radius:0 6px 6px 0;padding:0 10px;outline:none}.contacts-table-wrap{overflow-x:auto}.contacts-card table{border-collapse:collapse;width:100%;min-width:1150px;font-size:14px}.contacts-card th{height:40px;background:#f8fafc;text-align:left;font-weight:600;color:#21314c}.contacts-card th,.contacts-card td{padding:10px 11px;border-top:1px solid #e5eaf1}.contacts-card th+th{border-left:1px solid #e5eaf1}.contacts-card td{height:51px;color:#263954}.contacts-card td a{color:#263954;text-decoration:none}.contacts-card td a:hover{color:#246de3}.contact-person{display:flex!important;align-items:center;gap:9px}.contact-person span{width:31px;height:31px;display:grid;place-items:center;border-radius:50%;background:#e4e9f1;color:#77879c;font-size:12px}.contact-switch{display:flex;align-items:center;width:49px;height:21px;border:0;border-radius:20px;background:#cbd5e1;padding:2px;cursor:pointer}.contact-switch.on{background:#347af1;justify-content:flex-end}.contact-switch i{width:17px;height:17px;border-radius:50%;background:#fff;box-shadow:0 1px 2px #0002}.contacts-empty{text-align:center;padding:35px!important;color:#6b788a!important}.contacts-card footer{height:61px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;border-top:1px solid #e5eaf1;color:#67758a;font-size:14px}.contacts-card footer div{display:flex;align-items:center;gap:15px}.contacts-card footer a{color:#67758a;text-decoration:none}.contacts-card footer b{background:#e9edf3;color:#1c2b44;border-radius:6px;padding:8px 11px}@media(max-width:760px){.contacts-toolbar{padding:12px;flex-wrap:wrap}.contacts-search{margin-left:auto}.contacts-search input{width:150px}.contacts-card footer{height:auto;min-height:60px;padding:12px;gap:12px;flex-wrap:wrap}} .contact-modal-backdrop{position:fixed;inset:0;z-index:80;background:#2433488c;overflow:auto;padding:28px 15px}.contact-create-modal{width:min(590px,100%);margin:0 auto;background:#fff;border-radius:14px;box-shadow:0 18px 55px #17203355;overflow:hidden;color:#344256}.contact-create-modal>header{display:flex;justify-content:space-between;align-items:flex-start;padding:22px 24px;border-bottom:1px solid #e4e8ee}.contact-create-modal h1{font-size:19px;margin:0 0 3px}.contact-create-modal header p{margin:0;font-size:13px}.contact-create-modal header>a{font-size:28px;color:#98a1ae;text-decoration:none;line-height:1}.contact-modal-body{padding:22px 24px;display:flex;flex-direction:column;gap:13px;max-height:calc(100vh - 190px);overflow:auto}.contact-modal-body>label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600}.contact-modal-body input,.contact-modal-body select{box-sizing:border-box;width:100%;height:35px;border:1px solid #ccd5df;border-radius:5px;background:#fff;padding:7px 10px;color:#344256}.contact-modal-body em{color:#ef4444;font-style:normal}.contact-modal-body small{color:#c93643}.contact-password{display:flex}.contact-password input{border-radius:5px 0 0 5px}.contact-password button{width:46px;border:1px solid #ccd5df;border-left:0;background:#fff;color:#2563eb}.contact-password button:last-child{border-radius:0 5px 5px 0}.contact-password svg{width:16px}.contact-checks{border-top:1px solid #e7ebf0;border-bottom:1px solid #e7ebf0;padding:14px 0;display:flex;flex-direction:column;gap:8px}.contact-checks label{font-size:13px;display:flex;align-items:center;gap:8px}.contact-checks input{width:17px;height:17px}.contact-access h2{font-size:14px;margin:0 0 8px}.contact-access>p{font-size:13px;color:#ef4444;margin:0 0 12px}.contact-access>label,.contact-notifications>div label{display:grid;grid-template-columns:130px 48px;align-items:center;margin:8px 0;font-size:13px}.contact-access input{position:absolute;opacity:0;width:1px;height:1px}.contact-access i{width:47px;height:22px;border-radius:20px;background:#d8dee7;position:relative}.contact-access i:after{content:"";position:absolute;width:18px;height:18px;left:2px;top:2px;background:#fff;border-radius:50%;box-shadow:0 1px 3px #0003;transition:.15s}.contact-access input:checked+i{background:#3b82f6}.contact-access input:checked+i:after{left:27px}.contact-notifications{border-top:1px solid #e7ebf0;padding-top:15px}.contact-notifications>div{display:grid;grid-template-columns:1fr 1fr;gap:0 28px}.contact-create-modal form>footer{display:flex;justify-content:flex-end;gap:8px;padding:16px 24px;border-top:1px solid #e4e8ee}.contact-create-modal footer a,.contact-create-modal footer button{padding:8px 13px;border-radius:6px;text-decoration:none;font-size:13px}.contact-create-modal footer a{border:1px solid #d3dbe5;color:#465468}.contact-create-modal footer button{border:1px solid #1e293b;background:#1e293b;color:#fff;font-weight:600}@media(max-width:600px){.contact-modal-backdrop{padding:0}.contact-create-modal{border-radius:0;min-height:100vh}.contact-modal-body{max-height:none}.contact-notifications>div{grid-template-columns:1fr}} .contact-modal-title{display:flex;align-items:center;gap:12px}.contact-avatar{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:#e4e9f1;color:#75849a;font-weight:700}.contact-help{font-weight:400;color:#7b8798;font-size:12px} /* Client-context lock for New Contact opened from Client Workspace */ .contact-client-locked{display:flex;align-items:center;gap:12px;min-height:68px;padding:12px 13px;border:1px solid #d8e3f0;border-radius:11px;background:linear-gradient(100deg,#f8fbff,#f7f5ff);box-shadow:0 4px 14px rgba(31,46,75,.04)} .contact-client-locked-icon{width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:10px;background:linear-gradient(135deg,#eef2ff,#e8f8ff);color:#4655ca}.contact-client-locked-icon svg{width:17px;height:17px} .contact-client-locked>div{min-width:0;flex:1}.contact-client-locked>div>span,.contact-client-locked strong,.contact-client-locked small{display:block}.contact-client-locked>div>span{color:#7e8ba0;font-size:9.5px;font-weight:850;letter-spacing:.08em;text-transform:uppercase}.contact-client-locked strong{margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#24364f;font-size:13px}.contact-client-locked small{margin-top:3px;color:#8794a7!important;font-size:10.5px;font-weight:500} .contact-client-locked-badge{display:inline-flex;align-items:center;gap:5px;min-height:27px;padding:3px 8px;border:1px solid #d7e2f5;border-radius:999px;background:#fff;color:#526884;font-size:9.5px;font-weight:800;white-space:nowrap}.contact-client-locked-badge svg{width:11px;height:11px} @media(max-width:520px){.contact-client-locked{align-items:flex-start}.contact-client-locked-badge{display:none}} /* ============================================================ SECTION: contract-public.css ============================================================ */ :root{font-family:Inter,Segoe UI,sans-serif;color:#26364d;background:#f5f7fa}*{box-sizing:border-box}body{margin:0}.public-contract{width:min(1180px,calc(100% - 36px));margin:0 auto;padding:26px 0 70px}.public-contract-brand{display:flex;align-items:center;gap:10px;color:#384253;text-decoration:none;font-size:30px;margin-bottom:35px}.public-contract-brand>span{width:24px;height:34px;position:relative;overflow:hidden}.public-contract-brand i{position:absolute;width:22px;height:22px;transform:rotate(45deg)}.public-contract-brand i:nth-child(1){background:#26b7cd;top:-4px;left:7px}.public-contract-brand i:nth-child(2){background:#e33b8b;top:8px;left:-7px}.public-contract-brand i:nth-child(3){background:#344255;top:19px;left:2px}.public-contract>header{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}.public-contract h1{font-size:18px;margin:0 0 3px}.public-contract header p{margin:0;color:#68768a}.public-contract header button,.public-contract header .signed{border:1px solid #d0d9e5;background:#fff;border-radius:6px;padding:9px 13px;margin-left:6px}.public-contract .sign{background:#18bd66!important;color:#fff;border-color:#18bd66!important}.signed{color:#14914e}.public-contract-grid{display:grid;grid-template-columns:minmax(0,2.1fr) minmax(280px,1fr);gap:32px}.public-contract-paper{background:#fff;border:1px solid #dbe2eb;border-radius:6px;box-shadow:0 2px 5px #17263b14;padding:24px;white-space:normal;line-height:1.55;min-height:700px}.public-contract-grid aside nav{display:flex;border-bottom:1px solid #d7dee8;margin-bottom:16px}.public-contract-grid aside nav a{padding:10px 12px;color:#26364d;text-decoration:none}.public-contract-grid aside nav a.active{border-bottom:2px solid #26364d}.public-contract-grid aside h2{font-size:18px;margin-top:28px}.public-contract-grid dl{display:grid;grid-template-columns:145px 1fr;gap:8px;color:#647185}.public-contract-grid dd{margin:0;color:#37475e}.public-discussion{text-align:right}.public-discussion input,.public-discussion textarea{width:100%;border:1px solid #cbd5e1;border-radius:6px;padding:10px;margin-bottom:8px}.public-discussion textarea{min-height:90px}.public-discussion button{background:#172438;color:#fff;border:0;border-radius:6px;padding:9px 13px}.public-comments p{background:#fff;border:1px solid #dbe2eb;border-radius:6px;padding:12px;white-space:pre-wrap}.public-comments b,.public-comments small{display:block}.public-comments small{color:#7b8797;margin:3px 0 8px}.public-success{background:#e8f8ee;color:#24784b;padding:10px 14px;border-radius:6px;margin-bottom:15px}body>footer{text-align:center;border-top:1px solid #dae2eb;padding:18px}dialog{border:0;border-radius:12px;width:min(600px,calc(100% - 30px));padding:0;box-shadow:0 20px 55px #17263b55}dialog::backdrop{background:#26354b99}dialog form>header{padding:20px;border-bottom:1px solid #e1e6ed;display:flex;justify-content:space-between;font-size:18px}dialog header button{border:0;background:none;font-size:24px}dialog label{display:grid;grid-template-columns:90px 1fr;align-items:center;margin:18px 20px;font-weight:600;font-size:13px}dialog input,dialog textarea{border:1px solid #ccd6e4;border-radius:5px;padding:9px}dialog p{margin:25px 20px;color:#667487}dialog form>div{border-top:1px solid #e1e6ed;padding:16px 20px;text-align:right}dialog form>div button{padding:8px 12px;border:1px solid #ccd6e4;background:#fff;border-radius:5px;margin-left:6px}@media(max-width:760px){.public-contract-grid{grid-template-columns:1fr}.public-contract>header{align-items:flex-start;gap:15px;flex-direction:column}}@media print{.public-contract-brand,.public-contract>header>div:last-child,.public-contract-grid aside,body>footer{display:none}.public-contract-grid{display:block}.public-contract-paper{border:0;box-shadow:none}} /* ============================================================ SECTION: contracts.css ============================================================ */ .contract-page{padding:24px;color:#253247}.contract-page h1{font-size:20px;margin:0 0 10px;font-weight:700}.contract-stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;margin-bottom:20px}.contract-stat{display:flex;gap:5px;align-items:center;min-height:43px;padding:9px 14px;background:#fff;border:1px solid #dbe2ec;border-radius:7px;box-shadow:0 1px 2px #17263b12;color:#253247;text-decoration:none;font-size:13px}.contract-stat.selected{border-color:#3265df;box-shadow:0 0 0 2px #3265df22}.contract-stat .blue{color:#2363c3}.contract-stat .red{color:#e14b50}.contract-stat .amber{color:#bf821c}.contract-stat .green{color:#359c64}.contract-stat .gray{color:#657184}.contract-actions{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px}.contract-primary,.contract-outline{display:inline-flex;align-items:center;justify-content:center;gap:5px;border-radius:6px;padding:7px 11px;font-size:13px;text-decoration:none;cursor:pointer}.contract-primary{background:#1e293b;color:#fff;border:1px solid #1e293b;font-weight:600}.contract-outline{background:#fff;color:#253247;border:1px solid #d2dce9}.contract-outline i{width:14px;height:14px}.contract-filters{display:flex;flex-wrap:wrap;align-items:end;gap:12px;padding:15px;margin-bottom:10px;background:#fff;border:1px solid #dbe2ec;border-radius:7px}.contract-filters[hidden]{display:none}.contract-filters label{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:600}.contract-filters select,.contract-toolbar input,.contract-toolbar select{border:1px solid #ccd6e4;border-radius:5px;background:#fff;color:#253247;padding:7px 9px;font-size:13px}.contract-filters a{font-size:13px;color:#2862c9;margin-bottom:8px}.contract-charts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-bottom:34px}.contract-chart{height:440px;padding:24px;background:#fff;border:1px solid #dbe2ec;border-radius:7px;box-shadow:0 2px 4px #17263b12;overflow:hidden}.contract-chart h2{font-size:17px;margin:0 0 24px}.contract-chart-empty{display:flex;align-items:center;justify-content:center;height:300px;color:#788395;font-size:14px}.contract-bars,.contract-area{height:230px;border-bottom:1px solid #aeb7c5;background:repeating-linear-gradient(to top,#e8ebf0 0,#e8ebf0 1px,transparent 1px,transparent 25px);display:flex;align-items:end;justify-content:space-around;gap:8px;padding:0 14px}.contract-bar-slot{height:100%;flex:1;display:flex;align-items:end;justify-content:center}.contract-bar{display:block;width:min(46px,80%);min-height:2px;background:#d7efff;border:1px solid #54b3ff}.contract-area{display:block;padding:0}.contract-area svg{height:100%;width:100%}.contract-chart-labels{display:flex;justify-content:space-around;gap:8px;height:125px;padding:8px 14px 0}.contract-chart-labels div{flex:1;position:relative}.contract-chart-labels span{position:absolute;left:50%;top:0;transform:rotate(-48deg);transform-origin:left top;white-space:nowrap;font-size:10px;color:#657184;max-width:115px;overflow:hidden;text-overflow:ellipsis}.contract-table-card{background:#fff;border:1px solid #dbe2ec;border-radius:7px;box-shadow:0 2px 4px #17263b16;overflow:hidden}.contract-toolbar{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:17px 20px}.contract-toolbar>div{display:flex;align-items:center}.contract-toolbar>div form{margin:0 5px 0 0}.contract-toolbar>div a{color:#253247;text-decoration:none;border:1px solid #ccd6e4;padding:7px 9px;font-size:13px}.contract-toolbar>div a+a{border-left:0}.contract-toolbar>form input{min-width:210px}.contract-table-scroll{overflow:auto}.contract-table-card table{border-collapse:collapse;width:100%;font-size:13px;min-width:1050px}.contract-table-card th{background:#f8fafc;font-weight:600;text-align:left}.contract-table-card th,.contract-table-card td{padding:11px 10px;border-top:1px solid #e4e9f1}.contract-table-card th+th{border-left:1px solid #e4e9f1}.contract-table-card td{height:47px}.contract-table-card .contract-subject{min-width:280px;max-width:340px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.contract-table-card td a{color:#253247;text-decoration:none}.contract-table-card td a:hover{color:#2862c9;text-decoration:underline}.contract-table-card .contract-empty{text-align:center;color:#667487;padding:24px}.contract-table-card footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 20px;border-top:1px solid #e4e9f1;font-size:13px;color:#687589}.contract-table-card footer div{display:flex;gap:15px;align-items:center}.contract-table-card footer a{color:#586779;text-decoration:none}.contract-table-card footer b{background:#e7eaf0;padding:7px 11px;border-radius:7px;color:#253247}.contract-form-page,.contract-detail-page{max-width:1100px;margin:25px auto;padding:0 20px;color:#253247}.contract-form-page h1,.contract-detail-page h1{font-size:20px}.contract-form-card,.contract-detail-card{background:#fff;border:1px solid #dbe2ec;border-radius:7px;padding:25px;box-shadow:0 2px 4px #17263b16}.contract-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 22px}.contract-form-card label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600}.contract-form-card input,.contract-form-card select,.contract-form-card textarea{width:100%;box-sizing:border-box;padding:9px 10px;border:1px solid #ccd6e4;border-radius:5px;background:#fff;color:#253247;font:inherit}.contract-form-card textarea{min-height:110px}.contract-form-card .wide{grid-column:1/-1}.contract-form-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}.contract-detail-actions{display:flex;gap:8px;margin-bottom:20px}.contract-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.contract-detail-grid dt{font-size:12px;color:#6c7989}.contract-detail-grid dd{margin:4px 0 0}.contract-detail-card h2{font-size:17px}.contract-detail-card p{white-space:pre-wrap}.contract-error{color:#c1323d;font-size:12px}.contract-back{color:#2862c9;text-decoration:none}@media(max-width:1050px){.contract-stats{grid-template-columns:repeat(3,minmax(0,1fr))}.contract-charts{grid-template-columns:1fr}.contract-chart{height:400px}}@media(max-width:650px){.contract-page{padding:16px}.contract-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.contract-chart{padding:16px;height:340px}.contract-bars,.contract-area{height:180px}.contract-form-grid,.contract-detail-grid{grid-template-columns:1fr}.contract-toolbar{flex-wrap:wrap}} .contract-form-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.contract-form-heading a{color:#2862c9;text-decoration:none;font-size:13px}.contract-form-grid .contract-wide{grid-column:1/-1}.contract-form-card em{color:#d93d48;font-style:normal}.contract-form-card footer{display:flex;justify-content:flex-end;gap:8px;margin-top:22px}.contract-detail-grid>div{display:flex;flex-direction:column;gap:6px}.contract-detail-grid small{color:#687589}.contract-detail-grid strong{font-size:14px}.contract-detail-grid a{color:#2862c9;text-decoration:none}.contract-terms{border-top:1px solid #e4e9f1;margin-top:20px;padding-top:8px}.contract-status{display:inline-block;border:1px solid #d2dce9;border-radius:5px;padding:4px 8px;margin-bottom:18px;font-size:12px} .contract-reference-form{padding:27px}.contract-flags{display:flex;gap:16px;align-items:center;margin-bottom:17px}.contract-flags label{display:inline-flex;flex-direction:row;align-items:center;gap:6px;font-size:14px}.contract-flags input{width:18px;height:18px}.contract-flags i,.contract-subject-label i{width:15px;height:15px}.contract-reference-grid{display:grid;grid-template-columns:1fr 1fr;gap:17px 28px}.contract-reference-grid .contract-wide{grid-column:1/-1}.contract-reference-grid label{gap:7px}.contract-subject-label>span{display:flex;align-items:center;gap:4px}.contract-money,.contract-type-control{display:flex}.contract-money input,.contract-type-control select{border-radius:5px 0 0 5px}.contract-money span,.contract-type-control button{display:flex;align-items:center;justify-content:center;width:44px;border:1px solid #ccd6e4;border-left:0;border-radius:0 5px 5px 0;background:#fff;color:#253247}.contract-type-control button{font-size:22px;cursor:pointer}.contract-reference-form textarea{min-height:150px}.contract-reference-form footer{border-top:1px solid #e4e9f1;margin:24px -27px -27px;padding:16px 27px}.contract-reference-form footer .contract-primary{margin-left:auto}@media(max-width:650px){.contract-reference-grid{grid-template-columns:1fr}.contract-reference-grid .contract-wide{grid-column:1}.contract-form-page{padding:0 12px}.contract-reference-form{padding:18px}.contract-reference-form footer{margin:20px -18px -18px;padding:14px 18px}} .contract-subject{position:relative;overflow:visible!important}.contract-row-actions{display:none;position:absolute;left:10px;top:34px;z-index:5;background:#fff;border:1px solid #d7e0ea;border-radius:5px;box-shadow:0 5px 14px #17263b24;padding:5px;gap:3px}.contract-subject:hover .contract-row-actions{display:flex}.contract-row-actions a,.contract-row-actions button{border:0!important;background:none!important;padding:4px 7px!important;color:#2862c9!important;font-size:11px!important;text-decoration:none!important;cursor:pointer}.contract-row-actions button{color:#d14343!important}.contract-row-actions form{margin:0}.contract-workspace{max-width:1040px;margin:25px auto;padding:0 20px;color:#253247}.contract-workspace-head{display:flex;justify-content:space-between;align-items:center;gap:20px}.contract-workspace-head h1{font-size:20px}.contract-workspace-head>div{display:flex;align-items:center;gap:8px}.contract-workspace-head>div>a:first-child{color:#245ff2;text-decoration:none;margin-right:5px}.contract-workspace-head form{margin:0}.contract-tabs{display:flex;align-items:center;gap:0;background:#e9edf2;border-radius:7px;padding:4px;margin:10px 0 13px;overflow:auto}.contract-tabs a{white-space:nowrap;padding:11px 13px;color:#16253a;text-decoration:none;font-size:13px;border-radius:6px}.contract-tabs a.active{background:#fff;box-shadow:0 1px 2px #17263b12}.contract-workspace-card{background:#fff;border:1px solid #dbe2ec;border-radius:7px;padding:25px;box-shadow:0 2px 4px #17263b16;min-height:145px}.contract-info-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}.contract-info-grid div{display:flex;flex-direction:column;gap:7px}.contract-info-grid small{color:#6b7789}.contract-description{border-top:1px solid #e2e7ee;margin-top:24px;padding-top:12px}.contract-description p{white-space:pre-wrap}.contract-editor-toolbar{border:1px solid #ccd6e4;border-bottom:0;border-radius:5px 5px 0 0;padding:11px;display:flex;gap:20px;align-items:center}.contract-content-editor{display:block;width:100%;min-height:540px;border:1px solid #ccd6e4;padding:16px;font:14px/1.6 Segoe UI,sans-serif}.contract-workspace-card footer{display:flex;justify-content:flex-end;gap:8px;margin-top:15px}.contract-dropzone{text-align:right}.contract-dropzone label{height:145px;border:2px dashed #cdd6e2;display:flex;justify-content:center;align-items:center;flex-direction:column;cursor:pointer;margin-bottom:15px}.contract-dropzone label span{font-size:12px;color:#738096;margin-top:6px}.contract-dropzone input{position:absolute;opacity:0;width:1px;height:1px}.contract-text-entry{text-align:right}.contract-text-entry textarea{display:block;width:100%;min-height:95px;border:1px solid #ccd6e4;border-radius:5px;margin-bottom:12px;padding:10px}.contract-entry-list{margin-top:18px;border-top:1px solid #e3e8ef}.contract-entry-list article{display:flex;justify-content:space-between;align-items:center;padding:13px 4px;border-bottom:1px solid #e3e8ef}.contract-entry-list article div{display:flex;flex-direction:column;gap:4px}.contract-entry-list a{color:#2862c9;text-decoration:none}.contract-entry-list small{color:#748196}.contract-entry-list button{border:0;background:none;color:#d14343;font-size:20px;cursor:pointer}.contract-no-entries{color:#748196}.contract-dialog{width:min(600px,calc(100% - 30px));border:0;border-radius:12px;padding:0;box-shadow:0 20px 55px #17263b55}.contract-dialog.wide{width:min(1000px,calc(100% - 30px))}.contract-dialog::backdrop{background:#26354b99}.contract-dialog form>header{font-size:19px;font-weight:700;border-bottom:1px solid #e1e6ed;padding:20px;display:flex;justify-content:space-between}.contract-dialog header button{border:0;background:none;font-size:24px;color:#8792a3;cursor:pointer}.contract-dialog label{display:flex;flex-direction:column;gap:7px;margin:18px 20px;font-size:13px;font-weight:600}.contract-dialog input,.contract-dialog select,.contract-dialog textarea{border:1px solid #ccd6e4;border-radius:5px;padding:9px;font:inherit}.contract-dialog footer{border-top:1px solid #e1e6ed;padding:16px 20px}@media(max-width:750px){.contract-workspace-head{align-items:flex-start;flex-direction:column}.contract-info-grid{grid-template-columns:1fr 1fr}} .contract-table-card td{vertical-align:top}.contract-table-card .contract-subject{padding-bottom:8px}.contract-row-actions{display:flex!important;position:static!important;box-shadow:none!important;border:0!important;background:transparent!important;padding:5px 0 0!important;gap:2px!important;min-height:22px;visibility:hidden;opacity:0}.contract-subject:hover .contract-row-actions,.contract-subject:focus-within .contract-row-actions{visibility:visible;opacity:1}.contract-row-actions a,.contract-row-actions button{padding:2px 7px!important;border-right:1px solid #d9e0e9!important;border-radius:0}.contract-row-actions>*:last-child,.contract-row-actions form:last-child button{border-right:0!important} .contract-workspace-form{padding:0}.contract-workspace-form label{display:flex;flex-direction:column;gap:7px;font-size:13px;font-weight:600;color:#253247;min-width:0}.contract-workspace-form input,.contract-workspace-form select,.contract-workspace-form textarea{display:block;width:100%;box-sizing:border-box;padding:9px 10px;border:1px solid #ccd6e4;border-radius:5px;background:#fff;color:#253247;font:inherit;line-height:1.35}.contract-workspace-form input:focus,.contract-workspace-form select:focus,.contract-workspace-form textarea:focus{border-color:#6e9ee8;box-shadow:0 0 0 3px #2862c91a;outline:0}.contract-workspace-form .contract-flags label{display:inline-flex;flex-direction:row;align-items:center;font-size:14px;font-weight:400}.contract-workspace-form .contract-flags input{display:inline-block;width:18px;height:18px;padding:0;margin:0}.contract-workspace-form .contract-money input,.contract-workspace-form .contract-type-control select{border-radius:5px 0 0 5px}.contract-workspace-form .contract-money span,.contract-workspace-form .contract-type-control button{flex:0 0 44px;box-sizing:border-box}.contract-workspace-form textarea{min-height:150px;resize:vertical}.contract-workspace-form footer{border-top:1px solid #e4e9f1;margin:24px -25px -25px;padding:16px 25px}.contract-workspace-form footer .contract-primary{margin-left:auto}@media(max-width:650px){.contract-workspace-card{padding:18px}.contract-workspace-form footer{margin:20px -18px -18px;padding:14px 18px}} .contract-workspace-form em{color:#d93d48;font-style:normal}.contract-field-title{display:flex;align-items:center;gap:4px} .contract-task-list{margin-top:20px;overflow:auto}.contract-task-list table{width:100%;border-collapse:collapse;min-width:760px;font-size:13px}.contract-task-list th,.contract-task-list td{padding:12px 9px;border-bottom:1px solid #e5eaf1;text-align:left}.contract-task-list th{background:#f7f9fc}.contract-task-list a{color:#245ff2;text-decoration:none}.contract-task-dialog{width:min(600px,calc(100% - 24px));max-height:calc(100vh - 40px);overflow:auto}.contract-task-dialog form>header{padding:21px 20px;font-size:19px}.contract-task-fields{padding:16px 20px}.contract-task-dialog label{margin:0;display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600}.contract-task-dialog label span em{color:#db444e;font-style:normal}.contract-task-dialog input,.contract-task-dialog select,.contract-task-dialog textarea{box-sizing:border-box;width:100%;min-height:34px;border:1px solid #cbd5e1;border-radius:6px;padding:6px 10px;background:#fff;color:#24364b;font:inherit}.contract-task-dialog select:disabled{background:#f4f6f9;color:#8a94a5}.contract-task-options{display:flex;align-items:center;gap:16px;border-bottom:1px solid #e4e9f0;padding:8px 0 20px;margin-bottom:20px}.contract-task-options label{display:inline-flex;flex-direction:row;align-items:center;gap:6px;white-space:nowrap}.contract-task-options input[type=checkbox]{width:17px;min-height:17px;height:17px;margin:0;accent-color:#2563eb}.contract-task-options .contract-task-upload{margin-left:auto;color:#245ff2;cursor:pointer}.contract-task-upload input{display:none}.contract-task-full{margin-bottom:17px!important}.contract-task-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 30px;margin:2px 0 17px}.contract-task-tags{border-bottom:1px solid #e4e9f0;padding-bottom:18px}.contract-task-tags>span{display:flex;flex-wrap:wrap;gap:5px;align-items:center}.contract-task-tags>span input{border:0;outline:0;min-width:100px;flex:1}.contract-task-chip{display:inline-flex!important;align-items:center;gap:4px;padding:5px 9px;border-radius:5px;background:#edf0f4;font-weight:400}.contract-task-chip button{border:0;background:none;cursor:pointer;font-size:16px}.contract-task-description textarea{min-height:132px;resize:vertical}.contract-task-dialog footer{display:flex;justify-content:flex-end;gap:9px;padding:15px 20px}.contract-task-errors{background:#fff3f3;border:1px solid #efb7b7;color:#a32727;padding:9px 12px;border-radius:5px;margin-bottom:12px}.contract-task-errors p{margin:3px 0}@media(max-width:580px){.contract-task-grid{grid-template-columns:1fr}.contract-task-options{flex-wrap:wrap}.contract-task-options .contract-task-upload{margin-left:0}} .contract-task-followers{position:relative;min-width:0}.contract-task-followers>label{margin-bottom:6px}.contract-task-followers summary{box-sizing:border-box;display:block;height:34px;line-height:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:6px 28px 6px 10px;border:1px solid #cbd5e1;border-radius:6px;cursor:pointer;color:#64748b}.contract-task-followers summary:after{content:'โŒ„';position:absolute;right:10px;top:26px}.contract-task-followers details>div{position:absolute;z-index:10;top:57px;left:0;right:0;max-height:160px;overflow:auto;padding:6px;background:#fff;border:1px solid #cbd5e1;border-radius:5px;box-shadow:0 5px 14px #16243b24}.contract-task-followers details label{display:flex;flex-direction:row;align-items:center;padding:5px;font-weight:400;cursor:pointer}.contract-task-followers details input{width:16px;min-height:16px;height:16px;margin:0 7px 0 0} /* ========================================================== Contracts โ€” Invoice-style visual system ========================================================== */ .contract-invoice-page{max-width:1600px;margin:0 auto;padding:0;color:#263954} .contract-invoice-heading{display:flex;align-items:center;justify-content:space-between;gap:22px;margin:0 0 14px;padding:18px 20px;border:1px solid #dce4ef;border-radius:14px;background:linear-gradient(120deg,#fff 62%,#f5f8ff 100%);box-shadow:0 6px 20px rgba(31,48,76,.055)} .contract-invoice-eyebrow{display:block;margin-bottom:4px;color:#5f6bd6;font-size:10px;font-weight:850;letter-spacing:.1em;text-transform:uppercase} .contract-invoice-heading h1{margin:0;font-size:24px;line-height:1.2;letter-spacing:-.025em;color:#18263b} .contract-invoice-heading p{margin:5px 0 0;color:#76859a;font-size:12px} .contract-invoice-heading-actions{display:flex;align-items:center;gap:8px;flex:none} .contract-invoice-heading-actions a,.contract-invoice-heading-actions button{min-height:36px;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 12px;border:1px solid #ced8e5;border-radius:8px;text-decoration:none;font:inherit;font-size:12px;font-weight:750;cursor:pointer} .contract-invoice-heading-actions svg{width:14px;height:14px} .contract-invoice-primary{background:#3157df!important;border-color:#3157df!important;color:#fff!important;box-shadow:0 6px 14px rgba(49,87,223,.18)} .contract-invoice-primary:hover{background:#284cc8!important;border-color:#284cc8!important} .contract-invoice-secondary{background:#fff;color:#34506f} .contract-invoice-secondary:hover{background:#f7f9fd;border-color:#b9c9df;color:#285fc1} .contract-invoice-page .contract-stats{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-bottom:12px} .contract-invoice-page .contract-stat{min-height:46px;justify-content:space-between;gap:10px;padding:0 13px;border:1px solid #dce4ed;border-radius:10px;background:#fff;box-shadow:none;color:#52647c;font-size:11px} .contract-invoice-page .contract-stat strong{order:2;color:#21344f;font-size:14px} .contract-invoice-page .contract-stat span{order:1;font-weight:700} .contract-invoice-page .contract-stat.selected{border-color:#9bb5f0;background:#f2f6ff;box-shadow:none;color:#285fc1} .contract-invoice-page .contract-stat.selected strong{color:#285fc1} .contract-invoice-page .contract-filters{align-items:end;gap:10px;padding:12px 14px;margin-bottom:10px;border:1px solid #dce4ed;border-radius:10px;background:#fff} .contract-invoice-page .contract-filters label{display:grid;gap:5px;font-size:11px;font-weight:700;color:#53647a} .contract-invoice-page .contract-filters select{height:32px;min-width:155px;border:1px solid #cfd9e5;border-radius:6px;padding:0 9px;background:#fff;color:#30435c;font-size:11px} .contract-invoice-page .contract-filters .contract-primary{height:32px;padding:0 11px;border-radius:6px;background:#3157df;color:#fff;border-color:#3157df;font-size:11px} .contract-invoice-page .contract-filters>a{height:32px;display:inline-flex;align-items:center;margin:0;padding:0 11px;border:1px solid #cfd9e5;border-radius:6px;background:#fff;color:#51647d;font-size:11px;text-decoration:none} .contract-invoice-page .contract-charts{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:12px} .contract-invoice-page .contract-chart{height:285px;padding:0;border:1px solid #dce3ec;border-radius:12px;background:#fff;box-shadow:0 5px 18px rgba(31,48,76,.055);overflow:hidden} .contract-invoice-page .contract-chart h2{min-height:58px;display:flex;align-items:center;margin:0;padding:0 14px;border-bottom:1px solid #e3e9f1;background:linear-gradient(90deg,#fbfcff,#f7f9ff);color:#21314c;font-size:13px;font-weight:800} .contract-invoice-page .contract-bars,.contract-invoice-page .contract-area{height:150px;margin:12px 14px 0;border-bottom:1px solid #d8e0ea;background:repeating-linear-gradient(to top,#edf1f5 0,#edf1f5 1px,transparent 1px,transparent 30px)} .contract-invoice-page .contract-bar{width:min(34px,72%);background:#dfe9ff;border-color:#7295ec} .contract-invoice-page .contract-chart-labels{height:58px;padding:7px 14px 0} .contract-invoice-page .contract-chart-labels span{font-size:9px;color:#7b899c;transform:rotate(-30deg)} .contract-invoice-page .contract-chart-empty{height:210px;color:#8795a7;font-size:11px} .contract-invoice-page .contract-table-card{border:1px solid #dce3ec;border-radius:12px;background:#fff;box-shadow:0 5px 18px rgba(31,48,76,.055);overflow:hidden} .contract-invoice-page .contract-toolbar{min-height:62px;padding:10px 14px;border-bottom:1px solid #e3e9f1;background:linear-gradient(90deg,#fbfcff,#f7f9ff)} .contract-invoice-page .contract-toolbar>div{display:flex;align-items:center} .contract-invoice-page .contract-toolbar>div form{display:flex;margin:0} .contract-invoice-page .contract-toolbar select,.contract-invoice-page .contract-toolbar>div a,.contract-invoice-page .contract-toolbar>form input{height:32px;box-sizing:border-box;border:1px solid #cbd6e4;background:#fff;color:#34465e;font:inherit;font-size:11px} .contract-invoice-page .contract-toolbar select{min-width:70px;border-radius:6px 0 0 6px;padding:0 8px} .contract-invoice-page .contract-toolbar>div form+ a{border-left:0} .contract-invoice-page .contract-toolbar>div a{display:inline-flex;align-items:center;padding:0 9px;text-decoration:none;border-radius:0} .contract-invoice-page .contract-toolbar>div a:last-child{border-left:0;border-radius:0 6px 6px 0} .contract-invoice-page .contract-toolbar>form input{width:210px;border-radius:6px;padding:0 10px;outline:0} .contract-invoice-page .contract-toolbar>form input:focus{border-color:#9bb5f0;box-shadow:0 0 0 3px #edf3ff} .contract-invoice-page .contract-table-card table{min-width:1180px;font-size:12px} .contract-invoice-page .contract-table-card th{height:40px;padding:0 11px;background:#f8fafc;color:#21314c;font-size:10.5px;font-weight:750;border-top:0;border-bottom:1px solid #e4eaf1} .contract-invoice-page .contract-table-card th+th{border-left:1px solid #e7ebf1} .contract-invoice-page .contract-table-card td{height:62px;padding:10px 11px;border-top:0;border-bottom:1px solid #e8edf3;color:#33465f;vertical-align:middle} .contract-invoice-page .contract-table-card tbody tr:hover td{background:#fbfcff} .contract-invoice-page .contract-table-card .contract-subject{min-width:240px;max-width:300px;padding-bottom:10px;white-space:normal} .contract-invoice-page .contract-subject>a{display:block;color:#1f4f95!important;font-weight:800;text-decoration:none} .contract-invoice-page .contract-row-actions{visibility:visible;opacity:1;display:flex!important;align-items:center;gap:5px!important;min-height:18px;padding:4px 0 0!important;font-size:9.5px} .contract-invoice-page .contract-row-actions a,.contract-invoice-page .contract-row-actions button{padding:0!important;border:0!important;background:transparent!important;color:#55729a!important;font:inherit!important;font-size:9.5px!important;font-weight:650!important;text-decoration:none!important} .contract-invoice-page .contract-row-actions span{color:#b5bfcc} .contract-invoice-page .contract-row-actions a:hover,.contract-invoice-page .contract-row-actions button:hover{color:#1d4ed8!important;text-decoration:underline!important} .contract-invoice-page .contract-row-actions form{display:inline;margin:0 0 0 1px} .contract-type-badge,.contract-signature{display:inline-flex;align-items:center;min-height:23px;padding:0 8px;border:1px solid #d7e0eb;border-radius:999px;background:#f7f9fc;color:#5a6b80;font-size:9.5px;font-weight:750;white-space:nowrap} .contract-type-badge{background:#f2f6ff;border-color:#d7e2fa;color:#315fc5} .contract-signature.is-signed{background:#eefaf4;border-color:#d5f0e1;color:#198754} .contract-signature.is-pending{background:#fff8ec;border-color:#f1dfba;color:#a56d10} .contract-value-cell{color:#21344f!important;font-weight:800;font-variant-numeric:tabular-nums} .contract-invoice-page .contract-empty{height:150px!important;padding:36px!important;color:#8795a7!important;font-size:11px} .contract-invoice-page .contract-table-card footer{min-height:58px;padding:0 14px;border-top:1px solid #e6ebf2;color:#718096;font-size:11px} .contract-invoice-page .contract-table-card footer div{gap:12px} .contract-invoice-page .contract-table-card footer b{display:grid;place-items:center;min-width:30px;height:30px;padding:0 8px;border-radius:7px;background:#eaf0f8;color:#25405f;font-size:10px} .contract-invoice-page .contract-table-card footer a{color:#66778d} /* Contract form โ€” Invoice-style card */ .contract-form-page{max-width:1120px;margin:0 auto;padding:0;color:#263954} .contract-form-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:0 0 14px;padding:18px 20px;border:1px solid #dce4ef;border-radius:14px;background:linear-gradient(120deg,#fff 62%,#f5f8ff 100%);box-shadow:0 6px 20px rgba(31,48,76,.055)} .contract-form-heading:before{content:'CRM CONTRACTS';position:absolute;pointer-events:none;opacity:0} .contract-form-heading h1{margin:0;color:#18263b;font-size:23px!important;letter-spacing:-.025em} .contract-form-heading a{min-height:34px;display:inline-flex;align-items:center;padding:0 11px;border:1px solid #ced8e5;border-radius:8px;background:#fff;color:#34506f;font-size:11px;font-weight:750;text-decoration:none} .contract-form-card{padding:0!important;border:1px solid #dce3ec;border-radius:12px;background:#fff;box-shadow:0 5px 18px rgba(31,48,76,.055);overflow:hidden} .contract-reference-form{padding:20px!important} .contract-reference-form .contract-flags{margin:0 -20px 18px;padding:12px 20px;border-bottom:1px solid #e6ebf2;background:#fbfcff} .contract-reference-form .contract-flags label{font-size:11px!important;color:#52647a} .contract-reference-grid{gap:15px 20px} .contract-reference-form label{font-size:11px!important;font-weight:700!important;color:#53647a!important} .contract-reference-form input,.contract-reference-form select,.contract-reference-form textarea,.contract-workspace-form input,.contract-workspace-form select,.contract-workspace-form textarea{min-height:36px;border:1px solid #cfd9e5!important;border-radius:7px!important;padding:8px 10px!important;background:#fff!important;color:#30435c!important;font-size:12px!important;box-shadow:none!important} .contract-reference-form textarea,.contract-workspace-form textarea{min-height:145px} .contract-reference-form input:focus,.contract-reference-form select:focus,.contract-reference-form textarea:focus,.contract-workspace-form input:focus,.contract-workspace-form select:focus,.contract-workspace-form textarea:focus{border-color:#9bb5f0!important;box-shadow:0 0 0 3px #edf3ff!important;outline:0} .contract-money span,.contract-type-control button,.contract-workspace-form .contract-money span,.contract-workspace-form .contract-type-control button{border-color:#cfd9e5!important;background:#f8fafc!important;color:#53647a!important} .contract-reference-form footer{margin:20px -20px -20px!important;padding:12px 20px!important;border-top:1px solid #e6ebf2!important;background:#fbfcff} .contract-primary{min-height:34px;padding:0 11px;border:1px solid #3157df!important;border-radius:7px!important;background:#3157df!important;color:#fff!important;font-size:11px!important;font-weight:750!important;box-shadow:0 4px 10px rgba(49,87,223,.13)} .contract-primary:hover{background:#284cc8!important;border-color:#284cc8!important} .contract-outline{min-height:34px;padding:0 11px;border:1px solid #cfd9e5!important;border-radius:7px!important;background:#fff!important;color:#4f627b!important;font-size:11px!important;font-weight:700!important} .contract-outline:hover{background:#f7f9fd!important;border-color:#b9c9df!important;color:#285fc1!important} /* Contract detail workspace โ€” Invoice-style */ .contract-workspace{max-width:1600px;margin:0 auto;padding:0;color:#263954} .contract-workspace-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 0 12px;padding:18px 20px;border:1px solid #dce4ef;border-radius:14px;background:linear-gradient(120deg,#fff 62%,#f5f8ff 100%);box-shadow:0 6px 20px rgba(31,48,76,.055)} .contract-workspace-head h1{margin:0;color:#18263b;font-size:24px;line-height:1.2;letter-spacing:-.025em} .contract-workspace-head>div{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .contract-workspace-head>div>a:first-child{min-height:36px;display:inline-flex;align-items:center;padding:0 12px;margin:0;border:1px solid #3157df;border-radius:8px;background:#3157df;color:#fff;font-size:11px;font-weight:750;text-decoration:none;box-shadow:0 6px 14px rgba(49,87,223,.16)} .contract-tabs{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:7px;margin:0 0 12px;padding:0;background:transparent;border:0;overflow:visible} .contract-tabs a{min-height:42px;display:flex;align-items:center;justify-content:center;padding:0 10px;border:1px solid #dce4ed;border-radius:9px;background:#fff;color:#52647c;font-size:10.5px;font-weight:700;text-align:center} .contract-tabs a:hover{border-color:#c9d6e7;background:#fafcff;color:#285fc1} .contract-tabs a.active{border-color:#9bb5f0;background:#f2f6ff;color:#285fc1;box-shadow:none} .contract-workspace-card{min-height:180px;padding:20px;border:1px solid #dce3ec;border-radius:12px;background:#fff;box-shadow:0 5px 18px rgba(31,48,76,.055)} .contract-workspace-form{padding:0} .contract-workspace-form footer{margin:20px -20px -20px!important;padding:12px 20px!important;border-top:1px solid #e6ebf2!important;background:#fbfcff} .contract-editor-toolbar{min-height:42px;padding:0 12px;border:1px solid #d6dfeb;border-bottom:0;border-radius:7px 7px 0 0;background:#f8fafc;color:#52647a;font-size:11px;gap:15px} .contract-content-editor{min-height:480px;border-color:#d6dfeb;padding:14px;color:#33465f;font-size:12px} .contract-dropzone label{height:145px;border:1px dashed #b8c7da;border-radius:9px;background:#fbfcfe;color:#718196} .contract-text-entry textarea{border:1px solid #cfd9e5;border-radius:7px;color:#30435c;font-size:12px} .contract-entry-list{border-top-color:#e6ebf2} .contract-entry-list article{padding:12px 4px;border-bottom-color:#e8edf3;font-size:11px} .contract-entry-list a{color:#1f4f95;font-weight:700} .contract-no-entries{padding:28px;text-align:center;color:#8795a7;font-size:11px} /* Contract tasks โ€” Invoice-style table */ .contract-task-list{margin-top:12px;border:1px solid #dce3ec;border-radius:10px;overflow:auto;background:#fff} .contract-task-list table{min-width:900px;font-size:12px} .contract-task-list th{height:40px;padding:0 11px;border-bottom:1px solid #e4eaf1;background:#f8fafc;color:#21314c;font-size:10.5px;font-weight:750} .contract-task-list td{height:58px;padding:10px 11px;border-bottom:1px solid #e8edf3;color:#33465f;vertical-align:middle} .contract-task-list tbody tr:hover td{background:#fbfcff} .contract-task-list a{color:#1f4f95;font-weight:750} /* Contract dialogs */ .contract-dialog{border:1px solid #e1e7ef;border-radius:12px;box-shadow:0 24px 70px rgba(15,23,42,.24)} .contract-dialog::backdrop{background:rgba(15,23,42,.52);backdrop-filter:blur(3px)} .contract-dialog form>header{min-height:58px;box-sizing:border-box;align-items:center;padding:0 18px;border-bottom:1px solid #e4e9f0;background:#f8fafc;color:#273a52;font-size:15px;font-weight:750} .contract-dialog label{margin:16px 18px;color:#52637a;font-size:11px;font-weight:700} .contract-dialog input,.contract-dialog select,.contract-dialog textarea{min-height:36px;border:1px solid #cfd9e5;border-radius:7px;color:#31445e;font-size:12px} .contract-dialog footer{padding:12px 18px;border-top:1px solid #e4e9f0;background:#fbfcfe} @media(max-width:1200px){ .contract-invoice-page .contract-stats{grid-template-columns:repeat(3,minmax(0,1fr))} .contract-tabs{grid-template-columns:repeat(4,minmax(0,1fr))} } @media(max-width:900px){ .contract-invoice-heading,.contract-workspace-head{align-items:flex-start;flex-direction:column} .contract-invoice-page .contract-charts{grid-template-columns:1fr} } @media(max-width:650px){ .contract-invoice-page{padding:0} .contract-invoice-page .contract-stats{grid-template-columns:repeat(2,minmax(0,1fr))} .contract-invoice-heading-actions{width:100%;flex-wrap:wrap} .contract-invoice-heading-actions>*{flex:1} .contract-invoice-page .contract-toolbar{align-items:flex-start;flex-direction:column} .contract-invoice-page .contract-toolbar>form{width:100%} .contract-invoice-page .contract-toolbar>form input{width:100%} .contract-form-heading{align-items:flex-start;flex-direction:column} .contract-tabs{grid-template-columns:repeat(2,minmax(0,1fr))} .contract-workspace-card{padding:16px} .contract-workspace-form footer{margin:18px -16px -16px!important;padding:12px 16px!important} } /* Contract type manager */ .contract-type-dialog{width:min(560px,calc(100vw - 28px));padding:0;overflow:hidden;background:#fff} .contract-type-dialog form{margin:0} .contract-type-dialog>form>header{display:flex;justify-content:space-between;gap:16px} .contract-type-dialog-title{display:flex;align-items:center;gap:11px} .contract-type-dialog-title>span{width:36px;height:36px;display:grid;place-items:center;border-radius:10px;background:#edf4ff;color:#2563eb} .contract-type-dialog-title>span svg{width:17px;height:17px} .contract-type-dialog-title strong,.contract-type-dialog-title small{display:block} .contract-type-dialog-title strong{font-size:14px;color:#21324a} .contract-type-dialog-title small{margin-top:2px;color:#8390a3;font-size:10.5px;font-weight:600} .contract-dialog-close{width:32px;height:32px;border:0;border-radius:8px;background:transparent;color:#8a97a8;font-size:22px;line-height:1} .contract-dialog-close:hover{background:#eef2f7;color:#334155} .contract-type-dialog-body{padding:2px 0 6px} .contract-type-dialog-body>label{display:flex;flex-direction:column;gap:7px} .contract-type-dialog-body>label input{width:100%;padding:0 11px} .contract-type-existing{margin:2px 18px 16px;padding:14px;border:1px solid #e2e8f0;border-radius:10px;background:#f8fafc} .contract-type-existing strong,.contract-type-existing small{display:block} .contract-type-existing strong{color:#334155;font-size:11.5px} .contract-type-existing small{margin-top:2px;color:#8a97a8;font-size:10px} .contract-type-chip-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px} .contract-type-chip-list span{display:inline-flex;align-items:center;min-height:26px;padding:4px 8px;border:1px solid #dbe4ef;border-radius:999px;background:#fff;color:#4b5f79;font-size:10.5px;font-weight:700} .contract-type-chip-list em{color:#96a1af;font-size:10.5px;font-style:normal} .contract-type-dialog footer{display:flex;justify-content:flex-end;gap:8px} .contract-field-hint{display:block;margin-top:5px;color:#8b98aa;font-size:10px;font-weight:500} /* ============================================================ SECTION: credit-notes.css ============================================================ */ /* Sales & Finance โ†’ Credit Notes โ€” exact Invoice design companion */ .credit-note-index-page .invoice-contact-summary{grid-template-columns:repeat(5,minmax(0,1fr))} .credit-note-money-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:12px} .credit-note-money-strip>div{min-height:58px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 14px;border:1px solid #dce4ed;border-radius:10px;background:#fff} .credit-note-money-strip span{color:#7b899c;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase} .credit-note-money-strip strong{color:#21344f;font-size:15px} .credit-note-money-strip>div:nth-child(2) strong{color:#285fc1} .credit-note-money-strip>div:nth-child(3) strong{color:#198754} .credit-note-client-link{color:#285fc1!important;text-decoration:none!important;font-weight:650}.credit-note-client-link:hover{text-decoration:underline!important} .invoice-contact-status.credit-note-status.status-draft,.invoice-status.credit-note-status.status-draft{background:#f4f6f9!important;border-color:#d7e0eb!important;color:#66778b!important} .invoice-contact-status.credit-note-status.status-open,.invoice-status.credit-note-status.status-open{background:#eef5ff!important;border-color:#d7e5fb!important;color:#2e67b1!important} .invoice-contact-status.credit-note-status.status-applied,.invoice-status.credit-note-status.status-applied{background:#eefaf4!important;border-color:#d5f0e1!important;color:#198754!important} .invoice-contact-status.credit-note-status.status-refunded,.invoice-status.credit-note-status.status-refunded{background:#f6f2ff!important;border-color:#ded3f6!important;color:#7054b4!important} .credit-note-table{min-width:1260px!important} .credit-note-table td:nth-child(3),.credit-note-table td:nth-child(4),.credit-note-table td:nth-child(5){max-width:190px;overflow:hidden;text-overflow:ellipsis} /* New/Edit Credit Note inside the Invoice form shell */ .credit-note-invoice-form-page .invoice-contact-card{overflow:visible!important} .credit-note-invoice-form-page .estimate-columns{padding-bottom:18px!important} .credit-note-invoice-form-page .credit-note-project-field small,.credit-note-invoice-form-page .credit-note-invoice-field small{margin-top:5px;color:#8190a3!important;font-size:10.5px!important} .credit-note-invoice-form-page .credit-note-project-field select:disabled,.credit-note-invoice-form-page .credit-note-invoice-field select:disabled{background:#f5f7fa!important;color:#99a5b5!important;cursor:not-allowed!important} .credit-note-invoice-form-page .credit-note-items{margin-top:18px!important} .credit-note-invoice-form-page .estimate-notes{display:grid!important;grid-template-columns:1fr 1fr!important;gap:14px!important;margin:18px 24px!important;padding:16px!important;border:1px solid #e1e7ef!important;border-radius:11px!important;background:#fbfcfe!important} .credit-note-invoice-form-page .estimate-notes .estimate-field{min-width:0!important} .credit-note-invoice-form-page .credit-note-savebar{position:sticky!important;bottom:0!important;z-index:5!important;margin:0!important;padding:14px 24px!important;border-top:1px solid #e1e7ef!important;background:rgba(255,255,255,.96)!important;backdrop-filter:blur(8px);box-shadow:0 -8px 24px rgba(30,48,76,.05)!important} .credit-note-invoice-form-page .credit-note-savebar button:last-child{background:#1f4f95!important;border-color:#1f4f95!important} /* Credit Note workspace inside the Invoice workspace shell */ .credit-note-workspace .credit-note-stat-grid{grid-template-columns:repeat(4,minmax(0,1fr))} .credit-note-workspace .credit-note-stat.status-draft span{color:#65758b} .credit-note-workspace .credit-note-stat.status-open span{color:#2e67b1} .credit-note-workspace .credit-note-stat.status-applied span{color:#198754} .credit-note-workspace .credit-note-stat.status-refunded span{color:#7054b4} .credit-note-workspace .credit-note-money a:nth-child(1) span{color:#334155!important} .credit-note-workspace .credit-note-money a:nth-child(2) span{color:#285fc1!important} .credit-note-workspace .credit-note-money a:nth-child(3) span{color:#198754!important} .credit-note-workspace .credit-note-paper .invoice-simple-table{min-width:760px} .credit-note-workspace .credit-note-balance{background:#effbf4!important;color:#137a45!important} .credit-note-workspace .credit-note-balance span,.credit-note-workspace .credit-note-balance strong{color:#137a45!important} .credit-note-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 0 22px} .credit-note-detail-grid>div{min-height:62px;display:flex;flex-direction:column;justify-content:center;padding:11px 13px;border:1px solid #e4eaf2;border-radius:9px;background:#fbfcfe} .credit-note-detail-grid span{color:#8190a3;font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase} .credit-note-detail-grid strong{margin-top:4px;color:#263954;font-size:11.5px;overflow-wrap:anywhere} .credit-note-details-panel>h2+ p{padding:13px 14px;border:1px solid #e4eaf2;border-radius:9px;background:#fbfcfe} @media(max-width:900px){.credit-note-money-strip{grid-template-columns:1fr 1fr}.credit-note-workspace .credit-note-stat-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:700px){.credit-note-index-page .invoice-contact-summary{grid-template-columns:repeat(2,1fr)}.credit-note-money-strip{grid-template-columns:1fr}.credit-note-invoice-form-page .estimate-notes{grid-template-columns:1fr!important;margin-left:16px!important;margin-right:16px!important}.credit-note-detail-grid{grid-template-columns:1fr}} @media print{.credit-note-workspace .invoice-contact-view-head,.credit-note-workspace .invoice-stat-grid,.credit-note-workspace .invoice-actions,.credit-note-workspace .invoice-workspace-list,.credit-note-workspace .invoice-tabs,.credit-note-workspace .invoice-workspace-actions{display:none!important}.credit-note-workspace .invoice-workspace-grid{display:block!important}.credit-note-workspace .invoice-workspace-detail{border:0!important;box-shadow:none!important}.credit-note-workspace .invoice-workspace-paper{margin:0!important;border:0!important;box-shadow:none!important}} /* ============================================================ SECTION: customer-portal.css ============================================================ */ :root{font-family:Inter,Segoe UI,sans-serif;color:#26364d;background:#f6f8fb}*{box-sizing:border-box}body{margin:0;min-height:100vh}.portal-top{height:86px;background:#fff;border-bottom:1px solid #dbe2eb;display:flex;align-items:center;padding:0 max(24px,calc((100% - 1180px)/2));gap:40px}.portal-brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:#364052;font-size:25px;white-space:nowrap}.portal-logo-mark{width:22px;height:31px;position:relative;display:block;overflow:hidden}.portal-logo-mark i{position:absolute;width:20px;height:20px;transform:rotate(45deg)}.portal-logo-mark i:nth-child(1){background:#26b7cd;top:-5px;left:7px}.portal-logo-mark i:nth-child(2){background:#e33b8b;top:7px;left:-7px}.portal-logo-mark i:nth-child(3){background:#344255;top:17px;left:2px}.portal-top nav{display:flex;align-items:center;justify-content:flex-end;gap:28px;flex:1}.portal-top nav a{color:#13253e;text-decoration:none;font-size:14px}.portal-top nav a:hover{color:#2563eb}.portal-user{position:relative}.portal-user summary{list-style:none;cursor:pointer}.portal-user summary span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#dae2ed;color:#66758a;font-weight:700}.portal-user>div{position:absolute;right:0;top:43px;width:180px;padding:13px;background:#fff;border:1px solid #dce3ec;border-radius:7px;box-shadow:0 8px 24px #1f293733;z-index:10}.portal-user>div>*{display:block;margin:6px 0}.portal-user a,.portal-user button{color:#33506e;font:inherit;font-size:13px;text-decoration:none;border:0;background:none;padding:0;cursor:pointer}.portal-main{width:min(1180px,calc(100% - 36px));margin:0 auto;min-height:calc(100vh - 136px);padding:25px 0 48px}.portal-utilities{display:flex;justify-content:flex-end;gap:22px;margin-bottom:35px}.portal-utilities a{font-size:17px;color:#34465d;text-decoration:none}.portal-welcome{display:flex;align-items:center;justify-content:space-between}.portal-welcome h1{font-size:20px;margin:0 0 29px}.portal-welcome select,.portal-heading select,.invoice-year select{border:1px solid #ccd6e2;border-radius:6px;background:#fff;padding:9px 12px;color:#33465f;min-width:220px}.portal-summary h2,.portal-invoice-section h2{font-size:18px;font-weight:500;margin:0 0 12px}.portal-summary>div{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}.portal-summary a{height:64px;border:1px solid #d8e0ea;background:#fff;border-radius:6px;padding:12px 16px;text-decoration:none;color:#27374e}.portal-summary a span,.portal-summary a b{display:block;font-size:14px}.portal-summary a b{color:#245ff2;margin-top:8px}.portal-summary .summary-in-progress span{color:#2563eb}.portal-summary .summary-on-hold span{color:#f06b20}.portal-summary .summary-cancelled span{color:#8793a5}.portal-summary .summary-finished span{color:#09a443}.portal-invoice-section{margin-top:42px}.statement-link{display:inline-block;margin-top:-7px;margin-bottom:13px;color:#245ff2;font-size:13px;text-decoration:none}.portal-invoice-card{background:#fff;border:1px solid #dae1ea;border-radius:7px;box-shadow:0 2px 5px #1f293718;padding:26px 25px 22px}.invoice-status-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}.invoice-status-grid article header{display:flex;justify-content:space-between;font-size:14px}.invoice-status-grid article>div{height:20px;background:#eef1f5;border-radius:4px;margin-top:9px;position:relative;overflow:hidden}.invoice-status-grid article>div i{height:100%;display:block;background:#d18b00}.invoice-status-grid article>div span{position:absolute;inset:2px 5px;text-align:center;font-size:12px}.portal-invoice-card hr{border:0;border-top:1px solid #e2e7ed;margin:38px 0 20px}.invoice-year{margin-bottom:20px}.invoice-legend{display:flex;justify-content:center;gap:20px;font-size:12px;color:#697687}.invoice-legend span{display:flex;align-items:center;gap:5px}.invoice-legend i{width:40px;height:12px}.invoice-chart{height:365px;margin-top:10px;border-bottom:1px solid #9ca8b7;display:grid;grid-template-columns:repeat(12,1fr);position:relative;background:repeating-linear-gradient(to top,#dfe4ea 0,#dfe4ea 1px,transparent 1px,transparent 43px)}.chart-month{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;position:relative;min-width:0}.chart-bars{height:330px;width:55%;display:flex;align-items:flex-end;justify-content:center;gap:2px}.chart-bars i{display:block;min-width:5px;max-width:18px;flex:1}.chart-month>span{position:absolute;top:369px;font-size:11px;color:#667384}.portal-heading{display:flex;justify-content:space-between;align-items:end;margin:10px 0 22px}.portal-heading span{color:#2563eb;font-size:12px;text-transform:uppercase}.portal-heading h1{margin:4px 0;font-size:24px}.portal-heading p{margin:0;color:#738096}.portal-card{background:#fff;border:1px solid #dce3eb;border-radius:7px;box-shadow:0 2px 5px #1f293715}.portal-table{overflow:auto}.portal-table table{width:100%;border-collapse:collapse}.portal-table th,.portal-table td{text-align:left;padding:14px 17px;border-bottom:1px solid #e6ebf0}.portal-table th{background:#f8fafc}.portal-table td span{background:#e8f2ff;color:#2563eb;border-radius:10px;padding:4px 8px;font-size:12px}.portal-empty{padding:25px!important;color:#758296}.portal-alert{background:#e8f8ee;color:#24784b;padding:10px 14px;border-radius:7px;margin-bottom:16px}.portal-footer{height:50px;border-top:1px solid #dae2eb;text-align:center;padding:16px;color:#35465e;font-size:13px}.portal-footer a{color:#245ff2;text-decoration:none}@media(max-width:900px){.portal-top{padding:0 20px}.portal-top nav{gap:14px;overflow:auto;justify-content:flex-start}.portal-summary>div{grid-template-columns:repeat(3,1fr)}.invoice-status-grid{grid-template-columns:1fr 1fr}.invoice-chart{height:300px}.chart-bars{height:265px}.chart-month>span{top:304px;transform:rotate(-50deg);transform-origin:left}}@media(max-width:600px){.portal-top{height:auto;min-height:75px;flex-wrap:wrap;padding:12px 18px;gap:10px}.portal-top nav{order:3;width:100%;padding-bottom:4px}.portal-top nav a{white-space:nowrap}.portal-main{padding-top:18px}.portal-utilities{margin-bottom:25px}.portal-summary>div{grid-template-columns:1fr 1fr}.invoice-status-grid{grid-template-columns:1fr}.portal-invoice-card{padding:18px 14px}.portal-welcome,.portal-heading{align-items:flex-start;flex-direction:column}.portal-welcome form{margin-bottom:20px}} .portal-top nav a.active{background:#f0f4f9;border-radius:6px;padding:10px 12px;margin:-10px -12px}.portal-page-title{font-size:20px;margin:12px 0}.portal-status-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-bottom:44px}.portal-status-cards article{background:#fff;border:1px solid #d8e0ea;border-radius:6px;padding:13px 16px;min-height:64px}.portal-status-cards span,.portal-status-cards b{display:block;font-size:14px}.portal-status-cards b{color:#245ff2;margin-top:8px}.portal-status-cards i{height:18px;background:#eef1f5;border-radius:3px;display:block;margin-top:8px;overflow:hidden}.portal-status-cards em{display:block;height:100%;background:#d18b00}.portal-list-heading{display:flex;align-items:center;justify-content:space-between;margin:18px 0 10px}.portal-list-heading h2{font-size:19px;margin:0}.portal-dark-button{background:#172438!important;color:#fff!important;border:0;border-radius:6px;padding:10px 14px;text-decoration:none;font-weight:600;cursor:pointer}.portal-data-card{overflow:hidden}.portal-table-tools{display:flex;justify-content:space-between;padding:24px}.portal-table-tools select,.portal-table-tools input,.portal-table-tools button{height:36px;border:1px solid #ccd6e2;background:#fff;padding:0 12px}.portal-table-tools input{width:210px}.portal-table-tools button{margin-left:-1px}.portal-table a{color:#173b68;text-decoration:none}.portal-data-card>footer{display:flex;justify-content:space-between;padding:22px 24px;color:#69778c;font-size:13px}.portal-data-card>footer b{background:#edf1f6;color:#23344c;padding:9px 12px;border-radius:6px}.portal-contract-chart{height:270px;display:flex;align-items:flex-end;justify-content:center;gap:36px;padding:30px 60px 58px;border-bottom:1px solid #aab4c1;margin-bottom:45px;background:repeating-linear-gradient(to top,#e1e6ec 0,#e1e6ec 1px,transparent 1px,transparent 42px)}.portal-contract-chart div{height:180px;width:80px;display:flex;align-items:center;justify-content:flex-end;flex-direction:column;position:relative}.portal-contract-chart i{width:45px;background:#bde8fa;border:1px solid #36b9f5}.portal-contract-chart span{position:absolute;top:190px;white-space:nowrap;transform:rotate(-35deg);font-size:11px}.portal-contract-chart b{position:absolute;top:-18px;font-size:11px}.portal-form{padding:28px}.portal-form label{display:block;margin-bottom:17px;font-weight:600;font-size:14px}.portal-form input,.portal-form select,.portal-form textarea{display:block;width:100%;border:1px solid #cbd5e1;border-radius:6px;padding:10px;margin-top:8px;background:#fff;font:inherit}.portal-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}.portal-form footer{display:flex;justify-content:flex-end;border-top:1px solid #e3e8ee;margin:28px -28px -28px;padding:15px 28px;background:#fafbfd}.portal-errors{color:#c43f3f;margin:10px 0}.portal-detail-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.portal-detail-head h1{font-size:18px;margin:5px 0}.portal-detail-head a,.proposal-actions button{background:#fff;border:1px solid #ccd5e1;border-radius:5px;padding:8px 11px;color:#34445a;text-decoration:none}.portal-proposal-layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(250px,1fr);gap:22px}.portal-document{padding:28px;min-height:700px}.portal-document table{border-collapse:collapse;width:100%;font-size:13px}.portal-document th,.portal-document td{border-bottom:1px solid #e1e6ed;padding:11px;text-align:left}.portal-document td small{display:block;margin-top:4px}.portal-doc-totals{margin:25px 0 60px;margin-left:auto;width:48%}.portal-doc-totals span{display:flex;justify-content:space-between;border-bottom:1px solid #e1e6ed;padding:10px}.portal-rich-copy{line-height:1.55;color:#344359}.portal-proposal-side{font-size:13px}.proposal-actions{display:flex;gap:6px;flex-wrap:wrap}.proposal-actions form{display:flex;gap:6px}.proposal-actions .accept{background:#15b961;color:#fff;border-color:#15b961}.portal-proposal-side h3{border-bottom:1px solid #dbe2ea;padding-bottom:12px}.portal-proposal-side dl,.portal-record-detail dl{display:grid;grid-template-columns:160px 1fr;gap:10px}.portal-proposal-side dt,.portal-record-detail dt{color:#718096}.portal-proposal-side dd,.portal-record-detail dd{margin:0}.portal-record-detail{max-width:900px;margin:auto;padding:28px}.portal-record-detail header{display:flex;justify-content:space-between;border-bottom:1px solid #e1e6ed;padding-bottom:18px;margin-bottom:22px}.portal-record-detail header b{color:#2563eb}@media(max-width:800px){.portal-status-cards{grid-template-columns:1fr 1fr}.portal-proposal-layout{grid-template-columns:1fr}.portal-form-grid{grid-template-columns:1fr}.portal-contract-chart{overflow:auto;justify-content:flex-start}} @media print{.portal-top,.portal-utilities,.portal-footer,.portal-detail-head,.portal-proposal-side{display:none!important}.portal-main{width:100%;padding:0}.portal-document{border:0;box-shadow:none}} .portal-invoice-payment-layout{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(290px,.7fr);gap:20px;align-items:start}.portal-invoice-document{padding:28px}.portal-invoice-document>header{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:1px solid #dfe6ee;padding-bottom:22px}.portal-invoice-document header span{font-size:11px;letter-spacing:.14em;color:#6b7b90}.portal-invoice-document h2{margin:5px 0;font-size:22px}.portal-invoice-document header>b{background:#e9f2ff;color:#2868d7;border-radius:20px;padding:6px 10px;font-size:12px}.portal-invoice-parties{display:flex;justify-content:space-between;padding:24px 0}.portal-invoice-parties small,.portal-invoice-parties strong{display:block}.portal-invoice-parties strong{margin-top:7px}.portal-invoice-parties dl{display:grid;grid-template-columns:auto auto;gap:7px 20px;margin:0}.portal-invoice-parties dt{color:#718096}.portal-invoice-parties dd{margin:0;text-align:right}.portal-invoice-document table{width:100%;border-collapse:collapse}.portal-invoice-document th,.portal-invoice-document td{text-align:left;padding:13px;border-bottom:1px solid #e2e8f0}.portal-invoice-document th:last-child,.portal-invoice-document td:last-child{text-align:right}.portal-invoice-total{width:min(360px,100%);margin:25px 0 0 auto;display:grid;grid-template-columns:1fr auto;gap:0}.portal-invoice-total span,.portal-invoice-total b,.portal-invoice-total strong{padding:10px;border-bottom:1px solid #e4e9ef}.portal-invoice-total b,.portal-invoice-total strong{text-align:right}.portal-invoice-total strong{font-size:18px;color:#165ecf}.portal-payment-box{padding:22px;position:sticky;top:95px}.portal-payment-lock{font-size:10px;letter-spacing:.13em;color:#168a57}.portal-payment-box h2{margin:7px 0}.portal-payment-box>p{color:#718096;font-size:13px;line-height:1.5}.portal-gateway-list{display:grid;gap:9px;margin-top:18px}.portal-gateway-list button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid #ced9e6;border-radius:9px;background:#fff;padding:13px;text-align:left;cursor:pointer}.portal-gateway-list button:hover{border-color:#3477e5;background:#f6f9ff}.portal-gateway-list span,.portal-gateway-list small{display:block}.portal-gateway-list small{margin-top:3px;color:#8794a6}.portal-gateway-list b{color:#2466d6}.portal-paid-message,.portal-payment-empty{margin-top:18px;border-radius:8px;padding:13px;background:#e8f8ef;color:#19794e}.portal-payment-empty{background:#fff7e8;color:#91631b}.portal-payment-box h3{font-size:13px;margin:24px 0 8px}.portal-payment-history>div{display:flex;justify-content:space-between;border-top:1px solid #e7ebf0;padding:10px 0;font-size:12px}.portal-payment-history small{display:block;color:#8a96a6;margin-top:3px}.portal-payment-history b{font-size:10px;text-transform:uppercase}.portal-payment-history .status-completed{color:#15925b}.portal-payment-history .status-failed,.portal-payment-history .status-cancelled{color:#cf4050}.payment-redirect-card{max-width:520px;margin:80px auto;padding:38px;text-align:center}.payment-redirect-icon{display:grid;place-items:center;width:50px;height:50px;margin:auto;border-radius:50%;background:#eaf2ff;color:#2868d7;font-size:24px}.payment-redirect-card p{color:#718096}.payment-redirect-card button{margin-top:10px}@media(max-width:850px){.portal-invoice-payment-layout{grid-template-columns:1fr}.portal-payment-box{position:static}} .portal-files-card{overflow:hidden}.portal-dropzone{padding:24px;border-bottom:1px solid #e1e6ed;text-align:right}.portal-dropzone label{height:155px;border:1px dashed #a9c8ec;display:flex;align-items:center;justify-content:center;flex-direction:column;color:#1594ee;cursor:pointer;margin-bottom:15px}.portal-dropzone label span{color:#78869a;font-size:12px;margin-top:8px}.portal-dropzone input{position:absolute;width:1px;height:1px;opacity:0}.portal-file-list>p{padding:8px 24px 24px;color:#59687c}.portal-file-list article{display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:12px;padding:16px 24px;border-bottom:1px solid #e5eaf0}.portal-file-list article:last-child{border:0}.file-icon{width:38px;height:38px;border-radius:6px;background:#edf4ff;color:#2563eb;display:grid;place-items:center}.portal-file-list a{color:#245ff2;text-decoration:none}.portal-file-list small{display:block;color:#778498;margin-top:5px}.portal-file-list article>div:last-child{display:flex;align-items:center;gap:14px}.portal-file-list button{border:0;background:none;color:#d14343;cursor:pointer}.portal-calendar-card{padding:24px;overflow:auto}.portal-calendar-card>header{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;margin-bottom:20px}.portal-calendar-card>header h1{text-align:center;font-weight:500;margin:0}.portal-calendar-card>header a,.calendar-views>*{display:inline-block;background:#172438;color:#fff;text-decoration:none;padding:10px 14px}.portal-calendar-card>header .today{background:#747d88;margin-left:10px;border-radius:3px}.calendar-views{text-align:right}.calendar-views>*{font-size:13px}.portal-calendar-grid{min-width:760px;display:grid;grid-template-columns:repeat(7,1fr);border-left:1px solid #dbe2ea;border-top:1px solid #dbe2ea}.portal-calendar-grid .weekday{text-align:center;padding:9px;border-right:1px solid #dbe2ea;border-bottom:1px solid #dbe2ea;background:#fff;font-size:13px}.portal-calendar-day{height:112px;border-right:1px solid #dbe2ea;border-bottom:1px solid #dbe2ea;background:#fff;padding:8px;overflow:hidden}.portal-calendar-day time{display:block;text-align:right;font-size:12px;color:#66758a}.portal-calendar-day.outside{background:#fafbfc}.portal-calendar-day.outside time{color:#c7ced8}.portal-calendar-day.current time{background:#2563eb;color:#fff;border-radius:50%;width:25px;height:25px;display:grid;place-items:center;margin-left:auto}.calendar-event{display:block;color:#fff;border-radius:4px;padding:5px 7px;margin-top:5px;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.calendar-event.green{background:#75c52a}.calendar-event.blue{background:#168fd0}.calendar-event.purple{background:#9c3ec4}.calendar-event.red{background:#ec4a3c}.calendar-event.slate{background:#65758a}@media(max-width:700px){.portal-calendar-card>header{grid-template-columns:1fr}.portal-calendar-card>header h1{order:-1;margin-bottom:15px}.calendar-views{text-align:left;margin-top:12px}} .portal-unread{display:inline-grid;place-items:center;min-width:18px;height:18px;margin-left:4px;padding:0 5px;border-radius:10px;background:#ef4444;color:#fff;font-size:10px}.portal-message-head{display:flex;justify-content:space-between;align-items:center;margin:8px 0 20px}.portal-message-head span,.portal-profile-card header span,.portal-profile-hero small{font-size:11px;letter-spacing:.13em;color:#2563eb;font-weight:800}.portal-message-head h1{margin:5px 0;font-size:27px}.portal-message-head p{margin:0;color:#708096}.portal-message-head button,.portal-profile-form footer button{border:0;border-radius:9px;background:#172438;color:#fff;padding:11px 16px;font-weight:700;cursor:pointer}.portal-message-tabs{display:flex;align-items:center;gap:7px;margin-bottom:12px}.portal-message-tabs>a{padding:9px 15px;border-radius:8px;text-decoration:none;color:#526176;font-weight:700}.portal-message-tabs>a.active{background:#172438;color:#fff}.portal-message-tabs form{display:flex;margin-left:auto}.portal-message-tabs input{width:230px;border:1px solid #d5deea;border-radius:8px 0 0 8px;padding:10px}.portal-message-tabs button{border:0;border-radius:0 8px 8px 0;background:#e9eff7;color:#33455e;padding:0 13px}.portal-message-shell{display:grid;grid-template-columns:370px 1fr;min-height:590px;background:#fff;border:1px solid #dbe3ed;border-radius:15px;overflow:hidden;box-shadow:0 12px 32px #1e293b0d}.portal-message-list{border-right:1px solid #e2e8f0}.portal-message-list>a{display:grid;grid-template-columns:42px 1fr auto;gap:11px;padding:16px;border-bottom:1px solid #edf1f5;text-decoration:none;color:#26364d}.portal-message-list>a:hover,.portal-message-list>a.selected{background:#f2f7ff}.portal-message-list>a.unread{border-left:3px solid #2563eb}.portal-message-list>a>span,.portal-message-view header>span{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(135deg,#dbeafe,#c7d2fe);color:#1d4ed8;font-weight:800}.portal-message-list b,.portal-message-list strong,.portal-message-list small{display:block}.portal-message-list strong{font-size:13px;margin:3px 0}.portal-message-list small{color:#7a8799;font-size:12px}.portal-message-list time{font-size:10px;color:#94a3b8;white-space:nowrap}.portal-message-empty{padding:45px 20px;text-align:center;color:#8290a3}.portal-message-pages{padding:12px}.portal-message-view{padding:28px}.portal-message-view header{display:flex;align-items:center;gap:12px;padding-bottom:20px;border-bottom:1px solid #e5eaf0}.portal-message-view header b,.portal-message-view header small{display:block}.portal-message-view header small{color:#8290a3;margin-top:4px}.portal-message-view h2{font-size:22px;margin-top:28px}.portal-message-view>p{line-height:1.7;white-space:normal}.portal-message-files{display:flex;gap:8px;flex-wrap:wrap;margin-top:25px}.portal-message-files a{padding:9px 12px;border-radius:7px;background:#edf4ff;color:#2464ce;text-decoration:none}.portal-message-placeholder{text-align:center;padding-top:140px;color:#8a97a9}.portal-message-placeholder>span{display:grid;place-items:center;width:62px;height:62px;margin:auto;border-radius:18px;background:#edf3fb;font-size:28px}.portal-compose{width:min(610px,calc(100% - 32px));border:0;border-radius:16px;padding:0;box-shadow:0 30px 80px #0f172a55}.portal-compose::backdrop{background:#17203399}.portal-compose form>header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid #e2e8f0}.portal-compose h2{margin:0}.portal-compose header button{border:0;background:none;font-size:25px}.portal-compose label{display:block;margin:18px 24px;font-weight:700;font-size:13px}.portal-compose input,.portal-compose select,.portal-compose textarea{display:block;width:100%;margin-top:7px;padding:11px;border:1px solid #cad5e2;border-radius:8px;font:inherit}.portal-compose-file{padding:13px;border:1px dashed #aebed1;border-radius:9px}.portal-compose footer{display:flex;justify-content:flex-end;gap:8px;padding:16px 24px;background:#f8fafc}.portal-compose footer button{padding:10px 15px;border:1px solid #cbd5e1;border-radius:8px;background:#fff}.portal-compose footer button:last-child{background:#172438;color:#fff}.portal-profile-hero{display:flex;align-items:center;gap:18px;padding:27px 30px;margin-bottom:20px;border-radius:16px;background:linear-gradient(120deg,#172438,#27466e);color:#fff;box-shadow:0 15px 35px #17243826}.portal-profile-avatar{width:68px;height:68px;display:grid;place-items:center;border-radius:20px;background:#fff2;color:#fff;font-size:26px;font-weight:800}.portal-profile-hero h1{margin:5px 0;font-size:27px}.portal-profile-hero p{margin:0;color:#ced9e8}.portal-profile-state{margin-left:auto;padding:8px 12px;border-radius:20px;background:#22c55e22;color:#86efac;font-size:12px;font-weight:800}.portal-profile-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,.8fr);gap:20px}.portal-profile-card{background:#fff;border:1px solid #dde5ee;border-radius:15px;box-shadow:0 10px 30px #1e293b0b;overflow:hidden}.portal-profile-card>header{padding:22px 24px;border-bottom:1px solid #e5eaf0}.portal-profile-card h2{margin:5px 0 0}.portal-profile-card header p{margin:7px 0 0;color:#7b889a;font-size:13px}.portal-profile-fields{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:24px}.portal-profile-fields label{font-size:13px;font-weight:700;color:#33445a}.portal-profile-fields input{display:block;width:100%;margin-top:7px;padding:11px 12px;border:1px solid #cbd6e3;border-radius:8px;background:#fbfdff;font:inherit}.portal-profile-fields input:focus{outline:3px solid #dbeafe;border-color:#3b82f6}.portal-profile-form footer{display:flex;justify-content:flex-end;padding:16px 24px;background:#f8fafc;border-top:1px solid #e5eaf0}.portal-company-card dl{display:grid;grid-template-columns:1fr 1fr;margin:0;padding:12px 24px 25px}.portal-company-card dl>div{padding:13px 0;border-bottom:1px solid #edf1f5}.portal-company-card dl>div:nth-child(even){padding-left:18px}.portal-company-card dl .wide{grid-column:1/-1;padding-left:0}.portal-company-card dt{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#8996a7}.portal-company-card dd{margin:6px 0 0;font-weight:700;line-height:1.5}@media(max-width:850px){.portal-message-shell{grid-template-columns:1fr}.portal-message-list{border:0;border-bottom:1px solid #e2e8f0}.portal-message-view{min-height:420px}.portal-profile-grid{grid-template-columns:1fr}.portal-message-head{align-items:flex-start;gap:15px}.portal-message-tabs{flex-wrap:wrap}.portal-message-tabs form{width:100%;margin-left:0}.portal-message-tabs input{flex:1}.portal-profile-fields{grid-template-columns:1fr}} .portal-custom-logo{display:block;max-width:180px;max-height:54px;object-fit:contain} /* ========================================================== Customer Portal Redesign v2 โ€” 2026-10-04 ========================================================== */ :root{--portal-ink:#17233a;--portal-muted:#748196;--portal-line:#e4eaf2;--portal-soft:#f6f8fc;--portal-blue:#2563eb;--portal-indigo:#4f46e5;--portal-radius:16px;--portal-shadow:0 12px 34px rgba(31,46,75,.075)} *{box-sizing:border-box}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important} body.portal-professional{margin:0;background:#f6f8fc;color:var(--portal-ink);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased} .portal-shell-header{position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.96);border-bottom:1px solid rgba(218,226,238,.9);backdrop-filter:blur(15px)} .portal-top{width:min(1420px,calc(100% - 40px));height:74px;margin:0 auto;padding:0;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:28px;background:transparent;border:0;box-shadow:none} .portal-brand-wrap{display:flex;align-items:center;gap:10px;min-width:0}.portal-brand{display:flex;align-items:center;gap:10px;min-width:0;color:#17233a;text-decoration:none}.portal-brand-copy{display:grid;line-height:1.1}.portal-brand-copy b{font-size:15px;white-space:nowrap}.portal-brand-copy small{margin-top:4px;color:#8a96a8;font-size:9.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}.portal-logo-mark{width:36px;height:36px;display:flex;align-items:flex-end;justify-content:center;gap:3px;padding:8px;border-radius:11px;background:linear-gradient(135deg,#4338ca,#2563eb);box-shadow:0 8px 17px rgba(37,99,235,.18)}.portal-logo-mark i{display:block;width:4px;border-radius:99px;background:#fff}.portal-logo-mark i:nth-child(1){height:11px;opacity:.65}.portal-logo-mark i:nth-child(2){height:17px}.portal-logo-mark i:nth-child(3){height:14px;opacity:.82}.portal-custom-logo{max-width:165px;max-height:45px} .portal-primary-nav{min-width:0;display:flex;align-items:center;justify-content:center;gap:4px;overflow-x:auto;scrollbar-width:none}.portal-primary-nav::-webkit-scrollbar{display:none}.portal-primary-nav>a{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 10px;border-radius:9px;color:#58687e;text-decoration:none;font-size:12px;font-weight:700;white-space:nowrap;transition:.16s ease}.portal-primary-nav>a:hover{background:#f2f6fd;color:#1e4f99}.portal-primary-nav>a.active{background:#edf3ff;color:#2458bd}.portal-primary-nav>a.active:after{content:"";position:absolute;left:12px;right:12px;bottom:-18px;height:2px;border-radius:2px;background:#2563eb} .portal-header-actions{display:flex;align-items:center;gap:8px}.portal-header-icon{position:relative;width:38px;height:38px;display:grid;place-items:center;border:1px solid #e0e7f0;border-radius:10px;background:#fff;text-decoration:none}.portal-header-icon>b{position:absolute;right:-4px;top:-5px;min-width:17px;height:17px;padding:0 4px;border:2px solid #fff;border-radius:99px;background:#ef4444;color:#fff;font-size:9px;display:grid;place-items:center}.portal-icon-envelope{width:16px;height:12px;border:1.7px solid #65758a;border-radius:3px;position:relative}.portal-icon-envelope:after{content:"";position:absolute;left:2px;right:2px;top:1px;height:6px;border-bottom:1.7px solid #65758a;transform:rotate(0);clip-path:polygon(0 0,50% 80%,100% 0,100% 25%,50% 100%,0 25%)} .portal-user{position:relative}.portal-user>summary{list-style:none;height:42px;display:flex;align-items:center;gap:8px;padding:0 8px 0 4px;border:1px solid #dfe6ef;border-radius:12px;background:#fff;cursor:pointer}.portal-user>summary::-webkit-details-marker{display:none}.portal-user>summary>span,.portal-user>div header>span{width:32px;height:32px;display:grid;place-items:center;border-radius:9px;background:linear-gradient(135deg,#e8edff,#dff4ff);color:#315fc5;font-size:12px;font-weight:850}.portal-user>summary em{max-width:100px;overflow:hidden;text-overflow:ellipsis;color:#31445e;font-size:11.5px;font-style:normal;font-weight:750;white-space:nowrap}.portal-user>summary>i{width:6px;height:6px;border-right:1.5px solid #7d8999;border-bottom:1.5px solid #7d8999;transform:rotate(45deg);margin:0 2px 3px}.portal-user>div{position:absolute;right:0;top:49px;width:230px;padding:8px;border:1px solid #dfe6ef;border-radius:13px;background:#fff;box-shadow:0 20px 50px rgba(15,23,42,.16);z-index:20}.portal-user>div header{display:flex;align-items:center;gap:10px;padding:9px 8px 12px;border-bottom:1px solid #edf1f5;margin-bottom:5px}.portal-user>div header p{margin:0;min-width:0}.portal-user>div header b,.portal-user>div header small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.portal-user>div header b{font-size:12px;color:#273a53}.portal-user>div header small{margin-top:3px;font-size:10px;color:#8a97a7}.portal-user>div>a,.portal-user>div form button{width:100%;display:block;margin:0;padding:9px 10px;border:0;border-radius:8px;background:transparent;color:#485a72;text-align:left;text-decoration:none;font:inherit;font-size:11.5px;cursor:pointer}.portal-user>div>a:hover,.portal-user>div form button:hover{background:#f3f6fb;color:#2458bd} .portal-mobile-toggle{display:none;width:38px;height:38px;padding:9px;border:1px solid #dfe6ef;border-radius:10px;background:#fff;cursor:pointer}.portal-mobile-toggle span{display:block;height:2px;margin:4px 0;border-radius:2px;background:#33465f} .portal-subnav{border-top:1px solid #edf1f5;background:linear-gradient(90deg,#fbfcff,#f7f9fe)}.portal-subnav-inner{width:min(1420px,calc(100% - 40px));height:46px;margin:0 auto;display:flex;align-items:center;gap:18px}.portal-subnav-label{color:#97a2b1;font-size:9.5px;font-weight:850;letter-spacing:.1em;text-transform:uppercase}.portal-utilities{display:flex;align-items:center;justify-content:flex-start;gap:7px;margin:0}.portal-utilities a{min-height:31px;display:inline-flex;align-items:center;gap:7px;padding:0 10px;border-radius:8px;color:#63738a;text-decoration:none;font-size:11px;font-weight:700}.portal-utilities a:hover,.portal-utilities a.active{background:#fff;color:#2458bd;box-shadow:0 2px 9px rgba(32,54,88,.07)}.portal-utilities a>span{width:20px;height:20px;display:grid;place-items:center;border-radius:6px;background:#edf3ff;color:#315fc5;font-size:9px;font-weight:900} .portal-mobile-backdrop{display:none}.portal-main{width:min(1420px,calc(100% - 40px));min-height:calc(100vh - 175px);margin:0 auto;padding:28px 0 46px}.portal-alert{display:flex;align-items:center;gap:10px;margin:0 0 18px;padding:11px 14px;border:1px solid #bee9cf;border-radius:10px;background:#effbf4;color:#27744a;font-size:12px}.portal-alert strong{color:#15803d}.portal-footer{height:auto;min-height:66px;width:min(1420px,calc(100% - 40px));margin:0 auto;padding:18px 0;display:flex;align-items:center;justify-content:space-between;border-top:1px solid #e2e8f0;color:#7d8999;font-size:11.5px;text-align:left}.portal-footer a{color:#315fc5} /* dashboard */ .portal-dashboard-hero{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.55fr) minmax(260px,.65fr);gap:28px;padding:30px;border:1px solid #e1e7f0;border-radius:20px;background:linear-gradient(118deg,#fff 0%,#f7f9ff 52%,#eef5ff 100%);box-shadow:var(--portal-shadow)}.portal-dashboard-hero:after{content:"";position:absolute;width:260px;height:260px;right:-95px;top:-125px;border-radius:50%;background:radial-gradient(circle,#c7d7ff 0,rgba(199,215,255,0) 70%);opacity:.7;pointer-events:none}.portal-dashboard-copy{position:relative;z-index:1}.portal-kicker,.portal-panel-head>div>span{display:block;margin-bottom:7px;color:#5f63d9;font-size:9.5px;font-weight:900;letter-spacing:.14em;text-transform:uppercase}.portal-dashboard-copy h1{max-width:760px;margin:0;color:#16243a;font-size:clamp(25px,3vw,38px);line-height:1.12;letter-spacing:-.9px}.portal-dashboard-copy>p{max-width:680px;margin:10px 0 0;color:#748196;font-size:13.5px;line-height:1.6}.portal-dashboard-actions{display:flex;gap:9px;margin-top:20px;flex-wrap:wrap}.portal-dashboard-actions a{min-height:39px;display:inline-flex;align-items:center;justify-content:center;padding:0 14px;border:1px solid #d2dce9;border-radius:9px;background:#fff;color:#3f526a;text-decoration:none;font-size:11.5px;font-weight:800}.portal-dashboard-actions a.primary{border-color:#315fc5;background:linear-gradient(135deg,#4338ca,#2563eb);color:#fff;box-shadow:0 8px 18px rgba(37,99,235,.17)}.portal-dashboard-account{position:relative;z-index:1;align-self:center;padding:17px;border:1px solid rgba(214,224,237,.85);border-radius:14px;background:rgba(255,255,255,.82);box-shadow:0 8px 23px rgba(31,46,75,.055)}.portal-dashboard-account label,.portal-dashboard-account>span{display:block;margin-bottom:6px;color:#8995a6;font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.portal-dashboard-account select{width:100%;height:40px;border:1px solid #d4deea;border-radius:9px;padding:0 10px;background:#fff;color:#33465f;font:inherit;font-size:12px}.portal-dashboard-account>strong{font-size:15px}.portal-account-status{display:flex;align-items:center;gap:7px;margin-top:12px;padding-top:11px;border-top:1px solid #e9edf3;color:#66768b;font-size:10.5px;font-weight:700}.portal-account-status i{width:7px;height:7px;border-radius:50%;background:#18a86b;box-shadow:0 0 0 4px #dcf7ea} .portal-dashboard-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:14px 0}.portal-dashboard-metrics article{display:flex;align-items:center;gap:12px;min-width:0;padding:15px 16px;border:1px solid #e1e7f0;border-radius:14px;background:#fff;box-shadow:0 6px 20px rgba(31,46,75,.045)}.metric-icon{width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:11px;font-size:11px;font-weight:900}.metric-icon.projects{background:#eef2ff;color:#4f46e5}.metric-icon.invoices{background:#eaf6ff;color:#1670b9}.metric-icon.messages{background:#eefbf5;color:#13855c}.metric-icon.support{background:#fff4e8;color:#c36a1a}.portal-dashboard-metrics article>div{min-width:0}.portal-dashboard-metrics small,.portal-dashboard-metrics strong,.portal-dashboard-metrics a{display:block}.portal-dashboard-metrics small{color:#8995a5;font-size:9.5px;font-weight:750;text-transform:uppercase;letter-spacing:.04em}.portal-dashboard-metrics strong{margin-top:2px;color:#253851;font-size:19px}.portal-dashboard-metrics a{margin-top:3px;color:#5270a0;text-decoration:none;font-size:9.5px;font-weight:700} .portal-dashboard-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,.7fr);gap:14px;margin-bottom:14px}.portal-panel{border:1px solid #e1e7f0;border-radius:16px;background:#fff;box-shadow:var(--portal-shadow);overflow:hidden}.portal-panel-head{min-height:70px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 18px;border-bottom:1px solid #e8edf4;background:linear-gradient(100deg,#fff,#fbfcff)}.portal-panel-head>div>span{margin-bottom:3px;font-size:8.5px}.portal-panel-head h2{margin:0;color:#273951;font-size:15px}.portal-panel-head p{margin:4px 0 0;color:#8894a5;font-size:10.5px}.portal-panel-head>a{padding:7px 9px;border:1px solid #dbe4ef;border-radius:8px;color:#426392;text-decoration:none;font-size:10px;font-weight:800}.portal-project-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;padding:6px 18px 14px}.portal-project-summary>a{display:flex;align-items:center;gap:10px;min-height:62px;padding:11px 8px;border-bottom:1px solid #edf1f5;color:#34465d;text-decoration:none}.portal-project-summary>a:nth-last-child(-n+2){border-bottom:0}.project-dot{width:9px;height:9px;border-radius:50%;background:#74859b;box-shadow:0 0 0 5px #f0f3f7}.summary-in-progress .project-dot{background:#2563eb;box-shadow:0 0 0 5px #e8f0ff}.summary-on-hold .project-dot{background:#f59e0b;box-shadow:0 0 0 5px #fff5df}.summary-cancelled .project-dot{background:#94a3b8}.summary-finished .project-dot{background:#10b981;box-shadow:0 0 0 5px #e8faf4}.portal-project-summary small,.portal-project-summary strong{display:block}.portal-project-summary small{color:#7d8a9b;font-size:10px}.portal-project-summary strong{margin-top:3px;color:#263950;font-size:16px}.portal-quick-links{padding:7px 14px 12px}.portal-quick-links>a{min-height:59px;display:grid;grid-template-columns:34px minmax(0,1fr) 16px;align-items:center;gap:10px;border-bottom:1px solid #edf1f5;color:#33465f;text-decoration:none}.portal-quick-links>a:last-child{border-bottom:0}.portal-quick-links>a>span{width:31px;height:31px;display:grid;place-items:center;border-radius:9px;background:#eef4ff;color:#315fc5;font-size:10px;font-weight:900}.portal-quick-links strong,.portal-quick-links small{display:block}.portal-quick-links strong{font-size:11.5px}.portal-quick-links small{margin-top:2px;color:#8a97a8;font-size:9.5px}.portal-quick-links>a>b{color:#a0abb9;font-size:20px;font-weight:400}.portal-quick-links>a:hover strong,.portal-quick-links>a:hover>b{color:#2458bd} .portal-invoice-panel{padding-bottom:12px}.portal-invoice-head{margin-bottom:0}.portal-invoice-panel .invoice-status-grid{padding:18px;gap:12px}.portal-invoice-panel .invoice-status-grid article{padding:13px;border:1px solid #e5eaf1;border-radius:11px;background:#fbfcfe}.portal-invoice-panel .invoice-status-grid article header{font-size:10.5px}.portal-invoice-panel .invoice-status-grid article header span{color:#66778e;font-weight:700}.portal-invoice-panel .invoice-status-grid article header b{color:#33465f}.portal-invoice-panel .invoice-status-grid article>div{height:18px;border-radius:99px}.portal-invoice-panel .invoice-status-grid article>div i{background:linear-gradient(90deg,#5965dd,#3b82f6);border-radius:99px}.portal-invoice-panel .invoice-status-grid article>div span{font-size:9px;line-height:14px;color:#40526a}.portal-chart-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 18px 12px}.portal-chart-toolbar .invoice-year{display:flex;align-items:center;gap:8px;margin:0}.portal-chart-toolbar label{color:#8190a3;font-size:10px;font-weight:800}.portal-chart-toolbar .invoice-year select{min-width:100px;height:34px;padding:0 9px}.portal-chart-toolbar .invoice-legend{justify-content:flex-end;flex-wrap:wrap}.portal-chart-toolbar .invoice-legend i{width:19px;height:7px;border-radius:99px}.portal-invoice-panel .invoice-chart{height:250px;margin:0 18px 24px;border:1px solid #e4e9ef;border-radius:10px;padding:10px 8px 0;background:repeating-linear-gradient(to top,#edf1f5 0,#edf1f5 1px,transparent 1px,transparent 42px);grid-template-columns:repeat(12,minmax(28px,1fr));overflow-x:auto}.portal-invoice-panel .chart-bars{height:205px;width:60%}.portal-invoice-panel .chart-month>span{top:215px;font-size:9.5px}.portal-invoice-panel .chart-bars i{border-radius:3px 3px 0 0} /* shared page refinements */ .portal-page-title{margin:0 0 14px;color:#1f3149;font-size:22px;letter-spacing:-.35px}.portal-status-cards{gap:10px;margin-bottom:24px}.portal-status-cards article{min-height:76px;padding:14px 15px;border:1px solid #e1e7f0;border-radius:12px;box-shadow:0 5px 16px rgba(31,46,75,.035)}.portal-status-cards span{color:#7d8999;font-size:10.5px;font-weight:700}.portal-status-cards b{margin-top:6px;color:#283b54;font-size:18px}.portal-status-cards i{height:6px;border-radius:99px}.portal-status-cards em{border-radius:99px;background:linear-gradient(90deg,#4f46e5,#3b82f6)}.portal-list-heading{margin:14px 0 10px}.portal-list-heading h2{color:#283a52;font-size:17px}.portal-dark-button{border-radius:9px!important;padding:10px 13px!important;background:linear-gradient(135deg,#1f2937,#334155)!important;font-size:11px}.portal-card{border-color:#e1e7f0;border-radius:14px;box-shadow:var(--portal-shadow)}.portal-table-tools{padding:13px 14px;border-bottom:1px solid #e7ecf2;background:#fbfcff}.portal-table-tools select,.portal-table-tools input,.portal-table-tools button{height:36px;border-color:#d6e0ec;border-radius:8px}.portal-table-tools form{display:flex}.portal-table-tools form input{border-radius:8px 0 0 8px}.portal-table-tools form button{border-radius:0 8px 8px 0}.portal-table th{background:#f5f8fc;color:#5f6f84;font-size:10.5px;text-transform:uppercase;letter-spacing:.045em}.portal-table td{color:#3d4e64;font-size:12px}.portal-table td span{background:#edf4ff;color:#315fc5}.portal-data-card>footer{padding:14px 16px;background:#fbfcfe;font-size:10.5px}.portal-detail-head{margin:0 0 14px;padding:14px 16px;border:1px solid #e1e7f0;border-radius:13px;background:#fff}.portal-detail-head small{color:#7f8c9e}.portal-detail-head h1{font-size:18px}.portal-detail-head a{border-radius:8px;font-size:11px}.portal-form{padding:20px}.portal-form input,.portal-form select,.portal-form textarea{border-radius:9px}.portal-record-detail{max-width:none}.portal-message-shell,.portal-profile-card,.portal-profile-hero,.portal-files-card,.portal-calendar-card{border-radius:16px!important} @media(max-width:1100px){.portal-top{gap:15px}.portal-primary-nav>a{padding:0 7px;font-size:11px}.portal-user>summary em{display:none}.portal-dashboard-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.portal-dashboard-grid{grid-template-columns:1fr}.portal-quick-links{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}.portal-quick-links>a:nth-last-child(-n+2){border-bottom:0}} @media(max-width:820px){body.portal-menu-open{overflow:hidden}.portal-shell-header{position:sticky}.portal-top{width:calc(100% - 24px);height:66px;display:flex;justify-content:space-between;gap:10px}.portal-brand-wrap{flex:1}.portal-mobile-toggle{display:block;flex:none}.portal-brand-copy small{display:none}.portal-brand-copy b{font-size:13px}.portal-custom-logo{max-width:130px;max-height:38px}.portal-primary-nav{position:fixed;z-index:1003;left:-310px;top:0;bottom:0;width:min(300px,84vw);display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:4px;padding:78px 14px 20px;background:#fff;box-shadow:20px 0 50px rgba(15,23,42,.18);overflow-y:auto;transition:left .2s ease}.portal-menu-open .portal-primary-nav{left:0}.portal-primary-nav>a{min-height:43px;padding:0 13px;font-size:12px}.portal-primary-nav>a.active:after{display:none}.portal-primary-nav>a.active{background:#eaf1ff}.portal-mobile-backdrop{position:fixed;z-index:1002;inset:0;background:rgba(15,23,42,.42);backdrop-filter:blur(2px)}.portal-menu-open .portal-mobile-backdrop{display:block}.portal-header-icon{display:none}.portal-user>summary{height:39px}.portal-user>summary>span{width:30px;height:30px}.portal-subnav-inner{width:calc(100% - 24px);height:43px;overflow:hidden}.portal-subnav-label{display:none}.portal-utilities{width:100%;overflow-x:auto;scrollbar-width:none}.portal-utilities::-webkit-scrollbar{display:none}.portal-utilities a{flex:none}.portal-main{width:calc(100% - 24px);padding:18px 0 32px}.portal-footer{width:calc(100% - 24px);flex-direction:column;align-items:flex-start;gap:5px}.portal-dashboard-hero{grid-template-columns:1fr;padding:22px}.portal-dashboard-account{width:100%}.portal-dashboard-copy h1{font-size:27px}.portal-invoice-panel .invoice-chart{overflow-x:auto;grid-template-columns:repeat(12,52px)}.portal-invoice-panel .invoice-status-grid{grid-template-columns:1fr 1fr}.portal-chart-toolbar{align-items:flex-start;flex-direction:column}.portal-chart-toolbar .invoice-legend{justify-content:flex-start}.portal-status-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.portal-table-tools{align-items:stretch;flex-direction:column;gap:8px}.portal-table-tools form{width:100%}.portal-table-tools input{width:auto;flex:1}.portal-table{overflow-x:auto;-webkit-overflow-scrolling:touch}.portal-data-card>footer{align-items:flex-start;flex-direction:column;gap:12px}.portal-form-grid{grid-template-columns:1fr}} @media(max-width:560px){.portal-user>summary em,.portal-user>summary>i{display:none}.portal-user>summary{padding:3px}.portal-dashboard-hero{padding:19px;border-radius:16px}.portal-dashboard-copy h1{font-size:24px}.portal-dashboard-copy>p{font-size:12px}.portal-dashboard-actions{display:grid;grid-template-columns:1fr 1fr}.portal-dashboard-actions a{padding:0 8px;text-align:center}.portal-dashboard-metrics{grid-template-columns:1fr 1fr;gap:8px}.portal-dashboard-metrics article{align-items:flex-start;padding:12px;gap:9px}.metric-icon{width:32px;height:32px}.portal-dashboard-metrics strong{font-size:16px}.portal-dashboard-metrics a{font-size:9px}.portal-project-summary{grid-template-columns:1fr}.portal-project-summary>a{border-bottom:1px solid #edf1f5!important}.portal-project-summary>a:last-child{border-bottom:0!important}.portal-quick-links{grid-template-columns:1fr}.portal-quick-links>a{border-bottom:1px solid #edf1f5!important}.portal-quick-links>a:last-child{border-bottom:0!important}.portal-invoice-panel .invoice-status-grid{grid-template-columns:1fr;padding:13px}.portal-panel-head{padding:12px 14px}.portal-panel-head>a{white-space:nowrap}.portal-chart-toolbar{padding:0 13px 10px}.portal-invoice-panel .invoice-chart{margin:0 13px 18px}.portal-status-cards{grid-template-columns:1fr 1fr;gap:8px}.portal-status-cards article{min-height:68px}.portal-list-heading{align-items:flex-start;gap:9px;flex-direction:column}.portal-dark-button{width:100%;text-align:center}.portal-detail-head{align-items:flex-start;flex-direction:column;gap:10px}.portal-detail-head a{width:100%;text-align:center}.portal-message-head{flex-direction:column}.portal-profile-hero{align-items:flex-start;flex-wrap:wrap;padding:22px}.portal-profile-state{margin-left:0}.portal-profile-fields{padding:18px}.portal-company-card dl{grid-template-columns:1fr}.portal-company-card dl>div:nth-child(even){padding-left:0}.portal-calendar-card{padding:14px}.portal-file-list article{grid-template-columns:36px minmax(0,1fr);padding:13px}.portal-file-list article>div:last-child{grid-column:2}.portal-dropzone{padding:16px}.portal-dropzone label{height:125px}} /* ============================================================ SECTION: dashboard-analytics.css ============================================================ */ .dash-chart-card{min-height:290px} .dash-donut-wrap{display:grid;grid-template-columns:minmax(125px,.9fr) minmax(120px,1.1fr);align-items:center;gap:15px;padding:19px} .dash-donut{width:145px;aspect-ratio:1;position:relative;margin:auto;border-radius:50%;background:var(--donut);box-shadow:inset 0 0 0 1px rgba(28,44,70,.04)} .dash-donut:after{content:"";position:absolute;inset:30px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px #edf0f4} .dash-donut>span{position:absolute;z-index:1;inset:0;display:grid;place-content:center;text-align:center} .dash-donut b,.dash-donut small{display:block}.dash-donut b{font-size:21px;color:#203049}.dash-donut small{font-size:9px;color:#8d99aa;text-transform:uppercase;letter-spacing:.08em} .dash-chart-legend{display:flex;flex-direction:column;gap:8px}.dash-chart-legend>span{display:grid;grid-template-columns:9px minmax(0,1fr) auto;align-items:center;gap:7px;color:#536177;font-size:10px} .dash-chart-legend>span>i{width:8px;height:8px;border-radius:3px}.dash-chart-legend b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:650}.dash-chart-legend small{min-width:21px;padding:2px 5px;border-radius:10px;background:#f0f3f8;text-align:center;color:#607089;font-weight:750}.dash-chart-legend .empty{display:block;color:#93a0b1} .team-overview-list{padding:7px 16px}.team-overview-list>a{display:grid;grid-template-columns:35px minmax(0,1fr) auto;align-items:center;gap:9px;padding:10px 0;border-bottom:1px solid #edf0f4;color:#35465f}.team-overview-list>a:last-child{border-bottom:0} .team-avatar{width:34px;height:34px;display:grid;place-items:center;border-radius:11px;background:linear-gradient(145deg,#eaf0ff,#dff7f0);color:#3263c5;font-size:11px;font-weight:800}.team-copy{min-width:0}.team-copy b,.team-copy small,.team-copy i{display:block}.team-copy b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}.team-copy small{margin-top:2px;color:#8e9bab;font-size:9px}.team-copy i{height:4px;margin-top:6px;border-radius:10px;background:#edf1f5;overflow:hidden}.team-copy em{display:block;height:100%;border-radius:10px;background:linear-gradient(90deg,#4f6fe8,#19b985)}.team-overview-list strong{font-size:10px;color:#62728a} .todo-head-links button,.todo-head-links label{border:0;padding:5px 7px;border-left:1px solid #dbe3ef;border-radius:6px;background:transparent;color:#315fc5;font:inherit;font-size:10px;font-weight:750;cursor:pointer}.todo-head-links button:hover,.todo-head-links label:hover{background:#eef4ff} .dashboard-todo-toggle{position:fixed;opacity:0;pointer-events:none}.dashboard-todo-toggle+.todo-modal-backdrop.dashboard-todo-modal{display:none}.dashboard-todo-toggle:checked+.todo-modal-backdrop.dashboard-todo-modal{display:grid} @media(max-width:950px){.dash-chart-card{min-height:0}}@media(max-width:420px){.dash-donut-wrap{grid-template-columns:1fr}.dash-donut{width:130px}} /* ============================================================ SECTION: estimate-form.css ============================================================ */ .estimate-page{color:#30405a;max-width:1600px;margin:0 auto}.estimate-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.estimate-heading h1{font-size:18px;font-weight:600;margin:0}.estimate-heading a{font-size:13px;color:#396699}.estimate-card{background:#fff;border:1px solid #e0e5ed;border-radius:7px;box-shadow:0 2px 5px #1e293b18;overflow:hidden}.estimate-columns{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:25px 24px 56px;min-height:460px}.estimate-fields{display:flex;flex-direction:column;gap:14px;min-width:0}.estimate-field{display:flex;flex-direction:column;gap:7px;font-size:13px;font-weight:500;min-width:0}.estimate-field em{font-style:normal;color:#e64d55}.estimate-page input:not([type=radio]):not([type=checkbox]):not([type=hidden]),.estimate-page select,.estimate-page textarea{font:inherit;color:#34445a;background:#fcfdfe;border:1px solid #d4dce7;border-radius:5px;padding:8px 10px;box-sizing:border-box;min-width:0;outline:none;box-shadow:0 1px 2px #1f293b08}.estimate-page input:focus,.estimate-page select:focus,.estimate-page textarea:focus{border-color:#80a7e8;box-shadow:0 0 0 2px #eaf1fe}.estimate-field input,.estimate-field select{height:35px;width:100%}.estimate-field textarea{resize:vertical;min-height:94px;width:100%}.estimate-pair{display:grid;grid-template-columns:1fr 1fr;gap:28px}.estimate-address-heading{display:flex;align-items:center;gap:12px;margin-bottom:-12px}.estimate-address-heading button{background:none;color:#386ef0;border:0;padding:0;cursor:pointer}.estimate-address-heading svg{width:15px;height:15px}.estimate-address-heading a{color:#4676b4;font-size:12px}.estimate-addresses{display:grid;grid-template-columns:1fr 1fr;gap:28px;font-size:13px;margin-bottom:3px}.estimate-addresses strong{font-weight:500}.estimate-addresses address{white-space:pre-line;font-style:normal;color:#748399;line-height:1.55;min-height:64px;margin-top:12px;overflow-wrap:anywhere}.estimate-number{display:flex;align-items:stretch}.estimate-number>span{display:flex;align-items:center;padding:0 12px;border:1px solid #d4dce7;border-right:0;border-radius:5px 0 0 5px;color:#7a8b9f;background:#fff}.estimate-number input{border-radius:0 5px 5px 0!important}.estimate-tags input{border:0!important;border-radius:0!important;box-shadow:none!important;background:white!important}.estimate-items{border-top:1px solid #e8ecf2;padding:38px 24px 60px}.estimate-item-toolbar{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:22px}.estimate-item-toolbar>div{display:flex;align-items:center;gap:5px}.estimate-item-toolbar select{width:min(400px,30vw);height:35px;font-size:13px}.estimate-item-toolbar button{height:35px;width:36px;background:white;border:1px solid #d4dce7;border-radius:4px;font-size:22px;color:#30405a;cursor:pointer}.estimate-item-toolbar fieldset{border:0;padding:0;margin:0;display:flex;align-items:center;gap:10px;font-size:13px;flex-wrap:wrap}.estimate-item-toolbar legend{float:left;margin-right:8px}.estimate-item-toolbar fieldset label{display:flex;align-items:center;gap:5px;white-space:nowrap}.estimate-item-toolbar input{accent-color:#387aff}.estimate-table-wrap{overflow-x:auto}.estimate-item-table{width:100%;border-collapse:collapse;min-width:850px;font-size:13px}.estimate-item-table th{background:#f2f4f7;border:1px solid #e1e6ed;text-align:left;font-weight:500;padding:12px 10px}.estimate-item-table td{background:#f8f9fb;padding:20px 10px;vertical-align:top;border-bottom:1px solid #e1e6ed}.estimate-item-table th:nth-child(1){width:21%}.estimate-item-table th:nth-child(2){width:25%}.estimate-item-table th:nth-child(3){width:10%}.estimate-item-table th:nth-child(4){width:14%}.estimate-item-table th:nth-child(5){width:15%}.estimate-item-table textarea,.estimate-item-table input:not([type=checkbox]){width:100%}.estimate-item-table textarea{min-height:94px;resize:vertical}.estimate-item-table .estimate-unit{border:0!important;text-align:right;box-shadow:none!important;background:transparent!important;padding:6px!important;font-size:12px}.estimate-optional{display:flex;align-items:center;gap:5px;margin-top:5px;font-size:12px;white-space:nowrap}.estimate-optional input{margin:0}.estimate-tax-control{display:flex;align-items:center;gap:4px}.estimate-tax-control input{width:100%;min-width:65px}.estimate-item-table small{display:block;color:#8b99ab;font-size:11px;margin-top:7px}.estimate-line-amount{text-align:right;white-space:nowrap;padding-top:29px!important}.estimate-row-add,.estimate-row-remove{background:#263344;color:#fff;border:0;border-radius:5px;padding:5px 9px;font-size:18px;cursor:pointer}.estimate-row-remove{display:block;background:transparent;color:#a84d58;margin-top:6px}.estimate-totals{width:min(100%,850px);margin:40px 0 0 auto;font-size:13px}.estimate-totals>div{display:grid;grid-template-columns:1fr minmax(160px,300px) 140px;align-items:center;gap:12px;border-top:1px solid #e4e9f0;min-height:46px;padding:9px 0;text-align:right}.estimate-totals>div>span{grid-column:1/3}.estimate-totals output{grid-column:3;color:#657892}.estimate-discount-input{display:flex}.estimate-discount-input input{width:100%;border-radius:5px 0 0 5px!important}.estimate-discount-input select{width:72px;border-left:0;border-radius:0 5px 5px 0}.estimate-total{font-weight:600}.estimate-total output{font-size:16px;color:#273c59}.estimate-notes{border-top:1px solid #e8ecf2;padding:38px 24px;display:grid;gap:17px}.estimate-save-bar{display:flex;justify-content:flex-end;align-items:center;gap:18px;background:white;border-top:1px solid #e1e7f0;padding:14px 24px;margin-top:6px;position:sticky;bottom:0;z-index:10;box-shadow:0 -2px 8px #1e293b05;font-size:13px}.estimate-save-bar a{color:#73829a}.estimate-save-bar button{background:#253345;color:white;border:0;border-radius:6px;padding:9px 15px;cursor:pointer;font-weight:600}.estimate-errors{background:#fff0f1;border:1px solid #f2b5ba;color:#a43042;padding:15px;border-radius:6px;margin-bottom:15px}.estimate-address-dialog{border:1px solid #d6dfeb;border-radius:10px;width:min(850px,95vw);max-height:90vh;overflow:auto;padding:0;color:#30405a}.estimate-address-dialog::backdrop{background:#23304488}.estimate-address-dialog header,.estimate-address-dialog footer{display:flex;align-items:center;justify-content:space-between;padding:20px;border-bottom:1px solid #e2e8f0}.estimate-address-dialog h2{font-size:18px;margin:0}.estimate-address-dialog button{padding:8px 12px;border:1px solid #d5dfeb;border-radius:5px;background:white;color:#30405a;cursor:pointer}.estimate-address-fields{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:24px}.estimate-address-fields h3{font-size:15px;margin:0 0 15px}.estimate-address-fields label{margin-bottom:12px}.estimate-address-dialog footer{justify-content:flex-end;gap:12px}.estimate-document{max-width:1000px;background:#fff;border:1px solid #dce4ee;border-radius:8px;padding:36px;margin:auto}.estimate-document header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:30px}.estimate-document h1{font-size:26px;margin:0 0 12px}.estimate-document .estimate-meta{display:flex;flex-wrap:wrap;gap:24px;font-size:13px;border-top:1px solid #e1e7ef;border-bottom:1px solid #e1e7ef;padding:15px 0;margin:24px 0}.estimate-document table{width:100%;border-collapse:collapse;font-size:13px}.estimate-document th,.estimate-document td{padding:12px 8px;border-bottom:1px solid #e1e7ef;text-align:left}.estimate-document th{background:#f6f8fb}.estimate-document td small{display:block;color:#73849b;margin-top:6px;white-space:pre-line}.estimate-document .estimate-addresses{margin:20px 0}.estimate-document-note{white-space:pre-line;font-size:14px;line-height:1.6}.estimate-document h3{font-size:15px;margin-top:30px}.estimate-detail-actions{display:flex;gap:10px;margin-bottom:20px;align-items:center}.estimate-detail-actions a,.estimate-detail-actions button{font-size:13px;border:1px solid #d1dce9;border-radius:6px;padding:8px 12px;color:#30405a;background:white;cursor:pointer}.estimate-detail-actions a:first-child{margin-right:auto}.estimate-admin-note{border:1px dashed #d4dce6;border-radius:6px;padding:16px;margin-top:24px;color:#6b7789}.estimate-admin-note h3{margin-top:0}.estimate-document-brand img{max-width:165px;max-height:48px;margin-bottom:15px}.estimate-document-brand p{font-size:13px;line-height:1.6;color:#708099}@media(max-width:1050px){.estimate-columns{grid-template-columns:1fr;min-height:0;padding-bottom:30px}.estimate-item-toolbar{align-items:flex-start;flex-direction:column}.estimate-item-toolbar select{width:min(400px,65vw)}}@media(max-width:600px){.estimate-pair,.estimate-address-fields{grid-template-columns:1fr;gap:14px}.estimate-columns,.estimate-notes{padding:20px}.estimate-items{padding:25px 15px}.estimate-totals>div{grid-template-columns:1fr minmax(85px,130px) 90px;gap:6px}.estimate-document{padding:20px}.estimate-document header{flex-direction:column;gap:25px}.estimate-detail-actions{flex-wrap:wrap}}@media print{.estimate-detail-actions,.estimate-admin-note{display:none!important}.estimate-document{border:0;max-width:none;padding:0}.estimate-page .estimate-table-wrap{overflow:visible}.customer-content{padding:0!important}} .estimate-customer-field{position:relative}#estimate-customer-results{position:absolute;top:64px;left:0;right:0;max-height:240px;overflow:auto;z-index:30;background:#fff;border:1px solid #cdd9e8;border-radius:5px;box-shadow:0 6px 18px #24344b1a;padding:5px}#estimate-customer-results button{display:block;width:100%;text-align:left;padding:10px;border:0;border-radius:4px;background:#fff;color:#344b6a;font:inherit;cursor:pointer}#estimate-customer-results button:hover,#estimate-customer-results button[aria-selected=true]{background:#edf4ff}#estimate-customer-results>span{display:block;padding:10px;color:#8090a5} /* Estimate detail workspace */ .workspace-dialog[hidden]{display:none!important}.estimate-workspace .document-recipient p{white-space:pre-line;line-height:1.55}.estimate-workspace .estimate-meta{display:flex;gap:18px;flex-wrap:wrap}.estimate-workspace .document-totals .total{font-size:16px} .estimate-workspace{max-width:1640px;margin:0 auto;color:#26354b}.estimate-workspace .proposal-workspace-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.estimate-workspace .workspace-filter{display:flex;gap:6px;align-items:center}.estimate-workspace input,.estimate-workspace select,.estimate-workspace textarea{font:inherit;border:1px solid #ccd6e4;border-radius:5px;padding:8px;color:#26354b;background:#fff}.estimate-workspace .proposal-workspace-grid{display:grid;grid-template-columns:minmax(410px,39%) minmax(0,1fr);gap:12px;align-items:start}.estimate-workspace .card{background:#fff;border:1px solid #dce3ed;border-radius:8px;box-shadow:0 2px 5px #1e293b18;overflow:hidden}.estimate-workspace .table-toolbar,.estimate-workspace .workspace-actionbar{display:flex;align-items:center;gap:7px;padding:13px 16px;border-bottom:1px solid #e6ebf2}.estimate-workspace .table-toolbar .btn{margin-left:auto}.estimate-workspace table{width:100%;border-collapse:collapse;font-size:13px}.estimate-workspace th{background:#f7f8fa;color:#66768b;font-weight:600;text-align:left;padding:12px 10px;border-bottom:1px solid #e6ebf2}.estimate-workspace td{padding:13px 10px;border-bottom:1px solid #e8edf3;vertical-align:top}.estimate-workspace tr.is-selected{background:#f1f6ff}.estimate-workspace tr.is-selected td:first-child{border-left:3px solid #3477ea}.estimate-workspace a{color:#245fae}.estimate-workspace .workspace-tabs{display:flex;align-items:center;overflow-x:auto;background:#f3f5f8;white-space:nowrap}.estimate-workspace .workspace-tabs a{color:#31425a;padding:15px 12px;border-bottom:2px solid transparent}.estimate-workspace .workspace-tabs a.active{font-weight:700;border-bottom-color:#253b5c;background:#fff}.estimate-workspace .spacer{margin-left:auto}.estimate-workspace .workspace-actionbar form{display:inline}.estimate-workspace .btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid #ccd6e4;border-radius:6px;background:#fff;color:#26354b;padding:8px 10px;font-size:13px;cursor:pointer}.estimate-workspace .btn-primary{background:#202c3d;color:#fff;border-color:#202c3d;font-weight:600}.estimate-workspace .btn-success{background:#20bf61;color:#fff;border-color:#20bf61;font-weight:600}.estimate-workspace .status-pill{display:inline-block;border:1px solid #cfe1f8;border-radius:5px;background:#f4f9ff;color:#2870cf;padding:4px 7px;font-size:12px;font-weight:600}.estimate-workspace .estimate-document{max-width:none;border:0;border-radius:0;box-shadow:none;padding:28px;min-height:420px}.estimate-workspace .document-recipient{text-align:right;max-width:45%}.estimate-workspace .document-totals{width:min(100%,350px);margin:30px 0 0 auto;border-top:1px solid #e1e7ef}.estimate-workspace .document-totals div{display:flex;justify-content:space-between;padding:9px;border-bottom:1px solid #e1e7ef}.estimate-workspace .document-totals .total{font-size:16px}.estimate-workspace .tab-panel{padding:22px;min-height:230px}.estimate-workspace .tab-panel>button{margin-bottom:18px}.estimate-workspace .tab-panel form{display:grid;gap:10px}.estimate-workspace .tab-panel form .btn{justify-self:end}.estimate-workspace .entry-list article,.estimate-workspace .activity-row{border-bottom:1px solid #e6ebf2;padding:15px 0}.estimate-workspace .entry-list time{display:block;color:#77869a;font-size:12px;margin-top:4px}.estimate-workspace .btn-link{border:0;background:none;color:#2868ce;cursor:pointer;padding:0}.estimate-workspace .empty-state{text-align:center;color:#748399;padding:28px}.workspace-dialog{position:fixed;inset:0;background:#24344b88;display:grid;place-items:center;z-index:99;padding:20px}.dialog-card{width:min(650px,100%);max-height:90vh;overflow:auto;background:#fff;border-radius:10px;padding:24px;box-shadow:0 20px 70px #11182733}.dialog-card h2{margin:0 0 20px}.dialog-card form{display:grid;gap:14px}.dialog-card label{display:grid;gap:6px;font-size:13px}.dialog-card input,.dialog-card select,.dialog-card textarea{font:inherit;border:1px solid #ccd6e4;border-radius:5px;padding:9px}.dialog-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.dialog-close{float:right;border:0;background:transparent;font-size:24px;color:#73849b;cursor:pointer}@media(max-width:1100px){.estimate-workspace .proposal-workspace-grid{grid-template-columns:1fr}}@media(max-width:650px){.estimate-workspace .proposal-workspace-actions,.estimate-workspace .workspace-actionbar{align-items:flex-start;flex-wrap:wrap}.estimate-workspace .workspace-filter{flex-wrap:wrap}.estimate-workspace .document-recipient{text-align:left;max-width:none}.estimate-workspace .estimate-document header{flex-direction:column}.dialog-grid{grid-template-columns:1fr}} /* Invoice-style Estimate / Proposal document */ .sales-simple-paper{ background:#fff;color:#151515;border:1px solid #e1e5ea;border-radius:6px; box-shadow:0 8px 26px rgba(15,23,42,.06);padding:40px 38px;position:relative; } .sales-simple-top{display:flex;align-items:flex-start;justify-content:space-between;gap:30px;padding-bottom:42px} .sales-simple-brand img{display:block;max-width:205px;max-height:72px;width:auto;height:auto;object-fit:contain} .sales-simple-number{display:flex;flex-direction:column;align-items:flex-end;text-align:right;gap:5px;min-width:200px} .sales-simple-number>strong{display:inline-block;background:#050505;color:#fff;padding:6px 10px;font-size:16px;line-height:1.2;font-weight:800;letter-spacing:.02em} .sales-simple-number>span{font-size:12px;font-weight:600;color:#303030} .sales-simple-subject{margin:-10px 0 34px;border-bottom:1px solid #e7e7e7;padding-bottom:14px} .sales-simple-subject>span{display:block;color:#777;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em} .sales-simple-subject h1{margin:5px 0 0;font-size:20px;color:#111} .sales-simple-parties{display:grid;grid-template-columns:1fr 1fr;gap:70px;margin:0 14px 42px} .sales-simple-parties section{min-width:0}.sales-simple-parties h3{font-size:13px;margin:0 0 8px;padding-bottom:5px;border-bottom:1px solid #e5e5e5;color:#111} .sales-simple-parties strong{display:block;font-size:14px;color:#111;line-height:1.45} .sales-simple-parties address{font-style:normal;white-space:pre-line;color:#333;font-size:12px;line-height:1.5;margin-top:4px} .sales-simple-parties a{color:#111;text-decoration:none} .sales-simple-reference{margin-top:7px;color:#444;font-size:11px} .sales-simple-body{margin:0 0 24px;color:#333;font-size:12px;line-height:1.65} .sales-simple-body h1,.sales-simple-body h2,.sales-simple-body h3,.sales-simple-body h4{color:#111} .sales-simple-after-items{margin-top:26px} .sales-simple-table-wrap{overflow-x:auto} .sales-simple-table{width:100%;border-collapse:collapse;min-width:560px} .sales-simple-table th{ background:#f1f3f5!important;color:#000!important;font-weight:800!important; border-bottom:2px solid #cfd6df!important;padding:11px 13px!important;text-align:right!important;font-size:12px!important } .sales-simple-table th:first-child{text-align:left!important} .sales-simple-table td{background:#f8f8f8;color:#1d1d1d;padding:11px 13px;border-bottom:1px solid #fff;text-align:right;vertical-align:top;font-size:12px} .sales-simple-table td:first-child{text-align:left}.sales-simple-table td strong{display:block}.sales-simple-table td small{display:block;margin-top:3px;color:#777;font-size:10px;line-height:1.4} .sales-simple-totals{width:min(350px,100%);margin:0 0 0 auto} .sales-simple-totals>div{display:flex;justify-content:space-between;gap:24px;padding:8px 13px;font-size:12px;color:#222} .sales-simple-totals>div+div{border-top:1px solid #ededed} .sales-simple-totals .sales-simple-total{background:#050505;color:#fff;border-top:0;font-weight:800} .sales-simple-totals .sales-simple-total span,.sales-simple-totals .sales-simple-total strong{color:#fff} .sales-simple-copy{margin-top:30px;padding-top:18px;border-top:1px solid #ececec} .sales-simple-copy section+section{margin-top:16px}.sales-simple-copy h4{margin:0 0 5px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#444} .sales-simple-copy p{margin:0;white-space:pre-wrap;font-size:12px;line-height:1.55;color:#333} .sales-simple-signature{width:230px;margin:68px 0 8px auto;text-align:center;color:#222} .sales-signature-space{height:30px}.sales-signature-line{border-top:1px solid #555;margin-bottom:7px} .sales-simple-signature strong{display:block;font-size:12px}.sales-simple-signature small{display:block;margin-top:4px;color:#6b7280;font-size:10px} .sales-admin-note{margin-top:22px;border:1px dashed #d7c58e;background:#fffaf0;padding:12px 14px;border-radius:6px;color:#6f5a22} .sales-admin-note strong{font-size:11px}.sales-admin-note p{margin:5px 0 0;white-space:pre-wrap;font-size:11px;line-height:1.5} .proposal-document-notes-input{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:18px 0} .proposal-document-notes-input .proposal-field:last-child{grid-column:1/-1} @media(max-width:760px){ .sales-simple-paper{padding:28px 18px}.sales-simple-top{padding-bottom:30px;flex-direction:column} .sales-simple-number{align-items:flex-start;text-align:left}.sales-simple-parties{grid-template-columns:1fr;gap:25px;margin:0 0 30px} .sales-simple-brand img{max-width:175px}.proposal-document-notes-input{grid-template-columns:1fr} } @media print{ .sales-simple-paper{border:0;box-shadow:none;padding:20px 22px}.sales-simple-copy,.sales-simple-signature{break-inside:avoid} .sales-admin-note{display:none!important} } /* ===================================================================== Sales & Finance โ†’ Estimates โ€” Invoice / Contacts design system New/Edit + Workspace + Estimate document + all tabs/dialogs ===================================================================== */ .estimate-contact-form-page{max-width:1450px!important;margin:0 auto!important;padding:4px 0 28px!important;color:#263954!important} .estimate-contact-heading{ display:flex!important;align-items:center!important;justify-content:space-between!important;gap:22px!important; margin:0 0 16px!important;padding:20px 22px!important;border:1px solid #dce4ef!important; border-radius:14px!important;background:linear-gradient(120deg,#fff 58%,#f5f8ff 100%)!important; box-shadow:0 6px 20px rgba(31,48,76,.06)!important } .estimate-contact-heading-copy{min-width:0} .estimate-contact-eyebrow{ display:block;margin-bottom:5px;color:#5f6bd6;font-size:10px;font-weight:850; letter-spacing:.1em;text-transform:uppercase } .estimate-contact-heading h1{margin:0!important;font-size:24px!important;letter-spacing:-.025em;color:#18263b!important} .estimate-contact-heading p{margin:5px 0 0;color:#738197;font-size:12px} .estimate-contact-heading-actions{display:flex;align-items:center;gap:9px;flex:none} .estimate-contact-heading-actions>a{ display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px; border:1px solid #ced8e5;border-radius:8px;background:#fff;color:#34506f; text-decoration:none;font-size:12px;font-weight:700 } .estimate-contact-heading-actions>a:hover{border-color:#a7bde0;color:#245fc1} .estimate-contact-heading-actions svg{width:14px;height:14px} .estimate-contact-number-badge{ display:inline-flex;align-items:center;min-height:34px;padding:0 10px;border-radius:8px; background:#eef3fb;color:#445d7c;font-size:11px;font-weight:800 } .estimate-contact-card{ padding:0!important;border:1px solid #dce3ec!important;border-radius:14px!important; background:#fff!important;box-shadow:0 7px 24px rgba(31,48,76,.06)!important;overflow:visible!important } .estimate-contact-form-page .estimate-columns{ padding:22px 24px 8px!important;gap:26px!important;background:#fff!important;min-height:0!important } .estimate-contact-form-page .estimate-fields{gap:13px!important} .estimate-contact-form-page .estimate-fields+.estimate-fields{border-left:1px solid #edf1f6!important;padding-left:26px!important} .estimate-contact-form-page .estimate-field>span{ font-size:12px!important;font-weight:750!important;color:#374b66!important } .estimate-contact-form-page .estimate-field em{color:#dc3545!important} .estimate-contact-form-page .estimate-field input, .estimate-contact-form-page .estimate-field select, .estimate-contact-form-page .estimate-field textarea{ border:1px solid #cfd9e5!important;border-radius:7px!important;background:#fff!important; color:#263954!important;box-shadow:none!important;font-size:12.5px!important } .estimate-contact-form-page .estimate-field input, .estimate-contact-form-page .estimate-field select{min-height:38px!important} .estimate-contact-form-page .estimate-field textarea{padding:9px 10px!important} .estimate-contact-form-page .estimate-field input:focus, .estimate-contact-form-page .estimate-field select:focus, .estimate-contact-form-page .estimate-field textarea:focus{ border-color:#86aaf0!important;box-shadow:0 0 0 3px rgba(59,130,246,.08)!important;outline:0!important } .estimate-contact-form-page .estimate-field small{color:#8190a3!important;font-size:10.5px!important} .estimate-contact-form-page .estimate-customer-field{ padding:12px 13px!important;border:1px solid #dce6f2!important;border-radius:10px!important; background:linear-gradient(100deg,#fbfdff,#f8f7ff)!important } .estimate-contact-form-page .estimate-client-project-field select{background:#fbfdff!important} .estimate-contact-form-page .estimate-address-heading{ display:flex!important;align-items:center!important;gap:8px!important;margin:-2px 0 0!important } .estimate-contact-form-page .estimate-address-heading button, .estimate-contact-form-page .estimate-address-heading a{ min-height:31px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important; border:1px solid #d5dfeb!important;border-radius:7px!important;background:#fff!important; color:#526b89!important;font-size:10.5px!important;text-decoration:none!important } .estimate-contact-form-page .estimate-address-heading button{width:31px!important} .estimate-contact-form-page .estimate-address-heading a{padding:0 9px!important} .estimate-contact-form-page .estimate-addresses{ min-height:92px!important;padding:14px!important;border:1px solid #e2e8f0!important; border-radius:10px!important;background:#fbfcfe!important } .estimate-contact-form-page .estimate-addresses strong{font-size:10.5px!important;color:#42566f!important} .estimate-contact-form-page .estimate-addresses address{font-size:10.5px!important;color:#76869a!important} .estimate-contact-form-page .estimate-number{border-radius:7px!important;overflow:hidden!important} .estimate-contact-form-page .estimate-number span{ min-width:58px!important;display:grid!important;place-items:center!important;background:#f4f7fb!important; color:#52647b!important;font-size:11px!important;font-weight:800!important } .estimate-contact-form-page .estimate-settings-tags>span{display:flex;align-items:center;gap:6px} .estimate-contact-form-page .estimate-settings-tags>span svg{width:13px;height:13px} .estimate-contact-form-page .estimate-tags input{background:#fff!important} .estimate-contact-form-page .tag-input-shell{ border:1px solid #cfd9e5!important;border-radius:8px!important;background:#fff!important;min-height:42px!important } /* Estimate items โ€” same visual system as invoice */ .estimate-contact-form-page .estimate-contact-items{ margin:18px 24px 0!important;padding:0!important;border:1px solid #dfe6ef!important; border-radius:12px!important;background:#fff!important;overflow:hidden!important } .estimate-contact-form-page .estimate-item-toolbar{ min-height:58px!important;margin:0!important;padding:10px 14px!important; border-bottom:1px solid #e3e9f1!important;background:linear-gradient(90deg,#fbfcff,#f7f9ff)!important } .estimate-contact-form-page .estimate-item-toolbar select{ width:min(390px,34vw)!important;height:36px!important;border:1px solid #cfd9e5!important; border-radius:7px!important;background:#fff!important;color:#30445f!important;font-size:12px!important } .estimate-contact-form-page .estimate-item-toolbar button{ width:36px!important;height:36px!important;border:1px solid #cbd6e4!important;border-radius:7px!important; background:#fff!important;color:#30445f!important;box-shadow:none!important } .estimate-contact-form-page .estimate-item-toolbar fieldset{ border:0!important;padding:0!important;margin:0!important;color:#56677e!important;font-size:11.5px!important } .estimate-contact-form-page .estimate-line-item-table{ table-layout:fixed!important;min-width:1040px!important;border-collapse:collapse!important;font-size:12px!important } .estimate-contact-form-page .estimate-line-item-table th{ height:39px!important;padding:0 10px!important;background:#f3f4f6!important;color:#18263b!important; border:1px solid #e1e6ed!important;font-size:10.5px!important;font-weight:750!important;vertical-align:middle!important } .estimate-contact-form-page .estimate-line-item-table th:nth-child(1){width:20%!important} .estimate-contact-form-page .estimate-line-item-table th:nth-child(2){width:23.5%!important} .estimate-contact-form-page .estimate-line-item-table th:nth-child(3){width:9.5%!important;text-align:right!important} .estimate-contact-form-page .estimate-line-item-table th:nth-child(4){width:14.5%!important;text-align:right!important} .estimate-contact-form-page .estimate-line-item-table th:nth-child(5){width:19%!important;text-align:right!important} .estimate-contact-form-page .estimate-line-item-table th:nth-child(6){width:9.5%!important;text-align:right!important} .estimate-contact-form-page .estimate-line-item-table th:nth-child(7){width:4%!important;text-align:center!important} .estimate-contact-form-page .estimate-line-item-table td{ height:144px!important;padding:18px 10px!important;background:#f8f9fb!important; border:1px solid #e1e5ea!important;vertical-align:top!important;box-sizing:border-box!important } .estimate-contact-form-page .estimate-line-item-table textarea{ display:block!important;width:100%!important;height:94px!important;min-height:94px!important;max-height:94px!important; margin:0!important;padding:10px 12px!important;border:1px solid #cfd8e4!important;border-radius:6px!important; background:#fff!important;resize:none!important;box-sizing:border-box!important;font-size:12.5px!important;line-height:1.45!important } .estimate-contact-form-page .estimate-line-item-table input:not([type=checkbox]){ display:block!important;width:100%!important;height:35px!important;min-height:35px!important;margin:0!important; padding:0 10px!important;border:1px solid #cfd8e4!important;border-radius:6px!important; background:#fff!important;box-sizing:border-box!important;font-size:12.5px!important;color:#334155!important } .estimate-contact-form-page .estimate-line-item-table .estimate-unit{ height:28px!important;min-height:28px!important;margin:4px 0 0!important;padding:0 8px!important; border:0!important;background:transparent!important;box-shadow:none!important;text-align:right!important; color:#8996a8!important;font-size:11px!important } .estimate-contact-form-page .estimate-line-item-table .estimate-line-amount{ padding:40px 10px 0!important;text-align:right!important;white-space:nowrap!important;color:#27364c!important;font-size:12px!important } .estimate-contact-form-page .estimate-row-add{ display:inline-grid!important;place-items:center!important;width:34px!important;height:34px!important; margin:0 auto!important;padding:0!important;border:0!important;border-radius:7px!important; background:#202c3d!important;color:#fff!important;font-size:18px!important;box-shadow:none!important } .estimate-contact-form-page .estimate-row-remove{ width:34px!important;height:24px!important;margin:8px auto 0!important;padding:0!important; border:0!important;background:transparent!important;color:#b55a63!important } .estimate-contact-form-page .estimate-totals{ width:min(100%,680px)!important;max-width:680px!important;margin:24px 18px 22px auto!important; padding:9px 16px!important;border:1px solid #e3e9f1!important;border-radius:11px!important;background:#f8fafc!important } .estimate-contact-form-page .estimate-totals>div{ min-height:43px!important;padding:8px 2px!important;border-bottom:1px solid #e8edf4!important;font-size:12px!important } .estimate-contact-form-page .estimate-totals>div:last-child{border-bottom:0!important} .estimate-contact-form-page .estimate-total{font-size:15px!important;color:#17233a!important} .estimate-contact-form-page .estimate-document-notes-input, .estimate-contact-form-page .estimate-notes{ margin:16px 24px 0!important;padding:16px!important;border:1px solid #e1e7ef!important; border-radius:11px!important;background:#fbfcfe!important } .estimate-contact-savebar{ position:sticky!important;bottom:0!important;z-index:5!important;margin:0!important;padding:14px 24px!important; border-top:1px solid #e1e7ef!important;background:rgba(255,255,255,.96)!important; backdrop-filter:blur(8px);box-shadow:0 -8px 24px rgba(30,48,76,.05)!important } .estimate-contact-savebar a,.estimate-contact-savebar button{ min-height:36px!important;border-radius:7px!important;font-size:12px!important } .estimate-contact-savebar button:last-child{ background:#3157df!important;border-color:#3157df!important;color:#fff!important; box-shadow:0 5px 12px rgba(49,87,223,.16)!important } /* Estimate workspace */ .estimate-workspace{max-width:1640px!important;margin:0 auto!important;color:#263954!important} .estimate-contact-workspace-heading{ display:flex!important;align-items:center!important;justify-content:space-between!important;gap:22px!important; margin:0 0 14px!important;padding:18px 20px!important;border:1px solid #dce4ef!important; border-radius:14px!important;background:linear-gradient(120deg,#fff 62%,#f5f8ff 100%)!important; box-shadow:0 6px 20px rgba(31,48,76,.055)!important } .estimate-workspace-heading-copy h1{margin:0;font-size:23px;color:#18263b;letter-spacing:-.02em} .estimate-workspace-heading-copy p{margin:5px 0 0;color:#76859a;font-size:12px} .estimate-workspace-heading-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .estimate-workspace .workspace-filter{display:flex!important;align-items:center!important;gap:0!important} .estimate-workspace .workspace-filter input,.estimate-workspace .workspace-filter select,.estimate-workspace .workspace-filter button{ height:36px!important;box-sizing:border-box!important;border:1px solid #ced8e5!important;background:#fff!important; color:#34506f!important;font-size:11px!important } .estimate-workspace .workspace-filter input{width:160px!important;border-radius:8px 0 0 8px!important;padding:0 9px!important} .estimate-workspace .workspace-filter select{border-left:0!important;border-radius:0!important;padding:0 8px!important} .estimate-workspace .workspace-filter button{border-left:0!important;border-radius:0 8px 8px 0!important;padding:0 10px!important} .estimate-workspace-list-link,.estimate-workspace-new{ display:inline-flex!important;align-items:center!important;gap:6px!important;min-height:36px!important; padding:0 12px!important;border:1px solid #ced8e5!important;border-radius:8px!important; text-decoration:none!important;font-size:12px!important;font-weight:750!important } .estimate-workspace-list-link{background:#fff!important;color:#34506f!important} .estimate-workspace-new{background:#3157df!important;color:#fff!important;border-color:#3157df!important;box-shadow:0 6px 14px rgba(49,87,223,.16)!important} .estimate-workspace-list-link svg,.estimate-workspace-new svg{width:14px;height:14px} .estimate-workspace .proposal-workspace-grid{ grid-template-columns:minmax(410px,35%) minmax(0,1fr)!important;gap:14px!important;align-items:start!important } .estimate-contact-workspace-list,.estimate-contact-workspace-detail{ border:1px solid #dce3ec!important;border-radius:12px!important;background:#fff!important; box-shadow:0 5px 18px rgba(31,48,76,.055)!important;overflow:hidden!important } .estimate-workspace .table-toolbar{ min-height:59px!important;display:flex!important;align-items:center!important;gap:0!important; padding:10px 12px!important;border-bottom:1px solid #e3e9f1!important; background:linear-gradient(90deg,#fbfcff,#f7f9ff)!important } .estimate-workspace .table-toolbar form:first-child{display:flex!important} .estimate-workspace .table-toolbar select,.estimate-workspace .table-toolbar>a, .estimate-workspace-search button,.estimate-workspace-search input{ height:32px!important;box-sizing:border-box!important;border:1px solid #cbd6e4!important; background:#fff!important;color:#34465e!important;font-size:11px!important } .estimate-workspace .table-toolbar select{min-width:65px!important;border-radius:6px 0 0 6px!important;padding:0 7px!important} .estimate-workspace .table-toolbar>a{ display:inline-flex!important;align-items:center!important;gap:5px!important;padding:0 9px!important; border-left:0!important;border-radius:0 6px 6px 0!important;text-decoration:none!important } .estimate-workspace .table-toolbar>a svg{width:13px;height:13px} .estimate-workspace-search{margin-left:auto!important;display:flex!important} .estimate-workspace-search button{ width:36px!important;border-radius:6px 0 0 6px!important;display:grid!important;place-items:center!important;padding:0!important } .estimate-workspace-search button svg{width:13px;height:13px} .estimate-workspace-search input{ width:155px!important;border-left:0!important;border-radius:0 6px 6px 0!important;padding:0 8px!important;outline:0!important } .estimate-workspace-list-scroll{overflow-x:auto!important} .estimate-contact-workspace-list table{width:100%!important;min-width:620px!important;border-collapse:collapse!important;font-size:11.5px!important} .estimate-contact-workspace-list th{ height:39px!important;padding:0 9px!important;background:#f8fafc!important;color:#21314c!important; text-align:left!important;font-size:10px!important;font-weight:750!important;border-bottom:1px solid #e4eaf1!important } .estimate-contact-workspace-list td{ min-height:61px!important;padding:10px 9px!important;border-bottom:1px solid #e8edf3!important; color:#33465f!important;vertical-align:middle!important } .estimate-contact-workspace-list tr.is-selected td{background:#f3f7ff!important} .estimate-contact-workspace-list tr.is-selected td:first-child{border-left:3px solid #3157df!important} .estimate-workspace-identity{display:flex;align-items:center;gap:8px} .estimate-workspace-avatar{ width:30px;height:30px;display:grid;place-items:center;flex:none;border-radius:8px; background:#eef3ff;color:#4965d7 } .estimate-workspace-avatar svg{width:14px;height:14px} .estimate-workspace-number{display:block;color:#1f4f95!important;font-weight:800!important;text-decoration:none!important} .estimate-workspace-identity small{ display:block;max-width:150px;margin-top:2px;color:#8997aa;font-size:9px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis } .estimate-workspace-list-footer{ min-height:55px!important;display:flex!important;align-items:center!important;justify-content:space-between!important; gap:10px!important;padding:9px 12px!important;border-top:1px solid #e7ecf2!important; color:#718096!important;font-size:10.5px!important } /* Workspace tabs + actions */ .estimate-contact-tabs{ min-height:51px!important;display:flex!important;align-items:stretch!important;gap:0!important; padding:0 10px!important;background:#f8fafc!important;border-bottom:1px solid #e3e9f1!important;overflow-x:auto!important } .estimate-contact-tabs a{ min-width:max-content!important;display:inline-flex!important;align-items:center!important;justify-content:center!important; padding:0 10px!important;border-bottom:2px solid transparent!important;color:#5d6d83!important; font-size:10.5px!important;font-weight:700!important;text-decoration:none!important } .estimate-contact-tabs a.active{border-bottom-color:#3157df!important;background:#fff!important;color:#285fc1!important} .estimate-contact-actionbar{ min-height:57px!important;display:flex!important;align-items:center!important;gap:6px!important; padding:10px 14px!important;border-bottom:1px solid #e4eaf1!important;background:#fff!important;flex-wrap:wrap!important } .estimate-contact-actionbar .btn,.estimate-contact-actionbar button{ min-height:32px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important; padding:0 9px!important;border:1px solid #cfd9e5!important;border-radius:7px!important; background:#fff!important;color:#40536c!important;font-size:10.5px!important;font-weight:700!important } .estimate-contact-actionbar .btn-success{ background:#3157df!important;color:#fff!important;border-color:#3157df!important } .estimate-contact-status,.estimate-workspace .status-pill{ display:inline-flex!important;align-items:center!important;min-height:23px!important;padding:0 8px!important; border:1px solid #d7e0eb!important;border-radius:999px!important;background:#f7f9fc!important; color:#5a6b80!important;font-size:9.5px!important;font-weight:750!important } /* Estimate document */ .estimate-contact-workspace-detail .estimate-simple-paper{ margin:18px!important;padding:34px 34px 40px!important;border:1px solid #e3e9f2!important; border-radius:14px!important;background:#fff!important;box-shadow:0 14px 36px rgba(30,48,76,.08)!important;overflow:hidden!important } .estimate-contact-workspace-detail .estimate-simple-paper:before{ content:""!important;display:block!important;position:absolute!important;left:0!important;right:0!important;top:0!important; height:5px!important;background:linear-gradient(90deg,#3157df,#7c5ce7,#22c55e)!important } .estimate-contact-workspace-detail .sales-simple-top{ padding-bottom:28px!important;margin-bottom:22px!important;border-bottom:1px solid #e7edf4!important } .estimate-contact-workspace-detail .sales-simple-brand img{max-width:190px!important;max-height:62px!important} .estimate-contact-workspace-detail .sales-simple-number strong{ background:#17233a!important;border-radius:6px!important;padding:7px 10px!important;font-size:15px!important } .estimate-contact-workspace-detail .sales-simple-number span{color:#65758a!important;font-size:10.5px!important} .estimate-contact-workspace-detail .sales-simple-parties{gap:18px!important;margin:0 0 28px!important} .estimate-contact-workspace-detail .sales-simple-parties section{ padding:16px 18px!important;border:1px solid #e4eaf2!important;border-radius:11px!important;background:#fbfcfe!important } .estimate-contact-workspace-detail .sales-simple-parties h3{ border:0!important;color:#68788d!important;font-size:10px!important;text-transform:uppercase!important;letter-spacing:.08em!important } .estimate-contact-workspace-detail .sales-simple-table-wrap{ border:1px solid #e4eaf2!important;border-radius:10px!important;overflow:auto!important } .estimate-contact-workspace-detail .sales-simple-table th{ background:#17233a!important;color:#fff!important;border:0!important;padding:11px 12px!important;font-size:10.5px!important } .estimate-contact-workspace-detail .sales-simple-table td{ background:#fff!important;border-bottom:1px solid #e8edf3!important;padding:11px 12px!important;font-size:11px!important } .estimate-contact-workspace-detail .sales-simple-totals{ width:min(390px,100%)!important;margin:26px 0 0 auto!important;padding:9px 14px!important; border:1px solid #e3e9f1!important;border-radius:11px!important;background:#f8fafc!important } .estimate-contact-workspace-detail .sales-simple-totals>div{padding:9px 2px!important;font-size:11px!important} .estimate-contact-workspace-detail .sales-simple-totals .sales-simple-total{ margin:4px -7px -2px!important;padding:11px 9px!important;border-radius:7px!important; background:#17233a!important;color:#fff!important } .estimate-contact-workspace-detail .sales-simple-copy{ margin-top:24px!important;padding:16px 18px!important;border:1px solid #e4eaf2!important; border-radius:11px!important;background:#fbfcfe!important } .estimate-contact-workspace-detail .sales-admin-note{ border:1px dashed #d9cba4!important;border-radius:10px!important;background:#fffaf0!important } /* Every Estimate panel: Tasks, Activity, Reminders, Notes, Email */ .estimate-contact-panel{ padding:20px!important;min-height:280px!important;background:#fff!important } .estimate-contact-panel>h3,.estimate-contact-panel>h2{margin:0 0 7px!important;color:#18263b!important;font-size:18px!important} .estimate-contact-panel>p{color:#718096!important;font-size:11.5px!important} .estimate-contact-panel>button{ min-height:34px!important;padding:0 11px!important;border:1px solid #3157df!important; border-radius:7px!important;background:#3157df!important;color:#fff!important;font-size:11px!important;font-weight:750!important } .estimate-contact-panel table{width:100%!important;border-collapse:collapse!important;font-size:11px!important;margin-top:12px!important} .estimate-contact-panel th{ height:37px!important;padding:0 9px!important;background:#f8fafc!important;color:#21314c!important; font-size:10px!important;font-weight:750!important;border:1px solid #e4eaf1!important } .estimate-contact-panel td{ padding:10px 9px!important;border-bottom:1px solid #e8edf3!important;color:#40536c!important;vertical-align:top!important } .estimate-contact-panel tbody tr:hover td{background:#fbfcff!important} .estimate-contact-panel form{ padding:14px!important;border:1px solid #e1e7ef!important;border-radius:10px!important;background:#fbfcfe!important } .estimate-contact-panel form input,.estimate-contact-panel form select,.estimate-contact-panel form textarea{ border:1px solid #cfd9e5!important;border-radius:7px!important;background:#fff!important;color:#263954!important;font-size:12px!important } .estimate-contact-panel form textarea{min-height:105px!important;padding:10px!important} .estimate-contact-panel form .btn{ min-height:34px!important;padding:0 11px!important;border:1px solid #3157df!important; border-radius:7px!important;background:#3157df!important;color:#fff!important;font-size:11px!important;font-weight:750!important } .estimate-workspace .entry-list{display:grid!important;gap:9px!important;margin-top:14px!important} .estimate-workspace .entry-list article,.estimate-workspace .activity-row{ margin:0!important;padding:13px 14px!important;border:1px solid #e4eaf2!important; border-radius:9px!important;background:#fff!important } .estimate-workspace .entry-list article p,.estimate-workspace .activity-row{ color:#4b5d74!important;font-size:11.5px!important;line-height:1.6!important } .estimate-workspace .btn-link{ border:0!important;background:transparent!important;color:#55729a!important;padding:0!important;font-size:10px!important } .estimate-workspace .btn-link:hover{color:#1d4ed8!important;text-decoration:underline!important} .estimate-workspace .empty-state{ margin:12px 0!important;padding:26px!important;border:1px dashed #d7e0eb!important; border-radius:9px!important;background:#fbfcfe!important;color:#8190a3!important;text-align:center!important;font-size:11px!important } /* Estimate dialogs */ .estimate-contact-dialog{ background:rgba(32,48,71,.58)!important;backdrop-filter:blur(2px)!important } .estimate-contact-dialog .dialog-card{ width:min(650px,calc(100vw - 30px))!important;padding:0!important;border:1px solid #d8e1ec!important; border-radius:13px!important;background:#fff!important;color:#263954!important; box-shadow:0 22px 70px rgba(17,24,39,.24)!important;overflow:hidden!important } .estimate-contact-dialog .dialog-card h2{ margin:0!important;padding:16px 18px!important;border-bottom:1px solid #e4e9f0!important; background:linear-gradient(90deg,#fbfcff,#f7f9ff)!important;color:#18263b!important;font-size:17px!important } .estimate-contact-dialog .dialog-card>form{padding:18px!important;gap:13px!important} .estimate-contact-dialog .dialog-card label{font-size:11.5px!important;font-weight:700!important;color:#40536c!important} .estimate-contact-dialog .dialog-card input,.estimate-contact-dialog .dialog-card select,.estimate-contact-dialog .dialog-card textarea{ border:1px solid #cfd9e5!important;border-radius:7px!important;background:#fff!important;color:#263954!important;font-size:12px!important } .estimate-contact-dialog .dialog-card input,.estimate-contact-dialog .dialog-card select{height:36px!important;padding:0 9px!important} .estimate-contact-dialog .dialog-card textarea{min-height:95px!important;padding:9px 10px!important} .estimate-contact-dialog .dialog-card .btn{ justify-self:end!important;min-height:34px!important;padding:0 11px!important;border-radius:7px!important; background:#3157df!important;color:#fff!important;border-color:#3157df!important;font-size:11px!important } .estimate-contact-dialog .dialog-close{ position:absolute!important;right:16px!important;top:11px!important;z-index:2!important; width:31px!important;height:31px!important;border-radius:7px!important;background:#fff!important; border:1px solid #d9e2ec!important;color:#718096!important } @media(max-width:1180px){ .estimate-workspace .proposal-workspace-grid{grid-template-columns:1fr!important} } @media(max-width:960px){ .estimate-contact-heading,.estimate-contact-workspace-heading{align-items:flex-start!important;flex-direction:column!important} .estimate-contact-heading-actions,.estimate-workspace-heading-actions{width:100%;flex-wrap:wrap} .estimate-contact-form-page .estimate-columns{grid-template-columns:1fr!important} .estimate-contact-form-page .estimate-fields+.estimate-fields{border:0!important;padding-left:0!important} } @media(max-width:700px){ .estimate-contact-form-page .estimate-columns{padding:16px!important} .estimate-contact-form-page .estimate-contact-items{margin-left:16px!important;margin-right:16px!important} .estimate-workspace-heading-actions{align-items:stretch!important;flex-direction:column!important} .estimate-workspace-heading-actions>*{width:100%!important} .estimate-workspace .workspace-filter input{width:100%!important} .estimate-workspace-list-link,.estimate-workspace-new{width:100%!important;box-sizing:border-box!important;justify-content:center!important} .estimate-contact-workspace-detail .estimate-simple-paper{margin:10px!important;padding:26px 18px!important} } @media print{ .estimate-contact-workspace-heading,.estimate-contact-workspace-list,.estimate-contact-tabs,.estimate-contact-actionbar{display:none!important} .estimate-workspace .proposal-workspace-grid{display:block!important} .estimate-contact-workspace-detail{border:0!important;box-shadow:none!important} .estimate-contact-workspace-detail .estimate-simple-paper{ margin:0!important;border:0!important;box-shadow:none!important;border-radius:0!important } } /* Estimate automatic number + Settings tag multi-select */ .estimate-contact-form-page #estimate-number[readonly]{background:#f4f7fb!important;color:#64748b!important;cursor:not-allowed} .estimate-contact-form-page .estimate-tag-picker{display:flex;flex-wrap:wrap;gap:8px;min-height:42px;padding:8px;border:1px solid #d4dce7;border-radius:7px;background:#fff} .estimate-contact-form-page .estimate-tag-option{display:inline-flex;align-items:center;margin:0;cursor:pointer} .estimate-contact-form-page .estimate-tag-option input{position:absolute;opacity:0;pointer-events:none} .estimate-contact-form-page .estimate-tag-option span{display:inline-flex;align-items:center;min-height:28px;padding:5px 10px;border:1px solid #dce4ef;border-radius:999px;background:#f8fafc;color:#53657d;font-size:12px;font-weight:650;line-height:1;transition:.15s ease} .estimate-contact-form-page .estimate-tag-option:hover span{border-color:#a9c1e8;background:#f2f7ff;color:#244e89} .estimate-contact-form-page .estimate-tag-option input:checked+span{border-color:#9bbbf1;background:#edf4ff;color:#1d4ed8;box-shadow:0 0 0 2px rgba(37,99,235,.06)} .estimate-contact-form-page .estimate-tag-option input:focus-visible+span{outline:3px solid rgba(37,99,235,.18);outline-offset:2px} .estimate-contact-form-page .estimate-tag-empty{width:100%;margin:2px;color:#7b899b;font-size:12px} @media(max-width:600px){.estimate-contact-form-page .estimate-tag-picker{gap:6px}.estimate-contact-form-page .estimate-tag-option span{min-height:30px;padding:6px 10px}} /* ============================================================ SECTION: events.css ============================================================ */ /* ========================================================== Events admin โ€” Knowledge Base aligned workspace ========================================================== */ .event-admin-page{max-width:1540px;margin:0 auto;color:#31455b} .event-page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:18px} .event-eyebrow{display:block;margin-bottom:5px;color:#6d63e8;font-size:10px;font-weight:850;letter-spacing:.14em;text-transform:uppercase} .event-page-head h1{margin:0;color:#17233a;font-size:29px;line-height:1.15;font-weight:820;letter-spacing:-.75px} .event-page-head p{margin:6px 0 0;color:#748399;font-size:13px} .event-head-links{display:flex;align-items:center;gap:12px;margin-top:8px} .event-head-links button,.event-head-links a{display:inline-flex;align-items:center;gap:6px;border:0;padding:0;background:transparent;color:#315fc5;font:inherit;font-size:12px;font-weight:800;cursor:pointer;text-decoration:none} .event-head-links button:hover,.event-head-links a:hover{color:#1d4ed8} .event-head-links svg{width:14px;height:14px} .event-new-button{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 15px;border-radius:10px;background:linear-gradient(135deg,#4338ca,#2563eb);color:#fff!important;font-size:12px;font-weight:800;text-decoration:none;box-shadow:0 9px 20px rgba(37,99,235,.22)} .event-new-button:hover{transform:translateY(-1px);box-shadow:0 12px 24px rgba(37,99,235,.28)} .event-new-button svg{width:16px;height:16px} .event-calendar-card{overflow:hidden;border:1px solid #e1e7f0;border-radius:16px;background:#fff;box-shadow:0 10px 30px rgba(31,46,75,.07)} .event-toolbar{min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 16px;border-bottom:1px solid #e7ecf3;background:linear-gradient(100deg,#fff 0%,#f8fbff 52%,#f7f4ff 100%)} .event-toolbar-left,.event-toolbar-right,.event-filter-form,.event-view-switch{display:flex;align-items:center;gap:7px} .event-period-title{margin-left:6px;color:#24364f;font-size:15px;letter-spacing:-.2px} .event-icon-button,.event-tool-button,.event-filter-form select{height:36px;border:1px solid #ccd7e6;background:#fff;color:#3d4d64;font:inherit} .event-icon-button,.event-tool-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:9px;text-decoration:none;font-size:11.5px;font-weight:750} .event-icon-button{width:36px;padding:0} .event-tool-button{padding:0 11px} .event-icon-button:hover,.event-tool-button:hover{border-color:#aac3eb;background:#eff5ff;color:#1d4ed8} .event-icon-button svg,.event-tool-button svg{width:14px;height:14px} .event-filter-form select{min-width:132px;padding:0 30px 0 10px;border-radius:9px;font-size:11.5px;outline:0} .event-filter-form select:focus{border-color:#8eb0eb;box-shadow:0 0 0 3px rgba(37,99,235,.08)} .event-view-switch{margin-left:3px;padding:3px;border:1px solid #dbe4ef;border-radius:10px;background:#fff} .event-view-switch a{min-height:30px;display:inline-flex;align-items:center;padding:0 9px;border-radius:7px;color:#617187;font-size:10.5px;font-weight:800;text-decoration:none} .event-view-switch a:hover{background:#f3f7fc;color:#315fc5} .event-view-switch a.active{background:linear-gradient(135deg,#eef4ff,#f0edff);color:#315fc5;box-shadow:inset 0 0 0 1px #dce5f3} .event-weekdays{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-bottom:1px solid #e3e8f0;background:linear-gradient(90deg,#eef4ff,#f6f4ff)} .event-weekdays strong{padding:11px 12px;color:#3d4f68;text-align:center;font-size:10.5px;font-weight:850;letter-spacing:.055em;text-transform:uppercase} .event-weekdays strong+strong{border-left:1px solid #e3e8f0} .event-calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));background:#e7ecf3;gap:1px} .event-day{position:relative;min-height:155px;padding:9px;background:#fff;overflow:hidden} .event-calendar-grid.week-view .event-day{min-height:360px} .event-day.outside{background:#fafbfd} .event-day.outside .event-day-number{color:#b1bbc8} .event-day.today{background:linear-gradient(180deg,#fffdf5,#fff)} .event-day.today:before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,#7c3aed,#2563eb,#06b6d4)} .event-day-head{display:flex;align-items:center;justify-content:space-between;min-height:25px;margin-bottom:5px} .event-day-number{width:25px;height:25px;display:grid;place-items:center;border-radius:8px;color:#55657b;font-size:11px;font-weight:800} .event-day.today .event-day-number{background:#315fc5;color:#fff} .event-day-head>a{width:25px;height:25px;display:grid;place-items:center;border-radius:7px;color:#95a1b0;opacity:0;transition:.15s} .event-day:hover .event-day-head>a{opacity:1} .event-day-head>a:hover{background:#eef5ff;color:#1d4ed8} .event-day-head svg{width:13px;height:13px} .event-day-items{display:flex;flex-direction:column;gap:4px} .event-pill{min-height:30px;display:flex;align-items:center;gap:7px;padding:5px 7px;border:1px solid #e0e7ef;border-radius:8px;background:#fff;color:#34445b;text-decoration:none;overflow:hidden;transition:.14s} .event-pill:hover{border-color:#b8cce8;background:#f8fbff;transform:translateY(-1px)} .event-pill-dot,.event-list-color,.event-agenda-color{width:8px;height:8px;flex:none;border-radius:50%;background:var(--event-color,#289bd6)} .event-pill-copy{min-width:0;display:flex;align-items:center;gap:5px} .event-pill-copy strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10.5px;font-weight:760} .event-pill-copy small{flex:none;color:#8794a6;font-size:9px} .event-more{padding:3px 7px;color:#6f7f92;font-size:10px;font-weight:700} .event-pill.green,.event-list-color.green,.event-agenda-color.green,.event-color.green{--event-color:#79c83d} .event-pill.teal,.event-list-color.teal,.event-agenda-color.teal,.event-color.teal{--event-color:#24b7b9} .event-pill.blue,.event-list-color.blue,.event-agenda-color.blue,.event-color.blue{--event-color:#289bd6} .event-pill.gray,.event-list-color.gray,.event-agenda-color.gray,.event-color.gray{--event-color:#9eacad} .event-pill.yellow,.event-list-color.yellow,.event-agenda-color.yellow,.event-color.yellow{--event-color:#f4b400} .event-pill.orange,.event-list-color.orange,.event-agenda-color.orange,.event-color.orange{--event-color:#ef8b00} .event-pill.red,.event-list-color.red,.event-agenda-color.red,.event-color.red{--event-color:#ef4836} .event-pill.pink,.event-list-color.pink,.event-agenda-color.pink,.event-color.pink{--event-color:#db2f77} .event-pill.purple,.event-list-color.purple,.event-agenda-color.purple,.event-color.purple{--event-color:#8b5cf6} .event-pill.cyan,.event-list-color.cyan,.event-agenda-color.cyan,.event-color.cyan{--event-color:#31acd3} .event-pill.navy,.event-list-color.navy,.event-agenda-color.navy,.event-color.navy{--event-color:#34495e} .event-pill.lavender,.event-list-color.lavender,.event-agenda-color.lavender,.event-color.lavender{--event-color:#cfa2f4} .event-day-view{padding:18px} .event-day-summary{display:flex;align-items:center;gap:13px;padding:16px;border:1px solid #e1e7f0;border-radius:13px;background:linear-gradient(100deg,#fff,#f8fbff);margin-bottom:14px} .event-day-date{width:48px;height:48px;flex:none;display:grid;place-items:center;align-content:center;border-radius:12px;background:linear-gradient(135deg,#4338ca,#2563eb);color:#fff} .event-day-date strong{font-size:19px;line-height:1}.event-day-date span{font-size:9px;text-transform:uppercase;letter-spacing:.07em} .event-day-summary h2{margin:0;color:#223650;font-size:17px}.event-day-summary p{margin:4px 0 0;color:#8390a2;font-size:11px} .event-day-summary>.event-tool-button{margin-left:auto} .event-agenda{border:1px solid #e1e7f0;border-radius:13px;overflow:hidden} .event-agenda-item{display:grid;grid-template-columns:86px 10px minmax(0,1fr) 34px;align-items:center;gap:12px;min-height:72px;padding:10px 14px;border-bottom:1px solid #edf1f5;background:#fff} .event-agenda-item:last-child{border-bottom:0} .event-agenda-item:hover{background:#f8fbff} .event-agenda-time{color:#738196;font-size:10.5px;font-weight:800} .event-agenda-color{width:9px;height:38px;border-radius:8px} .event-agenda-copy>a,.event-agenda-copy>strong{display:block;color:#203f72;font-size:12.5px;font-weight:800;text-decoration:none} .event-agenda-copy>a:hover{color:#1d4ed8} .event-agenda-copy>div{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:4px;color:#8996a7;font-size:10px} .event-agenda-copy span{display:inline-flex;align-items:center;gap:4px} .event-agenda-copy svg{width:11px;height:11px} .event-row-action{width:32px;height:32px;display:grid;place-items:center;border:1px solid #dbe4ef;border-radius:8px;background:#fff;color:#43638f;text-decoration:none} .event-row-action:hover{border-color:#abc6ef;background:#eef5ff;color:#1d4ed8} .event-row-action svg{width:14px;height:14px} .event-list-wrap{overflow:auto} .event-data-table{width:100%;min-width:960px;border-collapse:separate;border-spacing:0;background:#fff} .event-data-table thead th{height:43px;padding:10px 14px;background:linear-gradient(90deg,#eef4ff,#f6f4ff)!important;border-bottom:1px solid #dfe7f2!important;color:#3d4f68!important;font-size:10.5px!important;font-weight:850!important;letter-spacing:.055em!important;text-transform:uppercase!important} .event-data-table tbody td{padding:11px 14px!important;border-bottom:1px solid #edf1f5!important;background:#fff;color:#34445b;font-size:12px!important;vertical-align:middle} .event-data-table tbody tr:hover td{background:#f8fbff!important} .event-data-table td>strong,.event-data-table td>small{display:block}.event-data-table td>small{margin-top:3px;color:#8794a6;font-size:10px} .event-options-col{width:80px} .event-list-title{display:flex;align-items:center;gap:10px}.event-list-color{width:10px;height:36px;border-radius:8px}.event-list-title>div{min-width:0}.event-list-title a,.event-list-title strong{display:block;color:#203f72!important;font-weight:760;text-decoration:none}.event-list-title a:hover{color:#1d4ed8!important}.event-list-title small{display:block;max-width:430px;margin-top:3px;color:#8a97a8;font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .event-type-badge,.event-label-badge{display:inline-flex;align-items:center;min-height:24px;padding:3px 8px;border-radius:999px;font-size:10.5px;font-weight:800} .event-type-badge{background:#eef4ff;color:#315fc5}.event-label-badge{background:#f2edff;color:#6a42c2}.event-muted{color:#9aa6b5} .event-row-actions{display:flex;align-items:center;gap:6px}.event-row-actions a{width:32px;height:32px;display:grid;place-items:center;padding:0;border:1px solid #dbe4ef;border-radius:8px;background:#fff;color:#43638f;text-decoration:none}.event-row-actions a:hover{border-color:#abc6ef;background:#eef5ff;color:#1d4ed8}.event-row-actions svg{width:14px;height:14px} .event-empty{text-align:center!important;padding:48px 18px!important;color:#8794a7!important}.event-empty.compact{padding:30px 16px!important}.event-empty svg{width:25px;height:25px;margin-bottom:8px}.event-empty strong,.event-empty span{display:block}.event-empty strong{color:#516176}.event-empty span{margin-top:3px;font-size:11px} .event-card-footer{min-height:58px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 16px;border-top:1px solid #e5eaf1;background:#fbfcff;color:#748196;font-size:11px} .event-filter-summary{display:inline-flex;align-items:center;gap:5px}.event-filter-summary svg{width:12px} .event-modal{position:fixed;z-index:1260;inset:0;display:none;place-items:center;padding:18px;background:rgba(15,23,42,.52);backdrop-filter:blur(4px)} .event-modal.is-open{display:grid} .event-modal-card{width:min(640px,calc(100vw - 30px));max-height:calc(100vh - 40px);overflow:auto;border:1px solid rgba(255,255,255,.75);border-radius:17px;background:#fff;box-shadow:0 24px 70px rgba(15,23,42,.25)} .event-modal-card-lg{width:min(900px,calc(100vw - 30px))} .event-modal-card>header{min-height:74px;display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:18px 20px;border-bottom:1px solid #e5eaf1;background:linear-gradient(100deg,#fff,#f8fbff 58%,#f7f4ff)} .event-modal-card>header span{display:block;margin-bottom:3px;color:#6d63e8;font-size:9.5px;font-weight:850;letter-spacing:.13em;text-transform:uppercase} .event-modal-card>header h2{margin:0;color:#1b2b43;font-size:18px}.event-modal-card>header p{margin:4px 0 0;color:#7c899b;font-size:11px} .event-modal-card>header>button,.event-modal-close{width:34px;height:34px;display:grid;place-items:center;border:1px solid #dbe4ef;border-radius:9px;background:#fff;color:#6f7f92;cursor:pointer;text-decoration:none} .event-modal-card>header>button:hover,.event-modal-close:hover{background:#f1f5fb;color:#1d4ed8}.event-modal-card>header svg{width:15px} .event-modal-card>footer{display:flex;justify-content:flex-end;gap:8px;padding:14px 20px;border-top:1px solid #e6ebf2;background:linear-gradient(90deg,#fbfcff,#f7f5ff)} .event-label-manager{padding:8px 20px 12px} .event-label-manager>a{display:grid;grid-template-columns:36px minmax(0,1fr) 18px;align-items:center;gap:10px;padding:11px 5px;border-bottom:1px solid #edf1f5;color:#34465e;text-decoration:none} .event-label-manager>a:last-child{border-bottom:0}.event-label-manager>a:hover,.event-label-manager>a.active{background:#f8fbff}.event-label-manager>a.active{color:#315fc5} .event-label-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:linear-gradient(135deg,#eef2ff,#e8f8ff);color:#4f63db}.event-label-icon svg{width:15px} .event-label-manager strong,.event-label-manager small{display:block}.event-label-manager strong{font-size:12px}.event-label-manager small{margin-top:3px;color:#8b98a8;font-size:10.5px}.event-label-manager>a>svg{width:14px;color:#9aa6b5} .event-errors{display:flex;gap:10px;margin:16px 20px 0;padding:12px 14px;border:1px solid #f2c4c0;border-radius:10px;background:#fff5f4;color:#a7352e;font-size:11px}.event-errors>svg{width:17px;height:17px;flex:none;margin-top:1px}.event-errors strong{display:block;margin-bottom:4px}.event-errors ul{margin:0;padding-left:17px} .event-form{padding:0} .event-form-fields{display:grid;grid-template-columns:1fr 1fr;gap:15px;padding:20px 20px 5px} .event-field{display:grid;gap:6px;color:#3c4d65;font-size:11.5px;font-weight:800}.event-field.wide{grid-column:1/-1}.event-field>span em{color:#e11d48;font-style:normal} .event-field input,.event-field select,.event-field textarea{width:100%;min-height:40px!important;padding:8px 11px;border:1px solid #cbd7e5;border-radius:9px;background:#fff;color:#253750;font:inherit;outline:0}.event-field textarea{min-height:105px!important;resize:vertical}.event-field input:focus,.event-field select:focus,.event-field textarea:focus{border-color:#84a9eb!important;box-shadow:0 0 0 4px rgba(37,99,235,.08)!important} .event-form-section{padding:16px 20px 20px;border-top:1px solid #edf1f5}.event-section-heading strong,.event-section-heading small{display:block}.event-section-heading strong{color:#34465f;font-size:12px}.event-section-heading small{margin-top:3px;color:#8a97a8;font-size:10.5px} .event-setting-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px} .event-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px;border:1px solid #e0e7f0;border-radius:10px;background:#fafcff}.event-toggle-row strong,.event-toggle-row small{display:block}.event-toggle-row strong{color:#3b4d65;font-size:11px}.event-toggle-row small{margin-top:2px;color:#8996a7;font-size:9.5px} .event-switch input{position:absolute;opacity:0;pointer-events:none}.event-switch{display:inline-flex;width:32px;flex:none;cursor:pointer}.event-switch i{display:block;width:31px;height:18px;background:#d8e0ea;border-radius:20px;position:relative;transition:.2s}.event-switch i:after{content:"";position:absolute;width:14px;height:14px;left:2px;top:2px;border-radius:50%;background:#fff;box-shadow:0 1px 2px #0003;transition:.2s}.event-switch input:checked+i{background:#5f8ef0}.event-switch input:checked+i:after{left:15px} .event-repeat-frequency{margin-top:12px;max-width:300px} .event-share-box{margin-top:13px;padding:13px;border:1px solid #e0e7f0;border-radius:10px;background:#fbfcfe}.event-share-box>strong{display:block;margin-bottom:9px;color:#3b4d65;font-size:11px}.event-check-list{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.event-check-list label{display:flex;align-items:center;gap:6px;color:#53647a;font-size:10.5px;font-weight:650}.event-check-list input{accent-color:#2563eb}.event-share-box>select{width:100%;min-height:82px;margin-top:10px;padding:7px 9px;border:1px solid #cbd7e5;border-radius:9px;background:#fff;color:#33465f} .event-color-picker{display:grid;grid-template-columns:120px 1fr;align-items:center;gap:12px;margin-top:14px}.event-color-picker>span{color:#3b4d65;font-size:11px;font-weight:800}.event-color-picker>div{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.event-color{display:inline-flex;cursor:pointer}.event-color input{position:absolute;opacity:0}.event-color i{display:block;width:17px;height:17px;border-radius:50%;background:var(--event-color,#289bd6);border:2px solid #fff;box-shadow:0 0 0 1px #d4dde8}.event-color input:checked+i{box-shadow:0 0 0 3px rgba(37,99,235,.26)} .event-attachments{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:16px 20px;border-top:1px solid #edf1f5} .event-upload{position:relative;display:flex;align-items:center;gap:10px;min-height:58px;padding:10px 12px;border:1px dashed #cbd7e5;border-radius:10px;background:#fbfcfe;color:#4d6079;cursor:pointer}.event-upload:hover{border-color:#91afe0;background:#f6f9ff}.event-upload>svg{width:18px;color:#4f63db}.event-upload strong,.event-upload small{display:block}.event-upload strong{font-size:11px}.event-upload small{margin-top:2px;color:#8996a7;font-size:9.5px}.event-upload input{position:absolute;inset:0;opacity:0;cursor:pointer} .event-existing-file{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border:1px solid #e2e8f0;border-radius:9px}.event-existing-file a{display:inline-flex;align-items:center;gap:6px;color:#315fc5;font-size:10.5px;font-weight:700;text-decoration:none}.event-existing-file a svg{width:13px}.event-existing-file label{display:flex;align-items:center;gap:5px;color:#9f3944;font-size:10px} .event-form-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 20px;border-top:1px solid #e6ebf2;background:linear-gradient(90deg,#fbfcff,#f7f5ff)}.event-form-actions>div{display:flex;align-items:center;gap:8px} .event-primary,.event-secondary,.event-danger{min-height:38px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 13px;border-radius:9px;font-size:11.5px;font-weight:800;text-decoration:none;cursor:pointer} .event-primary{border:0;background:linear-gradient(135deg,#4338ca,#2563eb);color:#fff!important;box-shadow:0 8px 18px rgba(37,99,235,.18)}.event-primary:hover{transform:translateY(-1px)} .event-secondary{border:1px solid #cfdae8;background:#fff;color:#53647a}.event-secondary:hover{background:#f7f9fc} .event-danger{border:1px solid #fecaca;background:#fff;color:#c73f4a}.event-danger:hover{background:#fff1f2}.event-primary svg,.event-danger svg{width:14px} #delete-event-form{display:none} @media(max-width:1120px){ .event-toolbar{align-items:flex-start;flex-direction:column}.event-toolbar-right{width:100%;justify-content:space-between} .event-calendar-grid.week-view .event-day{min-height:280px} } @media(max-width:860px){ .event-page-head{align-items:flex-start;flex-direction:column}.event-new-button{align-self:flex-start} .event-toolbar-right{align-items:flex-start;flex-direction:column}.event-filter-form{width:100%}.event-filter-form select{flex:1} .event-calendar-grid{overflow-x:auto;grid-template-columns:repeat(7,minmax(135px,1fr))}.event-weekdays{overflow:hidden;grid-template-columns:repeat(7,minmax(135px,1fr))} .event-weekdays strong{min-width:135px}.event-calendar-grid.week-view .event-day{min-height:240px} } @media(max-width:680px){ .event-page-head h1{font-size:25px}.event-toolbar-left{width:100%;flex-wrap:wrap}.event-period-title{width:100%;order:-1;margin:0 0 3px;font-size:14px} .event-filter-form{flex-direction:column}.event-filter-form select{width:100%}.event-view-switch{width:100%;justify-content:space-between}.event-view-switch a{flex:1;justify-content:center} .event-day-summary{align-items:flex-start;flex-wrap:wrap}.event-day-summary>.event-tool-button{margin-left:0;width:100%} .event-agenda-item{grid-template-columns:62px 8px minmax(0,1fr)}.event-agenda-item>.event-row-action{grid-column:3;justify-self:start}.event-agenda-time{font-size:9px} .event-form-fields{grid-template-columns:1fr}.event-field.wide{grid-column:auto}.event-setting-grid{grid-template-columns:1fr}.event-attachments{grid-template-columns:1fr}.event-existing-file{grid-column:auto} .event-color-picker{grid-template-columns:1fr}.event-form-actions{align-items:stretch;flex-direction:column-reverse}.event-form-actions>div{width:100%}.event-form-actions .event-primary,.event-form-actions .event-secondary,.event-form-actions .event-danger{flex:1} } /* ========================================================== Events โ€” exact Knowledge Base visual parity ========================================================== */ .event-admin-page{max-width:1540px;margin:0 auto} .event-page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:18px} .event-eyebrow{display:block;margin-bottom:5px;color:#6d63e8;font-size:10px;font-weight:850;letter-spacing:.14em;text-transform:uppercase} .event-page-head h1{margin:0;color:#17233a;font-size:29px;line-height:1.15;font-weight:820;letter-spacing:-.75px} .event-page-head p{margin:6px 0 0;color:#748399;font-size:13px} .event-head-links{display:flex;align-items:center;gap:10px;margin-top:7px;color:#8593a7;font-size:11.5px} .event-head-links button,.event-head-links a{display:inline-flex;align-items:center;gap:5px;border:0;padding:0;background:transparent;color:#315fc5;font:inherit;font-size:12px;font-weight:800;cursor:pointer;text-decoration:none} .event-head-links button:hover,.event-head-links a:hover{color:#1d4ed8} .event-new-button{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 15px;border-radius:10px;background:linear-gradient(135deg,#4338ca,#2563eb);color:#fff!important;font-size:12px;font-weight:800;text-decoration:none;box-shadow:0 9px 20px rgba(37,99,235,.22)} .event-new-button:hover{transform:translateY(-1px);box-shadow:0 12px 24px rgba(37,99,235,.28)} .event-new-button svg{width:16px;height:16px} .event-calendar-card{overflow:hidden;border:1px solid #e1e7f0;border-radius:16px;background:#fff;box-shadow:0 10px 30px rgba(31,46,75,.07)} .event-toolbar{min-height:66px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 16px;border-bottom:1px solid #e7ecf3;background:linear-gradient(100deg,#fff 0%,#f8fbff 52%,#f7f4ff 100%)} .event-icon-button,.event-tool-button,.event-filter-form select{height:36px;border:1px solid #ccd7e6;background:#fff;color:#3d4d64;font:inherit} .event-icon-button,.event-tool-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:9px;padding:0 11px;font-size:11.5px;font-weight:750;text-decoration:none} .event-icon-button{width:36px;padding:0} .event-icon-button:hover,.event-tool-button:hover{border-color:#aac3eb;background:#eff5ff;color:#1d4ed8} .event-filter-form select{min-height:36px!important;border-radius:9px!important} .event-view-switch{border:1px solid #dbe4ef;border-radius:10px;background:#fff} .event-view-switch a{border-radius:7px;color:#5c6d83} .event-view-switch a.active{border:1px solid #dbe4ef;background:#eaf1fb;color:#1f3554} .event-weekdays{background:linear-gradient(90deg,#eef4ff,#f6f4ff)} .event-weekdays strong{color:#3d4f68;font-size:10.5px;font-weight:850;letter-spacing:.055em;text-transform:uppercase} .event-day{background:#fff} .event-day:hover{background:#f8fbff} .event-day.today{background:#fbfdff} .event-day.today:before{height:3px;background:linear-gradient(90deg,#7c3aed,#2563eb,#06b6d4)} .event-pill{border:1px solid #e0e7f0;border-radius:9px;background:#fff;color:#34445b} .event-pill:hover{border-color:#aac3eb;background:#eff5ff;color:#1d4ed8} .event-data-table thead th{height:43px;padding:10px 14px;background:linear-gradient(90deg,#eef4ff,#f6f4ff)!important;border-bottom:1px solid #dfe7f2!important;color:#3d4f68!important;font-size:10.5px!important;font-weight:850!important;letter-spacing:.055em!important;text-transform:uppercase!important} .event-data-table tbody td{padding:11px 14px!important;border-bottom:1px solid #edf1f5!important;background:#fff;color:#34445b;font-size:12.5px!important;vertical-align:middle} .event-data-table tbody tr:hover td{background:#f8fbff!important} .event-card-footer{min-height:62px;padding:12px 16px;border-top:1px solid #e5eaf1;background:#fbfcff;color:#748196;font-size:11.5px} .event-modal{position:fixed;z-index:1200;inset:0;display:none;place-items:center;padding:18px;background:rgba(15,23,42,.5);backdrop-filter:blur(4px)} .event-modal.is-open{display:grid} .event-modal-card{width:min(620px,calc(100vw - 30px));max-height:calc(100vh - 40px);overflow:auto;border:1px solid rgba(255,255,255,.72);border-radius:17px;background:#fff;box-shadow:0 26px 70px rgba(15,23,42,.24)} .event-modal-card-lg{width:min(900px,calc(100vw - 30px))} .event-modal-card>header{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:17px 19px;border-bottom:1px solid #e7ecf3;background:linear-gradient(100deg,#f8fbff,#f7f4ff)} .event-modal-card>header span{display:block;color:#6d63e8;font-size:9.5px;font-weight:850;text-transform:uppercase;letter-spacing:.12em} .event-modal-card>header h2{margin:2px 0 0;color:#20314a;font-size:17px} .event-modal-card>header p{margin:4px 0 0;color:#8996a8;font-size:10.5px} .event-modal-card>header>button,.event-modal-close{width:32px;height:32px;display:grid;place-items:center;border:1px solid #dbe4ef;border-radius:9px;background:#fff;color:#64748b;cursor:pointer} .event-modal-card>header>button:hover,.event-modal-close:hover{border-color:#aac3eb;background:#eff5ff;color:#1d4ed8} .event-modal-card>header>button svg,.event-modal-close svg{width:15px;height:15px} .event-form-fields{padding:23px 24px 4px;gap:18px} .event-field{margin-bottom:0;color:#32445f;font-size:12px;font-weight:800} .event-field>span{display:block;margin-bottom:2px} .event-field input,.event-field select,.event-field textarea{width:100%;min-height:42px!important;padding:9px 12px;border:1px solid #cbd7e5;border-radius:10px;background:#fff;color:#24364f;outline:0} .event-field textarea{min-height:120px!important} .event-field input:focus,.event-field select:focus,.event-field textarea:focus{border-color:#84a9eb!important;box-shadow:0 0 0 4px rgba(37,99,235,.08)!important} .event-form-section{padding:18px 24px 21px;border-top:1px solid #e7ecf3} .event-section-heading strong{color:#32445f;font-size:12px;font-weight:800} .event-section-heading small{color:#8996a8;font-size:10.5px} .event-toggle-row,.event-share-box{border:1px solid #dfe6ef;border-radius:10px;background:#fbfcfe} .event-attachments{padding:16px 24px;border-top:1px solid #e7ecf3} .event-upload{border:1px dashed #cbd7e5;border-radius:10px;background:#fbfcfe} .event-upload:hover{border-color:#aac3eb;background:#eff5ff} .event-form-actions{display:flex;justify-content:space-between;gap:8px;padding:15px 24px;border-top:1px solid #e7ecf3;background:linear-gradient(90deg,#fbfcff,#f7f5ff)} .event-primary,.event-secondary,.event-danger{min-height:39px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 14px;border-radius:9px;font-size:12px;font-weight:800} .event-secondary{border:1px solid #cfdae8;background:#fff;color:#53647a;text-decoration:none} .event-primary{border:0;background:linear-gradient(135deg,#4338ca,#2563eb);color:#fff!important;box-shadow:0 8px 18px rgba(37,99,235,.2)} .event-primary:hover{transform:translateY(-1px);box-shadow:0 11px 22px rgba(37,99,235,.26)} .event-danger{border:1px solid #fecaca;background:#fff;color:#c2414e} .event-danger:hover{background:#fff1f2} .event-primary svg,.event-danger svg{width:15px} .event-label-manager{padding:8px 14px} .event-label-manager>a{padding:11px 7px;border-bottom:1px solid #edf1f5;color:#34455e} .event-label-manager>a:hover,.event-label-manager>a.active{background:#f8fbff} .event-label-manager strong{font-size:12px} .event-label-manager small{margin-top:2px;color:#8996a8;font-size:10.5px} @media(max-width:760px){ .event-page-head{align-items:flex-start;flex-direction:column} .event-toolbar{align-items:stretch;flex-direction:column} .event-toolbar-right,.event-filter-form{width:100%} .event-card-footer{align-items:flex-start;flex-direction:column} } /* ========================================================== Events โ€” NEXT CRM invoice-style system (2026-10-01) ========================================================== */ .event-admin-page{max-width:1600px;margin:0 auto;color:#263954} .event-page-head{display:flex;align-items:center;justify-content:space-between;gap:22px;margin:0 0 12px;padding:18px 20px;border:1px solid #dce4ef;border-radius:14px;background:linear-gradient(120deg,#fff 62%,#f5f8ff 100%);box-shadow:0 6px 20px rgba(31,48,76,.055)} .event-eyebrow{display:block;margin-bottom:4px;color:#5f6bd6!important;font-size:10px!important;font-weight:850!important;letter-spacing:.1em!important;text-transform:uppercase} .event-page-head h1{margin:0!important;color:#18263b!important;font-size:24px!important;line-height:1.2!important;font-weight:800!important;letter-spacing:-.025em!important} .event-page-head p{margin:5px 0 0!important;color:#76859a!important;font-size:12px!important} .event-page-head-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap} .event-page-head-actions a,.event-page-head-actions button{min-height:36px;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 12px;border-radius:8px;font:inherit;font-size:12px;font-weight:750;text-decoration:none;cursor:pointer;box-shadow:none;transform:none} .event-page-head-actions svg{width:14px;height:14px} .event-secondary-action{border:1px solid #ced8e5!important;background:#fff!important;color:#34506f!important} .event-secondary-action:hover{border-color:#aebed3!important;background:#f7f9fc!important;color:#285fc1!important} .event-new-button{min-height:36px!important;padding:0 12px!important;border:1px solid #3157df!important;border-radius:8px!important;background:#3157df!important;color:#fff!important;font-size:12px!important;font-weight:750!important;box-shadow:0 6px 14px rgba(49,87,223,.18)!important} .event-new-button:hover{background:#274bc4!important;border-color:#274bc4!important;transform:none!important;box-shadow:0 6px 14px rgba(49,87,223,.2)!important} .event-summary-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin-bottom:12px} .event-summary-grid>div{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:46px;padding:0 13px;border:1px solid #dce4ed;border-radius:10px;background:#fff;color:#52647c;font-size:11px;box-shadow:0 1px 2px rgba(31,48,76,.025)} .event-summary-grid span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .event-summary-grid strong{color:#21344f;font-size:14px;font-weight:800;white-space:nowrap} .event-summary-grid>div.active{border-color:#9bb5f0;background:#f2f6ff;color:#285fc1} .event-summary-grid>div.active strong{color:#285fc1;text-transform:capitalize} .event-calendar-card{overflow:hidden;border:1px solid #dce3ec!important;border-radius:12px!important;background:#fff!important;box-shadow:0 5px 18px rgba(31,48,76,.055)!important} .event-toolbar{min-height:62px!important;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 14px!important;border-bottom:1px solid #e3e9f1!important;background:linear-gradient(90deg,#fbfcff,#f7f9ff)!important} .event-toolbar-left,.event-toolbar-right{display:flex;align-items:center;gap:6px} .event-period-title{margin-left:5px;color:#21344f!important;font-size:12px!important;font-weight:800!important} .event-icon-button,.event-tool-button,.event-filter-form select{height:32px!important;min-height:32px!important;box-sizing:border-box;border:1px solid #cbd6e4!important;background:#fff!important;color:#34465e!important;font:inherit!important;font-size:11px!important;box-shadow:none!important} .event-icon-button,.event-tool-button{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:5px!important;border-radius:6px!important;padding:0 9px!important;text-decoration:none!important;font-weight:700!important} .event-icon-button{width:32px!important;padding:0!important} .event-icon-button:hover,.event-tool-button:hover{border-color:#b9c9df!important;background:#f5f8fd!important;color:#285fc1!important;transform:none!important} .event-icon-button svg,.event-tool-button svg{width:13px!important;height:13px!important} .event-filter-form{display:flex;align-items:center;gap:6px} .event-filter-form select{border-radius:6px!important;padding:0 26px 0 8px!important;outline:none!important} .event-filter-form select:focus{border-color:#9db4d5!important;box-shadow:0 0 0 3px rgba(49,87,223,.07)!important} .event-view-switch{display:flex!important;align-items:center!important;gap:3px!important;padding:3px!important;border:1px solid #d8e1ec!important;border-radius:7px!important;background:#fff!important} .event-view-switch a{min-height:26px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;padding:0 9px!important;border:0!important;border-radius:5px!important;background:transparent!important;color:#62738a!important;font-size:10.5px!important;font-weight:700!important;text-decoration:none!important} .event-view-switch a:hover{background:#f5f8fd!important;color:#285fc1!important} .event-view-switch a.active{border:0!important;background:#eaf1fb!important;color:#285fc1!important;box-shadow:none!important} .event-weekdays{display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr));border-bottom:1px solid #e4eaf1!important;background:#f8fafc!important} .event-weekdays strong{min-height:40px!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:0 8px!important;border-right:1px solid #e7ebf1!important;background:#f8fafc!important;color:#21314c!important;font-size:10.5px!important;font-weight:750!important;letter-spacing:0!important;text-transform:none!important} .event-weekdays strong:last-child{border-right:0!important} .event-calendar-grid{background:#fff!important} .event-day{min-height:132px;border-right:1px solid #e7ebf1!important;border-bottom:1px solid #e8edf3!important;background:#fff!important;transition:background .15s ease} .event-day:hover{background:#fbfcff!important} .event-day.outside{background:#fafbfc!important} .event-day.today{background:#f7faff!important} .event-day.today:before{height:2px!important;background:#3157df!important} .event-day-head{min-height:31px;padding:6px 8px!important} .event-day-number{color:#51647d!important;font-size:10.5px!important;font-weight:750!important} .event-day.today .event-day-number{width:23px;height:23px;display:grid;place-items:center;border-radius:6px;background:#3157df;color:#fff!important} .event-day-head>a{width:24px!important;height:24px!important;display:grid!important;place-items:center!important;border:1px solid #d7e0eb!important;border-radius:6px!important;background:#fff!important;color:#55729a!important;opacity:0;transition:opacity .15s ease,border-color .15s ease,background .15s ease} .event-day:hover .event-day-head>a,.event-day-head>a:focus{opacity:1} .event-day-head>a:hover{border-color:#b9c9df!important;background:#f5f8fd!important;color:#285fc1!important} .event-day-head>a svg{width:12px!important;height:12px!important} .event-day-items{padding:0 6px 7px!important} .event-pill{min-height:27px!important;margin-top:4px!important;padding:4px 6px!important;border:1px solid #dce4ed!important;border-radius:6px!important;background:#fff!important;color:#34465e!important;box-shadow:none!important} .event-pill:hover{border-color:#b9c9df!important;background:#f7f9fd!important;color:#285fc1!important;transform:none!important} .event-pill-dot{width:6px!important;height:6px!important;border-radius:50%!important} .event-pill-copy strong{font-size:9.5px!important;font-weight:750!important} .event-pill-copy small{margin-top:1px!important;color:#8a98aa!important;font-size:8.5px!important} .event-more{display:block;margin:5px 3px 0;color:#718096!important;font-size:9px!important;font-weight:700!important} .event-day-view{background:#fff!important} .event-day-summary{min-height:76px!important;padding:12px 14px!important;border-bottom:1px solid #e3e9f1!important;background:#fbfcff!important} .event-day-date{display:flex!important;align-items:center!important;gap:10px!important} .event-day-date>strong{width:42px;height:42px;display:grid;place-items:center;border:1px solid #d5dfec;border-radius:9px;background:#fff;color:#285fc1!important;font-size:17px!important} .event-day-date h2{margin:0!important;color:#21344f!important;font-size:15px!important} .event-day-date p{margin:3px 0 0!important;color:#7a899d!important;font-size:10.5px!important} .event-agenda{padding:8px 14px 14px!important} .event-agenda-item{min-height:58px!important;grid-template-columns:78px 8px minmax(0,1fr) 32px!important;gap:9px!important;padding:9px 6px!important;border-bottom:1px solid #e8edf3!important} .event-agenda-time{color:#65758b!important;font-size:10px!important;font-weight:700!important} .event-agenda-copy>a,.event-agenda-copy>strong{color:#1f4f95!important;font-size:11.5px!important;font-weight:800!important} .event-agenda-copy>div{margin-top:4px!important;gap:8px!important;color:#8a98aa!important;font-size:9.5px!important} .event-row-action{width:30px!important;height:30px!important;display:grid!important;place-items:center!important;border:1px solid #d4dfec!important;border-radius:7px!important;background:#fff!important;color:#55729a!important} .event-row-action:hover{background:#f5f8fd!important;color:#285fc1!important;border-color:#b9c9df!important} .event-row-action svg{width:13px!important;height:13px!important} .event-list-wrap{overflow-x:auto;background:#fff} .event-data-table{width:100%!important;min-width:1000px!important;border-collapse:collapse!important;font-size:12px!important} .event-data-table thead th{height:40px!important;padding:0 11px!important;border-bottom:1px solid #e4eaf1!important;background:#f8fafc!important;color:#21314c!important;text-align:left!important;font-size:10.5px!important;font-weight:750!important;letter-spacing:0!important;text-transform:none!important} .event-data-table thead th+th{border-left:1px solid #e7ebf1!important} .event-data-table tbody td{height:62px!important;padding:10px 11px!important;border-bottom:1px solid #e8edf3!important;background:#fff!important;color:#33465f!important;font-size:12px!important;vertical-align:middle!important} .event-data-table tbody tr:hover td{background:#fbfcff!important} .event-data-table td>strong{color:#21344f!important;font-weight:750!important} .event-data-table td>small{display:block;margin-top:2px;color:#8a98aa!important;font-size:9.5px!important} .event-list-title{display:flex;align-items:center;gap:9px} .event-list-color{width:28px!important;height:28px!important;flex:none;border-radius:8px!important} .event-list-title a{color:#1f4f95!important;font-weight:800!important;text-decoration:none!important} .event-list-title a:hover{color:#285fc1!important;text-decoration:underline!important} .event-list-title small{margin-top:2px!important;color:#8a98aa!important;font-size:9px!important} .event-type-badge,.event-label-badge{min-height:23px!important;display:inline-flex!important;align-items:center!important;padding:0 8px!important;border:1px solid #d7e0eb!important;border-radius:999px!important;background:#f7f9fc!important;color:#5a6b80!important;font-size:9.5px!important;font-weight:750!important} .event-label-badge{background:#f2f6ff!important;border-color:#d4e0f5!important;color:#41699d!important} .event-row-actions{display:flex;align-items:center;justify-content:flex-end;gap:5px} .event-row-actions a,.event-row-actions button{width:30px!important;height:30px!important;display:grid!important;place-items:center!important;padding:0!important;border:1px solid #d4dfec!important;border-radius:7px!important;background:#fff!important;color:#55729a!important;cursor:pointer!important} .event-row-actions a:hover,.event-row-actions button:hover{background:#f5f8fd!important;color:#285fc1!important;border-color:#b9c9df!important} .event-row-actions svg{width:13px!important;height:13px!important} .event-empty{padding:36px 18px!important;color:#77869b!important;text-align:center!important} .event-empty svg{width:22px!important;height:22px!important;margin-bottom:7px!important;color:#8ca0bb!important} .event-empty strong{display:block;color:#4d6079!important;font-size:12px!important}.event-empty span{display:block;margin-top:3px;font-size:10.5px!important} .event-card-footer{min-height:58px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;padding:0 14px!important;border-top:1px solid #e6ebf2!important;background:#fff!important;color:#718096!important;font-size:11px!important} .event-filter-summary{display:inline-flex!important;align-items:center!important;gap:5px!important;padding:5px 8px!important;border-radius:6px!important;background:#eef4ff!important;color:#41699d!important;font-weight:700!important} .event-filter-summary svg{width:12px!important;height:12px!important} .event-modal{background:rgba(26,39,60,.42)!important;backdrop-filter:blur(3px)!important} .event-modal-card{border:1px solid #dce4ed!important;border-radius:12px!important;background:#fff!important;box-shadow:0 24px 60px rgba(23,36,58,.22)!important} .event-modal-card>header{min-height:68px!important;padding:13px 16px!important;border-bottom:1px solid #e3e9f1!important;background:linear-gradient(90deg,#fbfcff,#f7f9ff)!important} .event-modal-card>header span{color:#5f6bd6!important;font-size:9px!important;font-weight:850!important;letter-spacing:.1em!important} .event-modal-card>header h2{margin:2px 0 0!important;color:#21344f!important;font-size:16px!important} .event-modal-card>header p{margin:3px 0 0!important;color:#8391a4!important;font-size:10px!important} .event-modal-card>header>button,.event-modal-close{width:30px!important;height:30px!important;border:1px solid #d4dfec!important;border-radius:7px!important;background:#fff!important;color:#55729a!important} .event-modal-card>header>button:hover,.event-modal-close:hover{background:#f5f8fd!important;color:#285fc1!important;border-color:#b9c9df!important} .event-form-fields{padding:18px 18px 3px!important;gap:12px 16px!important} .event-field{color:#3e5068!important;font-size:11px!important;font-weight:700!important} .event-field input,.event-field select,.event-field textarea{min-height:36px!important;padding:7px 9px!important;border:1px solid #cfd9e5!important;border-radius:7px!important;background:#fff!important;color:#30435c!important;font-size:11.5px!important;box-shadow:none!important} .event-field textarea{min-height:105px!important} .event-field input:focus,.event-field select:focus,.event-field textarea:focus{border-color:#9db4d5!important;box-shadow:0 0 0 3px rgba(49,87,223,.07)!important} .event-form-section{padding:14px 18px 16px!important;border-top:1px solid #e7ecf3!important} .event-section-heading strong{color:#3d4f68!important;font-size:11px!important}.event-section-heading small{font-size:9.5px!important} .event-toggle-row,.event-share-box{border:1px solid #dfe6ef!important;border-radius:8px!important;background:#fbfcfe!important} .event-attachments{padding:13px 18px!important;border-top:1px solid #e7ecf3!important}.event-upload{border:1px dashed #cbd7e5!important;border-radius:8px!important;background:#fbfcfe!important} .event-form-actions{display:flex!important;justify-content:space-between!important;gap:8px!important;padding:12px 18px!important;border-top:1px solid #e7ecf3!important;background:#fbfcff!important} .event-primary,.event-secondary,.event-danger{min-height:34px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;padding:0 11px!important;border-radius:7px!important;font-size:11px!important;font-weight:750!important;box-shadow:none!important;transform:none!important} .event-primary{border:1px solid #3157df!important;background:#3157df!important;color:#fff!important} .event-primary:hover{background:#274bc4!important;border-color:#274bc4!important;transform:none!important;box-shadow:none!important} .event-secondary{border:1px solid #cfd9e5!important;background:#fff!important;color:#51647d!important} .event-secondary:hover{background:#f7f9fc!important;color:#285fc1!important} .event-danger{border:1px solid #d6dfec!important;background:#fff!important;color:#55729a!important} .event-danger:hover{border-color:#b9c9df!important;background:#f5f8fd!important;color:#285fc1!important} @media(max-width:1050px){.event-summary-grid{grid-template-columns:repeat(3,1fr)}.event-toolbar{align-items:flex-start;flex-direction:column}.event-toolbar-right{width:100%;justify-content:space-between}} @media(max-width:760px){.event-page-head{align-items:flex-start;flex-direction:column}.event-page-head-actions{width:100%;justify-content:flex-start}.event-summary-grid{grid-template-columns:repeat(2,1fr)}.event-toolbar-right{align-items:stretch;flex-direction:column}.event-filter-form{width:100%}.event-filter-form select{flex:1}.event-view-switch{width:100%}.event-view-switch a{flex:1}.event-calendar-grid,.event-weekdays{min-width:900px}.event-calendar-card{overflow-x:auto}.event-day-view,.event-list-wrap,.event-card-footer{min-width:0}.event-form-actions{align-items:stretch;flex-direction:column-reverse}.event-form-actions>div{width:100%;display:flex}.event-form-actions .event-primary,.event-form-actions .event-secondary,.event-form-actions .event-danger{flex:1}} @media(max-width:500px){.event-summary-grid{grid-template-columns:1fr}.event-page-head-actions>a,.event-page-head-actions>button{flex:1}.event-toolbar-left{flex-wrap:wrap}.event-period-title{width:100%;order:-1;margin:0 0 3px}.event-filter-form{flex-direction:column}.event-filter-form select{width:100%}} /* ============================================================ SECTION: files.css ============================================================ */ /* Files โ€” Invoice design system */ .file-invoice-page{max-width:1600px;margin:0 auto;color:#263954} .file-invoice-heading{display:flex;align-items:center;justify-content:space-between;gap:22px;margin:0 0 14px;padding:18px 20px;border:1px solid #dce4ef;border-radius:14px;background:linear-gradient(120deg,#fff 62%,#f5f8ff 100%);box-shadow:0 6px 20px rgba(31,48,76,.055)} .file-invoice-eyebrow{display:block;margin-bottom:4px;color:#5f6bd6;font-size:10px;font-weight:850;letter-spacing:.1em;text-transform:uppercase}.file-invoice-heading h1{margin:0;font-size:24px;letter-spacing:-.025em;color:#18263b}.file-invoice-heading p{margin:5px 0 0;color:#76859a;font-size:12px} .file-invoice-heading-actions{display:flex;align-items:center;gap:8px}.file-invoice-heading-actions button{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border:1px solid #ced8e5;border-radius:8px;text-decoration:none;font:inherit;font-size:12px;font-weight:750;cursor:pointer}.file-invoice-heading-actions svg{width:14px;height:14px}.file-invoice-secondary-action{background:#fff;color:#34506f}.file-invoice-primary-action{background:#3157df;color:#fff!important;border-color:#3157df!important;box-shadow:0 6px 14px rgba(49,87,223,.18)} .file-invoice-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:12px}.file-invoice-summary article{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:46px;padding:0 13px;border:1px solid #dce4ed;border-radius:10px;background:#fff;color:#52647c;font-size:11px}.file-invoice-summary article strong{font-size:14px;color:#21344f}.file-invoice-summary article.active{border-color:#9bb5f0;background:#f2f6ff;color:#285fc1}.file-invoice-summary article.active strong{color:#285fc1} .file-invoice-card{background:#fff;border:1px solid #dce3ec;border-radius:12px;box-shadow:0 5px 18px rgba(31,48,76,.055);overflow:hidden}.file-invoice-toolbar{min-height:62px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 14px;background:linear-gradient(90deg,#fbfcff,#f7f9ff);border-bottom:1px solid #e3e9f1}.file-invoice-toolbar-left,.file-invoice-search{display:flex;align-items:center}.file-invoice-toolbar-left>a,.file-invoice-toolbar-left>button,.file-invoice-search button,.file-invoice-search input{height:32px;box-sizing:border-box;border:1px solid #cbd6e4;background:#fff;color:#34465e;font:inherit;font-size:11px}.file-invoice-toolbar-left>a,.file-invoice-toolbar-left>button{display:inline-flex;align-items:center;gap:5px;padding:0 9px;border-left:0;text-decoration:none;cursor:pointer}.file-invoice-toolbar-left>*:first-child{border-left:1px solid #cbd6e4;border-radius:6px 0 0 6px}.file-invoice-toolbar-left>*:last-child{border-radius:0 6px 6px 0}.file-invoice-toolbar-left svg,.file-invoice-search svg{width:13px;height:13px}.file-invoice-home.active{background:#eef4ff!important;color:#285fc1!important}.file-invoice-search button{width:38px;border-radius:6px 0 0 6px}.file-invoice-search input{width:230px;border-left:0;border-radius:0 6px 6px 0;padding:0 10px;outline:0} .file-invoice-workspace{display:grid;grid-template-columns:190px minmax(0,1fr) 260px;min-height:510px}.file-invoice-sidebar{padding:14px 10px;border-right:1px solid #e7ebf1;background:#fbfcfe}.file-invoice-side-title{padding:0 8px 7px;color:#8795a7;font-size:9px;font-weight:850;letter-spacing:.08em;text-transform:uppercase}.file-invoice-side-title.favorites{margin-top:16px}.file-invoice-sidebar>a{display:flex;align-items:center;gap:8px;min-height:34px;padding:0 9px;border-radius:6px;color:#52647c;text-decoration:none;font-size:11px;font-weight:650}.file-invoice-sidebar>a:hover,.file-invoice-sidebar>a.active{background:#eef4ff;color:#285fc1}.file-invoice-sidebar svg{width:13px;height:13px}.file-invoice-muted{display:block;padding:6px 9px;color:#9aa6b5;font-size:10px} .file-invoice-main{min-width:0}.file-invoice-location{min-height:58px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 12px;border-bottom:1px solid #e6ebf2;background:#fff}.file-invoice-location-copy{display:flex;align-items:center;gap:9px}.file-invoice-location-icon{width:32px;height:32px;display:grid;place-items:center;border-radius:9px;background:#eef3ff;color:#4965d7}.file-invoice-location-icon svg{width:15px;height:15px}.file-invoice-location-copy strong{display:block;color:#263850;font-size:12px}.file-invoice-location-copy small{display:block;margin-top:2px;color:#8a98aa;font-size:9px}.file-invoice-breadcrumb{display:flex;align-items:center;gap:4px;flex-wrap:wrap;color:#8290a2;font-size:9.5px}.file-invoice-breadcrumb a{color:#55729a;text-decoration:none}.file-invoice-breadcrumb a:hover{color:#1d4ed8;text-decoration:underline}.file-invoice-breadcrumb svg{width:10px;height:10px} .file-invoice-table-wrap{overflow-x:auto}.file-invoice-table-head,.file-invoice-row{display:grid;grid-template-columns:minmax(250px,1.45fr) minmax(120px,.65fr) minmax(160px,.8fr) 92px;align-items:center}.file-invoice-table-head{min-width:720px;min-height:40px;background:#f8fafc;color:#21314c;font-size:10.5px;font-weight:750;border-bottom:1px solid #e4eaf1}.file-invoice-table-head>span{height:40px;display:flex;align-items:center;padding:0 11px}.file-invoice-table-head>span+span{border-left:1px solid #e7ebf1}.file-invoice-row{min-width:720px;min-height:62px;border-bottom:1px solid #e8edf3;color:#33465f;font-size:11px}.file-invoice-row:hover{background:#fbfcff}.file-invoice-row>*{padding:9px 11px;box-sizing:border-box}.file-invoice-name{display:flex;align-items:center;gap:9px;min-width:0;border:0;background:transparent;color:inherit;text-decoration:none;text-align:left;font:inherit;cursor:pointer}.file-invoice-name>span:last-child{min-width:0}.file-invoice-name strong{display:block;max-width:320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#1f4f95;font-weight:800}.file-invoice-name small{display:block;margin-top:2px;color:#8a98aa;font-size:9px}.file-invoice-file-icon{width:32px;height:32px;flex:none;display:grid;place-items:center;border-radius:9px;background:#eef3ff;color:#4965d7}.file-invoice-file-icon.folder{background:#fff7e8;color:#c98a17}.file-invoice-file-icon svg{width:15px;height:15px}.file-invoice-thumb{width:32px;height:32px;flex:none;object-fit:cover;border:1px solid #e0e7ef;border-radius:9px;background:#f8fafc}.file-invoice-type{display:flex;flex-direction:column;gap:2px;color:#64758b}.file-invoice-type b{font-size:9.5px;color:#40536c}.file-invoice-type small{font-size:9px;color:#8c99a9}.file-invoice-linked{color:#66778b}.file-invoice-linked em{display:inline-flex;align-items:center;min-height:23px;padding:0 8px;border:1px solid #d7e0eb;border-radius:999px;background:#f2f6ff;color:#315fc5;font-size:9.5px;font-style:normal;font-weight:700}.file-invoice-options{display:flex;align-items:center;justify-content:flex-end;gap:5px}.file-invoice-options a,.file-invoice-options button{width:30px;height:30px;display:grid;place-items:center;border:1px solid #d4dfec;border-radius:7px;background:#fff;color:#55729a;cursor:pointer}.file-invoice-options svg{width:13px;height:13px}.file-invoice-options a:hover,.file-invoice-options button:hover{background:#f5f8fd;color:#285fc1;border-color:#b9c9df}.file-invoice-empty{grid-column:1/-1;min-height:220px;display:flex;align-items:center;justify-content:center;flex-direction:column;color:#8795a7}.file-invoice-empty svg{width:28px;height:28px;margin-bottom:8px}.file-invoice-empty strong{color:#51647d;font-size:12px}.file-invoice-empty span{margin-top:3px;font-size:10px} .file-invoice-detail{border-left:1px solid #e7ebf1;background:#fbfcfe}.file-invoice-detail>header{min-height:54px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;border-bottom:1px solid #e7ebf1;background:#fff}.file-invoice-detail>header>div{display:flex;align-items:center;gap:7px;color:#33465f}.file-invoice-detail>header svg{width:14px;height:14px}.file-invoice-detail>header strong{font-size:11px}.file-invoice-detail>header button{width:28px;height:28px;display:grid;place-items:center;border:1px solid #d8e2ed;border-radius:7px;background:#fff;color:#65768b;cursor:pointer}.file-invoice-detail-empty,.file-invoice-detail-card{min-height:380px;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:18px;text-align:center;color:#8b98a8}.file-invoice-detail-empty>span,.file-invoice-detail-icon{width:46px;height:46px;display:grid;place-items:center;border-radius:12px;background:#eef3ff;color:#4965d7}.file-invoice-detail-empty>span svg,.file-invoice-detail-icon svg{width:20px;height:20px}.file-invoice-detail-empty strong{margin-top:11px;color:#53647a;font-size:11px}.file-invoice-detail-empty p{max-width:175px;margin:5px 0 0;font-size:9.5px;line-height:1.5}.file-invoice-detail-card h3{max-width:210px;margin:11px 0 5px;color:#263b55;font-size:13px;overflow-wrap:anywhere}.file-invoice-detail-type{color:#8290a2;font-size:9px}.file-invoice-detail-card dl{width:100%;margin:16px 0 0;border-top:1px solid #e7ebf1}.file-invoice-detail-card dl>div{display:flex;justify-content:space-between;gap:10px;padding:9px 2px;border-bottom:1px solid #edf1f5;text-align:left;font-size:9.5px}.file-invoice-detail-card dt{color:#7f8d9f}.file-invoice-detail-card dd{margin:0;color:#40536b;font-weight:700;text-align:right}.file-invoice-detail-actions{display:flex;gap:6px;margin-top:16px}.file-invoice-detail-actions a,.file-invoice-detail-actions button{height:32px;display:inline-flex;align-items:center;gap:5px;padding:0 9px;border:1px solid #cfd9e5;border-radius:7px;background:#fff;color:#55729a;text-decoration:none;font:inherit;font-size:10px;font-weight:700;cursor:pointer}.file-invoice-detail-actions a{background:#3157df;border-color:#3157df;color:#fff}.file-invoice-detail-actions form{margin:0}.file-invoice-detail-actions button:hover{background:#fff3f3;border-color:#efcaca;color:#bb3d48}.file-invoice-detail-actions svg{width:12px;height:12px} .file-invoice-footer{min-height:58px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 14px;border-top:1px solid #e8edf3;color:#718096;font-size:11px}.file-invoice-footer>div{display:flex;align-items:center;gap:10px}.file-invoice-footer b{display:grid;place-items:center;min-width:30px;height:30px;border-radius:7px;background:#eaf0f8;color:#25405f} .file-modal{position:fixed;z-index:1100;inset:0;display:none;place-items:center;background:#0f172a80}.file-modal.open{display:grid}.file-modal>div{width:min(520px,calc(100vw - 30px));background:#fff;border:1px solid #dce4ef;border-radius:12px;box-shadow:0 22px 65px rgba(15,23,42,.24);overflow:hidden}.file-modal header,.file-modal footer{min-height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid #e3e9f1;background:linear-gradient(90deg,#fbfcff,#f7f9ff)}.file-modal header>div{display:flex;align-items:center;gap:9px}.file-modal header>div>span{width:30px;height:30px;display:grid;place-items:center;border-radius:8px;background:#eef3ff;color:#4965d7}.file-modal h2{margin:0;color:#263850;font-size:14px}.file-modal header button{width:30px;height:30px;display:grid;place-items:center;border:1px solid #d8e2ed;border-radius:7px;background:#fff;color:#65768b}.file-modal footer{justify-content:flex-end;gap:7px;border-top:1px solid #e3e9f1;border-bottom:0;background:#fbfcff}.file-modal footer button{height:32px;padding:0 10px;border:1px solid #cfd9e5;border-radius:7px;background:#fff;color:#52647c;font:inherit;font-size:10px;font-weight:700}.file-modal form>label:not(.file-drop){display:grid;gap:6px;margin:18px;font-size:11px;font-weight:700;color:#53647a}.file-modal input{height:35px;border:1px solid #cfd9e5;border-radius:7px;padding:0 9px;font:inherit}.file-drop{position:relative;margin:18px;min-height:150px;display:flex;align-items:center;justify-content:center;flex-direction:column;border:1px dashed #bdcadd;border-radius:10px;background:#fbfcff;color:#718096}.file-drop svg{width:28px;height:28px;margin-bottom:7px;color:#4965d7}.file-drop strong{color:#40536b;font-size:11px}.file-drop small{margin-top:4px;color:#93a0af;font-size:9px}.file-drop input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.file-primary{background:#3157df!important;border-color:#3157df!important;color:#fff!important} @media(max-width:1050px){.file-invoice-workspace{grid-template-columns:175px minmax(0,1fr)}.file-invoice-detail{display:none}.file-invoice-heading{align-items:flex-start;flex-direction:column}.file-invoice-summary{grid-template-columns:repeat(2,1fr)}} @media(max-width:700px){.file-invoice-toolbar{align-items:flex-start;flex-direction:column}.file-invoice-search{width:100%}.file-invoice-search input{width:100%}.file-invoice-workspace{grid-template-columns:1fr}.file-invoice-sidebar{display:none}.file-invoice-heading-actions{width:100%;flex-wrap:wrap}.file-invoice-summary{grid-template-columns:1fr 1fr}.file-invoice-location{align-items:flex-start;flex-direction:column}.file-invoice-footer{padding:12px 14px;flex-wrap:wrap}} /* ============================================================ SECTION: help.css ============================================================ */ .wiki-page{max-width:1020px;margin:20px auto 0;color:#31455b}.wiki-top-actions{display:flex;gap:8px;margin-bottom:28px}.wiki-pill{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 10px;border:1px solid #dfe5ec;border-radius:18px;background:#fff;color:#4a5f74;font:inherit;font-size:13px;cursor:pointer}.wiki-pill svg{width:14px}.wiki-pill.active{background:#f8fafc}.wiki-page>h1{text-align:center;margin:0 0 15px;font-size:27px;font-weight:400}.wiki-search{max-width:510px;height:44px;margin:0 auto 50px;display:flex;align-items:center;border:1px solid #dfe5eb;border-radius:5px;background:#fff}.wiki-search svg{width:17px;margin-left:12px;color:#9ba7b3}.wiki-search input{flex:1;border:0;outline:0;padding:0 10px;font:inherit}.wiki-search.compact{margin:0 0 20px}.wiki-categories{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.wiki-categories>a{display:block;padding:23px 25px;border:1px solid #e1e6ec;border-radius:5px;background:#fff;text-align:center;text-decoration:none;color:#30465b}.wiki-categories h2{margin:0 0 8px;font-size:17px;font-weight:500}.wiki-categories p{min-height:20px;margin:0 0 10px;color:#9aa6b3;font-size:13px}.wiki-categories strong{color:#2469b3;font-size:12px}.wiki-results{max-width:760px;margin:0 auto}.wiki-results h2{font-size:17px}.wiki-results>a{display:block;padding:14px 0;border-bottom:1px solid #e7ebef;text-decoration:none}.wiki-results strong,.wiki-results small{display:block}.wiki-results strong{color:#2d67a7}.wiki-results small{margin-top:4px;color:#95a2af}.wiki-modal{position:fixed;z-index:1100;inset:0;display:none;align-items:center;justify-content:center;padding:18px;background:#0f172a80}.wiki-modal.is-open{display:flex}.wiki-modal-card{width:min(650px,calc(100vw - 30px));background:#fff;border-radius:7px;box-shadow:0 20px 60px #0f172a55}.wiki-modal-card>header{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;border-bottom:1px solid #e5eaf0}.wiki-modal-card>header h2{margin:0;font-size:17px;font-weight:500}.wiki-modal-card>header button{border:0;background:none;cursor:pointer;color:#7a8795}.wiki-modal-card svg{width:18px}.wiki-form{padding:18px 20px}.wiki-form label{display:grid;gap:6px;margin-bottom:14px;color:#526579;font-size:13px}.wiki-form input,.wiki-form select,.wiki-form textarea{box-sizing:border-box;width:100%;padding:9px 10px;border:1px solid #dce3ea;border-radius:5px;background:#f9fafb;font:inherit}.wiki-form textarea{min-height:180px;resize:vertical}.wiki-modal-card footer{display:flex;justify-content:flex-end;gap:8px;padding:12px 20px;border-top:1px solid #e7ebf0}.wiki-primary,.wiki-secondary{min-height:34px;padding:0 12px;border:1px solid #dce3ea;border-radius:5px;background:#fff;cursor:pointer}.wiki-primary{background:#5d8ef0;border-color:#5d8ef0;color:#fff}.wiki-article-list,.wiki-article{max-width:900px;margin:10px auto}.wiki-back{display:inline-block;margin-bottom:12px;color:#2d70b3;text-decoration:none}.wiki-article-list>header,.wiki-article-card{background:#fff;border:1px solid #e2e7ed;border-radius:6px;padding:22px}.wiki-article-list>header{margin-bottom:14px}.wiki-article-list h1,.wiki-article-card h1{margin:0 0 8px;font-weight:400}.wiki-article-list p{margin:0;color:#8795a4}.wiki-list{background:#fff;border:1px solid #e2e7ed;border-radius:6px;overflow:hidden}.wiki-list>a{display:flex;align-items:center;gap:12px;padding:15px 17px;border-bottom:1px solid #edf1f4;color:#2f455a;text-decoration:none}.wiki-list>a:last-child{border-bottom:0}.wiki-list>a>svg{width:17px;color:#7b8da1}.wiki-list span{flex:1}.wiki-list strong,.wiki-list small{display:block}.wiki-list small{margin-top:4px;color:#8f9ba8}.wiki-article-card{padding:28px}.wiki-article-category{display:inline-block;margin-bottom:10px;padding:4px 8px;border-radius:99px;background:#eef4fb;color:#3b6f9f;font-size:11px}.wiki-article-card h1{font-size:30px}.wiki-article-meta{color:#97a3af;font-size:12px}.wiki-article-card>div{margin-top:22px;line-height:1.75;color:#405368}@media(max-width:800px){.wiki-categories{grid-template-columns:1fr}.wiki-page{margin-top:5px}.wiki-top-actions{flex-wrap:wrap}.wiki-search{margin-bottom:25px}} /* ========================================================== Knowledge Base admin โ€” reference layout, NEXT CRM styling ========================================================== */ .kb-admin-page,.kb-form-page{max-width:1540px;margin:0 auto}.kb-page-head,.kb-form-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:18px}.kb-eyebrow{display:block;margin-bottom:5px;color:#6d63e8;font-size:10px;font-weight:850;letter-spacing:.14em;text-transform:uppercase}.kb-page-head h1,.kb-form-heading h1{margin:0;color:#17233a;font-size:29px;line-height:1.15;font-weight:820;letter-spacing:-.75px}.kb-page-head p,.kb-form-heading p{margin:6px 0 0;color:#748399;font-size:13px}.kb-head-links{display:flex;align-items:center;gap:10px;margin-top:7px;color:#8593a7;font-size:11.5px}.kb-head-links button{border:0;padding:0;background:transparent;color:#315fc5;font:inherit;font-size:12px;font-weight:800;cursor:pointer}.kb-head-links button:hover{color:#1d4ed8}.kb-new-button{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 15px;border-radius:10px;background:linear-gradient(135deg,#4338ca,#2563eb);color:#fff!important;font-size:12px;font-weight:800;text-decoration:none;box-shadow:0 9px 20px rgba(37,99,235,.22)}.kb-new-button:hover{transform:translateY(-1px);box-shadow:0 12px 24px rgba(37,99,235,.28)}.kb-new-button svg{width:16px;height:16px} .kb-table-card{overflow:hidden;border:1px solid #e1e7f0;border-radius:16px;background:#fff;box-shadow:0 10px 30px rgba(31,46,75,.07)}.kb-table-toolbar{min-height:66px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 16px;border-bottom:1px solid #e7ecf3;background:linear-gradient(100deg,#fff 0%,#f8fbff 52%,#f7f4ff 100%)}.kb-table-left{display:flex;align-items:center;gap:7px}.kb-page-size select,.kb-tool-button,.kb-icon-button,.kb-table-search input,.kb-table-search span{height:36px;border:1px solid #ccd7e6;background:#fff;color:#3d4d64;font:inherit}.kb-page-size select{min-width:72px;padding:0 29px 0 11px;border-radius:9px}.kb-tool-button,.kb-icon-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:9px;padding:0 11px;font-size:11.5px;font-weight:750;text-decoration:none}.kb-tool-button:hover,.kb-icon-button:hover{border-color:#aac3eb;background:#eff5ff;color:#1d4ed8}.kb-tool-button svg,.kb-icon-button svg{width:14px;height:14px}.kb-icon-button{width:36px;padding:0}.kb-table-search{display:flex;height:36px}.kb-table-search span{width:39px;display:grid;place-items:center;border-radius:9px 0 0 9px;border-right:0;color:#718198}.kb-table-search span svg{width:15px;height:15px}.kb-table-search input{width:min(280px,28vw);min-height:36px!important;padding:0 11px;border-radius:0 9px 9px 0;outline:0}.kb-table-search input:focus{border-color:#8eb0eb!important;box-shadow:0 0 0 3px rgba(37,99,235,.08)!important} .kb-table-scroll{overflow:auto}.kb-data-table{width:100%;min-width:920px;border-collapse:separate;border-spacing:0;background:#fff}.kb-data-table thead th{height:43px;padding:10px 14px;background:linear-gradient(90deg,#eef4ff,#f6f4ff)!important;border-bottom:1px solid #dfe7f2!important;color:#3d4f68!important;font-size:10.5px!important;font-weight:850!important;letter-spacing:.055em!important;text-transform:uppercase!important}.kb-data-table tbody td{padding:11px 14px!important;border-bottom:1px solid #edf1f5!important;background:#fff;color:#34445b;font-size:12.5px!important;vertical-align:middle}.kb-data-table tbody tr:hover td{background:#f8fbff!important}.kb-data-table th:nth-child(1){width:48%}.kb-options-col{width:125px}.kb-article-cell{display:flex;align-items:center;gap:11px;min-width:0}.kb-article-icon{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:10px;background:linear-gradient(135deg,#eef2ff,#e8f8ff);color:#4f63db}.kb-article-icon svg{width:15px}.kb-article-cell>div{min-width:0}.kb-article-cell>div>a{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#203f72!important;font-weight:750!important}.kb-row-inline-actions{display:flex;align-items:center;gap:5px;margin-top:3px;color:#a1abba;font-size:10px}.kb-row-inline-actions a,.kb-row-inline-actions button{border:0;padding:0;background:transparent;color:#55729a;font:inherit;font-size:10px;cursor:pointer}.kb-row-inline-actions a:hover,.kb-row-inline-actions button:hover{color:#1d4ed8}.kb-row-inline-actions form{display:inline}.kb-group-badge,.kb-status{display:inline-flex;align-items:center;min-height:24px;padding:3px 8px;border-radius:999px;font-size:10.5px;font-weight:800}.kb-group-badge{background:#eef4ff;color:#315fc5}.kb-status.published{background:#e8fbf4;color:#07855f}.kb-status.draft{background:#fff4e5;color:#b65f00}.kb-row-actions{display:flex;align-items:center;gap:6px}.kb-row-actions form{margin:0}.kb-row-actions a,.kb-row-actions button{width:32px;height:32px;display:grid;place-items:center;padding:0;border:1px solid #dbe4ef;border-radius:8px;background:#fff;color:#43638f;cursor:pointer}.kb-row-actions a:hover{border-color:#abc6ef;background:#eef5ff;color:#1d4ed8}.kb-row-actions button.danger:hover{border-color:#fecaca;background:#fff1f2;color:#dc2626}.kb-row-actions svg{width:14px}.kb-empty{text-align:center!important;padding:48px 18px!important;color:#8794a7!important}.kb-empty svg{width:25px;height:25px;margin-bottom:8px}.kb-empty strong,.kb-empty span{display:block}.kb-empty strong{color:#516176}.kb-empty span{margin-top:3px;font-size:11px}.kb-table-footer{min-height:62px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 16px;border-top:1px solid #e5eaf1;background:#fbfcff;color:#748196;font-size:11.5px}.kb-pagination{display:flex;align-items:center;gap:5px}.kb-pagination a,.kb-pagination span{min-width:34px;height:34px;display:grid;place-items:center;padding:0 9px;border:1px solid transparent;border-radius:9px;color:#5c6d83;text-decoration:none;font-weight:700}.kb-pagination a:hover{border-color:#c9d8eb;background:#eef5ff;color:#1d4ed8}.kb-pagination a.current{border-color:#dbe4ef;background:#eaf1fb;color:#1f3554}.kb-pagination span.disabled{color:#aab4c1} .kb-form-page{max-width:980px}.kb-form-heading>div{display:flex;flex-direction:column;align-items:flex-start}.kb-form-heading a{order:-1;display:inline-flex;align-items:center;gap:6px;margin-bottom:12px;color:#315fc5;font-size:12px;font-weight:750;text-decoration:none}.kb-form-heading a svg{width:14px}.kb-form-card{overflow:hidden;border:1px solid #e1e7f0;border-radius:17px;background:#fff;box-shadow:0 14px 38px rgba(31,46,75,.08);position:relative}.kb-form-card:before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,#7c3aed,#2563eb,#06b6d4)}.kb-form-fields{padding:23px 24px 4px}.kb-field{display:block;margin-bottom:18px}.kb-field>span{display:block;margin-bottom:8px;color:#32445f;font-size:12px;font-weight:800}.kb-field>span em{color:#e11d48;font-style:normal}.kb-field>input,.kb-field select{width:100%;height:42px;min-height:42px!important;padding:0 12px;border:1px solid #cbd7e5;border-radius:10px;background:#fff;color:#24364f;outline:0}.kb-field>input:focus,.kb-field select:focus{border-color:#84a9eb!important;box-shadow:0 0 0 4px rgba(37,99,235,.08)!important}.kb-field-error{display:block;margin-top:6px;color:#c0263f;font-size:11px}.kb-group-select-row{display:grid;grid-template-columns:minmax(0,1fr) 42px}.kb-group-select-row select{border-radius:10px 0 0 10px}.kb-group-select-row button{border:1px solid #cbd7e5;border-left:0;border-radius:0 10px 10px 0;background:#fff;color:#315fc5;cursor:pointer}.kb-group-select-row button:hover{background:#eef5ff}.kb-group-select-row button svg{width:16px}.kb-check-field{display:grid;grid-template-columns:18px 1fr;gap:3px 8px;align-items:center;margin:2px 0 18px;color:#34455e;font-size:12px;font-weight:700}.kb-check-field input{width:16px;height:16px;accent-color:#2563eb}.kb-check-field small{grid-column:2;color:#8996a8;font-size:10.5px;font-weight:500}.kb-editor-shell{overflow:hidden;border:1px solid #cfd9e6;border-radius:11px;background:#fff;box-shadow:0 1px 2px rgba(15,23,42,.025)}.kb-editor-menu{display:flex;align-items:center;gap:19px;min-height:38px;padding:0 14px;border-bottom:1px solid #e5eaf1;background:#fff;color:#45556d;font-size:11.5px}.kb-editor-toolbar{display:flex;align-items:center;gap:6px;min-height:46px;padding:7px 10px;border-bottom:1px solid #e5eaf1;background:linear-gradient(#fbfcfe,#f8fafc)}.kb-editor-toolbar select{height:32px;min-height:32px!important;border:1px solid #e0e6ef!important;border-radius:7px!important;background:#fff!important;color:#627187!important;padding:0 28px 0 9px!important;font-size:11px!important}.kb-editor-toolbar button{width:31px;height:31px;display:grid;place-items:center;border:1px solid transparent;border-radius:7px;background:transparent;color:#56667c}.kb-editor-toolbar button svg{width:14px}.kb-editor-toolbar button:disabled,.kb-editor-toolbar select:disabled{opacity:.68}.kb-editor-spacer{flex:1}.kb-editor-shell textarea{display:block;width:100%;min-height:310px!important;padding:17px 16px;border:0!important;border-radius:0!important;resize:vertical;background:#fff!important;color:#2c3e57;line-height:1.65;box-shadow:none!important;outline:0!important}.kb-editor-footer{min-height:37px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 12px;border-top:1px solid #e7ecf3;background:#fbfcfe;color:#8895a7;font-size:10px}.kb-editor-footer strong{color:#617086}.kb-form-actions{display:flex;justify-content:flex-end;gap:8px;padding:15px 24px;border-top:1px solid #e7ecf3;background:linear-gradient(90deg,#fbfcff,#f7f5ff)}.kb-form-actions a,.kb-form-actions button{min-height:39px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 14px;border-radius:9px;font-size:12px;font-weight:800}.kb-form-actions a{border:1px solid #cfdae8;background:#fff;color:#53647a;text-decoration:none}.kb-form-actions button{border:0;background:linear-gradient(135deg,#4338ca,#2563eb);color:#fff;box-shadow:0 8px 18px rgba(37,99,235,.2);cursor:pointer}.kb-form-actions button:hover{transform:translateY(-1px);box-shadow:0 11px 22px rgba(37,99,235,.26)}.kb-form-actions svg{width:15px} .kb-modal{position:fixed;z-index:1200;inset:0;display:none;place-items:center;padding:18px;background:rgba(15,23,42,.5);backdrop-filter:blur(4px)}.kb-modal.is-open{display:grid}.kb-modal-card{width:min(620px,calc(100vw - 30px));max-height:calc(100vh - 40px);overflow:auto;border:1px solid rgba(255,255,255,.72);border-radius:17px;background:#fff;box-shadow:0 26px 70px rgba(15,23,42,.24)}.kb-modal-card.compact{width:min(540px,calc(100vw - 30px))}.kb-modal-card>header{display:flex;align-items:center;justify-content:space-between;padding:17px 19px;border-bottom:1px solid #e7ecf3;background:linear-gradient(100deg,#f8fbff,#f7f4ff)}.kb-modal-card>header span{display:block;color:#6d63e8;font-size:9.5px;font-weight:850;text-transform:uppercase;letter-spacing:.12em}.kb-modal-card>header h2{margin:2px 0 0;color:#20314a;font-size:17px}.kb-modal-card>header button{width:32px;height:32px;display:grid;place-items:center;border:1px solid #dbe4ef;border-radius:9px;background:#fff;color:#64748b;cursor:pointer}.kb-modal-card>header button svg{width:15px}.kb-group-list{padding:8px 14px}.kb-group-list>a{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding:11px 7px;border-bottom:1px solid #edf1f5;color:#34455e;text-decoration:none}.kb-group-list>a:last-child{border-bottom:0}.kb-group-list strong,.kb-group-list small{display:block}.kb-group-list small{margin-top:2px;color:#8996a8;font-size:10.5px}.kb-group-list b{min-width:28px;height:25px;display:grid;place-items:center;border-radius:999px;background:#eef4ff;color:#315fc5;font-size:10px}.kb-group-add{display:grid;grid-template-columns:1fr 1fr auto;gap:9px;align-items:end;padding:15px 18px;border-top:1px solid #e7ecf3;background:#fbfcff}.kb-group-add.single{grid-template-columns:1fr}.kb-group-add label{color:#42536b;font-size:11px;font-weight:750}.kb-group-add input{display:block;width:100%;height:38px;margin-top:5px;padding:0 10px;border:1px solid #cbd7e5;border-radius:9px;background:#fff}.kb-group-add button{height:38px;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 12px;border:0;border-radius:9px;background:#2563eb;color:#fff;font-weight:800;cursor:pointer}.kb-group-add button svg{width:14px} @media(max-width:760px){.kb-page-head{align-items:flex-start;flex-direction:column}.kb-table-toolbar{align-items:stretch;flex-direction:column}.kb-table-search,.kb-table-search input{width:100%}.kb-table-footer{align-items:flex-start;flex-direction:column}.kb-pagination{width:100%;justify-content:flex-end}.kb-editor-menu{gap:11px;overflow:auto}.kb-editor-toolbar{flex-wrap:wrap}.kb-group-add{grid-template-columns:1fr}.kb-head-links{align-items:flex-start;flex-direction:column}} /* Knowledge Base category management */ .kb-head-links a{display:inline-flex;align-items:center;gap:5px;border:0;padding:0;background:transparent;color:#315fc5;font-size:12px;font-weight:800;text-decoration:none}.kb-head-links a:hover{color:#1d4ed8}.kb-head-links a svg{width:13px;height:13px}.kb-category-page{max-width:1320px;margin:0 auto}.kb-category-layout{display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr);gap:18px;align-items:start}.kb-category-create-card,.kb-category-list-card{border:1px solid #e1e7f0;border-radius:17px;background:#fff;box-shadow:0 12px 34px rgba(31,46,75,.07);overflow:hidden}.kb-category-create-card{position:sticky;top:88px;padding:22px}.kb-category-create-card:before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,#7c3aed,#2563eb,#06b6d4)}.kb-category-card-head{display:flex;align-items:center;gap:11px;margin-bottom:20px}.kb-category-card-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(135deg,#eef2ff,#e7f8ff);color:#4f63db}.kb-category-card-icon svg{width:17px}.kb-category-card-head strong,.kb-category-card-head small{display:block}.kb-category-card-head strong{color:#20314a;font-size:14px}.kb-category-card-head small{margin-top:2px;color:#8996a8;font-size:10.5px}.kb-category-create-button{width:100%;min-height:40px;display:flex;align-items:center;justify-content:center;gap:7px;border:0;border-radius:10px;background:linear-gradient(135deg,#4338ca,#2563eb);color:#fff;font-weight:800;cursor:pointer;box-shadow:0 8px 18px rgba(37,99,235,.2)}.kb-category-create-button:hover{transform:translateY(-1px);box-shadow:0 11px 22px rgba(37,99,235,.26)}.kb-category-create-button svg{width:15px}.kb-category-list-head{padding:17px 18px;border-bottom:1px solid #e7ecf3;background:linear-gradient(100deg,#fff,#f8fbff 55%,#f7f4ff)}.kb-category-list-head strong,.kb-category-list-head small{display:block}.kb-category-list-head strong{color:#20314a;font-size:14px}.kb-category-list-head small{margin-top:2px;color:#8996a8;font-size:10.5px}.kb-category-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:stretch;border-bottom:1px solid #edf1f5}.kb-category-row:last-child{border-bottom:0}.kb-category-edit-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 10px 12px 15px}.kb-category-row-main{display:flex;align-items:center;gap:11px;min-width:0}.kb-category-folder{width:36px;height:36px;flex:none;display:grid;place-items:center;border-radius:10px;background:#eef4ff;color:#315fc5}.kb-category-folder svg{width:15px}.kb-category-inputs{display:grid;grid-template-columns:minmax(150px,.75fr) minmax(180px,1.25fr);gap:8px;min-width:0;flex:1}.kb-category-inputs input{width:100%;height:36px;min-height:36px!important;padding:0 10px;border:1px solid transparent!important;border-radius:8px!important;background:transparent!important;color:#34455e;box-shadow:none!important}.kb-category-inputs input:first-child{font-weight:800;color:#203f72}.kb-category-inputs input:hover,.kb-category-inputs input:focus{border-color:#cfdbea!important;background:#fff!important;box-shadow:0 0 0 3px rgba(37,99,235,.06)!important}.kb-category-row-actions{display:flex;align-items:center;gap:6px}.kb-category-row-actions a,.kb-category-row-actions button,.kb-category-delete-form button{width:32px;height:32px;display:grid;place-items:center;padding:0;border:1px solid #dbe4ef;border-radius:8px;background:#fff;color:#43638f;cursor:pointer}.kb-category-row-actions a:hover,.kb-category-row-actions button:hover{border-color:#abc6ef;background:#eef5ff;color:#1d4ed8}.kb-category-row-actions svg,.kb-category-delete-form svg{width:14px}.kb-category-count{min-width:28px;height:26px;display:grid;place-items:center;padding:0 7px;border-radius:999px;background:#eef4ff;color:#315fc5;font-size:10px;font-weight:800}.kb-category-delete-form{display:flex;align-items:center;padding:12px 15px 12px 0}.kb-category-delete-form button.danger{color:#dc2626}.kb-category-delete-form button.danger:hover:not(:disabled){border-color:#fecaca;background:#fff1f2}.kb-category-delete-form button:disabled{opacity:.4;cursor:not-allowed}.kb-category-empty{padding:45px 20px;text-align:center;color:#8996a8}.kb-category-empty svg{width:25px;margin-bottom:8px}.kb-category-empty strong,.kb-category-empty span{display:block}.kb-category-empty strong{color:#516176}.kb-category-empty span{margin-top:3px;font-size:11px}.kb-category-alert{display:flex;align-items:center;gap:8px;margin-bottom:14px;padding:11px 13px;border-radius:10px;font-size:12px}.kb-category-alert.error{border:1px solid #fecaca;background:#fff1f2;color:#b91c1c}.kb-category-alert svg{width:15px}.kb-category-add-link{display:grid;place-items:center;border:1px solid #cbd7e5;border-left:0;border-radius:0 10px 10px 0;background:#fff;color:#315fc5;text-decoration:none}.kb-category-add-link:hover{background:#eef5ff}.kb-category-add-link svg{width:16px}.kb-group-badge{background:#eef4ff;color:#315fc5}.kb-group-select-row{grid-template-columns:minmax(0,1fr) 42px} @media(max-width:900px){.kb-category-layout{grid-template-columns:1fr}.kb-category-create-card{position:static}.kb-category-inputs{grid-template-columns:1fr}} @media(max-width:620px){.kb-category-row{grid-template-columns:1fr}.kb-category-edit-form{grid-template-columns:1fr}.kb-category-row-actions{justify-content:flex-end}.kb-category-delete-form{justify-content:flex-end;padding:0 15px 12px}.kb-category-inputs{grid-template-columns:1fr}} /* Compatibility label pass: existing HelpCategory UI is presented as Category */ .kb-admin-page .kb-head-links [data-kb-groups-open]{font-size:0} .kb-admin-page .kb-head-links [data-kb-groups-open]::before{content:"Categories";font-size:12px} .kb-admin-page .kb-head-links [data-kb-groups-open]::after{content:" โ†’";font-size:12px} .kb-admin-page .kb-data-table thead th:nth-child(2){font-size:0!important} .kb-admin-page .kb-data-table thead th:nth-child(2)::after{content:"CATEGORY";font-size:10.5px!important} .kb-admin-page [data-kb-groups-modal] header h2{font-size:0} .kb-admin-page [data-kb-groups-modal] header h2::after{content:"Categories";font-size:17px} .kb-admin-page [data-kb-groups-modal] .kb-group-add label:first-child{font-size:0} .kb-admin-page [data-kb-groups-modal] .kb-group-add label:first-child::before{content:"Category name";font-size:11px} .kb-admin-page [data-kb-groups-modal] .kb-group-add label:first-child input{font-size:12px} .kb-admin-page [data-kb-groups-modal] .kb-group-add button{font-size:0} .kb-admin-page [data-kb-groups-modal] .kb-group-add button::after{content:"Add Category";font-size:12px} .kb-form-page .kb-field>span{position:relative} .kb-form-page .kb-field>span em+*{} .kb-form-page [data-kb-form-group-open]{position:relative} .kb-form-page [data-kb-form-group-modal] header h2{font-size:0} .kb-form-page [data-kb-form-group-modal] header h2::after{content:"Add Category";font-size:17px} .kb-form-page [data-kb-form-group-modal] .kb-group-add label:first-child{font-size:0} .kb-form-page [data-kb-form-group-modal] .kb-group-add label:first-child::before{content:"Category name";font-size:11px} .kb-form-page [data-kb-form-group-modal] .kb-group-add label:first-child input{font-size:12px} .kb-form-page [data-kb-form-group-modal] .kb-group-add button{font-size:0} .kb-form-page [data-kb-form-group-modal] .kb-group-add button::after{content:"Add Category";font-size:12px} .kb-form-page .kb-form-fields>.kb-field:nth-child(2)>span{font-size:0} .kb-form-page .kb-form-fields>.kb-field:nth-child(2)>span em{display:none} .kb-form-page .kb-form-fields>.kb-field:nth-child(2)>span::after{content:"* Category";font-size:12px;font-weight:800;color:#32445f} /* ========================================================== Knowledge Base dashboard visual repair โ€” 2026-09-30 ========================================================== */ .kb-admin-page,.kb-form-page{max-width:1680px;margin:0 auto;color:#20314a} .kb-dashboard-hero,.kb-form-hero{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:132px;margin:0 0 18px;padding:24px 26px;border:1px solid rgba(255,255,255,.22);border-radius:20px;background:linear-gradient(135deg,#312e81 0%,#2563eb 55%,#06b6d4 100%);box-shadow:0 18px 42px rgba(37,99,235,.18);color:#fff} .kb-dashboard-hero:before,.kb-form-hero:before{content:"";position:absolute;right:-55px;top:-105px;width:240px;height:240px;border-radius:50%;background:rgba(255,255,255,.1)} .kb-dashboard-hero:after,.kb-form-hero:after{content:"";position:absolute;right:180px;bottom:-105px;width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,.06)} .kb-hero-main,.kb-hero-actions,.kb-form-hero-main,.kb-form-state{position:relative;z-index:1}.kb-hero-main{display:flex;align-items:center;gap:16px}.kb-hero-icon,.kb-form-hero-icon{width:52px;height:52px;flex:none;display:grid;place-items:center;border:1px solid rgba(255,255,255,.2);border-radius:15px;background:rgba(255,255,255,.14);backdrop-filter:blur(5px)}.kb-hero-icon svg,.kb-form-hero-icon svg{width:24px;height:24px;color:#fff}.kb-dashboard-hero .kb-eyebrow,.kb-form-hero .kb-eyebrow{color:#dbeafe}.kb-dashboard-hero h1,.kb-form-hero h1{margin:2px 0 5px;color:#fff!important;font-size:30px;line-height:1.1;font-weight:900;letter-spacing:-.65px}.kb-dashboard-hero p,.kb-form-hero p{margin:0;max-width:680px;color:#eaf3ff!important;font-size:12.5px;line-height:1.55}.kb-dashboard-hero .kb-head-links{margin-top:12px;gap:8px}.kb-dashboard-hero .kb-head-links button{display:inline-flex;align-items:center;gap:6px;min-height:31px;padding:0 10px;border:1px solid rgba(255,255,255,.22);border-radius:9px;background:rgba(255,255,255,.11);color:#fff;font-size:11px}.kb-dashboard-hero .kb-head-links button:hover{background:rgba(255,255,255,.2);color:#fff}.kb-dashboard-hero .kb-head-links svg{width:13px;height:13px}.kb-hero-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}.kb-hero-stat{min-width:105px;padding:10px 12px;border:1px solid rgba(255,255,255,.2);border-radius:12px;background:rgba(255,255,255,.11);backdrop-filter:blur(5px)}.kb-hero-stat span,.kb-hero-stat strong{display:block}.kb-hero-stat span{color:#dce9ff;font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.07em}.kb-hero-stat strong{margin-top:3px;color:#fff;font-size:21px;line-height:1}.kb-dashboard-hero .kb-new-button{min-height:43px;padding:0 15px;border:1px solid rgba(255,255,255,.25);background:#fff;color:#3046ad!important;box-shadow:0 9px 20px rgba(15,23,42,.13)}.kb-dashboard-hero .kb-new-button:hover{background:#f8fbff;box-shadow:0 12px 25px rgba(15,23,42,.17)} .kb-table-card{border:0!important;border-radius:18px!important;box-shadow:0 14px 36px rgba(31,46,75,.08)!important}.kb-table-toolbar{min-height:70px!important;padding:14px 18px!important;background:linear-gradient(100deg,#fff,#f7faff 55%,#f7f4ff)!important}.kb-data-table thead th{height:46px!important;background:linear-gradient(90deg,#eef3ff,#f5f3ff)!important;color:#52627a!important}.kb-data-table tbody td{height:62px}.kb-data-table tbody tr:hover td{background:linear-gradient(90deg,#f8fbff,#fbfaff)!important}.kb-article-icon{width:38px!important;height:38px!important;border-radius:11px!important;background:linear-gradient(135deg,#e9edff,#e3f8ff)!important;color:#4655ca!important}.kb-group-badge{background:#eff4ff!important;color:#315fc5!important;border:1px solid #d6e2fb}.kb-status.published{border:1px solid #c9f0df}.kb-status.draft{border:1px solid #f8dfb6}.kb-row-actions a,.kb-row-actions button{border-radius:9px!important}.kb-table-footer{background:linear-gradient(90deg,#fbfdff,#f8f7ff)!important} .kb-form-hero{align-items:flex-end;min-height:138px}.kb-form-hero-main{display:flex;flex-direction:column;align-items:flex-start;gap:14px}.kb-form-back{display:inline-flex!important;align-items:center;gap:6px;margin:0!important;padding:7px 9px;border:1px solid rgba(255,255,255,.2);border-radius:8px;background:rgba(255,255,255,.1);color:#fff!important;font-size:11px!important;text-decoration:none}.kb-form-back:hover{background:rgba(255,255,255,.2)}.kb-form-hero-copy{display:flex;align-items:center;gap:14px}.kb-form-state{display:inline-flex;align-items:center;gap:7px;padding:8px 11px;border:1px solid rgba(255,255,255,.22);border-radius:10px;background:rgba(255,255,255,.12);color:#fff;font-size:11px;font-weight:800;backdrop-filter:blur(5px)}.kb-form-state svg{width:14px}.kb-form-card{border:0!important;border-radius:18px!important;box-shadow:0 14px 38px rgba(31,46,75,.08)!important}.kb-form-card:before{height:5px!important}.kb-form-fields{padding:25px 26px 6px!important}.kb-field>span{font-size:12.5px!important}.kb-field>input,.kb-field select{height:44px!important;border-radius:11px!important}.kb-check-field{padding:13px 14px;border:1px solid #e2e8f0;border-radius:12px;background:linear-gradient(90deg,#fbfdff,#f8f7ff)}.kb-editor-shell{overflow:hidden;border:1px solid #d9e2ee!important;border-radius:14px!important;box-shadow:inset 0 1px 0 #fff}.kb-editor-menu{padding:9px 12px!important;background:linear-gradient(90deg,#f8faff,#f7f4ff)!important;color:#53647b!important}.kb-editor-toolbar{padding:8px 10px!important;background:#fff!important}.kb-editor-shell textarea{min-height:360px!important;padding:18px!important;background:#fff!important;color:#2e4058!important;font-size:13px!important;line-height:1.65!important}.kb-editor-footer{padding:9px 12px!important;background:#f8fafc!important;color:#76859a!important}.kb-form-actions{min-height:68px!important;padding:12px 22px!important;background:linear-gradient(90deg,#fbfdff,#f8f7ff)!important}.kb-form-actions a{border-radius:9px!important}.kb-form-actions button{min-height:40px!important;border-radius:10px!important;background:linear-gradient(135deg,#4338ca,#2563eb)!important;box-shadow:0 7px 18px rgba(37,99,235,.19)!important}.kb-form-actions button:hover{transform:translateY(-1px)} .kb-modal{backdrop-filter:blur(4px)}.kb-modal-card{border:0!important;border-radius:17px!important;box-shadow:0 22px 65px rgba(15,23,42,.28)!important}.kb-modal-card>header{min-height:62px!important;background:linear-gradient(100deg,#f8fbff,#f7f4ff)!important}.kb-group-list>a{border-radius:9px}.kb-group-list>a:hover{background:#f8fbff}.kb-group-add button{background:linear-gradient(135deg,#4338ca,#2563eb)!important;box-shadow:0 6px 14px rgba(37,99,235,.16)} @media(max-width:900px){.kb-dashboard-hero,.kb-form-hero{align-items:flex-start;flex-direction:column}.kb-hero-actions{width:100%;justify-content:flex-start}.kb-form-state{align-self:flex-start}} @media(max-width:620px){.kb-dashboard-hero,.kb-form-hero{padding:19px 17px;border-radius:15px}.kb-hero-main,.kb-form-hero-copy{align-items:flex-start}.kb-hero-icon,.kb-form-hero-icon{width:44px;height:44px}.kb-dashboard-hero h1,.kb-form-hero h1{font-size:24px}.kb-hero-actions{display:grid;grid-template-columns:1fr 1fr}.kb-hero-actions .kb-new-button{grid-column:1/-1;justify-content:center}.kb-form-fields{padding:21px 17px 4px!important}.kb-editor-shell textarea{min-height:280px!important}} /* ============================================================ SECTION: installer.css ============================================================ */ :root{font-family:Inter,ui-sans-serif,system-ui,sans-serif;color:#172033;background:#eef3fa}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 5% 0,#dbeafe,transparent 30%),radial-gradient(circle at 95% 15%,#e9d5ff,transparent 28%),#f5f7fb}.installer{width:min(920px,calc(100% - 32px));margin:42px auto}.installer.compact{width:min(650px,calc(100% - 32px));margin-top:12vh}.installer>header{padding:34px;border-radius:24px;color:#fff;background:linear-gradient(120deg,#2736ca,#168fe8 62%,#7c3aed);box-shadow:0 24px 60px #2746a62e}.installer header span{font-size:12px;font-weight:800;letter-spacing:.18em}.installer h1{font-size:36px;margin:8px 0}.installer header p{margin:0;opacity:.84}.card{margin-top:22px;padding:28px;border:1px solid #dce4ef;border-radius:20px;background:#fff;box-shadow:0 14px 40px #33415512}.card h2{margin:4px 0 18px;font-size:19px}.card h2:not(:first-child){margin-top:30px;padding-top:25px;border-top:1px solid #edf0f5}.requirements{display:grid;grid-template-columns:1fr 1fr;gap:10px 24px}.requirements div{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #edf0f5}.requirements b{font-size:12px}.pass{color:#059669}.fail{color:#dc2626}.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}label{display:grid;gap:7px;margin:14px 0;font-size:13px;font-weight:700}input,select{width:100%;height:46px;padding:0 13px;border:1px solid #cbd5e1;border-radius:10px;background:#fff;font:inherit}input:focus,select:focus{outline:3px solid #bfdbfe;border-color:#2563eb}small,.notice{font-weight:400;color:#64748b}.card button,.button{display:inline-flex;justify-content:center;margin-top:20px;padding:13px 20px;border:0;border-radius:11px;background:#172033;color:#fff;text-decoration:none;font-weight:800;cursor:pointer}.card button:disabled{opacity:.45;cursor:not-allowed}.alert{margin-top:22px;padding:18px 22px;border:1px solid #fecaca;border-radius:14px;background:#fff1f2;color:#991b1b}.success{text-align:center;padding:42px}.success p{color:#64748b}footer{text-align:center;padding:24px;color:#64748b;font-size:13px}@media(max-width:680px){.requirements,.grid{grid-template-columns:1fr}.installer{margin:18px auto}.installer h1{font-size:29px}.card{padding:20px}} /* ============================================================ SECTION: invoice-detail.css ============================================================ */ .invoice-detail-page{color:#24334a}.invoice-detail-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:22px}.invoice-detail-back{display:inline-block;color:#2868ce;font-size:14px;margin-bottom:7px}.invoice-detail-heading h1{font-size:25px;margin:0 0 9px}.invoice-detail-actions{display:flex;gap:7px}.invoice-detail-actions a,.invoice-detail-actions button{display:inline-flex;align-items:center;gap:6px;border:1px solid #cbd6e3;border-radius:6px;background:#fff;color:#27374f;padding:9px 12px;font:inherit;font-weight:600;text-decoration:none}.invoice-detail-actions svg{width:16px;height:16px}.invoice-detail-layout{display:grid;grid-template-columns:minmax(0,1fr) 285px;gap:22px;align-items:start}.invoice-document,.invoice-detail-sidebar section{background:#fff;border:1px solid #dce3eb;border-radius:8px;box-shadow:0 2px 6px #17223913}.invoice-document{min-height:780px;padding:36px 40px}.invoice-document-head{display:flex;justify-content:space-between;gap:25px;padding-bottom:30px;border-bottom:1px solid #e4e9f0}.invoice-document-brand img{max-width:180px;max-height:50px;object-fit:contain}.invoice-document-brand>strong{font-size:26px;display:block;color:#1e293b}.invoice-document address{font-style:normal;color:#67758b;line-height:1.6;margin-top:14px;white-space:pre-line}.invoice-document-number{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:8px}.invoice-document-number>span{color:#64748b;letter-spacing:2px;font-size:13px;font-weight:700}.invoice-document-number>strong{font-size:25px;color:#1c2b42}.invoice-document-parties{display:flex;justify-content:space-between;gap:30px;margin:32px 0 38px}.invoice-document-parties>div:first-child{min-width:0}.invoice-document-parties>div:first-child>strong{display:block;font-size:18px;margin-top:9px;overflow-wrap:anywhere}.invoice-document-label{font-size:12px;letter-spacing:1.1px;color:#8593a7;font-weight:700}.invoice-document-dates{width:235px;flex:none}.invoice-document-dates>div,.invoice-detail-sidebar dl>div{display:flex;justify-content:space-between;gap:12px;padding:7px 0}.invoice-document-dates span,.invoice-detail-sidebar dt{color:#718098}.invoice-document-dates strong,.invoice-detail-sidebar dd{text-align:right;font-weight:600;margin:0}.invoice-document-table-wrap{overflow-x:auto}.invoice-document-table{width:100%;border-collapse:collapse;min-width:450px}.invoice-document-table th{background:#f4f7fb;color:#34445d;text-align:right;padding:13px 12px;font-weight:600}.invoice-document-table th:first-child,.invoice-document-table td:first-child{text-align:left}.invoice-document-table td{text-align:right;padding:17px 12px;border-bottom:1px solid #e4e9f0}.invoice-document-table td strong,.invoice-document-table td small{display:block}.invoice-document-table td small{margin-top:4px;color:#718098}.invoice-document-totals{max-width:330px;margin:30px 0 0 auto}.invoice-document-totals>div{display:flex;justify-content:space-between;gap:16px;padding:9px 4px}.invoice-document-totals>div span{color:#617087}.invoice-document-grand{font-size:19px;border-top:1px solid #dce3eb;margin-top:5px}.invoice-document-grand span,.invoice-document-balance span{color:#1b2b43!important}.invoice-document-balance{border-top:1px solid #dce3eb;font-weight:700}.invoice-document-note{border-top:1px solid #e4e9f0;margin-top:40px;padding-top:22px}.invoice-document-note p{white-space:pre-wrap;line-height:1.5}.invoice-document-footer{border-top:1px solid #e4e9f0;padding-top:20px;margin-top:70px;color:#8996a7}.invoice-detail-sidebar section{padding:20px;margin-bottom:15px}.invoice-detail-sidebar h2{font-size:17px;margin:0 0 15px}.invoice-detail-sidebar dl{margin:0}.invoice-detail-sidebar dl>div{border-top:1px solid #e8ecf2}.invoice-detail-sidebar p{color:#718098;margin:0}.invoice-payment-row{display:flex;justify-content:space-between;gap:10px;border-top:1px solid #e8ecf2;padding:10px 0}.invoice-payment-row small{display:block;color:#718098;margin-top:3px}@media(max-width:1000px){.invoice-detail-layout{grid-template-columns:1fr}.invoice-detail-sidebar{display:grid;grid-template-columns:1fr 1fr;gap:15px}.invoice-detail-sidebar section{margin:0}}@media(max-width:650px){.invoice-detail-heading{align-items:flex-start;flex-direction:column}.invoice-document{padding:25px 18px}.invoice-document-head,.invoice-document-parties{flex-direction:column}.invoice-document-number{align-items:flex-start;text-align:left}.invoice-document-dates{width:100%}.invoice-detail-sidebar{display:block}.invoice-detail-sidebar section{margin-bottom:15px}}@media print{.customer-topbar,.customer-sidebar,.invoice-detail-heading,.invoice-detail-sidebar{display:none!important}.customer-content{padding:0!important;max-width:none!important}.invoice-detail-layout{display:block}.invoice-document{border:0;box-shadow:none;padding:0;min-height:0}} .invoice-logo-quick label{display:inline-flex;align-items:center;gap:6px;border:1px solid #cbd6e3;border-radius:6px;background:#fff;color:#27374f;padding:9px 12px;font:inherit;font-weight:600;cursor:pointer}.invoice-logo-quick label svg{width:16px;height:16px}.invoice-logo-quick input[type=file]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}.invoice-logo-quick:focus-within label{outline:2px solid #2563eb}@media(max-width:650px){.invoice-detail-actions{flex-wrap:wrap}} /* Modern invoice detail refresh */ .invoice-detail-page{max-width:1500px;margin:0 auto}.invoice-detail-heading{padding:4px 2px 0}.invoice-detail-heading h1{letter-spacing:-.025em}.invoice-detail-actions a,.invoice-detail-actions button,.invoice-logo-quick label{border-radius:9px;transition:.18s ease}.invoice-detail-actions a:hover,.invoice-detail-actions button:hover,.invoice-logo-quick label:hover{border-color:#9eb2cf;background:#f8fbff}.invoice-document{position:relative;border-radius:15px;box-shadow:0 18px 45px rgba(30,48,76,.09);overflow:hidden;padding:42px 46px}.invoice-document:before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:linear-gradient(90deg,#2563eb,#22c55e)}.invoice-document-head{padding-bottom:28px}.invoice-document-number>span{color:#3b82f6}.invoice-document-number>strong{font-size:29px}.invoice-document-parties{padding:20px;border-radius:13px;background:#f8fafc;border:1px solid #e6ebf2}.invoice-document-table-wrap{border:1px solid #e3e9f1;border-radius:11px;overflow:auto}.invoice-document-table th{background:#17233a;color:#fff;border:0;font-size:11px;letter-spacing:.03em}.invoice-document-table td{background:#fff}.invoice-document-table tbody tr:hover td{background:#fafcff}.invoice-document-totals{background:#f8fafc;border:1px solid #e3e9f1;border-radius:12px;padding:10px 16px;max-width:390px}.invoice-document-totals>div{border-bottom:1px solid #e7ecf3;padding:10px 3px}.invoice-document-totals>div:last-child{border-bottom:0}.invoice-document-grand{border-top:0;margin-top:0}.invoice-document-grand strong{font-size:19px}.invoice-document-balance{margin:5px -9px -2px;padding:13px 12px!important;border:0!important;border-radius:8px;background:#eef6ff;color:#174f96}.invoice-document-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:28px 0 0}.invoice-document-meta>div{padding:12px 14px;border-radius:10px;border:1px solid #e4eaf2;background:#fbfcfe}.invoice-document-meta span,.invoice-document-meta strong{display:block}.invoice-document-meta span{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:#8a97a8;margin-bottom:5px}.invoice-document-meta strong{font-size:12px;color:#273750;overflow-wrap:anywhere}.invoice-document-notes{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:28px}.invoice-document-note{margin:0;padding:17px 18px;border:1px solid #e4eaf2;border-radius:12px;background:#fff}.invoice-document-note.client-note{background:#f7fbff;border-color:#dceafb}.invoice-document-note.terms{background:#fbfaf7;border-color:#ebe6d8}.invoice-document-note p,.invoice-document-admin-note p{white-space:pre-wrap;line-height:1.65;color:#47566d;margin-bottom:0}.invoice-document-admin-note{margin-top:14px;border:1px dashed #d9cba4;border-radius:10px;background:#fffaf0;padding:14px 16px}.invoice-document-admin-note .invoice-document-label{color:#9a7117}.invoice-document-footer{margin-top:34px;text-align:center;color:#8390a2}.invoice-detail-sidebar section{border-radius:12px;box-shadow:0 8px 24px rgba(30,48,76,.06)}@media(max-width:760px){.invoice-document-notes,.invoice-document-meta{grid-template-columns:1fr}.invoice-document{padding:30px 20px}}@media print{.invoice-document:before{display:none}.invoice-document-admin-note{display:none!important}} /* Simple invoice document inspired by the supplied one-page invoice reference */ .invoice-simple-paper{background:#fff!important;color:#161616!important;border:1px solid #e4e7eb!important;border-radius:4px!important;box-shadow:0 6px 24px rgba(15,23,42,.06)!important;padding:42px 38px!important;position:relative!important;overflow:visible!important} .invoice-simple-paper:before{display:none!important} .invoice-simple-top{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:30px!important;padding:0 0 46px!important;border:0!important} .invoice-simple-brand img{display:block;max-width:210px!important;max-height:74px!important;width:auto!important;height:auto!important;object-fit:contain} .invoice-simple-number{display:flex;flex-direction:column;align-items:flex-end;text-align:right;gap:5px;min-width:180px} .invoice-simple-number>strong{display:inline-block;background:#050505;color:#fff;padding:5px 10px;font-size:19px;line-height:1.15;letter-spacing:.02em;font-weight:800} .invoice-simple-number>span{font-size:12px;line-height:1.3;font-weight:600;color:#303030} .invoice-simple-parties{display:grid!important;grid-template-columns:1fr 1fr!important;gap:70px!important;margin:0 16px 48px!important;padding:0!important;background:transparent!important;border:0!important;border-radius:0!important} .invoice-simple-parties section{min-width:0}.invoice-simple-parties strong{display:block;font-size:14px;line-height:1.4;color:#151515}.invoice-simple-parties h3{font-size:14px;margin:0 0 8px;padding-bottom:5px;border-bottom:1px solid #e5e5e5;color:#151515}.invoice-simple-parties address{font-style:normal;white-space:pre-line;color:#333!important;font-size:12px;line-height:1.45;margin-top:4px!important}.invoice-simple-parties a{color:#151515;text-decoration:none} .invoice-simple-table-wrap{overflow-x:auto;border:0!important;border-radius:0!important}.invoice-simple-table{width:100%;border-collapse:collapse;min-width:520px}.invoice-simple-table th{background:#050505!important;color:#fff!important;padding:11px 13px!important;font-size:12px!important;font-weight:700!important;text-align:right!important;border-right:1px solid #666}.invoice-simple-table th:first-child{text-align:left!important}.invoice-simple-table th:last-child{border-right:0}.invoice-simple-table td{background:#f5f5f5!important;color:#1d1d1d!important;padding:11px 13px!important;border:0!important;border-right:1px solid #fff!important;border-bottom:1px solid #fff!important;text-align:right!important;vertical-align:top}.invoice-simple-table td:first-child{text-align:left!important}.invoice-simple-table td:last-child{border-right:0!important}.invoice-simple-table td strong{display:block;font-size:12px}.invoice-simple-table td small{display:block;margin-top:3px;color:#777;font-size:10px;line-height:1.35} .invoice-simple-totals{width:min(340px,100%);margin:0 0 0 auto!important;padding:0!important;background:transparent!important;border:0!important;border-radius:0!important}.invoice-simple-totals>div{display:flex;justify-content:space-between;gap:28px;padding:8px 13px!important;border:0!important;background:#fff;color:#222;font-size:12px}.invoice-simple-totals>div span{color:#222!important}.invoice-simple-totals .invoice-simple-balance{background:#050505!important;color:#fff!important}.invoice-simple-totals .invoice-simple-balance span{color:#fff!important}.invoice-simple-totals .invoice-simple-balance strong{font-size:13px} .invoice-simple-copy{margin-top:30px;padding-top:18px;border-top:1px solid #ececec}.invoice-simple-copy section+section{margin-top:16px}.invoice-simple-copy h4{margin:0 0 5px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#555}.invoice-simple-copy p{margin:0;white-space:pre-wrap;font-size:12px;line-height:1.55;color:#333} .invoice-simple-signature{width:230px;margin:70px 0 8px auto;text-align:center;color:#222}.invoice-signature-space{height:32px}.invoice-signature-line{border-top:1px solid #555;margin-bottom:7px}.invoice-simple-signature strong{display:block;font-size:12px}.invoice-simple-signature small{display:block;margin-top:4px;color:#6b7280;font-size:10px;white-space:pre-wrap} .invoice-simple-paper .invoice-admin-note,.invoice-simple-paper .invoice-document-admin-note{margin-top:22px!important} @media(max-width:760px){.invoice-simple-paper{padding:28px 18px!important}.invoice-simple-top{padding-bottom:32px!important}.invoice-simple-parties{grid-template-columns:1fr!important;gap:25px!important;margin:0 0 32px!important}.invoice-simple-number{align-items:flex-start;text-align:left}.invoice-simple-signature{margin-top:48px}.invoice-simple-brand img{max-width:175px!important}} @media print{.invoice-simple-paper{border:0!important;box-shadow:none!important;padding:22px 24px!important}.invoice-simple-copy{break-inside:avoid}.invoice-simple-signature{break-inside:avoid}.invoice-simple-paper .invoice-admin-note,.invoice-simple-paper .invoice-document-admin-note{display:none!important}} /* High-contrast invoice and credit-note document headers */ .invoice-simple-table th, .invoice-document-table th{ color:#000!important; background:#f1f3f5!important; font-weight:800!important; border-bottom:2px solid #cfd6df!important; } /* ============================================================ SECTION: invoice-form.css ============================================================ */ .invoice-form-page{max-width:1650px}.invoice-merge-card{background:#fff;border:1px solid #dce3ec;border-radius:7px;box-shadow:0 2px 5px #1e293b18;padding:20px 24px;margin-bottom:22px;display:grid;gap:10px}.invoice-merge-card>strong{width:max-content;background:#f7f8fa;border-radius:5px;padding:8px 12px;font-size:13px}.invoice-merge-card label{display:flex;align-items:center;gap:7px;font-size:13px}.invoice-merge-card input,.invoice-check input{accent-color:#3677ef}.invoice-total-help{color:#2868d3;font-size:13px;margin-bottom:3px}.invoice-form-page .estimate-columns{min-height:475px}.invoice-form-page .estimate-card{overflow:visible}.invoice-check{display:flex;align-items:center;gap:8px;font-size:13px;color:#3c4e66}.invoice-form-page .estimate-save-bar button+button{background:#18263a}.invoice-form-page .estimate-save-bar button:first-of-type{background:#fff;color:#28394f;border:1px solid #cbd5e1}.invoice-form-page .estimate-addresses{min-height:92px}@media(max-width:1050px){.invoice-form-page .estimate-columns{min-height:0}} /* Contacts-based Sales โ†’ Invoice create/edit redesign */ .invoice-contact-form-page{max-width:1450px!important;margin:0 auto;padding:4px 0 28px;color:#263954} .invoice-contact-heading{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:22px!important;margin:0 0 16px!important;padding:20px 22px!important;border:1px solid #dce4ef!important;border-radius:14px!important;background:linear-gradient(120deg,#fff 58%,#f5f8ff 100%)!important;box-shadow:0 6px 20px rgba(31,48,76,.06)!important} .invoice-contact-heading-copy{min-width:0}.invoice-contact-eyebrow{display:block;margin-bottom:5px;color:#5f6bd6;font-size:10px;font-weight:850;letter-spacing:.1em;text-transform:uppercase}.invoice-contact-heading h1{margin:0!important;font-size:24px!important;letter-spacing:-.025em;color:#18263b}.invoice-contact-heading p{margin:5px 0 0;color:#738197;font-size:12px} .invoice-contact-heading-actions{display:flex;align-items:center;gap:9px;flex:none}.invoice-contact-heading-actions>a{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border:1px solid #ced8e5;border-radius:8px;background:#fff;color:#34506f;text-decoration:none;font-size:12px;font-weight:700}.invoice-contact-heading-actions>a:hover{border-color:#a7bde0;color:#245fc1}.invoice-contact-heading-actions svg{width:14px}.invoice-contact-number-badge{display:inline-flex;align-items:center;min-height:34px;padding:0 10px;border-radius:8px;background:#eef3fb;color:#445d7c;font-size:11px;font-weight:800} .invoice-contact-card{padding:0!important;border:1px solid #dce3ec!important;border-radius:14px!important;box-shadow:0 7px 24px rgba(31,48,76,.06)!important;overflow:hidden!important;background:#fff} .invoice-contact-form-page .estimate-columns{padding:22px 24px 6px!important;gap:26px!important;background:#fff} .invoice-contact-form-page .estimate-fields{gap:13px!important}.invoice-contact-form-page .estimate-field>span{font-size:12px!important;font-weight:750!important;color:#374b66!important}.invoice-contact-form-page .estimate-field em{color:#dc3545} .invoice-contact-form-page .estimate-field input,.invoice-contact-form-page .estimate-field select,.invoice-contact-form-page .estimate-field textarea{border:1px solid #cfd9e5!important;border-radius:7px!important;background:#fff!important;color:#263954!important;box-shadow:none!important;font-size:12.5px!important} .invoice-contact-form-page .estimate-field input,.invoice-contact-form-page .estimate-field select{min-height:38px!important}.invoice-contact-form-page .estimate-field textarea{padding:9px 10px!important} .invoice-contact-form-page .estimate-field input:focus,.invoice-contact-form-page .estimate-field select:focus,.invoice-contact-form-page .estimate-field textarea:focus{border-color:#86aaf0!important;box-shadow:0 0 0 3px rgba(59,130,246,.08)!important;outline:0} .invoice-contact-form-page .estimate-customer-field{padding:12px 13px;border:1px solid #dce6f2;border-radius:10px;background:linear-gradient(100deg,#fbfdff,#f8f7ff)} .invoice-contact-form-page .estimate-number{border-radius:7px!important;overflow:hidden}.invoice-auto-number input{background:#f6f8fb!important;color:#42566f!important;font-weight:800!important;cursor:not-allowed}.invoice-auto-number-help{display:flex!important;align-items:center;gap:5px;margin-top:6px;color:#8491a3!important;font-size:10.5px!important;font-weight:500!important}.invoice-auto-number-help svg{width:12px;height:12px} .invoice-settings-tags>span{display:flex;align-items:center;gap:6px}.invoice-settings-tags>span svg{width:13px}.invoice-settings-tags select{min-height:92px!important;padding:6px!important}.invoice-settings-tags option{padding:6px 8px;border-radius:5px}.invoice-settings-tags option:checked{background:#eaf1ff linear-gradient(0deg,#eaf1ff,#eaf1ff);color:#245fbe}.invoice-settings-tags small{margin-top:5px;color:#8190a3!important;font-size:10.5px!important}.invoice-settings-tags small a{color:#316ac4!important} .invoice-contact-form-page .estimate-addresses{border:1px solid #e2e8f0!important;border-radius:10px!important;background:#fbfcfe!important;padding:14px!important}.invoice-contact-form-page .estimate-addresses strong{font-size:11px!important;color:#42566f}.invoice-contact-form-page .estimate-addresses address{font-size:11px!important;color:#76869a!important} .invoice-contact-form-page .estimate-items{margin:18px 24px 0!important;border:1px solid #dfe6ef!important;border-radius:12px!important;overflow:hidden!important;background:#fff}.invoice-contact-form-page .estimate-item-toolbar{min-height:58px!important;padding:10px 14px!important;background:linear-gradient(90deg,#fbfcff,#f7f9ff)!important;border-bottom:1px solid #e3e9f1!important}.invoice-contact-form-page .estimate-item-table th{height:39px!important;background:#f8fafc!important;color:#21314c!important;border-color:#e5eaf1!important;font-size:11px!important;font-weight:700!important}.invoice-contact-form-page .estimate-item-table td{border-color:#e9edf3!important;background:#fff!important}.invoice-contact-form-page .estimate-item-table tbody tr:hover td{background:#fbfcff!important} .invoice-contact-form-page .estimate-summary{margin:18px 24px!important}.invoice-contact-form-page .estimate-save-bar{position:sticky!important;bottom:0!important;z-index:5!important;margin:0!important;padding:14px 24px!important;border-top:1px solid #e1e7ef!important;background:rgba(255,255,255,.96)!important;backdrop-filter:blur(8px);box-shadow:0 -8px 24px rgba(30,48,76,.05)!important}.invoice-contact-form-page .estimate-save-bar a,.invoice-contact-form-page .estimate-save-bar button{min-height:36px!important;border-radius:7px!important;font-size:12px!important}.invoice-contact-form-page .estimate-save-bar button:last-child{background:#1f4f95!important;border-color:#1f4f95!important} .invoice-form-page .invoice-merge-card{border-radius:12px!important;box-shadow:0 5px 18px rgba(31,48,76,.05)!important} @media(max-width:760px){.invoice-contact-heading{align-items:flex-start!important;flex-direction:column!important}.invoice-contact-heading-actions{width:100%;justify-content:space-between}.invoice-contact-form-page .estimate-columns{padding:16px!important}.invoice-contact-form-page .estimate-items,.invoice-contact-form-page .estimate-summary{margin-left:16px!important;margin-right:16px!important}} /* Invoice create/edit โ€” Perfex-style line-item editor */ .invoice-contact-form-page .estimate-items{padding-top:0!important} .invoice-contact-form-page .estimate-table-wrap{overflow-x:auto!important} .invoice-contact-form-page .invoice-line-item-table{table-layout:fixed!important;min-width:1040px!important;border-collapse:collapse!important} .invoice-contact-form-page .invoice-line-item-table th{height:38px!important;padding:0 10px!important;background:#f3f4f6!important;border:1px solid #dfe3e8!important;color:#111827!important;font-size:12px!important;font-weight:650!important;vertical-align:middle!important} .invoice-contact-form-page .invoice-line-item-table th:nth-child(1){width:20%!important} .invoice-contact-form-page .invoice-line-item-table th:nth-child(2){width:23.5%!important} .invoice-contact-form-page .invoice-line-item-table th:nth-child(3){width:9.5%!important;text-align:right!important} .invoice-contact-form-page .invoice-line-item-table th:nth-child(4){width:14.5%!important;text-align:right!important} .invoice-contact-form-page .invoice-line-item-table th:nth-child(5){width:19%!important;text-align:right!important} .invoice-contact-form-page .invoice-line-item-table th:nth-child(6){width:9.5%!important;text-align:right!important} .invoice-contact-form-page .invoice-line-item-table th:nth-child(7){width:4%!important;text-align:center!important} .invoice-contact-form-page .invoice-line-item-table td{height:144px!important;padding:18px 10px!important;background:#f8f9fb!important;border:1px solid #e1e5ea!important;vertical-align:top!important;box-sizing:border-box!important} .invoice-contact-form-page .invoice-line-item-table tbody tr:hover td{background:#f8f9fb!important} .invoice-contact-form-page .invoice-line-item-table textarea{display:block!important;width:100%!important;height:94px!important;min-height:94px!important;max-height:94px!important;margin:0!important;padding:10px 12px!important;border:1px solid #cfd8e4!important;border-radius:6px!important;background:#fff!important;resize:none!important;box-sizing:border-box!important;font-size:12.5px!important;line-height:1.45!important} .invoice-contact-form-page .invoice-line-item-table input:not([type=checkbox]),.invoice-contact-form-page .invoice-line-item-table select{display:block!important;width:100%!important;height:35px!important;min-height:35px!important;margin:0!important;padding:0 10px!important;border:1px solid #cfd8e4!important;border-radius:6px!important;background:#fff!important;box-sizing:border-box!important;font-size:12.5px!important;color:#334155!important} .invoice-contact-form-page .invoice-line-item-table textarea:focus,.invoice-contact-form-page .invoice-line-item-table input:focus,.invoice-contact-form-page .invoice-line-item-table select:focus{outline:0!important;border-color:#9cb8e8!important;box-shadow:0 0 0 2px rgba(59,130,246,.06)!important} .invoice-contact-form-page .invoice-line-item-table .estimate-qty{margin:0!important;text-align:left!important} .invoice-contact-form-page .invoice-line-item-table .estimate-unit{height:28px!important;min-height:28px!important;margin:4px 0 0!important;padding:0 8px!important;border:0!important;background:transparent!important;box-shadow:none!important;text-align:right!important;color:#8996a8!important;font-size:11px!important} .invoice-contact-form-page .invoice-line-item-table .estimate-rate{margin:0!important} .invoice-contact-form-page .invoice-line-item-table .estimate-tax-rate{margin:0!important} .invoice-contact-form-page .invoice-line-item-table .estimate-tax-control{display:block!important;height:auto!important;margin:0!important} .invoice-contact-form-page .invoice-line-item-table .estimate-tax-control span{display:none!important} .invoice-contact-form-page .invoice-line-item-table .estimate-line-amount{height:auto!important;padding:40px 10px 0!important;line-height:1.3!important;text-align:right!important;white-space:nowrap!important;color:#27364c!important;font-size:12px!important} .invoice-contact-form-page .invoice-line-item-table td:last-child{text-align:center!important;padding-top:18px!important} .invoice-contact-form-page .invoice-line-item-table .estimate-row-add{display:inline-grid!important;place-items:center!important;width:34px!important;height:34px!important;margin:0 auto!important;padding:0!important;border:0!important;border-radius:7px!important;background:#202c3d!important;color:#fff!important;font-size:18px!important;line-height:1!important;box-shadow:none!important} .invoice-contact-form-page .invoice-line-item-table .estimate-row-remove{display:block!important;min-width:0!important;width:34px!important;height:24px!important;margin:8px auto 0!important;padding:0!important;border:0!important;background:transparent!important;color:#b55a63!important;font-size:13px!important;line-height:24px!important} .invoice-contact-form-page .invoice-line-item-table .estimate-optional{margin:7px 0 0!important;min-height:18px!important;font-size:10.5px!important;color:#5d6d82!important;white-space:nowrap!important} .invoice-contact-form-page .invoice-line-item-table .estimate-optional input{width:14px!important;height:14px!important;margin:0!important;accent-color:#3478df!important} .invoice-item-info{display:inline-grid;place-items:center;width:14px;height:14px;margin-right:5px;border-radius:50%;background:#030712;color:#fff;font-size:9px;font-weight:850;line-height:1} .invoice-item-settings svg{width:14px!important;height:14px!important;vertical-align:middle} @media(max-width:820px){.invoice-contact-form-page .invoice-line-item-table{table-layout:fixed!important}} .invoice-client-project-field small{margin-top:5px;color:#8190a3!important;font-size:10.5px!important} .invoice-client-project-field select:disabled{background:#f5f7fa!important;color:#99a5b5!important;cursor:not-allowed} .invoice-chip-picker{border:1px solid #cfd9e5;border-radius:8px;background:#fff;min-height:42px;padding:5px 7px;box-sizing:border-box} .invoice-chip-list{display:flex;align-items:center;gap:5px;flex-wrap:wrap} .invoice-chip{display:inline-flex;align-items:center;gap:5px;min-height:27px;padding:3px 7px;border:1px solid #cbdaf0;border-radius:999px;background:#eef4ff;color:#315f9f;font-size:11px;font-weight:700} .invoice-chip button{width:17px;height:17px;border:0;border-radius:50%;background:transparent;color:#7186a5;cursor:pointer;padding:0;line-height:1} .invoice-chip input{display:none!important} #invoice-tag-input{flex:1;min-width:170px!important;min-height:30px!important;border:0!important;padding:3px 5px!important;box-shadow:none!important;outline:0!important} .invoice-payment-modes{padding:11px 12px;border:1px solid #dce6f2;border-radius:10px;background:#fbfcff} .invoice-payment-mode-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:2px 0 8px} .invoice-payment-mode-head small{color:#8190a3!important;font-size:10.5px!important} .invoice-payment-mode-head button{border:0;background:transparent;color:#316ac4;font-size:10.5px;font-weight:700;cursor:pointer} .invoice-payment-mode-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px} .invoice-payment-mode-grid label{display:flex;align-items:center;gap:7px;min-height:34px;padding:6px 8px;border:1px solid #dfe6ef;border-radius:7px;background:#fff;font-size:11px;font-weight:650;color:#3b4d65} .invoice-payment-mode-grid input{width:15px!important;height:15px!important;min-height:15px!important;accent-color:#3478df} .invoice-payment-mode-grid em{margin-left:auto;padding:2px 5px;border-radius:999px;background:#eef3fb;color:#607796;font-size:9px;font-style:normal} .invoice-payment-mode-grid p{grid-column:1/-1;margin:0;color:#8b97a8;font-size:11px} .invoice-payment-modes>small{margin-top:6px!important;font-size:10.5px!important}.invoice-payment-modes>small a{color:#316ac4!important} @media(max-width:820px){.invoice-payment-mode-grid{grid-template-columns:1fr}.invoice-contact-form-page .estimate-item-table{table-layout:auto!important}} /* ============================================================ SECTION: invoice-workspace.css ============================================================ */ .invoice-workspace{color:#304057}.invoice-workspace .invoice-heading{margin-bottom:16px}.invoice-workspace .invoice-stat-grid{margin-bottom:18px}.invoice-workspace .invoice-actions{margin-bottom:10px}.invoice-workspace .invoice-actions form{display:flex;gap:6px}.invoice-workspace .invoice-actions select{border:1px solid #d2dbe8;border-radius:5px;padding:7px;background:#fff}.invoice-workspace-grid{display:grid;grid-template-columns:minmax(420px,38%) minmax(0,1fr);gap:12px;align-items:start}.invoice-workspace-list,.invoice-workspace-detail{background:white;border:1px solid #dce3ed;border-radius:7px;box-shadow:0 2px 5px #1e293b19;overflow:hidden}.invoice-workspace-list .invoice-toolbar{display:flex;align-items:center;gap:8px;padding:16px}.invoice-workspace-list .invoice-toolbar select,.invoice-workspace-list .invoice-toolbar a,.invoice-workspace-list .invoice-search input,.invoice-workspace-list .invoice-search button{border:1px solid #d0dbea;border-radius:5px;background:white;color:#34465e;padding:7px 9px;font:inherit}.invoice-workspace-list .invoice-search{margin-left:auto;display:flex}.invoice-workspace-list .invoice-search input{max-width:160px}.invoice-workspace-list table,.invoice-panel table,.invoice-paper-items table{width:100%;border-collapse:collapse;font-size:13px}.invoice-workspace-list th,.invoice-panel th,.invoice-paper-items th{background:#f5f7fa;text-align:left;padding:12px 9px;border-bottom:1px solid #e2e8f0;white-space:nowrap}.invoice-workspace-list td,.invoice-panel td,.invoice-paper-items td{padding:14px 9px;border-bottom:1px solid #e8edf3;vertical-align:top}.invoice-workspace-list tr.active{background:#f1f6ff}.invoice-workspace-list tr.active td:first-child{border-left:3px solid #3776e8}.invoice-workspace-list td a,.invoice-paper-recipient a,.invoice-panel a{color:#285fb3}.invoice-list-scroll,.invoice-paper-items{overflow-x:auto}.invoice-workspace-list table{min-width:540px}.invoice-list-footer{padding:16px;display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12px;color:#6f7d8e}.invoice-tabs{display:flex;overflow-x:auto;background:#f3f5f8;white-space:nowrap}.invoice-tabs a{padding:16px 12px;color:#34455e;border-bottom:2px solid transparent}.invoice-tabs a.active{border-color:#304d79;background:white;font-weight:600}.invoice-tabs small{background:#e6eaf0;border-radius:20px;padding:2px 6px}.invoice-workspace-actions{display:flex;align-items:center;gap:7px;padding:14px 18px;border-bottom:1px solid #e4e9f0;flex-wrap:wrap}.invoice-workspace-actions .spacer{margin-left:auto}.invoice-workspace-actions>a,.invoice-workspace-actions>button,.invoice-workspace-actions summary,.invoice-panel button{border:1px solid #ccd6e4;background:white;color:#34455e;border-radius:5px;padding:7px 10px;cursor:pointer;font:inherit;font-size:13px}.invoice-workspace-actions .invoice-payment-button,.invoice-panel>button,.invoice-panel form>button{background:#20bb62;color:white;border-color:#20bb62}.invoice-workspace-actions details{position:relative}.invoice-workspace-actions details>div{position:absolute;z-index:20;right:0;top:33px;width:210px;background:#fff;border:1px solid #dbe3ed;box-shadow:0 6px 18px #1f293b22;padding:14px;border-radius:6px}.invoice-workspace-actions details label{display:grid;gap:6px}.invoice-workspace-actions details select{width:100%;margin-bottom:8px}.invoice-workspace-actions details form{margin-bottom:10px}.invoice-workspace-paper{padding:28px 23px 36px}.invoice-paper-head{display:flex;justify-content:space-between;gap:20px;min-height:250px}.invoice-paper-head h2{font-size:18px;color:#2861bc;margin:0 0 15px}.invoice-paper-head img{max-width:170px;max-height:55px;margin-bottom:12px}.invoice-paper-head address{font-style:normal;line-height:1.5;white-space:pre-line}.invoice-paper-recipient{text-align:right;line-height:1.5}.invoice-paper-recipient address{color:#728094;margin:6px 0 15px}.invoice-paper-items table{min-width:560px}.invoice-paper-items td small{display:block;margin-top:5px;color:#76859a;white-space:pre-line}.invoice-paper-totals{width:min(100%,370px);margin:35px 0 35px auto}.invoice-paper-totals>div{display:flex;justify-content:space-between;gap:15px;border-bottom:1px solid #e1e7ef;padding:11px 4px}.invoice-paper-totals .amount-due{color:#df3e4b;font-size:15px}.invoice-paper-note{border-top:1px solid #e4e9f0;padding-top:24px;white-space:pre-line}.invoice-panel{padding:25px;min-height:250px}.invoice-panel h2{font-size:18px;margin:0 0 16px}.invoice-panel>button{margin-bottom:15px}.invoice-panel table{margin-top:15px}.invoice-panel textarea,.invoice-panel input,.invoice-panel select,.invoice-dialog input,.invoice-dialog textarea,.invoice-dialog select{font:inherit;border:1px solid #cfd9e7;border-radius:5px;padding:9px;box-sizing:border-box;width:100%}.invoice-panel form{display:grid;gap:12px;margin-bottom:16px}.invoice-panel form button{justify-self:end}.invoice-panel label,.invoice-dialog label{display:grid;gap:6px}.invoice-entry{border-top:1px solid #e4e9ef;padding:15px 0}.invoice-entry small{margin-left:12px;color:#7a899c}.invoice-entry p{white-space:pre-line}.invoice-dialog{border:1px solid #d8e0ec;border-radius:10px;width:min(600px,95vw);padding:24px;color:#304057}.invoice-dialog::backdrop{background:#20304788}.invoice-dialog form{display:grid;gap:15px}.invoice-dialog h2{margin:0 0 6px;font-size:19px}.invoice-dialog footer{display:flex;justify-content:flex-end;gap:8px}.invoice-dialog footer button{padding:8px 12px;border:1px solid #ccd6e4;border-radius:5px;background:#fff;cursor:pointer}.invoice-dialog footer button:last-child{background:#263449;color:#fff}@media(max-width:1180px){.invoice-workspace-grid{grid-template-columns:1fr}.invoice-workspace-list table{min-width:0}}@media(max-width:650px){.invoice-workspace .invoice-heading,.invoice-paper-head{display:block}.invoice-paper-recipient{text-align:left;margin-top:30px}.invoice-workspace-list table{min-width:540px}.invoice-workspace-actions .spacer{display:none}}@media print{.customer-topbar,.customer-sidebar,.invoice-heading,.invoice-stat-grid,.invoice-actions,.invoice-workspace-list,.invoice-tabs,.invoice-workspace-actions,.invoice-dialog{display:none!important}.customer-content{padding:0!important}.invoice-workspace-grid{display:block}.invoice-workspace-detail{border:0;box-shadow:none}.invoice-workspace-paper{padding:0}} .invoice-related-link,.invoice-balance-label{padding:10px 23px;border-bottom:1px solid #e7edf3;font-size:13px}.invoice-related-link a{color:#2861bc}.invoice-balance-label{color:#c83c48}.invoice-logo-quick label{font-size:13px;cursor:pointer}.invoice-logo-quick input{display:none} .invoice-balance-label a{float:right;color:#2861bc;margin-left:12px} /* Modern invoice document refresh */ .invoice-workspace-detail{background:#f8fafc}.invoice-workspace-paper{background:#fff;margin:18px;border:1px solid #e3e9f2;border-radius:14px;box-shadow:0 14px 36px rgba(30,48,76,.08);padding:34px 34px 40px;overflow:hidden}.invoice-paper-head{position:relative;min-height:0;padding-bottom:28px;margin-bottom:20px;border-bottom:1px solid #e8edf4}.invoice-paper-head:before{content:"";position:absolute;left:-34px;right:-34px;top:-34px;height:5px;background:linear-gradient(90deg,#2563eb,#22c55e)}.invoice-paper-head h2{font-size:24px;color:#17233a;letter-spacing:-.02em;margin:0 0 18px}.invoice-paper-head img{max-width:190px;max-height:62px}.invoice-paper-head address{color:#66758a;font-size:12px}.invoice-paper-recipient{min-width:290px;padding:18px 20px;border-radius:12px;background:#f7f9fc;border:1px solid #e7edf5;text-align:left}.invoice-paper-recipient>strong{display:inline-block;color:#6b7a90;font-size:10px;letter-spacing:.11em;text-transform:uppercase;margin-top:2px}.invoice-paper-recipient>a,.invoice-paper-recipient>br+a{display:inline-block;margin:4px 0 3px;font-size:15px;font-weight:700}.invoice-paper-recipient address{margin:5px 0 14px;color:#6e7b8d;font-size:12px}.invoice-paper-recipient p{margin:12px 0 0;padding-top:12px;border-top:1px solid #e4e9f1;font-size:12px;color:#475569}.invoice-balance-label{margin:16px 18px 0;border:1px solid #dfe7f2;border-radius:10px;background:linear-gradient(135deg,#f8fbff,#f7fff9);padding:12px 15px;color:#526278}.invoice-balance-label strong{font-size:15px;color:#16263f}.invoice-paper-items{border:1px solid #e4eaf2;border-radius:11px;overflow:auto}.invoice-paper-items table{min-width:610px}.invoice-paper-items th{background:#17233a;color:#fff;border:0;font-size:11px;letter-spacing:.02em}.invoice-paper-items td{background:#fff}.invoice-paper-items tbody tr:hover td{background:#fafcff}.invoice-paper-items td:first-child{font-weight:600;color:#24344e}.invoice-paper-totals{background:#f8fafc;border:1px solid #e3e9f1;border-radius:12px;padding:9px 16px;width:min(100%,390px);margin-top:28px}.invoice-paper-totals>div{border-bottom:1px solid #e8edf4;padding:9px 2px}.invoice-paper-totals>div:last-child{border-bottom:0}.invoice-paper-totals span{color:#68778d}.invoice-paper-totals .invoice-total-row{font-size:16px;color:#17233a}.invoice-paper-totals .invoice-total-row b{font-size:18px}.invoice-paper-totals .amount-due{margin:5px -10px -2px;padding:12px 12px;border-radius:8px;background:#fff3f4;border:0;color:#c73544}.invoice-paper-meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:24px}.invoice-paper-meta>div{padding:12px 14px;border:1px solid #e4eaf2;border-radius:10px;background:#fbfcfe;min-width:0}.invoice-paper-meta span,.invoice-paper-meta strong{display:block}.invoice-paper-meta span{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:#8996a8;margin-bottom:5px}.invoice-paper-meta strong{font-size:12px;color:#26364f;overflow-wrap:anywhere}.invoice-paper-notes-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:28px}.invoice-paper-message{border:1px solid #e4eaf2;border-radius:12px;padding:17px 18px;background:#fff}.invoice-paper-message.client-note{background:#f7fbff;border-color:#dceafb}.invoice-paper-message.terms{background:#fbfaf7;border-color:#ebe6d8}.invoice-paper-message>span,.invoice-admin-note>span{display:block;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#60728a;margin-bottom:8px}.invoice-paper-message p,.invoice-admin-note p{white-space:pre-wrap;margin:0;line-height:1.65;color:#46566e;font-size:12px}.invoice-admin-note{margin-top:14px;border:1px dashed #d9cba4;border-radius:10px;background:#fffaf0;padding:14px 16px}.invoice-admin-note>span{color:#9a7117}.invoice-status{font-weight:700}.invoice-workspace-actions{background:#fff}.invoice-tabs{background:#f7f9fc}.invoice-tabs a.active{color:#1d4f91}@media(max-width:850px){.invoice-paper-meta{grid-template-columns:1fr 1fr}.invoice-paper-notes-grid{grid-template-columns:1fr}.invoice-workspace-paper{margin:10px;padding:26px 18px}.invoice-paper-head:before{left:-18px;right:-18px;top:-26px}.invoice-paper-recipient{min-width:0}}@media(max-width:520px){.invoice-paper-meta{grid-template-columns:1fr}}@media print{.invoice-workspace-paper{margin:0;border:0;box-shadow:none;border-radius:0}.invoice-paper-head:before{display:none}.invoice-admin-note{display:none!important}} /* Simple invoice document inspired by the supplied one-page invoice reference */ .invoice-simple-paper{background:#fff!important;color:#161616!important;border:1px solid #e4e7eb!important;border-radius:4px!important;box-shadow:0 6px 24px rgba(15,23,42,.06)!important;padding:42px 38px!important;position:relative!important;overflow:visible!important} .invoice-simple-paper:before{display:none!important} .invoice-simple-top{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:30px!important;padding:0 0 46px!important;border:0!important} .invoice-simple-brand img{display:block;max-width:210px!important;max-height:74px!important;width:auto!important;height:auto!important;object-fit:contain} .invoice-simple-number{display:flex;flex-direction:column;align-items:flex-end;text-align:right;gap:5px;min-width:180px} .invoice-simple-number>strong{display:inline-block;background:#050505;color:#fff;padding:5px 10px;font-size:19px;line-height:1.15;letter-spacing:.02em;font-weight:800} .invoice-simple-number>span{font-size:12px;line-height:1.3;font-weight:600;color:#303030} .invoice-simple-parties{display:grid!important;grid-template-columns:1fr 1fr!important;gap:70px!important;margin:0 16px 48px!important;padding:0!important;background:transparent!important;border:0!important;border-radius:0!important} .invoice-simple-parties section{min-width:0}.invoice-simple-parties strong{display:block;font-size:14px;line-height:1.4;color:#151515}.invoice-simple-parties h3{font-size:14px;margin:0 0 8px;padding-bottom:5px;border-bottom:1px solid #e5e5e5;color:#151515}.invoice-simple-parties address{font-style:normal;white-space:pre-line;color:#333!important;font-size:12px;line-height:1.45;margin-top:4px!important}.invoice-simple-parties a{color:#151515;text-decoration:none} .invoice-simple-table-wrap{overflow-x:auto;border:0!important;border-radius:0!important}.invoice-simple-table{width:100%;border-collapse:collapse;min-width:520px}.invoice-simple-table th{background:#050505!important;color:#fff!important;padding:11px 13px!important;font-size:12px!important;font-weight:700!important;text-align:right!important;border-right:1px solid #666}.invoice-simple-table th:first-child{text-align:left!important}.invoice-simple-table th:last-child{border-right:0}.invoice-simple-table td{background:#f5f5f5!important;color:#1d1d1d!important;padding:11px 13px!important;border:0!important;border-right:1px solid #fff!important;border-bottom:1px solid #fff!important;text-align:right!important;vertical-align:top}.invoice-simple-table td:first-child{text-align:left!important}.invoice-simple-table td:last-child{border-right:0!important}.invoice-simple-table td strong{display:block;font-size:12px}.invoice-simple-table td small{display:block;margin-top:3px;color:#777;font-size:10px;line-height:1.35} .invoice-simple-totals{width:min(340px,100%);margin:0 0 0 auto!important;padding:0!important;background:transparent!important;border:0!important;border-radius:0!important}.invoice-simple-totals>div{display:flex;justify-content:space-between;gap:28px;padding:8px 13px!important;border:0!important;background:#fff;color:#222;font-size:12px}.invoice-simple-totals>div span{color:#222!important}.invoice-simple-totals .invoice-simple-balance{background:#050505!important;color:#fff!important}.invoice-simple-totals .invoice-simple-balance span{color:#fff!important}.invoice-simple-totals .invoice-simple-balance strong{font-size:13px} .invoice-simple-copy{margin-top:30px;padding-top:18px;border-top:1px solid #ececec}.invoice-simple-copy section+section{margin-top:16px}.invoice-simple-copy h4{margin:0 0 5px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#555}.invoice-simple-copy p{margin:0;white-space:pre-wrap;font-size:12px;line-height:1.55;color:#333} .invoice-simple-signature{width:230px;margin:70px 0 8px auto;text-align:center;color:#222}.invoice-signature-space{height:32px}.invoice-signature-line{border-top:1px solid #555;margin-bottom:7px}.invoice-simple-signature strong{display:block;font-size:12px}.invoice-simple-signature small{display:block;margin-top:4px;color:#6b7280;font-size:10px;white-space:pre-wrap} .invoice-simple-paper .invoice-admin-note,.invoice-simple-paper .invoice-document-admin-note{margin-top:22px!important} @media(max-width:760px){.invoice-simple-paper{padding:28px 18px!important}.invoice-simple-top{padding-bottom:32px!important}.invoice-simple-parties{grid-template-columns:1fr!important;gap:25px!important;margin:0 0 32px!important}.invoice-simple-number{align-items:flex-start;text-align:left}.invoice-simple-signature{margin-top:48px}.invoice-simple-brand img{max-width:175px!important}} @media print{.invoice-simple-paper{border:0!important;box-shadow:none!important;padding:22px 24px!important}.invoice-simple-copy{break-inside:avoid}.invoice-simple-signature{break-inside:avoid}.invoice-simple-paper .invoice-admin-note,.invoice-simple-paper .invoice-document-admin-note{display:none!important}} /* High-contrast invoice workspace table headers */ .invoice-simple-table th, .invoice-paper-items th, .invoice-workspace-list th, .invoice-panel th{ color:#000!important; background:#f1f3f5!important; font-weight:800!important; border-bottom:2px solid #cfd6df!important; } /* Contacts-based Sales โ†’ Invoice view redesign */ .invoice-workspace{color:#263954}.invoice-contact-view-head{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:20px!important;margin-bottom:13px!important;padding:18px 20px!important;border:1px solid #dce4ef!important;border-radius:14px!important;background:linear-gradient(120deg,#fff 58%,#f5f8ff)!important;box-shadow:0 6px 20px rgba(31,48,76,.06)!important} .invoice-contact-view-copy{min-width:0}.invoice-contact-view-eyebrow{display:block;margin-bottom:7px;color:#5f6bd6;font-size:9.5px;font-weight:850;letter-spacing:.1em;text-transform:uppercase}.invoice-contact-view-title{display:flex;align-items:center;gap:11px}.invoice-contact-view-icon{width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:10px;background:#eef3ff;color:#356bc1}.invoice-contact-view-icon svg{width:18px}.invoice-contact-view-title h1{margin:0!important;font-size:22px!important;color:#1c2c44;letter-spacing:-.02em}.invoice-contact-view-title p{margin:4px 0 0!important;color:#7b899c!important;font-size:11px!important}.invoice-contact-view-title p a{color:#2f69bf;text-decoration:none;font-weight:700} .invoice-contact-view-head .invoice-money{display:flex;gap:7px!important}.invoice-contact-view-head .invoice-money a{min-width:100px!important;padding:9px 11px!important;border:1px solid #dae3ef!important;border-radius:9px!important;background:#fff!important;color:#53647a!important;box-shadow:none!important;text-decoration:none!important}.invoice-contact-view-head .invoice-money span,.invoice-contact-view-head .invoice-money b{display:block!important}.invoice-contact-view-head .invoice-money span{font-size:9px!important;font-weight:800!important;letter-spacing:.06em!important;text-transform:uppercase!important;color:#8895a6!important}.invoice-contact-view-head .invoice-money b{margin-top:3px!important;font-size:12px!important;color:#24364f!important} .invoice-workspace .invoice-stat-grid{gap:7px!important;margin-bottom:12px!important}.invoice-workspace .invoice-stat{min-height:48px!important;border:1px solid #e0e6ef!important;border-radius:9px!important;background:#fff!important;box-shadow:none!important;padding:9px 11px!important}.invoice-workspace .invoice-stat:before{display:none!important} .invoice-workspace .invoice-actions{min-height:56px!important;margin-bottom:12px!important;padding:9px 12px!important;border:1px solid #dde5ee!important;border-radius:11px!important;background:linear-gradient(90deg,#fbfcff,#f7f9ff)!important}.invoice-workspace .invoice-create,.invoice-workspace .invoice-batch,.invoice-workspace .invoice-filter-button{min-height:32px!important;border:1px solid #cdd8e5!important;border-radius:7px!important;background:#fff!important;color:#3b536f!important;font-size:11px!important;font-weight:700!important;box-shadow:none!important}.invoice-workspace .invoice-create{background:#1f4f95!important;border-color:#1f4f95!important;color:#fff!important} .invoice-workspace-grid{gap:13px!important}.invoice-workspace-list,.invoice-workspace-detail{border:1px solid #dce3ec!important;border-radius:12px!important;box-shadow:0 5px 18px rgba(31,48,76,.05)!important;overflow:hidden!important;background:#fff!important}.invoice-workspace-list .invoice-toolbar{min-height:58px!important;padding:9px 12px!important;background:linear-gradient(90deg,#fbfcff,#f7f9ff)!important;border-bottom:1px solid #e3e9f1!important}.invoice-workspace-list table{font-size:11px!important}.invoice-workspace-list th{height:39px!important;background:#f8fafc!important;color:#21314c!important;border-color:#e5eaf1!important;font-size:10px!important;font-weight:700!important;text-transform:none!important}.invoice-workspace-list td{height:49px!important;padding:8px 9px!important;border-color:#e9edf3!important;color:#34465f!important}.invoice-workspace-list tbody tr:hover td{background:#fbfcff!important}.invoice-workspace-list tbody tr.active td{background:#f2f6ff!important}.invoice-workspace-list a{color:#2e65b7}.invoice-client-link{font-weight:700!important;text-decoration:none!important} .invoice-tabs{min-height:46px!important;padding:0 12px!important;border-bottom:1px solid #e3e8ef!important;background:#fff!important}.invoice-tabs a{font-size:10.5px!important;color:#607087!important}.invoice-tabs a.active{color:#245eb8!important;border-bottom:2px solid #4c6fff!important}.invoice-workspace-actions{min-height:54px!important;padding:9px 13px!important;border-bottom:1px solid #e5eaf1!important;background:linear-gradient(90deg,#fff,#fafcff)!important}.invoice-workspace-actions>a,.invoice-workspace-actions>button,.invoice-workspace-actions details>summary{border:1px solid #d1dbe7!important;border-radius:7px!important;background:#fff!important;color:#455c78!important;font-size:10.5px!important;box-shadow:none!important}.invoice-payment-button{background:#1f4f95!important;border-color:#1f4f95!important;color:#fff!important} .invoice-balance-label{border-radius:9px!important;background:#f8fbff!important;color:#586a80!important}.invoice-view-tags{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:10px 18px 0;padding:8px 10px;border:1px solid #e1e7ef;border-radius:9px;background:#fbfcfe}.invoice-view-tags>span{margin-right:2px;color:#7e8b9d;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.07em}.invoice-view-tags b{display:inline-flex;align-items:center;min-height:23px;padding:0 8px;border-radius:999px;background:#eef3fb;color:#4a607d;font-size:9.5px;font-weight:700} .invoice-workspace-paper.invoice-simple-paper{margin:14px!important;border-radius:12px!important;border:1px solid #e0e6ee!important;box-shadow:0 8px 24px rgba(31,48,76,.06)!important} @media(max-width:1000px){.invoice-contact-view-head{align-items:flex-start!important;flex-direction:column!important}.invoice-contact-view-head .invoice-money{width:100%;flex-wrap:wrap}.invoice-contact-view-head .invoice-money a{flex:1}.invoice-workspace-grid{grid-template-columns:1fr!important}} /* ============================================================ SECTION: invoices.css ============================================================ */ .invoice-page,.invoice-batch-page{color:#1d2d43}.invoice-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin:0 0 24px}.invoice-heading h1{font-size:23px;line-height:1.2;margin:0 0 2px}.invoice-heading>div:first-child>a{font-size:14px;color:#2469d9}.invoice-heading>div:first-child>a span{font-size:18px}.invoice-money{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}.invoice-money a{border:1px solid #d7dfea;background:#fff;border-radius:6px;padding:5px 7px;font-size:14px;white-space:nowrap}.invoice-money a:nth-child(1) span{color:#17a45e}.invoice-money a:nth-child(2) span{color:#e44146}.invoice-money a:nth-child(3) span{color:#d28b14}.invoice-money b{font-size:14px;margin-left:6px}.invoice-stat-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-bottom:24px}.invoice-stat{border:1px solid #d5ddea;border-radius:8px;background:#fff;min-height:58px;padding:10px 14px;box-shadow:0 1px 3px #1e293b0d}.invoice-stat>span,.invoice-stat>strong{display:block;font-size:14px}.invoice-stat>strong{margin-top:5px}.invoice-stat small{font-weight:400;color:#637189;font-size:13px;margin-left:3px}.invoice-stat.unpaid>span{color:#ef4248}.invoice-stat.paid>span{color:#16aa61}.invoice-stat.partially-paid>span{color:#d68b12}.invoice-stat.overdue>span{color:#dd7a0c}.invoice-stat.draft>span{color:#43536c}.invoice-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px}.invoice-actions>div{display:flex;gap:5px}.invoice-actions a,.invoice-actions button,.invoice-toolbar a,.invoice-toolbar button{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid #cbd6e4;background:#fff;border-radius:7px;padding:8px 10px;font-size:14px;color:#25364f;box-shadow:0 1px 2px #1e293b0a;cursor:pointer}.invoice-actions svg,.invoice-toolbar svg{width:15px;height:15px}.invoice-actions .invoice-create{background:#1d2b40;color:#fff;border-color:#1d2b40;font-weight:600}.invoice-actions .invoice-create:hover{background:#0e1b2d}.invoice-filters{display:none;align-items:end;gap:10px;background:#fff;border:1px solid #d9e2ec;border-radius:7px;padding:14px;margin-bottom:10px}.invoice-filters.open{display:flex}.invoice-filters label,.invoice-batch-fields label{font-size:13px;font-weight:600;display:flex;flex-direction:column;gap:5px}.invoice-filters input,.invoice-filters select,.invoice-batch-fields input{height:34px;border:1px solid #cbd6e4;border-radius:5px;padding:0 9px;background:#fff;color:#25364f}.invoice-filters button,.invoice-batch-footer button{height:34px;background:#1d2b40;color:#fff;border:0;border-radius:5px;padding:0 13px;font-size:13px;font-weight:600;cursor:pointer}.invoice-filters>a{font-size:13px;color:#66788f;padding:9px}.invoice-table-card,.invoice-batch-card{background:#fff;border:1px solid #dce3eb;border-radius:8px;box-shadow:0 3px 5px #1e293b17;overflow:hidden}.invoice-toolbar{min-height:65px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 24px}.invoice-toolbar-controls,.invoice-search{display:flex;align-items:center}.invoice-toolbar-controls form{display:flex}.invoice-toolbar-controls select{height:31px;border:1px solid #cbd6e4;border-radius:6px 0 0 6px;padding:0 9px;background:#fff;min-width:74px;font-size:13px}.invoice-toolbar-controls a{height:31px;border-radius:0;padding:0 11px;font-size:13px}.invoice-toolbar-controls .invoice-refresh{border-radius:0 6px 6px 0;padding:0 9px}.invoice-search button{height:31px;width:42px;border-radius:6px 0 0 6px;box-shadow:none}.invoice-search input{height:31px;width:198px;border:1px solid #cbd6e4;border-left:0;border-radius:0 6px 6px 0;padding:0 10px;outline:none;font-size:13px}.invoice-table-scroll{overflow-x:auto}.invoice-data-table{width:100%;min-width:1050px;border-collapse:collapse;font-size:14px}.invoice-data-table th{height:41px;background:#f8fafc;font-weight:600;text-align:left;color:#25344d}.invoice-data-table th,.invoice-data-table td{padding:11px 10px;border-top:1px solid #e6ebf2}.invoice-data-table td{height:57px;white-space:nowrap;color:#263954}.invoice-data-table td:first-child a{color:#1c2d45;font-weight:500}.invoice-data-table td:first-child a:hover{color:#206cde;text-decoration:underline}.invoice-data-table th:nth-child(1){min-width:120px}.invoice-data-table th:nth-child(2),.invoice-data-table th:nth-child(3){min-width:110px}.invoice-data-table th:nth-child(4),.invoice-data-table th:nth-child(8){min-width:120px}.invoice-data-table th:nth-child(5){min-width:210px}.invoice-data-table th:nth-child(9){min-width:120px}.invoice-status{display:inline-block;border:1px solid #d6dfec;border-radius:5px;padding:4px 7px;font-size:13px}.invoice-status.status-paid{color:#159650;background:#f4fff8;border-color:#c6ebd1}.invoice-status.status-sent,.invoice-status.status-overdue{color:#c83237;background:#fff7f7;border-color:#ffd3d6}.invoice-status.status-partially-paid{color:#ac6d05;background:#fffaf0;border-color:#f3dfaa}.invoice-status.status-draft{color:#516178;background:#f8fafc}.invoice-empty{text-align:center;padding:36px!important;color:#77869b!important}.invoice-empty a{color:#236cda}.invoice-footer{min-height:63px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 24px;border-top:1px solid #e6ebf2;color:#65758b;font-size:14px}.invoice-footer>div{display:flex;align-items:center;gap:16px}.invoice-footer b{background:#e8ecf2;color:#273750;padding:8px 11px;border-radius:5px}.invoice-batch-page{max-width:1100px;margin:auto}.invoice-batch-card>p{margin:0;padding:18px 20px;color:#52637b;font-size:14px}.invoice-batch-fields{display:flex;gap:15px;padding:0 20px 20px}.invoice-batch-fields label{min-width:220px}.invoice-batch-footer{display:flex;justify-content:flex-end;padding:15px 20px;border-top:1px solid #e6ebf2}.invoice-batch-footer button:disabled{opacity:.5;cursor:not-allowed}@media(max-width:1200px){.invoice-stat-grid{grid-template-columns:repeat(3,1fr)}.invoice-money{max-width:60%}}@media(max-width:760px){.invoice-heading{display:block}.invoice-money{max-width:none;justify-content:flex-start;margin-top:12px}.invoice-stat-grid{grid-template-columns:repeat(2,1fr)}.invoice-toolbar{padding:10px;flex-wrap:wrap}.invoice-search{margin-left:auto}.invoice-filters.open{flex-wrap:wrap}.invoice-batch-fields{flex-wrap:wrap}}@media(max-width:450px){.invoice-stat-grid{grid-template-columns:1fr}.invoice-actions{align-items:flex-start}.invoice-actions>div{flex-wrap:wrap}.invoice-search input{width:150px}}@media print{.customer-topbar,.customer-sidebar,.invoice-actions,.invoice-filters,.invoice-toolbar,.invoice-footer{display:none!important}.customer-content{padding:0!important}.invoice-table-card{box-shadow:none}.invoice-data-table{min-width:0;font-size:11px}.invoice-data-table th,.invoice-data-table td{padding:5px}} /* Sales & Finance โ†’ Invoices โ€” Contacts-based list redesign */ .invoice-contacts-page{max-width:1600px;margin:0 auto;color:#263954} .invoice-contacts-heading{display:flex;align-items:center;justify-content:space-between;gap:22px;margin:0 0 14px;padding:18px 20px;border:1px solid #dce4ef;border-radius:14px;background:linear-gradient(120deg,#fff 62%,#f5f8ff 100%);box-shadow:0 6px 20px rgba(31,48,76,.055)} .invoice-contacts-eyebrow{display:block;margin-bottom:4px;color:#5f6bd6;font-size:10px;font-weight:850;letter-spacing:.1em;text-transform:uppercase}.invoice-contacts-heading h1{margin:0;font-size:24px;letter-spacing:-.025em;color:#18263b}.invoice-contacts-heading p{margin:5px 0 0;color:#76859a;font-size:12px} .invoice-contacts-heading-actions{display:flex;align-items:center;gap:8px}.invoice-contacts-heading-actions a{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border:1px solid #ced8e5;border-radius:8px;text-decoration:none;font-size:12px;font-weight:750}.invoice-contacts-heading-actions svg{width:14px;height:14px}.invoice-secondary-action{background:#fff;color:#34506f}.invoice-primary-action{background:#3157df;color:#fff!important;border-color:#3157df!important;box-shadow:0 6px 14px rgba(49,87,223,.18)} .invoice-contact-summary{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin-bottom:12px}.invoice-contact-summary a{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:46px;padding:0 13px;border:1px solid #dce4ed;border-radius:10px;background:#fff;color:#52647c;text-decoration:none;font-size:11px}.invoice-contact-summary a strong{font-size:14px;color:#21344f}.invoice-contact-summary a.active{border-color:#9bb5f0;background:#f2f6ff;color:#285fc1}.invoice-contact-summary a.active strong{color:#285fc1} .invoice-contact-filters{display:none;align-items:end;gap:10px;padding:12px 14px;margin-bottom:10px;border:1px solid #dce4ed;border-radius:10px;background:#fff}.invoice-contact-filters.open{display:flex}.invoice-contact-filters label{display:grid;gap:5px;font-size:11px;font-weight:700;color:#53647a}.invoice-contact-filters input,.invoice-contact-filters select{height:32px;border:1px solid #cfd9e5;border-radius:6px;padding:0 9px;background:#fff;color:#30435c}.invoice-contact-filters button,.invoice-contact-filters a{height:32px;display:inline-flex;align-items:center;padding:0 11px;border-radius:6px;font-size:11px;text-decoration:none}.invoice-contact-filters button{border:1px solid #3157df;background:#3157df;color:#fff}.invoice-contact-filters a{border:1px solid #cfd9e5;color:#51647d;background:#fff} .invoice-list-contact-card{background:#fff;border:1px solid #dce3ec;border-radius:12px;box-shadow:0 5px 18px rgba(31,48,76,.055);overflow:hidden}.invoice-contact-toolbar{min-height:62px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 14px;background:linear-gradient(90deg,#fbfcff,#f7f9ff);border-bottom:1px solid #e3e9f1}.invoice-contact-toolbar-left,.invoice-contact-search{display:flex;align-items:center}.invoice-contact-toolbar-left form{display:flex}.invoice-contact-toolbar select,.invoice-contact-toolbar-left>a,.invoice-contact-toolbar-left>button,.invoice-contact-search button,.invoice-contact-search input{height:32px;box-sizing:border-box;border:1px solid #cbd6e4;background:#fff;color:#34465e;font:inherit;font-size:11px}.invoice-contact-toolbar select{min-width:70px;border-radius:6px 0 0 6px;padding:0 8px}.invoice-contact-toolbar-left>a,.invoice-contact-toolbar-left>button{display:inline-flex;align-items:center;gap:5px;padding:0 9px;border-left:0;text-decoration:none;cursor:pointer}.invoice-contact-toolbar-left svg,.invoice-contact-search svg{width:13px;height:13px}.invoice-contact-refresh{border-radius:0 6px 6px 0!important}.invoice-contact-search button{width:38px;border-radius:6px 0 0 6px}.invoice-contact-search input{width:210px;border-left:0;border-radius:0 6px 6px 0;padding:0 10px;outline:0} .invoice-contact-table-wrap{overflow-x:auto}.invoice-contact-table{width:100%;min-width:1080px;border-collapse:collapse;font-size:12px}.invoice-contact-table th{height:40px;padding:0 11px;background:#f8fafc;color:#21314c;text-align:left;font-size:10.5px;font-weight:750;border-bottom:1px solid #e4eaf1}.invoice-contact-table th+th{border-left:1px solid #e7ebf1}.invoice-contact-table td{height:62px;padding:10px 11px;border-bottom:1px solid #e8edf3;color:#33465f;vertical-align:middle}.invoice-contact-table tbody tr:hover td{background:#fbfcff}.invoice-contact-identity{display:flex;align-items:center;gap:9px}.invoice-contact-avatar{width:32px;height:32px;flex:none;display:grid;place-items:center;border-radius:9px;background:#eef3ff;color:#4965d7}.invoice-contact-avatar svg{width:15px;height:15px}.invoice-contact-number{display:block;color:#1f4f95!important;font-weight:800;text-decoration:none}.invoice-contact-identity small{display:block;margin-top:2px;color:#8a98aa;font-size:9px}.invoice-contact-inline-actions{display:flex;align-items:center;gap:5px;margin-top:3px;font-size:9.5px}.invoice-contact-inline-actions a,.invoice-contact-inline-actions button{border:0;background:transparent;padding:0;color:#55729a!important;font:inherit;font-weight:650;text-decoration:none;cursor:pointer}.invoice-contact-inline-actions form{display:inline;margin:0}.invoice-contact-inline-actions span{color:#b5bfcc}.invoice-contact-inline-actions a:hover,.invoice-contact-inline-actions button:hover{color:#1d4ed8!important;text-decoration:underline} .invoice-contact-status{display:inline-flex;align-items:center;min-height:23px;padding:0 8px;border:1px solid #d7e0eb;border-radius:999px;background:#f7f9fc;color:#5a6b80;font-size:9.5px;font-weight:750}.invoice-contact-status.status-paid{background:#eefaf4;border-color:#d5f0e1;color:#198754}.invoice-contact-status.status-unpaid,.invoice-contact-status.status-sent{background:#fff8ec;border-color:#f1dfba;color:#a56d10}.invoice-contact-status.status-overdue,.invoice-contact-status.status-past-due{background:#fff2f2;border-color:#f3d0d0;color:#b63b45}.invoice-contact-status.status-draft{background:#f4f6f9;color:#66778b}.invoice-contact-status.status-partially-paid{background:#fff8e8;border-color:#eedca7;color:#936c12} .invoice-contact-options{display:flex;align-items:center;justify-content:flex-end;gap:5px}.invoice-contact-options form{display:inline;margin:0}.invoice-contact-options a,.invoice-contact-options button{width:30px;height:30px;display:grid;place-items:center;border:1px solid #d4dfec;border-radius:7px;background:#fff;color:#55729a;cursor:pointer}.invoice-contact-options svg{width:13px;height:13px}.invoice-contact-options a:hover,.invoice-contact-options button:hover{background:#f5f8fd;color:#285fc1;border-color:#b9c9df} .invoice-contact-footer{min-height:58px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 14px;color:#718096;font-size:11px}.invoice-contact-footer>div{display:flex;align-items:center;gap:12px}.invoice-contact-footer a{color:#66778d;text-decoration:none}.invoice-contact-footer b{display:grid;place-items:center;min-width:30px;height:30px;border-radius:7px;background:#eaf0f8;color:#25405f} @media(max-width:900px){.invoice-contact-summary{grid-template-columns:repeat(3,1fr)}.invoice-contacts-heading{align-items:flex-start;flex-direction:column}.invoice-contact-toolbar{flex-wrap:wrap}.invoice-contact-search{margin-left:auto}.invoice-contact-filters.open{flex-wrap:wrap}} @media(max-width:560px){.invoice-contact-summary{grid-template-columns:repeat(2,1fr)}.invoice-contacts-heading-actions{width:100%;flex-wrap:wrap}.invoice-contact-search input{width:150px}.invoice-contact-footer{padding:12px 14px;flex-wrap:wrap}} /* Invoice inline Delete โ€” exact Contacts-style visibility */ .invoice-contact-inline-actions form>button.invoice-contact-inline-delete{appearance:none!important;-webkit-appearance:none!important;display:inline!important;width:auto!important;height:auto!important;min-width:0!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;background-image:none!important;box-shadow:none!important;color:#55729a!important;font:inherit!important;font-size:inherit!important;font-weight:650!important;line-height:inherit!important;letter-spacing:normal!important;text-transform:none!important;text-decoration:none!important;cursor:pointer!important;vertical-align:baseline!important} .invoice-contact-inline-actions form>button.invoice-contact-inline-delete:hover,.invoice-contact-inline-actions form>button.invoice-contact-inline-delete:focus,.invoice-contact-inline-actions form>button.invoice-contact-inline-delete:active{border:0!important;background:transparent!important;background-image:none!important;box-shadow:none!important;color:#1d4ed8!important;text-decoration:underline!important;outline:none!important;transform:none!important} /* ============================================================ SECTION: lead-detail.css ============================================================ */ .lead-detail-page{width:100%;color:#26384d}.lead-detail-titlebar{display:flex;align-items:center;justify-content:space-between;margin:2px 0 18px}.lead-detail-titlebar>div{display:flex;align-items:center;gap:10px}.lead-detail-titlebar svg{width:20px}.lead-detail-titlebar h1{margin:0;font-size:20px;font-weight:500}.lead-converted{padding:8px 11px;border-radius:6px;background:#e8f8ef;color:#17804d;font-size:13px}.lead-detail-tabs{display:flex;gap:8px;background:#fff;border:1px solid #e1e7ef;border-radius:7px;padding:0 14px;margin-bottom:18px}.lead-detail-tabs a{padding:15px 10px 13px;border-bottom:2px solid transparent;color:#3c5269;text-decoration:none;font-size:13px}.lead-detail-tabs a.active{border-color:#334a61;font-weight:600}.lead-detail-tabs small{margin-left:4px;color:#8b98a7}.lead-detail-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px}.lead-detail-main,.lead-detail-side{display:flex;flex-direction:column;gap:16px}.lead-metric-row{display:grid;grid-template-columns:repeat(3,1fr);background:#fff;border:1px solid #e1e7ef;border-radius:7px}.lead-metric-row article{padding:17px;text-align:center;border-right:1px solid #edf0f4}.lead-metric-row article:last-child{border:0}.lead-metric-row strong,.lead-metric-row span{display:block}.lead-metric-row strong{font-size:17px;color:#91a0af}.lead-metric-row span{margin-top:5px;font-size:12px}.lead-panel,.lead-side-card{background:#fff;border:1px solid #e1e7ef;border-radius:7px;overflow:hidden}.lead-panel>header,.lead-side-card>header{min-height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;border-bottom:1px solid #edf1f5}.lead-panel>header>div,.lead-side-card>header>div{display:flex;align-items:center;gap:7px}.lead-panel>header svg,.lead-side-card>header svg{width:15px}.lead-panel>header strong,.lead-side-card>header strong{font-size:13px}.lead-link-button,.lead-side-add{display:inline-flex;align-items:center;gap:5px;border:0;background:none;color:#1764b0;cursor:pointer}.lead-link-button svg,.lead-side-add svg{width:14px}.lead-contact-item{display:grid;grid-template-columns:36px minmax(150px,1fr) minmax(220px,1fr) 28px;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid #edf1f5}.lead-contact-item:last-child{border:0}.lead-contact-primary a,.lead-contact-primary small{display:block}.lead-contact-primary a{color:#1764b0}.lead-contact-primary small{color:#8997a8;margin-top:3px}.lead-contact-meta{display:grid;gap:5px;font-size:12px}.lead-contact-meta span{display:flex;align-items:center;gap:6px}.lead-contact-meta svg{width:13px}.lead-contact-item form button{width:25px;height:25px;border:1px solid #e1e7ef;border-radius:50%;background:#fff;color:#94a0ae}.lead-event-calendar{padding:12px}.lead-calendar-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.lead-calendar-head h3{margin:0;font-size:16px;font-weight:500}.lead-calendar-head button{width:30px;height:30px;border:1px solid #dfe5ed;border-radius:5px;background:#fff}.lead-calendar-head svg{width:14px}.lead-calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);border:1px solid #e7ebf1;border-right:0;border-bottom:0}.lead-calendar-grid>*{min-height:44px;padding:7px;border-right:1px solid #e7ebf1;border-bottom:1px solid #e7ebf1;text-align:right;font-size:11px}.lead-calendar-grid b{min-height:auto;text-align:center;background:#f8fafc}.lead-calendar-grid .today{background:#fff8d9}.lead-event-strip{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.lead-event-strip span{padding:6px 8px;border-radius:5px;background:#eef5ff;font-size:11px}.lead-event-strip b{margin-right:5px}.lead-info-list{margin:0}.lead-info-list>div{display:grid;grid-template-columns:24px 1fr;gap:6px;padding:11px 13px;border-bottom:1px solid #edf1f5}.lead-info-list>div:last-child{border:0}.lead-info-list dt svg{width:14px}.lead-info-list dd{margin:0;font-size:12px}.lead-mini-list>div{padding:9px 13px;border-bottom:1px solid #edf1f5}.lead-mini-list b,.lead-mini-list small{display:block}.lead-mini-list b{font-size:12px}.lead-mini-list small{margin-top:3px;color:#8a98a8}.lead-side-add{padding:10px 13px}.lead-panel-empty{padding:28px 14px;text-align:center;color:#8c99a8;font-size:12px}.lead-tab-panel{min-height:220px}.lead-file-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:14px}.lead-file-grid article{display:flex;align-items:center;gap:9px;padding:11px;border:1px solid #e3e8ef;border-radius:6px}.lead-file-grid article>svg{width:22px;color:#6f8195}.lead-file-grid article div{min-width:0;flex:1}.lead-file-grid a,.lead-file-grid small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lead-file-grid a{color:#1764b0;text-decoration:none;font-size:12px}.lead-file-grid small{margin-top:3px;color:#8b98a7}.lead-file-grid button{border:0;background:none;color:#9aa5b3}.lead-file-grid button svg{width:14px}.lead-related-table>a{display:flex;justify-content:space-between;padding:12px 14px;border-bottom:1px solid #edf1f5;text-decoration:none;color:#31465c}.lead-related-table>a:last-child{border:0}.lead-related-table strong{color:#1764b0;font-size:13px}.lead-related-table span{font-size:12px;color:#7c8998}@media(max-width:1000px){.lead-detail-layout{grid-template-columns:1fr}.lead-detail-side{display:grid;grid-template-columns:repeat(2,1fr)}.lead-file-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:650px){.lead-detail-side{grid-template-columns:1fr}.lead-metric-row{grid-template-columns:1fr}.lead-metric-row article{border-right:0;border-bottom:1px solid #edf0f4}.lead-contact-item{grid-template-columns:36px 1fr}.lead-contact-meta{grid-column:2}.lead-file-grid{grid-template-columns:1fr}} /* ========================================================== Lead detail โ€” dashboard-style visual system ========================================================== */ .lead-detail-page{max-width:1700px;margin:0 auto;color:#20314a} .lead-detail-titlebar{position:relative;overflow:hidden;min-height:112px;margin:0 0 14px;padding:23px 25px;border:1px solid rgba(255,255,255,.25);border-radius:20px;background:linear-gradient(135deg,#312e81 0%,#2563eb 55%,#06b6d4 100%);box-shadow:0 18px 42px rgba(37,99,235,.18);color:#fff} .lead-detail-titlebar:before{content:"";position:absolute;right:-55px;top:-105px;width:230px;height:230px;border-radius:50%;background:rgba(255,255,255,.10)}.lead-detail-titlebar>div,.lead-detail-titlebar>form,.lead-detail-titlebar>.lead-converted{position:relative;z-index:1}.lead-detail-titlebar>div>svg{width:42px;height:42px;padding:10px;border-radius:13px;background:rgba(255,255,255,.16);color:#fff}.lead-detail-titlebar h1{color:#fff;font-size:29px;font-weight:850;letter-spacing:-.6px}.lead-detail-titlebar .lead-primary{min-height:40px;padding:0 15px;border:1px solid rgba(255,255,255,.28);border-radius:11px;background:#fff;color:#2543ae;box-shadow:0 8px 20px rgba(15,23,42,.13);font-weight:850}.lead-detail-titlebar .lead-primary:hover{transform:translateY(-1px);box-shadow:0 12px 24px rgba(15,23,42,.18)}.lead-converted{padding:9px 12px;border:1px solid rgba(255,255,255,.25);border-radius:10px;background:rgba(16,185,129,.22);color:#fff;font-weight:800;backdrop-filter:blur(5px)} .lead-detail-tabs{gap:6px;padding:6px;margin-bottom:16px;border-radius:15px;border-color:#e0e7f0;background:linear-gradient(100deg,#fff,#f8fbff 55%,#f7f4ff);box-shadow:0 8px 24px rgba(31,46,75,.06);overflow-x:auto}.lead-detail-tabs a{display:inline-flex;align-items:center;gap:5px;min-height:38px;padding:0 12px;border:0;border-radius:10px;color:#53657c;font-size:12px;font-weight:750;white-space:nowrap}.lead-detail-tabs a:hover{background:#eef5ff;color:#1d4ed8}.lead-detail-tabs a.active{background:linear-gradient(135deg,#4338ca,#2563eb);color:#fff;box-shadow:0 7px 17px rgba(37,99,235,.20)}.lead-detail-tabs a.active small{color:#dbeafe}.lead-detail-tabs small{margin-left:1px} .lead-detail-layout{grid-template-columns:minmax(0,1fr) 340px;gap:18px}.lead-detail-main,.lead-detail-side{gap:18px}.lead-metric-row{gap:12px;border:0;background:transparent}.lead-metric-row article{position:relative;overflow:hidden;min-height:104px;padding:18px;border:1px solid #dfe6ef!important;border-radius:16px;text-align:left;box-shadow:0 9px 25px rgba(31,46,75,.06)}.lead-metric-row article:after{content:"";position:absolute;right:-30px;top:-36px;width:90px;height:90px;border-radius:50%;background:rgba(255,255,255,.35)}.lead-metric-row article:nth-child(1){background:linear-gradient(135deg,#eef2ff,#e7efff)}.lead-metric-row article:nth-child(2){background:linear-gradient(135deg,#eafaff,#e5f7ff)}.lead-metric-row article:nth-child(3){background:linear-gradient(135deg,#f3edff,#eee8ff)}.lead-metric-row strong{font-size:28px;font-weight:900;color:#243c7a}.lead-metric-row span{margin-top:7px;color:#607086;font-size:12px;font-weight:750} .lead-panel,.lead-side-card{border-radius:17px;border-color:#e0e7f0;box-shadow:0 11px 30px rgba(31,46,75,.06)}.lead-panel>header,.lead-side-card>header{min-height:54px;padding:0 16px;background:linear-gradient(100deg,#fff,#f8fbff 58%,#f7f4ff);border-bottom-color:#e7ecf3}.lead-panel>header>div,.lead-side-card>header>div{gap:9px}.lead-panel>header>div>svg,.lead-side-card>header>div>svg{width:31px;height:31px;padding:7px;border-radius:9px;background:linear-gradient(135deg,#eef2ff,#e8f8ff);color:#4f63db}.lead-panel>header strong,.lead-side-card>header strong{color:#263850;font-size:13px;font-weight:850}.lead-link-button,.lead-side-add{min-height:32px;padding:0 9px;border:1px solid #d5e1ef;border-radius:8px;background:#fff;color:#315fc5;font-size:11px;font-weight:800}.lead-link-button:hover,.lead-side-add:hover{background:#eef5ff;border-color:#b7cae8;color:#1d4ed8} .lead-contact-item{grid-template-columns:42px minmax(150px,1fr) minmax(220px,1fr) 32px;padding:13px 15px}.lead-contact-item:hover{background:#f8fbff}.lead-contact-avatar{width:36px;height:36px;display:grid;place-items:center;border-radius:11px;background:linear-gradient(135deg,#eef2ff,#ddf8ff);color:#4054ca;font-weight:850}.lead-contact-primary a{font-weight:800;color:#203f72}.lead-contact-meta{color:#5f6f83}.lead-contact-item form button{width:29px;height:29px;border-radius:8px}.lead-contact-item form button:hover{background:#fff1f2;color:#dc2626;border-color:#fecaca} .lead-event-calendar{padding:15px}.lead-calendar-head{padding:2px 2px 10px}.lead-calendar-head h3{font-size:17px;font-weight:850;color:#2a3b54}.lead-calendar-head button{width:34px;height:34px;border-radius:9px}.lead-calendar-head button:hover{background:#eef5ff;color:#1d4ed8}.lead-calendar-grid{overflow:hidden;border-radius:11px;border-color:#e2e8f0}.lead-calendar-grid>*{min-height:49px}.lead-calendar-grid b{background:linear-gradient(90deg,#eef4ff,#f6f4ff);color:#53647a;font-weight:850}.lead-calendar-grid .today{background:linear-gradient(135deg,#fff4d8,#ffefb8);color:#a85f00;font-weight:850}.lead-event-strip span{border:1px solid #d8e5f5;border-radius:9px;background:#f2f7ff;color:#4d607a} .lead-side-card{overflow:hidden}.lead-info-list>div{padding:12px 14px}.lead-info-list>div:hover{background:#f8fbff}.lead-info-list dt svg{color:#697b92}.lead-info-list dd{color:#34465e}.lead-label{border-radius:999px;padding:4px 8px;background:color-mix(in srgb,var(--label-color,#64748b) 12%,white);border:1px solid color-mix(in srgb,var(--label-color,#64748b) 26%,#e2e8f0);font-size:10px;font-weight:800}.lead-mini-list>div{padding:11px 14px}.lead-mini-list>div:hover{background:#f8fbff}.lead-side-add{margin:10px 12px 12px;width:calc(100% - 24px);justify-content:center} .lead-file-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:15px}.lead-file-grid article{min-height:72px;padding:12px;border-radius:13px;border-color:#dde6f0;background:linear-gradient(135deg,#fff,#fbfdff);box-shadow:0 4px 12px rgba(31,46,75,.04)}.lead-file-grid article:hover{transform:translateY(-1px);border-color:#b9cceb;box-shadow:0 10px 20px rgba(31,46,75,.07)}.lead-file-grid article>svg{width:34px;height:34px;padding:8px;border-radius:10px;background:linear-gradient(135deg,#eef2ff,#e8f8ff);color:#4f63db}.lead-file-grid a{font-weight:800;color:#203f72}.lead-file-grid button{width:30px;height:30px;border:1px solid #e1e7ef;border-radius:8px;background:#fff}.lead-file-grid button:hover{background:#fff1f2;color:#dc2626;border-color:#fecaca}.lead-related-table>a{padding:14px 16px}.lead-related-table>a:hover{background:#f8fbff}.lead-related-table strong{color:#203f72;font-weight:800}.lead-panel-empty{padding:40px 16px;color:#8996a8} @media(max-width:1000px){.lead-detail-titlebar{align-items:flex-start;gap:15px}.lead-detail-layout{grid-template-columns:1fr}.lead-detail-side{grid-template-columns:repeat(2,1fr)}} @media(max-width:650px){.lead-detail-titlebar{min-height:0;align-items:flex-start;flex-direction:column;padding:20px 18px}.lead-detail-titlebar h1{font-size:25px}.lead-detail-tabs{padding:5px}.lead-detail-side{grid-template-columns:1fr}.lead-metric-row{grid-template-columns:1fr}.lead-contact-item{grid-template-columns:42px 1fr}.lead-file-grid{grid-template-columns:1fr}} /* Lead detail โ€” base design alignment */ .lead-detail-page{max-width:1600px;margin:0 auto;color:#263954}.lead-detail-titlebar{position:relative;overflow:visible;min-height:0;margin:0 0 14px;padding:18px 20px;border:1px solid #dce4ef;border-radius:14px;background:linear-gradient(120deg,#fff 62%,#f5f8ff 100%);box-shadow:0 6px 20px rgba(31,48,76,.055);color:#263954}.lead-detail-titlebar:before{display:none!important}.lead-detail-titlebar>div>svg{width:38px;height:38px;padding:9px;border-radius:10px;background:#eef4ff;color:#3157df}.lead-detail-titlebar h1{color:#18263b;font-size:24px;font-weight:800;letter-spacing:-.025em}.lead-detail-titlebar .lead-primary{min-height:36px;padding:0 12px;border:1px solid #3157df;border-radius:8px;background:#3157df;color:#fff;box-shadow:0 5px 12px rgba(49,87,223,.16);font-weight:750}.lead-detail-titlebar .lead-primary:hover{transform:none;background:#2748c7;box-shadow:0 6px 14px rgba(49,87,223,.18)}.lead-converted{padding:7px 10px;border:1px solid #b9e4c9;border-radius:8px;background:#f3fff7;color:#159b54;backdrop-filter:none;font-weight:750}.lead-detail-tabs{gap:3px;padding:5px;margin-bottom:14px;border:1px solid #dce4ed;border-radius:10px;background:#f6f8fb;box-shadow:none}.lead-detail-tabs a{min-height:34px;padding:0 10px;border-radius:7px;color:#53657c;font-size:11px;font-weight:700}.lead-detail-tabs a:hover{background:#fff;color:#285fc1}.lead-detail-tabs a.active{background:#fff;color:#3157df;box-shadow:0 1px 4px rgba(31,48,76,.08);border:1px solid #dce4ed}.lead-detail-tabs a.active small{color:#6f8198}.lead-detail-layout{grid-template-columns:minmax(0,1fr) 330px;gap:14px}.lead-detail-main,.lead-detail-side{gap:14px}.lead-metric-row{gap:8px}.lead-metric-row article{min-height:90px;padding:15px;border:1px solid #dce4ed!important;border-radius:10px;background:#fff!important;box-shadow:0 4px 14px rgba(31,48,76,.04)}.lead-metric-row article:after{display:none}.lead-metric-row strong{font-size:22px;color:#21344f}.lead-metric-row span{margin-top:5px;color:#6c7a8f;font-size:11px}.lead-panel,.lead-side-card{border:1px solid #dce4ed;border-radius:11px;box-shadow:0 4px 14px rgba(31,48,76,.04)}.lead-panel>header,.lead-side-card>header{min-height:50px;padding:0 14px;background:#f8fafc;border-bottom:1px solid #e4eaf1}.lead-panel>header>div>svg,.lead-side-card>header>div>svg{width:28px;height:28px;padding:6px;border-radius:8px;background:#eef4ff;color:#3157df}.lead-panel>header strong,.lead-side-card>header strong{color:#263850;font-size:12px;font-weight:750}.lead-link-button,.lead-side-add{min-height:30px;border:1px solid #d5e1ef;border-radius:7px;background:#fff;color:#3157df;font-size:10.5px;font-weight:700}.lead-link-button:hover,.lead-side-add:hover{background:#eef5ff;border-color:#abc6ef;color:#1d4ed8}.lead-contact-item:hover,.lead-info-list>div:hover,.lead-mini-list>div:hover,.lead-related-table>a:hover{background:#fbfdff}.lead-contact-avatar{border-radius:9px;background:#eef4ff;color:#3157df}.lead-contact-primary a,.lead-file-grid a,.lead-related-table strong{color:#254f91}.lead-calendar-head h3{font-size:15px;color:#2a3b54}.lead-calendar-grid{border-radius:8px}.lead-calendar-grid b{background:#f8fafc;color:#53647a}.lead-calendar-grid .today{background:#fff8e6;color:#a85f00}.lead-event-strip span{border:1px solid #dce4ed;border-radius:7px;background:#f6f9ff;color:#4d607a}.lead-label{border-radius:999px;padding:4px 7px;font-size:9.5px}.lead-file-grid{gap:9px;padding:13px}.lead-file-grid article{min-height:66px;padding:11px;border:1px solid #dce4ed;border-radius:9px;background:#fff;box-shadow:none}.lead-file-grid article:hover{transform:none;border-color:#b9cceb;box-shadow:0 4px 12px rgba(31,46,75,.05)}.lead-file-grid article>svg{width:31px;height:31px;padding:7px;border-radius:8px;background:#eef4ff;color:#3157df}.lead-file-grid button{border-radius:7px}.lead-panel-empty{padding:32px 14px}@media(max-width:1000px){.lead-detail-layout{grid-template-columns:1fr}.lead-detail-side{grid-template-columns:repeat(2,1fr)}}@media(max-width:650px){.lead-detail-titlebar{min-height:0;align-items:flex-start;flex-direction:column;padding:16px}.lead-detail-titlebar h1{font-size:22px}.lead-detail-tabs{padding:4px}.lead-detail-side{grid-template-columns:1fr}} /* ============================================================ SECTION: leads.css ============================================================ */ .lead-page{color:#26364d;max-width:1700px;margin:0 auto} .lead-shell{min-width:0} .lead-page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:14px} .lead-page-header h1{margin:0 0 8px;font-size:20px;line-height:1.2;color:#1f2937} .lead-status-summary{display:flex;align-items:center;gap:6px;flex-wrap:wrap} .lead-summary-pill{display:inline-flex;align-items:center;gap:4px;min-height:27px;padding:4px 8px;border:1px solid color-mix(in srgb,var(--pill-color,#64748b) 32%,#dbe3ed);border-radius:6px;background:color-mix(in srgb,var(--pill-color,#64748b) 8%,white);color:#4c5d73;text-decoration:none;font-size:12px;line-height:1} .lead-summary-pill b{color:var(--pill-color,#334155);font-size:12px} .lead-summary-pill.lost{--pill-color:#e74c3c;color:#d33d32;background:#fff7f7;border-color:#f2c4bf} .lead-header-search{position:relative;display:flex;align-items:center;width:220px;margin-top:1px} .lead-header-search input{width:100%;height:34px;border:1px solid #cfd8e5;border-radius:6px;background:#fff;padding:0 34px 0 11px;font:inherit;font-size:13px;color:#26364d;outline:none} .lead-header-search input:focus{border-color:#8aa9d3;box-shadow:0 0 0 2px #e9f1fb} .lead-header-search svg{position:absolute;right:10px;width:16px;height:16px;color:#8796aa} .lead-action-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:13px} .lead-action-group{display:flex;align-items:center;gap:6px} .lead-btn,.lead-icon-btn{height:34px;display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid #cbd6e4;border-radius:6px;background:#fff;color:#2a3b52;padding:0 11px;font:inherit;font-size:13px;text-decoration:none;cursor:pointer;transition:.15s ease} .lead-btn:hover,.lead-icon-btn:hover{border-color:#9eb0c8;background:#f8fafc} .lead-btn svg,.lead-icon-btn svg{width:15px;height:15px} .lead-icon-btn{width:35px;padding:0} .lead-icon-btn.active{background:#eef4ff;border-color:#b7cae8;color:#2767c7} .lead-dark{background:#202d40!important;border-color:#202d40!important;color:#fff!important;font-weight:700} .lead-dark:hover{background:#172235!important} .lead-outline{background:#fff} .lead-filter-menu{position:relative} .lead-filter-menu>summary{list-style:none} .lead-filter-menu>summary::-webkit-details-marker{display:none} .lead-filter-popover{position:absolute;right:0;top:42px;z-index:80;width:300px;padding:16px;border:1px solid #d9e1eb;border-radius:8px;background:#fff;box-shadow:0 14px 38px rgba(31,41,55,.16);display:grid;gap:12px} .lead-filter-popover label{display:grid;gap:6px;font-size:12px;font-weight:600;color:#53647a} .lead-filter-popover select{height:34px;border:1px solid #ccd7e5;border-radius:6px;background:#fff;color:#2a3a51;padding:0 9px;font:inherit} .lead-filter-popover footer{display:flex;align-items:center;justify-content:flex-end;gap:10px} .lead-filter-popover footer a{color:#6c7a8f;font-size:12px} .lead-filter-popover footer button{height:32px;border:0;border-radius:6px;padding:0 12px} .lead-kanban-sort{display:flex;align-items:center;gap:5px;margin:0 0 12px;font-size:12px;color:#53647a} .lead-kanban-sort a{color:#255fc3;text-decoration:none} .lead-kanban-sort a.active{font-weight:700;color:#173f84} .lead-kanban-wrap{overflow-x:auto;padding-bottom:12px;scrollbar-width:thin} .lead-kanban{display:flex;gap:7px;min-width:max-content;align-items:flex-start} .lead-column{width:340px;border-radius:5px;background:#e8edf3;overflow:hidden;box-shadow:inset 0 0 0 1px #dce3eb} .lead-column-head{height:44px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 13px;background:#40506a;color:#fff;font-size:13px;font-weight:700;border-top:3px solid var(--status-color,#64748b)} .lead-column-head>span{display:flex;align-items:center;gap:7px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .lead-column-head svg{width:15px;height:15px;flex:none} .lead-column-body{height:min(690px,calc(100vh - 290px));min-height:400px;overflow-y:auto;padding:10px;scrollbar-width:thin} .lead-card{position:relative;background:#fff;border:1px solid #dce3ed;border-radius:6px;padding:13px 13px 11px;margin-bottom:9px;box-shadow:0 1px 2px rgba(15,23,42,.04);transition:.15s ease} .lead-card:hover{border-color:#c6d4e4;box-shadow:0 4px 12px rgba(15,23,42,.06)} .lead-card.dragging{opacity:.55;transform:scale(.99)} .lead-card-head{display:flex;align-items:center;gap:6px;min-width:0} .lead-drag{display:grid;place-items:center;color:#b5c0ce;cursor:grab} .lead-drag svg{width:13px;height:13px} .lead-mini-avatar{width:23px;height:23px;flex:none;display:grid;place-items:center;border-radius:50%;background:#eef2f7;color:#78879a;font-size:10px;font-weight:800} .lead-card-head>a:not(.lead-card-edit){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#135ac3;text-decoration:none;font-size:13px;font-weight:600} .lead-card-edit{margin-left:auto;color:#7f8da0} .lead-card-edit svg{width:14px;height:14px} .lead-card-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;color:#66768b;font-size:11px} .lead-card-meta span{min-width:0} .lead-card-meta b{color:#35465d;font-weight:600} .lead-owner-badge{width:21px;height:21px;display:grid!important;place-items:center;border-radius:50%;background:#eaf2ff;color:#2a65bb!important;font-size:9px;font-weight:800;flex:none} .lead-card-tags{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin-top:10px} .lead-card-tags span,.lead-table-tag{display:inline-block;padding:3px 6px;border-radius:3px;background:color-mix(in srgb,var(--tag-color,#94a3b8) 14%,white);color:color-mix(in srgb,var(--tag-color,#64748b) 78%,black);border:1px solid color-mix(in srgb,var(--tag-color,#94a3b8) 28%,#e2e8f0);font-size:10px;font-weight:600;line-height:1.25;white-space:nowrap} .lead-card-footer{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:10px;color:#7c8a9c;font-size:10px} .lead-card-footer span{display:flex;align-items:center;gap:3px} .lead-card-footer svg{width:12px;height:12px} .lead-empty-column{margin:20px 8px;text-align:center;color:#8492a4;font-size:12px} .lead-list-card{background:#fff;border:1px solid #dce3ed;border-radius:7px;box-shadow:0 2px 6px rgba(30,41,59,.06);overflow:hidden} .lead-list-toolbar{display:flex;align-items:center;gap:0;padding:14px 15px;border-bottom:1px solid #e3e8ef} .lead-page-size select{height:32px;border:1px solid #ccd7e4;border-radius:5px 0 0 5px;background:#fff;padding:0 9px;color:#33465d;font:inherit;font-size:12px} .lead-list-toolbar>.lead-btn{border-radius:0;border-left:0;height:32px} .lead-list-toolbar>.lead-icon-btn{height:32px;width:33px;border-radius:0 5px 5px 0;border-left:0} .lead-table-search{position:relative;margin-left:auto;display:flex;align-items:center;width:210px} .lead-table-search svg{position:absolute;left:10px;width:15px;color:#8b98aa} .lead-table-search input{width:100%;height:32px;border:1px solid #ccd7e4;border-radius:5px;padding:0 9px 0 32px;font:inherit;font-size:12px;color:#33465d;outline:none} .lead-table-wrap{overflow:auto} .lead-table{width:100%;min-width:1320px;border-collapse:collapse;font-size:12px} .lead-table th{background:#f6f8fb;color:#111827!important;font-weight:800!important;text-align:left;padding:11px 9px;border-bottom:1px solid #dfe5ed;white-space:nowrap} .lead-table td{padding:11px 9px;border-bottom:1px solid #e9edf2;vertical-align:middle;color:#3b4c62;white-space:nowrap} .lead-table tbody tr:hover{background:#fbfcfe} .lead-table td small{display:block;margin-top:3px;color:#8896a8;font-size:10px;white-space:normal} .lead-check{width:32px;text-align:center!important} .lead-check input{width:15px;height:15px;accent-color:#2563eb} .lead-name{color:#174c97;text-decoration:none;font-weight:600} .lead-name:hover{text-decoration:underline} .lead-assigned{display:inline-flex;align-items:center;gap:7px} .lead-assigned>span{width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:#eaf2ff;color:#2f65b4;font-size:9px;font-weight:800} .lead-assigned em{font-style:normal;color:#53647a} .lead-inline-status{height:29px;max-width:130px;border:1px solid color-mix(in srgb,var(--status-color,#64748b) 40%,#d6dde7);border-radius:5px;background:color-mix(in srgb,var(--status-color,#64748b) 6%,white);color:#394a61;padding:0 7px;font:inherit;font-size:11px;cursor:pointer} .lead-status{display:inline-block;padding:4px 7px;border:1px solid color-mix(in srgb,var(--status-color,#64748b) 35%,#d5dde8);border-radius:5px;background:color-mix(in srgb,var(--status-color,#64748b) 7%,white);color:#394a61;font-size:11px;font-weight:600} .lead-row-actions{display:flex;align-items:center;gap:4px} .lead-row-actions a,.lead-row-actions button{width:28px;height:28px;display:grid;place-items:center;border:1px solid #d9e1eb;border-radius:50%;background:#fff;color:#7b899b;cursor:pointer} .lead-row-actions form{margin:0} .lead-row-actions svg{width:13px;height:13px} .lead-empty{text-align:center!important;color:#718097!important;padding:28px!important} .lead-pagination{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 15px;color:#6f7d8e;font-size:12px} .lead-pagination nav>div:first-child{display:none} .lead-pagination nav>div:last-child{display:flex} .lead-modal{position:fixed;inset:0;z-index:200;display:none;align-items:flex-start;justify-content:center;padding:22px;background:rgba(30,41,59,.52);overflow:auto} .lead-modal.is-open{display:flex} body.lead-modal-open{overflow:hidden} .lead-modal-card{width:min(620px,100%);margin:auto;background:#fff;border-radius:10px;box-shadow:0 24px 70px rgba(15,23,42,.28);overflow:hidden;color:#2e3e55} .lead-modal-large{width:min(920px,100%)} .lead-modal-card>header{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;border-bottom:1px solid #e5e9ef} .lead-modal-card>header h2{margin:0;font-size:16px;font-weight:700} .lead-modal-card>header button{border:0;background:none;color:#7f8c9d;cursor:pointer} .lead-modal-card>header svg{width:18px;height:18px} .lead-modal-body{padding:20px} .lead-modal-card>form>footer,.lead-modal-card>footer{display:flex;align-items:center;gap:8px;padding:14px 20px;border-top:1px solid #e6ebf1;background:#fff} .lead-modal-card>form>footer>span,.lead-modal-card>footer>span{flex:1} .lead-top-fields{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-bottom:16px} .lead-top-fields label,.lead-form-grid>label{display:grid;gap:6px;font-size:12px;color:#43536a} .lead-top-fields label>span,.lead-form-grid>label>span{font-weight:600} .lead-top-fields em,.lead-form-grid em{font-style:normal;color:#e34a4a} .lead-top-fields input,.lead-top-fields select,.lead-form-grid input,.lead-form-grid select,.lead-form-grid textarea,.lead-token-picker,.lead-label-create input{width:100%;box-sizing:border-box;border:1px solid #ccd6e3;border-radius:5px;background:#fff;color:#33465d;padding:8px 9px;font:inherit;font-size:12px;outline:none} .lead-top-fields input,.lead-top-fields select,.lead-form-grid input,.lead-form-grid select,.lead-token-picker{height:35px} .lead-top-fields input:focus,.lead-top-fields select:focus,.lead-form-grid input:focus,.lead-form-grid select:focus,.lead-form-grid textarea:focus,.lead-token-picker:focus{border-color:#8eabd0;box-shadow:0 0 0 2px #edf3fb} .lead-token-row{display:grid;grid-template-columns:75px 1fr;gap:10px;align-items:start;padding:12px 0 16px;border-top:1px solid #eef1f5;border-bottom:1px solid #eef1f5;margin-bottom:17px} .lead-token-row>label{font-size:12px;font-weight:700;color:#516177;padding-top:8px} .lead-token-field{min-height:35px;border:1px solid #ccd6e3;border-radius:5px;background:#fff;padding:4px;display:flex;align-items:center;gap:5px;flex-wrap:wrap} .lead-native-multi{display:none!important} .lead-token-list{display:flex;align-items:center;gap:4px;flex-wrap:wrap} .lead-token-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 5px 3px 7px;border-radius:4px;background:color-mix(in srgb,var(--token-color,#64748b) 12%,#f2f5f8);border:1px solid color-mix(in srgb,var(--token-color,#94a3b8) 25%,#dce3ec);color:#44566d;font-size:11px;font-weight:600} .lead-token-chip button{border:0;background:none;color:#7e8a9a;cursor:pointer;padding:0;font-size:15px;line-height:1} .lead-token-picker{width:auto!important;min-width:120px;border:0!important;box-shadow:none!important;padding:0 5px!important} .lead-form-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:24px;row-gap:12px} .lead-form-grid textarea{min-height:68px;resize:vertical} .lead-money-input{display:flex} .lead-money-input input{border-radius:5px 0 0 5px!important} .lead-money-input b{width:38px;height:35px;display:grid;place-items:center;border:1px solid #ccd6e3;border-left:0;border-radius:0 5px 5px 0;background:#f8fafc;color:#65748a} .lead-full-field{grid-column:1/-1} .lead-managers-field .lead-token-field{min-height:35px} .lead-form-flags{display:flex;align-items:center;gap:16px;margin-top:16px;padding-top:15px;border-top:1px solid #eef1f5;font-size:12px} .lead-form-flags label{display:flex;align-items:center;gap:6px} .lead-form-flags input{accent-color:#2563eb} .lead-errors{margin-top:14px;padding:10px 12px;border:1px solid #f1c0c5;border-radius:5px;background:#fff6f7;color:#b83441;font-size:12px} .lead-import-drop{position:relative;min-height:180px;border:1px dashed #b8c4d3;border-radius:7px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#69788d;cursor:pointer} .lead-import-drop svg{width:30px;height:30px} .lead-import-drop strong{color:#35465d} .lead-import-drop input{position:absolute;inset:0;opacity:0;cursor:pointer} .lead-label-create{padding-bottom:16px;border-bottom:1px solid #e8edf3} .lead-color-palette{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px} .lead-color-palette label{cursor:pointer} .lead-color-palette input{display:none} .lead-color-palette span{width:18px;height:18px;display:block;border-radius:2px;background:var(--c)} .lead-color-palette input:checked+span{outline:2px solid #202d40;outline-offset:2px} .lead-label-input{display:flex;gap:8px} .lead-label-input input{height:35px} .lead-existing-labels{display:flex;gap:6px;flex-wrap:wrap;padding-top:16px} .lead-existing-labels form{display:flex;align-items:center;gap:2px} .lead-existing-labels span{padding:4px 7px;border-radius:4px;background:color-mix(in srgb,var(--tag-color,#94a3b8) 13%,white);border:1px solid color-mix(in srgb,var(--tag-color,#94a3b8) 30%,#e2e8f0);font-size:11px} .lead-existing-labels button{border:0;background:none;color:#8794a4;cursor:pointer} .lead-existing-labels svg{width:12px;height:12px} @media(max-width:1100px){.lead-page-header{flex-direction:column}.lead-header-search{width:100%;max-width:360px}.lead-top-fields{grid-template-columns:1fr 1fr}.lead-top-fields label:last-child{grid-column:1/-1}} @media(max-width:760px){.lead-action-row{align-items:flex-start;flex-direction:column}.lead-filter-menu{align-self:flex-end}.lead-page-header h1{font-size:19px}.lead-status-summary{gap:4px}.lead-summary-pill{font-size:11px}.lead-column{width:300px}.lead-form-grid,.lead-top-fields{grid-template-columns:1fr}.lead-top-fields label:last-child{grid-column:auto}.lead-token-row{grid-template-columns:1fr}.lead-token-row>label{padding-top:0}.lead-modal{padding:8px}.lead-modal-card{margin:8px auto}.lead-modal-body{padding:16px}.lead-form-grid{row-gap:10px}} @media print{.lead-page-header,.lead-action-row,.lead-list-toolbar,.lead-pagination,.lead-row-actions{display:none!important}.lead-list-card{border:0;box-shadow:none}.lead-table-wrap{overflow:visible}.lead-table{min-width:0;font-size:10px}} /* Leads visibility + sort controls */ .lead-action-group .lead-dark, .lead-action-group .lead-dark:visited{ background:#1f2d3d!important; border-color:#1f2d3d!important; color:#fff!important; font-weight:800!important; box-shadow:0 1px 2px rgba(15,23,42,.14); } .lead-action-group .lead-dark svg{color:#fff!important;stroke:#fff!important} .lead-kanban-sort{ min-height:38px; display:flex; align-items:center; gap:7px; margin:0 0 12px; padding:6px 10px; border:1px solid #d7e0eb; border-radius:6px; background:#fff; color:#111827!important; font-size:12px; font-weight:700; } .lead-kanban-sort>span:first-child{color:#111827!important;font-weight:800} .lead-kanban-sort>span:not(:first-child){color:#94a3b8!important} .lead-kanban-sort a, .lead-kanban-sort a:visited{ display:inline-flex; align-items:center; min-height:26px; padding:0 7px; border-radius:4px; color:#0b57b7!important; font-weight:700!important; text-decoration:none!important; } .lead-kanban-sort a:hover{background:#eef4ff!important;color:#083f86!important} .lead-kanban-sort a.active{ background:#245fc4!important; color:#fff!important; font-weight:800!important; } .lead-kanban-sort a.active:visited{color:#fff!important} /* ========================================================== Leads โ€” dashboard-style visual system ========================================================== */ .lead-page{max-width:1700px;margin:0 auto;color:#20314a} .lead-page-header{position:relative;overflow:hidden;align-items:center;margin-bottom:14px;padding:24px 26px;border:1px solid rgba(255,255,255,.24);border-radius:20px;background:linear-gradient(135deg,#312e81 0%,#2563eb 54%,#06b6d4 100%);box-shadow:0 18px 42px rgba(37,99,235,.19);color:#fff} .lead-page-header:before{content:"";position:absolute;width:240px;height:240px;right:-65px;top:-110px;border-radius:50%;background:rgba(255,255,255,.10)} .lead-page-header:after{content:"";position:absolute;width:150px;height:150px;right:155px;bottom:-115px;border-radius:50%;background:rgba(255,255,255,.08)} .lead-page-header>div,.lead-page-header form{position:relative;z-index:1} .lead-page-header h1{margin:0 0 12px;color:#fff;font-size:30px;font-weight:850;letter-spacing:-.7px} .lead-status-summary{gap:8px} .lead-summary-pill{min-height:34px;padding:7px 11px;border:1px solid rgba(255,255,255,.24)!important;border-radius:10px;background:rgba(255,255,255,.13)!important;color:#eff6ff!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.09);backdrop-filter:blur(8px);font-weight:700} .lead-summary-pill b{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:7px;background:#fff;color:var(--pill-color,#315fc5)!important;font-size:11px;box-shadow:0 3px 9px rgba(15,23,42,.12)} .lead-summary-pill:hover{transform:translateY(-1px);background:rgba(255,255,255,.2)!important} .lead-summary-pill.lost{background:rgba(244,63,94,.18)!important;color:#fff!important;border-color:rgba(255,255,255,.26)!important}.lead-summary-pill.lost b{color:#e11d48!important} .lead-header-search{width:min(330px,30vw);margin:0}.lead-header-search input{height:43px;border:1px solid rgba(255,255,255,.34);border-radius:12px;background:rgba(255,255,255,.94);padding:0 40px 0 13px;color:#20314a;box-shadow:0 10px 24px rgba(15,23,42,.12)}.lead-header-search input:focus{border-color:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.16),0 12px 26px rgba(15,23,42,.12)}.lead-header-search svg{right:13px;color:#50617a} .lead-action-row{min-height:64px;padding:10px 12px;margin-bottom:14px;border:1px solid #e2e8f0;border-radius:16px;background:linear-gradient(100deg,#fff 0%,#f8fbff 54%,#f6f3ff 100%);box-shadow:0 8px 24px rgba(31,46,75,.06)} .lead-action-group{gap:8px;flex-wrap:wrap}.lead-btn,.lead-icon-btn{height:38px;border-radius:10px;border-color:#d3deeb;background:#fff;font-size:12px;font-weight:750;box-shadow:0 2px 7px rgba(15,23,42,.04)}.lead-btn:hover,.lead-icon-btn:hover{border-color:#a9bfdf;background:#f3f7ff;color:#1d4ed8;transform:translateY(-1px)} .lead-action-group .lead-dark,.lead-dark{background:linear-gradient(135deg,#4338ca,#2563eb)!important;border-color:#3f46d8!important;box-shadow:0 8px 18px rgba(37,99,235,.2)!important}.lead-action-group .lead-dark:hover,.lead-dark:hover{background:linear-gradient(135deg,#3730a3,#1d4ed8)!important;box-shadow:0 11px 23px rgba(37,99,235,.26)!important}.lead-icon-btn.active{background:linear-gradient(135deg,#eef2ff,#e7f8ff);border-color:#b8c8f4;color:#3346c6} .lead-filter-popover{width:330px;padding:17px;border-radius:15px;border-color:#dde5f0;box-shadow:0 24px 65px rgba(15,23,42,.20)}.lead-filter-popover:before{content:"Filters";display:block;margin-bottom:1px;color:#22334d;font-size:15px;font-weight:850}.lead-filter-popover label{color:#42546e;font-weight:750}.lead-filter-popover select{height:39px;border-radius:9px;border-color:#cbd7e6}.lead-filter-popover footer{padding-top:5px;border-top:1px solid #edf1f5} .lead-list-card{border-radius:18px;border-color:#e0e7f0;box-shadow:0 12px 34px rgba(31,46,75,.07)}.lead-list-toolbar{min-height:65px;padding:12px 16px;background:linear-gradient(100deg,#fff,#f8fbff 56%,#f7f4ff);border-bottom-color:#e6ebf2}.lead-page-size select,.lead-list-toolbar>.lead-btn,.lead-list-toolbar>.lead-icon-btn,.lead-table-search input{height:36px}.lead-page-size select{border-radius:9px 0 0 9px}.lead-list-toolbar>.lead-icon-btn{border-radius:0 9px 9px 0}.lead-table-search{width:min(285px,30vw)}.lead-table-search input{border-radius:9px;padding-left:35px} .lead-table{font-size:12.2px}.lead-table th{height:44px;padding:10px 11px;background:linear-gradient(90deg,#eef4ff,#f6f4ff)!important;color:#344760!important;font-size:10.5px!important;font-weight:850!important;letter-spacing:.045em;text-transform:uppercase}.lead-table td{height:59px;padding:10px 11px;border-bottom-color:#edf1f5;color:#34455d}.lead-table tbody tr{transition:.14s ease}.lead-table tbody tr:hover td{background:#f8fbff}.lead-name{color:#203f72;font-weight:800}.lead-assigned>span{width:29px;height:29px;background:linear-gradient(135deg,#e8efff,#def7ff);color:#394ec3;box-shadow:0 0 0 2px #fff,0 2px 7px rgba(37,99,235,.12)}.lead-inline-status,.lead-status{border-radius:999px;font-weight:800}.lead-table-tag{border-radius:999px;padding:4px 8px}.lead-row-actions a,.lead-row-actions button{width:31px;height:31px;border-radius:9px;border-color:#dce4ef}.lead-row-actions a:hover,.lead-row-actions button:hover{background:#eef5ff;color:#1d4ed8;border-color:#b8cbed;transform:translateY(-1px)} .lead-pagination{min-height:61px;padding:12px 16px;background:#fbfcff;border-top:1px solid #e7ecf3} .lead-kanban-sort{min-height:46px;padding:8px 12px;border-radius:13px;border-color:#dfe6f0;background:linear-gradient(90deg,#fff,#f8fbff);box-shadow:0 5px 16px rgba(31,46,75,.04)}.lead-kanban-sort a{min-height:30px;border-radius:8px;padding:0 9px}.lead-kanban-sort a.active{background:linear-gradient(135deg,#4338ca,#2563eb)!important;box-shadow:0 5px 12px rgba(37,99,235,.18)} .lead-kanban{gap:12px}.lead-column{width:352px;border:1px solid #dfe6f0;border-radius:16px;background:#f4f7fb;box-shadow:0 10px 28px rgba(31,46,75,.07);overflow:hidden}.lead-column-head{height:54px;padding:0 14px;border-top:0;background:linear-gradient(135deg,color-mix(in srgb,var(--status-color,#64748b) 82%,#1e293b),color-mix(in srgb,var(--status-color,#64748b) 62%,#2563eb));box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}.lead-column-head:before{content:"";width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.17)}.lead-column-head>span{flex:1}.lead-column-body{padding:11px;height:min(700px,calc(100vh - 300px))}.lead-card{border-radius:13px;border-color:#dfe6ef;border-left:4px solid var(--status-color,#64748b);padding:13px 13px 12px;box-shadow:0 4px 13px rgba(15,23,42,.05)}.lead-card:hover{transform:translateY(-2px);box-shadow:0 11px 23px rgba(15,23,42,.09);border-color:#cad6e5}.lead-mini-avatar{width:29px;height:29px;background:linear-gradient(135deg,#eef2ff,#dff7ff);color:#4055ca}.lead-card-head>a:not(.lead-card-edit){font-weight:800;color:#203f72}.lead-card-meta{padding-top:7px;border-top:1px dashed #e6ebf2}.lead-card-tags span{border-radius:999px;padding:4px 7px}.lead-owner-badge{width:26px;height:26px;background:linear-gradient(135deg,#e6efff,#ddf8ff);color:#3a50c5!important} .lead-modal{background:rgba(15,23,42,.58);backdrop-filter:blur(5px)}.lead-modal-card{border:1px solid rgba(255,255,255,.75);border-radius:18px;box-shadow:0 30px 80px rgba(15,23,42,.28)}.lead-modal-card>header{height:64px;padding:0 21px;background:linear-gradient(100deg,#f8fbff,#f7f4ff);border-bottom-color:#e6ebf2}.lead-modal-card>header h2{color:#1f3049;font-size:18px;font-weight:850}.lead-modal-card>header button{width:34px;height:34px;border:1px solid #dce4ef;border-radius:10px;background:#fff;color:#64748b}.lead-modal-body,.lead-form{background:#fff}.lead-modal-card footer{background:linear-gradient(90deg,#fbfcff,#f7f5ff);border-top:1px solid #e6ebf2}.lead-modal-card input,.lead-modal-card select,.lead-modal-card textarea,.lead-token-field{border-radius:9px!important;border-color:#cbd7e5!important}.lead-modal-card input:focus,.lead-modal-card select:focus,.lead-modal-card textarea:focus{border-color:#84a9eb!important;box-shadow:0 0 0 4px rgba(37,99,235,.08)!important}.lead-import-drop{border-radius:13px;background:linear-gradient(180deg,#fbfdff,#f7f9fc);border-color:#b8c8dc}.lead-import-drop:hover{border-color:#769de0;background:#f4f8ff}.lead-color-palette span{border-radius:999px} @media(max-width:1100px){.lead-page-header{align-items:flex-start}.lead-header-search{width:100%;max-width:430px}.lead-status-summary{max-width:100%}} @media(max-width:760px){.lead-page-header{padding:20px 18px;border-radius:16px}.lead-page-header h1{font-size:25px}.lead-action-row{align-items:stretch}.lead-filter-menu{align-self:stretch}.lead-filter-menu>summary{width:100%}.lead-column{width:310px}.lead-table-search{width:100%;margin-left:0}.lead-list-toolbar{flex-wrap:wrap;gap:8px}.lead-list-toolbar>.lead-btn{border-left:1px solid #ccd7e4;border-radius:9px}.lead-list-toolbar>.lead-icon-btn{border-left:1px solid #ccd7e4;border-radius:9px}} /* Leads โ€” base design alignment */ .lead-page{max-width:1600px;margin:0 auto;color:#263954} .lead-page-header{position:relative;overflow:visible;display:flex;align-items:center;justify-content:space-between;gap:22px;min-height:0;margin:0 0 14px;padding:18px 20px;border:1px solid #dce4ef;border-radius:14px;background:linear-gradient(120deg,#fff 62%,#f5f8ff 100%);box-shadow:0 6px 20px rgba(31,48,76,.055);color:#263954} .lead-page-header:before,.lead-page-header:after{display:none!important}.lead-page-header h1{margin:0 0 8px;color:#18263b;font-size:24px;font-weight:800;letter-spacing:-.025em}.lead-status-summary{gap:6px}.lead-summary-pill{min-height:29px;padding:5px 9px;border:1px solid color-mix(in srgb,var(--pill-color,#64748b) 24%,#dce4ed)!important;border-radius:8px;background:#fff!important;color:#52647c!important;box-shadow:none!important;backdrop-filter:none!important;font-size:11px;font-weight:700}.lead-summary-pill b{display:inline;min-width:0;height:auto;padding:0;background:transparent;box-shadow:none;color:var(--pill-color,#334155)!important;font-size:12px}.lead-summary-pill:hover{transform:none;background:#f8fbff!important;border-color:#b8c9df!important}.lead-summary-pill.lost{border-color:#f1c8c8!important;background:#fff8f8!important;color:#b84343!important}.lead-summary-pill.lost b{color:#c43f4d!important}.lead-header-search{width:260px;margin:0}.lead-header-search input{height:36px;border:1px solid #cbd6e4;border-radius:8px;background:#fff;padding:0 38px 0 11px;color:#30435c;box-shadow:none;font-size:12px}.lead-header-search input:focus{border-color:#8faee7;box-shadow:0 0 0 3px rgba(49,87,223,.08)}.lead-header-search svg{right:11px;color:#6f8198;width:14px;height:14px} .lead-action-row{min-height:0;margin:0 0 12px;padding:10px 12px;border:1px solid #dce4ed;border-radius:10px;background:#fff;box-shadow:0 3px 12px rgba(31,48,76,.035)}.lead-action-group{gap:6px}.lead-btn,.lead-icon-btn{height:34px;border:1px solid #cbd6e4;border-radius:7px;background:#fff;color:#34465e;box-shadow:none;font-size:11px;font-weight:700}.lead-btn:hover,.lead-icon-btn:hover{transform:none;border-color:#9fb5d2;background:#f5f8ff;color:#285fc1}.lead-action-group .lead-dark,.lead-dark{background:#3157df!important;border-color:#3157df!important;color:#fff!important;box-shadow:0 5px 12px rgba(49,87,223,.16)!important}.lead-action-group .lead-dark:hover,.lead-dark:hover{background:#2748c7!important;border-color:#2748c7!important;box-shadow:0 6px 14px rgba(49,87,223,.18)!important}.lead-icon-btn.active{background:#f1f5ff;border-color:#9eb7ef;color:#3157df}.lead-filter-popover{width:310px;padding:15px;border:1px solid #dce4ed;border-radius:10px;box-shadow:0 14px 34px rgba(31,48,76,.14)}.lead-filter-popover:before{font-size:13px;color:#263954}.lead-filter-popover label{font-size:11px;color:#53647a}.lead-filter-popover select{height:34px;border-radius:6px} .lead-list-card{border:1px solid #dce3ec;border-radius:12px;background:#fff;box-shadow:0 5px 18px rgba(31,48,76,.055);overflow:hidden}.lead-list-toolbar{min-height:62px;padding:10px 14px;background:linear-gradient(90deg,#fbfcff,#f7f9ff);border-bottom:1px solid #e3e9f1}.lead-page-size select,.lead-list-toolbar>.lead-btn,.lead-list-toolbar>.lead-icon-btn,.lead-table-search input{height:32px}.lead-page-size select{border-radius:6px 0 0 6px;font-size:11px}.lead-list-toolbar>.lead-icon-btn{border-radius:0 6px 6px 0}.lead-table-search{width:220px}.lead-table-search input{border-radius:6px;padding-left:33px;font-size:11px}.lead-table{font-size:12px}.lead-table th{height:40px;padding:0 11px;background:#f8fafc!important;color:#21314c!important;font-size:10.5px!important;font-weight:750!important;letter-spacing:0;text-transform:none;border-bottom:1px solid #e4eaf1}.lead-table td{height:56px;padding:9px 11px;color:#34455d;border-bottom:1px solid #edf1f5}.lead-table tbody tr:hover td{background:#fbfdff}.lead-name{color:#254f91;font-weight:750}.lead-assigned>span{width:28px;height:28px;background:#eef4ff;color:#3157df;box-shadow:0 0 0 2px #fff}.lead-inline-status,.lead-status{border-radius:999px;font-size:10.5px;font-weight:750}.lead-table-tag{border-radius:999px;padding:4px 7px}.lead-row-actions a,.lead-row-actions button{width:30px;height:30px;border:1px solid #dbe4ef;border-radius:7px;background:#fff;color:#45638d}.lead-row-actions a:hover,.lead-row-actions button:hover{transform:none;border-color:#abc6ef;background:#eef5ff;color:#1d4ed8}.lead-pagination{min-height:58px;padding:11px 14px;background:#fff;border-top:1px solid #e7ecf3;color:#68788b;font-size:11px} .lead-kanban-sort{min-height:40px;margin:0 0 10px;padding:6px 10px;border:1px solid #dce4ed;border-radius:9px;background:#fff;box-shadow:none;font-size:11px}.lead-kanban-sort a{min-height:27px;padding:0 8px;border-radius:6px}.lead-kanban-sort a.active{background:#3157df!important;color:#fff!important;box-shadow:none!important}.lead-kanban{gap:9px}.lead-column{width:340px;border:1px solid #dce4ed;border-radius:11px;background:#f6f8fb;box-shadow:0 4px 14px rgba(31,48,76,.045)}.lead-column-head{height:46px;padding:0 13px;border-top:3px solid var(--status-color,#64748b);background:#fff;color:#30435c;box-shadow:none;font-size:11px;font-weight:750}.lead-column-head:before{width:7px;height:7px;background:var(--status-color,#64748b);box-shadow:none}.lead-column-head svg{color:#718096}.lead-column-body{padding:9px;height:min(690px,calc(100vh - 290px))}.lead-card{border:1px solid #dfe6ef;border-left:3px solid var(--status-color,#64748b);border-radius:9px;padding:11px 12px;box-shadow:0 2px 7px rgba(15,23,42,.04)}.lead-card:hover{transform:none;border-color:#cbd8e7;box-shadow:0 5px 14px rgba(15,23,42,.06)}.lead-mini-avatar{width:27px;height:27px;background:#eef4ff;color:#3157df}.lead-card-head>a:not(.lead-card-edit){color:#254f91;font-weight:750}.lead-card-meta{padding-top:6px;border-top:1px dashed #e8edf3}.lead-owner-badge{width:24px;height:24px;background:#eef4ff;color:#3157df!important} .lead-modal{background:rgba(15,23,42,.48);backdrop-filter:blur(2px)}.lead-modal-card{border:1px solid #dce4ed;border-radius:14px;box-shadow:0 24px 60px rgba(15,23,42,.24)}.lead-modal-card>header{height:58px;padding:0 18px;background:#f8fafc;border-bottom:1px solid #e4eaf1}.lead-modal-card>header h2{font-size:16px;color:#20314a}.lead-modal-card>header button{width:32px;height:32px;border-radius:7px}.lead-modal-card footer{background:#fafbfd;border-top:1px solid #e4eaf1}.lead-modal-card input,.lead-modal-card select,.lead-modal-card textarea,.lead-token-field{border-radius:7px!important;border-color:#cbd7e5!important}.lead-modal-card input:focus,.lead-modal-card select:focus,.lead-modal-card textarea:focus{border-color:#8faee7!important;box-shadow:0 0 0 3px rgba(49,87,223,.08)!important} @media(max-width:1100px){.lead-page-header{align-items:flex-start;flex-direction:column}.lead-header-search{width:100%;max-width:430px}}@media(max-width:760px){.lead-page-header{padding:16px;border-radius:12px}.lead-page-header h1{font-size:22px}.lead-action-row{align-items:stretch;flex-direction:column}.lead-filter-menu{align-self:stretch}.lead-filter-menu>summary{width:100%}.lead-column{width:310px}.lead-table-search{width:100%;margin-left:0}.lead-list-toolbar{flex-wrap:wrap;gap:8px}} /* ============================================================ SECTION: leave.css ============================================================ */ .leave-page{width:100%}.leave-shell{background:#fff;border:1px solid #dde5ef;border-radius:10px;box-shadow:0 3px 14px #1620360b;overflow:hidden}.leave-header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 20px;border-bottom:1px solid #e7ecf3}.leave-header h1{margin:0;font-size:20px;color:#26364c}.leave-header p{margin:4px 0 0;color:#8995a7;font-size:12px}.leave-header-actions{display:flex;gap:9px;flex-wrap:wrap}.leave-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:35px;padding:0 12px;border-radius:7px;border:1px solid #d5dde8;background:#fff;color:#324258;font:inherit;font-size:13px;font-weight:600;cursor:pointer}.leave-btn svg{width:15px}.leave-btn.primary{background:#3b82f6;border-color:#3b82f6;color:#fff}.leave-btn.ghost:hover{background:#f7f9fc}.leave-tabs{display:flex;gap:2px;padding:0 14px;border-bottom:1px solid #e7ecf3}.leave-tabs a{padding:14px 13px 12px;color:#425267;text-decoration:none;font-size:13px;border-bottom:2px solid transparent}.leave-tabs a.active{color:#1f2e42;border-bottom-color:#34475f;font-weight:700}.leave-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 16px;border-bottom:1px solid #e8edf4;background:#fff}.leave-toolbar-left,.leave-toolbar-right,.leave-toolbar-right form{display:flex;align-items:center;gap:8px}.leave-icon-btn,.leave-month-nav a,.leave-export-btn,.leave-search-btn{height:33px;border:1px solid #d6dee9;background:#fff;color:#526176;display:grid;place-items:center;cursor:pointer}.leave-icon-btn{width:34px;border-radius:6px}.leave-icon-btn svg,.leave-month-nav svg,.leave-search-btn svg{width:15px}.leave-month-nav{display:flex;align-items:center}.leave-month-nav a{width:34px;text-decoration:none}.leave-month-nav a:first-child{border-radius:6px 0 0 6px}.leave-month-nav a:last-child{border-radius:0 6px 6px 0}.leave-month-nav strong{height:33px;min-width:130px;display:grid;place-items:center;padding:0 10px;border-top:1px solid #d6dee9;border-bottom:1px solid #d6dee9;color:#44546a;font-size:12px;font-weight:600}.leave-filter-form select,.leave-search{height:33px;border:1px solid #d6dee9;border-radius:6px;background:#fff;color:#526176;padding:0 10px;font:inherit;font-size:12px}.leave-filter-form select{min-width:160px}.leave-export-btn{border-radius:6px;padding:0 11px}.leave-search{width:190px;border-radius:6px 0 0 6px}.leave-search-btn{width:34px;border-left:0;border-radius:0 6px 6px 0}.leave-table-wrap{overflow:auto}.leave-table{width:100%;border-collapse:collapse;min-width:820px}.leave-table th,.leave-table td{padding:13px 14px;border-bottom:1px solid #e8edf4;text-align:left;font-size:13px;vertical-align:middle;color:#3b4b60}.leave-table th{background:#fbfcfe;color:#2f4055;font-weight:700}.leave-member{display:flex;align-items:center;gap:10px;color:#2769c8;text-decoration:none;min-width:180px}.leave-member img,.leave-member>span{width:31px;height:31px;border-radius:50%;object-fit:cover;display:grid;place-items:center;background:#e8f0fb;color:#2d6bc1;font-weight:800;flex:none}.leave-member strong,.leave-member small{display:block}.leave-member strong{font-size:13px;color:#2d68b8}.leave-member small{margin-top:2px;color:#8a97a8;font-size:10px;font-weight:400}.leave-type-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--leave-color);margin-right:7px}.leave-date-sub{display:block;color:#8996a7;margin-top:3px}.leave-status{display:inline-flex;padding:4px 8px;border-radius:999px;font-size:11px;font-weight:700;text-transform:capitalize}.leave-status.pending{background:#fff7e6;color:#b56b00}.leave-status.approved{background:#eaf8ef;color:#168148}.leave-status.rejected{background:#fff0f1;color:#bd3440}.leave-status.cancelled{background:#eef2f6;color:#677589}.leave-actions-col{width:125px}.leave-row-actions{white-space:nowrap}.leave-row-actions form{display:inline}.leave-row-actions a,.leave-row-actions button{display:inline-grid;place-items:center;width:30px;height:30px;border:1px solid #dae2ec;border-radius:6px;background:#fff;color:#5b697d;cursor:pointer;text-decoration:none}.leave-row-actions svg{width:14px}.leave-row-actions .approve{color:#17844c}.leave-row-actions .reject{color:#c43a46}.leave-reason-row td{padding-top:7px;padding-bottom:10px;background:#fbfcfe;color:#778598;font-size:12px}.leave-empty{text-align:center!important;padding:28px!important;color:#8a96a8!important}.leave-footer{display:flex;align-items:center;gap:10px;padding:12px 15px;color:#8b97a8;font-size:12px}.leave-footer select{height:32px;border:1px solid #d6dee9;border-radius:6px;background:#fff;padding:0 9px}.leave-footer>div{margin-left:auto;display:flex;gap:5px}.leave-footer button{width:31px;height:31px;border:0;background:#fff;color:#7b8798}.leave-summary-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:14px}.leave-summary-cards article{padding:15px 16px;border:1px solid #e0e6ef;border-radius:9px;background:#fff}.leave-summary-cards span,.leave-summary-cards strong{display:block}.leave-summary-cards span{color:#7e8a9b;font-size:11px}.leave-summary-cards strong{margin-top:6px;font-size:20px;color:#28384e}.leave-dialog{width:min(680px,calc(100vw - 28px));max-height:88vh;padding:0;border:0;border-radius:9px;box-shadow:0 22px 70px #0f172a50;color:#34455b}.leave-dialog.compact{width:min(520px,calc(100vw - 28px))}.leave-dialog::backdrop{background:#11182788}.leave-dialog form>header,.leave-dialog form>footer{display:flex;align-items:center;padding:15px 20px}.leave-dialog form>header{justify-content:space-between;border-bottom:1px solid #e6ebf2}.leave-dialog form>header h2{margin:0;font-size:17px;font-weight:500}.leave-dialog form>header button{border:0;background:none;color:#7d8999;cursor:pointer}.leave-dialog form>header svg{width:18px}.leave-dialog form>footer{justify-content:flex-end;gap:9px;border-top:1px solid #e6ebf2}.leave-form-body{padding:12px 20px 16px;overflow:auto}.leave-form-body>label,.leave-date-grid label{display:grid;grid-template-columns:150px 1fr;align-items:center;gap:14px;margin:0 0 12px;font-size:13px}.leave-form-body select,.leave-form-body input:not([type=radio]):not([type=file]),.leave-form-body textarea{width:100%;box-sizing:border-box;min-height:36px;border:1px solid #e0e6ee;border-radius:6px;background:#fafbfc;color:#3d4e63;padding:8px 10px;font:inherit}.leave-form-body textarea{min-height:72px;resize:vertical}.leave-duration-group{display:flex;align-items:center;gap:16px;margin:2px 0 12px}.leave-duration-group>span{width:136px;flex:none}.leave-duration-group label{display:flex;align-items:center;gap:6px;font-size:12px}.leave-duration-group input{accent-color:#4f83f1}.leave-date-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.leave-date-grid label{grid-template-columns:150px 1fr}.leave-date-grid[hidden],.leave-date-grid label[hidden]{display:none!important}.leave-file{width:max-content!important;display:flex!important;grid-template-columns:none!important;align-items:center!important;gap:7px!important;padding:7px 11px;border:1px solid #dce3ec;border-radius:18px;cursor:pointer}.leave-file input{display:none}.leave-file svg{width:14px}.leave-help{padding:10px 12px;border-radius:7px;background:#f6f9fd;color:#6d7b8f;font-size:12px;line-height:1.5}@media(max-width:900px){.leave-header{align-items:flex-start;flex-direction:column}.leave-summary-cards{grid-template-columns:repeat(2,1fr)}.leave-toolbar{align-items:flex-start;flex-direction:column}.leave-toolbar-right{width:100%;justify-content:flex-end}}@media(max-width:620px){.leave-summary-cards{grid-template-columns:1fr}.leave-tabs{overflow-x:auto}.leave-tabs a{white-space:nowrap}.leave-form-body>label,.leave-date-grid label{grid-template-columns:1fr}.leave-duration-group{align-items:flex-start;flex-wrap:wrap}.leave-duration-group>span{width:100%}.leave-date-grid{grid-template-columns:1fr}} /* ============================================================ SECTION: messages.css ============================================================ */ .messages-page{width:100%}.message-top-actions{display:flex;gap:8px;margin:0 0 16px}.message-top-actions>a,.message-primary{min-height:34px;display:inline-flex;align-items:center;gap:6px;padding:0 11px;border:1px solid #dce3eb;border-radius:18px;background:#fff;color:#40556b;text-decoration:none;font:inherit}.message-top-actions>a.active{background:#f4f7fb}.message-primary{border-radius:5px;background:#5f8ff0;border-color:#5f8ff0;color:#fff}.message-top-actions svg,.message-primary svg{width:14px}.message-layout{display:grid;grid-template-columns:420px minmax(0,1fr);gap:16px}.message-list-panel,.message-view-panel{background:#fff;border:1px solid #e1e7ef;border-radius:7px;overflow:hidden}.message-list-panel>header{height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;border-bottom:1px solid #e7ebf1}.message-list-panel>header strong{display:flex;align-items:center;gap:6px}.message-list-panel>header svg{width:14px}.message-list-panel>header form{display:flex;align-items:center;border:1px solid #dce3eb;border-radius:5px}.message-list-panel>header input{width:145px;height:31px;border:0;outline:0;padding:0 8px}.message-list-panel>header form svg{margin-right:7px;color:#9aa6b3}.message-list>a{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:8px;padding:12px 14px;border-bottom:1px solid #edf1f5;text-decoration:none;color:#334a61}.message-list>a:hover,.message-list>a.selected{background:#f6f8fb}.message-list>a.unread strong{font-weight:700}.message-avatar{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:#e7edf5;color:#4b6580;font-size:11px;font-weight:700}.message-list strong,.message-list p{display:block;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.message-list strong{font-size:12px}.message-list p{margin-top:4px;color:#687b8f;font-size:11px}.message-list time{font-size:10px;color:#9aa6b3;white-space:nowrap}.message-list-panel footer{padding:10px 14px}.message-list-panel footer nav svg{width:14px}.message-view-panel{min-height:500px}.message-view-panel>header{min-height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid #e7ebf1}.message-view-panel>header>div{display:flex;align-items:center;gap:9px}.message-view-panel>header strong,.message-view-panel>header small{display:block}.message-view-panel>header strong{font-size:13px}.message-view-panel>header small{margin-top:3px;color:#8c99a8;font-size:10px}.message-view-panel>header button{border:0;background:none;color:#95a1ae}.message-view-panel>header button svg{width:15px}.message-view-panel article{padding:22px}.message-view-panel article h2{font-size:17px;font-weight:500}.message-view-panel article p{font-size:13px;line-height:1.7}.message-attachments{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}.message-attachments a{display:inline-flex;align-items:center;gap:5px;padding:7px 9px;border:1px solid #dce3eb;border-radius:5px;color:#1764b0;text-decoration:none;font-size:11px}.message-attachments svg{width:13px}.message-placeholder,.message-empty{display:flex;min-height:300px;flex-direction:column;align-items:center;justify-content:center;color:#9ba6b2}.message-placeholder svg{width:70px;height:70px;color:#d8dde4}.message-modal{position:fixed;z-index:1100;inset:0;display:none;place-items:start center;padding:20px;background:#0f172a80;overflow:auto}.message-modal.open{display:grid}.message-modal>div{width:min(680px,calc(100vw - 30px));margin:auto;background:#fff;border-radius:8px;overflow:hidden}.message-modal header,.message-modal footer{min-height:55px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;border-bottom:1px solid #e7ebf1}.message-modal footer{justify-content:flex-end;gap:8px;border-top:1px solid #e7ebf1;border-bottom:0}.message-modal h2{font-size:16px;font-weight:500}.message-modal header button,.message-modal footer button{border:1px solid #dce3eb;border-radius:5px;background:#fff;padding:8px 10px}.message-modal header button{border:0}.message-modal header svg{width:17px}.message-form{padding:14px 18px}.message-form>label{display:grid;grid-template-columns:100px 1fr;align-items:center;gap:12px;margin-bottom:10px;font-size:12px}.message-form select,.message-form input,.message-form textarea{width:100%;box-sizing:border-box;border:1px solid #eef1f4;background:#f8f9fa;border-radius:5px;padding:8px 10px;font:inherit}.message-form textarea{min-height:170px;resize:vertical}.message-upload{width:max-content!important;display:inline-flex!important;grid-template-columns:auto!important;gap:6px!important;border:1px solid #dce3eb;border-radius:18px;padding:7px 10px}.message-upload input{display:none}.message-upload svg{width:14px}@media(max-width:900px){.message-layout{grid-template-columns:1fr}.message-list-panel{max-height:380px}.message-form>label{grid-template-columns:1fr}.message-body-field span{display:none}} /* Omnichannel messaging */ .omni-nav{display:flex;align-items:center;gap:8px;margin-bottom:16px;flex-wrap:wrap}.omni-nav a{display:inline-flex;align-items:center;gap:8px;padding:9px 13px;border:1px solid #e6eaf0;border-radius:10px;background:#fff;color:#52606d;text-decoration:none;font-size:13px;font-weight:600}.omni-nav a svg{width:16px;height:16px}.omni-nav a.active{background:#111827;color:#fff;border-color:#111827}.omni-toolbar{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 16px;background:#fff;border:1px solid #e7ebf0;border-radius:14px 14px 0 0}.omni-filters{display:flex;align-items:center;gap:10px;flex:1;flex-wrap:wrap}.omni-filters select,.omni-actions select{border:1px solid #dfe5ec;border-radius:9px;background:#fff;padding:9px 30px 9px 10px;color:#475569}.omni-search{display:flex;align-items:center;gap:8px;border:1px solid #dfe5ec;border-radius:9px;padding:0 10px;min-width:240px;background:#fff}.omni-search svg{width:15px;color:#94a3b8}.omni-search input{border:0!important;outline:0;width:100%;padding:9px 0;background:transparent}.omni-live{display:flex;align-items:center;gap:8px;font-size:12px;color:#64748b}.omni-live span{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 4px #dcfce7}.omni-layout{display:grid;grid-template-columns:340px minmax(0,1fr);min-height:620px;background:#fff;border:1px solid #e7ebf0;border-top:0;border-radius:0 0 14px 14px;overflow:hidden}.omni-conversations{border-right:1px solid #e7ebf0;background:#fbfcfe;min-width:0}.omni-panel-title{padding:15px 16px;border-bottom:1px solid #edf0f4;background:#fff}.omni-panel-title div{display:flex;justify-content:space-between;align-items:center}.omni-panel-title small{color:#94a3b8}.omni-conversation-list{max-height:560px;overflow:auto}.omni-conversation{display:flex;align-items:center;gap:11px;padding:13px 14px;border-bottom:1px solid #edf0f4;text-decoration:none;color:#334155;transition:.16s;background:#fff}.omni-conversation:hover,.omni-conversation.active{background:#f2f6ff}.omni-conversation.active{box-shadow:inset 3px 0 #5b82f1}.omni-conversation-copy{min-width:0;flex:1}.omni-conversation-copy strong,.omni-conversation-copy small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.omni-conversation-copy strong{font-size:13px}.omni-conversation-copy small{font-size:11px;color:#94a3b8;margin-top:3px}.omni-provider{width:34px;height:34px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 34px}.omni-provider svg{width:17px;height:17px}.omni-provider.whatsapp{background:#dcfce7;color:#16a34a}.omni-provider.telegram{background:#e0f2fe;color:#0284c7}.omni-provider.messenger{background:#e0e7ff;color:#4f46e5}.omni-provider.instagram{background:#fce7f3;color:#db2777}.omni-unread{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:#5b82f1;color:#fff;font-size:11px}.omni-pagination{padding:10px 12px;background:#fff}.omni-empty-small{padding:30px 20px;color:#94a3b8;text-align:center;font-size:13px}.omni-thread{display:flex;flex-direction:column;min-width:0;background:#f8fafc}.omni-thread-head{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:14px 18px;background:#fff;border-bottom:1px solid #e7ebf0}.omni-contact{display:flex;align-items:center;gap:11px}.omni-contact strong,.omni-contact small{display:block}.omni-contact small{color:#94a3b8;margin-top:2px}.omni-actions{display:flex;gap:8px}.omni-messages{flex:1;padding:22px;overflow:auto;max-height:495px}.omni-message-row{display:flex;margin:8px 0}.omni-message-row.outbound{justify-content:flex-end}.omni-bubble{max-width:min(72%,620px);padding:11px 13px;border-radius:14px 14px 14px 4px;background:#fff;border:1px solid #e5eaf0;box-shadow:0 1px 2px rgba(15,23,42,.03)}.omni-message-row.outbound .omni-bubble{background:#5b82f1;color:#fff;border-color:#5b82f1;border-radius:14px 14px 4px 14px}.omni-bubble p{margin:0 0 6px;line-height:1.45}.omni-bubble small{font-size:10px;opacity:.72}.omni-bubble em{display:block;margin-top:5px;font-size:10px;color:#ef4444}.omni-message-row.outbound .omni-bubble em{color:#fee2e2}.omni-media{display:flex;gap:6px;flex-wrap:wrap;margin:5px 0}.omni-media span{display:inline-flex;gap:5px;align-items:center;padding:5px 8px;background:rgba(148,163,184,.12);border-radius:8px;font-size:11px}.omni-media svg{width:13px}.omni-muted{opacity:.7;font-style:italic}.omni-compose{display:flex;gap:10px;align-items:flex-end;padding:14px 16px;background:#fff;border-top:1px solid #e7ebf0}.omni-compose textarea{flex:1;min-height:58px;max-height:150px;resize:vertical;border:1px solid #dfe5ec;border-radius:12px;padding:11px 12px;outline:none}.omni-compose textarea:focus{border-color:#93a9f3;box-shadow:0 0 0 3px #eef2ff}.omni-main-placeholder{height:100%;min-height:500px}.channels-head{display:flex;align-items:flex-start;justify-content:space-between;gap:15px;margin:4px 0 18px}.channels-head h1{font-size:22px;margin:0 0 5px;color:#1e293b}.channels-head p{margin:0;color:#64748b}.channel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px}.channel-card{background:#fff;border:1px solid #e5eaf0;border-radius:15px;box-shadow:0 4px 18px rgba(15,23,42,.04);overflow:hidden}.channel-card>header{display:flex;align-items:center;gap:11px;padding:16px;border-bottom:1px solid #edf0f4}.channel-card header div{flex:1}.channel-card header strong,.channel-card header small{display:block}.channel-card header small{margin-top:2px;color:#94a3b8}.channel-state{font-size:11px;padding:5px 8px;border-radius:20px}.channel-state.on{background:#dcfce7;color:#15803d}.channel-state.off{background:#f1f5f9;color:#64748b}.channel-card dl{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:0;padding:13px 16px}.channel-card dl div{min-width:0}.channel-card dt{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:#94a3b8}.channel-card dd{margin:4px 0 0;font-size:12px;color:#334155;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.channel-webhook{padding:0 16px 12px}.channel-webhook label{display:block;font-size:11px;color:#64748b;margin-bottom:5px}.channel-webhook>div{display:flex}.channel-webhook input{flex:1;min-width:0;border:1px solid #e2e8f0;border-radius:8px 0 0 8px;background:#f8fafc;padding:8px 9px;font-size:11px;color:#64748b}.channel-webhook button{border:1px solid #e2e8f0;border-left:0;background:#fff;border-radius:0 8px 8px 0;padding:0 10px}.channel-webhook button svg{width:14px}.channel-card>footer{display:flex;align-items:center;gap:8px;padding:12px 16px;background:#fafbfc;border-top:1px solid #edf0f4}.channel-card>footer form:last-child{margin-left:auto}.channel-card>footer button{display:inline-flex;align-items:center;gap:6px;border:1px solid #dde3ea;background:#fff;border-radius:8px;padding:7px 9px;font-size:11px;color:#475569}.channel-card>footer button svg{width:14px}.channel-card>footer button.danger{color:#dc2626}.channel-empty{grid-column:1/-1;padding:70px 20px;text-align:center;background:#fff;border:1px dashed #dbe2ea;border-radius:15px;color:#64748b}.channel-empty>svg{width:42px;height:42px;color:#94a3b8}.channel-empty h3{color:#334155}.channel-form{padding:16px 20px;display:grid;gap:12px}.channel-form label{display:grid;grid-template-columns:155px 1fr;align-items:center;gap:12px}.channel-form label span{font-size:12px;color:#475569}.channel-form input,.channel-form select{width:100%;border:1px solid #dfe5ec;border-radius:9px;padding:9px 10px;background:#fff}.channel-form .channel-active{display:flex;gap:8px;margin-left:167px}.channel-form .channel-active input{width:auto}.channel-note{display:flex;gap:9px;align-items:flex-start;margin-left:167px;padding:10px;background:#f8fafc;border-radius:10px;color:#64748b}.channel-note svg{width:17px;flex:0 0 17px}.channel-note p{margin:0;font-size:11px;line-height:1.4} @media(max-width:900px){.omni-layout{grid-template-columns:1fr}.omni-conversations{border-right:0;border-bottom:1px solid #e7ebf0}.omni-conversation-list{max-height:300px}.omni-thread-head{align-items:flex-start;flex-direction:column}.omni-actions{width:100%}.omni-actions form,.omni-actions select{flex:1;width:100%}.omni-bubble{max-width:88%}.channel-grid{grid-template-columns:1fr}.channel-form label{grid-template-columns:1fr;gap:5px}.channel-form .channel-active,.channel-note{margin-left:0}.omni-toolbar{align-items:flex-start;flex-direction:column}.omni-search{min-width:100%;width:100%}} .channel-manage{border-top:1px solid #edf0f4}.channel-manage summary{display:flex;align-items:center;gap:7px;padding:10px 16px;font-size:11px;font-weight:600;color:#52606d;cursor:pointer;list-style:none}.channel-manage summary::-webkit-details-marker{display:none}.channel-manage summary svg{width:14px}.channel-manage form{padding:0 16px 14px}.channel-edit-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.channel-edit-grid label{font-size:10px;color:#64748b}.channel-edit-grid input,.channel-edit-grid select{display:block;width:100%;margin-top:4px;border:1px solid #dfe5ec;border-radius:8px;padding:7px 8px;font-size:11px}.channel-edit-grid .channel-active{display:flex;align-items:center;gap:6px;margin-top:18px}.channel-edit-grid .channel-active input{width:auto;margin:0}.channel-save{margin-top:10px;display:inline-flex;align-items:center;gap:6px;border:0;border-radius:8px;background:#111827;color:#fff;padding:8px 10px;font-size:11px}.channel-save svg{width:14px}@media(max-width:600px){.channel-edit-grid{grid-template-columns:1fr}} /* ============================================================ SECTION: payment-receipt.css ============================================================ */ /* ===================================================================== Sales & Finance โ†’ Payments โ€” Invoice / Contacts design system Main list + New/Edit Payment + Receipt + Payment Details ===================================================================== */ /* ---------- Main Payments list ---------- */ .payment-contacts-page{max-width:1600px;margin:0 auto;color:#263954} .payment-contacts-heading{ display:flex;align-items:center;justify-content:space-between;gap:22px; margin:0 0 14px;padding:18px 20px;border:1px solid #dce4ef;border-radius:14px; background:linear-gradient(120deg,#fff 62%,#f5f8ff 100%); box-shadow:0 6px 20px rgba(31,48,76,.055) } .payment-contacts-eyebrow{ display:block;margin-bottom:4px;color:#5f6bd6;font-size:10px;font-weight:850; letter-spacing:.1em;text-transform:uppercase } .payment-contacts-heading h1{margin:0;font-size:24px;letter-spacing:-.025em;color:#18263b} .payment-contacts-heading p{margin:5px 0 0;color:#76859a;font-size:12px} .payment-contacts-heading-actions{display:flex;align-items:center;gap:8px} .payment-contacts-heading-actions a{ display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px; border:1px solid #ced8e5;border-radius:8px;text-decoration:none;font-size:12px;font-weight:750 } .payment-contacts-heading-actions svg{width:14px;height:14px} .payment-secondary-action{background:#fff;color:#34506f} .payment-primary-action{ background:#3157df;color:#fff!important;border-color:#3157df!important; box-shadow:0 6px 14px rgba(49,87,223,.18) } .payment-contact-summary{ display:grid;grid-template-columns:repeat(auto-fit,minmax(125px,1fr)); gap:8px;margin-bottom:12px } .payment-contact-summary a{ display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:46px; padding:0 13px;border:1px solid #dce4ed;border-radius:10px;background:#fff; color:#52647c;text-decoration:none;font-size:11px } .payment-contact-summary a strong{font-size:14px;color:#21344f} .payment-contact-summary a.active{border-color:#9bb5f0;background:#f2f6ff;color:#285fc1} .payment-contact-summary a.active strong{color:#285fc1} .payment-contact-filters{ display:none;align-items:end;gap:10px;padding:12px 14px;margin-bottom:10px; border:1px solid #dce4ed;border-radius:10px;background:#fff } .payment-contact-filters.open{display:flex} .payment-contact-filters label{display:grid;gap:5px;font-size:11px;font-weight:700;color:#53647a} .payment-contact-filters input,.payment-contact-filters select{ height:32px;border:1px solid #cfd9e5;border-radius:6px;padding:0 9px;background:#fff;color:#30435c } .payment-contact-filters button,.payment-contact-filters a{ height:32px;display:inline-flex;align-items:center;padding:0 11px;border-radius:6px; font-size:11px;text-decoration:none } .payment-contact-filters button{border:1px solid #3157df;background:#3157df;color:#fff} .payment-contact-filters a{border:1px solid #cfd9e5;color:#51647d;background:#fff} .payment-list-contact-card{ background:#fff;border:1px solid #dce3ec;border-radius:12px; box-shadow:0 5px 18px rgba(31,48,76,.055);overflow:hidden } .payment-contact-toolbar{ min-height:62px;display:flex;align-items:center;justify-content:space-between;gap:14px; padding:10px 14px;background:linear-gradient(90deg,#fbfcff,#f7f9ff); border-bottom:1px solid #e3e9f1 } .payment-contact-toolbar-left,.payment-contact-search{display:flex;align-items:center} .payment-contact-toolbar-left form{display:flex} .payment-contact-toolbar select, .payment-contact-toolbar-left>a, .payment-contact-toolbar-left>button, .payment-contact-search button, .payment-contact-search input{ height:32px;box-sizing:border-box;border:1px solid #cbd6e4;background:#fff; color:#34465e;font:inherit;font-size:11px } .payment-contact-toolbar select{min-width:70px;border-radius:6px 0 0 6px;padding:0 8px} .payment-contact-toolbar-left>a,.payment-contact-toolbar-left>button{ display:inline-flex;align-items:center;gap:5px;padding:0 9px;border-left:0; text-decoration:none;cursor:pointer } .payment-contact-toolbar-left svg,.payment-contact-search svg{width:13px;height:13px} .payment-contact-refresh{border-radius:0 6px 6px 0!important} .payment-contact-search button{width:38px;border-radius:6px 0 0 6px} .payment-contact-search input{ width:210px;border-left:0;border-radius:0 6px 6px 0;padding:0 10px;outline:0 } .payment-contact-table-wrap{overflow-x:auto} .payment-contact-table{width:100%;min-width:1180px;border-collapse:collapse;font-size:12px} .payment-contact-table th{ height:40px;padding:0 11px;background:#f8fafc;color:#21314c;text-align:left; font-size:10.5px;font-weight:750;border-bottom:1px solid #e4eaf1 } .payment-contact-table th+th{border-left:1px solid #e7ebf1} .payment-contact-table td{ height:64px;padding:10px 11px;border-bottom:1px solid #e8edf3; color:#33465f;vertical-align:middle } .payment-contact-table tbody tr:hover td{background:#fbfcff} .payment-contact-identity{display:flex;align-items:center;gap:9px} .payment-contact-avatar{ width:32px;height:32px;flex:none;display:grid;place-items:center;border-radius:9px; background:#eef3ff;color:#4965d7 } .payment-contact-avatar svg{width:15px;height:15px} .payment-contact-number{display:block;color:#1f4f95!important;font-weight:800;text-decoration:none} .payment-contact-identity small{display:block;margin-top:2px;color:#8a98aa;font-size:9px} .payment-contact-inline-actions{display:flex;align-items:center;gap:5px;margin-top:3px;font-size:9.5px} .payment-contact-inline-actions a,.payment-contact-inline-actions button{ border:0!important;background:transparent!important;padding:0!important;color:#55729a!important; font:inherit!important;font-weight:650!important;text-decoration:none;cursor:pointer } .payment-contact-inline-actions form{display:inline;margin:0} .payment-contact-inline-actions span{color:#b5bfcc} .payment-contact-inline-actions a:hover,.payment-contact-inline-actions button:hover{ color:#1d4ed8!important;text-decoration:underline!important } .payment-contact-inline-actions form>button.payment-contact-inline-delete{ appearance:none!important;-webkit-appearance:none!important;display:inline!important; width:auto!important;height:auto!important;min-width:0!important;min-height:0!important; margin:0!important;padding:0!important;border:0!important;border-radius:0!important; background:transparent!important;background-image:none!important;box-shadow:none!important; color:#55729a!important;font:inherit!important;font-weight:650!important;line-height:inherit!important } .payment-contact-status{ display:inline-flex;align-items:center;min-height:23px;padding:0 8px;border:1px solid #d7e0eb; border-radius:999px;background:#f7f9fc;color:#5a6b80;font-size:9.5px;font-weight:750 } .payment-contact-status.status-completed{background:#eefaf4;border-color:#d5f0e1;color:#198754} .payment-contact-status.status-pending{background:#fff8ec;border-color:#f1dfba;color:#a56d10} .payment-contact-status.status-refunded{background:#f5f2ff;border-color:#e2d8f8;color:#7054b4} .payment-transaction-id{ display:inline-block;max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; color:#596b82;font-size:10.5px } .payment-contact-options{display:flex;align-items:center;justify-content:flex-end;gap:5px} .payment-contact-options form{display:inline;margin:0} .payment-contact-options a,.payment-contact-options button{ width:30px;height:30px;display:grid;place-items:center;border:1px solid #d4dfec; border-radius:7px;background:#fff;color:#55729a;cursor:pointer } .payment-contact-options svg{width:13px;height:13px} .payment-contact-options a:hover,.payment-contact-options button:hover{ background:#f5f8fd;color:#285fc1;border-color:#b9c9df } .payment-options-heading{text-align:right!important} .payment-contact-empty{text-align:center!important;padding:36px!important;color:#77869b!important} .payment-contact-empty a{color:#285fc1} .payment-contact-footer{ min-height:58px;display:flex;align-items:center;justify-content:space-between;gap:12px; padding:0 14px;color:#718096;font-size:11px } .payment-contact-footer nav{display:flex;align-items:center;gap:4px} .payment-contact-footer nav a,.payment-contact-footer nav span{ min-width:30px;height:30px;display:grid;place-items:center;border-radius:7px; border:1px solid #dce4ed;background:#fff;color:#66778d;text-decoration:none } /* ---------- New / Edit Payment ---------- */ .payment-form-page{max-width:1380px;margin:0 auto;padding:4px 0 30px;color:#263954} .payment-form-heading{ display:flex;align-items:center;justify-content:space-between;gap:22px; margin:0 0 16px;padding:20px 22px;border:1px solid #dce4ef;border-radius:14px; background:linear-gradient(120deg,#fff 58%,#f5f8ff 100%); box-shadow:0 6px 20px rgba(31,48,76,.06) } .payment-form-heading h1{margin:0;font-size:24px;letter-spacing:-.025em;color:#18263b} .payment-form-heading p{margin:5px 0 0;color:#738197;font-size:12px} .payment-form-heading-actions{display:flex;align-items:center;gap:9px} .payment-form-heading-actions>a{ display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px; border:1px solid #ced8e5;border-radius:8px;background:#fff;color:#34506f; text-decoration:none;font-size:12px;font-weight:700 } .payment-form-heading-actions svg{width:14px;height:14px} .payment-form-number-badge{ display:inline-flex;align-items:center;min-height:34px;padding:0 10px;border-radius:8px; background:#eef3fb;color:#445d7c;font-size:11px;font-weight:800 } .payment-form-errors{ margin-bottom:12px;padding:12px 14px;border:1px solid #f0b5bd;border-radius:9px; background:#fff4f5;color:#9d2d3d;font-size:11.5px } .payment-form-errors ul{margin:6px 0 0 18px} .payment-form-card{ border:1px solid #dce3ec;border-radius:14px;background:#fff; box-shadow:0 7px 24px rgba(31,48,76,.06);overflow:hidden } .payment-form-section{padding:22px 24px;border-bottom:1px solid #e7ecf2} .payment-form-section:last-of-type{border-bottom:0} .payment-section-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px} .payment-section-heading>div{display:flex;align-items:center;gap:10px} .payment-section-icon{ width:34px;height:34px;display:grid;place-items:center;flex:none;border-radius:9px; background:#eef3ff;color:#4965d7 } .payment-section-icon svg{width:15px;height:15px} .payment-section-heading h2{margin:0;font-size:15px;color:#1c2d45} .payment-section-heading p{margin:3px 0 0;color:#8190a3;font-size:10.5px} .payment-form-grid{display:grid;gap:16px} .payment-form-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))} .payment-field{display:flex;flex-direction:column;gap:6px;min-width:0} .payment-field>span{font-size:11.5px;font-weight:750;color:#3c506a} .payment-field em{font-style:normal;color:#d74453} .payment-field input,.payment-field select,.payment-field textarea{ width:100%;min-height:38px;box-sizing:border-box;border:1px solid #cfd9e5;border-radius:7px; background:#fff;color:#263954;padding:0 10px;font:inherit;font-size:12.5px;outline:0 } .payment-field input:focus,.payment-field select:focus,.payment-field textarea:focus{ border-color:#86aaf0;box-shadow:0 0 0 3px rgba(59,130,246,.08) } .payment-field small{color:#8190a3;font-size:10.5px;line-height:1.45} .payment-field-error{color:#b63b45!important} .payment-link-section{background:#fbfcfe} .payment-payment-grid{display:grid;grid-template-columns:minmax(260px,.75fr) minmax(320px,1.25fr);gap:18px} .payment-money-input{ display:flex;align-items:stretch;width:100%;min-height:38px;border:1px solid #cfd9e5; border-radius:7px;background:#fff;overflow:hidden } .payment-money-input>span{ display:grid;place-items:center;min-width:42px;background:#f5f7fa;color:#66788d; border-right:1px solid #dbe3ed;font-size:12px;font-weight:800 } .payment-money-input input{ border:0!important;border-radius:0!important;box-shadow:none!important;min-height:36px!important } .payment-form-savebar{ position:sticky;bottom:0;z-index:5;display:flex;align-items:center;justify-content:flex-end;gap:10px; padding:14px 24px;border-top:1px solid #e1e7ef;background:rgba(255,255,255,.96); backdrop-filter:blur(8px);box-shadow:0 -8px 24px rgba(30,48,76,.05) } .payment-form-savebar a,.payment-form-savebar button{ min-height:36px;display:inline-flex;align-items:center;justify-content:center;gap:6px; padding:0 13px;border-radius:7px;font-size:12px;font-weight:750 } .payment-form-savebar a{border:1px solid #cbd5e1;background:#fff;color:#52647b;text-decoration:none} .payment-form-savebar button{ border:1px solid #3157df;background:#3157df;color:#fff;cursor:pointer; box-shadow:0 5px 12px rgba(49,87,223,.16) } .payment-form-savebar svg{width:14px;height:14px} /* ---------- Payment detail / receipt ---------- */ .payment-page.payment-detail-page{max-width:1380px;margin:0 auto 60px;color:#263954} .payment-detail-heading{ display:flex;align-items:center;justify-content:space-between;gap:22px; margin:0 0 14px;padding:18px 20px;border:1px solid #dce4ef;border-radius:14px; background:linear-gradient(120deg,#fff 62%,#f5f8ff 100%); box-shadow:0 6px 20px rgba(31,48,76,.055) } .payment-detail-heading h1{margin:0;font-size:23px;letter-spacing:-.02em;color:#18263b} .payment-detail-heading p{margin:5px 0 0;color:#76859a;font-size:12px} .payment-detail-heading p a{color:#285fc1;font-weight:700} .payment-detail-heading-actions{display:flex;align-items:center;gap:8px} .payment-detail-heading-actions a{ min-height:36px;display:inline-flex;align-items:center;gap:6px;padding:0 11px; border:1px solid #ced8e5;border-radius:8px;background:#fff;color:#34506f; text-decoration:none;font-size:11.5px;font-weight:750 } .payment-detail-heading-actions svg{width:14px;height:14px} .payment-detail-summary{ display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:12px } .payment-detail-summary>div{ min-height:61px;display:flex;flex-direction:column;justify-content:center;gap:4px; padding:0 14px;border:1px solid #dce4ed;border-radius:10px;background:#fff } .payment-detail-summary span:not(.payment-contact-status){color:#8190a3;font-size:9.5px;text-transform:uppercase;letter-spacing:.07em;font-weight:800} .payment-detail-summary strong{color:#21344f;font-size:12.5px} .payment-tabs{ min-height:50px;display:flex;align-items:stretch;gap:0;margin-bottom:12px;padding:0 10px; border:1px solid #dce3ec;border-radius:10px;background:#f8fafc;overflow-x:auto } .payment-tabs a{ min-width:max-content;display:inline-flex;align-items:center;justify-content:center;gap:6px; padding:0 13px;border-bottom:2px solid transparent;color:#5d6d83; text-decoration:none;font-size:11px;font-weight:700 } .payment-tabs a.active{border-bottom-color:#3157df;background:#fff;color:#285fc1} .payment-tabs svg{width:14px;height:14px} .payment-receipt-shell,.payment-record-panel{ border:1px solid #dce3ec;border-radius:12px;background:#f8fafc; box-shadow:0 5px 18px rgba(31,48,76,.055);overflow:hidden } .payment-receipt-toolbar{ min-height:58px;display:flex;align-items:center;justify-content:space-between;gap:10px; padding:10px 14px;border-bottom:1px solid #e3e9f1;background:#fff } .payment-receipt-toolbar>div{display:flex;align-items:center;gap:6px} .payment-receipt-toolbar a,.payment-receipt-toolbar button{ min-height:32px;display:inline-flex;align-items:center;justify-content:center;gap:5px; padding:0 9px;border:1px solid #cfd9e5;border-radius:7px;background:#fff; color:#40536c;text-decoration:none;font-size:10.5px;font-weight:700;cursor:pointer } .payment-receipt-toolbar form{display:inline;margin:0} .payment-receipt-toolbar svg{width:13px;height:13px} .payment-receipt-toolbar .payment-delete{ width:32px;padding:0;color:#b04450;border-color:#eccbd0;background:#fffafa } .payment-receipt{ position:relative;margin:18px;padding:36px 34px 40px;border:1px solid #e3e9f2; border-radius:14px;background:#fff;box-shadow:0 14px 36px rgba(30,48,76,.08);overflow:hidden } .payment-receipt-accent{ position:absolute;left:0;right:0;top:0;height:5px; background:linear-gradient(90deg,#3157df,#7c5ce7,#22c55e) } .payment-receipt-head{ display:flex;align-items:flex-start;justify-content:space-between;gap:28px; padding-bottom:28px;margin-bottom:20px;border-bottom:1px solid #e8edf4 } .payment-receipt-company{max-width:52%;text-align:left;min-height:0;font-size:12px} .payment-document-label{ display:block;margin-bottom:6px;color:#8996a8;font-size:9.5px;font-weight:850; letter-spacing:.09em;text-transform:uppercase } .payment-receipt-company strong{display:block;color:#17233a;font-size:17px} .payment-receipt-company address{ margin-top:6px;font-style:normal;line-height:1.55;color:#66758a;white-space:pre-line } .payment-receipt-title{display:flex;flex-direction:column;align-items:flex-end;text-align:right;gap:5px} .payment-receipt-title>span{ display:inline-block;padding:6px 9px;border-radius:6px;background:#17233a;color:#fff; font-size:15px;font-weight:850;letter-spacing:.02em } .payment-receipt-title strong{color:#26364f;font-size:12px} .payment-receipt-title small{color:#8996a8;font-size:9.5px} .payment-receipt-party-grid{ display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px } .payment-receipt-party-grid>section{ min-height:126px;padding:16px 18px;border:1px solid #e4eaf2;border-radius:11px;background:#fbfcfe } .payment-receipt-party-grid strong{display:block;color:#26364f;font-size:13px} .payment-receipt-party-grid strong a{color:#285fc1;text-decoration:none} .payment-receipt-party-grid address{ margin-top:6px;font-style:normal;color:#718096;font-size:10.5px;line-height:1.55;white-space:pre-line } .payment-receipt-facts{margin:0} .payment-receipt-facts div{ display:flex;align-items:center;justify-content:space-between;gap:12px; padding:7px 0;border-bottom:1px solid #e8edf4;font-size:10.5px } .payment-receipt-facts div:last-child{border-bottom:0} .payment-receipt-facts dt{color:#718096} .payment-receipt-facts dd{margin:0;color:#26364f;font-weight:700;text-align:right} .payment-receipt-total{ display:flex;align-items:center;justify-content:space-between;gap:20px; margin:0 0 26px;padding:15px 17px;border:1px solid #dbe5f2;border-radius:11px; background:linear-gradient(135deg,#f8fbff,#f7fff9) } .payment-receipt-total span{color:#60728a;font-size:11px;font-weight:700} .payment-receipt-total strong{color:#17233a;font-size:20px} .payment-receipt-for{margin-top:0} .payment-receipt-section-heading{display:flex;align-items:center;gap:9px;margin-bottom:10px} .payment-receipt-section-heading h3{margin:0;color:#26364f;font-size:13px} .payment-receipt-section-heading p{margin:2px 0 0;color:#8996a8;font-size:9.5px} .payment-receipt-table-wrap{overflow-x:auto;border:1px solid #e4eaf2;border-radius:10px} .payment-receipt table{width:100%;min-width:650px;border-collapse:collapse;font-size:11px} .payment-receipt th{ height:39px;padding:0 11px;background:#17233a;color:#fff;border:0;text-align:left; font-size:10px;font-weight:750 } .payment-receipt td{padding:12px 11px;border-bottom:1px solid #e8edf3;background:#fff;color:#40536c} .payment-receipt td a{color:#285fc1;text-decoration:none;font-weight:700} .payment-receipt-footer{ display:flex;align-items:center;justify-content:space-between;gap:10px; margin-top:28px;padding-top:16px;border-top:1px solid #e8edf4;color:#8190a3;font-size:9.5px } /* Payment Details tab */ .payment-record-panel{background:#fff} .payment-record-title{ display:flex;align-items:flex-start;justify-content:space-between;gap:15px; padding:19px 22px;border-bottom:1px solid #e5eaf1;background:linear-gradient(90deg,#fbfcff,#f7f9ff) } .payment-record-title h2{margin:0;font-size:18px;color:#18263b} .payment-record-title p{margin:4px 0 0;color:#718096;font-size:11px} .payment-record-section{padding:20px 22px;border-bottom:1px solid #e8edf3} .payment-record-section h3{margin:0 0 13px;color:#26364f;font-size:13px} .payment-record-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px} .payment-record-fields label{ display:flex;flex-direction:column;gap:6px;color:#40536c;font-size:11.5px;font-weight:700 } .payment-record-fields input,.payment-record-fields select{ width:100%;min-height:38px;box-sizing:border-box;border:1px solid #cfd9e5;border-radius:7px; background:#fff;color:#263954;padding:0 10px;font:inherit;font-size:12px;outline:0 } .payment-record-fields input:focus,.payment-record-fields select:focus{ border-color:#86aaf0;box-shadow:0 0 0 3px rgba(59,130,246,.08) } .payment-record-footer{ display:flex;align-items:center;justify-content:flex-end;gap:9px;padding:14px 22px;background:#fbfcfe } .payment-record-footer a,.payment-record-footer button{ min-height:36px;display:inline-flex;align-items:center;justify-content:center;gap:6px; padding:0 13px;border-radius:7px;font-size:11.5px;font-weight:750 } .payment-record-footer a{border:1px solid #cfd9e5;background:#fff;color:#52647b;text-decoration:none} .payment-record-footer button{ border:1px solid #3157df;background:#3157df;color:#fff;cursor:pointer; box-shadow:0 5px 12px rgba(49,87,223,.14) } .payment-record-footer svg{width:14px;height:14px} /* ---------- Responsive ---------- */ @media(max-width:900px){ .payment-contacts-heading,.payment-form-heading,.payment-detail-heading{align-items:flex-start;flex-direction:column} .payment-contacts-heading-actions,.payment-form-heading-actions,.payment-detail-heading-actions{width:100%;flex-wrap:wrap} .payment-contact-toolbar{flex-wrap:wrap} .payment-contact-search{margin-left:auto} .payment-contact-filters.open{flex-wrap:wrap} .payment-detail-summary{grid-template-columns:repeat(2,minmax(0,1fr))} .payment-receipt-party-grid{grid-template-columns:1fr} } @media(max-width:700px){ .payment-form-grid.two,.payment-payment-grid,.payment-record-fields{grid-template-columns:1fr} .payment-form-section{padding:18px 16px} .payment-form-savebar{padding:12px 16px} .payment-receipt{margin:10px;padding:28px 18px} .payment-receipt-head{flex-direction:column} .payment-receipt-company{max-width:none} .payment-receipt-title{align-items:flex-start;text-align:left} .payment-receipt-toolbar{align-items:flex-start;flex-direction:column} .payment-receipt-toolbar>div{width:100%;flex-wrap:wrap} } @media(max-width:560px){ .payment-contact-summary{grid-template-columns:repeat(2,minmax(0,1fr))} .payment-contact-search input{width:150px} .payment-contact-footer{padding:12px 14px;flex-wrap:wrap} .payment-detail-summary{grid-template-columns:1fr} } /* ---------- Print: receipt only ---------- */ @media print{ .customer-topbar,.customer-sidebar,.payment-detail-heading,.payment-detail-summary, .payment-tabs,.payment-receipt-toolbar,.payment-record-panel{display:none!important} .customer-content{padding:0!important;background:#fff!important} .payment-page.payment-detail-page{max-width:none!important;margin:0!important} .payment-receipt-shell{border:0!important;box-shadow:none!important;background:#fff!important} .payment-receipt{margin:0!important;border:0!important;box-shadow:none!important;border-radius:0!important;padding:20px 22px!important} .payment-receipt-accent{display:none!important} } /* Payment linkage refinements */ .payment-linked-record{color:#285fc1!important;text-decoration:none!important;font-weight:650} .payment-linked-record:hover{text-decoration:underline!important} .payment-receipt-logo{display:block;max-width:180px;max-height:54px;width:auto;height:auto;object-fit:contain;margin:0 0 13px auto} @media(max-width:700px){.payment-receipt-logo{margin-left:0;margin-right:0}} /* ---------- Payments layout stability ---------- */ /* Keep the Payments module isolated from late-loaded global CRM styles. */ .payment-contacts-page, .payment-form-page, .payment-page.payment-detail-page{ width:100%; min-width:0; } .payment-contacts-page *, .payment-form-page *, .payment-page.payment-detail-page *{ box-sizing:border-box; } .payment-contacts-page form, .payment-form-page form, .payment-page.payment-detail-page form{ margin-top:0; margin-bottom:0; } .payment-contact-toolbar-left, .payment-contact-search, .payment-form-heading-actions, .payment-detail-heading-actions, .payment-receipt-toolbar>div{ min-width:0; } .payment-contact-table th, .payment-contact-table td{ white-space:nowrap; } .payment-contact-table td:nth-child(2), .payment-contact-table td:nth-child(3){ max-width:190px; overflow:hidden; text-overflow:ellipsis; } .payment-contact-footer nav svg{ width:14px!important; height:14px!important; } .payment-contact-footer nav p{ display:none!important; } .payment-contact-footer nav>div{ display:flex!important; align-items:center!important; gap:4px!important; } .payment-contact-footer nav a, .payment-contact-footer nav span{ box-sizing:border-box!important; } .payment-form-card, .payment-receipt-shell, .payment-record-panel{ width:100%; min-width:0; } .payment-form-grid>*, .payment-payment-grid>*, .payment-record-fields>*, .payment-receipt-party-grid>*{ min-width:0; } .payment-field select, .payment-record-fields select{ max-width:100%; } .payment-money-input{ width:100%; max-width:100%; } .payment-receipt-logo{ margin-left:0!important; margin-right:0!important; } @media(max-width:900px){ .payment-contact-toolbar-left{ max-width:100%; overflow-x:auto; padding-bottom:2px; } .payment-contact-toolbar-left>*{ flex:none; } } /* ============================================================ SECTION: products-groups.css ============================================================ */ .items-group-form{display:flex;align-items:end;gap:8px;margin:0 0 18px}.items-group-form label{display:grid;gap:5px}.items-group-form input{border:1px solid #cdd7e6;border-radius:6px;padding:8px 10px;font:inherit}.items-groups td:last-child{display:flex;gap:12px;align-items:center}.items-groups td .items-group-form{margin:0}.items-groups td form:last-child{margin:0}@media(max-width:700px){.items-groups td:last-child{flex-wrap:wrap}} /* ============================================================ SECTION: products.css ============================================================ */ .items-page{color:#203047}.items-page h1{font-size:23px;margin:8px 0 0}.items-help{color:#205dc7;text-decoration:none;font-size:15px}.items-actions{display:flex;gap:6px;margin:16px 0 10px}.items-primary,.items-button{border:1px solid #cdd7e6;border-radius:7px;padding:8px 12px;background:#fff;color:#203047;text-decoration:none;font:inherit;font-size:15px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.items-primary{background:#1f2b3d;border-color:#1f2b3d;color:#fff;font-weight:600}.items-card{background:#fff;border:1px solid #dbe3ee;border-radius:8px;box-shadow:0 2px 5px #1c2b401a;overflow:hidden}.items-toolbar{display:flex;justify-content:space-between;gap:12px;padding:23px;align-items:center}.items-toolbar>div{display:flex;gap:5px}.items-toolbar select,.items-toolbar input,.items-bulk select,.items-bulk input{border:1px solid #cdd7e6;border-radius:6px;padding:8px 10px;background:white;color:#203047;font:inherit}.items-toolbar input{width:220px}.items-table-wrap{overflow:auto}.items-table-wrap table{border-collapse:collapse;width:100%;font-size:15px}.items-table-wrap th{text-align:left;background:#f8fafe;font-weight:500;border:1px solid #e3e8f1;padding:12px 10px;white-space:nowrap}.items-table-wrap td{border-bottom:1px solid #e7ebf2;padding:16px 10px;vertical-align:top}.items-table-wrap a{color:#18325a;text-decoration:none}.items-table-wrap a:hover{text-decoration:underline}.items-description{max-width:660px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.items-footer{display:flex;align-items:center;justify-content:space-between;padding:19px 24px;color:#66748a;font-size:15px}.items-footer nav svg{width:16px}.items-footer nav p{display:none}.items-bulk{display:flex;gap:8px;padding:0 24px 20px}.items-groups{padding:18px 23px;margin-bottom:12px}.items-groups p{margin:8px 0}.items-modal-backdrop{position:fixed;inset:0;background:#26344999;z-index:50;display:flex;align-items:flex-start;justify-content:center;padding:30px 15px;overflow:auto}.items-modal-backdrop[hidden]{display:none}.items-modal{background:#fff;width:min(600px,100%);border-radius:15px;box-shadow:0 20px 60px #14203355;overflow:hidden}.items-modal header{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid #e3e8f1}.items-modal h2{font-size:20px;margin:0}.items-modal header button{border:0;background:none;color:#8390a4;font-size:27px;cursor:pointer}.items-modal-body{padding:20px;display:grid;gap:16px}.items-modal label,.items-import-card label{display:grid;gap:7px;font-size:15px;font-weight:500}.items-modal input,.items-modal textarea,.items-modal select,.items-import-card input[type=file]{border:1px solid #cdd7e6;border-radius:7px;padding:9px 10px;font:inherit;color:#26354a;width:100%;box-sizing:border-box}.items-modal textarea{resize:vertical}.items-two{display:grid;grid-template-columns:1fr 1fr;gap:20px}.items-modal footer{display:flex;justify-content:flex-end;gap:8px;padding:20px}.required{color:#df3d48}.items-import-help{padding:22px 24px;margin-bottom:22px}.items-import-help ol{margin:0;padding-left:20px;line-height:1.5}.items-import-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.items-import-heading h1{margin:0}.items-import-card{padding:24px}.items-import-card form{margin-top:20px}.items-import-card input[type=file]{max-width:510px}.items-preview{padding:20px;margin-top:20px}.items-errors{color:#b91c1c}@media(max-width:700px){.items-toolbar,.items-footer{flex-wrap:wrap}.items-two{grid-template-columns:1fr}} .items-field-help{font-size:12px;color:#7d8999;font-weight:400}.items-field-help a{color:#246fce;text-decoration:none}.items-field-help a:hover{text-decoration:underline} /* Connected Store + Orders */ .store-page,.order-page,.process-order-page{color:#253449}.store-head,.order-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:18px}.store-head h1,.order-head h1{font-size:23px;margin:0 0 5px}.store-head p,.order-head p{margin:0;color:#718096}.store-filters{display:flex;justify-content:flex-end;gap:10px;margin-bottom:20px}.store-filters select,.store-filters input,.order-search input,.order-meta select,.order-meta textarea,.order-builder select,.order-builder input,.order-detail-actions select{border:1px solid #d7deea;border-radius:7px;background:#fff;padding:9px 11px;font:inherit;color:#253449}.store-filters input{width:240px}.store-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.store-card{background:#fff;border:1px solid #e0e6ef;border-radius:9px;overflow:hidden;box-shadow:0 1px 3px #17233b0d}.store-image{height:180px;background:#eef3f8;position:relative;overflow:hidden}.store-image img{width:100%;height:100%;object-fit:cover}.store-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#eef7ff,#e8f8f5);font-size:44px;font-weight:800;color:#5c7895}.store-category{position:absolute;top:10px;left:10px;padding:5px 8px;border-radius:999px;background:#ffffffdd;color:#42526a;font-size:12px}.store-body{padding:14px}.store-body h3{margin:0 0 7px;font-size:16px}.store-price{font-weight:700;color:#ea3652}.store-price small{font-weight:500;color:#7e8b9d}.store-body p{height:42px;margin:8px 0 14px;color:#5f6e82;line-height:1.45;overflow:hidden}.store-card-actions{display:flex;justify-content:space-between;align-items:center;gap:10px}.store-sku{font-size:12px;color:#91a0b2}.store-empty{grid-column:1/-1;background:#fff;border:1px dashed #ccd6e3;border-radius:10px;padding:48px;text-align:center}.order-card,.process-card{background:#fff;border:1px solid #dfe6ef;border-radius:8px;box-shadow:0 1px 4px #17233b0d;overflow:hidden}.order-toolbar{padding:14px 16px;display:flex;justify-content:space-between;gap:14px;border-bottom:1px solid #e5eaf1}.order-filters{display:flex;flex-wrap:wrap;gap:7px}.filter-pill{display:inline-flex;gap:6px;align-items:center;border:1px solid #dfe6ef;border-radius:999px;padding:7px 10px;color:#526278;text-decoration:none;font-size:13px;background:#fff}.filter-pill span{background:#eff3f8;border-radius:999px;padding:1px 6px}.filter-pill.active{background:#253449;color:#fff;border-color:#253449}.orders-table th,.orders-table td{padding:13px 14px}.orders-table .num{text-align:right}.order-link{color:#2162b0!important}.muted{color:#9aa6b5}.status-badge{display:inline-flex;padding:4px 8px;border-radius:5px;font-size:12px;font-weight:700;background:#e8edf3;color:#506077}.status-new{background:#fff1c8;color:#916600}.status-confirmed,.status-completed{background:#e5f7d2;color:#568400}.status-processing{background:#d9f4f5;color:#05828a}.status-cancelled{background:#fde3e3;color:#b72b2b}.order-actions{display:flex;gap:8px;align-items:center}.order-actions form{margin:0}.order-actions a,.order-actions button{background:none;border:0;padding:0;color:#2162b0;text-decoration:none;cursor:pointer;font:inherit;font-size:13px}.empty-cell{text-align:center;color:#7b899b;padding:32px!important}.process-order-page{max-width:980px;margin:0 auto}.process-card header{padding:18px 22px;border-bottom:1px solid #e5eaf1;display:flex;justify-content:space-between}.process-card header h1{font-size:21px;margin:0 0 6px}.process-card header p{margin:0;color:#66778c}.process-card header>a{text-decoration:none;color:#8d9aab;font-size:24px}.process-body{padding:22px}.order-builder th{background:#fff}.order-builder td{vertical-align:middle}.order-builder select{min-width:280px;width:100%}.order-builder input{width:90px}.order-builder small{display:block;color:#93a0af;margin-top:4px}.line-rate,.line-tax,.line-total{white-space:nowrap}.line-remove{border:0;background:#f4f6f9;color:#8c99aa;border-radius:50%;width:28px;height:28px;cursor:pointer}.add-line{margin-top:12px}.order-summary{width:min(390px,100%);margin:0 0 18px auto}.order-summary>div{display:flex;justify-content:space-between;padding:11px 4px;border-bottom:1px solid #e8edf3}.order-summary .grand{font-size:16px}.order-meta{border-top:1px solid #e5eaf1;padding-top:22px;display:grid;gap:14px}.order-meta label{display:grid;grid-template-columns:180px 1fr;align-items:start;gap:16px}.order-meta textarea{resize:vertical}.process-card footer{display:flex;justify-content:flex-end;gap:10px;background:#f8f9fb;border-top:1px solid #e5eaf1;padding:12px 18px}.order-errors{margin:16px 22px 0;background:#fff2f2;border:1px solid #ffcaca;color:#a92525;padding:10px 12px;border-radius:7px}.order-detail-top{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:18px}.order-detail-actions,.order-detail-actions form{display:flex;gap:8px;align-items:center}.order-note{background:#f8fafc;border-radius:8px;padding:14px;margin-top:16px}.order-note p{margin:6px 0 0}.danger-button{border:1px solid #e7b7b7;color:#b72b2b;background:#fff;border-radius:7px;padding:8px 12px;cursor:pointer}.danger-button:disabled{opacity:.45;cursor:not-allowed}@media(max-width:1050px){.store-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:800px){.store-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.store-head,.order-head,.order-toolbar,.order-detail-top{flex-direction:column}.store-filters{justify-content:stretch;flex-wrap:wrap}.store-filters input{width:auto;flex:1}.order-meta label{grid-template-columns:1fr}.order-builder select{min-width:210px}}@media(max-width:540px){.store-grid{grid-template-columns:1fr}.store-image{height:210px}} /* ========================================================== Sales & Finance โ†’ Items โ€” invoice-matched redesign ========================================================== */ .items-modern-page{max-width:1600px;margin:0 auto;color:#263954} .items-modern-page .invoice-contacts-heading-actions button{font:inherit;cursor:pointer} .items-header-button{min-height:36px!important;padding:0 12px!important} .items-summary-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-bottom:12px} .items-summary-grid article{min-height:76px;padding:13px 14px;border:1px solid #dce4ed;border-radius:11px;background:#fff;box-shadow:0 4px 14px rgba(31,48,76,.035)} .items-summary-grid span,.items-summary-grid strong,.items-summary-grid small{display:block}.items-summary-grid span{color:#66778d;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.055em}.items-summary-grid strong{margin-top:5px;color:#21344f;font-size:20px;line-height:1}.items-summary-grid small{margin-top:5px;color:#93a0b1;font-size:9.5px} .items-modern-card{overflow:visible}.items-modern-card>.invoice-contact-table-wrap{overflow:auto;border-radius:0 0 12px 12px} .items-modern-table{min-width:1120px}.items-modern-table .items-check-col{width:42px!important}.items-modern-table th:first-child,.items-modern-table td:first-child{text-align:center}.items-modern-table td{height:70px}.items-modern-table .invoice-contact-avatar{background:linear-gradient(135deg,#eef2ff,#e8f8ff);color:#4d61d5} .items-modern-description{max-width:310px;color:#65758b!important;white-space:normal!important;line-height:1.42}.items-muted{color:#98a4b3;font-size:10.5px}.items-tax-pill,.items-group-pill{display:inline-flex;align-items:center;min-height:24px;padding:3px 8px;border-radius:999px;font-size:10px;font-weight:800}.items-tax-pill{background:#fff7e8;color:#a6670d;border:1px solid #f2dfb7}.items-group-pill{background:#eef4ff;color:#315fc5;border:1px solid #d7e3fb}.items-empty-create{border:0;background:transparent;color:#236cda;font:inherit;cursor:pointer;padding:0}.items-empty-create:hover{text-decoration:underline} .items-modern-bulk{display:grid;grid-template-columns:minmax(190px,1fr) 180px minmax(180px,250px) auto;gap:10px;align-items:end;padding:13px 14px;border-bottom:1px solid #e3e9f1;background:linear-gradient(90deg,#fbfcff,#f7f9ff)}.items-modern-bulk>div strong,.items-modern-bulk>div span{display:block}.items-modern-bulk>div strong{font-size:11px;color:#2b3f5a}.items-modern-bulk>div span{margin-top:3px;color:#8996a8;font-size:9.5px}.items-modern-bulk select,.items-modern-bulk input{height:36px;border:1px solid #cfd9e5;border-radius:8px;background:#fff;padding:0 10px;color:#30435c}.items-modern-bulk label{display:grid;gap:5px;color:#53647a;font-size:10px;font-weight:750}.items-bulk-apply{height:36px!important;border:0!important;cursor:pointer} /* Item create/edit modal โ€” invoice form language */ .items-invoice-modal-backdrop{z-index:1250!important;align-items:center!important;padding:18px!important;background:rgba(15,23,42,.52)!important;backdrop-filter:blur(4px)} .items-invoice-modal{width:min(1120px,calc(100vw - 28px))!important;max-height:calc(100vh - 34px);overflow:auto;border-radius:17px!important;border:1px solid rgba(255,255,255,.7);box-shadow:0 28px 80px rgba(15,23,42,.28)!important} .items-invoice-modal-head{min-height:80px!important;padding:17px 20px!important;background:linear-gradient(115deg,#fff 55%,#f3f6ff)!important;border-bottom:1px solid #e2e8f0!important}.items-invoice-modal-head>div>span{display:block;color:#5f6bd6;font-size:9px;font-weight:850;text-transform:uppercase;letter-spacing:.11em}.items-invoice-modal-head h2{margin:3px 0 0!important;color:#18263b;font-size:21px!important}.items-invoice-modal-head p{margin:4px 0 0;color:#7a8799;font-size:10.5px}.items-invoice-modal-head>button{width:34px;height:34px!important;display:grid;place-items:center;border:1px solid #d7e0eb!important;border-radius:9px;background:#fff!important;color:#64748b!important;font-size:inherit!important}.items-invoice-modal-head>button svg{width:15px} .items-invoice-modal-body{padding:20px!important;background:#f8fafc!important}.items-form-layout{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:18px;align-items:start}.items-form-layout main{display:grid;gap:13px} .items-form-section{overflow:hidden;border:1px solid #dce3ec;border-radius:13px;background:#fff;box-shadow:0 6px 20px rgba(31,48,76,.045)}.items-form-section>header{display:flex;align-items:center;gap:10px;padding:13px 15px;border-bottom:1px solid #e7ecf3;background:linear-gradient(90deg,#fbfcff,#f7f9ff)}.items-form-section>header>span{width:28px;height:28px;display:grid;place-items:center;border-radius:8px;background:#eef3ff;color:#4b62d5;font-size:10px;font-weight:850}.items-form-section>header strong,.items-form-section>header small{display:block}.items-form-section>header strong{color:#20314a;font-size:12px}.items-form-section>header small{margin-top:2px;color:#8a97a8;font-size:9.5px} .items-form-fields{display:grid;gap:12px;padding:15px}.items-form-fields.two{grid-template-columns:1fr 1fr}.items-form-field{display:grid;gap:6px}.items-form-field.full{grid-column:1/-1}.items-form-field>span{color:#374b66;font-size:10.5px;font-weight:780}.items-form-field em{color:#dc3545;font-style:normal}.items-form-field input,.items-form-field select,.items-form-field textarea{box-sizing:border-box;width:100%;border:1px solid #cfd9e5!important;border-radius:8px!important;background:#fff!important;color:#263954!important;box-shadow:none!important;font:inherit;font-size:12px!important}.items-form-field input,.items-form-field select{height:38px!important;min-height:38px!important;padding:0 10px}.items-form-field textarea{padding:9px 10px;resize:vertical}.items-form-field input:focus,.items-form-field select:focus,.items-form-field textarea:focus{border-color:#86aaf0!important;box-shadow:0 0 0 3px rgba(59,130,246,.08)!important;outline:0}.items-form-field small{color:#8592a4;font-size:9.5px}.items-form-field small a{color:#316ac4} .items-form-sidebar{display:grid;gap:12px;position:sticky;top:0}.items-form-sidebar>section{padding:17px;border:1px solid #dce3ec;border-radius:13px;background:#fff;box-shadow:0 6px 20px rgba(31,48,76,.045)}.items-sidebar-eyebrow{display:block;color:#6d63e8;font-size:8.5px;font-weight:850;letter-spacing:.1em}.items-preview-icon{width:45px;height:45px;display:grid;place-items:center;margin:12px 0;border-radius:13px;background:linear-gradient(135deg,#eef2ff,#e7f8ff);color:#4e60d7}.items-preview-icon svg{width:20px}.items-form-sidebar>section>strong{display:block;color:#21344f;font-size:15px}.items-form-sidebar>section>p{margin:6px 0 14px;color:#7c899b;font-size:10.5px;line-height:1.5}.items-form-sidebar dl{margin:0}.items-form-sidebar dl>div{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-top:1px solid #edf1f5}.items-form-sidebar dt{color:#7a8799;font-size:10px}.items-form-sidebar dd{margin:0;color:#253a56;font-size:10.5px;font-weight:750}.items-form-tip{display:flex!important;align-items:flex-start;gap:8px!important;background:#f7fbff!important;border-color:#dceafb!important}.items-form-tip svg{width:15px;flex:none;color:#3c75d6}.items-form-tip p{margin:0!important;color:#58708d!important} .items-form-error{display:flex;align-items:flex-start;gap:8px;padding:10px 12px;border:1px solid #fecaca;border-radius:9px;background:#fff1f2;color:#b91c1c;font-size:10.5px}.items-form-error svg{width:14px;flex:none} .items-invoice-modal-footer{position:sticky;bottom:0;z-index:2;display:flex!important;justify-content:flex-end;gap:8px;padding:13px 20px!important;border-top:1px solid #e1e7ef!important;background:rgba(255,255,255,.96)!important;backdrop-filter:blur(8px);box-shadow:0 -8px 24px rgba(30,48,76,.05)}.items-modal-cancel,.items-modal-save{min-height:37px!important;border-radius:8px!important;font-size:11px!important}.items-modal-cancel{padding:0 13px;border:1px solid #ced8e5;background:#fff;color:#53647a;cursor:pointer}.items-modal-save{padding:0 14px!important;border:0!important} /* Item Groups */ .items-groups-summary{grid-template-columns:repeat(4,minmax(0,1fr))}.items-group-layout{display:grid;grid-template-columns:310px minmax(0,1fr);gap:14px;align-items:start}.items-group-create-card{position:sticky;top:86px;padding:18px;border:1px solid #dce3ec;border-radius:14px;background:#fff;box-shadow:0 7px 24px rgba(31,48,76,.06)}.items-group-create-head{display:flex;align-items:center;gap:10px;margin-bottom:16px}.items-group-create-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:11px;background:linear-gradient(135deg,#eef2ff,#e7f8ff);color:#4f63db}.items-group-create-icon svg{width:17px}.items-group-create-head strong,.items-group-create-head small{display:block}.items-group-create-head strong{color:#20314a;font-size:13px}.items-group-create-head small{margin-top:2px;color:#8996a8;font-size:9.5px}.items-group-create-form{display:grid;gap:10px}.items-group-create-form label{display:grid;gap:6px;color:#42536b;font-size:10.5px;font-weight:750}.items-group-create-form input{height:39px;border:1px solid #cbd7e5;border-radius:9px;padding:0 10px}.items-group-create-form button{height:39px!important;border:0!important} .items-group-card-head{min-height:62px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 15px;border-bottom:1px solid #e3e9f1;background:linear-gradient(90deg,#fbfcff,#f7f9ff)}.items-group-card-head strong,.items-group-card-head span{display:block}.items-group-card-head strong{color:#24364f;font-size:12px}.items-group-card-head>div>span{margin-top:3px;color:#8895a7;font-size:9.5px}.items-group-count{display:inline-flex!important;align-items:center;justify-content:center;min-height:27px;padding:0 9px;border-radius:999px;background:#eef4ff;color:#315fc5!important;font-size:9.5px!important;font-weight:800} .items-group-table{min-width:760px}.items-group-inline-form{display:flex;align-items:center;gap:6px}.items-group-inline-form input{width:min(260px,22vw);height:34px;border:1px solid #cfd9e5;border-radius:7px;padding:0 9px;background:#fff}.items-group-inline-form button{width:32px;height:32px;display:grid;place-items:center;border:1px solid #d4dfec;border-radius:7px;background:#fff;color:#55729a;cursor:pointer}.items-group-inline-form button svg{width:13px} /* Import Items */ .items-import-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:14px;align-items:start}.items-import-layout main{display:grid;gap:14px}.items-import-instructions,.items-import-upload-card{border:1px solid #dce3ec;border-radius:14px;background:#fff;box-shadow:0 7px 24px rgba(31,48,76,.06)}.items-import-instructions>header{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid #e7ecf3;background:linear-gradient(90deg,#fbfcff,#f7f9ff)}.items-import-step{width:30px;height:30px;display:grid;place-items:center;border-radius:8px;background:#eef3ff;color:#4b62d5;font-size:10px;font-weight:850}.items-import-instructions header strong,.items-import-instructions header small{display:block}.items-import-instructions header strong{color:#20314a;font-size:12px}.items-import-instructions header small{margin-top:2px;color:#8a97a8;font-size:9.5px}.items-import-instructions ol{margin:0;padding:16px 18px 17px 36px;color:#56687f;font-size:11px;line-height:1.7}.items-import-instructions li+li{margin-top:4px}.items-import-schema-card,.items-import-preview-card{overflow:hidden}.items-import-schema{min-width:900px}.items-import-schema tbody td{color:#728196!important}.items-import-upload-card{position:sticky;top:86px;padding:20px}.items-import-upload-icon{width:48px;height:48px;display:grid;place-items:center;margin-bottom:12px;border-radius:14px;background:linear-gradient(135deg,#eef2ff,#e7f8ff);color:#4e60d7}.items-import-upload-icon svg{width:21px}.items-import-upload-card h2{margin:5px 0 4px;color:#20314a;font-size:17px}.items-import-upload-card>p{margin:0 0 14px;color:#7f8c9d;font-size:10.5px;line-height:1.5}.items-import-upload-card form{display:grid;gap:9px}.items-file-field{display:grid;gap:6px;color:#42536b;font-size:10.5px;font-weight:750}.items-file-field em{color:#dc3545;font-style:normal}.items-file-field input{width:100%;box-sizing:border-box;padding:9px;border:1px dashed #bdcadc;border-radius:10px;background:#fbfcfe;font-size:10.5px}.items-import-main-button,.items-import-simulate-button{width:100%;min-height:39px!important;justify-content:center;border-radius:9px!important;font-size:11px!important;cursor:pointer}.items-import-simulate-button{border:1px solid #ced8e5!important;background:#fff!important;color:#34506f!important}.items-import-note{display:flex;align-items:flex-start;gap:7px;margin-top:12px;padding:9px 10px;border-radius:9px;background:#f7fbff;color:#66809f;font-size:9.5px}.items-import-note svg{width:13px;flex:none}.items-import-error{margin:0 14px 12px}.items-import-success{display:flex;align-items:center;gap:8px;margin:0 14px 12px;padding:10px 12px;border:1px solid #ccebdc;border-radius:9px;background:#effbf5;color:#16845a;font-size:10.5px}.items-import-success svg{width:14px} @media(max-width:1050px){.items-summary-grid{grid-template-columns:repeat(3,1fr)}.items-form-layout,.items-import-layout{grid-template-columns:1fr}.items-form-sidebar,.items-import-upload-card{position:static}.items-form-sidebar{grid-template-columns:1fr 1fr}.items-group-layout{grid-template-columns:1fr}.items-group-create-card{position:static}} @media(max-width:760px){.items-summary-grid,.items-groups-summary{grid-template-columns:repeat(2,1fr)}.items-modern-bulk{grid-template-columns:1fr}.items-form-fields.two{grid-template-columns:1fr}.items-form-field.full{grid-column:auto}.items-form-sidebar{grid-template-columns:1fr}.items-invoice-modal-body{padding:13px!important}.items-invoice-modal-head{align-items:flex-start!important}.items-group-inline-form input{width:190px}} @media(max-width:520px){.items-summary-grid,.items-groups-summary{grid-template-columns:1fr}.items-invoice-modal{width:calc(100vw - 16px)!important}.items-invoice-modal-backdrop{padding:8px!important}} /* ========================================================== Sales & Finance โ†’ Orders โ€” invoice-matched redesign ========================================================== */ .orders-modern-page{max-width:1600px;margin:0 auto;color:#263954} .orders-total-value{min-width:138px;display:grid;gap:2px;padding:7px 11px;border:1px solid #d6e1ed;border-radius:9px;background:#fff} .orders-total-value small{color:#8290a3;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.06em} .orders-total-value strong{color:#203650;font-size:12px} .orders-summary-grid{grid-template-columns:repeat(6,minmax(0,1fr))} .orders-list-card{overflow:hidden} .orders-modern-table{min-width:1180px} .orders-modern-table th:nth-child(1){min-width:190px}.orders-modern-table th:nth-child(2){min-width:170px}.orders-modern-table th:nth-child(3){min-width:115px}.orders-modern-table th:nth-child(4){min-width:92px}.orders-modern-table th:nth-child(5){min-width:145px}.orders-modern-table th:nth-child(6){min-width:125px}.orders-modern-table th:nth-child(7){min-width:115px}.orders-modern-table th:nth-child(8){min-width:120px} .orders-options-heading{text-align:right!important} .orders-client{color:#31455f;font-weight:700}.orders-item-count{display:inline-flex;align-items:center;min-height:24px;padding:3px 8px;border-radius:999px;background:#f2f5f9;color:#607188;font-size:10px;font-weight:800} .orders-invoice-link{display:inline-flex;align-items:center;gap:5px;color:#315fc5!important;font-size:10.5px;font-weight:800;text-decoration:none}.orders-invoice-link svg{width:13px;height:13px} .orders-amount{color:#203650;font-size:11.5px;white-space:nowrap} .invoice-contact-status.status-new{background:#fff7df;border-color:#f2e2ae;color:#986c06}.invoice-contact-status.status-confirmed{background:#eef4ff;border-color:#d6e2fb;color:#315fc5}.invoice-contact-status.status-processing{background:#e9f9fb;border-color:#c9edf0;color:#0f7e87}.invoice-contact-status.status-completed{background:#eefaf4;border-color:#d5f0e1;color:#198754}.invoice-contact-status.status-cancelled{background:#fff1f2;border-color:#f3d0d4;color:#bd3d4d} .orders-empty{padding:46px 18px!important}.orders-empty svg{width:26px;height:26px;margin:0 auto 8px}.orders-empty strong,.orders-empty span{display:block}.orders-empty strong{color:#4c5e76}.orders-empty span{margin:4px 0 10px;color:#8a98aa;font-size:11px}.orders-empty a{font-size:11px;font-weight:800} .order-create-modern-page{max-width:1500px!important} .order-form-errors{display:flex;align-items:flex-start;gap:10px;margin:0 0 14px;padding:12px 14px;border:1px solid #fecaca;border-radius:10px;background:#fff1f2;color:#b91c1c}.order-form-errors svg{width:16px;flex:none;margin-top:1px}.order-form-errors strong,.order-form-errors span{display:block}.order-form-errors span{margin-top:2px;font-size:11px} .order-create-card{overflow:hidden!important}.order-create-layout{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(310px,.7fr);min-height:520px} .order-create-main{min-width:0;padding:22px 24px;border-right:1px solid #e5eaf1}.order-create-sidebar{padding:22px;background:linear-gradient(180deg,#fbfcff,#f8fafc)} .order-section-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:15px}.order-section-heading span{display:block;color:#68798f;font-size:9.5px;font-weight:850;text-transform:uppercase;letter-spacing:.08em}.order-section-heading h2{margin:3px 0 0;color:#20314a;font-size:16px}.order-section-heading.compact{margin-bottom:13px} .order-add-item{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 10px;border:1px solid #cbd8e7;border-radius:8px;background:#fff;color:#315fc5;font-size:11px;font-weight:800;cursor:pointer}.order-add-item:hover{background:#eef5ff}.order-add-item svg{width:14px} .order-create-table-wrap{overflow:auto;border:1px solid #e0e6ef;border-radius:11px;background:#fff}.order-create-table{width:100%;min-width:760px;border-collapse:collapse}.order-create-table th{height:39px;padding:0 10px;background:#f5f7fb;color:#53647a;text-align:left;font-size:10px;font-weight:850;text-transform:uppercase;letter-spacing:.045em;border-bottom:1px solid #e1e7ef}.order-create-table td{padding:12px 10px;border-bottom:1px solid #edf1f5;color:#34455e;font-size:11.5px;vertical-align:middle}.order-create-table tbody tr:last-child td{border-bottom:0}.order-create-table select,.order-create-table input{height:36px;min-height:36px!important;border:1px solid #cfd9e5;border-radius:7px;background:#fff;color:#30435c;padding:0 9px;font:inherit;box-sizing:border-box}.order-create-table select{width:100%;min-width:250px}.order-create-table input{width:90px}.order-create-table .line-rate,.order-create-table .line-tax,.order-create-table .line-total{white-space:nowrap;font-weight:700}.order-create-table .line-total{color:#1f4f95}.order-create-table .line-unit{display:block;margin-top:4px;color:#8a98aa;font-size:9.5px}.order-create-table .line-remove{width:31px;height:31px;display:grid;place-items:center;border:1px solid #e5d5d8;border-radius:7px;background:#fff;color:#b84b58;cursor:pointer}.order-create-table .line-remove:hover{background:#fff1f2;border-color:#fecaca}.order-create-table .line-remove svg{width:13px} .order-line-help{display:flex;align-items:center;gap:6px;margin-top:10px;color:#8996a8;font-size:10px}.order-line-help svg{width:13px} .order-form-section{padding-bottom:17px;border-bottom:1px solid #e1e7ef}.order-create-sidebar .estimate-field{display:grid;gap:7px;margin-bottom:13px}.order-create-sidebar .estimate-field>span{color:#374b66;font-size:11.5px;font-weight:800}.order-create-sidebar .estimate-field em{color:#dc3545;font-style:normal}.order-create-sidebar .estimate-field select,.order-create-sidebar .estimate-field textarea{width:100%;box-sizing:border-box;border:1px solid #cfd9e5;border-radius:8px;background:#fff;color:#263954;padding:9px 10px;font:inherit;font-size:12px}.order-create-sidebar .estimate-field select{height:39px}.order-create-sidebar .estimate-field textarea{resize:vertical;min-height:110px}.order-create-sidebar .estimate-field select:focus,.order-create-sidebar .estimate-field textarea:focus{outline:0;border-color:#86aaf0;box-shadow:0 0 0 3px rgba(59,130,246,.08)} .order-live-summary{margin-top:18px;padding:15px 16px;border:1px solid #dfe6ef;border-radius:11px;background:#fff}.order-live-summary dl{margin:0}.order-live-summary dl>div{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid #edf1f5}.order-live-summary dl>div:last-child{border-bottom:0}.order-live-summary dt{color:#68798f;font-size:11px}.order-live-summary dd{margin:0;color:#2a3d56;font-size:12px;font-weight:800}.order-live-summary .grand{margin:4px -7px -2px;padding:11px 8px!important;border:0!important;border-radius:8px;background:#eef5ff}.order-live-summary .grand dt,.order-live-summary .grand dd{color:#174f96} .order-create-actions{justify-content:flex-end!important}.order-create-actions a{display:inline-flex!important;align-items:center;gap:6px}.order-create-actions a svg,.order-create-actions button svg{width:14px} .order-detail-heading-meta{display:flex;align-items:center;gap:7px;color:#77869a;font-size:11px}.order-detail-heading-actions{align-items:center}.order-document{min-height:680px}.order-simple-brand strong{display:block;color:#111827;font-size:24px;font-weight:900;letter-spacing:-.04em}.order-simple-brand span{display:block;margin-top:5px;color:#78869a;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.09em}.order-simple-parties address{white-space:normal!important} .order-document-table th:nth-child(1){text-align:left!important}.order-document-table th:nth-child(n+2),.order-document-table td:nth-child(n+2){text-align:right!important}.order-document-table th:nth-child(1){width:42%} .order-detail-sidebar .order-status-form{display:grid;gap:9px}.order-status-form label{display:grid;gap:5px;color:#66778d;font-size:10.5px;font-weight:700}.order-status-form select{height:36px;border:1px solid #cbd7e5;border-radius:8px;background:#fff;padding:0 9px;color:#30435c}.order-status-form button{min-height:36px;display:flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:8px;background:#1f4f95;color:#fff;font-size:11px;font-weight:800;cursor:pointer}.order-status-form button svg{width:13px} .order-linked-invoice{display:flex;align-items:center;gap:9px;padding:10px;border:1px solid #dce6f2;border-radius:9px;background:#f8fbff;color:#315fc5;text-decoration:none}.order-linked-invoice>svg{width:17px;flex:none}.order-linked-invoice strong,.order-linked-invoice small{display:block}.order-linked-invoice strong{font-size:11.5px}.order-linked-invoice small{margin-top:2px;color:#8996a8;font-size:9.5px} .order-danger-section small{display:block;margin-top:7px;color:#9a7c82;font-size:9.5px}.order-delete-button{width:100%;min-height:35px;display:flex;align-items:center;justify-content:center;gap:6px;border:1px solid #f0c8ce;border-radius:8px;background:#fff;color:#b63b4b;font-size:11px;font-weight:800;cursor:pointer}.order-delete-button:hover:not(:disabled){background:#fff1f2;border-color:#fecaca}.order-delete-button:disabled{opacity:.45;cursor:not-allowed}.order-delete-button svg{width:13px} @media(max-width:1050px){.order-create-layout{grid-template-columns:1fr}.order-create-main{border-right:0;border-bottom:1px solid #e5eaf1}.orders-summary-grid{grid-template-columns:repeat(3,1fr)}} @media(max-width:760px){.orders-summary-grid{grid-template-columns:repeat(2,1fr)}.orders-total-value{width:100%}.order-create-main,.order-create-sidebar{padding:16px}.order-detail-heading-meta{flex-wrap:wrap}} @media print{.order-detail-modern-page .invoice-detail-heading,.order-detail-modern-page .invoice-detail-sidebar{display:none!important}.order-detail-modern-page .invoice-detail-layout{display:block}.order-document{border:0!important;box-shadow:none!important;min-height:0!important;padding:22px 24px!important}} /* ============================================================ SECTION: profile-modern.css ============================================================ */ .mp-page{--ink:#172033;--muted:#718096;--line:#e1e7ef;max-width:1180px;margin:0 auto 50px;color:var(--ink)}.mp-hero{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;overflow:hidden;margin-bottom:18px;padding:28px 30px;border:1px solid #dfe6ef;border-radius:18px;background:linear-gradient(125deg,#fff 0%,#f7faff 62%,#eaf2ff 100%);box-shadow:0 12px 32px #1526440d}.mp-hero:after{position:absolute;right:-70px;bottom:-110px;width:270px;height:270px;border:45px solid #dce9ff80;border-radius:50%;content:""}.mp-person,.mp-actions{position:relative;z-index:1;display:flex;align-items:center}.mp-person{gap:20px}.mp-person>img,.mp-person>span{width:82px;height:82px;flex:0 0 82px;border:4px solid #fff;border-radius:22px;object-fit:cover;box-shadow:0 9px 24px #223d6a24}.mp-person>span{display:grid;place-items:center;background:linear-gradient(135deg,#1e65d5,#643fd7);color:#fff;font-size:26px;font-weight:800}.mp-person small,.mp-summary header small,.mp-card header small{color:#4776c9;font-size:10px;font-weight:850;letter-spacing:.14em}.mp-person h1{margin:5px 0 8px;font-size:29px;letter-spacing:-.035em}.mp-person p{display:flex;align-items:center;gap:7px;margin:0;color:#637188;font-size:12px}.mp-person p svg{width:14px}.mp-person p b{width:3px;height:3px;border-radius:50%;background:#a8b3c2}.mp-actions{gap:9px}.mp-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid #17253a;border-radius:9px;background:#17253a;color:#fff!important;padding:10px 14px;text-decoration:none;font-size:12px;font-weight:750}.mp-btn svg{width:15px}.mp-btn.secondary{border-color:#d0dae7;background:#fff;color:#36465d!important} .mp-summary{margin-bottom:18px;padding:23px 24px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:0 8px 25px #182a4509}.mp-summary>header,.mp-card>header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}.mp-summary h2,.mp-card h2{margin:4px 0 3px;font-size:17px}.mp-summary header p,.mp-projects header p{margin:0;color:var(--muted);font-size:12px}.mp-summary header>a{display:flex;align-items:center;gap:5px;color:#2460cf;font-size:12px;font-weight:750;text-decoration:none}.mp-summary header>a svg{width:15px}.mp-stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:18px}.mp-stats article{padding:15px 16px;border:1px solid #e2e8f0;border-radius:11px;background:#fafbfd}.mp-stats span,.mp-stats small,.mp-stats strong{display:block}.mp-stats span{min-height:30px;color:#657389;font-size:11px}.mp-stats strong{margin:2px 0;font-size:21px;letter-spacing:-.03em}.mp-stats small{color:#9aa5b4;font-size:9px}.mp-stats .featured{border-color:#315fc9;background:linear-gradient(135deg,#1f3151,#284c87);color:#fff}.mp-stats .featured span,.mp-stats .featured small{color:#c9d8f2} .mp-grid{display:grid;grid-template-columns:minmax(330px,.85fr) minmax(520px,1.55fr);gap:16px}.mp-card{overflow:hidden;border:1px solid var(--line);border-radius:15px;background:#fff;box-shadow:0 8px 26px #16243b0a}.mp-card>header{align-items:center;padding:20px 22px 14px;border-bottom:1px solid #edf0f4}.mp-card>header>a{display:grid;width:32px;height:32px;place-items:center;border:1px solid #dce3ec;border-radius:8px;color:#52637a}.mp-card>header>a svg,.mp-card>header>svg{width:17px}.mp-detail-list{padding:8px 22px}.mp-detail-list>div{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #edf1f5}.mp-detail-list>div>svg{width:18px;color:#66809f}.mp-detail-list span,.mp-detail-list strong{display:block}.mp-detail-list span{color:#7b8798;font-size:10px}.mp-detail-list strong{margin-top:3px;color:#25344a;font-size:12px}.mp-detail-list a{color:#235fc5;text-decoration:none}.mp-departments{margin:5px 22px 20px;padding-top:14px}.mp-departments>span{display:block;margin-bottom:8px;color:#7b8798;font-size:10px}.mp-departments>div{display:flex;flex-wrap:wrap;gap:6px}.mp-departments b{padding:5px 8px;border-radius:6px;background:#eaf1ff;color:#265cb8;font-size:10px}.mp-departments em{color:#8c98a8;font-size:11px}.mp-count{display:grid;min-width:43px;height:43px;place-items:center;border-radius:12px;background:#eaf1ff;color:#255fca;font-size:13px;font-weight:800}.mp-search{position:relative;display:flex;gap:7px;padding:15px 18px}.mp-search>svg{position:absolute;top:27px;left:30px;width:15px;color:#8a96a7}.mp-search input{min-width:0;flex:1;padding:9px 10px 9px 34px;border:1px solid #d3dce7;border-radius:8px;font:inherit;font-size:11px}.mp-search button{border:0;border-radius:8px;background:#24344c;color:#fff;padding:8px 13px;font-weight:700}.mp-table-wrap{overflow:auto}.mp-table-wrap table{width:100%;min-width:580px;border-collapse:collapse}.mp-table-wrap th,.mp-table-wrap td{padding:13px 15px;border-bottom:1px solid #edf1f5;text-align:left;font-size:11px}.mp-table-wrap th{background:#f8fafc;color:#718096;font-size:9px;letter-spacing:.06em;text-transform:uppercase}.mp-table-wrap tbody tr:hover{background:#fbfcfe}.mp-table-wrap a{display:inline-flex;align-items:center;gap:5px;color:#285fbf;text-decoration:none}.mp-table-wrap a svg{width:12px}.mp-status{display:inline-flex;padding:5px 8px;border-radius:20px;background:#eaf1ff;color:#285eb7;font-size:10px;font-weight:750}.mp-empty{height:100px;color:#8793a5!important;text-align:center!important}.mp-projects>footer{padding:13px 18px}.mp-security,.mp-notifications{padding-bottom:21px}.mp-security>p{margin:18px 22px;color:#6c798d;font-size:12px;line-height:1.6}.mp-security>.mp-btn{margin:0 22px}.mp-notification-empty{display:flex;align-items:center;flex-direction:column;padding:29px 20px;color:#78869a;text-align:center}.mp-notification-empty>span{display:grid;width:45px;height:45px;margin-bottom:10px;place-items:center;border-radius:13px;background:#edf3ff;color:#396bc2}.mp-notification-empty svg{width:20px}.mp-notification-empty strong{color:#36455b;font-size:12px}.mp-notification-empty p{margin:4px 0 0;font-size:11px} @media(max-width:950px){.mp-grid{grid-template-columns:1fr}.mp-stats{grid-template-columns:repeat(3,1fr)}}@media(max-width:620px){.mp-hero{align-items:flex-start;flex-direction:column;padding:21px}.mp-person{align-items:flex-start}.mp-person>img,.mp-person>span{width:62px;height:62px;flex-basis:62px;border-radius:17px}.mp-person h1{font-size:23px}.mp-person p{align-items:flex-start;flex-direction:column}.mp-person p b{display:none}.mp-actions{width:100%}.mp-actions .mp-btn{flex:1}.mp-summary>header{align-items:flex-start;flex-direction:column}.mp-stats{grid-template-columns:1fr 1fr}} /* ============================================================ SECTION: profile.css ============================================================ */ .customer-account-menu{position:relative;margin:0 3px 18px}.customer-account-menu summary{list-style:none;cursor:pointer;margin:0}.customer-account-menu summary::-webkit-details-marker{display:none}.customer-account-menu .customer-profile-card>svg{width:14px;margin-left:auto;color:#64748b}.customer-profile-photo{width:34px;height:34px;border-radius:50%;object-fit:cover}.customer-account-dropdown{position:absolute;z-index:45;top:calc(100% + 8px);left:0;width:100%;background:#fff;border:1px solid #d8e0eb;border-radius:7px;box-shadow:0 5px 16px #0f172a25;padding:6px 0}.customer-account-dropdown>a,.customer-account-dropdown>form button,.customer-language-menu summary,.customer-language-menu button{display:block;width:100%;text-align:left;color:#223047;text-decoration:none;padding:8px 13px;font:inherit;background:none;border:0;cursor:pointer}.customer-account-dropdown>a:hover,.customer-account-dropdown button:hover,.customer-language-menu summary:hover{background:#f1f5fa}.customer-language-menu summary{list-style:none;display:flex;justify-content:space-between}.customer-language-menu summary::-webkit-details-marker{display:none}.customer-language-menu form{background:#f8fafc}.customer-language-menu button{padding-left:25px} .profile-page{max-width:none}.profile-summary-head h1{font-size:22px;margin:0 0 4px}.profile-summary-head a{color:#66758a;text-decoration:none}.profile-summary-head a:hover{color:#1e65d8}.profile-summary-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:14px 0 28px}.profile-summary-grid>div{min-height:62px;border:1px solid #d7dfeb;background:#fff;border-radius:8px;padding:11px 14px;box-shadow:0 1px 2px #0f172a0b}.profile-summary-grid span,.profile-summary-grid strong{display:block}.profile-summary-grid strong{font-size:15px;margin-top:4px}.profile-columns{display:grid;grid-template-columns:minmax(450px,2fr) minmax(300px,2.7fr);gap:30px}.profile-columns h2{font-size:20px;margin:0 0 12px}.profile-name{display:flex;align-items:center;gap:8px}.profile-name img,.profile-name span{width:31px;height:31px;border-radius:50%;object-fit:cover;background:#dcf2e8;display:grid;place-items:center;font-size:15px}.profile-card{background:#fff;border:1px solid #dbe2eb;border-radius:7px;box-shadow:0 2px 5px #16203616}.profile-info{padding:25px;position:relative}.profile-info p{margin:2px 0;display:flex;align-items:center;gap:10px}.profile-info p svg{width:15px;height:15px;color:#8592a4}.profile-info a{color:#2365cb}.profile-info h3{font-size:16px;margin:30px 0 10px}.profile-edit-link{position:absolute;right:23px;top:20px;border:1px solid #d7dfeb;padding:5px;border-radius:5px}.profile-edit-link svg{width:16px;height:16px}.profile-tags{display:flex;gap:5px;flex-wrap:wrap}.profile-tags span{border:1px solid #d7e3ff;background:#f4f7ff;border-radius:5px;color:#2455b5;padding:4px 7px;font-size:14px}.profile-tags small{color:#94a3b8}.profile-table-search{display:flex;gap:6px;justify-content:flex-end;margin-bottom:8px}.profile-table-search input,.profile-filters input,.profile-filters select{border:1px solid #cfd8e6;border-radius:6px;padding:8px 10px;min-width:0;background:#fff;color:#334155}.profile-table-search button{border:1px solid #cfd8e6;background:#fff;border-radius:6px;color:#344256;padding:7px 11px}.profile-table-wrap{overflow:auto}.profile-table-wrap table{border-collapse:collapse;width:100%;min-width:560px}.profile-table-wrap th,.profile-table-wrap td{padding:12px 10px;border-bottom:1px solid #e5e9f1;text-align:left;white-space:nowrap}.profile-table-wrap th{background:#f8fafd;font-weight:600}.profile-status{border:1px solid #bdd4ff;color:#245dd8;border-radius:6px;padding:5px 8px}.profile-notifications .profile-card{padding:18px;color:#66758a}.profile-timesheets{padding:24px}.profile-dark-button{display:inline-flex;align-items:center;gap:6px;background:#1e293b;color:#fff;border:0;border-radius:7px;padding:9px 12px;text-decoration:none;cursor:pointer;font-weight:600}.profile-dark-button svg{width:15px;height:15px}.profile-chart{height:240px;border-top:1px solid #e5e9f1;border-bottom:1px solid #e5e9f1;margin:20px 0;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#66758a;gap:18px}.profile-chart-line{height:1px;background:#dce2ea;width:100%}.profile-filters{display:flex;gap:15px;align-items:center;margin-bottom:25px}.profile-filters select,.profile-filters input{flex:1}.profile-table-footer{display:flex;justify-content:space-between;padding-top:15px;color:#64748b} .profile-edit-page{max-width:850px;margin:0 auto}.profile-edit-page h1,.profile-edit-page h2{font-size:19px;margin:0 0 11px}.profile-edit-page h2{margin-top:26px}.profile-edit-card{overflow:hidden}.profile-avatar-edit{display:flex;align-items:flex-start;gap:10px;padding:20px 22px 0}.profile-avatar-edit>img,.profile-avatar-edit>span{width:125px;height:125px;border-radius:50%;object-fit:cover;background:#dff2ec;display:grid;place-items:center;font-size:52px;color:#35766b}.profile-avatar-edit form{align-self:center}.profile-avatar-edit label{cursor:pointer;color:#2563eb;font-weight:600}.profile-avatar-edit input[type=file]{position:absolute;width:1px;height:1px;opacity:0}.profile-avatar-edit button{border:0;background:none;color:#ef4444;font-size:22px;cursor:pointer}.profile-form-body{padding:18px 22px 24px}.profile-form-body>label:not(.profile-radio){display:block;font-weight:600;margin-bottom:16px}.profile-form-body em{color:#e84545;font-style:normal}.profile-form-body input:not([type=radio]),.profile-form-body textarea,.profile-form-body select{box-sizing:border-box;display:block;width:100%;margin-top:6px;padding:8px 10px;border:1px solid #cbd5e1;border-radius:6px;min-height:34px;color:#334155;font:inherit}.profile-form-body textarea{min-height:80px}.profile-departments>span{display:block;margin-bottom:8px;font-weight:600}.profile-edit-card footer{padding:12px 22px;background:#fafbfe;border-top:1px solid #e5e9f1;text-align:right}.profile-edit-card footer button{border:0;border-radius:6px;background:#1e293b;color:#fff;padding:9px 13px;cursor:pointer}.profile-radio{display:block;margin:9px 0}.profile-radio input{accent-color:#2563eb}.profile-help{color:#66758a;font-size:14px;margin-bottom:0} .profile-info .profile-table-wrap table{min-width:0}.profile-info .profile-table-wrap th,.profile-info .profile-table-wrap td{white-space:normal} @media(max-width:1100px){.profile-summary-grid{grid-template-columns:repeat(3,1fr)}.profile-columns{grid-template-columns:1fr}.profile-filters{flex-wrap:wrap}} @media(max-width:700px){.profile-summary-grid{grid-template-columns:repeat(2,1fr)}.profile-edit-page{margin:0}.profile-filters>*{min-width:140px}} /* ============================================================ SECTION: project-sales.css ============================================================ */ /* Projects > Sales โ€” base design */ .project-detail-page .project-sales-base{display:grid;gap:10px;min-width:0} .project-detail-page .project-sales-overview-head{margin-bottom:0} .project-detail-page .project-sales-nav-base{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin:0} .project-detail-page .project-sales-nav-base>a{min-width:0;display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:9px;min-height:58px;padding:9px 10px;border:1px solid #dce4ed;border-radius:10px;background:#fff;color:#53647a;text-decoration:none;box-shadow:0 3px 10px rgba(31,48,76,.03)} .project-detail-page .project-sales-nav-base>a:hover{border-color:#b6c8e8;background:#f9fbff} .project-detail-page .project-sales-nav-base>a.active{border-color:#9cb6f0;background:#f1f5ff;box-shadow:0 4px 12px rgba(49,87,223,.08)} .project-detail-page .project-sales-nav-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:9px;background:#eef3ff;color:#4d68d6} .project-detail-page .project-sales-nav-icon svg{width:14px;height:14px} .project-detail-page .project-sales-nav-copy{min-width:0} .project-detail-page .project-sales-nav-copy b,.project-detail-page .project-sales-nav-copy small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .project-detail-page .project-sales-nav-copy b{color:#263b57;font-size:10.5px;font-weight:800} .project-detail-page .project-sales-nav-copy small{margin-top:3px;color:#8996a7;font-size:8.5px} .project-detail-page .project-sales-nav-base>a.active .project-sales-nav-copy b{color:#285fc1} .project-detail-page .project-sales-nav-count{min-width:24px;height:24px;display:grid;place-items:center;padding:0 6px;border-radius:999px;background:#f0f3f8;color:#66778d;font-size:9px;font-weight:800} .project-detail-page .project-sales-nav-base>a.active .project-sales-nav-count{background:#dfe9ff;color:#285fc1} .project-detail-page .project-sales-section-head{margin-top:2px} .project-detail-page .project-sales-total{display:inline-flex;align-items:center;min-height:30px;padding:0 10px;border:1px solid #d9e2ed;border-radius:8px;background:#fff;color:#39506e;font-size:10px;font-weight:800;white-space:nowrap} .project-detail-page .project-sales-card{overflow:hidden} .project-detail-page .project-sales-card .project-subtab-toolbar{margin:0} .project-detail-page .project-sales-table{width:100%;min-width:940px;border-collapse:collapse;font-size:11px} .project-detail-page .project-sales-table th{height:40px;padding:0 11px;border-bottom:1px solid #e4eaf1;background:#f8fafc;color:#24334b;text-align:left;font-size:9.5px;font-weight:800;white-space:nowrap} .project-detail-page .project-sales-table td{height:56px;padding:9px 11px;border-top:1px solid #e9edf3;color:#40516a;vertical-align:middle} .project-detail-page .project-sales-table tbody tr:hover td{background:#fbfdff} .project-detail-page .project-sales-table td small{display:block;margin-top:3px;color:#8b98aa;font-size:8.5px} .project-detail-page .project-sales-id{color:#7e8ca0;font-size:9.5px;font-weight:750} .project-detail-page .project-sales-view{width:30px;height:30px;display:grid;place-items:center;border:1px solid #d4dfeb;border-radius:7px;background:#fff;color:#55729a;text-decoration:none} .project-detail-page .project-sales-view:hover{border-color:#adc3e7;background:#eef5ff;color:#285fc1} .project-detail-page .project-sales-view svg{width:13px;height:13px} .project-detail-page .project-sales-footer a{display:inline-flex;align-items:center;gap:5px;color:#315fc5;text-decoration:none;font-weight:800} .project-detail-page .project-sales-footer a:hover{text-decoration:underline} .project-detail-page .project-sales-footer svg{width:12px;height:12px} .project-detail-page .project-subtab-status.status-draft{border-color:#d8e1ec;background:#f8fafc;color:#68798f} .project-detail-page .project-subtab-status.status-sent,.project-detail-page .project-subtab-status.status-unpaid,.project-detail-page .project-subtab-status.status-partially-paid{border-color:#c9dcff;background:#eef5ff;color:#2f65c9} .project-detail-page .project-subtab-status.status-paid,.project-detail-page .project-subtab-status.status-accepted,.project-detail-page .project-subtab-status.status-approved{border-color:#cdebdc;background:#eefaf4;color:#198754} .project-detail-page .project-subtab-status.status-overdue,.project-detail-page .project-subtab-status.status-declined,.project-detail-page .project-subtab-status.status-rejected{border-color:#efcfd3;background:#fff2f3;color:#c23a48} .project-detail-page .project-subtab-status.status-expired,.project-detail-page .project-subtab-status.status-cancelled,.project-detail-page .project-subtab-status.status-canceled{border-color:#efd2d5;background:#fff4f5;color:#b63b45} .project-detail-page .project-subtab-status.status-pending,.project-detail-page .project-subtab-status.status-partial{border-color:#f1dfba;background:#fff8ec;color:#a56d10} @media(max-width:1180px){.project-detail-page .project-sales-nav-base{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:760px){.project-detail-page .project-sales-nav-base{grid-template-columns:repeat(2,minmax(0,1fr))}.project-detail-page .project-sales-section-head{align-items:flex-start;flex-direction:column}.project-detail-page .project-sales-section-head .project-subtab-head-actions{width:100%;justify-content:flex-start}} @media(max-width:480px){.project-detail-page .project-sales-nav-base{grid-template-columns:1fr}.project-detail-page .project-sales-total{width:100%;justify-content:center}} /* ============================================================ SECTION: project-task-dialog.css ============================================================ */ .pw-task-dialog{width:min(600px,calc(100% - 28px));border-radius:14px}.pw-task-dialog form>header{padding:20px 21px}.pw-task-dialog .pw-dialog-body{padding:0 21px 18px;max-height:76vh}.pw-task-options{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e5e9ef;padding:27px 0 20px;margin-bottom:19px}.pw-task-options>div{display:flex;align-items:center;gap:15px}.pw-task-options label{display:flex;align-items:center;gap:7px;font-weight:600;font-size:14px}.pw-task-options input[type=checkbox]{width:17px;height:17px;accent-color:#2d70ef}.pw-attach-task{color:#1262dc!important;cursor:pointer}.pw-attach-task input{position:absolute;width:1px!important;height:1px!important;opacity:0}.pw-task-dialog .pw-dialog-body>label,.pw-task-dialog .pw-form-grid label{font-size:14px;color:#28394f;margin-bottom:15px}.pw-task-dialog .pw-dialog-body>label>input,.pw-task-dialog .pw-dialog-body>label>select,.pw-task-dialog .pw-form-grid input,.pw-task-dialog .pw-form-grid select{height:35px;padding:0 10px!important}.pw-task-dialog .pw-form-grid{gap:0 30px}.pw-task-dialog select[multiple]{min-height:35px;height:35px;padding-top:7px!important}.pw-task-tags{border-bottom:1px solid #e5e9ef;padding-bottom:18px}.pw-task-tags span{display:flex;align-items:center;gap:5px}.pw-task-tags svg{width:14px;height:14px}.pw-task-description{margin-top:20px}.pw-task-description textarea{min-height:132px}.pw-task-dialog form>footer{padding:13px 21px}.pw-task-dialog footer .pw-dark{padding:9px 13px}@media(max-width:650px){.pw-task-options{align-items:flex-start;gap:14px}.pw-task-options>div{align-items:flex-start;flex-direction:column;gap:8px}.pw-task-dialog .pw-form-grid{grid-template-columns:1fr;gap:0}} .pw-task-tags .pw-tag-editor{display:flex!important;align-items:center;flex-wrap:wrap;gap:6px;min-height:39px;border:1px solid #ccd6e2;border-radius:6px;padding:5px 8px;background:#fff;cursor:text}.pw-task-tags .pw-tag-editor>[data-tag-list]{display:contents}.pw-task-tags .pw-tag-editor>input{flex:1;min-width:150px;height:27px!important;border:0!important;outline:0;padding:0!important}.pw-task-tags .pw-tag-chip{display:inline-flex!important;align-items:center;gap:5px;background:#eef2f6;border-radius:5px;padding:5px 7px;color:#172a46;font-size:13px}.pw-task-tags .pw-tag-chip button{border:0;background:transparent;color:#526174;font-size:17px;line-height:1;padding:0;cursor:pointer} /* ============================================================ SECTION: projects.css ============================================================ */ .project-page{color:#1c2c43}.project-actions{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 0 9px}.project-actions-left{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.project-new,.project-list-icon,.project-filter-button{height:35px;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 10px;background:#fff;border:1px solid #ccd6e4;border-radius:7px;color:#24344c;font-size:14px;box-shadow:0 1px 2px #1e293b0b}.project-new{background:#1e2b40;border-color:#1e2b40;color:#fff;font-weight:600}.project-new:hover{background:#101d30}.project-actions svg{width:15px;height:15px}.project-list-icon{width:36px}.project-filter-button{cursor:pointer}.project-status-cards{display:flex;align-items:center;gap:7px;margin-left:16px;flex-wrap:wrap}.project-status-cards a{border:1px solid #d5ddea;border-radius:8px;background:#fff;padding:6px 10px;white-space:nowrap;font-size:14px;color:#59697f;box-shadow:0 1px 2px #1e293b08}.project-status-cards b{font-weight:600;color:#21334e;margin-right:4px}.project-status-cards .status-in-progress{color:#2a6fe8}.project-status-cards .status-on-hold{color:#eb7120}.project-status-cards .status-completed{color:#159b54}.project-filters{display:none;align-items:flex-end;gap:10px;padding:14px;background:#fff;border:1px solid #dce3ec;border-radius:7px;margin-bottom:9px}.project-filters.open{display:flex}.project-filters label{display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:600}.project-filters input,.project-filters select{height:34px;border:1px solid #cbd6e5;border-radius:5px;padding:0 9px;background:#fff;color:#23344d}.project-filters button{height:34px;border:0;border-radius:5px;padding:0 12px;background:#1e2b40;color:#fff;font-size:13px;cursor:pointer}.project-filters>a{font-size:13px;color:#6b7b8f;padding:9px}.project-table-card{background:#fff;border:1px solid #dce3ec;border-radius:8px;box-shadow:0 3px 5px #1e293b16;overflow:hidden}.project-toolbar{height:65px;padding:10px 24px;display:flex;align-items:center;justify-content:space-between;gap:10px}.project-toolbar-controls,.project-search{display:flex}.project-toolbar-controls form{display:flex}.project-toolbar-controls select,.project-toolbar-controls a{height:31px;border:1px solid #cbd6e5;background:#fff;color:#25364f;font-size:13px;display:inline-flex;align-items:center;padding:0 11px}.project-toolbar-controls select{border-radius:6px 0 0 6px;min-width:75px}.project-toolbar-controls a{border-left:0}.project-toolbar-controls a:last-child{border-radius:0 6px 6px 0;padding:0 9px}.project-toolbar-controls svg,.project-search svg{width:14px;height:14px}.project-search button{width:42px;height:31px;border:1px solid #cbd6e5;background:#fff;border-radius:6px 0 0 6px;color:#536881}.project-search input{height:31px;width:198px;border:1px solid #cbd6e5;border-left:0;border-radius:0 6px 6px 0;padding:0 10px;font-size:13px;outline:none}.project-table-scroll{overflow-x:auto}.project-data-table{width:100%;min-width:1050px;border-collapse:collapse;font-size:14px}.project-data-table th{background:#f8fafc;text-align:left;font-weight:600;color:#25344d;height:41px}.project-data-table th,.project-data-table td{padding:11px;border-top:1px solid #e7ebf2}.project-data-table td{height:59px;color:#263954}.project-data-table th:first-child,.project-data-table td:first-child{width:80px;text-align:center}.project-data-table th:nth-child(2){min-width:220px}.project-data-table th:nth-child(3){min-width:210px}.project-data-table th:nth-child(5),.project-data-table th:nth-child(6){min-width:130px}.project-data-table td:nth-child(2) a{color:#1d304d;font-weight:500}.project-data-table td:nth-child(2) a:hover{color:#236de5;text-decoration:underline}.project-tag{display:inline-block;padding:4px 7px;border-radius:4px;background:#f1f4f8;color:#344a63;font-size:13px;margin:2px}.project-member-list{display:flex;align-items:center;padding-left:6px}.project-member-list span{width:25px;height:25px;border:2px solid #fff;border-radius:50%;background:#dcecf9;color:#365a7a;display:grid;place-items:center;margin-left:-6px;font-size:12px;font-weight:700}.project-member-list span:nth-child(even){background:#f8e6d2;color:#8a633e}.project-status{display:inline-block;padding:5px 8px;border:1px solid #cbd5e2;border-radius:6px;white-space:nowrap;font-size:13px;color:#43536a}.project-status.status-in-progress{color:#2c67dc;border-color:#a8c3ff;background:#f8fbff}.project-status.status-completed{color:#159b54;border-color:#b9eacb;background:#f6fff9}.project-status.status-on-hold{color:#d27820;border-color:#f7d9ad;background:#fffaf4}.project-status.status-cancelled{color:#cd4050;border-color:#f5c2ca;background:#fff8f9}.project-empty{text-align:center;padding:37px!important;color:#77869b!important}.project-empty a{color:#236cda}.project-footer{min-height:63px;border-top:1px solid #e6ebf2;padding:0 24px;display:flex;align-items:center;justify-content:space-between;color:#66768d;font-size:14px}.project-footer>div{display:flex;align-items:center;gap:16px}.project-footer b{background:#e8ecf2;padding:8px 11px;border-radius:5px;color:#20314a}.project-form-wrap{max-width:895px;margin:2px auto 0;color:#26364d}.project-form-heading{margin-bottom:13px}.project-form-heading h1{font-size:20px;line-height:1.2;margin:0}.project-form-card{background:#fff;border:1px solid #dce3eb;border-radius:7px;box-shadow:0 3px 5px #1e293b17;overflow:hidden}.project-form-tabs{height:49px;border-bottom:1px solid #dce3eb;background:#f9fafc;display:flex;align-items:stretch;padding:0 24px}.project-form-tabs button{border:0;border-bottom:1px solid transparent;background:transparent;padding:0 13px;font-size:15px;color:#3f4e64;cursor:pointer}.project-form-tabs button.active{border-bottom-color:#192942;font-weight:600;color:#1c2c45}.project-tab-panel{padding:27px 24px 24px}.project-tab-panel[hidden]{display:none}.project-field{display:flex;flex-direction:column;gap:8px;margin-bottom:15px;font-size:14px;font-weight:600;color:#34445b}.project-field em{font-style:normal;color:#e14652}.project-field input:not([type=range]),.project-field select,.project-field textarea,.project-multiselect summary{border:1px solid #cbd6e5;border-radius:6px;min-height:35px;padding:0 10px;font-size:14px;color:#25364e;background:#fff;font-weight:400;box-shadow:0 1px 2px #1e293b08;outline:none}.project-field input:not([type=range]):focus,.project-field select:focus,.project-field textarea:focus{border-color:#4b84ee;box-shadow:0 0 0 3px #e8f0ff}.project-field textarea{padding:10px;resize:vertical;min-height:195px}.project-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px}.project-check-inline{display:flex;align-items:center;gap:8px;margin:2px 0 17px;font-size:14px;font-weight:600}.project-check-inline input,.project-permissions input,.project-multiselect input{width:16px;height:16px;accent-color:#2e6fe8}.progress-field{margin-bottom:19px}.progress-field input[type=range]{appearance:none;width:100%;height:17px;background:#f8fbff;border:1px solid #e3eaf3;border-radius:3px;cursor:pointer}.progress-field input[type=range]::-webkit-slider-thumb{appearance:none;width:11px;height:22px;background:#9ce6bd;border-radius:4px}.project-multiselect{position:relative}.project-multiselect summary{display:flex;align-items:center;list-style:none;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.project-multiselect summary::-webkit-details-marker{display:none}.project-multiselect summary:after{content:'โŒ„';margin-left:auto;color:#43546a;padding-left:8px}.project-multiselect>div{position:absolute;top:38px;left:0;right:0;z-index:5;background:#fff;border:1px solid #cbd6e5;border-radius:6px;box-shadow:0 8px 18px #17243a1c;max-height:210px;overflow:auto;padding:5px}.project-multiselect>div label{display:flex;align-items:center;gap:7px;padding:5px 8px;font-size:13px;font-weight:500;cursor:pointer}.project-multiselect>div label:hover{background:#f2f6fb}.project-settings-panel>.project-field{margin-bottom:19px}.project-permissions{border-top:1px solid #e8ecf2;margin:14px -24px 0}.project-permissions label{height:45px;display:flex;align-items:center;gap:8px;border-bottom:1px solid #e8ecf2;padding:0 24px;font-size:14px;font-weight:600;color:#33445c}.project-permissions label:last-child{border-bottom:0}.project-form-footer{display:flex;justify-content:flex-end;padding:12px 24px;border-top:1px solid #dce3eb;background:#fafbfd}.project-form-footer button{border:0;border-radius:6px;background:#1d2b40;color:#fff;padding:9px 12px;font-size:14px;font-weight:600;cursor:pointer}.project-form-footer button:hover{background:#0e1c2d}@media(max-width:1200px){.project-status-cards{margin-left:0}.project-actions{align-items:flex-start}}@media(max-width:760px){.project-actions{flex-wrap:wrap}.project-toolbar{padding:10px;flex-wrap:wrap;height:auto}.project-search{margin-left:auto}.project-filters.open{flex-wrap:wrap}.project-form-grid{grid-template-columns:1fr;gap:0}.project-form-wrap{max-width:none}.project-tab-panel{padding:20px 16px}.project-form-tabs{padding:0 12px}.project-permissions{margin-left:-16px;margin-right:-16px}.project-permissions label{padding:0 16px;height:auto;min-height:45px}.project-form-footer{padding:12px 16px}}@media(max-width:450px){.project-status-cards{width:100%}.project-search input{width:150px}.project-footer{padding:0 10px}} /* Project workspace */ .project-workspace{color:#172a46}.pw-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin:-2px 0 14px}.pw-title{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.pw-title h1{font-size:21px;margin:0}.pw-title>span{font-weight:600}.pw-doc{display:inline-block;margin-top:14px;color:#1265e8}.pw-members{display:flex}.pw-members b{display:grid;place-items:center;width:29px;height:29px;border-radius:50%;background:#e5edf8;border:2px solid #fff;margin-left:-5px;font-size:12px}.pw-status{border:1px solid #cbd5e1;border-radius:6px;padding:5px 9px;font-size:12px}.pw-actions,.pw-page-actions{display:flex;gap:8px}.pw-dark,.pw-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:#17263b;color:#fff!important;border:1px solid #17263b;border-radius:7px;padding:9px 12px;font-weight:600;cursor:pointer}.pw-button{background:#fff;color:#17263b!important;border-color:#cbd5e1}.pw-tabs{display:flex;align-items:center;gap:2px;background:#e9edf2;border-radius:7px;padding:3px 7px;overflow-x:auto;white-space:nowrap;margin-bottom:27px}.pw-tabs a{display:flex;align-items:center;gap:7px;padding:11px 12px;color:#172a46;border-radius:7px}.pw-tabs a.active{background:#fff;box-shadow:0 1px 2px #0000000e}.pw-tabs svg,.pw-actions svg{width:16px}.pw-progress-label{font-size:14px}.pw-progress{width:110px;height:5px;background:#e5e7eb;margin:8px 0 20px}.pw-progress i{display:block;height:100%;background:#22c55e}.pw-overview-card{display:grid;grid-template-columns:1fr 1fr;background:#fff;border:1px solid #dbe2ea;border-radius:8px;box-shadow:0 2px 4px #0001;min-height:500px}.pw-overview-card>div{padding:24px}.pw-project-info{border-right:1px solid #dbe2ea}.pw-overview-card h2{font-size:16px;margin:0 0 20px}.pw-overview-card h3{font-size:14px;margin:22px 0 10px}.pw-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:17px}.pw-info-grid p{margin:0}.pw-info-grid span{display:block;color:#69768a;font-size:13px;margin-bottom:5px}.pw-info-grid b{font-size:14px}.pw-stat-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.pw-stat-row>div,.pw-expense-row{border:1px solid #dbe2ea;border-radius:7px;padding:12px}.pw-stat-row b,.pw-stat-row span{display:block;font-size:13px;margin-bottom:5px}.pw-stat-row i{display:block;height:6px;background:#edf0f4}.pw-stat-row em{display:block;height:100%;background:#27c66b}.pw-expense-row{display:grid;grid-template-columns:repeat(3,1fr)}.pw-expense-row p{margin:0;color:#55708f;font-size:13px}.pw-expense-row b{display:block;color:#172a46;margin-top:5px}.pw-chart{height:180px;border-left:1px solid #d6dee8;border-bottom:1px solid #d6dee8;background:repeating-linear-gradient(0deg,transparent,transparent 34px,#edf0f4 35px);position:relative}.pw-chart span{position:absolute;top:6px;left:45%;font-size:12px}.pw-chart i{position:absolute;bottom:0;height:3px;background:#29aae1;width:12%;left:8%}.pw-chart i:nth-of-type(2){left:28%}.pw-chart i:nth-of-type(3){left:48%}.pw-chart i:nth-of-type(4){left:68%}.pw-chart i:nth-of-type(5){left:86%}.pw-page-actions{margin:-1px 0 15px}.pw-table-card{background:#fff;border:1px solid #dbe2ea;border-radius:8px;box-shadow:0 2px 4px #0001;overflow:hidden}.pw-table-tools{display:flex;gap:5px;justify-content:flex-start;padding:24px}.pw-table-tools input{margin-left:auto}.pw-table-tools input,.pw-table-tools select,.pw-table-tools button{height:32px;border:1px solid #ccd6e2;border-radius:5px;background:#fff;padding:0 11px}.pw-table-scroll{overflow:auto}.pw-table-card table{border-collapse:collapse;width:100%;min-width:800px}.pw-table-card th{background:#f5f7fa;color:#667386;text-align:left;font-weight:600}.pw-table-card th,.pw-table-card td{padding:12px;border-top:1px solid #e5e9ef;font-size:13px}.pw-empty{padding:35px!important;text-align:center;color:#708096}.pw-drop{border:2px dashed #cbd5e1;padding:40px;text-align:center;margin-bottom:20px;border-radius:8px}.pw-drop label:first-child{display:block}.pw-drop input[type=file]{display:block;margin:15px auto}.pw-switch{display:inline-flex!important;margin:10px 15px}.pw-board{display:flex;gap:8px;overflow:auto}.pw-board>section{min-width:310px;background:#e5ebf4;padding:10px;border-radius:7px}.pw-board header{background:#dfff9e;padding:12px;margin:-10px -10px 12px}.pw-board header span,.pw-board article span,.pw-board article small{display:block;color:#667386;margin-top:5px}.pw-board article{background:#fff;padding:14px;margin-bottom:10px;border-radius:6px}.pw-gantt{min-width:900px;background:#fff;border:1px solid #dbe2ea;overflow:auto}.pw-gantt-months{display:grid;grid-template-columns:repeat(12,1fr);padding:12px;border-bottom:1px solid #dbe2ea}.pw-gantt-row{height:40px;padding:8px 30px;background:#e8ebef;position:relative;margin-bottom:2px}.pw-gantt-row.task{background:#fff;padding-left:80px}.pw-gantt-row i{display:inline-block;background:#526174;height:20px;margin-left:15px;vertical-align:middle;border-radius:3px}.pw-gantt-row.task i{background:#8493a8}.pw-sales-nav{display:flex;gap:6px;margin-bottom:14px}.pw-sales-nav a{padding:9px 13px;background:#fff;border:1px solid #d3dbe5;border-radius:6px}.pw-sales-nav a.active{background:#17263b;color:#fff}.pw-activity{background:#fff;border:1px solid #dbe2ea;padding:25px;border-radius:8px}.pw-activity article{position:relative;border-left:1px solid #b7c3d1;padding:0 90px 30px 30px}.pw-activity article>i{position:absolute;width:10px;height:10px;border:1px solid #718096;border-radius:50%;background:#fff;left:-6px}.pw-activity small{text-transform:uppercase}.pw-toggle{position:absolute;right:5px;top:10px;width:48px;height:21px;border:0;border-radius:20px;background:#cbd5e1}.pw-toggle:after{content:'';display:block;width:17px;height:17px;background:#fff;border-radius:50%;margin:2px}.pw-toggle.on{background:#3b82f6}.pw-toggle.on:after{margin-left:29px}.pw-dialog{width:min(600px,calc(100% - 30px));border:0;border-radius:14px;padding:0;box-shadow:0 18px 50px #0f172a44}.pw-dialog::backdrop{background:#1722389a}.pw-dialog form>header,.pw-dialog form>footer{display:flex;align-items:center;justify-content:space-between;padding:20px;border-bottom:1px solid #e1e5eb}.pw-dialog h2{margin:0;font-size:19px}.pw-dialog header button{border:0;background:transparent;font-size:27px;color:#8a96a8}.pw-dialog-body{padding:20px;max-height:68vh;overflow:auto}.pw-dialog-body>label,.pw-form-grid label{display:flex;flex-direction:column;gap:7px;font-weight:600;margin-bottom:15px}.pw-dialog input:not([type=checkbox]):not([type=radio]),.pw-dialog select,.pw-dialog textarea{border:1px solid #ccd6e2;border-radius:6px;padding:9px;width:100%;font:inherit}.pw-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}.pw-dialog em{color:#ef4444}.pw-dialog footer{justify-content:flex-end!important;border-top:1px solid #e1e5eb;border-bottom:0!important}.pw-dialog footer>button:not(.pw-dark){padding:9px 12px;background:#fff;border:1px solid #cbd5e1;border-radius:7px}.pw-checks{display:flex;gap:15px;margin-bottom:18px}.pw-radio{display:flex!important;flex-direction:row!important}.pw-dialog:open{animation:pw-pop .15s ease-out}@keyframes pw-pop{from{transform:translateY(-8px);opacity:0}}@media(max-width:900px){.pw-head{flex-direction:column}.pw-overview-card{grid-template-columns:1fr}.pw-project-info{border-right:0;border-bottom:1px solid #dbe2ea}.pw-form-grid,.pw-stat-row{grid-template-columns:1fr}.pw-actions{flex-wrap:wrap}} .pw-info-grid b small{color:#758398;font-weight:500}.pw-hours-head{display:flex;align-items:center;justify-content:space-between;margin-top:18px}.pw-hours-head h3{margin:0!important}.pw-hours-head strong{font-size:17px;color:#172a46}.pw-hours-chart{height:210px;border:1px solid #dbe2ea;border-radius:7px;background:#fff;display:grid;grid-template-columns:46px 1fr;padding:14px 14px 12px 0}.pw-hours-grid{display:flex;flex-direction:column;justify-content:space-between;text-align:right;padding:0 8px 35px 0;color:#7a8798;font-size:11px}.pw-hours-bars{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;border-left:1px solid #d6dee8;border-bottom:1px solid #d6dee8;background:repeating-linear-gradient(0deg,transparent,transparent 49px,#edf0f4 50px);align-items:end;height:170px}.pw-hours-bars>div{height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;position:relative;min-width:0}.pw-hours-bars b{font-size:10px;color:#53657b;margin-bottom:4px}.pw-hours-bars i{display:block;width:min(34px,62%);min-height:3px;background:#25a9e0;border-radius:4px 4px 0 0}.pw-hours-bars span{font-size:11px;font-weight:600;color:#53657b;margin-top:5px}.pw-hours-bars small{font-size:9px;color:#8995a5;white-space:nowrap} .pw-progress-wide{width:410px;max-width:100%}.pw-section-title{display:flex;align-items:center;justify-content:space-between}.pw-section-title a{display:flex;gap:6px;align-items:center;color:#61748e;font-size:13px}.pw-section-title svg,.pw-metric-title svg,.pw-hours-head svg{width:15px;height:15px}.pw-link-value{color:#0969da}.pw-info-grid .project-tag{font-style:normal}.pw-overview-sample{grid-template-columns:1fr 1.2fr}.pw-overview-sample .pw-metrics{padding-top:24px}.pw-metric-title{display:flex;align-items:center;gap:8px;margin:24px 0 10px!important;color:#52637a}.pw-finance-row{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid #dbe2ea;border-radius:7px;padding:12px}.pw-finance-row p{margin:0;font-size:12px;color:#68788e}.pw-finance-row span{color:#0671e8;font-weight:600}.pw-finance-row p:nth-child(3),.pw-finance-row p:nth-child(3) span{color:#09a147}.pw-finance-row p:nth-child(4),.pw-finance-row p:nth-child(4) span{color:#f04444}.pw-finance-row b{display:block;color:#172a46;margin-top:5px}.pw-hours-head span{font-size:12px;color:#607086}.pw-chart-legend{text-align:center;font-size:11px;color:#5f6c7e;margin:-5px 0 7px}.pw-chart-legend i{display:inline-block;width:38px;height:11px;background:#25a9e0;margin:0 6px 0 14px;vertical-align:middle}.pw-chart-legend i:nth-child(2){background:#ff4961}.pw-overview-sample .pw-hours-chart{height:235px}.pw-overview-sample .pw-hours-bars{height:193px}.pw-overview-sample .pw-hours-bars span{font-size:9px;white-space:nowrap;transform:rotate(-10deg);margin-top:8px}@media(max-width:1050px){.pw-overview-sample{grid-template-columns:1fr}.pw-finance-row{grid-template-columns:1fr 1fr;gap:14px}.pw-project-info{border-right:0;border-bottom:1px solid #dbe2ea}} .pw-more{position:relative}.pw-more summary{list-style:none;background:#fff;border:1px solid #cbd5e1;border-radius:7px;padding:9px 12px;font-weight:600;cursor:pointer}.pw-more div{position:absolute;right:0;top:42px;z-index:20;width:170px;background:#fff;border:1px solid #d8e0ea;border-radius:7px;box-shadow:0 8px 22px #0f172a26;padding:6px}.pw-more div a{display:block;padding:9px 10px;color:#263950;border-radius:5px}.pw-more div a:hover{background:#f1f5f9} .pw-task-shell{background:#fff;border:1px solid #dbe2ea;border-radius:8px;box-shadow:0 2px 5px #0f172a14;padding-top:20px;overflow:hidden}.pw-task-top{display:flex;justify-content:space-between;align-items:center;padding:0 20px 14px}.pw-task-top>div{display:flex;gap:5px}.pw-square{width:35px;height:35px;display:inline-grid;place-items:center;background:#fff;border:1px solid #cbd5e1;border-radius:6px;color:#53657b;cursor:pointer}.pw-square svg,.pw-button svg{width:15px}.pw-task-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;padding:0 20px 14px}.pw-task-stats button{text-align:left;background:#fff;border:1px solid #d7dee8;border-radius:7px;padding:10px 13px;color:#53657b;cursor:pointer}.pw-task-stats span,.pw-task-stats small{display:block}.pw-task-stats b{color:#172a46;margin-right:4px}.pw-task-stats .blue span{color:#3477ee}.pw-task-stats .cyan span{color:#159acf}.pw-task-stats .lime span{color:#83bd1d}.pw-task-stats .green span{color:#16a45d}.pw-task-filters{display:none;grid-template-columns:repeat(3,1fr) auto;gap:10px;padding:14px 20px;background:#f7f9fc;border-top:1px solid #e4e8ee}.pw-task-filters.open{display:grid}.pw-task-filters label{font-size:12px;font-weight:600}.pw-task-filters select{display:block;width:100%;margin-top:5px;height:34px;border:1px solid #cad4e0;border-radius:5px;background:#fff}.pw-task-filters button{align-self:end;height:34px;background:#fff;border:1px solid #cad4e0;border-radius:5px}.pw-task-table-wrap>.pw-table-tools{padding:0 20px 10px}.pw-table-tools a{height:32px;display:flex;align-items:center;padding:0 11px;border:1px solid #ccd6e2;border-radius:5px;color:#34465e}.pw-task-search{margin-left:auto;display:flex;align-items:center;border:1px solid #ccd6e2;border-radius:5px;padding-left:10px}.pw-task-search svg{width:16px}.pw-task-search input{border:0!important;margin:0!important;outline:0}.pw-task-table{width:100%;border-collapse:collapse;min-width:1120px}.pw-task-table th{background:#f5f7fa;color:#5e6b7e;text-align:left}.pw-task-table th,.pw-task-table td{padding:12px;border-top:1px solid #e4e9ef;font-size:13px}.pw-task-table th:first-child,.pw-task-table td:first-child{width:38px;text-align:center}.pw-task-table td:nth-child(3){min-width:220px}.pw-task-table td:nth-child(3) a{color:#233750;font-weight:600}.pw-task-table td form{margin:0}.pw-task-status,.pw-priority{border:1px solid #cad5e2;border-radius:6px;background:#fff;padding:5px 7px;font-size:12px}.pw-task-status.status-in-progress{color:#2772ec;border-color:#a9c8ff}.pw-task-status.status-testing{color:#0796cf;border-color:#8bd6f1}.pw-task-status.status-awaiting-feedback{color:#77ad16;border-color:#cce995}.pw-task-status.status-done{color:#0ba654;border-color:#9de0b9}.pw-priority{border:0}.priority-medium{color:#159bd7}.priority-high{color:#f27921}.priority-urgent{color:#f13d4f}.pw-assignees{display:flex}.pw-assignees span{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#e0edf9;border:2px solid #fff;margin-right:-5px;font-weight:700}.pw-assignees .empty{color:#8190a5;background:#edf1f6}.pw-task-table td em{font-style:normal;background:#f0f3f7;border-radius:4px;padding:4px 7px;margin-right:4px}.pw-task-footer{display:flex;justify-content:space-between;padding:18px 20px;color:#738095;font-size:12px;border-top:1px solid #e4e9ef}.pw-task-footer b{padding:7px 10px;background:#eef2f7;border-radius:6px;color:#263950;margin:0 10px}@media(max-width:900px){.pw-task-stats{grid-template-columns:1fr 1fr}.pw-task-filters{grid-template-columns:1fr}.pw-task-search{margin-left:0}.pw-table-tools{flex-wrap:wrap}} .pm-shell{margin-top:0}.pm-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.pm-toolbar>div{display:flex;gap:7px}.pm-toolbar>label{display:flex;align-items:center;gap:8px;font-weight:600;font-size:13px}.pm-view{padding:8px}.pm-view svg{width:17px;height:17px}.pm-board{display:flex;gap:7px;overflow-x:auto;padding-bottom:14px;min-height:600px}.pm-column{flex:0 0 335px;background:#e5ebf4;border:1px solid #d6deea;border-radius:7px;overflow:hidden}.pm-column-head{padding:12px 14px;background:#dcff9f}.pm-column-head.shade-0{background:#f4ff9d}.pm-column-head.shade-2{background:#d8ff98}.pm-column-head.shade-3{background:#cafa88}.pm-column-head>div{display:flex;align-items:center;gap:5px;color:#075dcc;white-space:nowrap}.pm-column-head svg{width:16px;height:16px;color:#172a46}.pm-column-head strong{max-width:115px;overflow:hidden;text-overflow:ellipsis}.pm-column-head span{font-size:12px}.pm-column-head small{display:block;margin:4px 0 0 22px;color:#172a46}.pm-cards{padding:14px 12px}.pm-card{display:block;width:100%;border:0;border-radius:7px;background:#fff;color:#172a46;text-align:left;padding:15px;margin-bottom:11px;box-shadow:0 1px 2px #0f172a0c;cursor:pointer;font:inherit}.pm-card:hover{box-shadow:0 2px 8px #1d4ed826}.pm-card-row{display:flex;align-items:center;gap:10px}.pm-card-row strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}.pm-avatar{display:grid;place-items:center;flex:0 0 29px;height:29px;border-radius:50%;background:#fde9ca;font-style:normal;font-size:12px}.pm-status{display:block;color:#53718f;margin:3px 0 2px 39px;font-size:13px}.pm-status.status-testing{color:#0796dc}.pm-status.status-in-progress{color:#2563eb}.pm-status.status-done,.pm-status.status-complete{color:#16a34a}.pm-card-meta{display:grid;margin-left:39px;font-size:12px;line-height:1.45}.pm-load{width:100%;border:1px solid #d4dce7;background:#edf1f6;color:#8a96a8;border-radius:6px;padding:8px}.pm-empty{color:#718096;text-align:center;padding:24px 8px}.pm-no-milestones{width:100%;background:#fff;border:1px solid #dbe2ea;border-radius:8px}.pw-check-line{display:flex!important;flex-direction:row!important;align-items:center;gap:8px!important;font-weight:500!important}.pw-milestone-dialog{width:min(590px,calc(100% - 30px))}.pw-milestone-dialog textarea{min-height:92px;resize:vertical}@media(max-width:700px){.pm-column{flex-basis:290px}.pm-toolbar{align-items:flex-start;gap:12px;flex-direction:column}} .pf-upload{margin-bottom:26px}.pf-drop{display:flex;min-height:150px;border:2px dashed #cbd5e1;border-radius:7px;align-items:center;justify-content:center;flex-direction:column;gap:7px;background:#fff;cursor:pointer}.pf-drop svg{width:28px;color:#64748b}.pf-drop span{color:#7a8798;font-size:12px}.pf-drop input{display:none}.pf-visible{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:13px}.pf-visible input{display:none}.pf-visible span,.pf-toggle{width:49px;height:21px;border:0;border-radius:20px;background:#dfe5ee;position:relative;cursor:pointer}.pf-visible span:after,.pf-toggle:after{content:'';position:absolute;left:3px;top:3px;width:15px;height:15px;border-radius:50%;background:#fff}.pf-visible input:checked+span,.pf-toggle.on{background:#3b82f6}.pf-visible input:checked+span:after,.pf-toggle.on:after{left:31px}.pf-table-card{background:#fff;border:1px solid #dbe2ea;border-radius:8px;box-shadow:0 2px 5px #0f172a12;overflow:hidden}.pf-tools{display:flex;gap:5px;padding:24px}.pf-tools>div{margin-left:auto;display:flex;border:1px solid #ccd6e2;border-radius:5px;align-items:center}.pf-tools>div svg{width:17px;margin-left:10px}.pf-tools input,.pf-tools select,.pf-tools button{height:32px;border:1px solid #ccd6e2;border-radius:5px;background:#fff;padding:0 11px}.pf-tools input{border:0;width:190px}.pf-table-scroll{overflow:auto}.pf-table-card table{border-collapse:collapse;width:100%;min-width:1120px}.pf-table-card th{background:#f5f7fa;color:#526174;text-align:left}.pf-table-card th,.pf-table-card td{padding:11px;border-top:1px solid #e5e9ef;font-size:13px}.pf-file-link{display:flex;align-items:center;gap:12px;border:0;background:transparent;color:#172a46;cursor:pointer}.pf-file-link img{width:96px;height:60px;object-fit:cover;border-radius:4px}.pf-file-link svg{width:35px;height:35px}.pf-person{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#fde9ca;margin-right:7px}.pf-table-card td svg{width:17px}.pf-table-card footer{display:flex;justify-content:space-between;padding:20px;color:#657386}.pf-table-card footer b{display:inline-block;background:#e8edf4;padding:7px 11px;border-radius:7px}.pf-dialog{width:min(1720px,calc(100% - 40px));height:min(92vh,1000px);border:0;border-radius:14px;padding:0;color:#172a46}.pf-dialog::backdrop{background:#1722389a}.pf-dialog>header,.pf-dialog>footer{display:flex;align-items:center;justify-content:space-between;padding:20px;border-bottom:1px solid #e1e5eb}.pf-dialog>header h2{margin:0;font-size:18px}.pf-dialog>header button{border:0;background:transparent;font-size:27px;color:#7a8798}.pf-dialog-body{display:grid;grid-template-columns:1.05fr 1fr;height:calc(100% - 130px);overflow:hidden}.pf-dialog-body>main,.pf-dialog-body>aside{padding:24px;overflow:auto}.pf-dialog-body>main{border-right:1px solid #e1e5eb}.pf-meta-form label{display:block;font-weight:600;margin-bottom:16px}.pf-meta-form input,.pf-meta-form textarea,.pf-comment-form textarea{width:100%;border:1px solid #cbd5e1;border-radius:6px;padding:10px;margin-top:7px;font:inherit}.pf-meta-form textarea{min-height:90px}.pf-meta-form .pw-dark{margin-bottom:15px}.pf-download{width:max-content;margin:3px 0 20px}.pf-preview{display:block;width:100%;max-height:650px;object-fit:contain;object-position:left top;background:#f7f8fa}.pf-document{min-height:350px;display:grid;place-items:center;background:#f5f7fa}.pf-document svg{width:90px;height:90px}.pf-comment-form textarea{min-height:250px}.pf-comment-form>div{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}.pf-comment-form label,.pf-comment-form button{border:0;border-radius:7px;padding:10px 18px;background:#718096;color:#fff}.pf-comment-form label input{display:none}.pf-comment-form svg{width:17px}.pf-comment-form button{background:#75bff4}.pf-comment-tabs{display:flex;gap:30px;border-bottom:1px solid #e1e5eb;padding:25px 0 10px}.pf-comment-tabs b{border-bottom:2px solid #198cf0;padding:0 12px 10px}.pf-comments article{display:flex;gap:10px;padding:18px 0;border-bottom:1px solid #edf0f4}.pf-comments p{margin:7px 0}.pf-comments small,.pf-comments em{display:block;color:#718096}.pf-no-comments{display:grid;place-items:center;color:#c1c7cf;padding:70px}.pf-no-comments svg{width:48px;height:48px}.pf-dialog>footer{justify-content:flex-end;border-bottom:0;border-top:1px solid #e1e5eb}.pf-dialog>footer button{padding:9px 12px;background:#fff;border:1px solid #cbd5e1;border-radius:7px}@media(max-width:850px){.pf-dialog-body{grid-template-columns:1fr;overflow:auto}.pf-dialog-body>main,.pf-dialog-body>aside{overflow:visible}.pf-dialog-body>main{border-right:0;border-bottom:1px solid #e1e5eb}.pf-tools{flex-wrap:wrap}.pf-tools>div{margin-left:0;width:100%}} .pm-list{overflow:hidden;border:1px solid #d7dee8;border-radius:7px;background:#fff;box-shadow:0 2px 5px #17243a12}.pm-list-tools{display:flex;align-items:center;padding:24px 25px 10px}.pm-list-tools select,.pm-list-tools button{height:32px;border:1px solid #ccd5e1;background:#fff;color:#40516a;padding:0 12px}.pm-list-tools select{border-radius:6px 0 0 6px}.pm-list-tools button:last-of-type{display:grid;width:36px;place-items:center;padding:0;border-radius:0 6px 6px 0}.pm-list-tools button svg{width:15px}.pm-list-tools label{display:flex;align-items:center;width:245px;height:32px;margin-left:auto;border:1px solid #ccd5e1;border-radius:6px}.pm-list-tools label svg{width:17px;margin:0 11px}.pm-list-tools input{width:100%;border:0;outline:0}.pm-list-scroll{overflow-x:auto}.pm-list table{width:100%;border-collapse:collapse}.pm-list th,.pm-list td{padding:15px 11px;border-top:1px solid #e1e6ed;text-align:left;font-size:14px}.pm-list th{background:#f2f4f7;color:#172a46}.pm-list th:first-child{display:flex;align-items:center;justify-content:space-between}.pm-list th svg{width:17px;padding:3px;border-radius:50%;background:#d8dde4}.pm-list td{height:59px;color:#24364b}.pm-list footer{display:flex;justify-content:space-between;padding:16px 25px 26px;color:#64748b;font-size:13px}.pm-list footer b{display:inline-grid;min-width:31px;height:31px;margin:0 12px;place-items:center;border-radius:8px;background:#e6e9ee;color:#172a46} .pm-list-name{display:flex;min-height:46px;flex-direction:column;align-items:flex-start;justify-content:center}.pm-list-name form{height:0;margin:0;overflow:hidden;opacity:0;transition:height .15s ease,margin .15s ease,opacity .15s ease}.pm-list-name:hover form,.pm-list-name:focus-within form{height:20px;margin-top:5px;opacity:1}.pm-list-name button{padding:0;border:0;background:transparent;color:#ef4444;font:inherit;font-size:12px;cursor:pointer}.pm-list-name button:hover{text-decoration:underline}.pm-list tbody tr{height:72px}.pm-list td{vertical-align:middle} .pg-shell{margin-top:0}.pg-controls{display:flex;justify-content:flex-end;gap:12px;margin-bottom:16px}.pg-controls select{width:220px;height:36px;padding:0 12px;border:1px solid #cbd5e1;border-radius:7px;background:#fff;color:#34465e}.pg-scroll{overflow-x:auto;border-bottom:1px solid #d5dce6}.pg-chart{position:relative;min-width:1640px;background:#fff}.pg-year-row,.pg-month-row{display:flex;padding-left:36px}.pg-year-row{height:34px;align-items:center;justify-content:center;border-bottom:1px solid #e2e7ed}.pg-year-row span{text-align:center;font-weight:600}.pg-month-row{height:58px}.pg-month-row span{flex:1;padding-top:20px;border-right:1px solid #edf0f4;text-align:center;font-size:13px}.pg-milestone,.pg-task{position:relative;height:38px;overflow:visible}.pg-task:nth-of-type(even){background:#e2e5e9}.pg-grid{position:absolute;inset:0 0 0 36px;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(7.6923% - 1px),#edf0f4 calc(7.6923% - 1px),#edf0f4 7.6923%)}.pg-bar{position:absolute;top:9px;height:20px;min-width:24px;border:0;border-radius:3px;background:#515d6c;color:#fff;cursor:pointer;z-index:2}.pg-bar.complete{background:#23c863}.pg-bar span{position:absolute;left:calc(100% + 6px);top:1px;width:max-content;max-width:430px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#22354e;font-size:13px}.pg-milestone-bar{top:8px;height:21px;width:24px!important;background:#4d5968;cursor:default}.pg-milestone b{position:absolute;top:10px;z-index:3;width:max-content;font-size:13px;font-weight:500}.pg-branch,.pg-connector{position:absolute;left:94px;top:8px;z-index:3;color:#465465;font-size:22px}.pg-connector{left:145px;top:2px}.pg-task:hover .pg-bar{filter:brightness(.9);box-shadow:0 2px 6px #17243a33}@media(max-width:900px){.pg-controls{justify-content:flex-start;flex-wrap:wrap}.pg-controls select{width:calc(50% - 6px)}} /* Align the Gantt's dated bars with its month grid and keep the chart height steady. */ .pg-shell{margin-top:-12px} .pg-chart{min-height:calc(100vh - 345px)} .pg-year-row{height:26px} .pg-month-row{height:36px} .pg-month-row span{padding-top:7px} .pg-task:nth-of-type(even){background:transparent} .pg-task.is-shaded{background:#e8ebef} .pg-bar{transform:translateX(33px)} .pg-task .pg-bar{min-width:59px} .pg-milestone b{transform:translateX(33px)} .pg-branch{left:96px;top:-19px;width:24px;height:38px;border-left:1px solid #647080;border-bottom:1px solid #647080;border-bottom-left-radius:6px;font-size:0} .pg-connector{font-size:0} .pg-task:hover .pg-bar span,.pg-task .pg-bar:focus-visible span{left:0;top:0;box-sizing:border-box;width:100%;max-width:none;padding:2px 8px;color:#fff} /* ===================================================================== NEXT CRM โ€” Project workspace dashboard-style refresh ===================================================================== */ .project-workspace{--pw-blue:#2563eb;--pw-violet:#7c3aed;--pw-cyan:#06b6d4;--pw-green:#10b981;--pw-orange:#f59e0b;--pw-red:#ef4444;color:#20314a} .project-workspace .pw-head{position:relative;overflow:hidden;align-items:center;margin:0 0 16px;padding:24px 26px;border:1px solid rgba(255,255,255,.6);border-radius:22px;background:linear-gradient(120deg,#172554 0%,#4338ca 46%,#0284c7 100%);box-shadow:0 18px 48px rgba(37,65,150,.22);color:#fff} .project-workspace .pw-head:after{content:"";position:absolute;width:280px;height:280px;right:-95px;top:-145px;border-radius:50%;background:rgba(255,255,255,.11);box-shadow:-235px 210px 0 rgba(255,255,255,.055)} .project-workspace .pw-head>div{position:relative;z-index:1}.project-workspace .pw-title h1{font-size:28px;letter-spacing:-.7px}.project-workspace .pw-title>span{color:#dbeafe}.project-workspace .pw-status{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.13);color:#fff;backdrop-filter:blur(8px)} .project-workspace .pw-members b{border-color:rgba(255,255,255,.72);background:linear-gradient(135deg,#fff,#dbeafe);color:#28457a;box-shadow:0 3px 10px rgba(15,23,42,.16)}.project-workspace .pw-doc{color:#dff6ff;font-weight:800}.project-workspace .pw-actions{position:relative;z-index:2}.project-workspace .pw-dark{border:1px solid rgba(255,255,255,.2);background:rgba(15,23,42,.38);color:#fff;backdrop-filter:blur(9px);box-shadow:0 8px 18px rgba(15,23,42,.14)}.project-workspace .pw-dark:hover{background:rgba(15,23,42,.58);transform:translateY(-1px)} .project-workspace .pw-more summary{border-color:rgba(255,255,255,.25)!important;background:rgba(255,255,255,.12)!important;color:#fff!important}.project-workspace .pw-more>div{border-radius:12px!important;box-shadow:0 18px 45px rgba(15,23,42,.18)!important} .project-workspace .pw-tabs{display:flex;gap:5px;overflow-x:auto;margin:0 0 18px;padding:7px;border:1px solid #e2e8f0;border-radius:15px;background:linear-gradient(90deg,#fff,#f8fbff,#faf7ff);box-shadow:0 8px 26px rgba(31,46,75,.06)}.project-workspace .pw-tabs a{flex:none;border:0!important;border-radius:10px!important;padding:10px 12px!important;color:#66778e!important;font-weight:700}.project-workspace .pw-tabs a:hover{background:#eef5ff;color:#2457b7!important}.project-workspace .pw-tabs a.active{background:linear-gradient(135deg,#4338ca,#2563eb)!important;color:#fff!important;box-shadow:0 7px 16px rgba(37,99,235,.2)} .project-workspace .pw-content,.project-workspace .pw-panel,.project-workspace .po-card,.project-workspace .pm-list,.project-workspace .pf-table-card{border-color:#e1e7f0!important;border-radius:16px!important;box-shadow:0 10px 30px rgba(31,46,75,.07)!important} /* Project files */ .pf-modern-shell{display:grid;gap:18px}.pf-upload-card{display:grid;grid-template-columns:minmax(260px,.7fr) minmax(420px,1.3fr);gap:24px;align-items:center;padding:22px;border:1px solid #e1e7f0;border-radius:18px;background:linear-gradient(115deg,#f8fbff 0%,#f3f0ff 55%,#ecfeff 100%);box-shadow:0 12px 34px rgba(31,46,75,.07)}.pf-upload-copy h2{margin:4px 0 8px;font-size:22px}.pf-upload-copy p{margin:0;color:#718198;line-height:1.6}.pf-eyebrow{color:#6757d9;font-size:9.5px;font-weight:900;letter-spacing:.14em}.pf-modern-shell .pf-upload{margin:0}.pf-modern-shell .pf-drop{min-height:120px;border-color:#9fb7dc;border-radius:14px;background:rgba(255,255,255,.75)}.pf-modern-shell .pf-drop:hover{border-color:#4f6ee8;background:#fff}.pf-modern-shell .pf-drop svg{color:#4f63db}.pf-modern-shell .pf-tools{align-items:center;justify-content:space-between;padding:14px 16px;background:linear-gradient(90deg,#fff,#f8fbff)}.pf-tools-left{display:flex;gap:6px}.pf-modern-shell .pf-tools>div{margin-left:0}.pf-search-box{margin-left:auto!important}.pf-modern-shell .pf-table-card th{background:linear-gradient(90deg,#eef4ff,#f6f4ff);color:#40516a;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em}.pf-modern-shell .pf-table-card tbody tr:hover td{background:#f8fbff}.pf-file-link>b,.pf-file-link span b{display:block;text-align:left}.pf-file-link span small{display:block;margin-top:3px;color:#95a2b3;font-size:10.5px}.pf-file-icon{width:45px;height:45px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(135deg,#eef2ff,#e8f8ff);color:#5063d9}.pf-file-icon svg{width:22px!important;height:22px!important}.pf-type{display:inline-block;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#687990}.pf-count{display:inline-grid;min-width:26px;height:26px;place-items:center;border-radius:999px;background:#eef4ff;color:#315fc5;font-weight:800}.pf-row-actions{display:flex;align-items:center;gap:6px}.pf-row-actions form{margin:0}.pf-row-actions>a,.pf-row-actions button{width:32px;height:32px;display:grid;place-items:center;padding:0;border:1px solid #dbe4ef;border-radius:8px;background:#fff;color:#45638d;cursor:pointer}.pf-row-actions>a:hover,.pf-row-actions button:hover{border-color:#abc6ef;background:#eef5ff;color:#1d4ed8}.pf-row-actions button.danger:hover{border-color:#fecaca;background:#fff1f2;color:#dc2626}.pf-row-actions svg{width:14px!important;height:14px!important}.pf-dialog>header{background:linear-gradient(100deg,#f8fbff,#f7f4ff)}.pf-dialog>footer{gap:8px}.pf-dialog>footer form:first-child{margin-right:auto}.pf-delete-button{display:inline-flex!important;align-items:center;gap:7px;border-color:#fecaca!important;background:#fff1f2!important;color:#dc2626!important}.pf-delete-button svg{width:15px}.pw-empty strong,.pw-empty span{display:block}.pw-empty svg{width:28px;margin-bottom:8px}.pw-empty span{margin-top:4px;color:#93a0b0;font-size:11px} /* Gorgeous Gantt */ .pg-modern-shell{display:grid;gap:16px}.pg-hero{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:28px;padding:22px 24px;border-radius:19px;background:linear-gradient(118deg,#182449 0%,#4938c8 45%,#0598bb 100%);color:#fff;box-shadow:0 16px 40px rgba(43,62,141,.2)}.pg-hero:after{content:"";position:absolute;right:-80px;top:-115px;width:260px;height:260px;border-radius:50%;background:rgba(255,255,255,.1)}.pg-hero>div{position:relative;z-index:1}.pg-eyebrow{font-size:9.5px;font-weight:900;letter-spacing:.15em;color:#c4f1ff}.pg-hero h2{margin:4px 0 6px;font-size:23px;letter-spacing:-.4px}.pg-hero p{margin:0;color:#dbeafe;font-size:12px}.pg-summary-grid{display:grid!important;grid-template-columns:repeat(4,minmax(115px,1fr));gap:8px}.pg-summary-grid article{display:flex;align-items:center;gap:9px;min-width:120px;padding:10px 12px;border:1px solid rgba(255,255,255,.2);border-radius:12px;background:rgba(255,255,255,.11);backdrop-filter:blur(8px)}.pg-summary-grid article svg{width:18px}.pg-summary-grid b,.pg-summary-grid small{display:block}.pg-summary-grid b{font-size:15px}.pg-summary-grid small{margin-top:1px;color:#dbeafe;font-size:9px}.pg-modern-toolbar{display:flex;align-items:center;justify-content:space-between;gap:15px}.pg-legend{display:flex;flex-wrap:wrap;gap:14px;color:#718198;font-size:10.5px;font-weight:700}.pg-legend span{display:flex;align-items:center;gap:5px}.pg-legend i{width:9px;height:9px;border-radius:50%;background:#4f6ee8}.pg-legend .is-complete i{background:#10b981}.pg-legend .is-warning i{background:#f59e0b}.pg-legend .is-milestone i{background:#7c3aed}.pg-modern-toolbar .pg-controls{margin:0}.pg-modern-toolbar .pg-controls select{width:auto;min-width:150px;height:36px;border-radius:9px}.pg-modern-card{overflow:hidden;border:1px solid #e1e7f0;border-radius:18px;background:#fff;box-shadow:0 12px 34px rgba(31,46,75,.07)}.pg-modern-card .pg-scroll{overflow:auto;border:0}.pg-board{min-width:1450px}.pg-board-header,.pg-row{display:grid;grid-template-columns:270px minmax(1100px,1fr)}.pg-board-header{position:sticky;top:0;z-index:8;border-bottom:1px solid #dfe7f2;background:#fff}.pg-name-head{padding:12px 16px;background:linear-gradient(135deg,#eef4ff,#f6f4ff);border-right:1px solid #dfe7f2}.pg-name-head span,.pg-name-head small{display:block}.pg-name-head span{font-weight:850;color:#364a66}.pg-name-head small{margin-top:3px;color:#8b98aa;font-size:9px}.pg-months{display:grid;grid-template-columns:repeat(13,1fr);background:linear-gradient(90deg,#f8fbff,#fbf9ff)}.pg-months span{display:grid;place-items:center;border-right:1px solid #e7edf4;padding:9px 4px}.pg-months b{font-size:10.5px;color:#4a5d77}.pg-months small{margin-top:2px;color:#9aa6b5;font-size:8.5px}.pg-row{min-height:52px;border-bottom:1px solid #edf1f5}.pg-row:hover{background:#fbfdff}.pg-row-label{display:flex;align-items:center;gap:10px;padding:8px 14px;border-right:1px solid #e7edf4;background:rgba(255,255,255,.97)}.pg-row-label>div{min-width:0}.pg-row-label b,.pg-row-label button,.pg-row-label small{display:block}.pg-row-label b,.pg-row-label button{max-width:205px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#314660;font-size:11.5px;font-weight:800}.pg-row-label button{padding:0;border:0;background:transparent;cursor:pointer;text-align:left}.pg-row-label button:hover{color:#2563eb}.pg-row-label small{margin-top:3px;color:#95a1b1;font-size:9px}.pg-row-icon{width:31px;height:31px;display:grid;place-items:center;flex:none;border-radius:9px;background:linear-gradient(135deg,#ede9fe,#eef2ff);color:#6d4fd5}.pg-row-icon.neutral{background:#eff6ff;color:#4775c8}.pg-row-icon svg{width:14px}.pg-status-dot{width:9px;height:9px;flex:none;border-radius:50%;background:#64748b;box-shadow:0 0 0 4px #f1f5f9}.pg-status-dot.status-in-progress,.pg-status-dot.status-testing{background:#2563eb;box-shadow:0 0 0 4px #dbeafe}.pg-status-dot.status-complete,.pg-status-dot.status-completed,.pg-status-dot.status-done{background:#10b981;box-shadow:0 0 0 4px #d1fae5}.pg-status-dot.status-awaiting-feedback,.pg-status-dot.status-on-hold{background:#f59e0b;box-shadow:0 0 0 4px #fef3c7}.pg-timeline-cell{position:relative;min-height:52px;overflow:visible}.pg-gridlines{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(7.6923% - 1px),#edf1f5 calc(7.6923% - 1px),#edf1f5 7.6923%)}.pg-milestone-row .pg-timeline-cell{background:linear-gradient(90deg,rgba(124,58,237,.025),rgba(37,99,235,.025))}.pg-modern-bar{position:absolute;z-index:3;top:15px;height:22px;min-width:12px;border:0;border-radius:7px}.pg-modern-bar.task{overflow:hidden;background:linear-gradient(135deg,#5267dc,#2563eb);color:#fff;box-shadow:0 5px 12px rgba(37,99,235,.17);cursor:pointer}.pg-modern-bar.task.status-complete,.pg-modern-bar.task.status-completed,.pg-modern-bar.task.status-done{background:linear-gradient(135deg,#059669,#10b981)}.pg-modern-bar.task.status-awaiting-feedback,.pg-modern-bar.task.status-on-hold{background:linear-gradient(135deg,#d97706,#f59e0b)}.pg-modern-bar.task.status-not-started{background:linear-gradient(135deg,#64748b,#94a3b8)}.pg-modern-bar.task span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:3px 8px;font-size:9.5px;font-weight:800;text-align:left}.pg-modern-bar.task:hover{transform:translateY(-1px);filter:saturate(1.08);box-shadow:0 8px 16px rgba(37,99,235,.22)}.pg-modern-bar.milestone{top:18px;height:16px;background:linear-gradient(90deg,#7c3aed,#4f46e5);box-shadow:0 4px 10px rgba(99,73,205,.16)}.pg-modern-bar.milestone i{position:absolute;left:-3px;top:2px;width:12px;height:12px;transform:rotate(45deg);border-radius:2px;background:#6d4fd5}.pg-modern-bar.milestone span{position:absolute;left:calc(100% + 7px);top:-1px;width:max-content;color:#718198;font-size:9px}.pg-today-line{position:absolute;z-index:2;top:0;bottom:0;width:1px;background:#ef4444;opacity:.5}.pg-today-line em{position:absolute;top:-18px;left:-16px;padding:2px 5px;border-radius:5px;background:#ef4444;color:#fff;font-size:8px;font-style:normal}.pg-modern-empty{display:grid;place-items:center;padding:60px;color:#9aa6b5}.pg-modern-empty svg{width:34px}.pg-modern-empty strong{margin-top:9px;color:#53647a}.pg-modern-empty span{margin-top:4px;font-size:10px} @media(max-width:1100px){.pg-hero{align-items:flex-start;flex-direction:column}.pg-summary-grid{width:100%;grid-template-columns:repeat(4,1fr)}.pf-upload-card{grid-template-columns:1fr}.project-workspace .pw-head{align-items:flex-start;flex-direction:column}} @media(max-width:700px){.pg-summary-grid{grid-template-columns:1fr 1fr}.pg-modern-toolbar{align-items:flex-start;flex-direction:column}.pg-modern-toolbar .pg-controls{width:100%}.pg-modern-toolbar .pg-controls select{flex:1}.project-workspace .pw-head{padding:20px}.project-workspace .pw-title h1{font-size:24px}} /* ========================================================== Projects list โ€” Invoice-style workspace ========================================================== */ .project-invoice-page{max-width:1600px;margin:0 auto;color:#263954}.project-invoice-heading{display:flex;align-items:center;justify-content:space-between;gap:22px;margin:0 0 14px;padding:18px 20px;border:1px solid #dce4ef;border-radius:14px;background:linear-gradient(120deg,#fff 62%,#f5f8ff 100%);box-shadow:0 6px 20px rgba(31,48,76,.055)}.project-invoice-eyebrow{display:block;margin-bottom:4px;color:#5f6bd6;font-size:10px;font-weight:850;letter-spacing:.1em;text-transform:uppercase}.project-invoice-heading h1{margin:0;font-size:24px;letter-spacing:-.025em;color:#18263b}.project-invoice-heading p{margin:5px 0 0;color:#76859a;font-size:12px}.project-invoice-heading-actions{display:flex;align-items:center;gap:8px}.project-invoice-heading-actions a{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border:1px solid #ced8e5;border-radius:8px;text-decoration:none;font-size:12px;font-weight:750}.project-invoice-heading-actions svg{width:14px;height:14px}.project-invoice-secondary-action{background:#fff;color:#34506f}.project-invoice-primary-action{background:#3157df;color:#fff!important;border-color:#3157df!important;box-shadow:0 6px 14px rgba(49,87,223,.18)} .project-invoice-summary{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin-bottom:12px}.project-invoice-summary a{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:46px;padding:0 13px;border:1px solid #dce4ed;border-radius:10px;background:#fff;color:#52647c;text-decoration:none;font-size:11px}.project-invoice-summary a strong{font-size:14px;color:#21344f}.project-invoice-summary a.active{border-color:#9bb5f0;background:#f2f6ff;color:#285fc1}.project-invoice-summary a.active strong{color:#285fc1} .project-invoice-filters{display:none;align-items:end;gap:10px;padding:12px 14px;margin-bottom:10px;border:1px solid #dce4ed;border-radius:10px;background:#fff}.project-invoice-filters.open{display:flex}.project-invoice-filters label{display:grid;gap:5px;font-size:11px;font-weight:700;color:#53647a}.project-invoice-filters input,.project-invoice-filters select{height:32px;border:1px solid #cfd9e5;border-radius:6px;padding:0 9px;background:#fff;color:#30435c}.project-invoice-filters button,.project-invoice-filters a{height:32px;display:inline-flex;align-items:center;padding:0 11px;border-radius:6px;font-size:11px;text-decoration:none}.project-invoice-filters button{border:1px solid #3157df;background:#3157df;color:#fff}.project-invoice-filters a{border:1px solid #cfd9e5;color:#51647d;background:#fff} .project-invoice-table-card{background:#fff;border:1px solid #dce3ec;border-radius:12px;box-shadow:0 5px 18px rgba(31,48,76,.055);overflow:hidden}.project-invoice-toolbar{min-height:62px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 14px;background:linear-gradient(90deg,#fbfcff,#f7f9ff);border-bottom:1px solid #e3e9f1}.project-invoice-toolbar-left,.project-invoice-search{display:flex;align-items:center}.project-invoice-toolbar-left form{display:flex}.project-invoice-toolbar select,.project-invoice-toolbar-left>a,.project-invoice-toolbar-left>button,.project-invoice-search button,.project-invoice-search input{height:32px;box-sizing:border-box;border:1px solid #cbd6e4;background:#fff;color:#34465e;font:inherit;font-size:11px}.project-invoice-toolbar select{min-width:70px;border-radius:6px 0 0 6px;padding:0 8px}.project-invoice-toolbar-left>a,.project-invoice-toolbar-left>button{display:inline-flex;align-items:center;gap:5px;padding:0 9px;border-left:0;text-decoration:none;cursor:pointer}.project-invoice-toolbar-left svg,.project-invoice-search svg{width:13px;height:13px}.project-invoice-refresh{border-radius:0 6px 6px 0!important}.project-invoice-search button{width:38px;border-radius:6px 0 0 6px}.project-invoice-search input{width:220px;border-left:0;border-radius:0 6px 6px 0;padding:0 10px;outline:0} .project-invoice-table-wrap{overflow-x:auto}.project-invoice-data-table{width:100%;min-width:1240px;border-collapse:collapse;font-size:12px}.project-invoice-data-table th{height:40px;padding:0 11px;background:#f8fafc;color:#21314c;text-align:left;font-size:10.5px;font-weight:750;border-bottom:1px solid #e4eaf1}.project-invoice-data-table th+th{border-left:1px solid #e7ebf1}.project-invoice-data-table td{height:64px;padding:10px 11px;border-bottom:1px solid #e8edf3;color:#33465f;vertical-align:middle}.project-invoice-data-table tbody tr:hover td{background:#fbfcff}.project-invoice-data-table th:first-child{min-width:260px}.project-invoice-options-heading{text-align:right!important}.project-invoice-identity{display:flex;align-items:center;gap:9px}.project-invoice-avatar{width:32px;height:32px;flex:none;display:grid;place-items:center;border-radius:9px;background:#eef3ff;color:#4965d7}.project-invoice-avatar svg{width:15px;height:15px}.project-invoice-number{display:block;color:#1f4f95!important;font-weight:800;text-decoration:none}.project-invoice-identity small{display:block;margin-top:2px;color:#8a98aa;font-size:9px}.project-invoice-inline-actions{display:flex;align-items:center;gap:5px;margin-top:3px;font-size:9.5px}.project-invoice-inline-actions a{color:#55729a!important;font-weight:650;text-decoration:none}.project-invoice-inline-actions span{color:#b5bfcc}.project-invoice-inline-actions a:hover{color:#1d4ed8!important;text-decoration:underline}.project-invoice-client{font-size:11px;color:#334b68}.project-invoice-money{font-weight:800;color:#203f68}.project-invoice-date{font-size:10.5px;color:#53657d}.project-invoice-date.overdue{color:#b63b45;font-weight:800}.project-invoice-members{display:flex;align-items:center;min-width:100px}.project-invoice-members span{width:25px;height:25px;border:2px solid #fff;border-radius:50%;background:#dcecf9;color:#365a7a;display:grid;place-items:center;margin-left:-5px;font-size:10px;font-weight:800}.project-invoice-members span:first-child{margin-left:0}.project-invoice-members span:nth-child(even){background:#f8e6d2;color:#8a633e}.project-invoice-members b{margin-left:4px;font-size:9px;color:#6d7c90}.project-invoice-members small{color:#8a98aa}.project-invoice-progress{display:flex;align-items:center;gap:7px;min-width:105px}.project-invoice-progress>div{width:70px;height:6px;border-radius:99px;background:#edf1f6;overflow:hidden}.project-invoice-progress>div span{display:block;height:100%;border-radius:inherit;background:#3157df}.project-invoice-progress small{font-size:9px;color:#6b7b8f}.project-invoice-status{display:inline-flex;align-items:center;min-height:23px;padding:0 8px;border:1px solid #d7e0eb;border-radius:999px;background:#f7f9fc;color:#5a6b80;font-size:9.5px;font-weight:750;white-space:nowrap}.project-invoice-status.status-in-progress{background:#eef5ff;border-color:#cddfff;color:#2f65c9}.project-invoice-status.status-completed{background:#eefaf4;border-color:#d5f0e1;color:#198754}.project-invoice-status.status-on-hold{background:#fff8ec;border-color:#f1dfba;color:#a56d10}.project-invoice-status.status-cancelled,.project-invoice-status.status-canceled{background:#fff2f2;border-color:#f3d0d0;color:#b63b45}.project-invoice-status.status-not-started{background:#f4f6f9;color:#66778b}.project-invoice-options{display:flex;align-items:center;justify-content:flex-end;gap:5px}.project-invoice-options a{width:30px;height:30px;display:grid;place-items:center;border:1px solid #d4dfec;border-radius:7px;background:#fff;color:#55729a}.project-invoice-options svg{width:13px;height:13px}.project-invoice-options a:hover{background:#f5f8fd;color:#285fc1;border-color:#b9c9df}.project-invoice-empty{text-align:center!important;padding:46px 20px!important;color:#7e8b9d!important}.project-invoice-empty>span{width:42px;height:42px;display:grid;place-items:center;margin:0 auto 9px;border-radius:10px;background:#eef3ff;color:#5572d7}.project-invoice-empty svg{width:20px;height:20px}.project-invoice-empty strong,.project-invoice-empty small{display:block}.project-invoice-empty strong{color:#526176;font-size:12px}.project-invoice-empty small{margin:4px 0 8px}.project-invoice-empty a{color:#3157df;font-weight:750} .project-invoice-footer{min-height:58px;display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:18px;padding:0 14px;color:#718096;font-size:11px}.project-invoice-footer-summary{display:flex;align-items:center;gap:14px}.project-invoice-footer-summary strong{margin-left:4px;color:#29415f}.project-invoice-pagination{display:flex;align-items:center;gap:12px}.project-invoice-pagination a{color:#66778d;text-decoration:none}.project-invoice-pagination b{display:grid;place-items:center;min-width:30px;height:30px;border-radius:7px;background:#eaf0f8;color:#25405f}.project-invoice-pagination span{color:#a2adba} @media(max-width:1100px){.project-invoice-summary{grid-template-columns:repeat(3,1fr)}.project-invoice-heading{align-items:flex-start;flex-direction:column}.project-invoice-toolbar{flex-wrap:wrap}.project-invoice-search{margin-left:auto}.project-invoice-filters.open{flex-wrap:wrap}.project-invoice-footer{grid-template-columns:1fr auto}.project-invoice-footer-summary{grid-column:1/-1;order:3}} @media(max-width:600px){.project-invoice-summary{grid-template-columns:repeat(2,1fr)}.project-invoice-heading-actions{width:100%;flex-wrap:wrap}.project-invoice-search{width:100%;margin-left:0}.project-invoice-search input{width:100%}.project-invoice-toolbar-left{flex-wrap:wrap}.project-invoice-footer{display:flex;flex-wrap:wrap;padding:12px 14px}.project-invoice-footer-summary{width:100%;flex-wrap:wrap}.project-invoice-pagination{margin-left:auto}} /* ========================================================== Project detail/view โ€” Invoice-style workspace ========================================================== */ .project-detail-page{max-width:1600px;margin:0 auto;color:#24334a}.project-detail-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:0 0 14px;padding:18px 20px;border:1px solid #dce4ef;border-radius:14px;background:linear-gradient(120deg,#fff 62%,#f5f8ff 100%);box-shadow:0 6px 20px rgba(31,48,76,.055)}.project-detail-back{display:inline-block;margin-bottom:8px;color:#2868ce;font-size:11px;font-weight:700;text-decoration:none}.project-detail-title-row{display:flex;align-items:center;gap:11px;flex-wrap:wrap}.project-detail-title-icon{width:38px;height:38px;display:grid;place-items:center;flex:none;border-radius:10px;background:#eef3ff;color:#4965d7}.project-detail-title-icon svg{width:17px;height:17px}.project-detail-title-copy{min-width:0}.project-detail-eyebrow{display:block;margin-bottom:2px;color:#738299;font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.project-detail-title-copy h1{margin:0;color:#18263b;font-size:24px;line-height:1.1;letter-spacing:-.025em}.project-detail-title-copy p{margin:4px 0 0;color:#78879a;font-size:11px}.project-detail-status{display:inline-flex;align-items:center;min-height:24px;padding:0 8px;border:1px solid #d7e0eb;border-radius:999px;background:#f7f9fc;color:#5a6b80;font-size:9.5px;font-weight:800;font-style:normal;white-space:nowrap}.project-detail-status.status-in-progress{background:#eef5ff;border-color:#cddfff;color:#2f65c9}.project-detail-status.status-completed{background:#eefaf4;border-color:#d5f0e1;color:#198754}.project-detail-status.status-on-hold{background:#fff8ec;border-color:#f1dfba;color:#a56d10}.project-detail-status.status-cancelled,.project-detail-status.status-canceled{background:#fff2f2;border-color:#f3d0d0;color:#b63b45}.project-detail-status.status-not-started{background:#f4f6f9;color:#66778b}.project-detail-actions{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:wrap}.project-detail-actions>a,.project-detail-actions>button,.project-detail-more>summary{min-height:36px;display:inline-flex;align-items:center;justify-content:center;gap:6px;box-sizing:border-box;padding:0 11px;border:1px solid #cbd6e3;border-radius:8px;background:#fff;color:#27374f;font:inherit;font-size:11px;font-weight:750;text-decoration:none;cursor:pointer;transition:.18s ease}.project-detail-actions svg{width:14px;height:14px}.project-detail-primary{background:#3157df!important;border-color:#3157df!important;color:#fff!important;box-shadow:0 6px 14px rgba(49,87,223,.18)}.project-detail-actions>a:hover,.project-detail-actions>button:hover,.project-detail-more>summary:hover{border-color:#9eb2cf;background:#f8fbff}.project-detail-primary:hover{background:#2448c8!important}.project-detail-more{position:relative}.project-detail-more summary{width:36px;padding:0!important;list-style:none}.project-detail-more summary::-webkit-details-marker{display:none}.project-detail-more>div{position:absolute;right:0;top:42px;z-index:20;width:170px;padding:6px;border:1px solid #d8e1ec;border-radius:9px;background:#fff;box-shadow:0 12px 30px rgba(31,48,76,.14)}.project-detail-more>div a{display:block;padding:8px 9px;border-radius:6px;color:#3d506a;font-size:11px;text-decoration:none}.project-detail-more>div a:hover{background:#f4f7fb;color:#285fc1} .project-detail-summary{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin-bottom:12px}.project-detail-summary-card{min-height:66px;padding:11px 13px;border:1px solid #dce4ed;border-radius:10px;background:#fff;box-shadow:0 1px 3px rgba(30,41,59,.035)}.project-detail-summary-card>span,.project-detail-summary-card>strong,.project-detail-summary-card>small{display:block}.project-detail-summary-card>span{color:#78869a;font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}.project-detail-summary-card>strong{margin-top:5px;color:#21344f;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.project-detail-summary-card>small{margin-top:3px;color:#8b98a9;font-size:9px}.project-detail-summary-card.progress>div{height:5px;margin-top:7px;border-radius:99px;background:#edf1f6;overflow:hidden}.project-detail-summary-card.progress>div i{display:block;height:100%;border-radius:inherit;background:#3157df}.project-detail-summary-card.overdue strong,.project-detail-summary-card.overdue small{color:#b63b45} .project-detail-tabs{display:flex;align-items:center;gap:2px;margin-bottom:14px;padding:0 10px;border:1px solid #dce3ec;border-radius:11px;background:#fff;box-shadow:0 4px 14px rgba(31,48,76,.045);overflow-x:auto;white-space:nowrap}.project-detail-tabs a{position:relative;display:flex;align-items:center;gap:6px;min-height:48px;padding:0 11px;color:#596a80;font-size:10.5px;font-weight:700;text-decoration:none}.project-detail-tabs a:after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2px;border-radius:2px;background:transparent}.project-detail-tabs a:hover{color:#285fc1;background:#fbfcff}.project-detail-tabs a.active{color:#285fc1}.project-detail-tabs a.active:after{background:#3157df}.project-detail-tabs svg{width:13px;height:13px}.project-detail-tab-caret{width:10px!important}.project-detail-content{min-width:0} .project-overview-invoice-layout{display:grid;grid-template-columns:minmax(0,1fr) 285px;gap:18px;align-items:start}.project-overview-document,.project-overview-sidebar section{background:#fff;border:1px solid #dce3eb;border-radius:12px;box-shadow:0 8px 24px rgba(30,48,76,.06)}.project-overview-document{overflow:hidden}.project-overview-section{padding:20px 22px;border-bottom:1px solid #e7ecf2}.project-overview-section:last-child{border-bottom:0}.project-overview-section-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:17px}.project-overview-section-head>div{display:flex;align-items:center;gap:9px}.project-overview-section-icon{width:31px;height:31px;display:grid;place-items:center;flex:none;border-radius:8px;background:#eef3ff;color:#4965d7}.project-overview-section-icon svg{width:14px;height:14px}.project-overview-section-head h2{margin:1px 0 0;color:#24364f;font-size:14px}.project-overview-section-head>div>div>span{display:block;color:#8a97aa;font-size:8px;font-weight:850;letter-spacing:.09em}.project-overview-section-head>a,.project-overview-period{display:inline-flex;align-items:center;gap:5px;color:#55729a;font-size:9.5px;font-weight:700;text-decoration:none}.project-overview-section-head>a svg{width:12px;height:12px}.project-overview-meta-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.project-overview-meta-grid>div{min-height:58px;padding:10px 11px;border:1px solid #e4eaf2;border-radius:9px;background:#fbfcfe}.project-overview-meta-grid span,.project-overview-meta-grid strong{display:block}.project-overview-meta-grid span{color:#8a97aa;font-size:8.5px;font-weight:750;text-transform:uppercase;letter-spacing:.05em}.project-overview-meta-grid strong{margin-top:5px;color:#2b405d;font-size:11px;overflow-wrap:anywhere}.project-overview-overdue{color:#b63b45!important}.project-overview-tags{display:flex;align-items:flex-start;gap:10px;margin-top:12px;padding-top:12px;border-top:1px solid #edf1f5}.project-overview-tags>span{padding-top:4px;color:#8a97aa;font-size:8.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}.project-overview-tags .project-tag{font-size:9px}.project-overview-description{margin-top:14px;padding:15px 16px;border:1px solid #e4eaf2;border-radius:10px;background:#f8fafc}.project-overview-description>span{display:block;margin-bottom:6px;color:#7f8da1;font-size:8.5px;font-weight:850;letter-spacing:.08em}.project-overview-description p{margin:0;color:#4d5e73;font-size:11px;line-height:1.6;white-space:normal}.project-overview-kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.project-overview-kpi-grid>div{padding:12px;border:1px solid #e1e7ef;border-radius:10px;background:#fbfcff}.project-overview-kpi-grid span,.project-overview-kpi-grid strong,.project-overview-kpi-grid small{display:block}.project-overview-kpi-grid span{color:#78869a;font-size:9px;font-weight:750}.project-overview-kpi-grid strong{margin-top:5px;color:#21344f;font-size:18px}.project-overview-kpi-grid small{margin-top:2px;color:#8d99a9;font-size:8.5px}.project-overview-kpi-grid i{display:block;height:5px;margin-top:9px;border-radius:99px;background:#e9eef5;overflow:hidden}.project-overview-kpi-grid i em{display:block;height:100%;border-radius:inherit;background:#3157df}.project-overview-hours-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:15px}.project-overview-hours-summary>div{padding:9px 11px;border:1px solid #e4eaf2;border-radius:8px;background:#fbfcfe}.project-overview-hours-summary span,.project-overview-hours-summary strong{display:block}.project-overview-hours-summary span{font-size:8.5px;color:#8491a3}.project-overview-hours-summary strong{margin-top:4px;font-size:11px;color:#2b405d}.project-overview-hours-chart{position:relative;height:190px;padding:14px 10px 25px 42px;border:1px solid #e3e9f1;border-radius:10px;background:repeating-linear-gradient(0deg,#fff,#fff 47px,#eef2f6 48px)}.project-overview-hours-scale{position:absolute;left:8px;top:10px;bottom:28px;display:flex;flex-direction:column;justify-content:space-between;color:#94a0af;font-size:8px}.project-overview-hours-bars{height:100%;display:grid;grid-template-columns:repeat(7,1fr);gap:8px;align-items:end}.project-overview-hours-bars>div{position:relative;height:100%;display:flex;align-items:center;justify-content:flex-end;flex-direction:column;gap:4px}.project-overview-hours-bars b{font-size:8px;color:#6f7e91;font-weight:700}.project-overview-hours-bars i{display:block;width:min(22px,70%);min-height:2px;border-radius:5px 5px 2px 2px;background:#3157df}.project-overview-hours-bars span{font-size:8px;color:#5d6c81;font-weight:700}.project-overview-hours-bars small{font-size:7px;color:#9aa5b4} .project-overview-sidebar section{padding:17px 18px;margin-bottom:12px}.project-overview-sidebar h2{margin:0 0 13px;color:#253750;font-size:13px}.project-overview-sidebar dl{margin:0}.project-overview-sidebar dl>div{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-top:1px solid #e8edf3}.project-overview-sidebar dl>div:first-child{border-top:0}.project-overview-sidebar dt{color:#7a889b;font-size:9.5px}.project-overview-sidebar dd{margin:0;color:#2c405c;font-size:9.5px;font-weight:750;text-align:right}.project-overview-sidebar-progress{margin-top:12px}.project-overview-sidebar-progress>div{height:6px;border-radius:99px;background:#e9eef5;overflow:hidden}.project-overview-sidebar-progress>div span{display:block;height:100%;border-radius:inherit;background:#3157df}.project-overview-sidebar-progress small{display:block;margin-top:5px;color:#8491a3;font-size:8.5px;text-align:right}.project-overview-finance-list>div{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid #e8edf3}.project-overview-finance-list>div:first-child{border-top:0}.project-overview-finance-list span{color:#78869a;font-size:9.5px}.project-overview-finance-list strong{color:#29415f;font-size:10.5px} .project-detail-page .pw-page-actions{display:flex;align-items:center;gap:7px;margin:0 0 10px}.project-detail-page .pw-page-actions .pw-dark,.project-detail-page .pw-page-actions a.pw-dark{display:inline-flex;align-items:center;gap:6px;min-height:35px;padding:0 11px;border:1px solid #3157df;border-radius:8px;background:#3157df;color:#fff!important;font-size:10.5px;font-weight:800;box-shadow:0 5px 12px rgba(49,87,223,.14)}.project-detail-page .pw-page-actions svg{width:13px;height:13px}.project-detail-page .pw-table-card{border:1px solid #dce3ec;border-radius:12px;box-shadow:0 5px 18px rgba(31,48,76,.055);overflow:hidden;background:#fff}.project-detail-page .pw-table-tools{min-height:58px;padding:10px 14px;border-bottom:1px solid #e3e9f1;background:linear-gradient(90deg,#fbfcff,#f7f9ff)}.project-detail-page .pw-table-tools input,.project-detail-page .pw-table-tools select,.project-detail-page .pw-table-tools button{height:32px;border:1px solid #cbd6e4;border-radius:6px;background:#fff;color:#34465e;font-size:10.5px}.project-detail-page .pw-table-card table{font-size:11px}.project-detail-page .pw-table-card th{height:40px;padding:0 11px;background:#f8fafc;color:#21314c;font-size:9.5px;font-weight:750}.project-detail-page .pw-table-card td{height:58px;padding:9px 11px;color:#33465f}.project-detail-page .pw-empty{padding:45px!important;color:#7d8b9e!important}.project-detail-page .pw-activity{border:1px solid #dce3ec;border-radius:12px;background:#fff;box-shadow:0 5px 18px rgba(31,48,76,.055);padding:8px 18px}.project-detail-page .pw-activity article{border-bottom:1px solid #e9edf3;padding:14px 0}.project-detail-page .pw-activity article:last-child{border-bottom:0} @media(max-width:1200px){.project-detail-summary{grid-template-columns:repeat(3,1fr)}.project-overview-meta-grid{grid-template-columns:repeat(2,1fr)}.project-overview-kpi-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:1000px){.project-overview-invoice-layout{grid-template-columns:1fr}.project-overview-sidebar{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.project-overview-sidebar section{margin:0}} @media(max-width:760px){.project-detail-heading{align-items:flex-start;flex-direction:column}.project-detail-actions{width:100%;justify-content:flex-start}.project-detail-summary{grid-template-columns:repeat(2,1fr)}.project-detail-tabs{padding:0 4px}.project-overview-sidebar{display:block}.project-overview-sidebar section{margin-bottom:10px}.project-overview-hours-summary{grid-template-columns:repeat(2,1fr)}.project-overview-hours-bars{gap:4px}.project-overview-hours-bars small{display:none}} @media(max-width:520px){.project-detail-summary,.project-overview-meta-grid,.project-overview-kpi-grid{grid-template-columns:1fr}.project-detail-actions>*{flex:1}.project-detail-more{flex:0!important}.project-overview-section{padding:16px}.project-overview-section-head{align-items:flex-start}.project-overview-hours-chart{padding-left:34px}.project-overview-hours-summary{grid-template-columns:1fr 1fr}} /* Projects delete actions */ .project-invoice-inline-actions form,.project-invoice-options form,.project-detail-actions form{display:inline;margin:0} .project-delete-text{border:0!important;background:transparent!important;padding:0!important;color:#55729a!important;font:inherit!important;font-weight:650!important;cursor:pointer!important} .project-delete-text:hover{color:#1d4ed8!important;text-decoration:underline} .project-invoice-options .project-delete-icon{width:30px;height:30px;display:grid;place-items:center;border:1px solid #d4dfec!important;border-radius:7px;background:#fff!important;color:#55729a!important;cursor:pointer} .project-invoice-options .project-delete-icon:hover{background:#f5f8fd!important;border-color:#b9c9df!important;color:#285fc1!important} .project-invoice-options .project-delete-icon svg{width:13px;height:13px} .project-detail-delete{display:inline-flex;align-items:center;gap:6px;border:1px solid #efc5ca;border-radius:9px;background:#fff7f8;color:#ba3442;padding:9px 12px;font:inherit;font-weight:700;cursor:pointer;transition:.18s ease} .project-detail-delete:hover{background:#fff0f2;border-color:#e7aab2;color:#9f2935} .project-detail-delete svg{width:16px;height:16px} /* Projects Gantt - base Projects design */ .project-gantt-base{display:grid;gap:10px;color:#263954} .project-gantt-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:17px 18px;border:1px solid #dce3ec;border-radius:12px;background:#fff;box-shadow:0 5px 18px rgba(31,48,76,.055)} .project-gantt-eyebrow{display:block;margin-bottom:3px;color:#3157df;font-size:9px;font-weight:850;letter-spacing:.11em} .project-gantt-heading h2{margin:0;color:#152640;font-size:18px;line-height:1.2} .project-gantt-heading p{margin:5px 0 0;color:#75859a;font-size:10.5px} .project-gantt-heading-actions{display:flex;align-items:center;gap:7px} .project-gantt-heading-actions button{height:34px;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 11px;border-radius:7px;font-size:10.5px;font-weight:750;cursor:pointer} .project-gantt-heading-actions svg{width:13px;height:13px} .project-gantt-secondary{border:1px solid #cfd9e5;background:#fff;color:#435772} .project-gantt-primary{border:1px solid #3157df;background:#3157df;color:#fff;box-shadow:0 5px 12px rgba(49,87,223,.14)} .project-gantt-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:7px} .project-gantt-summary article{min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 12px;border:1px solid #dce3ec;border-radius:9px;background:#fff;box-shadow:0 1px 2px rgba(31,48,76,.025)} .project-gantt-summary span{color:#6f7f93;font-size:10px;font-weight:650} .project-gantt-summary strong{color:#17365f;font-size:12px;font-weight:850} .project-gantt-card{overflow:hidden;border:1px solid #dce3ec;border-radius:12px;background:#fff;box-shadow:0 5px 18px rgba(31,48,76,.055)} .project-gantt-toolbar{min-height:59px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:9px 14px;border-bottom:1px solid #e3e9f1;background:linear-gradient(90deg,#fbfcff,#f7f9ff)} .project-gantt-toolbar-left{display:flex;align-items:center;min-width:0} .project-gantt-legend{display:flex;align-items:center;gap:14px;flex-wrap:wrap;color:#6d7d91;font-size:9.5px;font-weight:650} .project-gantt-legend span{display:flex;align-items:center;gap:5px;white-space:nowrap} .project-gantt-legend i{width:8px;height:8px;border-radius:50%} .project-gantt-legend .legend-progress{background:#3157df}.project-gantt-legend .legend-complete{background:#16a05d}.project-gantt-legend .legend-warning{background:#d88a1d}.project-gantt-legend .legend-milestone{background:#7558c8} .project-gantt-controls{display:flex;align-items:flex-end;gap:7px} .project-gantt-controls label{display:grid;gap:3px;color:#7a899b;font-size:8.5px;font-weight:750;text-transform:uppercase;letter-spacing:.04em} .project-gantt-controls select{height:32px;min-width:145px;padding:0 9px;border:1px solid #cbd6e4;border-radius:6px;background:#fff;color:#34465e;font:inherit;font-size:10.5px;outline:0} .project-gantt-scroll{overflow:auto} .project-gantt-board{min-width:1420px} .project-gantt-board-header,.project-gantt-row{display:grid;grid-template-columns:250px minmax(1060px,1fr)} .project-gantt-board-header{position:sticky;top:0;z-index:8;border-bottom:1px solid #e4eaf1;background:#f8fafc} .project-gantt-name-head{padding:9px 12px;border-right:1px solid #e7ebf1;background:#f8fafc} .project-gantt-name-head strong,.project-gantt-name-head small{display:block}.project-gantt-name-head strong{color:#21314c;font-size:10px;font-weight:800}.project-gantt-name-head small{margin-top:2px;color:#8997a9;font-size:8.5px;font-weight:500} .project-gantt-months{display:grid;grid-template-columns:repeat(13,1fr);background:#f8fafc} .project-gantt-months span{display:grid;place-items:center;min-height:40px;padding:4px;border-right:1px solid #e7ebf1} .project-gantt-months b{color:#334760;font-size:9.5px}.project-gantt-months small{margin-top:1px;color:#9aa6b5;font-size:8px} .project-gantt-row{min-height:52px;border-bottom:1px solid #e8edf3;background:#fff}.project-gantt-row:hover{background:#fbfcff} .project-gantt-row-label{display:flex;align-items:center;gap:9px;padding:7px 11px;border-right:1px solid #e7ebf1;background:inherit}.project-gantt-row-label>div{min-width:0} .project-gantt-row-label b,.project-gantt-row-label button,.project-gantt-row-label small{display:block}.project-gantt-row-label b,.project-gantt-row-label button{max-width:185px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#29415f;font-size:10.5px;font-weight:750}.project-gantt-row-label button{padding:0;border:0;background:transparent;cursor:pointer;text-align:left}.project-gantt-row-label button:hover{color:#3157df}.project-gantt-row-label small{margin-top:2px;color:#8b99aa;font-size:8.5px} .project-gantt-row-icon{width:28px;height:28px;display:grid;place-items:center;flex:none;border-radius:8px;background:#eef3ff;color:#526dd5}.project-gantt-row-icon.neutral{background:#f2f5f9;color:#708198}.project-gantt-row-icon svg{width:13px;height:13px} .project-gantt-status-dot{width:8px;height:8px;flex:none;border-radius:50%;background:#7d8a9a;box-shadow:0 0 0 3px #eef1f5}.project-gantt-status-dot.status-in-progress,.project-gantt-status-dot.status-testing{background:#3157df;box-shadow:0 0 0 3px #e4ebff}.project-gantt-status-dot.status-complete,.project-gantt-status-dot.status-completed,.project-gantt-status-dot.status-done{background:#16a05d;box-shadow:0 0 0 3px #e1f5ea}.project-gantt-status-dot.status-awaiting-feedback,.project-gantt-status-dot.status-on-hold{background:#d88a1d;box-shadow:0 0 0 3px #fff2dc} .project-gantt-timeline-cell{position:relative;min-height:52px;overflow:visible;background:inherit}.project-gantt-gridlines{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(7.6923% - 1px),#edf1f5 calc(7.6923% - 1px),#edf1f5 7.6923%)} .project-gantt-milestone-row{background:#fafbfe}.project-gantt-milestone-row .project-gantt-timeline-cell{background:linear-gradient(90deg,rgba(49,87,223,.018),rgba(117,88,200,.018))} .project-gantt-bar{position:absolute;z-index:3;top:15px;height:22px;min-width:12px;border:0;border-radius:5px}.project-gantt-bar.task{overflow:hidden;background:#3157df;color:#fff;box-shadow:0 3px 8px rgba(49,87,223,.16);cursor:pointer}.project-gantt-bar.task.status-complete,.project-gantt-bar.task.status-completed,.project-gantt-bar.task.status-done{background:#16a05d}.project-gantt-bar.task.status-awaiting-feedback,.project-gantt-bar.task.status-on-hold{background:#d88a1d}.project-gantt-bar.task.status-not-started{background:#7a899a}.project-gantt-bar.task span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:3px 7px;font-size:8.5px;font-weight:750;text-align:left}.project-gantt-bar.task:hover{filter:brightness(.96);box-shadow:0 5px 10px rgba(49,87,223,.2)} .project-gantt-bar.milestone{top:19px;height:14px;background:#7558c8;box-shadow:0 2px 7px rgba(117,88,200,.15)}.project-gantt-bar.milestone i{position:absolute;left:-3px;top:2px;width:10px;height:10px;transform:rotate(45deg);border-radius:2px;background:#7558c8}.project-gantt-bar.milestone span{position:absolute;left:calc(100% + 6px);top:-2px;width:max-content;color:#718198;font-size:8px} .project-gantt-today-line{position:absolute;z-index:2;top:0;bottom:0;width:1px;background:#e5484d;opacity:.52}.project-gantt-today-line em{position:absolute;top:2px;left:4px;padding:2px 4px;border-radius:4px;background:#fff0f0;color:#b63b45;font-size:7.5px;font-style:normal;font-weight:750} .project-gantt-empty{display:grid;place-items:center;padding:52px 20px;color:#98a4b4}.project-gantt-empty svg{width:30px;height:30px}.project-gantt-empty strong{margin-top:8px;color:#53647a;font-size:11px}.project-gantt-empty span{margin-top:3px;font-size:9.5px} .project-gantt-footer{min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 14px;border-top:1px solid #e8edf3;color:#758399;font-size:9.5px} @media(max-width:1000px){.project-gantt-heading{align-items:flex-start;flex-direction:column}.project-gantt-summary{grid-template-columns:repeat(2,1fr)}.project-gantt-toolbar{align-items:flex-start;flex-direction:column}.project-gantt-controls{width:100%}.project-gantt-controls label{flex:1}.project-gantt-controls select{width:100%}} @media(max-width:600px){.project-gantt-summary{grid-template-columns:1fr 1fr}.project-gantt-heading-actions{width:100%;flex-wrap:wrap}.project-gantt-heading-actions button{flex:1}.project-gantt-legend{gap:8px}.project-gantt-controls{flex-direction:column;align-items:stretch}.project-gantt-footer{align-items:flex-start;flex-direction:column;padding:10px 14px}} /* ========================================================== Project sub-tabs โ€” shared base design Tasks / Timesheets / Discussions / Tickets / Contracts / Notes / Activity ========================================================== */ .project-detail-page .project-subtab-shell{display:grid;gap:10px;min-width:0} .project-detail-page .project-subtab-head{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 16px;border:1px solid #dce4ef;border-radius:12px;background:#fff;box-shadow:0 4px 14px rgba(31,48,76,.045)} .project-detail-page .project-subtab-head-main{display:flex;align-items:center;gap:11px;min-width:0} .project-detail-page .project-subtab-icon{width:38px;height:38px;display:grid;place-items:center;flex:none;border-radius:10px;background:#eef3ff;color:#4965d7} .project-detail-page .project-subtab-icon svg{width:17px;height:17px} .project-detail-page .project-subtab-head-main>div{min-width:0} .project-detail-page .project-subtab-eyebrow{display:block;margin-bottom:2px;color:#718198;font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase} .project-detail-page .project-subtab-head h2{margin:0;color:#1b2b43;font-size:17px;line-height:1.15;letter-spacing:-.015em} .project-detail-page .project-subtab-head p{margin:4px 0 0;color:#7c8a9e;font-size:10.5px;line-height:1.45} .project-detail-page .project-subtab-head-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap} .project-detail-page .project-subtab-count{display:inline-flex;align-items:center;min-height:30px;padding:0 10px;border:1px solid #dce4ed;border-radius:8px;background:#f8fafc;color:#5d6f86;font-size:10px;font-weight:750;white-space:nowrap} .project-detail-page .project-subtab-primary{min-height:34px;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 11px;border:1px solid #3157df;border-radius:8px;background:#3157df;color:#fff!important;font:inherit;font-size:10.5px;font-weight:800;text-decoration:none;cursor:pointer;box-shadow:0 5px 12px rgba(49,87,223,.14)} .project-detail-page .project-subtab-primary:hover{background:#2448c8;border-color:#2448c8} .project-detail-page .project-subtab-primary svg{width:13px;height:13px} .project-detail-page .project-subtab-card{border:1px solid #dce3ec!important;border-radius:12px!important;background:#fff!important;box-shadow:0 5px 18px rgba(31,48,76,.055)!important;overflow:hidden} /* Shared table toolbar */ .project-detail-page .project-subtab-toolbar{min-height:58px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px!important;border-bottom:1px solid #e3e9f1;background:#fbfcff!important} .project-detail-page .project-subtab-toolbar-left{display:flex;align-items:center} .project-detail-page .project-subtab-toolbar-left select,.project-detail-page .project-subtab-tool{height:32px;box-sizing:border-box;border:1px solid #cbd6e4!important;background:#fff!important;color:#40516a!important;font:inherit;font-size:10.5px} .project-detail-page .project-subtab-toolbar-left select{min-width:68px;padding:0 8px;border-radius:6px 0 0 6px!important} .project-detail-page .project-subtab-tool{display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:0 9px;border-left:0!important;border-radius:0!important;cursor:pointer} .project-detail-page .project-subtab-tool.icon-only{width:34px;padding:0;border-radius:0 6px 6px 0!important} .project-detail-page .project-subtab-tool svg{width:12px;height:12px} .project-detail-page .project-subtab-search{height:32px;display:flex;align-items:center;width:235px;border:1px solid #cbd6e4;border-radius:6px;background:#fff;color:#74849a} .project-detail-page .project-subtab-search svg{width:13px;height:13px;margin-left:9px;flex:none} .project-detail-page .project-subtab-search input{height:30px!important;min-width:0;width:100%;margin:0!important;padding:0 9px!important;border:0!important;outline:0;background:transparent!important;color:#34465e!important;font-size:10.5px!important} .project-detail-page .project-subtab-card .pw-table-scroll{overflow:auto} .project-detail-page .project-subtab-card table{width:100%;min-width:880px;border-collapse:collapse;font-size:11px} .project-detail-page .project-subtab-card th{height:40px;padding:0 11px!important;border-top:0!important;border-bottom:1px solid #e4eaf1;background:#f8fafc!important;color:#24334b!important;text-align:left;font-size:9.5px!important;font-weight:800!important;white-space:nowrap} .project-detail-page .project-subtab-card td{height:56px;padding:9px 11px!important;border-top:1px solid #e9edf3!important;color:#40516a!important;vertical-align:middle} .project-detail-page .project-subtab-card tbody tr:hover td{background:#fbfdff} .project-detail-page .project-subtab-title{color:#243750;font-weight:750} .project-detail-page .project-subtab-title a{color:#285fc1;text-decoration:none} .project-detail-page .project-subtab-title a:hover{text-decoration:underline} .project-detail-page .project-subtab-money{color:#1e3552;font-size:11px} .project-detail-page .project-subtab-status,.project-detail-page .project-subtab-priority,.project-detail-page .project-subtab-boolean{display:inline-flex;align-items:center;min-height:24px;padding:0 8px;border:1px solid #d8e1ec;border-radius:999px;background:#f8fafc;color:#5d6f86;font-size:9px;font-weight:800;white-space:nowrap} .project-detail-page .project-subtab-status.status-in-progress,.project-detail-page .project-subtab-status.status-open,.project-detail-page .project-subtab-status.status-active{border-color:#c9dcff;background:#eef5ff;color:#2f65c9} .project-detail-page .project-subtab-status.status-completed,.project-detail-page .project-subtab-status.status-complete,.project-detail-page .project-subtab-status.status-done,.project-detail-page .project-subtab-status.status-closed,.project-detail-page .project-subtab-boolean.yes{border-color:#cdebdc;background:#eefaf4;color:#198754} .project-detail-page .project-subtab-status.status-on-hold,.project-detail-page .project-subtab-status.status-pending,.project-detail-page .project-subtab-status.status-awaiting-feedback{border-color:#f1dfba;background:#fff8ec;color:#a56d10} .project-detail-page .project-subtab-status.status-cancelled,.project-detail-page .project-subtab-status.status-canceled,.project-detail-page .project-subtab-boolean.no{border-color:#efd2d5;background:#fff4f5;color:#b63b45} .project-detail-page .project-subtab-priority.priority-low{border-color:#d8e1ec;background:#f8fafc;color:#68798f} .project-detail-page .project-subtab-priority.priority-medium{border-color:#c9dcff;background:#eef5ff;color:#2f65c9} .project-detail-page .project-subtab-priority.priority-high{border-color:#f3dec2;background:#fff8ed;color:#b66d17} .project-detail-page .project-subtab-priority.priority-urgent{border-color:#efcfd3;background:#fff2f3;color:#c23a48} .project-detail-page .project-subtab-download{display:inline-flex;align-items:center;gap:5px;color:#315fc5;text-decoration:none;font-weight:750;font-size:9.5px} .project-detail-page .project-subtab-download svg{width:12px;height:12px} .project-detail-page .project-subtab-footer{min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 14px;border-top:1px solid #e4eaf1;background:#fff;color:#7b899b;font-size:9.5px} .project-detail-page .project-subtab-empty{padding:48px 20px!important;text-align:center!important;color:#8a98aa!important} .project-detail-page .project-subtab-empty>svg{display:block;width:24px;height:24px;margin:0 auto 7px;color:#9aa8b8} .project-detail-page .project-subtab-empty>strong,.project-detail-page .project-subtab-empty>span{display:block} .project-detail-page .project-subtab-empty>strong{color:#53657c;font-size:11px} .project-detail-page .project-subtab-empty>span{margin-top:4px;font-size:9.5px} /* Tasks */ .project-detail-page .project-task-base .pw-task-shell{padding-top:0!important} .project-detail-page .project-task-base .pw-task-top{min-height:58px;padding:10px 14px!important;border-bottom:1px solid #e3e9f1;background:#fbfcff} .project-detail-page .project-task-base .pw-task-top>div{display:flex;align-items:center;gap:5px} .project-detail-page .pw-task-overview-link{height:32px;display:inline-flex;align-items:center;gap:6px;padding:0 10px;border:1px solid #cbd6e4;border-radius:6px;background:#fff;color:#34465e;text-decoration:none;font-size:10.5px;font-weight:750} .project-detail-page .pw-task-overview-link svg{width:13px;height:13px} .project-detail-page .project-task-base .pw-square,.project-detail-page .project-task-base .pw-button{height:32px;min-height:32px;border:1px solid #cbd6e4;border-radius:6px;background:#fff;color:#40516a!important;box-shadow:none;font-size:10.5px;font-weight:750} .project-detail-page .project-task-base .pw-square{width:34px} .project-detail-page .project-task-base .pw-task-stats{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;padding:12px 14px!important;border-bottom:1px solid #e7ecf2;background:#fff} .project-detail-page .project-task-base .pw-task-stats button{min-height:56px;padding:9px 11px;border:1px solid #dce4ed;border-radius:9px;background:#fff;color:#5c6e84;box-shadow:none} .project-detail-page .project-task-base .pw-task-stats button:hover{border-color:#aabde0;background:#f9fbff} .project-detail-page .project-task-base .pw-task-stats span{font-size:10px;font-weight:750} .project-detail-page .project-task-base .pw-task-stats b{font-size:13px;color:#223650} .project-detail-page .project-task-base .pw-task-stats small{margin-top:4px;color:#8a97a8;font-size:8.5px} .project-detail-page .project-task-base .pw-task-stats .blue{border-color:#cfdefd;background:#f5f8ff}.project-detail-page .project-task-base .pw-task-stats .blue span{color:#315fc5} .project-detail-page .project-task-base .pw-task-stats .cyan{border-color:#cce7ef;background:#f4fbfd}.project-detail-page .project-task-base .pw-task-stats .cyan span{color:#1686a7} .project-detail-page .project-task-base .pw-task-stats .lime{border-color:#e0e8bf;background:#fbfdef}.project-detail-page .project-task-base .pw-task-stats .lime span{color:#758f26} .project-detail-page .project-task-base .pw-task-stats .green{border-color:#cdebdc;background:#f2fbf6}.project-detail-page .project-task-base .pw-task-stats .green span{color:#198754} .project-detail-page .project-task-base .pw-task-filters{grid-template-columns:repeat(3,minmax(0,1fr)) auto;padding:12px 14px!important;border-top:0;border-bottom:1px solid #e3e9f1;background:#f8fafc} .project-detail-page .project-task-base .pw-task-filters label{color:#53647a;font-size:9.5px} .project-detail-page .project-task-base .pw-task-filters select,.project-detail-page .project-task-base .pw-task-filters button{height:32px;border:1px solid #cbd6e4;border-radius:6px;background:#fff;color:#40516a;font-size:10px} .project-detail-page .project-task-base .pw-task-table-wrap>.pw-table-tools{min-height:54px;align-items:center;padding:9px 14px!important;border-bottom:1px solid #e3e9f1;background:#fff} .project-detail-page .project-task-base .pw-table-tools select,.project-detail-page .project-task-base .pw-table-tools a,.project-detail-page .project-task-base .pw-table-tools button{height:32px;border-color:#cbd6e4;border-radius:6px;background:#fff;color:#40516a;font-size:10px} .project-detail-page .project-task-base .pw-task-search{height:32px;border-color:#cbd6e4;background:#fff} .project-detail-page .project-task-base .pw-task-search input{font-size:10px} .project-detail-page .project-task-base .pw-task-table th{height:40px;padding:0 10px;border-top:0;border-bottom:1px solid #e4eaf1;background:#f8fafc;color:#24334b;font-size:9.5px;font-weight:800} .project-detail-page .project-task-base .pw-task-table td{height:58px;padding:9px 10px;border-top:1px solid #e9edf3;color:#40516a;font-size:10.5px} .project-detail-page .project-task-base .pw-task-table tbody tr:hover td{background:#fbfdff} .project-detail-page .project-task-base .task-detail-link{padding:0;border:0;background:transparent;color:#285fc1;font:inherit;font-size:10.5px;font-weight:800;cursor:pointer;text-align:left} .project-detail-page .project-task-base .task-detail-link:hover{text-decoration:underline} .project-detail-page .project-task-base .pw-task-status{min-height:26px;border-radius:999px;font-size:9px;font-weight:750} .project-detail-page .project-task-base .pw-priority{min-height:26px;padding:0 6px;border-radius:6px;background:transparent;font-size:9px;font-weight:800} .project-detail-page .project-task-base .pw-assignees span{width:27px;height:27px;border:1px solid #d5e2f0;background:#eaf4ff;color:#3d628d;font-size:9.5px} .project-detail-page .project-task-base .pw-task-table td em{padding:3px 6px;border-radius:5px;background:#f1f4f8;color:#5a6d84;font-size:8.5px} .project-detail-page .project-task-base .pw-task-footer{min-height:48px;align-items:center;padding:0 14px;border-top:1px solid #e4eaf1;background:#fff;color:#7b899b;font-size:9.5px} .project-detail-page .project-task-base .pw-task-footer b{padding:5px 8px;margin:0 6px;border-radius:6px;background:#eef2f7;color:#2e4058} /* Activity */ .project-detail-page .project-activity-card{padding:0!important} .project-detail-page .project-activity-card article{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:11px;min-height:70px;padding:11px 14px!important;border:0!important;border-bottom:1px solid #e9edf3!important} .project-detail-page .project-activity-card article:last-child{border-bottom:0!important} .project-detail-page .project-activity-marker{width:34px;height:34px;display:grid;place-items:center;border-radius:9px;background:#eef3ff;color:#4e67cd} .project-detail-page .project-activity-marker svg{width:14px;height:14px} .project-detail-page .project-activity-copy{min-width:0} .project-detail-page .project-activity-copy small{display:block;margin-bottom:3px;color:#8a97a8;font-size:8.5px;font-weight:750;text-transform:uppercase;letter-spacing:.04em} .project-detail-page .project-activity-copy p{margin:0;color:#42546b;font-size:10.5px;line-height:1.45} .project-detail-page .project-activity-copy p b{color:#21354f}.project-detail-page .project-activity-copy p span{color:#8a97a8} .project-detail-page .project-activity-card form{margin:0} .project-detail-page .project-activity-visibility{display:flex;align-items:center;gap:8px;color:#7a899c;font-size:9px} .project-detail-page .project-activity-visibility .pw-toggle{position:relative;right:auto;top:auto;width:40px;height:20px;margin:0} .project-detail-page .project-activity-visibility .pw-toggle:after{width:16px;height:16px;margin:2px} .project-detail-page .project-activity-visibility .pw-toggle.on:after{margin-left:22px} @media(max-width:1000px){.project-detail-page .project-task-base .pw-task-stats{grid-template-columns:repeat(3,1fr)}} @media(max-width:760px){.project-detail-page .project-subtab-head{align-items:flex-start;flex-direction:column}.project-detail-page .project-subtab-head-actions{width:100%;justify-content:flex-start}.project-detail-page .project-subtab-toolbar{align-items:stretch;flex-direction:column}.project-detail-page .project-subtab-search{width:100%}.project-detail-page .project-task-base .pw-task-stats{grid-template-columns:repeat(2,1fr)}.project-detail-page .project-task-base .pw-task-top{align-items:flex-start;flex-direction:column;gap:8px}.project-detail-page .project-task-base .pw-task-filters{grid-template-columns:1fr}.project-detail-page .project-activity-card article{grid-template-columns:38px minmax(0,1fr)}.project-detail-page .project-activity-card article form{grid-column:2}.project-detail-page .project-activity-visibility{justify-content:flex-start}} @media(max-width:480px){.project-detail-page .project-subtab-head-actions>*{flex:1}.project-detail-page .project-task-base .pw-task-stats{grid-template-columns:1fr}.project-detail-page .project-subtab-toolbar-left{width:100%}.project-detail-page .project-subtab-toolbar-left select{flex:1}} /* ============================================================ SECTION: proposal-form.css ============================================================ */ .proposal-page{max-width:1450px;margin:auto;color:#24334a}.proposal-heading{display:flex;align-items:center;justify-content:space-between;margin:0 0 14px}.proposal-heading h1{font-size:21px;margin:0}.proposal-heading a{color:#2868ce;font-size:14px}.proposal-card{background:#fff;border:1px solid #dce3ed;border-radius:8px;box-shadow:0 2px 5px #1e293b18}.proposal-columns{display:grid;grid-template-columns:1fr 1fr;gap:26px;padding:24px}.proposal-fields{display:flex;flex-direction:column;gap:13px}.proposal-fields+.proposal-fields{border-left:1px solid #e4e9f1;padding-left:26px}.proposal-pair{display:grid;grid-template-columns:1fr 1fr;gap:18px}.proposal-field{display:flex;flex-direction:column;gap:5px;min-width:0;font-weight:600;font-size:14px}.proposal-field em{font-style:normal;color:#ec4b55}.proposal-field input,.proposal-field select,.proposal-field textarea,.proposal-item-toolbar select,.proposal-item-table input,.proposal-item-table textarea,.proposal-totals input,.proposal-totals select{border:1px solid #cbd7e6;border-radius:5px;background:#fff;color:#24334a;padding:8px 10px;width:100%;font:inherit;outline:none}.proposal-field input,.proposal-field select{height:36px}.proposal-field textarea{resize:vertical}.proposal-field input:focus,.proposal-field select:focus,.proposal-field textarea:focus,.proposal-item-table input:focus,.proposal-item-table textarea:focus{border-color:#4c8bef;box-shadow:0 0 0 2px #dceaff}.proposal-field small{color:#657991;font-weight:400}.proposal-check{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:500}.proposal-check input{width:auto;margin:0}.proposal-content{padding:0 24px 24px}.proposal-items{padding:25px 24px;border-top:1px solid #e5eaf1}.proposal-item-toolbar{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:20px}.proposal-item-toolbar>div{display:flex;align-items:end;gap:5px}.proposal-item-toolbar>div label{position:absolute;width:1px;height:1px;overflow:hidden}.proposal-item-toolbar select{width:350px;height:36px}.proposal-item-toolbar button{height:36px;width:36px;background:#fff;border:1px solid #cbd7e6;border-radius:5px;font-size:22px;line-height:1}.proposal-quantity{display:flex;gap:9px;border:0;padding:0;margin:0;font-size:14px;align-items:center}.proposal-quantity legend{float:left;margin-right:7px}.proposal-quantity label{white-space:nowrap}.proposal-table-wrap{overflow-x:auto}.proposal-item-table{width:100%;min-width:800px;border-collapse:collapse;font-size:14px}.proposal-item-table th{text-align:left;background:#f7f9fc;border:1px solid #e2e8f1;padding:11px}.proposal-item-table td{vertical-align:top;border-bottom:1px solid #e2e8f1;padding:9px}.proposal-item-table th:nth-child(1){width:22%}.proposal-item-table th:nth-child(2){width:25%}.proposal-item-table th:nth-child(3),.proposal-item-table th:nth-child(4),.proposal-item-table th:nth-child(5){width:11%}.proposal-item-table textarea{min-height:78px;resize:vertical}.proposal-item-table .proposal-check{margin-top:7px}.item-amount{text-align:right;white-space:nowrap}.proposal-remove{border:0;background:#e02424;color:#fff;border-radius:5px;padding:5px 9px;font-size:20px;line-height:1}.proposal-totals{margin:35px 0 0 auto;max-width:640px}.proposal-totals>div{display:grid;grid-template-columns:1fr 250px 115px;gap:15px;align-items:center;border-bottom:1px solid #e3e8ef;padding:9px 0;text-align:right}.proposal-totals>div>div{display:flex}.proposal-totals>div>span,.proposal-totals>div>label{grid-column:1/3}.proposal-totals>div>strong{grid-column:3}.proposal-totals>div>div+strong,.proposal-totals>div>input+strong{grid-column:3}.proposal-totals>div>label:has(+div),.proposal-totals>div>label:has(+input){grid-column:1}.proposal-totals input{height:35px}.proposal-totals select{width:72px}.proposal-grand{font-size:18px;font-weight:700}.proposal-footer{border-top:1px solid #e3e8ef;text-align:right;padding:14px 24px}.proposal-footer button{border:0;border-radius:6px;background:#1d2b40;color:#fff;padding:10px 17px;font-weight:600}.proposal-errors{border:1px solid #f0b1b8;background:#fff1f2;color:#a51f32;padding:12px;margin-bottom:14px;border-radius:7px}.proposal-errors ul{margin:7px 0 0}@media(max-width:960px){.proposal-columns{grid-template-columns:1fr}.proposal-fields+.proposal-fields{border:0;padding:0}.proposal-totals>div{grid-template-columns:1fr 1fr auto}}@media(max-width:650px){.proposal-pair{grid-template-columns:1fr}.proposal-item-toolbar{align-items:start;flex-direction:column}.proposal-item-toolbar select{width:min(75vw,350px)}.proposal-quantity{flex-wrap:wrap}.proposal-totals>div{grid-template-columns:1fr 105px}.proposal-totals>div>span,.proposal-totals>div>label{grid-column:1}.proposal-totals>div>strong{grid-column:2}.proposal-totals>div>div{grid-column:1/3}} /* ===================================================================== Sales & Finance โ†’ Proposals โ€” Invoice / Contacts design system New Proposal + Edit Proposal ===================================================================== */ .proposal-contact-form-page{ max-width:1450px!important; margin:0 auto!important; padding:4px 0 28px!important; color:#263954!important; } .proposal-contact-heading{ display:flex!important; align-items:center!important; justify-content:space-between!important; gap:22px!important; margin:0 0 16px!important; padding:20px 22px!important; border:1px solid #dce4ef!important; border-radius:14px!important; background:linear-gradient(120deg,#fff 58%,#f5f8ff 100%)!important; box-shadow:0 6px 20px rgba(31,48,76,.06)!important; } .proposal-contact-heading-copy{min-width:0} .proposal-contact-eyebrow{ display:block; margin-bottom:5px; color:#5f6bd6; font-size:10px; font-weight:850; letter-spacing:.1em; text-transform:uppercase; } .proposal-contact-heading h1{ margin:0!important; font-size:24px!important; letter-spacing:-.025em; color:#18263b!important; } .proposal-contact-heading p{margin:5px 0 0;color:#738197;font-size:12px} .proposal-contact-heading-actions{display:flex;align-items:center;gap:9px;flex:none} .proposal-contact-heading-actions>a{ display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:0 12px; border:1px solid #ced8e5; border-radius:8px; background:#fff; color:#34506f; text-decoration:none; font-size:12px; font-weight:700; } .proposal-contact-heading-actions>a:hover{border-color:#a7bde0;color:#245fc1} .proposal-contact-heading-actions svg{width:14px;height:14px} .proposal-contact-number-badge{ display:inline-flex; align-items:center; min-height:34px; padding:0 10px; border-radius:8px; background:#eef3fb; color:#445d7c; font-size:11px; font-weight:800; } .proposal-contact-card{ padding:0!important; border:1px solid #dce3ec!important; border-radius:14px!important; background:#fff!important; box-shadow:0 7px 24px rgba(31,48,76,.06)!important; overflow:visible!important; } .proposal-contact-form-page .proposal-columns{ gap:26px!important; padding:22px 24px 10px!important; min-height:0!important; } .proposal-contact-form-page .proposal-fields{gap:13px!important} .proposal-contact-form-page .proposal-fields+.proposal-fields{ border-left:1px solid #edf1f6!important; padding-left:26px!important; } .proposal-contact-form-page .proposal-field{ gap:6px!important; font-size:12px!important; font-weight:750!important; color:#374b66!important; } .proposal-contact-form-page .proposal-field input, .proposal-contact-form-page .proposal-field select, .proposal-contact-form-page .proposal-field textarea, .proposal-contact-form-page .proposal-item-toolbar select, .proposal-contact-form-page .proposal-totals input, .proposal-contact-form-page .proposal-totals select{ border:1px solid #cfd9e5!important; border-radius:7px!important; background:#fff!important; color:#263954!important; box-shadow:none!important; font-size:12.5px!important; } .proposal-contact-form-page .proposal-field input, .proposal-contact-form-page .proposal-field select{height:38px!important;min-height:38px!important} .proposal-contact-form-page .proposal-field textarea{padding:9px 10px!important} .proposal-contact-form-page .proposal-field input:focus, .proposal-contact-form-page .proposal-field select:focus, .proposal-contact-form-page .proposal-field textarea:focus, .proposal-contact-form-page .proposal-item-table input:focus, .proposal-contact-form-page .proposal-item-table textarea:focus{ border-color:#86aaf0!important; box-shadow:0 0 0 3px rgba(59,130,246,.08)!important; outline:0!important; } .proposal-contact-form-page .proposal-field>span{font-size:12px!important;font-weight:750!important} .proposal-contact-form-page .proposal-field small{color:#8190a3!important;font-size:10.5px!important} .proposal-contact-form-page .proposal-check{ color:#52647b!important; font-size:11.5px!important; font-weight:600!important; } .proposal-contact-form-page #proposal-customer, .proposal-contact-form-page #proposal-project{ background-color:#fbfdff!important; } .proposal-contact-form-page #proposal-project:disabled{ background:#f5f7fa!important; color:#99a5b5!important; cursor:not-allowed!important; } .proposal-contact-form-page .proposal-content{ margin:16px 24px 0!important; padding:16px!important; border:1px solid #e1e7ef!important; border-radius:11px!important; background:#fbfcfe!important; } .proposal-contact-form-page .proposal-editor{ margin-top:7px; border:1px solid #d5deea!important; border-radius:8px!important; background:#fff!important; } .proposal-contact-form-page .proposal-editor-toolbar{ padding:8px 10px!important; border-bottom:1px solid #e4e9f0!important; background:linear-gradient(90deg,#fbfcff,#f7f9ff)!important; } .proposal-contact-form-page .proposal-editor-body{min-height:180px!important;background:#fff!important} .proposal-contact-form-page .proposal-document-notes-input{ display:grid!important; grid-template-columns:1fr 1fr!important; gap:14px!important; margin:16px 24px 0!important; padding:16px!important; border:1px solid #e1e7ef!important; border-radius:11px!important; background:#fbfcfe!important; } .proposal-contact-form-page .proposal-document-notes-input .proposal-field:last-child{grid-column:1/-1!important} /* Invoice-style proposal line items */ .proposal-contact-form-page .proposal-items{ margin:18px 24px 0!important; padding:0!important; border:1px solid #dfe6ef!important; border-radius:12px!important; background:#fff!important; overflow:hidden!important; } .proposal-contact-form-page .proposal-item-toolbar{ min-height:58px!important; margin:0!important; padding:10px 14px!important; border-bottom:1px solid #e3e9f1!important; background:linear-gradient(90deg,#fbfcff,#f7f9ff)!important; } .proposal-contact-form-page .proposal-item-toolbar select{width:min(390px,34vw)!important;height:36px!important} .proposal-contact-form-page .proposal-item-toolbar button{ width:36px!important; height:36px!important; border:1px solid #cbd6e4!important; border-radius:7px!important; background:#fff!important; color:#30445f!important; box-shadow:none!important; } .proposal-contact-form-page .proposal-quantity{font-size:11.5px!important;color:#56677e!important} .proposal-contact-form-page .proposal-line-item-table{ table-layout:fixed!important; min-width:1040px!important; border-collapse:collapse!important; font-size:12px!important; } .proposal-contact-form-page .proposal-line-item-table th{ height:39px!important; padding:0 10px!important; border:1px solid #e1e6ed!important; background:#f3f4f6!important; color:#18263b!important; font-size:10.5px!important; font-weight:750!important; vertical-align:middle!important; } .proposal-contact-form-page .proposal-line-item-table th:nth-child(1){width:21%!important} .proposal-contact-form-page .proposal-line-item-table th:nth-child(2){width:24%!important} .proposal-contact-form-page .proposal-line-item-table th:nth-child(3){width:10%!important} .proposal-contact-form-page .proposal-line-item-table th:nth-child(4){width:13%!important} .proposal-contact-form-page .proposal-line-item-table th:nth-child(5){width:13%!important} .proposal-contact-form-page .proposal-line-item-table th:nth-child(6){width:13%!important;text-align:right!important} .proposal-contact-form-page .proposal-line-item-table th:nth-child(7){width:6%!important;text-align:center!important} .proposal-contact-form-page .proposal-line-item-table td{ height:132px!important; padding:14px 10px!important; border:1px solid #e6ebf1!important; background:#f9fafc!important; vertical-align:top!important; } .proposal-contact-form-page .proposal-line-item-table tbody tr:hover td{background:#f9fafc!important} .proposal-contact-form-page .proposal-line-item-table textarea{ display:block!important; width:100%!important; height:82px!important; min-height:82px!important; max-height:82px!important; margin:0!important; padding:9px 10px!important; border:1px solid #cfd8e4!important; border-radius:6px!important; background:#fff!important; resize:none!important; box-sizing:border-box!important; font-size:12px!important; line-height:1.4!important; } .proposal-contact-form-page .proposal-line-item-table input:not([type=checkbox]){ display:block!important; width:100%!important; height:36px!important; min-height:36px!important; margin:0!important; padding:0 9px!important; border:1px solid #cfd8e4!important; border-radius:6px!important; background:#fff!important; box-sizing:border-box!important; font-size:12px!important; } .proposal-contact-form-page .proposal-line-item-table .item-amount{ padding-top:27px!important; text-align:right!important; color:#263954!important; font-weight:750!important; } .proposal-contact-form-page .proposal-line-item-table .proposal-check{ margin-top:7px!important; font-size:10.5px!important; } .proposal-contact-form-page .proposal-remove{ display:grid!important; place-items:center!important; width:32px!important; height:32px!important; margin:0 auto!important; padding:0!important; border:1px solid #d4dfec!important; border-radius:7px!important; background:#fff!important; color:#607796!important; font-size:17px!important; cursor:pointer!important; } .proposal-contact-form-page .proposal-remove:hover{ border-color:#efc0c5!important; background:#fff7f7!important; color:#b33a45!important; } .proposal-contact-form-page .proposal-totals{ width:min(100%,680px)!important; max-width:680px!important; margin:24px 18px 22px auto!important; padding:9px 16px!important; border:1px solid #e3e9f1!important; border-radius:11px!important; background:#f8fafc!important; } .proposal-contact-form-page .proposal-totals>div{ min-height:43px!important; padding:8px 2px!important; border-bottom:1px solid #e8edf4!important; font-size:12px!important; } .proposal-contact-form-page .proposal-totals>div:last-child{border-bottom:0!important} .proposal-contact-form-page .proposal-grand{font-size:15px!important;color:#17233a!important} .proposal-contact-savebar{ position:sticky!important; bottom:0!important; z-index:5!important; display:flex!important; align-items:center!important; justify-content:flex-end!important; gap:10px!important; margin:0!important; padding:14px 24px!important; border-top:1px solid #e1e7ef!important; background:rgba(255,255,255,.96)!important; backdrop-filter:blur(8px); box-shadow:0 -8px 24px rgba(30,48,76,.05)!important; } .proposal-contact-savebar a{ display:inline-flex; align-items:center; min-height:36px; padding:0 12px; border:1px solid #cbd5e1; border-radius:7px; background:#fff; color:#52647b; text-decoration:none; font-size:12px; font-weight:700; } .proposal-contact-savebar button{ min-height:36px!important; padding:0 15px!important; border-radius:7px!important; background:#3157df!important; color:#fff!important; font-size:12px!important; box-shadow:0 5px 12px rgba(49,87,223,.16)!important; } @media(max-width:960px){ .proposal-contact-heading{align-items:flex-start!important;flex-direction:column!important} .proposal-contact-heading-actions{width:100%;justify-content:space-between} .proposal-contact-form-page .proposal-columns{grid-template-columns:1fr!important} .proposal-contact-form-page .proposal-fields+.proposal-fields{border:0!important;padding-left:0!important} } @media(max-width:760px){ .proposal-contact-form-page .proposal-columns{padding:16px!important} .proposal-contact-form-page .proposal-content, .proposal-contact-form-page .proposal-document-notes-input, .proposal-contact-form-page .proposal-items{margin-left:16px!important;margin-right:16px!important} .proposal-contact-form-page .proposal-document-notes-input{grid-template-columns:1fr!important} .proposal-contact-form-page .proposal-document-notes-input .proposal-field:last-child{grid-column:auto!important} .proposal-contact-form-page .proposal-item-toolbar{align-items:flex-start!important} .proposal-contact-form-page .proposal-item-toolbar select{width:min(75vw,390px)!important} } /* ============================================================ SECTION: proposal-workspace.css ============================================================ */ .proposal-workspace{color:#26354b}.proposal-workspace-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.proposal-new{display:inline-flex;align-items:center;background:#1d2b40;border-radius:6px;padding:9px 12px;color:#fff;font-size:14px;font-weight:700}.proposal-workspace-filter{display:flex;align-items:center;gap:8px;font-size:13px}.proposal-workspace-filter select{border:1px solid #cfd9e7;border-radius:6px;background:#fff;padding:7px;color:#26354b}.proposal-workspace-grid{display:grid;grid-template-columns:minmax(390px,39%) minmax(0,1fr);gap:12px;align-items:start}.proposal-list-card,.proposal-preview{background:#fff;border:1px solid #dce3ed;border-radius:8px;box-shadow:0 2px 5px #1e293b18;overflow:hidden}.proposal-list-tools{display:flex;align-items:center;gap:5px;padding:16px}.proposal-list-tools select,.proposal-list-tools>a,.proposal-list-tools input,.proposal-list-tools button{height:31px;border:1px solid #ccd6e4;background:#fff;border-radius:5px;padding:0 8px;color:#26354b;font-size:13px}.proposal-list-tools>a{display:inline-flex;align-items:center}.proposal-list-tools form:last-child{display:flex;margin-left:auto}.proposal-list-tools input{width:145px;border-radius:5px 0 0 5px}.proposal-list-tools button{border-radius:0 5px 5px 0;border-left:0}.proposal-list-scroll{overflow-x:auto}.proposal-list-card table{width:100%;border-collapse:collapse;font-size:13px;min-width:490px}.proposal-list-card th{background:#f8fafd;font-weight:600;text-align:left;padding:12px 8px;border-top:1px solid #e5eaf1;border-bottom:1px solid #e5eaf1;white-space:nowrap}.proposal-list-card td{border-bottom:1px solid #e8edf3;padding:13px 8px}.proposal-list-card td:nth-child(2){min-width:110px}.proposal-list-card td a{color:#233c67}.proposal-list-card td a:hover,.proposal-recipient a:hover{text-decoration:underline}.proposal-list-card tr.active{background:#f2f7ff}.proposal-list-card tr.active td:first-child{border-left:3px solid #3477ea}.proposal-pill{display:inline-block;border:1px solid #cfe1f8;border-radius:5px;background:#f4f9ff;color:#2870cf;padding:4px 7px;font-size:12px;font-weight:600}.proposal-list-footer{display:flex;justify-content:space-between;gap:8px;align-items:center;color:#68788e;font-size:13px;padding:15px}.proposal-list-footer nav svg{width:15px}.proposal-list-footer nav p{display:none}.proposal-list-empty{padding:25px!important}.proposal-preview-tabs{display:flex;align-items:center;overflow-x:auto;gap:1px;background:#f3f5f8;padding:4px 9px;min-height:49px;white-space:nowrap}.proposal-preview-tabs a{padding:12px 10px;color:#31425a;font-size:13px;border-bottom:2px solid transparent}.proposal-preview-tabs a.active{border-bottom-color:#263b5f;font-weight:700;background:#fff}.proposal-preview-actions{display:flex;justify-content:space-between;align-items:center;padding:13px 17px;border-bottom:1px solid #e6ebf2}.proposal-preview-actions>div{display:flex;gap:5px}.proposal-preview-actions button,.proposal-preview-actions a{display:inline-flex;align-items:center;gap:5px;border:1px solid #cdd8e7;border-radius:6px;background:#fff;color:#334660;padding:7px 9px;font-size:13px}.proposal-preview-actions svg{width:15px;height:15px}.proposal-paper{padding:25px 22px 40px;font-size:14px;color:#26354b}.proposal-letterhead{display:flex;justify-content:space-between;gap:20px;min-height:180px}.proposal-letterhead>div:first-child{display:flex;flex-direction:column;align-items:flex-start}.proposal-letterhead img{max-width:158px;max-height:39px;object-fit:contain;margin-bottom:17px}.proposal-letterhead strong{color:#235fca;font-size:17px}.proposal-letterhead h1{font-size:18px;color:#245fc4;margin:4px 0 10px}.proposal-letterhead address{font-style:normal;line-height:1.45;color:#5d6c81}.proposal-recipient{text-align:right;display:flex;align-items:flex-end;flex-direction:column}.proposal-recipient small{color:#65768c}.proposal-recipient strong a,.proposal-recipient>a{color:#2467d6}.proposal-recipient address{font-style:normal;line-height:1.45;color:#63748d;margin:4px 0}.proposal-meta{display:flex;flex-wrap:wrap;gap:25px;border-top:1px solid #e8edf3;border-bottom:1px solid #e8edf3;padding:13px 0;margin:6px 0 24px}.proposal-meta div{display:flex;flex-direction:column;gap:3px}.proposal-meta span{color:#6f7f93;font-size:12px}.proposal-body-copy{white-space:normal;line-height:1.65;overflow-wrap:anywhere;margin-bottom:20px}.proposal-preview-items{margin:30px 0}.proposal-preview-items h2{font-size:20px;color:#229058;margin:0 0 12px}.proposal-preview-table-wrap{overflow-x:auto}.proposal-preview-items table{width:100%;border-collapse:collapse;min-width:540px;font-size:13px}.proposal-preview-items th,.proposal-preview-items td{padding:10px 8px;border:1px solid #dfe6ee;text-align:left;vertical-align:top}.proposal-preview-items td small{display:block;color:#8a98aa;margin-top:3px}.proposal-preview-totals{width:min(100%,360px);margin:35px 0 0 auto;border-top:1px solid #e3e8ef}.proposal-preview-totals div{display:flex;justify-content:space-between;gap:15px;padding:8px 0}.proposal-preview-totals .proposal-total{border-top:1px solid #d8e0ea;font-size:19px}.proposal-tab-panel{padding:28px;min-height:370px}.proposal-tab-panel h2{font-size:20px;margin:0 0 12px}.proposal-tab-panel p{color:#66768b}.proposal-tab-panel a{color:#2868ce}.proposal-related-row{padding:10px 0;border-bottom:1px solid #e7edf3;display:flex;justify-content:space-between}.proposal-preview-empty{padding:40px;color:#68788e;text-align:center}@media(max-width:1150px){.proposal-workspace-grid{grid-template-columns:1fr}.proposal-list-card table{min-width:0}.proposal-preview{min-height:400px}}@media(max-width:660px){.proposal-list-card table{min-width:490px}.proposal-letterhead{flex-direction:column}.proposal-recipient{align-items:flex-start;text-align:left}.proposal-preview-actions span:not(.proposal-pill){display:none}}@media print{.customer-topbar,.customer-sidebar,.proposal-workspace-top,.proposal-list-card,.proposal-preview-tabs,.proposal-preview-actions{display:none!important}.customer-content{padding:0!important;background:#fff!important}.proposal-workspace-grid{display:block}.proposal-preview{border:0;box-shadow:none}.proposal-paper{padding:0}.proposal-meta{margin-top:20px}} /* Proposal collaboration tabs */ .proposal-preview-tabs svg{width:16px;height:16px}.proposal-preview-tabs button{border:0;background:transparent;color:#42526a;padding:10px;cursor:pointer}.proposal-preview-actions{min-height:74px;gap:8px;flex-wrap:wrap}.proposal-preview-actions>div{align-items:center;flex-wrap:wrap}.proposal-menu{position:relative;font-size:13px}.proposal-menu summary{cursor:pointer;list-style:none;border:1px solid #cdd8e7;padding:8px 10px;border-radius:6px}.proposal-menu>div{position:absolute;right:0;top:38px;background:white;box-shadow:0 6px 20px #17243b25;border:1px solid #dce3ed;padding:12px;min-width:200px;z-index:20;border-radius:6px}.proposal-menu form{margin-bottom:8px}.proposal-menu form:last-child{margin:0}.proposal-menu label{display:grid;gap:6px}.proposal-menu select{padding:6px;border:1px solid #ccd6e4;border-radius:5px;margin-bottom:6px}.proposal-convert{background:#20bf61!important;color:white!important;border-color:#20bf61!important}.proposal-danger{color:#c73c45!important}.proposal-tab-panel{min-height:200px;padding:20px 24px 32px}.proposal-panel-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;border-bottom:1px solid #e7eaf0;padding-bottom:20px;margin-bottom:20px}.proposal-dark,.proposal-outline,.proposal-table-tools button,.proposal-table-pagination button{font:inherit;font-size:13px;border:1px solid #ccd6e4;border-radius:6px;padding:8px 10px;background:white;color:#283b56;cursor:pointer}.proposal-dark{background:#202c3d;color:white;border-color:#202c3d;font-weight:600}.proposal-entry-form textarea,.proposal-dialog-form input,.proposal-dialog-form select,.proposal-dialog-form textarea{font:inherit;width:100%;border:1px solid #ccd6e4;border-radius:5px;background:#fcfdff;color:#26354b;padding:9px 10px;box-sizing:border-box}.proposal-entry-form textarea{resize:vertical;font-size:14px}.proposal-form-footer{display:flex;justify-content:flex-end;margin-top:20px}.proposal-entry-list{margin-top:32px;border-top:1px solid #e7eaf0}.proposal-entry{padding:18px 0;border-bottom:1px solid #e7eaf0}.proposal-entry header{display:flex;align-items:center;gap:12px;font-size:13px}.proposal-entry time{color:#7a8799}.proposal-entry header form{margin-left:auto}.proposal-entry p{white-space:normal;overflow-wrap:anywhere;line-height:1.6;color:#34455d;margin-top:12px}.proposal-text-button{border:0;background:none;color:#3167a7;font-size:12px;cursor:pointer;padding:5px}.proposal-help{font-size:12px;color:#79869a!important;margin-top:18px;line-height:1.5}.proposal-empty{font-size:13px;padding:12px 0;color:#64748b}.proposal-table-tools{display:flex;gap:5px;margin-bottom:12px;align-items:center}.proposal-table-tools select,.proposal-table-tools input{height:31px;border:1px solid #ccd6e4;border-radius:5px;color:#33465e;padding:4px 8px;background:white;font-size:12px;min-width:0}.proposal-table-tools button{height:31px;padding:4px 9px}.proposal-table-tools input{margin-left:auto;width:190px}.proposal-table-scroll{overflow:auto;margin:0 -24px}.proposal-data-table{width:100%;border-collapse:collapse;font-size:13px}.proposal-data-table th{font-weight:500;color:#738095;background:#f7f8fa;border:1px solid #edf0f4;text-align:left;padding:12px 10px;white-space:nowrap}.proposal-data-table td{padding:12px 10px;border-bottom:1px solid #edf0f4;vertical-align:top;max-width:250px;overflow-wrap:anywhere}.proposal-data-table small{display:block;margin-top:4px}.proposal-due{color:#c07312}.proposal-row-actions{display:flex;align-items:center;gap:8px}.proposal-table-pagination{display:flex;gap:6px;align-items:center;margin-top:15px;font-size:12px;color:#77849a}.proposal-table-pagination span{margin-right:auto}.proposal-table-pagination button:disabled{opacity:.45;cursor:default}.proposal-template{display:flex;gap:18px;justify-content:space-between;border-bottom:1px solid #edf0f4;padding:16px 0}.proposal-template>details{flex:1;min-width:0}.proposal-template summary{cursor:pointer;color:#315e9b;font-weight:600}.proposal-rich-content{padding-top:20px}.proposal-dialog{width:min(650px,calc(100vw - 40px));max-height:90vh;overflow:auto;border:1px solid #d8dee7;border-radius:14px;background:#fff;color:#273951;padding:0;box-shadow:0 20px 70px #11182733}.proposal-dialog::backdrop{background:#29354599}.proposal-template-dialog{width:min(1500px,calc(100vw - 60px))}.proposal-dialog header{display:flex;align-items:center;justify-content:space-between;padding:20px;border-bottom:1px solid #e0e5ec}.proposal-dialog h2{font-size:18px;font-weight:600;margin:0}.proposal-dialog header button{background:none;border:0;font-size:25px;cursor:pointer;color:#94a3b8}.proposal-dialog-fields{padding:24px 20px;display:grid;gap:18px}.proposal-dialog-form label{display:grid;gap:7px;font-size:14px}.proposal-dialog-form em{color:#e34c4c;font-style:normal}.proposal-dialog footer{padding:20px;display:flex;justify-content:flex-end;gap:9px}.proposal-field-pair{display:grid;grid-template-columns:1fr 1fr;gap:15px}.proposal-editor{border:1px solid #ccd6e4;border-radius:5px;overflow:hidden;background:#fcfdff}.proposal-editor-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:5px;padding:12px;background:white;border-bottom:1px solid #ccd6e4}.proposal-editor-toolbar button,.proposal-editor-toolbar select{width:auto!important;border:0!important;background:#f7f8fa;border-radius:3px;font-size:13px;color:#26354b;padding:7px;cursor:pointer}.proposal-editor-toolbar button:hover{background:#e7eef8}.proposal-editor-toolbar [data-command=bold]{font-weight:bold}.proposal-editor-toolbar [data-command=italic]{font-style:italic}.proposal-editor-body{min-height:180px;padding:15px;outline:none;line-height:1.6;overflow-wrap:anywhere}.proposal-editor-body:focus{box-shadow:inset 0 0 0 2px #dbeafe}.proposal-editor table,.proposal-rich-content table,.proposal-body-copy table{border-collapse:collapse;width:100%}.proposal-editor td,.proposal-editor th,.proposal-rich-content td,.proposal-rich-content th,.proposal-body-copy td,.proposal-body-copy th{border:1px solid #cbd5e1;padding:8px}.proposal-editor ul,.proposal-rich-content ul,.proposal-body-copy ul{list-style:disc;padding-left:24px}.proposal-editor ol,.proposal-rich-content ol,.proposal-body-copy ol{list-style:decimal;padding-left:24px}.proposal-editor a,.proposal-rich-content a,.proposal-body-copy a{color:#2563eb;text-decoration:underline}.proposal-focus .proposal-list-card{display:none}.proposal-focus .proposal-workspace-grid{grid-template-columns:minmax(0,1fr)}.proposal-focus .proposal-preview{max-width:1200px;width:100%;margin:auto}.proposal-reminder-bell{position:relative}.proposal-reminder-bell summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:4px}.proposal-reminder-bell summary b{background:#2674dc;color:white;border-radius:20px;padding:1px 5px;font-size:10px}.proposal-reminder-bell>div{position:absolute;right:0;top:30px;width:300px;padding:16px;border:1px solid #d7e0eb;background:white;border-radius:8px;box-shadow:0 8px 24px #24334b25;z-index:60}.proposal-reminder-bell a{display:block!important;padding:10px 0;border-bottom:1px solid #edf0f4;font-size:13px;white-space:normal}.proposal-reminder-bell small{display:block;color:#7b899d;margin-top:4px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}[hidden]{display:none!important}@media(max-width:700px){.proposal-field-pair{grid-template-columns:1fr}.proposal-table-tools{flex-wrap:wrap}.proposal-template{flex-direction:column}.proposal-tab-panel{padding:18px}.proposal-table-scroll{margin:0 -18px}.proposal-preview-actions{padding:12px}.proposal-dialog{width:calc(100vw - 24px)}.proposal-table-tools input{width:140px}}@media print{dialog,.proposal-tab-panel,.proposal-reminder-bell{display:none!important}.proposal-preview{width:100%!important;max-width:none!important}.proposal-paper{padding:0!important}} .proposal-dialog-form label{display:block}.proposal-dialog-form label>input,.proposal-dialog-form label>select,.proposal-dialog-form label>textarea{display:block;margin-top:7px}.proposal-template-dialog{margin:30px auto auto}.proposal-editor-body h2{font-size:22px}.proposal-editor-body h3{font-size:18px}.proposal-editor-body blockquote{border-left:3px solid #d2dce9;padding-left:14px;color:#60728b} .proposal-editor-toolbar input[type=color]{width:30px!important;height:30px;border:0;padding:2px;cursor:pointer}.proposal-editor-body img,.proposal-rich-content img,.proposal-body-copy img{max-width:100%;height:auto}.proposal-data-table th[aria-sort=ascending]::after{content:' โ†‘'}.proposal-data-table th[aria-sort=descending]::after{content:' โ†“'} .proposal-list-card td:first-child,.proposal-list-card td:nth-child(4){white-space:nowrap}.proposal-preview-tabs{scrollbar-width:thin}.proposal-preview-tabs a{padding-left:8px;padding-right:8px}@media(min-width:1151px) and (max-width:1350px){.proposal-workspace-grid{grid-template-columns:1fr}.proposal-list-card table{min-width:0}} /* Invoice-style Estimate / Proposal document */ .sales-simple-paper{ background:#fff;color:#151515;border:1px solid #e1e5ea;border-radius:6px; box-shadow:0 8px 26px rgba(15,23,42,.06);padding:40px 38px;position:relative; } .sales-simple-top{display:flex;align-items:flex-start;justify-content:space-between;gap:30px;padding-bottom:42px} .sales-simple-brand img{display:block;max-width:205px;max-height:72px;width:auto;height:auto;object-fit:contain} .sales-simple-number{display:flex;flex-direction:column;align-items:flex-end;text-align:right;gap:5px;min-width:200px} .sales-simple-number>strong{display:inline-block;background:#050505;color:#fff;padding:6px 10px;font-size:16px;line-height:1.2;font-weight:800;letter-spacing:.02em} .sales-simple-number>span{font-size:12px;font-weight:600;color:#303030} .sales-simple-subject{margin:-10px 0 34px;border-bottom:1px solid #e7e7e7;padding-bottom:14px} .sales-simple-subject>span{display:block;color:#777;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em} .sales-simple-subject h1{margin:5px 0 0;font-size:20px;color:#111} .sales-simple-parties{display:grid;grid-template-columns:1fr 1fr;gap:70px;margin:0 14px 42px} .sales-simple-parties section{min-width:0}.sales-simple-parties h3{font-size:13px;margin:0 0 8px;padding-bottom:5px;border-bottom:1px solid #e5e5e5;color:#111} .sales-simple-parties strong{display:block;font-size:14px;color:#111;line-height:1.45} .sales-simple-parties address{font-style:normal;white-space:pre-line;color:#333;font-size:12px;line-height:1.5;margin-top:4px} .sales-simple-parties a{color:#111;text-decoration:none} .sales-simple-reference{margin-top:7px;color:#444;font-size:11px} .sales-simple-body{margin:0 0 24px;color:#333;font-size:12px;line-height:1.65} .sales-simple-body h1,.sales-simple-body h2,.sales-simple-body h3,.sales-simple-body h4{color:#111} .sales-simple-after-items{margin-top:26px} .sales-simple-table-wrap{overflow-x:auto} .sales-simple-table{width:100%;border-collapse:collapse;min-width:560px} .sales-simple-table th{ background:#f1f3f5!important;color:#000!important;font-weight:800!important; border-bottom:2px solid #cfd6df!important;padding:11px 13px!important;text-align:right!important;font-size:12px!important } .sales-simple-table th:first-child{text-align:left!important} .sales-simple-table td{background:#f8f8f8;color:#1d1d1d;padding:11px 13px;border-bottom:1px solid #fff;text-align:right;vertical-align:top;font-size:12px} .sales-simple-table td:first-child{text-align:left}.sales-simple-table td strong{display:block}.sales-simple-table td small{display:block;margin-top:3px;color:#777;font-size:10px;line-height:1.4} .sales-simple-totals{width:min(350px,100%);margin:0 0 0 auto} .sales-simple-totals>div{display:flex;justify-content:space-between;gap:24px;padding:8px 13px;font-size:12px;color:#222} .sales-simple-totals>div+div{border-top:1px solid #ededed} .sales-simple-totals .sales-simple-total{background:#050505;color:#fff;border-top:0;font-weight:800} .sales-simple-totals .sales-simple-total span,.sales-simple-totals .sales-simple-total strong{color:#fff} .sales-simple-copy{margin-top:30px;padding-top:18px;border-top:1px solid #ececec} .sales-simple-copy section+section{margin-top:16px}.sales-simple-copy h4{margin:0 0 5px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#444} .sales-simple-copy p{margin:0;white-space:pre-wrap;font-size:12px;line-height:1.55;color:#333} .sales-simple-signature{width:230px;margin:68px 0 8px auto;text-align:center;color:#222} .sales-signature-space{height:30px}.sales-signature-line{border-top:1px solid #555;margin-bottom:7px} .sales-simple-signature strong{display:block;font-size:12px}.sales-simple-signature small{display:block;margin-top:4px;color:#6b7280;font-size:10px} .sales-admin-note{margin-top:22px;border:1px dashed #d7c58e;background:#fffaf0;padding:12px 14px;border-radius:6px;color:#6f5a22} .sales-admin-note strong{font-size:11px}.sales-admin-note p{margin:5px 0 0;white-space:pre-wrap;font-size:11px;line-height:1.5} .proposal-document-notes-input{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:18px 0} .proposal-document-notes-input .proposal-field:last-child{grid-column:1/-1} @media(max-width:760px){ .sales-simple-paper{padding:28px 18px}.sales-simple-top{padding-bottom:30px;flex-direction:column} .sales-simple-number{align-items:flex-start;text-align:left}.sales-simple-parties{grid-template-columns:1fr;gap:25px;margin:0 0 30px} .sales-simple-brand img{max-width:175px}.proposal-document-notes-input{grid-template-columns:1fr} } @media print{ .sales-simple-paper{border:0;box-shadow:none;padding:20px 22px}.sales-simple-copy,.sales-simple-signature{break-inside:avoid} .sales-admin-note{display:none!important} } /* ===================================================================== Sales & Finance โ†’ Proposals โ€” Invoice / Contacts design system Main list + Proposal workspace + every proposal tab/dialog ===================================================================== */ /* Main Proposals page */ .proposal-contacts-page{max-width:1600px;margin:0 auto;color:#263954} .proposal-contacts-heading{ display:flex;align-items:center;justify-content:space-between;gap:22px; margin:0 0 14px;padding:18px 20px;border:1px solid #dce4ef;border-radius:14px; background:linear-gradient(120deg,#fff 62%,#f5f8ff 100%); box-shadow:0 6px 20px rgba(31,48,76,.055) } .proposal-contacts-eyebrow{ display:block;margin-bottom:4px;color:#5f6bd6;font-size:10px;font-weight:850; letter-spacing:.1em;text-transform:uppercase } .proposal-contacts-heading h1{margin:0;font-size:24px;letter-spacing:-.025em;color:#18263b} .proposal-contacts-heading p{margin:5px 0 0;color:#76859a;font-size:12px} .proposal-contacts-heading-actions{display:flex;align-items:center;gap:8px} .proposal-contacts-heading-actions a{ display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px; border:1px solid #ced8e5;border-radius:8px;text-decoration:none;font-size:12px;font-weight:750 } .proposal-contacts-heading-actions svg{width:14px;height:14px} .proposal-secondary-action{background:#fff;color:#34506f} .proposal-primary-action{background:#3157df;color:#fff!important;border-color:#3157df!important;box-shadow:0 6px 14px rgba(49,87,223,.18)} .proposal-contact-summary{ display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:8px;margin-bottom:12px } .proposal-contact-summary a{ display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:46px; padding:0 13px;border:1px solid #dce4ed;border-radius:10px;background:#fff; color:#52647c;text-decoration:none;font-size:11px } .proposal-contact-summary a strong{font-size:14px;color:#21344f} .proposal-contact-summary a.active{border-color:#9bb5f0;background:#f2f6ff;color:#285fc1} .proposal-contact-summary a.active strong{color:#285fc1} .proposal-contact-filters{ display:none;align-items:end;gap:10px;padding:12px 14px;margin-bottom:10px; border:1px solid #dce4ed;border-radius:10px;background:#fff } .proposal-contact-filters.open{display:flex} .proposal-contact-filters label{display:grid;gap:5px;font-size:11px;font-weight:700;color:#53647a} .proposal-contact-filters input,.proposal-contact-filters select{ height:32px;border:1px solid #cfd9e5;border-radius:6px;padding:0 9px;background:#fff;color:#30435c } .proposal-contact-filters button,.proposal-contact-filters a{ height:32px;display:inline-flex;align-items:center;padding:0 11px;border-radius:6px;font-size:11px;text-decoration:none } .proposal-contact-filters button{border:1px solid #3157df;background:#3157df;color:#fff} .proposal-contact-filters a{border:1px solid #cfd9e5;color:#51647d;background:#fff} .proposal-list-contact-card{ background:#fff;border:1px solid #dce3ec;border-radius:12px; box-shadow:0 5px 18px rgba(31,48,76,.055);overflow:hidden } .proposal-contact-toolbar{ min-height:62px;display:flex;align-items:center;justify-content:space-between;gap:14px; padding:10px 14px;background:linear-gradient(90deg,#fbfcff,#f7f9ff); border-bottom:1px solid #e3e9f1 } .proposal-contact-toolbar-left,.proposal-contact-search{display:flex;align-items:center} .proposal-contact-toolbar-left form{display:flex} .proposal-contact-toolbar select, .proposal-contact-toolbar-left>a, .proposal-contact-toolbar-left>button, .proposal-contact-search button, .proposal-contact-search input{ height:32px;box-sizing:border-box;border:1px solid #cbd6e4;background:#fff; color:#34465e;font:inherit;font-size:11px } .proposal-contact-toolbar select{min-width:70px;border-radius:6px 0 0 6px;padding:0 8px} .proposal-contact-toolbar-left>a,.proposal-contact-toolbar-left>button{ display:inline-flex;align-items:center;gap:5px;padding:0 9px;border-left:0;text-decoration:none;cursor:pointer } .proposal-contact-toolbar-left svg,.proposal-contact-search svg{width:13px;height:13px} .proposal-contact-refresh{border-radius:0 6px 6px 0!important} .proposal-contact-search button{width:38px;border-radius:6px 0 0 6px} .proposal-contact-search input{width:210px;border-left:0;border-radius:0 6px 6px 0;padding:0 10px;outline:0} .proposal-contact-table-wrap{overflow-x:auto} .proposal-contact-table{width:100%;min-width:1160px;border-collapse:collapse;font-size:12px} .proposal-contact-table th{ height:40px;padding:0 11px;background:#f8fafc;color:#21314c;text-align:left; font-size:10.5px;font-weight:750;border-bottom:1px solid #e4eaf1 } .proposal-contact-table th+th{border-left:1px solid #e7ebf1} .proposal-contact-table td{ height:64px;padding:10px 11px;border-bottom:1px solid #e8edf3; color:#33465f;vertical-align:middle } .proposal-contact-table tbody tr:hover td{background:#fbfcff} .proposal-contact-identity{display:flex;align-items:center;gap:9px} .proposal-contact-avatar{ width:32px;height:32px;flex:none;display:grid;place-items:center;border-radius:9px; background:#eef3ff;color:#4965d7 } .proposal-contact-avatar svg{width:15px;height:15px} .proposal-contact-number{display:block;color:#1f4f95!important;font-weight:800;text-decoration:none} .proposal-contact-identity small{display:block;margin-top:2px;color:#8a98aa;font-size:9px} .proposal-contact-inline-actions{display:flex;align-items:center;gap:5px;margin-top:3px;font-size:9.5px} .proposal-contact-inline-actions a,.proposal-contact-inline-actions button{ border:0!important;background:transparent!important;padding:0!important;color:#55729a!important; font:inherit!important;font-weight:650!important;text-decoration:none;cursor:pointer } .proposal-contact-inline-actions form{display:inline;margin:0} .proposal-contact-inline-actions span{color:#b5bfcc} .proposal-contact-inline-actions a:hover,.proposal-contact-inline-actions button:hover{ color:#1d4ed8!important;text-decoration:underline!important } .proposal-contact-inline-actions .proposal-contact-inline-delete{ appearance:none!important;-webkit-appearance:none!important;width:auto!important;height:auto!important; min-width:0!important;min-height:0!important;margin:0!important;border:0!important;border-radius:0!important; background:transparent!important;box-shadow:none!important;color:#55729a!important } .proposal-contact-status{ display:inline-flex;align-items:center;min-height:23px;padding:0 8px;border:1px solid #d7e0eb; border-radius:999px;background:#f7f9fc;color:#5a6b80;font-size:9.5px;font-weight:750 } .proposal-contact-status.status-accepted{background:#eefaf4;border-color:#d5f0e1;color:#198754} .proposal-contact-status.status-declined{background:#fff2f2;border-color:#f3d0d0;color:#b63b45} .proposal-contact-status.status-sent{background:#eef5ff;border-color:#d7e5fb;color:#2e67b1} .proposal-contact-status.status-open{background:#fff8ec;border-color:#f1dfba;color:#a56d10} .proposal-contact-status.status-draft{background:#f4f6f9;color:#66778b} .proposal-contact-status.status-revised{background:#f6f2ff;border-color:#ded3f6;color:#7054b4} .proposal-contact-options{display:flex;align-items:center;justify-content:flex-end;gap:5px} .proposal-contact-options form{display:inline;margin:0} .proposal-contact-options a,.proposal-contact-options button{ width:30px;height:30px;display:grid;place-items:center;border:1px solid #d4dfec; border-radius:7px;background:#fff;color:#55729a;cursor:pointer } .proposal-contact-options svg{width:13px;height:13px} .proposal-contact-options a:hover,.proposal-contact-options button:hover{ background:#f5f8fd;color:#285fc1;border-color:#b9c9df } .proposal-options-heading{text-align:right!important} .proposal-contact-empty{text-align:center!important;padding:36px!important;color:#77869b!important} .proposal-contact-empty a{color:#285fc1} .proposal-contact-footer{ min-height:58px;display:flex;align-items:center;justify-content:space-between;gap:12px; padding:0 14px;color:#718096;font-size:11px } .proposal-contact-footer nav{display:flex;align-items:center;gap:4px} .proposal-contact-footer nav a,.proposal-contact-footer nav span{ min-width:30px;height:30px;display:grid;place-items:center;border-radius:7px; border:1px solid #dce4ed;background:#fff;color:#66778d;text-decoration:none } .proposal-contact-footer nav span[aria-current=page] span{background:#eaf0f8;color:#25405f} /* Proposal workspace header */ .proposal-workspace{max-width:1640px!important;margin:0 auto!important;color:#263954!important} .proposal-contact-workspace-heading{ display:flex!important;align-items:center!important;justify-content:space-between!important;gap:22px!important; margin:0 0 14px!important;padding:18px 20px!important;border:1px solid #dce4ef!important; border-radius:14px!important;background:linear-gradient(120deg,#fff 62%,#f5f8ff 100%)!important; box-shadow:0 6px 20px rgba(31,48,76,.055)!important } .proposal-workspace-heading-copy h1{margin:0;font-size:23px;color:#18263b;letter-spacing:-.02em} .proposal-workspace-heading-copy p{margin:5px 0 0;color:#76859a;font-size:12px} .proposal-workspace-heading-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .proposal-workspace-filter select{ height:36px!important;border:1px solid #ced8e5!important;border-radius:8px!important; background:#fff!important;color:#34506f!important;padding:0 10px!important;font-size:11.5px!important } .proposal-workspace-list-link,.proposal-new{ display:inline-flex!important;align-items:center!important;gap:6px!important;min-height:36px!important; padding:0 12px!important;border:1px solid #ced8e5!important;border-radius:8px!important; text-decoration:none!important;font-size:12px!important;font-weight:750!important } .proposal-workspace-list-link{background:#fff!important;color:#34506f!important} .proposal-new{background:#3157df!important;color:#fff!important;border-color:#3157df!important;box-shadow:0 6px 14px rgba(49,87,223,.16)!important} .proposal-workspace-list-link svg,.proposal-new svg{width:14px;height:14px} .proposal-workspace-grid{ display:grid!important; grid-template-columns:minmax(410px,35%) minmax(0,1fr)!important; gap:14px!important;align-items:start!important } .proposal-contact-workspace-list,.proposal-contact-preview{ border:1px solid #dce3ec!important;border-radius:12px!important; background:#fff!important;box-shadow:0 5px 18px rgba(31,48,76,.055)!important;overflow:hidden!important } .proposal-list-tools{ min-height:59px!important;display:flex!important;align-items:center!important;gap:0!important; padding:10px 12px!important;border-bottom:1px solid #e3e9f1!important; background:linear-gradient(90deg,#fbfcff,#f7f9ff)!important } .proposal-list-tools form:first-child{display:flex} .proposal-list-tools select,.proposal-list-tools>a,.proposal-workspace-search button,.proposal-workspace-search input{ height:32px!important;box-sizing:border-box!important;border:1px solid #cbd6e4!important; background:#fff!important;color:#34465e!important;font-size:11px!important } .proposal-list-tools select{min-width:65px;border-radius:6px 0 0 6px!important;padding:0 7px!important} .proposal-list-tools>a{ display:inline-flex!important;align-items:center!important;gap:5px!important; padding:0 9px!important;border-left:0!important;text-decoration:none!important } .proposal-list-tools>a svg{width:13px;height:13px} .proposal-workspace-search{margin-left:auto!important;display:flex!important} .proposal-workspace-search button{width:36px!important;border-radius:6px 0 0 6px!important;display:grid!important;place-items:center!important} .proposal-workspace-search button svg{width:13px;height:13px} .proposal-workspace-search input{width:155px!important;border-left:0!important;border-radius:0 6px 6px 0!important;padding:0 8px!important;outline:0!important} .proposal-list-scroll{overflow-x:auto!important} .proposal-list-card table{width:100%!important;min-width:620px!important;border-collapse:collapse!important;font-size:11.5px!important} .proposal-list-card th{ height:39px!important;padding:0 9px!important;background:#f8fafc!important; color:#21314c!important;text-align:left!important;font-size:10px!important;font-weight:750!important; border-bottom:1px solid #e4eaf1!important } .proposal-list-card td{ min-height:61px!important;padding:10px 9px!important;border-bottom:1px solid #e8edf3!important; color:#33465f!important;vertical-align:middle!important } .proposal-list-card tr.active td{background:#f3f7ff!important} .proposal-list-card tr.active td:first-child{border-left:3px solid #3157df!important} .proposal-workspace-identity{display:flex;align-items:center;gap:8px} .proposal-workspace-avatar{ width:30px;height:30px;display:grid;place-items:center;flex:none;border-radius:8px; background:#eef3ff;color:#4965d7 } .proposal-workspace-avatar svg{width:14px;height:14px} .proposal-workspace-number{display:block;color:#1f4f95!important;font-weight:800!important;text-decoration:none!important} .proposal-workspace-identity small{display:block;max-width:150px;margin-top:2px;color:#8997aa;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .proposal-list-footer{ min-height:55px!important;padding:9px 12px!important;border-top:1px solid #e7ecf2!important; color:#718096!important;font-size:10.5px!important } /* Proposal preview and tabs */ .proposal-preview-tabs{ min-height:51px!important;display:flex!important;align-items:stretch!important;gap:0!important; padding:0 10px!important;background:#f8fafc!important;border-bottom:1px solid #e3e9f1!important; overflow-x:auto!important } .proposal-preview-tabs a,.proposal-preview-tabs button{ min-width:max-content!important;display:inline-flex!important;align-items:center!important;justify-content:center!important; padding:0 10px!important;border:0!important;border-bottom:2px solid transparent!important; background:transparent!important;color:#5d6d83!important;font-size:10.5px!important;font-weight:700!important;text-decoration:none!important } .proposal-preview-tabs a.active{ border-bottom-color:#3157df!important;background:#fff!important;color:#285fc1!important } .proposal-preview-tabs svg{width:14px;height:14px} .proposal-preview-actions{ min-height:57px!important;display:flex!important;align-items:center!important;justify-content:space-between!important; gap:10px!important;padding:10px 14px!important;border-bottom:1px solid #e4eaf1!important;background:#fff!important } .proposal-preview-actions>div{display:flex!important;align-items:center!important;gap:6px!important;flex-wrap:wrap!important} .proposal-preview-actions a,.proposal-preview-actions summary,.proposal-preview-actions button{ min-height:32px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important; gap:5px!important;padding:0 9px!important;border:1px solid #cfd9e5!important;border-radius:7px!important; background:#fff!important;color:#40536c!important;font-size:10.5px!important;font-weight:700!important;text-decoration:none!important;cursor:pointer!important } .proposal-preview-actions svg{width:13px;height:13px} .proposal-preview-actions .proposal-convert{background:#3157df!important;color:#fff!important;border-color:#3157df!important} .proposal-preview-actions .proposal-pill{margin:0!important} .proposal-pill{ display:inline-flex!important;align-items:center!important;min-height:24px!important;padding:0 8px!important; border:1px solid #d7e0eb!important;border-radius:999px!important;background:#f7f9fc!important; color:#5a6b80!important;font-size:9.5px!important;font-weight:750!important } .proposal-menu{position:relative!important} .proposal-menu>div{ min-width:220px!important;padding:10px!important;border:1px solid #dbe4ee!important; border-radius:9px!important;background:#fff!important;box-shadow:0 12px 30px rgba(31,48,76,.14)!important } .proposal-menu form{display:grid!important;gap:7px!important;margin:0 0 7px!important} .proposal-menu label{display:grid!important;gap:5px!important;font-size:10.5px!important;color:#60728a!important} .proposal-menu select{height:31px!important;border:1px solid #cfd9e5!important;border-radius:6px!important;background:#fff!important} /* Proposal document */ .proposal-contact-preview .proposal-simple-paper{ margin:18px!important;padding:34px 34px 40px!important;border:1px solid #e3e9f2!important; border-radius:14px!important;background:#fff!important;box-shadow:0 14px 36px rgba(30,48,76,.08)!important; overflow:hidden!important } .proposal-contact-preview .proposal-simple-paper:before{ content:""!important;display:block!important;position:absolute!important;left:0!important;right:0!important;top:0!important; height:5px!important;background:linear-gradient(90deg,#3157df,#7c5ce7,#22c55e)!important } .proposal-contact-preview .sales-simple-top{padding-bottom:28px!important;margin-bottom:22px!important;border-bottom:1px solid #e7edf4!important} .proposal-contact-preview .sales-simple-brand img{max-width:190px!important;max-height:62px!important} .proposal-contact-preview .sales-simple-number strong{ background:#17233a!important;border-radius:6px!important;padding:7px 10px!important;font-size:15px!important } .proposal-contact-preview .sales-simple-number span{color:#65758a!important;font-size:10.5px!important} .proposal-contact-preview .sales-simple-subject{margin:0 0 22px!important;padding:0 0 14px!important} .proposal-contact-preview .sales-simple-subject h1{font-size:22px!important;color:#17233a!important} .proposal-contact-preview .sales-simple-parties{gap:18px!important;margin:0 0 28px!important} .proposal-contact-preview .sales-simple-parties section{ padding:16px 18px!important;border:1px solid #e4eaf2!important;border-radius:11px!important;background:#fbfcfe!important } .proposal-contact-preview .sales-simple-parties h3{border:0!important;color:#68788d!important;font-size:10px!important;text-transform:uppercase!important;letter-spacing:.08em!important} .proposal-contact-preview .sales-simple-table-wrap{border:1px solid #e4eaf2!important;border-radius:10px!important;overflow:auto!important} .proposal-contact-preview .sales-simple-table th{ background:#17233a!important;color:#fff!important;border:0!important;padding:11px 12px!important;font-size:10.5px!important } .proposal-contact-preview .sales-simple-table td{ background:#fff!important;border-bottom:1px solid #e8edf3!important;padding:11px 12px!important;font-size:11px!important } .proposal-contact-preview .sales-simple-table tbody tr:hover td{background:#fbfcff!important} .proposal-contact-preview .sales-simple-totals{ width:min(390px,100%)!important;margin:26px 0 0 auto!important;padding:9px 14px!important; border:1px solid #e3e9f1!important;border-radius:11px!important;background:#f8fafc!important } .proposal-contact-preview .sales-simple-totals>div{padding:9px 2px!important;font-size:11px!important} .proposal-contact-preview .sales-simple-totals .sales-simple-total{ margin:4px -7px -2px!important;padding:11px 9px!important;border-radius:7px!important;background:#17233a!important;color:#fff!important } .proposal-contact-preview .sales-simple-copy{ margin-top:24px!important;padding:16px 18px!important;border:1px solid #e4eaf2!important;border-radius:11px!important;background:#fbfcfe!important } .proposal-contact-preview .sales-admin-note{ border:1px dashed #d9cba4!important;border-radius:10px!important;background:#fffaf0!important } /* Comments / Notes / Reminders / Tasks / Templates / Email */ .proposal-tab-panel{ padding:20px!important;min-height:280px!important;background:#fff!important } .proposal-tab-panel h2{margin:0 0 6px!important;color:#18263b!important;font-size:18px!important} .proposal-tab-panel>p{color:#718096!important;font-size:11.5px!important} .proposal-entry-form{ padding:14px!important;border:1px solid #e1e7ef!important;border-radius:10px!important;background:#fbfcfe!important } .proposal-entry-form textarea,.proposal-dialog-form input,.proposal-dialog-form select,.proposal-dialog-form textarea{ border:1px solid #cfd9e5!important;border-radius:7px!important;background:#fff!important;color:#263954!important;font-size:12px!important } .proposal-entry-form textarea{width:100%!important;padding:10px!important;box-sizing:border-box!important} .proposal-form-footer{display:flex!important;justify-content:flex-end!important;margin-top:10px!important} .proposal-dark{ min-height:34px!important;padding:0 11px!important;border:1px solid #3157df!important;border-radius:7px!important; background:#3157df!important;color:#fff!important;font-size:11px!important;font-weight:750!important } .proposal-outline{ min-height:34px!important;padding:0 11px!important;border:1px solid #cfd9e5!important;border-radius:7px!important; background:#fff!important;color:#486079!important;font-size:11px!important;font-weight:700!important } .proposal-entry-list{display:grid!important;gap:9px!important;margin-top:14px!important} .proposal-entry{ margin:0!important;padding:13px 14px!important;border:1px solid #e4eaf2!important;border-radius:9px!important;background:#fff!important } .proposal-entry header{display:flex!important;align-items:center!important;gap:8px!important} .proposal-entry header time{margin-left:auto!important;color:#8996a8!important;font-size:9.5px!important} .proposal-entry p{margin:9px 0 0!important;color:#4b5d74!important;font-size:11.5px!important;line-height:1.6!important} .proposal-text-button{ border:0!important;background:transparent!important;color:#55729a!important;padding:0!important;font-size:10px!important;cursor:pointer!important } .proposal-text-button:hover{color:#1d4ed8!important;text-decoration:underline!important} .proposal-panel-heading{ display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important; margin-bottom:12px!important } .proposal-table-tools{ min-height:48px!important;padding:8px 10px!important;border:1px solid #e2e8f0!important; border-radius:9px 9px 0 0!important;background:linear-gradient(90deg,#fbfcff,#f7f9ff)!important } .proposal-table-tools input,.proposal-table-tools select{ height:30px!important;border:1px solid #cfd9e5!important;border-radius:6px!important;background:#fff!important;font-size:10.5px!important } .proposal-table-scroll{ margin:0!important;border:1px solid #e2e8f0!important;border-top:0!important;border-radius:0 0 9px 9px!important;overflow:auto!important } .proposal-data-table{width:100%!important;border-collapse:collapse!important;font-size:11px!important} .proposal-data-table th{ height:37px!important;padding:0 9px!important;background:#f8fafc!important;color:#21314c!important; font-size:10px!important;font-weight:750!important;border-bottom:1px solid #e4eaf1!important } .proposal-data-table td{padding:10px 9px!important;border-bottom:1px solid #e8edf3!important;color:#40536c!important} .proposal-data-table tbody tr:hover td{background:#fbfcff!important} .proposal-due{display:block;margin-top:3px;color:#b33a45!important;font-size:9px!important} .proposal-table-pagination{ display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:7px!important;margin-top:9px!important } .proposal-table-pagination button{ height:30px!important;padding:0 9px!important;border:1px solid #d4dfec!important;border-radius:6px!important; background:#fff!important;color:#55729a!important;font-size:10px!important } .proposal-template-list{display:grid!important;gap:10px!important} .proposal-template{ padding:13px 14px!important;border:1px solid #e3e9f1!important;border-radius:9px!important;background:#fff!important } .proposal-template summary{cursor:pointer!important;color:#263954!important;font-weight:750!important;font-size:11.5px!important} .proposal-rich-content{margin-top:10px!important;padding-top:10px!important;border-top:1px solid #e7ecf2!important;color:#4d5f75!important;font-size:11.5px!important} .proposal-row-actions{display:flex!important;align-items:center!important;gap:8px!important;margin-top:9px!important} .proposal-empty{ margin:12px 0!important;padding:26px!important;border:1px dashed #d7e0eb!important;border-radius:9px!important; background:#fbfcfe!important;color:#8190a3!important;text-align:center!important;font-size:11px!important } .proposal-help{color:#8190a3!important;font-size:10.5px!important} /* Dialogs */ .proposal-dialog{ width:min(650px,calc(100vw - 30px))!important;padding:0!important;border:1px solid #d8e1ec!important; border-radius:13px!important;background:#fff!important;color:#263954!important; box-shadow:0 22px 70px rgba(17,24,39,.24)!important;overflow:hidden!important } .proposal-dialog::backdrop{background:rgba(32,48,71,.58)!important} .proposal-template-dialog{width:min(1100px,calc(100vw - 30px))!important} .proposal-dialog header{ padding:16px 18px!important;border-bottom:1px solid #e4e9f0!important;background:linear-gradient(90deg,#fbfcff,#f7f9ff)!important } .proposal-dialog h2{font-size:17px!important;color:#18263b!important} .proposal-dialog-fields{padding:18px!important;gap:13px!important} .proposal-dialog-form label{font-size:11.5px!important;font-weight:700!important;color:#40536c!important} .proposal-dialog-form input,.proposal-dialog-form select{height:36px!important;padding:0 9px!important} .proposal-dialog-form textarea{padding:9px 10px!important} .proposal-dialog footer{ padding:13px 18px!important;border-top:1px solid #e4e9f0!important;background:#fbfcfe!important } /* Responsive */ @media(max-width:1180px){ .proposal-workspace-grid{grid-template-columns:1fr!important} .proposal-contact-workspace-list{max-height:none!important} } @media(max-width:900px){ .proposal-contacts-heading,.proposal-contact-workspace-heading{align-items:flex-start!important;flex-direction:column!important} .proposal-contacts-heading-actions,.proposal-workspace-heading-actions{width:100%;flex-wrap:wrap} .proposal-contact-toolbar{flex-wrap:wrap} .proposal-contact-search{margin-left:auto} .proposal-contact-filters.open{flex-wrap:wrap} } @media(max-width:620px){ .proposal-contact-summary{grid-template-columns:repeat(2,minmax(0,1fr))} .proposal-contact-search input{width:150px} .proposal-contact-footer{padding:12px 14px;flex-wrap:wrap} .proposal-workspace-heading-actions{align-items:stretch;flex-direction:column} .proposal-workspace-heading-actions>*{width:100%} .proposal-workspace-filter select,.proposal-workspace-list-link,.proposal-new{width:100%!important;box-sizing:border-box!important;justify-content:center!important} .proposal-contact-preview .proposal-simple-paper{margin:10px!important;padding:26px 18px!important} } @media print{ .proposal-contact-workspace-heading,.proposal-contact-workspace-list,.proposal-preview-tabs,.proposal-preview-actions{display:none!important} .proposal-workspace-grid{display:block!important} .proposal-contact-preview{border:0!important;box-shadow:none!important} .proposal-contact-preview .proposal-simple-paper{margin:0!important;border:0!important;box-shadow:none!important;border-radius:0!important} } /* ===================================================================== Sales & Finance โ†’ Estimates โ€” Invoice / Contacts list design ===================================================================== */ .estimate-contacts-page{max-width:1600px;margin:0 auto;color:#263954} .estimate-contacts-heading{ display:flex;align-items:center;justify-content:space-between;gap:22px; margin:0 0 14px;padding:18px 20px;border:1px solid #dce4ef;border-radius:14px; background:linear-gradient(120deg,#fff 62%,#f5f8ff 100%); box-shadow:0 6px 20px rgba(31,48,76,.055) } .estimate-contacts-eyebrow{ display:block;margin-bottom:4px;color:#5f6bd6;font-size:10px;font-weight:850; letter-spacing:.1em;text-transform:uppercase } .estimate-contacts-heading h1{margin:0;font-size:24px;letter-spacing:-.025em;color:#18263b} .estimate-contacts-heading p{margin:5px 0 0;color:#76859a;font-size:12px} .estimate-contacts-heading-actions{display:flex;align-items:center;gap:8px} .estimate-contacts-heading-actions a{ display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px; border:1px solid #ced8e5;border-radius:8px;text-decoration:none;font-size:12px;font-weight:750 } .estimate-contacts-heading-actions svg{width:14px;height:14px} .estimate-secondary-action{background:#fff;color:#34506f} .estimate-primary-action{ background:#3157df;color:#fff!important;border-color:#3157df!important; box-shadow:0 6px 14px rgba(49,87,223,.18) } .estimate-contact-summary{ display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:8px;margin-bottom:12px } .estimate-contact-summary a{ display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:46px; padding:0 13px;border:1px solid #dce4ed;border-radius:10px;background:#fff; color:#52647c;text-decoration:none;font-size:11px } .estimate-contact-summary a strong{font-size:14px;color:#21344f} .estimate-contact-summary a.active{border-color:#9bb5f0;background:#f2f6ff;color:#285fc1} .estimate-contact-summary a.active strong{color:#285fc1} .estimate-contact-filters{ display:none;align-items:end;gap:10px;padding:12px 14px;margin-bottom:10px; border:1px solid #dce4ed;border-radius:10px;background:#fff } .estimate-contact-filters.open{display:flex} .estimate-contact-filters label{display:grid;gap:5px;font-size:11px;font-weight:700;color:#53647a} .estimate-contact-filters input,.estimate-contact-filters select{ height:32px;border:1px solid #cfd9e5;border-radius:6px;padding:0 9px;background:#fff;color:#30435c } .estimate-contact-filters button,.estimate-contact-filters a{ height:32px;display:inline-flex;align-items:center;padding:0 11px; border-radius:6px;font-size:11px;text-decoration:none } .estimate-contact-filters button{border:1px solid #3157df;background:#3157df;color:#fff} .estimate-contact-filters a{border:1px solid #cfd9e5;color:#51647d;background:#fff} .estimate-list-contact-card{ background:#fff;border:1px solid #dce3ec;border-radius:12px; box-shadow:0 5px 18px rgba(31,48,76,.055);overflow:hidden } .estimate-contact-toolbar{ min-height:62px;display:flex;align-items:center;justify-content:space-between;gap:14px; padding:10px 14px;background:linear-gradient(90deg,#fbfcff,#f7f9ff); border-bottom:1px solid #e3e9f1 } .estimate-contact-toolbar-left,.estimate-contact-search{display:flex;align-items:center} .estimate-contact-toolbar-left form{display:flex} .estimate-contact-toolbar select, .estimate-contact-toolbar-left>a, .estimate-contact-toolbar-left>button, .estimate-contact-search button, .estimate-contact-search input{ height:32px;box-sizing:border-box;border:1px solid #cbd6e4;background:#fff; color:#34465e;font:inherit;font-size:11px } .estimate-contact-toolbar select{min-width:70px;border-radius:6px 0 0 6px;padding:0 8px} .estimate-contact-toolbar-left>a,.estimate-contact-toolbar-left>button{ display:inline-flex;align-items:center;gap:5px;padding:0 9px;border-left:0; text-decoration:none;cursor:pointer } .estimate-contact-toolbar-left svg,.estimate-contact-search svg{width:13px;height:13px} .estimate-contact-refresh{border-radius:0 6px 6px 0!important} .estimate-contact-search button{width:38px;border-radius:6px 0 0 6px} .estimate-contact-search input{ width:210px;border-left:0;border-radius:0 6px 6px 0;padding:0 10px;outline:0 } .estimate-contact-table-wrap{overflow-x:auto} .estimate-contact-table{width:100%;min-width:1190px;border-collapse:collapse;font-size:12px} .estimate-contact-table th{ height:40px;padding:0 11px;background:#f8fafc;color:#21314c;text-align:left; font-size:10.5px;font-weight:750;border-bottom:1px solid #e4eaf1 } .estimate-contact-table th+th{border-left:1px solid #e7ebf1} .estimate-contact-table td{ height:64px;padding:10px 11px;border-bottom:1px solid #e8edf3; color:#33465f;vertical-align:middle } .estimate-contact-table tbody tr:hover td{background:#fbfcff} .estimate-contact-identity{display:flex;align-items:center;gap:9px} .estimate-contact-avatar{ width:32px;height:32px;flex:none;display:grid;place-items:center; border-radius:9px;background:#eef3ff;color:#4965d7 } .estimate-contact-avatar svg{width:15px;height:15px} .estimate-contact-number{display:block;color:#1f4f95!important;font-weight:800;text-decoration:none} .estimate-contact-identity small{display:block;margin-top:2px;color:#8a98aa;font-size:9px} .estimate-contact-inline-actions{display:flex;align-items:center;gap:5px;margin-top:3px;font-size:9.5px} .estimate-contact-inline-actions a,.estimate-contact-inline-actions button{ border:0!important;background:transparent!important;padding:0!important;color:#55729a!important; font:inherit!important;font-weight:650!important;text-decoration:none;cursor:pointer } .estimate-contact-inline-actions form{display:inline;margin:0} .estimate-contact-inline-actions span{color:#b5bfcc} .estimate-contact-inline-actions a:hover,.estimate-contact-inline-actions button:hover{ color:#1d4ed8!important;text-decoration:underline!important } .estimate-contact-inline-actions .estimate-contact-inline-delete{ appearance:none!important;-webkit-appearance:none!important;display:inline!important; width:auto!important;height:auto!important;min-width:0!important;min-height:0!important; margin:0!important;padding:0!important;border:0!important;border-radius:0!important; background:transparent!important;box-shadow:none!important;color:#55729a!important } .estimate-contact-status{ display:inline-flex;align-items:center;min-height:23px;padding:0 8px;border:1px solid #d7e0eb; border-radius:999px;background:#f7f9fc;color:#5a6b80;font-size:9.5px;font-weight:750 } .estimate-contact-status.status-accepted{background:#eefaf4;border-color:#d5f0e1;color:#198754} .estimate-contact-status.status-declined{background:#fff2f2;border-color:#f3d0d0;color:#b63b45} .estimate-contact-status.status-sent{background:#eef5ff;border-color:#d7e5fb;color:#2e67b1} .estimate-contact-status.status-expired{background:#fff2f2;border-color:#f3d0d0;color:#b63b45} .estimate-contact-status.status-draft{background:#f4f6f9;color:#66778b} .estimate-contact-status.status-invoiced{background:#eefaf4;border-color:#d5f0e1;color:#198754} .estimate-contact-options{display:flex;align-items:center;justify-content:flex-end;gap:5px} .estimate-contact-options form{display:inline;margin:0} .estimate-contact-options a,.estimate-contact-options button{ width:30px;height:30px;display:grid;place-items:center;border:1px solid #d4dfec; border-radius:7px;background:#fff;color:#55729a;cursor:pointer } .estimate-contact-options svg{width:13px;height:13px} .estimate-contact-options a:hover,.estimate-contact-options button:hover{ background:#f5f8fd;color:#285fc1;border-color:#b9c9df } .estimate-options-heading{text-align:right!important} .estimate-contact-empty{text-align:center!important;padding:36px!important;color:#77869b!important} .estimate-contact-empty a{color:#285fc1} .estimate-contact-footer{ min-height:58px;display:flex;align-items:center;justify-content:space-between;gap:12px; padding:0 14px;color:#718096;font-size:11px } .estimate-contact-footer nav{display:flex;align-items:center;gap:4px} .estimate-contact-footer nav a,.estimate-contact-footer nav span{ min-width:30px;height:30px;display:grid;place-items:center;border-radius:7px; border:1px solid #dce4ed;background:#fff;color:#66778d;text-decoration:none } @media(max-width:900px){ .estimate-contacts-heading{align-items:flex-start;flex-direction:column} .estimate-contacts-heading-actions{width:100%;flex-wrap:wrap} .estimate-contact-toolbar{flex-wrap:wrap} .estimate-contact-search{margin-left:auto} .estimate-contact-filters.open{flex-wrap:wrap} } @media(max-width:620px){ .estimate-contact-summary{grid-template-columns:repeat(2,minmax(0,1fr))} .estimate-contact-search input{width:150px} .estimate-contact-footer{padding:12px 14px;flex-wrap:wrap} } /* Client workspace: primary New Proposal action beside All Proposals */ .client-proposal-toolbar .proposal-contact-toolbar-left > a.client-proposal-toolbar-new{ background:#3157df!important; background-image:none!important; color:#fff!important; border:1px solid #3157df!important; border-radius:6px 0 0 6px!important; opacity:1!important; font-weight:800!important; text-shadow:none!important; box-shadow:0 4px 10px rgba(49,87,223,.18)!important; } .client-proposal-toolbar .proposal-contact-toolbar-left > a.client-proposal-toolbar-new svg{ color:#fff!important; stroke:#fff!important; opacity:1!important; } .client-proposal-toolbar .proposal-contact-toolbar-left > a.client-proposal-toolbar-new:hover, .client-proposal-toolbar .proposal-contact-toolbar-left > a.client-proposal-toolbar-new:focus{ background:#2547c7!important; border-color:#2547c7!important; color:#fff!important; } /* ============================================================ SECTION: reports.css ============================================================ */ /* Reports โ€” exact Invoice-list visual system */ .report-page{width:100%;max-width:1600px;margin:0 auto;color:#263954} .report-heading{display:flex;align-items:center;justify-content:space-between;gap:22px;margin:0 0 14px;padding:18px 20px;border:1px solid #dce4ef;border-radius:14px;background:linear-gradient(120deg,#fff 62%,#f5f8ff 100%);box-shadow:0 6px 20px rgba(31,48,76,.055)} .report-heading>div:first-child{min-width:0}.report-eyebrow{display:block;margin-bottom:4px;color:#5f6bd6;font-size:10px;font-weight:850;letter-spacing:.1em;text-transform:uppercase}.report-heading h1{margin:0;font-size:24px;line-height:1.2;letter-spacing:-.025em;color:#18263b}.report-heading p{margin:5px 0 0;color:#76859a;font-size:12px} .report-period{display:flex;align-items:center;gap:8px;flex:none}.report-period a{min-height:36px;display:inline-flex;align-items:center;padding:0 12px;border:1px solid #ced8e5;border-radius:8px;background:#fff;color:#34506f;text-decoration:none;font-size:12px;font-weight:750}.report-period a:hover{background:#f7f9fd;border-color:#b9c9df;color:#285fc1}.report-period a.active{border-color:#3157df;background:#3157df;color:#fff;box-shadow:0 6px 14px rgba(49,87,223,.18)} .report-tabs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin:0 0 12px}.report-tabs a{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:46px;padding:0 13px;border:1px solid #dce4ed;border-radius:10px;background:#fff;color:#52647c;text-decoration:none;font-size:11px;font-weight:700}.report-tabs a svg{width:14px;height:14px;color:#73839a;flex:none}.report-tabs a:hover{border-color:#c9d6e7;background:#fafcff;color:#285fc1}.report-tabs a.active{border-color:#9bb5f0;background:#f2f6ff;color:#285fc1}.report-tabs a.active svg{color:#3157df} .report-summary{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin-bottom:12px}.report-stat{min-height:58px;padding:10px 13px;border:1px solid #dce4ed;border-radius:10px;background:#fff;box-shadow:none;position:relative;overflow:hidden}.report-stat:before,.report-stat:after{display:none}.report-stat span,.report-stat strong,.report-stat small{display:block;position:relative;z-index:1}.report-stat span{color:#6f7f93;font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.045em}.report-stat strong{margin:4px 0 2px;color:#21344f;font-size:16px;line-height:1.15;letter-spacing:-.015em}.report-stat small{color:#98a3b2;font-size:9px}.report-stat-green span{color:#198754}.report-stat-rose span{color:#b63b45}.report-stat-amber span,.report-stat-orange span{color:#a56d10}.report-stat-blue span,.report-stat-indigo span,.report-stat-violet span{color:#315fc5} .report-visual-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(260px,1fr);gap:12px;margin-bottom:12px}.report-chart-card,.report-breakdown-card,.report-card{background:#fff;border:1px solid #dce3ec;border-radius:12px;box-shadow:0 5px 18px rgba(31,48,76,.055);overflow:hidden}.report-chart-card,.report-breakdown-card{padding:0}.report-card-heading,.report-table-heading{min-height:62px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 14px;background:linear-gradient(90deg,#fbfcff,#f7f9ff);border-bottom:1px solid #e3e9f1}.report-card-heading>div:first-child span,.report-table-heading>div:first-child span{display:block;color:#8593a6;font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.report-card-heading h2,.report-table-heading h2{margin:3px 0 0;color:#21314c;font-size:13px;font-weight:800}.report-legend{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:10px}.report-legend span{display:flex;align-items:center;gap:5px;color:#718096;font-size:9.5px;font-weight:700}.report-legend i{width:8px;height:8px;border-radius:50%;background:var(--legend-color)} .report-chart-wrap{position:relative;min-height:300px;padding:4px 12px 2px;overflow-x:auto}.report-chart-wrap canvas{display:block;max-width:100%}.report-chart-tooltip{position:absolute;z-index:4;width:175px;padding:9px 11px;border-radius:8px;background:#1d2b40;color:#fff;box-shadow:0 10px 24px rgba(15,23,42,.22);font-size:10.5px;pointer-events:none}.report-chart-tooltip strong,.report-chart-tooltip span{display:block}.report-chart-tooltip span{margin-top:4px;color:#cbd5e1}.report-chart-empty{position:absolute;inset:36px 24px 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px dashed #d9e1eb;border-radius:9px;background:#fbfcfe;color:#8c98aa;text-align:center}.report-chart-empty svg{width:28px;height:28px;margin-bottom:8px;color:#b3bdcb}.report-chart-empty strong{color:#657188}.report-chart-empty span{margin-top:4px;font-size:10.5px} .report-breakdown{display:grid;gap:14px;padding:16px 14px}.report-breakdown-row>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:7px;color:#5d6d82;font-size:10.5px}.report-breakdown-row strong{color:#263a54;font-size:11px}.report-progress{height:6px;overflow:hidden;border-radius:999px;background:#edf1f6}.report-progress i{display:block;height:100%;min-width:3px;border-radius:inherit;background:#3157df}.report-breakdown-empty{display:flex;min-height:205px;flex-direction:column;align-items:center;justify-content:center;color:#8d99aa;font-size:10.5px}.report-breakdown-empty svg{width:28px;height:28px;margin-bottom:8px;color:#bcc5d2} .report-record-count{display:inline-flex;align-items:center;min-height:25px;padding:0 8px;border:1px solid #d7e0eb;border-radius:999px;background:#f7f9fc;color:#66778d;font-size:9.5px;font-weight:750}.report-table-scroll{overflow-x:auto}.report-card table{width:100%;min-width:840px;border-collapse:collapse;font-size:12px}.report-card th{height:40px;padding:0 11px;background:#f8fafc;color:#21314c;text-align:left;font-size:10.5px;font-weight:750;border-bottom:1px solid #e4eaf1}.report-card th+th{border-left:1px solid #e7ebf1}.report-card td{height:62px;padding:10px 11px;border-bottom:1px solid #e8edf3;color:#33465f;vertical-align:middle}.report-card tbody tr:hover td{background:#fbfcff}.report-card a{color:#1f4f95;font-weight:750;text-decoration:none}.report-card a:hover{color:#1d4ed8;text-decoration:underline}.report-type,.report-status{display:inline-flex;align-items:center;min-height:23px;padding:0 8px;border:1px solid #d7e0eb;border-radius:999px;background:#f7f9fc;color:#5a6b80;font-size:9.5px;font-weight:750}.report-type-income,.report-type-payment{background:#eefaf4;border-color:#d5f0e1;color:#198754}.report-type-expense{background:#fff8ec;border-color:#f1dfba;color:#a56d10}.report-type-invoice,.report-type-project{background:#f2f6ff;border-color:#d7e2fa;color:#315fc5}.report-type-lead,.report-type-support{background:#eff8ff;border-color:#d4eafb;color:#256a9f}.report-type-timesheet{background:#f7f2ff;border-color:#e3d8f8;color:#7250a5}.report-status{background:#fff}.report-value{color:#21344f!important;font-weight:800;font-variant-numeric:tabular-nums}.report-empty{height:180px!important;padding:36px!important;color:#8795a7!important;text-align:center!important}.report-empty svg,.report-empty strong,.report-empty span{display:block;margin:0 auto}.report-empty svg{width:28px;height:28px;margin-bottom:8px}.report-empty strong{color:#657188}.report-empty span{margin-top:4px;font-size:10.5px} .report-footer{min-height:58px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 14px;border-top:1px solid #e6ebf2;color:#718096;font-size:11px}.report-footer>div{display:flex;align-items:center;gap:8px}.report-footer b{display:grid;place-items:center;min-width:30px;height:30px;padding:0 8px;border-radius:7px;background:#eaf0f8;color:#25405f;font-size:10px} @media(max-width:1200px){.report-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}.report-summary{grid-template-columns:repeat(3,minmax(0,1fr))}.report-visual-grid{grid-template-columns:1fr}.report-breakdown{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:760px){.report-heading{align-items:flex-start;flex-direction:column}.report-period{width:100%;flex-wrap:wrap}.report-period a{flex:1;justify-content:center}.report-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}.report-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.report-card-heading,.report-table-heading{align-items:flex-start;flex-direction:column}.report-legend{justify-content:flex-start}.report-breakdown{grid-template-columns:1fr}.report-heading h1{font-size:21px}.report-footer{padding:12px 14px;flex-wrap:wrap}} @media(max-width:450px){.report-tabs,.report-summary{grid-template-columns:1fr}} @media print{.customer-topbar,.customer-sidebar,.report-period,.report-tabs{display:none!important}.customer-content{padding:0!important}.report-heading,.report-stat,.report-chart-card,.report-breakdown-card,.report-card{box-shadow:none}.report-visual-grid{grid-template-columns:1fr}.report-card table{min-width:0;font-size:10px}.report-card th,.report-card td{padding:5px}} /* Reports light Invoice palette โ€” forced override */ .report-page{background:transparent!important;color:#263954!important} .report-page .report-heading{background:linear-gradient(120deg,#fff 60%,#f4f8ff 100%)!important;border-color:#dce4ef!important;color:#263954!important;box-shadow:0 6px 20px rgba(31,48,76,.045)!important} .report-page .report-heading:before,.report-page .report-heading:after{display:none!important} .report-page .report-eyebrow{color:#6b7fd7!important} .report-page .report-heading h1{color:#18263b!important} .report-page .report-heading p{color:#76859a!important} .report-page .report-period a{background:#fff!important;color:#34506f!important;border-color:#ced8e5!important;box-shadow:none!important;opacity:1!important} .report-page .report-period a:hover{background:#f6f9ff!important;color:#285fc1!important;border-color:#b6c8e1!important} .report-page .report-period a.active{background:#eef4ff!important;color:#285fc1!important;border-color:#9bb5f0!important;box-shadow:0 3px 9px rgba(49,87,223,.10)!important} .report-page .report-tabs a{background:#fff!important;color:#52647c!important} .report-page .report-tabs a.active{background:#f2f6ff!important;color:#285fc1!important;border-color:#9bb5f0!important} .report-page .report-tabs a.active svg{color:#5c7ed8!important} .report-page .report-stat{background:#fff!important;border-color:#dce4ed!important} .report-page .report-stat-blue span,.report-page .report-stat-indigo span,.report-page .report-stat-violet span{color:#5f79c8!important} .report-page .report-chart-card,.report-page .report-breakdown-card,.report-page .report-card{background:#fff!important;border-color:#dce3ec!important} .report-page .report-card-heading,.report-page .report-table-heading{background:linear-gradient(90deg,#fbfcff,#f4f8ff)!important} .report-page .report-progress i{background:#7194e8!important} .report-page .report-record-count{background:#f4f7fb!important;color:#607188!important} /* ============================================================ SECTION: sales-pages.css ============================================================ */ .sales-page{color:#243044}.sales-heading{margin-bottom:15px}.sales-heading h1{font-size:24px;margin:0}.sales-heading a,.sales-heading span{color:#2563eb;font-size:15px}.sales-stat-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;margin-bottom:23px}.sales-stat{display:flex;flex-direction:column;gap:5px;border:1px solid #d3dbe8;border-radius:8px;padding:12px 14px;background:#fff;text-decoration:none;color:#253348;box-shadow:0 1px 2px #17243b14}.sales-stat span{font-size:16px}.sales-stat small{color:#6b788b}.sales-stat strong{font-size:15px}.sales-actions{display:flex;gap:7px;margin-bottom:10px}.sales-primary,.sales-secondary{display:inline-flex;align-items:center;padding:9px 12px;border-radius:7px;font-size:15px;font-weight:600;text-decoration:none;background:#1f2b3d;color:#fff}.sales-secondary{background:#fff;border:1px solid #d1d9e6;color:#243044}.sales-card{background:#fff;border:1px solid #dce3ed;border-radius:8px;box-shadow:0 2px 4px #15263f1c;overflow:hidden}.sales-toolbar{display:flex;justify-content:space-between;gap:10px;padding:24px}.sales-toolbar form{display:flex;gap:5px}.sales-toolbar select,.sales-toolbar input,.sales-toolbar button{border:1px solid #cbd5e3;border-radius:6px;background:#fff;padding:7px 9px;color:#233044}.sales-toolbar input{width:200px}.sales-table-wrap{overflow-x:auto}.sales-table-wrap table{border-collapse:collapse;width:100%;font-size:16px}.sales-table-wrap th{text-align:left;padding:12px 10px;border:1px solid #e4e8f1;background:#fafbfe;font-weight:500;white-space:nowrap}.sales-table-wrap td{padding:16px 10px;border-bottom:1px solid #e6eaf2;white-space:nowrap}.sales-table-wrap a{color:#152b52;text-decoration:none}.sales-table-wrap a:hover{text-decoration:underline}.sales-status{display:inline-block;border:1px solid #c9ddfb;border-radius:5px;padding:3px 8px;color:#1260c8;font-size:14px}.sales-footer{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;color:#68778c;font-size:15px}.sales-footer nav{display:flex;gap:5px}.sales-footer nav svg{width:16px}.sales-footer nav p{display:none}@media(max-width:1000px){.sales-stat-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:640px){.sales-stat-grid{grid-template-columns:repeat(2,1fr)}.sales-toolbar{flex-wrap:wrap}} /* ============================================================ SECTION: settings.css ============================================================ */ .settings-theme .customer-content{min-width:0;flex:1;padding:0;max-width:none} .settings-theme .customer-app{display:flex} .settings-workspace{display:grid;grid-template-columns:320px minmax(0,1fr);gap:28px;padding:24px 28px 48px;min-height:calc(100vh - 58px);background:#f7f9fc;color:#253246;font-size:15px} .settings-sections{min-width:0} .settings-nav-heading{display:flex;align-items:flex-end;justify-content:space-between;margin:0 0 14px} .settings-nav-heading span:first-child{display:block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:#94a3b8;margin-bottom:3px} .settings-nav-heading h1{font-size:23px;line-height:1.15;margin:0;color:#142139;letter-spacing:-.02em} .settings-count{display:inline-flex;align-items:center;justify-content:center;min-width:31px;height:27px;padding:0 8px;border-radius:999px;background:#eaf0f8;color:#52647d;font-size:12px;font-weight:800} .settings-search-wrap{position:relative;margin-bottom:12px}.settings-search-wrap svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:#94a3b8}.settings-search-wrap input{box-sizing:border-box;width:100%;height:40px;padding:0 12px 0 38px;border:1px solid #d8e0eb;border-radius:9px;background:#fff;color:#243247;font:inherit;box-shadow:0 1px 2px #0f172a08}.settings-search-wrap input:focus{outline:3px solid #dbeafe;border-color:#6aa2ef} .settings-nav-card,.settings-card{background:#fff;border:1px solid #e0e6ef;border-radius:10px;box-shadow:0 4px 16px #16233a0a} .settings-nav-card{padding:8px;max-height:calc(100vh - 180px);overflow:auto;scrollbar-width:thin} .settings-nav-group{border-bottom:1px solid #edf1f6}.settings-nav-group:last-of-type{border-bottom:0}.settings-nav-group>summary{list-style:none;display:grid;grid-template-columns:32px minmax(0,1fr) 18px;gap:9px;align-items:center;padding:11px 10px;cursor:pointer;border-radius:8px;color:#334155;user-select:none}.settings-nav-group>summary::-webkit-details-marker{display:none}.settings-nav-group>summary:hover{background:#f7f9fc}.settings-nav-group[open]>summary{background:#f5f8fc;color:#17243a}.settings-nav-group-icon{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:#edf4ff;color:#2f6fc9}.settings-nav-group-icon svg{width:16px;height:16px}.settings-nav-group summary strong{display:block;font-size:14px}.settings-nav-group summary small{display:block;margin-top:2px;color:#8a99ad;font-size:11px;line-height:1.25;font-weight:500}.settings-nav-chevron{width:15px;height:15px;color:#94a3b8;transition:transform .18s ease}.settings-nav-group[open] .settings-nav-chevron{transform:rotate(180deg)} .settings-nav-links{padding:3px 7px 9px 42px}.settings-nav-links a{display:flex;align-items:center;gap:9px;padding:7px 9px;margin:1px 0;border-radius:7px;color:#526174;text-decoration:none;font-weight:600;font-size:13px}.settings-nav-links a:hover{background:#f5f8fc;color:#1e5fb6}.settings-nav-links a.active{background:#eaf2ff;color:#195fae}.settings-nav-links a svg{width:15px;height:15px;flex:none}.settings-search-empty{padding:16px;text-align:center;color:#8b98aa;font-size:13px} .settings-panel{min-width:0;max-width:1120px}.settings-panel-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin:0 0 14px}.settings-eyebrow{display:block;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#6b87aa;margin-bottom:4px}.settings-panel-heading h2{font-size:23px;line-height:1.2;margin:0;color:#142139;letter-spacing:-.02em}.settings-panel-heading p{margin:6px 0 0;color:#748196;line-height:1.45}.settings-save-state{white-space:nowrap;padding:6px 10px;border:1px solid #dbe3ed;border-radius:999px;background:#fff;color:#7d8ba0;font-size:11px;font-weight:700} .settings-card{overflow:hidden}.settings-tabs{display:flex;gap:3px;overflow:auto;background:#f9fbfd;border-bottom:1px solid #e2e7ef;padding:8px 14px 0}.settings-tabs a{white-space:nowrap;text-decoration:none;color:#5f6d80;padding:9px 11px 10px;border-bottom:2px solid transparent;border-radius:6px 6px 0 0;font-weight:650;font-size:13px}.settings-tabs a:hover{background:#f0f4f9;color:#344256}.settings-tabs a.active{color:#175daa;border-bottom-color:#2f78d4;background:#fff} .settings-fields{padding:23px 26px}.settings-field{padding:0 0 18px;margin:0 0 18px;border-bottom:1px solid #edf0f4}.settings-field:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}.settings-field>label,.settings-add-tag label{display:block;font-weight:700;margin-bottom:7px;color:#344256}.settings-field input:not([type=radio]),.settings-field select,.settings-field textarea,.settings-tag-row input,.settings-add-tag input{box-sizing:border-box;display:block;width:100%;border:1px solid #cbd5e1;border-radius:7px;background:#fff;color:#334155;padding:9px 11px;font:inherit;min-height:39px;box-shadow:0 1px 2px #0f172a0b}.settings-field textarea{min-height:96px;resize:vertical}.settings-field input:focus,.settings-field textarea:focus,.settings-field select:focus{outline:3px solid #dbeafe;border-color:#5f9eea}.settings-radios{display:flex;gap:17px;align-items:center}.settings-radios label{display:flex;align-items:center;gap:6px;color:#526174}.settings-radios input{accent-color:#2563eb} .settings-footer{padding:13px 24px;background:#fafbfd;border-top:1px solid #e5e9f1;text-align:right}.settings-footer button,.settings-add-tag button,.settings-tag-row button{background:#1f3655;color:#fff;border:0;border-radius:7px;padding:9px 14px;cursor:pointer;font-weight:700}.settings-footer button:hover,.settings-add-tag button:hover{background:#172b46} .settings-notice{margin:20px 24px 0;padding:14px 16px;background:#f0f6ff;border:1px solid #d8e9ff;border-left:4px solid #4d91e8;border-radius:7px;color:#355c8c;line-height:1.5}.settings-notice code{background:#fff;border:1px solid #dbe5f1;border-radius:4px;padding:2px 5px;color:#27364b}.settings-error{display:block;color:#b91c1c;margin-top:5px} .settings-provider-links{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:14px 24px 0}.settings-provider-links a{display:block;padding:12px 13px;border:1px solid #e0e6ef;border-radius:8px;background:#fff;text-decoration:none}.settings-provider-links strong{display:block;color:#243247;font-size:13px}.settings-provider-links span{display:block;color:#8a98ab;font-size:11px;margin-top:3px}.settings-provider-links a:hover{border-color:#9dc2f3;background:#f8fbff} .settings-tag-row{display:flex;gap:0;margin-bottom:9px}.settings-tag-count{border:1px solid #cbd5e1;border-radius:7px 0 0 7px;padding:9px 10px;min-width:40px;text-align:center;background:#f8fafc}.settings-tag-row form:first-of-type{display:flex;flex:1}.settings-tag-row input{border-radius:0}.settings-tag-row button{border-radius:0}.settings-tag-row .settings-delete{background:#dc2626;border-radius:0 7px 7px 0}.settings-add-tag{display:flex;align-items:end;gap:8px;margin-top:25px}.settings-add-tag label{margin:0}.settings-add-tag input{flex:1} .settings-logos{padding:0 24px}.settings-logo-row{min-height:68px;border-bottom:1px solid #e8ebf0;display:flex;align-items:center;justify-content:space-between;gap:12px}.settings-logo-row form:first-child{flex:1}.settings-logo-row input[type=file]{position:absolute;width:1px;height:1px;opacity:0}.settings-logo-preview{display:flex;align-items:center;gap:10px;cursor:pointer;min-height:67px}.settings-logo-preview img{max-width:180px;max-height:42px;object-fit:contain}.settings-logo-preview strong{font-size:27px;letter-spacing:-1px;color:#374151}.settings-logo-preview small{color:#94a3b8;font-size:12px;margin-left:auto}.settings-logo-row button{background:none;border:0;color:#ef4444;font-size:22px;cursor:pointer}.settings-brand-mark{display:inline-block;position:relative;width:24px;height:25px}.settings-brand-mark span{position:absolute;width:12px;height:12px;background:#29bcd5}.settings-brand-mark span:nth-child(2){top:10px;background:#334155}.settings-brand-mark span:nth-child(3){top:10px;left:10px;background:#334155;clip-path:polygon(0 0,100% 100%,0 100%)} .customer-logout button{display:flex;align-items:center;gap:5px;color:#536076;background:transparent;border:0;padding:0;cursor:pointer;font:inherit}.customer-logout button:hover{color:#1f6de1}.customer-logout svg{width:17px;height:17px}.customer-logout span{font-size:14px}.customer-custom-logo{max-width:165px;max-height:40px;object-fit:contain} @media(max-width:1180px){.settings-workspace{grid-template-columns:285px minmax(0,1fr);gap:20px;padding:20px}.settings-provider-links{grid-template-columns:repeat(2,minmax(0,1fr))}.customer-logout span{display:none}} @media(max-width:860px){.settings-workspace{display:block;padding:18px}.settings-nav-card{max-height:none;margin-bottom:20px}.settings-panel{max-width:none}.settings-panel-heading{margin-top:5px}.settings-provider-links{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:600px){.settings-workspace{padding:14px}.settings-panel-heading{display:block}.settings-save-state{display:inline-flex;margin-top:10px}.settings-fields{padding:18px}.settings-notice{margin:16px 18px 0}.settings-provider-links{grid-template-columns:1fr;padding:12px 18px 0}.settings-tabs{padding-left:10px}.settings-add-tag{display:block}.settings-add-tag input{margin:7px 0}.settings-nav-group>summary{grid-template-columns:30px minmax(0,1fr) 16px}} /* ========================================================== Settings โ€” Invoice-style visual system ========================================================== */ .settings-theme .customer-content{min-width:0;flex:1;padding:0;max-width:none;background:#f6f8fb} .settings-workspace{width:100%;max-width:1640px;margin:0 auto;box-sizing:border-box;grid-template-columns:278px minmax(0,1fr);gap:16px;padding:18px 20px 36px;background:#f6f8fb;color:#263954;font-size:13px} .settings-sections{min-width:0} .settings-nav-heading{align-items:center;min-height:76px;margin:0 0 10px;padding:14px 16px;border:1px solid #dce4ef;border-radius:14px;background:linear-gradient(120deg,#fff 62%,#f5f8ff 100%);box-shadow:0 6px 20px rgba(31,48,76,.055)} .settings-nav-heading span:first-child{margin-bottom:3px;color:#5f6bd6;font-size:9.5px;font-weight:850;letter-spacing:.1em} .settings-nav-heading h1{margin:0;color:#18263b;font-size:21px;font-weight:800;letter-spacing:-.025em} .settings-count{min-width:29px;height:29px;padding:0 8px;border:1px solid #d7e0eb;border-radius:7px;background:#f7f9fc;color:#5d6e83;font-size:10px;font-weight:800} .settings-search-wrap{margin-bottom:10px}.settings-search-wrap input{height:36px;padding-left:35px;border:1px solid #cfd9e5;border-radius:7px;background:#fff;color:#30435c;font-size:11px;box-shadow:none}.settings-search-wrap svg{left:11px;width:14px;height:14px}.settings-search-wrap input:focus{outline:0;border-color:#9bb5f0;box-shadow:0 0 0 3px #eef4ff} .settings-nav-card,.settings-card{border:1px solid #dce3ec;border-radius:12px;background:#fff;box-shadow:0 5px 18px rgba(31,48,76,.055)} .settings-nav-card{padding:7px;max-height:calc(100vh - 188px)} .settings-nav-group{border-bottom:1px solid #edf1f5}.settings-nav-group>summary{grid-template-columns:30px minmax(0,1fr) 16px;gap:8px;min-height:48px;padding:7px 8px;border-radius:8px;color:#40536b}.settings-nav-group>summary:hover{background:#f8fafc}.settings-nav-group[open]>summary{background:#f7f9fd;color:#21344f}.settings-nav-group-icon{width:28px;height:28px;border:1px solid #dbe5f2;border-radius:7px;background:#f2f6ff;color:#4967c7}.settings-nav-group-icon svg{width:14px;height:14px}.settings-nav-group summary strong{font-size:11.5px;font-weight:800}.settings-nav-group summary small{margin-top:1px;color:#8a98aa;font-size:9px;line-height:1.25}.settings-nav-chevron{width:13px;height:13px} .settings-nav-links{padding:3px 5px 7px 38px}.settings-nav-links a{min-height:31px;padding:0 8px;margin:2px 0;border:1px solid transparent;border-radius:6px;color:#617188;font-size:10.5px;font-weight:700}.settings-nav-links a svg{width:13px;height:13px}.settings-nav-links a:hover{border-color:#e0e7f0;background:#fafcff;color:#285fc1}.settings-nav-links a.active{border-color:#cbd9f2;background:#f2f6ff;color:#285fc1}.settings-search-empty{padding:14px;color:#8b98aa;font-size:11px} .settings-panel{min-width:0;max-width:none}.settings-panel-heading{align-items:center;min-height:86px;margin:0 0 12px;padding:16px 18px;border:1px solid #dce4ef;border-radius:14px;background:linear-gradient(120deg,#fff 62%,#f5f8ff 100%);box-shadow:0 6px 20px rgba(31,48,76,.055)} .settings-eyebrow{margin-bottom:4px;color:#5f6bd6;font-size:9.5px;font-weight:850;letter-spacing:.1em}.settings-panel-heading h2{margin:0;color:#18263b;font-size:22px;font-weight:800;letter-spacing:-.025em}.settings-panel-heading p{margin:5px 0 0;color:#76859a;font-size:11px;line-height:1.4}.settings-save-state{min-height:32px;display:inline-flex;align-items:center;padding:0 10px;border:1px solid #ced8e5;border-radius:7px;background:#fff;color:#52647c;font-size:10px;font-weight:750;box-shadow:0 1px 2px rgba(31,48,76,.03)} .settings-card{overflow:hidden}.settings-tabs{display:flex;flex-wrap:wrap;gap:6px;padding:10px 12px;border-bottom:1px solid #e3e9f1;background:linear-gradient(90deg,#fbfcff,#f7f9ff)}.settings-tabs a{min-height:32px;display:inline-flex;align-items:center;padding:0 10px;border:1px solid #dce4ed;border-radius:7px;background:#fff;color:#5b6c82;font-size:10.5px;font-weight:700}.settings-tabs a:hover{border-color:#c8d5e6;background:#fafcff;color:#285fc1}.settings-tabs a.active{border-color:#9bb5f0;background:#f2f6ff;color:#285fc1} .settings-fields{padding:16px 18px}.settings-field{padding:0 0 14px;margin:0 0 14px;border-bottom:1px solid #edf1f5}.settings-field>label,.settings-add-tag label{margin-bottom:6px;color:#40536b;font-size:10.5px;font-weight:750}.settings-field input:not([type=radio]),.settings-field select,.settings-field textarea,.settings-tag-row input,.settings-add-tag input{min-height:36px;padding:7px 9px;border:1px solid #cfd9e5;border-radius:7px;background:#fff;color:#30435c;font-size:11px;box-shadow:none}.settings-field textarea{min-height:88px}.settings-field input:focus,.settings-field textarea:focus,.settings-field select:focus,.settings-tag-row input:focus,.settings-add-tag input:focus{outline:0;border-color:#9bb5f0;box-shadow:0 0 0 3px #eef4ff}.settings-radios{gap:14px}.settings-radios label{gap:5px;color:#5d6e83;font-size:11px} .settings-footer{min-height:58px;display:flex;align-items:center;justify-content:flex-end;padding:0 16px;border-top:1px solid #e3e9f1;background:linear-gradient(90deg,#fbfcff,#f7f9ff)}.settings-footer button,.settings-add-tag button,.settings-tag-row button{min-height:34px;padding:0 11px;border:1px solid #3157df;border-radius:7px;background:#3157df;color:#fff;font-size:10.5px;font-weight:750;box-shadow:0 4px 10px rgba(49,87,223,.12)}.settings-footer button:hover,.settings-add-tag button:hover,.settings-tag-row button:hover{border-color:#2749bf;background:#2749bf}.settings-tag-row .settings-delete{border-color:#e2e8ef;background:#fff;color:#b63b45;box-shadow:none}.settings-tag-row .settings-delete:hover{border-color:#f0c1c5;background:#fff7f8;color:#a72f3b} .settings-notice{margin:14px 16px 0;padding:11px 12px;border:1px solid #d9e4f2;border-left:3px solid #7ea1d7;border-radius:8px;background:#f8fbff;color:#4c6280;font-size:10.5px;line-height:1.5}.settings-notice code{border-color:#dce5f1;background:#fff;color:#31465f}.settings-error{font-size:10px} .settings-provider-links{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:12px 16px 0}.settings-provider-links a{min-height:58px;padding:10px 11px;border:1px solid #dce4ed;border-radius:9px;background:#fff}.settings-provider-links a:hover{border-color:#b9c9df;background:#f8fbff}.settings-provider-links strong{color:#21344f;font-size:11px}.settings-provider-links span{margin-top:2px;color:#8a98aa;font-size:9.5px} .settings-tag-row{margin-bottom:7px}.settings-tag-count{min-width:38px;padding:0 9px;display:grid;place-items:center;border:1px solid #cfd9e5;border-radius:7px 0 0 7px;background:#f8fafc;color:#5d6e83;font-size:10px}.settings-tag-row input{border-radius:0}.settings-tag-row button{border-radius:0}.settings-tag-row .settings-delete{border-radius:0 7px 7px 0}.settings-add-tag{gap:7px;margin-top:18px} .settings-logos{padding:0 16px}.settings-logo-row{min-height:64px;border-bottom:1px solid #e8edf3}.settings-logo-preview{min-height:63px;gap:9px}.settings-logo-preview img{max-width:165px;max-height:38px}.settings-logo-preview strong{font-size:23px}.settings-logo-preview small{color:#8b98aa;font-size:10px}.settings-logo-row button{color:#b63b45;font-size:19px} /* Payment gateways inside Settings */ .gateway-warning{margin:14px 16px 0;padding:11px 12px;border:1px solid #f0dfba;border-radius:8px;background:#fffaf0;color:#8b681d;font-size:10.5px;line-height:1.45}.gateway-warning strong,.gateway-warning span{display:block}.gateway-warning span{margin-top:3px;color:#806d43} .gateway-intro{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;border-bottom:1px solid #e3e9f1;background:linear-gradient(90deg,#fbfcff,#f7f9ff)}.gateway-intro>div:first-child span{display:block;color:#5f6bd6;font-size:9px;font-weight:850;letter-spacing:.09em}.gateway-intro h3{margin:3px 0 0;color:#21314c;font-size:13px;font-weight:800}.gateway-intro p{margin:4px 0 0;color:#7b899b;font-size:10px;line-height:1.45}.gateway-security{min-width:180px;display:grid;grid-template-columns:30px 1fr;grid-template-rows:auto auto;column-gap:8px;align-items:center;padding:9px 10px;border:1px solid #dce4ed;border-radius:8px;background:#fff}.gateway-security svg{grid-row:1/3;width:17px;height:17px;color:#315fc5}.gateway-security strong{color:#31465f;font-size:10px}.gateway-security small{color:#8a98aa;font-size:8.5px} .gateway-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:12px 16px 16px}.gateway-card{overflow:hidden;border:1px solid #dce3ec;border-radius:10px;background:#fff;box-shadow:0 2px 8px rgba(31,48,76,.035)}.gateway-card>header{min-height:58px;display:flex;align-items:center;gap:9px;padding:10px 12px;border-bottom:1px solid #e6ebf2;background:#f8fafc}.gateway-logo{width:31px;height:31px;display:grid;place-items:center;flex:none;border:1px solid #d7e2fa;border-radius:8px;background:#f2f6ff;color:#315fc5;font-size:9px;font-weight:850}.gateway-card>header>div:nth-child(2){min-width:0;flex:1}.gateway-card>header h3{margin:0;color:#21344f;font-size:11.5px;font-weight:800}.gateway-card>header span{display:block;margin-top:2px;color:#8a98aa;font-size:8.5px}.gateway-card>header b{min-height:22px;display:inline-flex;align-items:center;padding:0 7px;border:1px solid #d7e0eb;border-radius:999px;background:#f7f9fc;color:#66778d;font-size:8.5px}.gateway-card>header b.ready{background:#eefaf4;border-color:#d5f0e1;color:#198754}.gateway-card>header b.disabled{background:#f4f6f9;color:#7a8798} .gateway-card form{margin:0}.gateway-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:12px}.gateway-fields label{display:grid;gap:5px;color:#52647c;font-size:9.5px;font-weight:750}.gateway-fields input,.gateway-fields select,.gateway-fields textarea{box-sizing:border-box;width:100%;min-height:34px;padding:7px 8px;border:1px solid #cfd9e5;border-radius:6px;background:#fff;color:#30435c;font:inherit;font-size:10px}.gateway-fields textarea{min-height:74px;resize:vertical}.gateway-fields input:focus,.gateway-fields select:focus,.gateway-fields textarea:focus{outline:0;border-color:#9bb5f0;box-shadow:0 0 0 3px #eef4ff}.gateway-wide{grid-column:1/-1}.gateway-webhook{margin:0 12px 12px;padding:9px 10px;border:1px solid #dce4ed;border-radius:7px;background:#f8fafc;color:#5d6e83;font-size:9px;line-height:1.45}.gateway-webhook b,.gateway-webhook code,.gateway-webhook small{display:block}.gateway-webhook code{margin:4px 0;padding:4px 6px;border:1px solid #e0e6ef;border-radius:5px;background:#fff;color:#315fc5;overflow-wrap:anywhere}.gateway-card form>footer{min-height:50px;display:flex;align-items:center;gap:12px;padding:8px 12px;border-top:1px solid #e6ebf2;background:#fbfcfe}.gateway-card form>footer label{display:flex;align-items:center;gap:5px;color:#5d6e83;font-size:9.5px}.gateway-card form>footer button,.gateway-card-actions button,.gateway-add button{min-height:32px;padding:0 10px;border:1px solid #3157df;border-radius:6px;background:#3157df;color:#fff;font:inherit;font-size:9.5px;font-weight:750;cursor:pointer}.gateway-card form>footer button{margin-left:auto}.gateway-card-actions{display:flex;justify-content:flex-end;gap:6px;padding:8px 12px 11px}.gateway-card-actions form{margin:0}.gateway-card-actions button{border-color:#cfd9e5;background:#fff;color:#52647c;box-shadow:none}.gateway-card-actions button:hover{background:#f7f9fd;color:#285fc1}.gateway-card-actions button.danger{border-color:#ecd0d4;background:#fff7f8;color:#b63b45} .gateway-add{margin:0 16px 16px;border:1px solid #dce4ed;border-radius:9px;background:#fff}.gateway-add summary{list-style:none;min-height:42px;display:flex;align-items:center;gap:7px;padding:0 12px;color:#40536b;font-size:10.5px;font-weight:750;cursor:pointer}.gateway-add summary::-webkit-details-marker{display:none}.gateway-add summary svg{width:13px;height:13px;color:#315fc5}.gateway-add[open] summary{border-bottom:1px solid #e6ebf2;background:#f8fafc}.gateway-add>form{padding:12px}.gateway-add .gateway-fields{padding:0 0 10px}.gateway-add>form>p{margin:0 0 10px;color:#7f8c9d;font-size:9.5px} @media(max-width:1180px){.settings-workspace{grid-template-columns:250px minmax(0,1fr);gap:14px;padding:16px}.settings-provider-links{grid-template-columns:repeat(2,minmax(0,1fr))}.gateway-grid{grid-template-columns:1fr}} @media(max-width:860px){.settings-workspace{display:block;padding:14px}.settings-nav-card{max-height:none;margin-bottom:12px}.settings-panel-heading{margin-top:0}.gateway-intro{align-items:flex-start;flex-direction:column}.gateway-security{min-width:0;width:100%;box-sizing:border-box}} @media(max-width:600px){.settings-workspace{padding:10px}.settings-panel-heading{align-items:flex-start;flex-direction:column}.settings-save-state{margin-top:0}.settings-fields{padding:14px}.settings-notice{margin:12px 14px 0}.settings-provider-links{grid-template-columns:1fr;padding:10px 14px 0}.settings-tabs{padding:8px}.settings-tabs a{flex:1 1 120px;justify-content:center}.settings-add-tag{display:block}.settings-add-tag input{margin:6px 0}.gateway-grid{padding:10px 12px 12px}.gateway-fields{grid-template-columns:1fr}.gateway-wide{grid-column:auto}.gateway-add{margin:0 12px 12px}} /* ============================================================ SECTION: staff-access.css ============================================================ */ .staff-row-actions{white-space:nowrap}.staff-row-actions a,.staff-row-actions button,.staff-delete{border:1px solid #cbd5e1!important;border-radius:5px;padding:6px 10px;background:#fff;color:#24344b;cursor:pointer;font:inherit;text-decoration:none}.staff-row-actions form{margin-left:5px}.staff-row-actions button,.staff-delete{color:#b4232d}.staff-delete{display:inline-block;margin-left:8px;padding:8px 12px}.staff-detail-info form{display:inline} /* ============================================================ SECTION: staff-member-modern.css ============================================================ */ .tm-page{--ink:#172033;--muted:#708096;--line:#e1e7ef;max-width:1180px;margin:0 auto 50px;color:var(--ink)} .tm-hero{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;overflow:hidden;margin-bottom:18px;padding:28px 30px;border:1px solid #dfe6ef;border-radius:18px;background:linear-gradient(125deg,#fff 0%,#f7faff 62%,#eaf2ff 100%);box-shadow:0 12px 32px #1526440d}.tm-hero:after{position:absolute;right:-65px;bottom:-105px;width:260px;height:260px;border:45px solid #dce9ff80;border-radius:50%;content:""}.tm-identity,.tm-meta,.tm-hero-actions{position:relative;z-index:1;display:flex;align-items:center}.tm-identity{gap:20px}.tm-avatar{width:82px;height:82px;flex:0 0 82px;border:4px solid #fff;border-radius:22px;object-fit:cover;box-shadow:0 9px 24px #223d6a24}.tm-avatar-fallback{display:grid;place-items:center;background:linear-gradient(135deg,#1e65d5,#643fd7);color:#fff;font-size:26px;font-weight:800}.tm-eyebrow,.tm-section-heading span,.tm-card header span,.tm-tab-title span{color:#4776c9;font-size:10px;font-weight:850;letter-spacing:.14em}.tm-hero h1{margin:5px 0 9px;font-size:29px;letter-spacing:-.035em}.tm-meta{flex-wrap:wrap;gap:8px 16px;color:#65748a;font-size:12px}.tm-meta span{display:flex;align-items:center;gap:6px}.tm-meta svg{width:14px;height:14px}.tm-status{padding:5px 9px;border-radius:20px;font-weight:750}.tm-status svg{width:7px;height:7px;fill:currentColor}.tm-status.active{background:#e5f8ef;color:#138653}.tm-status.inactive{background:#fff0f0;color:#c5414b}.tm-hero-actions{gap:9px}.tm-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid #17253a;border-radius:9px;background:#17253a;color:#fff!important;padding:10px 14px;text-decoration:none;font:inherit;font-size:12px;font-weight:750;cursor:pointer}.tm-button svg{width:15px;height:15px}.tm-button.ghost{border-color:#d0dae7;background:#fff;color:#36465d!important}.tm-button.danger{border-color:#f1c9ce;background:#fff5f6;color:#b82d3a!important} .tm-time-card{margin-bottom:18px;padding:23px 24px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:0 8px 25px #182a4509}.tm-section-heading,.tm-tab-title{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}.tm-section-heading h2,.tm-tab-title h2,.tm-card header h2{margin:4px 0 3px;font-size:17px}.tm-section-heading p,.tm-tab-title p{margin:0;color:var(--muted);font-size:12px}.tm-section-heading>a{display:flex;align-items:center;gap:5px;color:#2460cf;font-size:12px;font-weight:750;text-decoration:none}.tm-section-heading>a svg{width:15px}.tm-stat-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:18px}.tm-stat{padding:15px 16px;border:1px solid #e2e8f0;border-radius:11px;background:#fafbfd}.tm-stat span,.tm-stat small,.tm-stat strong{display:block}.tm-stat span{min-height:30px;color:#657389;font-size:11px}.tm-stat strong{margin:2px 0;font-size:21px;letter-spacing:-.03em}.tm-stat small{color:#9aa5b4;font-size:9px}.tm-stat.primary{border-color:#315fc9;background:linear-gradient(135deg,#1f3151,#284c87);color:#fff}.tm-stat.primary span,.tm-stat.primary small{color:#c9d8f2} .tm-tabs{display:flex;gap:4px;overflow:auto;margin-bottom:18px;padding:5px;border:1px solid var(--line);border-radius:12px;background:#f5f7fa}.tm-tabs a{display:flex;align-items:center;gap:7px;white-space:nowrap;padding:9px 13px;border-radius:8px;color:#58677c;text-decoration:none;font-size:12px;font-weight:700}.tm-tabs a svg{width:15px;height:15px}.tm-tabs a b{min-width:19px;padding:2px 5px;border-radius:20px;background:#e5eaf1;color:#65748a;text-align:center;font-size:9px}.tm-tabs a.active{background:#fff;color:#1e5bc6;box-shadow:0 2px 8px #1d2d4615}.tm-tabs a.active b{background:#e6efff;color:#1e5bc6} .tm-profile-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:16px}.tm-card{overflow:hidden;border:1px solid var(--line);border-radius:15px;background:#fff;box-shadow:0 8px 26px #16243b0a}.tm-card>header{display:flex;align-items:center;justify-content:space-between;padding:20px 22px 14px;border-bottom:1px solid #edf0f4}.tm-card header h2{margin-bottom:0}.tm-card>header>a{display:grid;width:32px;height:32px;place-items:center;border:1px solid #dce3ec;border-radius:8px;color:#52637a}.tm-card>header>a svg{width:14px}.tm-detail-list{padding:8px 22px 17px}.tm-detail-list>div{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid #edf1f5}.tm-detail-list>div:last-child{border:0}.tm-detail-list>div>svg{width:18px;color:#66809f}.tm-detail-list span,.tm-detail-list em{display:block}.tm-detail-list span{color:#7b8798;font-size:10px}.tm-detail-list em{margin-top:3px;color:#25344a;font-size:12px;font-style:normal;font-weight:700}.tm-detail-list a{color:#235fc5;text-decoration:none}.tm-work-facts{display:grid;grid-template-columns:1fr 1fr;gap:11px;padding:20px 22px}.tm-work-facts>div{padding:13px;border:1px solid #e6eaf0;border-radius:9px;background:#fafbfc}.tm-work-facts>div.wide{grid-column:1/-1}.tm-work-facts span,.tm-work-facts strong{display:block}.tm-work-facts span,.tm-signature>span{margin-bottom:6px;color:#7a8799;font-size:10px}.tm-work-facts strong{font-size:12px}.tm-chips{display:flex;flex-wrap:wrap;gap:6px}.tm-chips b{padding:5px 8px;border-radius:6px;background:#eaf1ff;color:#265cb8;font-size:10px}.tm-chips em{color:#8c98a8;font-size:11px}.tm-signature{margin:0 22px 20px;padding-top:15px;border-top:1px solid #e8edf3}.tm-signature p{margin:0;white-space:pre-line;color:#536176;font-size:12px;line-height:1.55}.tm-social-links{padding:10px 22px 18px}.tm-social-links>a,.tm-social-links>div{display:flex;align-items:center;gap:11px;padding:12px 0;border-bottom:1px solid #edf1f5;color:#27364a;text-decoration:none}.tm-social-links>a:last-child,.tm-social-links>div:last-child{border:0}.tm-social-links svg{width:18px;color:#416aa8}.tm-social-links>a>svg:last-child{width:14px;margin-left:auto;color:#8794a6}.tm-social-links span,.tm-social-links small{display:block}.tm-social-links span{min-width:0;font-size:12px;font-weight:700}.tm-social-links small{overflow:hidden;margin-top:3px;color:#8793a5;font-size:9px;font-weight:400;text-overflow:ellipsis}.tm-empty-inline{color:#78869a!important}.tm-admin-card{padding-bottom:20px}.tm-admin-card>p{margin:17px 22px;color:#6c798d;font-size:12px;line-height:1.55}.tm-admin-card>div:last-child{display:flex;flex-wrap:wrap;gap:8px;padding:0 22px}.tm-admin-card form{display:inline-flex} .tm-tab-card{min-height:260px}.tm-tab-title{align-items:center;padding:21px 23px;border-bottom:1px solid #e9edf3}.tm-tab-title>strong{display:grid;min-width:51px;height:51px;place-items:center;border-radius:13px;background:#eaf1ff;color:#255fca;font-size:14px}.tm-note-form{padding:20px 23px;border-bottom:1px solid #e8edf3}.tm-note-form label{display:block;margin-bottom:7px;font-size:11px;font-weight:750}.tm-note-form textarea{box-sizing:border-box;width:100%;min-height:95px;margin-bottom:10px;padding:11px;border:1px solid #d4dde8;border-radius:9px;resize:vertical;font:inherit;font-size:12px}.tm-note-form .tm-button{margin-left:auto}.tm-table-wrap{overflow-x:auto}.tm-table{width:100%;min-width:650px;border-collapse:collapse}.tm-table th,.tm-table td{padding:14px 17px;border-bottom:1px solid #edf1f5;text-align:left;font-size:11px}.tm-table th{background:#f8fafc;color:#718096;font-size:9px;letter-spacing:.065em;text-transform:uppercase}.tm-table tbody tr:hover{background:#fbfcfe}.tm-table a{display:inline-flex;align-items:center;gap:5px;color:#285fbf;text-decoration:none}.tm-table a svg{width:12px}.tm-time-pill,.tm-project-status{display:inline-flex;padding:5px 8px;border-radius:20px;background:#eaf7f1;color:#157a51;font-size:10px;font-weight:750}.tm-project-status{background:#eaf1ff;color:#285eb7}.tm-empty-row{height:120px;color:#8793a5!important;text-align:center!important} @media(max-width:900px){.tm-hero{align-items:flex-start;flex-direction:column}.tm-stat-grid{grid-template-columns:repeat(3,1fr)}.tm-profile-grid{grid-template-columns:1fr}.tm-hero-actions{width:100%}}@media(max-width:620px){.tm-hero{padding:21px}.tm-identity{align-items:flex-start}.tm-avatar{width:62px;height:62px;flex-basis:62px;border-radius:17px}.tm-hero h1{font-size:23px}.tm-meta{align-items:flex-start;flex-direction:column;gap:7px}.tm-hero-actions .tm-button{flex:1}.tm-stat-grid{grid-template-columns:1fr 1fr}.tm-section-heading{align-items:flex-start;flex-direction:column}.tm-work-facts{grid-template-columns:1fr}.tm-work-facts>div.wide{grid-column:auto}} /* ============================================================ SECTION: staff.css ============================================================ */ .staff-page,.staff-detail-page{width:100%}.staff-actions{margin:2px 0 9px}.staff-primary{display:inline-block;background:#1e293b;color:#fff!important;border:0;border-radius:6px;padding:9px 13px;text-decoration:none;cursor:pointer;font:inherit;font-weight:600}.staff-panel{background:#fff;border:1px solid #dce3ee;border-radius:7px;box-shadow:0 2px 5px #16203617;overflow:hidden}.staff-toolbar{padding:22px 24px 12px;display:flex;gap:5px}.staff-toolbar select,.staff-toolbar input,.staff-toolbar button{border:1px solid #cbd5e1;background:#fff;border-radius:5px;padding:7px 9px;color:#334155}.staff-toolbar input{margin-left:auto;min-width:180px}.staff-overflow{overflow-x:auto}.staff-list{border-collapse:collapse;width:100%;min-width:620px}.staff-list th,.staff-list td{padding:13px 14px;text-align:left;border-bottom:1px solid #e6eaf1}.staff-list th{background:#f7f9fc;font-weight:600}.staff-list td a{color:#25364e;text-decoration:none}.staff-list td a:hover{text-decoration:underline}.staff-list td small{display:block;margin-top:7px;color:#64748b}.staff-list td form{display:inline}.staff-list td form button{background:none;border:0;cursor:pointer}.staff-panel>footer{display:flex;justify-content:space-between;align-items:center;padding:14px 24px;background:#fafbfe;border-top:1px solid #e6eaf1;color:#64748b}.staff-avatar{width:29px;height:29px;border-radius:50%;object-fit:cover;background:#dff3ec;display:inline-grid;place-items:center;margin-right:5px;vertical-align:middle;color:#33796e}.staff-switch{width:49px;height:23px;border:0;border-radius:20px;background:#cbd5e1;cursor:pointer;position:relative}.staff-switch.on{background:#3b82f6}.staff-switch:after{content:'';position:absolute;top:3px;left:3px;width:17px;height:17px;background:#fff;border-radius:50%;transition:left .15s}.staff-switch.on:after{left:29px}.staff-switch:disabled{opacity:.65;cursor:not-allowed}.staff-form-page{max-width:940px;margin:0 auto}.staff-form-page h1,.staff-detail-page h1{font-size:20px;margin:0 0 12px}.staff-tabs{display:flex;gap:0;background:#f8fafc;border-bottom:1px solid #e3e8f0;padding:0 20px}.staff-tabs button,.staff-tabs a{padding:12px 15px;background:none;border:0;border-bottom:2px solid transparent;color:#334155;text-decoration:none;cursor:pointer;font:inherit}.staff-tabs .active{border-bottom-color:#334155;background:#fff}.staff-form-body{padding:20px 22px}.staff-form-body[hidden]{display:none}.staff-form-body>label:not(.staff-check),.staff-note-form label{display:block;font-weight:600;margin-bottom:15px}.staff-form-body input:not([type=checkbox]),.staff-form-body select,.staff-form-body textarea,.staff-note-form textarea{box-sizing:border-box;display:block;width:100%;margin-top:6px;padding:8px 10px;min-height:34px;border:1px solid #cbd5e1;border-radius:5px;background:#fff;color:#334155;font:inherit}.staff-form-body textarea,.staff-note-form textarea{min-height:80px}.staff-form-body em{color:#e04545;font-style:normal}.staff-check{display:block;margin-bottom:8px}.staff-departments{margin:18px 0}.staff-departments strong{display:block;margin-bottom:12px}.staff-form-body hr{border:0;border-top:1px solid #e6eaf1;margin:17px 0}.staff-permission-table{width:100%;border-collapse:collapse;margin-top:12px}.staff-permission-table th,.staff-permission-table td{border:1px solid #e4e9f1;text-align:left;vertical-align:top;padding:7px 10px;width:50%}.staff-permission-table th{background:#f7f9fc}.staff-permission-table td label{display:block;padding:2px 0}.staff-form-body h2{font-size:18px}.staff-detail-page{max-width:1040px;margin:0 auto}.staff-summary>a{color:#64748b;text-decoration:none}.staff-summary-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:13px 0 30px}.staff-summary-grid>div{padding:11px 12px;border:1px solid #dce3ee;background:#fff;border-radius:7px}.staff-summary-grid strong{display:block;margin-top:5px}.staff-detail-page>h2{font-size:20px}.staff-detail-tabs{display:flex;gap:5px;background:#eff3f8;padding:5px;border-radius:6px;margin-bottom:12px}.staff-detail-tabs a{padding:8px 12px;color:#334155;text-decoration:none}.staff-detail-tabs .active{background:#fff;border-radius:5px}.staff-detail-card{min-height:140px}.staff-detail-info{padding:22px}.staff-detail-info p{margin:0 0 14px}.staff-note-form{padding:22px}.staff-note-form button{margin-top:5px}@media(max-width:700px){.staff-summary-grid{grid-template-columns:repeat(2,1fr)}.staff-toolbar{flex-wrap:wrap}.staff-toolbar input{margin-left:0}} .staff-export{border:1px solid #cbd5e1;background:#fff;border-radius:5px;padding:7px 9px;color:#334155;text-decoration:none} /* Modern team member profile */ .staff-profile-page{max-width:1180px}.staff-profile-breadcrumb{margin:0 0 12px}.staff-profile-breadcrumb a{display:inline-flex;align-items:center;gap:7px;color:#6c7c91;text-decoration:none;font-size:14px}.staff-profile-breadcrumb a:hover{color:#1556ed}.staff-profile-breadcrumb svg{width:16px;height:16px}.staff-profile-hero{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:26px 28px;background:#fff;border:1px solid #dce3ee;border-radius:10px;box-shadow:0 2px 5px #16203612}.staff-profile-identity{display:flex;align-items:center;gap:18px;min-width:0}.staff-profile-avatar{width:76px;height:76px;flex:none;border-radius:20px;object-fit:cover;border:1px solid #dce5f0;box-shadow:0 5px 16px #25364e14}.staff-profile-avatar-fallback{display:grid;place-items:center;background:linear-gradient(145deg,#e7f0ff,#edf8f5);color:#2661ad;font-size:23px;font-weight:700}.staff-profile-heading{min-width:0}.staff-profile-title-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.staff-profile-title-row h1{margin:0;font-size:24px;line-height:1.25;color:#1f2d40}.staff-profile-heading>p{margin:5px 0 10px;color:#6e7d91;font-size:14px}.staff-profile-status{display:inline-flex;align-items:center;gap:6px;border-radius:99px;padding:5px 9px;background:#f4f6f9;color:#65758a;font-size:12px;font-weight:600}.staff-profile-status span{width:7px;height:7px;border-radius:50%;background:#94a3b8}.staff-profile-status.is-active{background:#edf9f2;color:#18844b}.staff-profile-status.is-active span{background:#20a760}.staff-profile-status.is-inactive{background:#fff2f2;color:#b63a43}.staff-profile-status.is-inactive span{background:#d64d55}.staff-profile-meta{display:flex;gap:15px;flex-wrap:wrap;color:#718096;font-size:13px}.staff-profile-meta a,.staff-profile-meta span{display:inline-flex;align-items:center;gap:6px;color:inherit;text-decoration:none}.staff-profile-meta a:hover{color:#1556ed}.staff-profile-meta svg{width:14px;height:14px}.staff-profile-actions{display:flex;align-items:center;gap:8px;flex:none}.staff-profile-actions form{margin:0}.staff-profile-secondary{min-height:38px;display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid #ced8e5;border-radius:7px;padding:0 12px;background:#fff;color:#27374e;text-decoration:none;font:inherit;font-size:14px;font-weight:600;cursor:pointer}.staff-profile-secondary:hover{border-color:#aebbd0;background:#f9fbfe}.staff-profile-secondary svg{width:15px;height:15px}.staff-profile-stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:12px 0 18px}.staff-profile-stats article{display:flex;align-items:center;gap:12px;min-height:72px;padding:13px 14px;background:#fff;border:1px solid #dde4ed;border-radius:8px}.staff-stat-icon{width:35px;height:35px;flex:none;display:grid;place-items:center;border-radius:9px;background:#eef4ff;color:#286bd8}.staff-stat-icon svg{width:17px;height:17px}.staff-profile-stats span,.staff-profile-stats strong{display:block}.staff-profile-stats span{color:#7a8798;font-size:11px;line-height:1.3}.staff-profile-stats strong{margin-top:4px;color:#25354b;font-size:16px}.staff-profile-tabs{display:flex;align-items:center;gap:2px;padding:0 7px;background:#fff;border:1px solid #dce3ee;border-radius:9px;margin-bottom:14px;overflow-x:auto}.staff-profile-tabs a{display:flex;align-items:center;gap:7px;min-height:48px;padding:0 13px;border-bottom:2px solid transparent;color:#5b6a7e;text-decoration:none;font-size:14px;white-space:nowrap}.staff-profile-tabs a:hover{color:#1d4f91}.staff-profile-tabs a.active{border-bottom-color:#1556ed;color:#1556ed;font-weight:600}.staff-profile-tabs svg{width:16px;height:16px}.staff-profile-tabs a span{min-width:20px;padding:2px 6px;border-radius:99px;background:#f0f3f7;color:#718096;text-align:center;font-size:10px}.staff-profile-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(270px,.75fr);gap:14px}.staff-profile-side{display:flex;flex-direction:column;gap:14px}.staff-profile-card{background:#fff;border:1px solid #dce3ee;border-radius:9px;box-shadow:0 2px 5px #1620360e;overflow:hidden}.staff-profile-card>header{min-height:52px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 18px;border-bottom:1px solid #e8edf4}.staff-profile-card>header>div{display:flex;align-items:center;gap:9px}.staff-profile-card>header svg{width:17px;height:17px;color:#67809f}.staff-profile-card h2{margin:0;font-size:15px;color:#26374e}.staff-profile-details{display:grid;grid-template-columns:1fr 1fr;gap:0;padding:6px 18px 17px}.staff-profile-details>div{min-height:70px;padding:15px 5px 12px;border-bottom:1px solid #edf1f5}.staff-profile-details>div:nth-last-child(-n+2){border-bottom:0}.staff-profile-details span,.staff-profile-details strong{display:block}.staff-profile-details span{margin-bottom:6px;color:#8a96a6;font-size:12px}.staff-profile-details strong{color:#2a3b52;font-size:14px;font-weight:600;overflow-wrap:anywhere}.staff-profile-compact-list{padding:6px 17px 11px}.staff-profile-compact-list>div{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:12px 1px;border-bottom:1px solid #edf1f5}.staff-profile-compact-list>div:last-child{border-bottom:0}.staff-profile-compact-list span{color:#7d8a9b;font-size:12px}.staff-profile-compact-list strong{max-width:58%;color:#2b3b51;text-align:right;font-size:13px}.staff-social-links{padding:10px 16px 14px}.staff-social-links a,.staff-social-links>div{min-height:39px;display:flex;align-items:center;gap:9px;padding:0 6px;border-bottom:1px solid #eef2f6;color:#33465e;text-decoration:none;font-size:13px}.staff-social-links a:last-child,.staff-social-links>div:last-child{border-bottom:0}.staff-social-links svg{width:15px;height:15px;color:#7188a4}.staff-social-links a svg:last-child{margin-left:auto;width:13px}.staff-social-links>div span{color:#718096}.staff-social-links>div strong{margin-left:auto;font-weight:500}.staff-profile-empty{margin:0;padding:11px 4px;color:#8794a5;font-size:13px}.staff-profile-tab-card{min-height:260px}.staff-card-count{color:#8693a4;font-size:12px}.staff-profile-note-form{padding:18px;border-bottom:1px solid #e8edf4}.staff-profile-note-form label{margin:0;color:#43546b;font-size:13px}.staff-profile-note-form textarea{min-height:92px!important;resize:vertical}.staff-profile-note-form .staff-primary{display:inline-flex;align-items:center;gap:7px;margin-top:10px}.staff-profile-note-form .staff-primary svg{width:15px}.staff-note-list{padding:4px 18px 12px}.staff-note-list article{display:flex;gap:12px;padding:15px 2px;border-bottom:1px solid #edf1f5}.staff-note-list article:last-child{border-bottom:0}.staff-note-icon{width:31px;height:31px;flex:none;display:grid;place-items:center;border-radius:8px;background:#f1f5fa;color:#5f7898}.staff-note-icon svg{width:15px}.staff-note-list p{margin:0 0 6px;white-space:pre-wrap;color:#33445a;font-size:13px;line-height:1.55}.staff-note-list small{color:#8b97a7;font-size:11px}.staff-profile-table-wrap{overflow-x:auto}.staff-profile-table{width:100%;border-collapse:collapse;min-width:650px}.staff-profile-table th{padding:11px 17px;background:#f8faff;color:#66758a;text-align:left;font-size:12px;font-weight:600}.staff-profile-table td{padding:14px 17px;border-top:1px solid #edf1f5;color:#3f5066;font-size:13px}.staff-profile-table td strong{color:#28394f}.staff-table-status{display:inline-block;border:1px solid #d8e0ea;border-radius:6px;padding:4px 7px;background:#fafbfd;color:#66758a;font-size:11px}.staff-profile-empty-state{min-height:205px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:30px;color:#8a97a7;text-align:center}.staff-profile-empty-state svg{width:30px;height:30px;margin-bottom:4px;color:#a6b2c1}.staff-profile-empty-state strong{color:#526278;font-size:14px}.staff-profile-empty-state span{font-size:12px}.staff-profile-empty-state.compact{min-height:130px}.staff-project-list{padding:5px 18px 13px}.staff-project-list>a{display:flex;align-items:center;gap:12px;min-height:67px;border-bottom:1px solid #edf1f5;color:#2d4057;text-decoration:none}.staff-project-list>a:last-child{border-bottom:0}.staff-project-icon{width:35px;height:35px;flex:none;display:grid;place-items:center;border-radius:9px;background:#eef4ff;color:#286bd8}.staff-project-icon svg{width:17px}.staff-project-copy{min-width:0;flex:1}.staff-project-copy strong,.staff-project-copy small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.staff-project-copy strong{font-size:13px}.staff-project-copy small{margin-top:3px;color:#8a96a6;font-size:11px}.staff-project-status{padding:4px 8px;border:1px solid #d8e0ea;border-radius:6px;color:#66758a;font-size:11px}.staff-project-list>a>svg{width:16px;color:#9aa6b5}@media(max-width:1050px){.staff-profile-stats{grid-template-columns:repeat(3,minmax(0,1fr))}.staff-profile-grid{grid-template-columns:1fr}}@media(max-width:760px){.staff-profile-hero{align-items:flex-start;flex-direction:column;padding:21px}.staff-profile-actions{width:100%;flex-wrap:wrap}.staff-profile-actions>*{flex:1}.staff-profile-secondary{width:100%}.staff-profile-identity{align-items:flex-start}.staff-profile-avatar{width:62px;height:62px;border-radius:16px}.staff-profile-title-row h1{font-size:20px}.staff-profile-meta{flex-direction:column;gap:6px}.staff-profile-stats{grid-template-columns:1fr 1fr}.staff-profile-details{grid-template-columns:1fr}.staff-profile-details>div:nth-last-child(2){border-bottom:1px solid #edf1f5}}@media(max-width:480px){.staff-profile-stats{grid-template-columns:1fr}.staff-profile-identity{flex-direction:column}.staff-profile-tabs a{padding:0 10px}} .staff-profile-secondary.staff-status-activate{border-color:#b9e3cb;background:#f1fbf5;color:#16834b}.staff-profile-secondary.staff-status-activate:hover{border-color:#8fd0aa;background:#e9f8ef}.staff-profile-secondary.staff-status-deactivate{border-color:#ead4d6;background:#fffafa;color:#a43b43}.staff-profile-secondary.staff-status-deactivate:hover{border-color:#dfb9bd;background:#fff3f4}.staff-profile-secondary:disabled{opacity:.55;cursor:not-allowed;background:#f7f8fa;color:#8a96a6;border-color:#d8e0ea} /* ========================================================== Team admin โ€” Knowledge Base aligned workspace ========================================================== */ .team-admin-page{max-width:1540px;margin:0 auto;color:#31455b} .team-page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;margin-bottom:18px} .team-dashboard-hero{padding:23px 24px;border:1px solid #e1e7f0;border-radius:17px;background:linear-gradient(110deg,#fff 0%,#f8fbff 55%,#f8f5ff 100%);box-shadow:0 10px 30px rgba(31,46,75,.06)} .team-hero-main{display:flex;align-items:flex-start;gap:15px;min-width:0}.team-hero-icon{width:46px;height:46px;flex:none;display:grid;place-items:center;border-radius:14px;background:linear-gradient(135deg,#ede9fe,#e6f4ff);color:#4f46e5;box-shadow:inset 0 0 0 1px rgba(79,70,229,.08)}.team-hero-icon svg{width:21px;height:21px} .team-eyebrow{display:block;margin-bottom:5px;color:#6d63e8;font-size:10px;font-weight:850;letter-spacing:.14em;text-transform:uppercase}.team-page-head h1{margin:0;color:#17233a;font-size:29px;line-height:1.15;font-weight:820;letter-spacing:-.75px}.team-page-head p{margin:6px 0 0;color:#748399;font-size:13px} .team-head-links{display:flex;align-items:center;gap:12px;margin-top:9px}.team-head-links button{display:inline-flex;align-items:center;gap:6px;border:0;padding:0;background:transparent;color:#315fc5;font:inherit;font-size:12px;font-weight:800;cursor:pointer}.team-head-links button:hover{color:#1d4ed8}.team-head-links svg{width:14px;height:14px} .team-hero-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}.team-hero-stat{min-width:92px;padding:8px 11px;border:1px solid #e2e8f1;border-radius:11px;background:rgba(255,255,255,.82);text-align:center}.team-hero-stat span,.team-hero-stat strong{display:block}.team-hero-stat span{color:#8491a4;font-size:9.5px;font-weight:750;text-transform:uppercase;letter-spacing:.06em}.team-hero-stat strong{margin-top:3px;color:#263955;font-size:17px} .team-new-button{min-height:40px;display:inline-flex;align-items:center;gap:8px;padding:0 15px;border:0;border-radius:10px;background:linear-gradient(135deg,#4338ca,#2563eb);color:#fff!important;font-size:12px;font-weight:800;box-shadow:0 9px 20px rgba(37,99,235,.22);cursor:pointer}.team-new-button:hover{transform:translateY(-1px);box-shadow:0 12px 24px rgba(37,99,235,.28)}.team-new-button svg{width:16px;height:16px} .team-table-card{overflow:hidden;border:1px solid #e1e7f0;border-radius:16px;background:#fff;box-shadow:0 10px 30px rgba(31,46,75,.07)}.team-table-toolbar{min-height:66px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 16px;border-bottom:1px solid #e7ecf3;background:linear-gradient(100deg,#fff 0%,#f8fbff 52%,#f7f4ff 100%)}.team-table-left{display:flex;align-items:center;gap:7px}.team-page-size select,.team-tool-button,.team-icon-button,.team-table-search input,.team-table-search span{height:36px;border:1px solid #ccd7e6;background:#fff;color:#3d4d64;font:inherit}.team-page-size select{min-width:72px;padding:0 29px 0 11px;border-radius:9px}.team-tool-button,.team-icon-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:9px;padding:0 11px;font-size:11.5px;font-weight:750;text-decoration:none}.team-tool-button:hover,.team-icon-button:hover{border-color:#aac3eb;background:#eff5ff;color:#1d4ed8}.team-tool-button svg,.team-icon-button svg{width:14px;height:14px}.team-icon-button{width:36px;padding:0}.team-table-search{display:flex;height:36px}.team-table-search span{width:39px;display:grid;place-items:center;border-radius:9px 0 0 9px;border-right:0;color:#718198}.team-table-search span svg{width:15px;height:15px}.team-table-search input{width:min(280px,28vw);min-height:36px!important;padding:0 11px;border-radius:0 9px 9px 0;outline:0}.team-table-search input:focus{border-color:#8eb0eb!important;box-shadow:0 0 0 3px rgba(37,99,235,.08)!important} .team-table-scroll{overflow:auto}.team-data-table{width:100%;min-width:1020px;border-collapse:separate;border-spacing:0;background:#fff}.team-data-table thead th{height:43px;padding:10px 14px;background:linear-gradient(90deg,#eef4ff,#f6f4ff)!important;border-bottom:1px solid #dfe7f2!important;color:#3d4f68!important;font-size:10.5px!important;font-weight:850!important;letter-spacing:.055em!important;text-transform:uppercase!important}.team-data-table tbody td{padding:11px 14px!important;border-bottom:1px solid #edf1f5!important;background:#fff;color:#34445b;font-size:12.5px!important;vertical-align:middle}.team-data-table tbody tr:hover td{background:#f8fbff!important}.team-data-table th:first-child{width:32%}.team-options-col{width:105px} .team-member-cell{display:flex;align-items:center;gap:11px;min-width:0}.team-member-avatar{width:36px;height:36px;flex:none;border-radius:11px;object-fit:cover;border:1px solid #dbe4ef}.team-member-fallback{display:grid;place-items:center;background:linear-gradient(135deg,#eef2ff,#e8f8ff);color:#4f63db;font-weight:850}.team-member-cell>div{min-width:0}.team-member-cell>div>a{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#203f72!important;font-weight:780!important}.team-member-cell small{display:block;margin-top:2px;color:#8a97a8;font-size:10.5px} .team-row-inline-actions{display:flex;align-items:center;gap:5px;margin-top:3px;color:#a1abba;font-size:10px}.team-row-inline-actions a{color:#55729a!important;font:inherit;font-size:10px!important;font-weight:600!important}.team-row-inline-actions a:hover{color:#1d4ed8!important}.team-badge-list{display:flex;gap:4px;flex-wrap:wrap}.team-group-badge,.team-role-badge{display:inline-flex;align-items:center;min-height:24px;padding:3px 8px;border-radius:999px;font-size:10.5px;font-weight:800}.team-group-badge{background:#eef4ff;color:#315fc5}.team-role-badge{background:#f2edff;color:#6a42c2}.team-muted{color:#9aa6b5} .team-status-form{margin:0}.team-status{display:inline-flex;align-items:center;gap:6px;min-height:26px;padding:3px 8px;border:0;border-radius:999px;font:inherit;font-size:10.5px;font-weight:800;cursor:pointer}.team-status span{width:7px;height:7px;border-radius:50%}.team-status.active{background:#e8fbf4;color:#07855f}.team-status.active span{background:#12a474}.team-status.inactive{background:#f1f3f6;color:#68778b}.team-status.inactive span{background:#91a0b2}.team-status:disabled{cursor:default;opacity:.72} .team-row-actions{display:flex;align-items:center;gap:6px}.team-row-actions form{margin:0}.team-row-actions a,.team-row-actions button{width:32px;height:32px;display:grid;place-items:center;padding:0;border:1px solid #dbe4ef;border-radius:8px;background:#fff;color:#43638f!important;cursor:pointer}.team-row-actions a:hover{border-color:#abc6ef;background:#eef5ff;color:#1d4ed8!important}.team-row-actions button.danger:hover{border-color:#fecaca;background:#fff1f2;color:#dc2626!important}.team-row-actions svg{width:14px;height:14px}.team-empty{text-align:center!important;padding:48px 18px!important;color:#8794a7!important}.team-empty svg{width:25px;height:25px;margin-bottom:8px}.team-empty strong,.team-empty span{display:block}.team-empty strong{color:#516176}.team-empty span{margin-top:3px;font-size:11px} .team-table-footer{min-height:62px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 16px;border-top:1px solid #e5eaf1;background:#fbfcff;color:#748196;font-size:11.5px}.team-pagination{display:flex;align-items:center;gap:5px}.team-pagination a,.team-pagination span{min-width:34px;height:34px;display:grid;place-items:center;padding:0 9px;border:1px solid transparent;border-radius:9px;color:#5c6d83;text-decoration:none;font-weight:700}.team-pagination a:hover{border-color:#c9d8eb;background:#eef5ff;color:#1d4ed8}.team-pagination a.current{border-color:#dbe4ef;background:#eaf1fb;color:#1f3554}.team-pagination span.disabled{color:#aab4c1} .team-modal{position:fixed;z-index:1250;inset:0;display:none;place-items:center;padding:18px;background:rgba(15,23,42,.52);backdrop-filter:blur(4px)}.team-modal.is-open{display:grid}.team-modal-card{width:min(660px,calc(100vw - 30px));max-height:calc(100vh - 40px);overflow:auto;border:1px solid rgba(255,255,255,.75);border-radius:17px;background:#fff;box-shadow:0 24px 70px rgba(15,23,42,.25)}.team-modal-card-lg{width:min(940px,calc(100vw - 30px))}.team-modal-card>header{min-height:74px;display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:18px 20px;border-bottom:1px solid #e5eaf1;background:linear-gradient(100deg,#fff,#f8fbff 58%,#f7f4ff)}.team-modal-card>header span{display:block;margin-bottom:3px;color:#6d63e8;font-size:9.5px;font-weight:850;letter-spacing:.13em;text-transform:uppercase}.team-modal-card>header h2{margin:0;color:#1b2b43;font-size:18px}.team-modal-card>header p{margin:4px 0 0;color:#7c899b;font-size:11px}.team-modal-card>header>button{width:34px;height:34px;display:grid;place-items:center;border:1px solid #dbe4ef;border-radius:9px;background:#fff;color:#6f7f92;cursor:pointer}.team-modal-card>header>button:hover{background:#f1f5fb;color:#1d4ed8}.team-modal-card>header svg{width:15px} .team-modal-form{padding:0}.team-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;padding:20px}.team-form-grid label,.team-manager-add label,.team-manager-edit label,.team-role-edit>label{display:grid;gap:6px;color:#3c4d65;font-size:11.5px;font-weight:800}.team-form-grid label.wide{grid-column:1/-1}.team-form-grid em{color:#e11d48;font-style:normal}.team-form-grid input,.team-form-grid select,.team-manager-add input,.team-manager-edit input,.team-role-edit>label input{width:100%;height:40px;min-height:40px!important;padding:0 11px;border:1px solid #cbd7e5;border-radius:9px;background:#fff;color:#253750;outline:0}.team-form-grid input:focus,.team-form-grid select:focus,.team-manager-add input:focus,.team-manager-edit input:focus,.team-role-edit>label input:focus{border-color:#84a9eb!important;box-shadow:0 0 0 4px rgba(37,99,235,.08)!important}.team-form-grid input[type=file]{padding:7px 9px;height:auto}.team-modal-section{padding:0 20px 18px}.team-section-heading strong,.team-section-heading small{display:block}.team-section-heading strong{color:#34465f;font-size:12px}.team-section-heading small{margin-top:3px;color:#8a97a8;font-size:10.5px}.team-check-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:10px}.team-check-grid label{display:flex;align-items:center;gap:7px;min-height:36px;padding:7px 9px;border:1px solid #e0e7f0;border-radius:9px;background:#fafcff;color:#43546c;font-size:11px}.team-check-grid input{accent-color:#2563eb}.team-admin-check{display:flex;align-items:flex-start;gap:9px;margin:0 20px 20px;padding:12px;border:1px solid #e3e8ef;border-radius:10px;background:#fbfcfe}.team-admin-check input{margin-top:2px;accent-color:#2563eb}.team-admin-check strong,.team-admin-check small{display:block}.team-admin-check strong{color:#33465f;font-size:11.5px}.team-admin-check small{margin-top:2px;color:#8996a7;font-size:10px}.team-modal-form>footer,.team-role-edit>footer{display:flex;justify-content:flex-end;gap:8px;padding:14px 20px;border-top:1px solid #e6ebf2;background:linear-gradient(90deg,#fbfcff,#f7f5ff)} .team-primary,.team-secondary,.team-manager-add button{min-height:38px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 13px;border-radius:9px;font-size:11.5px;font-weight:800;cursor:pointer}.team-primary,.team-manager-add button{border:0;background:linear-gradient(135deg,#4338ca,#2563eb);color:#fff;box-shadow:0 8px 18px rgba(37,99,235,.18)}.team-primary:hover,.team-manager-add button:hover{transform:translateY(-1px)}.team-secondary{border:1px solid #cfdae8;background:#fff;color:#53647a}.team-primary svg,.team-secondary svg,.team-manager-add button svg{width:14px} .team-manager-list{padding:7px 20px 5px}.team-manager-item{border-bottom:1px solid #edf1f5}.team-manager-item>summary{list-style:none;display:grid;grid-template-columns:38px minmax(0,1fr) 18px;align-items:center;gap:10px;padding:12px 2px;cursor:pointer}.team-manager-item>summary::-webkit-details-marker{display:none}.team-manager-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:linear-gradient(135deg,#eef2ff,#e8f8ff);color:#4f63db}.team-manager-icon.role{background:linear-gradient(135deg,#f4edff,#eef4ff);color:#7651cf}.team-manager-icon svg{width:15px}.team-manager-item summary strong,.team-manager-item summary small{display:block}.team-manager-item summary strong{color:#30445e;font-size:12.5px}.team-manager-item summary small{margin-top:3px;color:#8b98a8;font-size:10.5px}.team-manager-item>summary>svg{width:14px;color:#95a1b0;transition:transform .16s}.team-manager-item[open]>summary>svg{transform:rotate(180deg)}.team-manager-edit,.team-role-edit{padding:13px 5px 14px;border-top:1px solid #edf1f5}.team-manager-edit{display:flex;align-items:end;gap:8px}.team-manager-edit label{flex:1}.team-manager-delete{padding:0 5px 14px}.team-manager-delete button{display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;color:#c2414e;font:inherit;font-size:10.5px;font-weight:700;cursor:pointer}.team-manager-delete svg{width:13px}.team-manager-empty{padding:25px 2px;color:#8996a7;text-align:center;font-size:12px}.team-manager-add{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:9px;padding:15px 20px 20px;border-top:1px solid #e7ecf3;background:#fbfcff}.team-manager-add button{height:40px} .team-role-list{max-height:48vh;overflow:auto}.team-role-edit>label{padding:0 8px}.team-permission-wrap{margin-top:12px;overflow:auto;border:1px solid #e0e6ef;border-radius:10px}.team-permission-wrap .staff-permission-table{margin:0;min-width:650px}.team-permission-wrap .staff-permission-table th{background:linear-gradient(90deg,#eef4ff,#f6f4ff);color:#40526b;font-size:10.5px;text-transform:uppercase;letter-spacing:.04em}.team-permission-wrap .staff-permission-table td{background:#fff;font-size:11px}.team-role-create{margin:13px 20px 20px;border:1px solid #dbe4ef;border-radius:11px;overflow:hidden}.team-role-create>summary{display:flex;align-items:center;gap:7px;padding:12px 14px;cursor:pointer;color:#315fc5;font-size:11.5px;font-weight:800;background:#f8fbff}.team-role-create>summary svg{width:14px}.team-role-create .team-role-edit{padding:16px}.team-role-create .team-role-edit>footer{margin:15px -16px -16px} @media(max-width:980px){.team-page-head{align-items:flex-start;flex-direction:column}.team-hero-actions{justify-content:flex-start}.team-table-search input{width:220px}.team-check-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:680px){.team-dashboard-hero{padding:18px}.team-hero-main{align-items:flex-start}.team-hero-actions{width:100%}.team-hero-stat{flex:1}.team-new-button{width:100%;justify-content:center}.team-table-toolbar{align-items:stretch;flex-direction:column}.team-table-search input{width:100%}.team-table-search{width:100%}.team-table-search input{flex:1}.team-table-footer{align-items:flex-start;flex-direction:column}.team-pagination{width:100%;justify-content:flex-end}.team-form-grid{grid-template-columns:1fr}.team-form-grid label.wide{grid-column:auto}.team-check-grid{grid-template-columns:1fr}.team-manager-add{grid-template-columns:1fr}.team-manager-edit{align-items:stretch;flex-direction:column}.team-page-head h1{font-size:25px}} /* ============================================================ SECTION: subscriptions.css ============================================================ */ .subscription-index,.subscription-form-page{color:#1f2c3d}.subscription-page-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin:0 0 22px}.subscription-page-heading h1{margin:0;color:#17243a;font-size:26px;line-height:1.2;font-weight:700}.subscription-page-heading p{margin:7px 0 0;color:#6b778b;font-size:13px}.subscription-back{display:inline-flex;margin:0 0 9px;color:#66758a;font-size:12px;font-weight:600}.subscription-index{width:100%}.subscription-index-actions{display:flex;align-items:center;gap:10px}.subscription-dark,.subscription-form-actions button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:38px;background:#202d3e;color:#fff!important;border:1px solid #202d3e;border-radius:8px;padding:9px 14px;font-weight:700;cursor:pointer;transition:.18s ease}.subscription-dark:hover,.subscription-form-actions button:hover{background:#162130;border-color:#162130;transform:translateY(-1px)}.subscription-dark svg,.subscription-filter-button svg,.subscription-export svg{width:16px;height:16px}.subscription-form-actions button:disabled{cursor:not-allowed;opacity:.48;transform:none}.subscription-filter-button,.subscription-export{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:38px;border:1px solid #d5dde7;border-radius:8px;background:#fff;padding:9px 13px;color:#40516a;cursor:pointer;font-weight:600}.subscription-filter-button:hover,.subscription-export:hover{border-color:#b8c5d5;background:#f8fafc}.subscription-statuses{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px}.subscription-status-card{display:flex;align-items:center;gap:12px;min-height:82px;padding:15px;background:#fff;border:1px solid #e1e7ef;border-radius:11px;box-shadow:0 5px 18px rgba(26,42,65,.05);color:#34445a;transition:.18s ease}.subscription-status-card:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(26,42,65,.08);border-color:#cad5e2}.subscription-status-card.selected{outline:2px solid #cbdcff;border-color:#8aacef}.subscription-status-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:10px;background:#eef3f8;color:#607088}.subscription-status-icon svg{width:19px;height:19px}.subscription-status-copy{display:grid;gap:2px;min-width:0}.subscription-status-copy b{font-size:20px;color:#1d2b3d;line-height:1}.subscription-status-copy small{font-size:12px;color:#6d7a8d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.subscription-status-card.active .subscription-status-icon{background:#ecf8e8;color:#4c9a2a}.subscription-status-card.future .subscription-status-icon{background:#eef8e8;color:#5d9d32}.subscription-status-card.past-due .subscription-status-icon,.subscription-status-card.incomplete .subscription-status-icon{background:#fff2e8;color:#e87531}.subscription-status-card.unpaid .subscription-status-icon,.subscription-status-card.expired .subscription-status-icon{background:#feeeee;color:#d74747}.subscription-status-card.canceled .subscription-status-icon{background:#f1f3f6;color:#68778c}.subscription-status-card.not-subscribed .subscription-status-icon{background:#edf6ff;color:#3184cd}.subscription-index-card{background:#fff;border:1px solid #e0e6ee;border-radius:11px;box-shadow:0 6px 22px rgba(20,38,61,.055);overflow:hidden}.subscription-list-body{padding:20px 22px 18px}.subscription-table-tools{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:16px}.subscription-table-tools h2{margin:0;color:#1d2a3c;font-size:16px}.subscription-table-tools p{margin:4px 0 0;color:#758196;font-size:12px}.subscription-tool-actions{display:flex;align-items:center;gap:8px}.subscription-tool-actions select,.subscription-search{height:38px;border:1px solid #d2dbe6;background:#fff;border-radius:8px;color:#536178}.subscription-tool-actions select{padding:0 10px}.subscription-search{display:flex;width:250px}.subscription-search span{display:grid;place-items:center;width:40px;color:#7a8798}.subscription-search svg{width:16px;height:16px}.subscription-search input{border:0;outline:0;padding:0 11px;width:100%;font:inherit;background:transparent}.subscription-filters{display:grid;grid-template-columns:minmax(180px,230px) minmax(260px,1fr) auto auto;align-items:end;gap:10px;padding:14px;margin:0 0 18px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:9px}.subscription-filters[hidden]{display:none}.subscription-filters label{display:grid;gap:5px;font-size:12px;font-weight:600;color:#4e5d72}.subscription-filters select,.subscription-filters input{height:38px;padding:0 10px;border:1px solid #cfd9e5;border-radius:7px;background:#fff;color:#29384c}.subscription-filters button{height:38px;border:0;border-radius:7px;background:#202d3e;color:#fff;padding:0 15px;font-weight:700}.subscription-filters>a{height:38px;display:grid;place-items:center;padding:0 10px;color:#68778b}.subscription-table-scroll{overflow:auto;margin:0 -22px}.subscription-index table{width:100%;min-width:1180px;border-collapse:collapse}.subscription-index th,.subscription-index td{padding:13px 14px;border-top:1px solid #e9edf3;font-size:12.5px;text-align:left;vertical-align:middle}.subscription-index thead th{background:#f7f9fc;color:#68768a;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.025em}.subscription-index tbody tr:hover{background:#fbfcfe}.subscription-index td strong{display:block;color:#26364b;font-weight:650}.subscription-index td small{display:block;margin-top:3px;color:#8792a2;font-size:11px}.subscription-id{color:#8490a2}.subscription-name{display:block;color:#2468cf!important;font-weight:700}.subscription-secondary-link{display:block;margin-top:3px;color:#5579b4!important;font-size:11px}.subscription-method-pill{display:inline-flex;align-items:center;min-height:26px;padding:4px 8px;border-radius:999px;background:#edf3ff;color:#365f9c;font-size:11px;font-weight:700}.subscription-status-badge{display:inline-flex;align-items:center;border:1px solid #d8e1ec;border-radius:999px;padding:4px 8px;background:#f8fafc;color:#526176;font-size:11px;font-weight:700}.status-active{background:#eef8e9;border-color:#d1e8c6;color:#4c8c2b}.status-past-due,.status-incomplete{background:#fff4eb;border-color:#f7dcc8;color:#c7652f}.status-unpaid,.status-incomplete-expired{background:#fff0f0;border-color:#f4d2d2;color:#c94646}.status-canceled{background:#f2f4f7;color:#66758a}.subscription-empty{text-align:center!important;padding:46px 20px!important}.subscription-empty>span{width:46px;height:46px;display:grid;place-items:center;margin:0 auto 10px;border-radius:12px;background:#eef3f8;color:#76869b}.subscription-empty svg{width:21px;height:21px}.subscription-empty strong{font-size:14px}.subscription-empty small{margin-top:5px!important}.subscription-list-footer{display:flex;justify-content:space-between;align-items:center;gap:15px;color:#657287;font-size:12px;padding-top:18px}.subscription-form-page{max-width:980px;margin:0 auto}.subscription-gateway-warning{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:16px;padding:14px 16px;border:1px solid #f3c9a9;border-radius:9px;background:#fff8f1;color:#8f4b1d}.subscription-gateway-warning div{display:grid;gap:3px}.subscription-gateway-warning strong{font-size:13px}.subscription-gateway-warning span{font-size:12px;color:#a15e2e}.subscription-gateway-warning a{white-space:nowrap;border:1px solid #e8b68f;border-radius:7px;padding:8px 10px;background:#fff;color:#9c5321;font-size:12px;font-weight:700}.subscription-form-card{background:#fff;border:1px solid #dee5ed;border-radius:11px;box-shadow:0 8px 28px rgba(20,38,61,.06);overflow:hidden}.subscription-form-section{padding:22px 24px 24px;border-bottom:1px solid #e7ecf2}.subscription-section-heading{display:flex;align-items:flex-start;gap:12px;margin-bottom:20px}.subscription-section-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;background:#eef3ff;color:#4269aa;flex:0 0 auto}.subscription-section-icon svg{width:18px;height:18px}.subscription-section-heading h2{margin:0;color:#1d2b3f;font-size:16px}.subscription-section-heading p{margin:4px 0 0;color:#7a8799;font-size:12px}.subscription-field-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.subscription-field,.subscription-form-pair label{display:grid;gap:6px;font-size:12.5px;font-weight:650;color:#415168}.subscription-field-wide{grid-column:1/-1}.subscription-field>span em,.subscription-form-pair label>span em{color:#e34b4b;font-style:normal}.subscription-field input:not([type=checkbox]),.subscription-field select,.subscription-field textarea,.subscription-form-pair input,.subscription-form-pair select{width:100%;border:1px solid #ccd7e4;border-radius:7px;background:#fff;padding:9px 11px;min-height:39px;color:#26364d;font:inherit;font-weight:400;outline:none;transition:.15s ease}.subscription-field input:focus,.subscription-field select:focus,.subscription-field textarea:focus,.subscription-form-pair input:focus,.subscription-form-pair select:focus{border-color:#7fa3dc;box-shadow:0 0 0 3px rgba(75,119,184,.10)}.subscription-field select:disabled{background:#f4f6f8;color:#8a95a4}.subscription-field textarea{resize:vertical}.subscription-field small{color:#8792a2;font-size:11px;font-weight:400}.subscription-field-error{color:#c74444!important;font-size:11px!important;font-weight:600!important}.subscription-checkbox{grid-column:1/-1;display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid #e0e6ed;border-radius:7px;background:#fafbfd;color:#536176;font-size:12px;font-weight:500}.subscription-checkbox input{margin:0}.subscription-custom-plan,.subscription-form-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px}.subscription-custom-plan[hidden]{display:none}.subscription-form-actions{display:flex;justify-content:flex-end;align-items:center;gap:12px;padding:17px 24px;background:#fafbfd}.subscription-form-actions a{color:#5f6d80;font-size:13px;font-weight:600;padding:9px 10px}.subscription-form-actions button{min-width:150px} @media(max-width:1180px){.subscription-statuses{grid-template-columns:repeat(2,minmax(0,1fr))}.subscription-table-tools{align-items:flex-start;flex-direction:column}.subscription-tool-actions{width:100%;flex-wrap:wrap}.subscription-search{margin-left:auto}} @media(max-width:760px){.subscription-page-heading,.subscription-gateway-warning{flex-direction:column}.subscription-index-actions{width:100%}.subscription-index-heading{align-items:stretch}.subscription-index-actions>*{flex:1}.subscription-statuses{grid-template-columns:1fr 1fr}.subscription-list-body{padding:16px}.subscription-table-scroll{margin:0 -16px}.subscription-filters{grid-template-columns:1fr}.subscription-tool-actions{align-items:stretch}.subscription-search{width:100%;margin-left:0}.subscription-field-grid,.subscription-custom-plan,.subscription-form-pair{grid-template-columns:1fr}.subscription-field-wide{grid-column:auto}.subscription-form-section{padding:18px}.subscription-form-actions{padding:15px 18px}} @media(max-width:480px){.subscription-statuses{grid-template-columns:1fr}.subscription-index-actions{flex-direction:column}.subscription-index-actions>*{width:100%}.subscription-form-actions{flex-direction:column-reverse;align-items:stretch}.subscription-form-actions a{text-align:center}.subscription-form-actions button{width:100%}} /* ========================================================== Subscription workspace + public checkout ========================================================== */ .subscription-workspace{max-width:1540px;margin:0 auto;color:#263954} .subscription-workspace-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:14px} .subscription-workspace-heading>div:first-child>a{font-size:11px;color:#667a95} .subscription-workspace-title{display:flex;align-items:center;gap:10px;margin-top:6px} .subscription-workspace-title h1{margin:0;font-size:21px;color:#182b48} .subscription-workspace-heading p{margin:5px 0 0;color:#7c899c;font-size:11.5px} .subscription-workspace-actions{display:flex;gap:8px;align-items:center}.subscription-workspace-actions form{margin:0} .subscription-outline-button{min-height:36px;display:inline-flex;align-items:center;gap:7px;padding:0 12px;border:1px solid #d2dbe8;border-radius:7px;background:#fff;color:#31445e;font-size:11.5px;font-weight:800} .subscription-outline-button svg,.subscription-workspace-actions svg{width:14px} .subscription-workspace-grid{display:grid;grid-template-columns:minmax(430px,.92fr) minmax(520px,1.28fr);gap:18px;align-items:start} .subscription-editor-card,.subscription-preview-card{border:1px solid #dfe6ef;border-radius:10px;background:#fff;box-shadow:0 4px 16px rgba(31,46,75,.08);overflow:hidden} .subscription-editor-toolbar{min-height:54px;display:flex;align-items:center;gap:9px;padding:10px 14px;border-bottom:1px solid #e5eaf1;background:#fbfcfe} .subscription-editor-toolbar>span{width:29px;height:29px;display:grid;place-items:center;border:1px solid #dbe4ef;border-radius:8px;color:#315fc5}.subscription-editor-toolbar svg{width:14px} .subscription-editor-toolbar strong{font-size:12px;color:#243a58}.subscription-editor-toolbar a{margin-left:auto;color:#315fc5;font-size:10.5px;font-weight:750} .subscription-editor-body{padding:15px}.subscription-editor-body>.subscription-field{margin-bottom:12px}.subscription-editor-body .subscription-field-wide{grid-column:auto} .subscription-editor-two{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px} .subscription-editor-footer{display:flex;justify-content:flex-end;padding:11px 14px;border-top:1px solid #e5eaf1;background:#fbfcff} .subscription-editor-footer button{min-height:34px;padding:0 15px;border:0;border-radius:7px;background:#1f2d42;color:#fff;font-size:11px;font-weight:800;cursor:pointer} .subscription-preview-tabs{display:flex;min-height:54px;border-bottom:1px solid #e4e9f0;background:#fafbfd} .subscription-preview-tabs a{display:flex;align-items:center;gap:7px;padding:0 18px;border-bottom:2px solid transparent;color:#526278;font-size:11px;font-weight:750} .subscription-preview-tabs a.active{border-bottom-color:#315fc5;background:#fff;color:#203653}.subscription-preview-tabs span{padding:2px 6px;border-radius:99px;background:#eef3fb;color:#315fc5;font-size:9px} .subscription-preview-notice{margin:20px;padding:13px 15px;border-left:3px solid #39a8e8;background:#eef7ff;color:#246db0;font-size:11px} .subscription-mini-invoice{padding:22px}.subscription-mini-invoice-head{display:flex;justify-content:space-between;margin-bottom:22px}.subscription-mini-invoice-head>div:last-child{text-align:right} .subscription-mini-invoice-head small,.subscription-mini-invoice-head strong{display:block}.subscription-mini-invoice-head small{color:#8a97a9;font-size:10px}.subscription-mini-invoice-head strong{margin-top:3px;font-size:12px} .subscription-mini-invoice table{width:100%;border-collapse:collapse;font-size:11px}.subscription-mini-invoice th{padding:9px;background:#f3f6fa;border:1px solid #e1e7ef;text-align:left}.subscription-mini-invoice td{padding:10px;border-bottom:1px solid #e8edf3}.subscription-mini-invoice td small{display:block;margin-top:3px;color:#8490a0} .subscription-mini-invoice dl{width:min(360px,100%);margin:18px 0 0 auto}.subscription-mini-invoice dl div{display:flex;justify-content:space-between;padding:8px 10px;border-bottom:1px solid #e7ebf1;font-size:11px}.subscription-mini-invoice dl .total{font-weight:800} .subscription-selected-gateway{display:flex;align-items:center;gap:8px;margin-top:20px;padding:11px 12px;border:1px solid #e1e7ef;border-radius:8px;background:#fbfcff;font-size:10.5px}.subscription-selected-gateway svg{width:14px;color:#315fc5}.subscription-selected-gateway strong{margin-left:auto} .subscription-child-list{padding:10px 0}.subscription-child-list>a{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:13px 18px;border-bottom:1px solid #edf1f5;color:#31445e}.subscription-child-list>a:hover{background:#f8fbff}.subscription-child-list span strong,.subscription-child-list span small,.subscription-child-list span b,.subscription-child-list span em{display:block}.subscription-child-list span:last-child{text-align:right}.subscription-child-list small{margin-top:3px;color:#8a97aa;font-size:10px}.subscription-child-list b{font-size:11px}.subscription-child-list em{margin-top:4px;color:#64748b;font-size:9.5px;font-style:normal}.subscription-preview-empty{padding:56px 20px;text-align:center;color:#8290a3}.subscription-preview-empty svg{width:27px}.subscription-preview-empty strong,.subscription-preview-empty span{display:block}.subscription-preview-empty strong{margin-top:8px;color:#516176}.subscription-preview-empty span{margin-top:3px;font-size:10.5px} .subscription-public-body{margin:0;background:#f3f6fa;color:#20334e;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif} .subscription-public-page{min-height:100vh;display:flex;flex-direction:column}.subscription-public-header{width:min(1120px,calc(100% - 36px));margin:24px auto 14px;display:grid;grid-template-columns:1fr auto;gap:12px;align-items:end} .subscription-public-brand{grid-column:1/-1;display:flex;align-items:center;gap:10px;min-height:44px}.subscription-public-brand img{max-height:42px;max-width:180px}.subscription-public-brand>span{width:36px;height:36px;display:grid;place-items:center;border-radius:8px;background:#3157df;color:#fff;font-weight:900}.subscription-public-brand strong{font-size:24px} .subscription-public-title h1{margin:0;font-size:18px}.subscription-public-title p{margin:3px 0 0;color:#69798e;font-size:11px} .subscription-public-action button{min-height:36px;padding:0 15px;border:0;border-radius:7px;background:#20b55b;color:#fff;font-weight:800;cursor:pointer}.subscription-public-action button:disabled{background:#aeb8c5;cursor:not-allowed} .subscription-public-message{width:min(1120px,calc(100% - 36px));margin:0 auto 12px;padding:11px 14px;border-radius:7px;font-size:11px}.subscription-public-message.success{background:#eaf9f0;color:#16804a}.subscription-public-message.error{background:#fff0f1;color:#bd3746} .subscription-public-paper{width:min(1120px,calc(100% - 36px));margin:0 auto 50px;padding:38px 56px;box-sizing:border-box;border:1px solid #dce3ec;border-radius:8px;background:#fff;box-shadow:0 4px 14px rgba(31,46,75,.08)} .subscription-public-addresses{display:flex;justify-content:space-between;gap:40px}.subscription-public-addresses address{font-style:normal;font-size:11px;line-height:1.5}.subscription-public-addresses address strong,.subscription-public-addresses address b,.subscription-public-addresses address span,.subscription-public-addresses address small{display:block}.subscription-public-addresses .bill-to{text-align:right} .subscription-public-addresses address small:first-of-type{margin-top:12px} .subscription-public-table-wrap{margin-top:28px;overflow:auto}.subscription-public-table{width:100%;min-width:700px;border-collapse:collapse;font-size:11px}.subscription-public-table th{padding:9px 10px;background:#eef2f7;border:1px solid #dce4ed;text-align:left}.subscription-public-table td{padding:10px;border-bottom:1px solid #e6ebf1}.subscription-public-table td small{display:block;margin-top:3px;color:#7f8da0} .subscription-public-totals{width:min(420px,100%);margin:18px 0 0 auto}.subscription-public-totals>div{display:flex;justify-content:space-between;padding:10px 12px;border-bottom:1px solid #e1e7ef;font-size:11px}.subscription-public-totals .amount-due{color:#e33943;font-weight:850} .subscription-public-payment{width:min(420px,100%);margin:15px 0 0 auto;padding:11px 12px;border:1px solid #e1e7ef;border-radius:7px;background:#fbfcff}.subscription-public-payment span,.subscription-public-payment strong,.subscription-public-payment small{display:block}.subscription-public-payment span{color:#8290a3;font-size:9.5px}.subscription-public-payment strong{margin-top:3px;font-size:11px}.subscription-public-payment small{margin-top:4px;color:#a05a23;font-size:9.5px} .subscription-public-terms{margin-top:28px;padding-top:20px;border-top:1px solid #e1e7ef}.subscription-public-terms h2{font-size:12px}.subscription-public-terms p{font-size:11px;line-height:1.55;white-space:pre-wrap} .subscription-public-page>footer{margin-top:auto;padding:18px;text-align:center;border-top:1px solid #dce3ec;color:#62738b;font-size:11px} .subscription-checkout-body{min-height:100vh;display:grid;place-items:center;margin:0;background:#f4f7fb;font-family:Inter,ui-sans-serif,system-ui}.subscription-checkout-card{width:min(440px,calc(100% - 40px));padding:32px;text-align:center;border:1px solid #dce4ee;border-radius:12px;background:#fff;box-shadow:0 15px 45px rgba(31,46,75,.12)}.subscription-checkout-card h1{font-size:19px}.subscription-checkout-card p{color:#718096;font-size:12px;line-height:1.5}.subscription-checkout-card button{min-height:38px;padding:0 16px;border:0;border-radius:7px;background:#3157df;color:#fff;font-weight:800}.subscription-checkout-spinner{width:34px;height:34px;margin:0 auto 12px;border:3px solid #dfe6f2;border-top-color:#3157df;border-radius:50%;animation:subscription-spin .8s linear infinite}@keyframes subscription-spin{to{transform:rotate(360deg)}} @media(max-width:980px){.subscription-workspace-grid{grid-template-columns:1fr}.subscription-public-paper{padding:28px 24px}} @media(max-width:640px){.subscription-workspace-heading{flex-direction:column}.subscription-workspace-actions{width:100%;flex-wrap:wrap}.subscription-editor-two{grid-template-columns:1fr}.subscription-public-header{grid-template-columns:1fr}.subscription-public-action{justify-self:start}.subscription-public-addresses{flex-direction:column}.subscription-public-addresses .bill-to{text-align:left}} /* ============================================================ SECTION: support-catalog.css ============================================================ */ .support-catalog-page{max-width:1050px;margin:auto}.support-catalog-page>header{display:flex;justify-content:space-between;gap:24px;align-items:center;margin-bottom:22px}.support-catalog-page>header span{font-size:12px;font-weight:800;letter-spacing:.14em;color:#2563eb}.support-catalog-page h1{margin:5px 0;font-size:30px}.support-catalog-page p{margin:0;color:#64748b}.support-catalog-page>header>a,.support-catalog-add button{display:inline-flex;align-items:center;gap:8px;background:#172235;color:#fff;border:0;border-radius:9px;padding:11px 16px;text-decoration:none;font-weight:700}.support-catalog-page svg{width:17px}.support-catalog-card{background:#fff;border:1px solid #e2e8f0;border-radius:15px;box-shadow:0 10px 28px rgba(15,23,42,.06);padding:24px}.support-catalog-add{display:grid;grid-template-columns:1fr auto;align-items:end;gap:14px;padding-bottom:22px;border-bottom:1px solid #e2e8f0}.support-catalog-add label{font-weight:700}.support-catalog-add input,.support-catalog-list input{display:block;width:100%;box-sizing:border-box;margin-top:8px;padding:11px 12px;border:1px solid #cbd5e1;border-radius:8px;background:#fff}.support-catalog-list>div{display:grid;grid-template-columns:1fr auto;gap:10px;padding:13px 0;border-bottom:1px solid #eef2f7}.support-catalog-list form:first-child{display:grid;grid-template-columns:1fr auto;gap:9px}.support-catalog-list button{border:1px solid #cbd5e1;background:#fff;border-radius:8px;padding:9px 11px;cursor:pointer}.support-catalog-list .danger{color:#dc2626}@media(max-width:700px){.support-catalog-page>header{align-items:flex-start;flex-direction:column}.support-catalog-add{grid-template-columns:1fr}.support-catalog-list>div{grid-template-columns:1fr auto}} /* ========================================================== Predefined Replies โ€” Perfex-inspired structure, NEXT CRM style ========================================================== */ .predefined-replies-page,.predefined-reply-form-page{max-width:1480px;margin:0 auto} .predefined-page-head,.predefined-form-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:18px} .predefined-eyebrow{display:block;margin-bottom:5px;color:#6d63e8;font-size:10px;font-weight:850;letter-spacing:.14em;text-transform:uppercase} .predefined-page-head h1,.predefined-form-heading h1{margin:0;color:#17233a;font-size:28px;line-height:1.15;font-weight:820;letter-spacing:-.7px} .predefined-page-head p,.predefined-form-heading p{margin:6px 0 0;color:#748399;font-size:13px} .predefined-ticket-link,.predefined-form-heading>a{display:inline-flex;align-items:center;gap:7px;color:#315fc5;font-size:12px;font-weight:750;text-decoration:none} .predefined-ticket-link{min-height:38px;padding:0 12px;border:1px solid #dbe4f0;border-radius:10px;background:#fff;box-shadow:0 3px 10px rgba(30,50,85,.05)} .predefined-ticket-link:hover,.predefined-form-heading>a:hover{color:#1d4ed8;background:#f3f7ff} .predefined-ticket-link svg,.predefined-form-heading>a svg{width:15px;height:15px} .predefined-form-heading>div{display:flex;flex-direction:column;align-items:flex-start}.predefined-form-heading>a{order:-1;margin-bottom:12px} .predefined-primary-actions{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px} .predefined-new-button{display:inline-flex;align-items:center;gap:8px;min-height:39px;padding:0 14px;border:0;border-radius:10px;background:linear-gradient(135deg,#4338ca,#2563eb);color:#fff!important;font-size:12px;font-weight:800;text-decoration:none;box-shadow:0 9px 20px rgba(37,99,235,.22)} .predefined-new-button:hover{transform:translateY(-1px);box-shadow:0 12px 24px rgba(37,99,235,.28)}.predefined-new-button svg{width:16px;height:16px} .predefined-table-card{overflow:hidden;border:1px solid #e1e7f0;border-radius:16px;background:#fff;box-shadow:0 10px 30px rgba(31,46,75,.07)} .predefined-table-toolbar{min-height:66px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 16px;border-bottom:1px solid #e7ecf3;background:linear-gradient(100deg,#fff 0%,#f8fbff 52%,#f7f4ff 100%)} .predefined-table-left{display:flex;align-items:center;gap:7px}.predefined-page-size select,.predefined-tool-button,.predefined-icon-button,.predefined-table-search input,.predefined-table-search span{height:36px;border:1px solid #ccd7e6;background:#fff;color:#3d4d64;font:inherit} .predefined-page-size select{min-width:72px;padding:0 29px 0 11px;border-radius:9px}.predefined-tool-button,.predefined-icon-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:9px;padding:0 11px;font-size:11.5px;font-weight:750;cursor:pointer}.predefined-tool-button:hover,.predefined-icon-button:hover{border-color:#aac3eb;background:#eff5ff;color:#1d4ed8}.predefined-tool-button svg,.predefined-icon-button svg{width:14px;height:14px}.predefined-icon-button{width:36px;padding:0} .predefined-table-search{display:flex;height:36px}.predefined-table-search span{width:39px;display:grid;place-items:center;border-radius:9px 0 0 9px;border-right:0;color:#718198}.predefined-table-search span svg{width:15px;height:15px}.predefined-table-search input{width:min(270px,28vw);min-height:36px!important;padding:0 11px;border-radius:0 9px 9px 0;outline:0}.predefined-table-search input:focus{border-color:#8eb0eb!important;box-shadow:0 0 0 3px rgba(37,99,235,.08)!important} .predefined-table-scroll{overflow:auto}.predefined-data-table{width:100%;min-width:720px;border-collapse:separate;border-spacing:0;background:#fff}.predefined-data-table thead th{height:43px;padding:10px 14px;background:linear-gradient(90deg,#eef4ff,#f6f4ff)!important;border-bottom:1px solid #dfe7f2!important;color:#3d4f68!important;font-size:10.5px!important;font-weight:850!important;letter-spacing:.055em!important;text-transform:uppercase!important}.predefined-data-table tbody td{padding:11px 14px!important;border-bottom:1px solid #edf1f5!important;background:#fff;color:#34445b;font-size:12.5px!important;vertical-align:middle}.predefined-data-table tbody tr:hover td{background:#f8fbff!important}.predefined-options-col{width:155px;text-align:left!important} .predefined-reply-name{display:flex;align-items:center;gap:11px;min-width:0}.predefined-reply-icon{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:10px;background:linear-gradient(135deg,#eef2ff,#e8f8ff);color:#4f63db}.predefined-reply-icon svg{width:15px;height:15px}.predefined-reply-name>div{min-width:0}.predefined-reply-name a{display:block;max-width:850px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#203f72!important;font-weight:750!important}.predefined-reply-name a:hover{color:#2563eb!important}.predefined-reply-name small{display:block;max-width:850px;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#8a97aa;font-size:10.5px} .predefined-row-actions{display:flex;align-items:center;gap:6px}.predefined-row-actions form{margin:0}.predefined-row-actions a,.predefined-row-actions button{width:32px;height:32px;display:grid;place-items:center;padding:0;border:1px solid #dbe4ef;border-radius:8px;background:#fff;color:#43638f;cursor:pointer}.predefined-row-actions a:hover{border-color:#abc6ef;background:#eef5ff;color:#1d4ed8}.predefined-row-actions button.danger:hover{border-color:#fecaca;background:#fff1f2;color:#dc2626}.predefined-row-actions svg{width:14px;height:14px} .predefined-no-results td{text-align:center!important;padding:46px 18px!important;color:#8794a7!important}.predefined-no-results svg{width:24px;height:24px;margin-bottom:8px}.predefined-no-results strong,.predefined-no-results span{display:block}.predefined-no-results strong{color:#516176}.predefined-no-results span{margin-top:3px;font-size:11px} .predefined-table-footer{min-height:62px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 16px;border-top:1px solid #e5eaf1;background:#fbfcff;color:#748196;font-size:11.5px}.predefined-pagination{display:flex;align-items:center;gap:8px}.predefined-pagination button{min-width:34px;height:34px;padding:0 10px;border:1px solid transparent;border-radius:9px;background:transparent;color:#5c6d83;font:inherit;font-weight:700;cursor:pointer}.predefined-pagination button:hover:not(:disabled){border-color:#c9d8eb;background:#eef5ff;color:#1d4ed8}.predefined-pagination button.current{border-color:#dbe4ef;background:#eaf1fb;color:#1f3554}.predefined-pagination button:disabled{color:#aab4c1;cursor:default}.predefined-pagination .page-total{color:#98a4b3;font-weight:700} .predefined-reply-form-page{max-width:980px}.predefined-reply-form-card{overflow:hidden;border:1px solid #e1e7f0;border-radius:17px;background:#fff;box-shadow:0 14px 38px rgba(31,46,75,.08);position:relative}.predefined-reply-form-card:before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,#7c3aed,#2563eb,#06b6d4)} .predefined-form-field{padding:22px 24px 0}.predefined-form-field>label{display:block;margin-bottom:8px;color:#32445f;font-size:12px;font-weight:800}.predefined-form-field>label span{color:#e11d48}.predefined-form-field>input{width:100%;height:42px;min-height:42px!important;padding:0 12px;border:1px solid #cbd7e5;border-radius:10px;background:#fff;color:#24364f;outline:0}.predefined-form-field>input:focus{border-color:#84a9eb!important;box-shadow:0 0 0 4px rgba(37,99,235,.08)!important}.predefined-field-error{display:block;margin-top:6px;color:#c0263f;font-size:11px} .predefined-editor-shell{overflow:hidden;border:1px solid #cfd9e6;border-radius:11px;background:#fff;box-shadow:0 1px 2px rgba(15,23,42,.025)}.predefined-editor-menu{display:flex;align-items:center;gap:19px;min-height:38px;padding:0 14px;border-bottom:1px solid #e5eaf1;background:#fff;color:#45556d;font-size:11.5px}.predefined-editor-toolbar{display:flex;align-items:center;gap:6px;min-height:46px;padding:7px 10px;border-bottom:1px solid #e5eaf1;background:linear-gradient(#fbfcfe,#f8fafc)}.predefined-editor-toolbar select{height:32px;min-height:32px!important;border:1px solid #e0e6ef!important;border-radius:7px!important;background:#fff!important;color:#627187!important;padding:0 28px 0 9px!important;font-size:11px!important}.predefined-editor-toolbar button{width:31px;height:31px;display:grid;place-items:center;border:1px solid transparent;border-radius:7px;background:transparent;color:#56667c}.predefined-editor-toolbar button svg{width:14px;height:14px}.predefined-editor-toolbar button:disabled,.predefined-editor-toolbar select:disabled{opacity:.62;cursor:default}.predefined-editor-spacer{flex:1}.predefined-plain-text-note{display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border-radius:999px;background:#ecfdf5;color:#047857;font-size:10px;font-weight:800}.predefined-plain-text-note svg{width:12px;height:12px} .predefined-editor-shell textarea{display:block;width:100%;min-height:300px!important;padding:17px 16px;border:0!important;border-radius:0!important;resize:vertical;background:#fff!important;color:#2c3e57;line-height:1.65;box-shadow:none!important;outline:0!important}.predefined-editor-footer{min-height:37px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 12px;border-top:1px solid #e7ecf3;background:#fbfcfe;color:#8895a7;font-size:10px}.predefined-editor-footer strong{color:#617086;font-weight:750} .predefined-form-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:22px;padding:15px 24px;border-top:1px solid #e7ecf3;background:linear-gradient(90deg,#fbfcff,#f7f5ff)}.predefined-cancel-button,.predefined-save-button{min-height:39px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 14px;border-radius:9px;font-size:12px;font-weight:800}.predefined-cancel-button{border:1px solid #cfdae8;background:#fff;color:#53647a}.predefined-cancel-button:hover{background:#f7f9fc;color:#234e88}.predefined-save-button{border:0;background:linear-gradient(135deg,#4338ca,#2563eb);color:#fff;box-shadow:0 8px 18px rgba(37,99,235,.2);cursor:pointer}.predefined-save-button:hover{transform:translateY(-1px);box-shadow:0 11px 22px rgba(37,99,235,.26)}.predefined-save-button svg{width:15px;height:15px} .sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important} @media(max-width:760px){.predefined-page-head{align-items:flex-start;flex-direction:column}.predefined-table-toolbar{align-items:stretch;flex-direction:column}.predefined-table-search input{width:100%}.predefined-table-search{width:100%}.predefined-table-footer{align-items:flex-start;flex-direction:column}.predefined-pagination{width:100%;justify-content:flex-end}.predefined-editor-menu{gap:11px;overflow:auto}.predefined-editor-toolbar{flex-wrap:wrap}.predefined-plain-text-note{margin-left:auto}} /* ========================================================== Support โ€” Invoice-style visual system Tickets / Priorities / Statuses / Predefined Replies ========================================================== */ .support-invoice-page,.predefined-replies-page,.predefined-reply-form-page{max-width:1600px;margin:0 auto;color:#263954} .support-invoice-heading,.support-catalog-page>header.support-invoice-heading,.predefined-page-head.support-invoice-heading,.predefined-form-heading.support-invoice-heading{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:22px!important;margin:0 0 12px!important;padding:18px 20px!important;border:1px solid #dce4ef!important;border-radius:14px!important;background:linear-gradient(120deg,#fff 62%,#f5f8ff 100%)!important;box-shadow:0 6px 20px rgba(31,48,76,.055)!important;color:#263954!important} .support-invoice-heading>div{min-width:0}.support-invoice-heading>div>span,.support-catalog-page>header.support-invoice-heading span,.predefined-eyebrow{display:block!important;margin:0 0 4px!important;color:#5f6bd6!important;font-size:10px!important;font-weight:850!important;letter-spacing:.1em!important;text-transform:uppercase!important} .support-invoice-heading h1,.support-catalog-page>header.support-invoice-heading h1,.predefined-page-head.support-invoice-heading h1,.predefined-form-heading.support-invoice-heading h1{margin:0!important;color:#18263b!important;font-size:24px!important;line-height:1.2!important;font-weight:800!important;letter-spacing:-.025em!important} .support-invoice-heading p,.support-catalog-page>header.support-invoice-heading p,.predefined-page-head.support-invoice-heading p,.predefined-form-heading.support-invoice-heading p{margin:5px 0 0!important;color:#76859a!important;font-size:12px!important;line-height:1.45!important} .support-invoice-heading>a,.support-catalog-page>header.support-invoice-heading>a,.predefined-ticket-link{min-height:36px!important;display:inline-flex!important;align-items:center!important;gap:6px!important;padding:0 12px!important;border:1px solid #ced8e5!important;border-radius:8px!important;background:#fff!important;color:#34506f!important;text-decoration:none!important;font-size:12px!important;font-weight:750!important;box-shadow:none!important} .support-invoice-heading>a:hover,.support-catalog-page>header.support-invoice-heading>a:hover,.predefined-ticket-link:hover{background:#f7f9fd!important;border-color:#b9c9df!important;color:#285fc1!important}.support-invoice-heading>a svg{width:14px!important;height:14px!important} .support-invoice-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0 0 12px} .support-invoice-nav a{min-height:46px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 13px;border:1px solid #dce4ed;border-radius:10px;background:#fff;color:#52647c;text-decoration:none;font-size:11px;font-weight:700;transition:.14s ease} .support-invoice-nav a>span{display:flex;align-items:center;gap:7px;min-width:0}.support-invoice-nav a svg{width:14px;height:14px;flex:none;color:#73839a}.support-invoice-nav a strong{color:#21344f;font-size:11px;white-space:nowrap}.support-invoice-nav a:hover{border-color:#c9d6e7;background:#fafcff;color:#285fc1}.support-invoice-nav a.active{border-color:#9bb5f0;background:#f2f6ff;color:#285fc1}.support-invoice-nav a.active svg,.support-invoice-nav a.active strong{color:#285fc1} .support-catalog-card{padding:0!important;overflow:hidden;border:1px solid #dce3ec!important;border-radius:12px!important;background:#fff!important;box-shadow:0 5px 18px rgba(31,48,76,.055)!important} .support-catalog-add{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:end!important;gap:10px!important;padding:14px!important;border-bottom:1px solid #e3e9f1!important;background:linear-gradient(90deg,#fbfcff,#f7f9ff)!important} .support-catalog-add label{color:#53647a!important;font-size:11px!important;font-weight:700!important}.support-catalog-add input,.support-catalog-add textarea,.support-catalog-list input,.support-catalog-list textarea{box-sizing:border-box;width:100%!important;margin-top:5px!important;border:1px solid #cfd9e5!important;border-radius:6px!important;background:#fff!important;color:#30435c!important;font:inherit!important;font-size:11px!important;outline:0!important}.support-catalog-add input,.support-catalog-list input{height:34px!important;padding:0 9px!important}.support-catalog-add textarea,.support-catalog-list textarea{min-height:86px!important;padding:9px!important;resize:vertical}.support-catalog-add input:focus,.support-catalog-add textarea:focus,.support-catalog-list input:focus,.support-catalog-list textarea:focus{border-color:#9bb5f0!important;box-shadow:0 0 0 3px #eef4ff!important} .support-catalog-add button{min-height:34px!important;padding:0 12px!important;border:1px solid #3157df!important;border-radius:7px!important;background:#3157df!important;color:#fff!important;font-size:11px!important;font-weight:750!important;box-shadow:0 4px 10px rgba(49,87,223,.14)!important}.support-catalog-add button svg{width:13px!important;height:13px!important} .support-catalog-list{padding:0!important}.support-catalog-list>div{display:grid!important;grid-template-columns:minmax(0,1fr) 42px!important;gap:0!important;padding:0!important;border-bottom:1px solid #e8edf3!important;background:#fff!important}.support-catalog-list>div:last-child{border-bottom:0!important}.support-catalog-list>div:hover{background:#fbfcff!important}.support-catalog-list form:first-child{display:grid!important;grid-template-columns:minmax(0,1fr) 42px!important;gap:0!important;align-items:center!important;padding:10px 11px!important}.support-catalog-list form:first-child button,.support-catalog-list>div>form:last-child button{width:30px!important;height:30px!important;display:grid!important;place-items:center!important;padding:0!important;border:1px solid #d4dfec!important;border-radius:7px!important;background:#fff!important;color:#55729a!important;cursor:pointer!important}.support-catalog-list form:first-child button:hover{background:#f5f8fd!important;color:#285fc1!important;border-color:#b9c9df!important}.support-catalog-list>div>form:last-child{display:grid!important;place-items:center!important;padding:10px 8px 10px 0!important}.support-catalog-list>div>form:last-child button.danger:hover{background:#fff5f5!important;color:#c63d48!important;border-color:#f0c5ca!important}.support-catalog-list button svg{width:13px!important;height:13px!important} .predefined-primary-actions{margin:0 0 10px!important}.predefined-new-button{min-height:36px!important;padding:0 12px!important;border-radius:8px!important;background:#3157df!important;box-shadow:0 6px 14px rgba(49,87,223,.18)!important;font-size:12px!important;font-weight:750!important}.predefined-new-button:hover{background:#2749bf!important;transform:none!important;box-shadow:0 6px 14px rgba(49,87,223,.18)!important} .predefined-table-card{border:1px solid #dce3ec!important;border-radius:12px!important;box-shadow:0 5px 18px rgba(31,48,76,.055)!important}.predefined-table-toolbar{min-height:62px!important;padding:10px 14px!important;border-bottom:1px solid #e3e9f1!important;background:linear-gradient(90deg,#fbfcff,#f7f9ff)!important}.predefined-page-size select,.predefined-tool-button,.predefined-icon-button,.predefined-table-search input,.predefined-table-search span{height:32px!important;border-color:#cbd6e4!important;border-radius:6px!important;font-size:11px!important}.predefined-page-size select{border-radius:6px 0 0 6px!important}.predefined-tool-button{border-radius:0!important;margin-left:-1px!important}.predefined-icon-button{width:33px!important;border-radius:0 6px 6px 0!important;margin-left:-1px!important}.predefined-table-search span{width:38px!important;border-radius:6px 0 0 6px!important}.predefined-table-search input{width:210px!important;border-radius:0 6px 6px 0!important} .predefined-data-table{font-size:12px!important}.predefined-data-table thead th{height:40px!important;padding:0 11px!important;background:#f8fafc!important;color:#21314c!important;font-size:10.5px!important;font-weight:750!important;letter-spacing:0!important;text-transform:none!important;border-bottom:1px solid #e4eaf1!important}.predefined-data-table tbody td{height:62px!important;padding:10px 11px!important;border-bottom:1px solid #e8edf3!important;color:#33465f!important;font-size:12px!important}.predefined-data-table tbody tr:hover td{background:#fbfcff!important}.predefined-reply-icon{width:32px!important;height:32px!important;border-radius:9px!important;background:#eef3ff!important;color:#4965d7!important}.predefined-reply-name a{color:#1f4f95!important;font-weight:800!important}.predefined-row-actions a,.predefined-row-actions button{width:30px!important;height:30px!important;border-radius:7px!important;border-color:#d4dfec!important;color:#55729a!important}.predefined-table-footer{min-height:58px!important;padding:0 14px!important;border-top:1px solid #e6ebf2!important;background:#fff!important;color:#718096!important;font-size:11px!important}.predefined-pagination button{height:30px!important;min-width:30px!important;border-radius:7px!important}.predefined-pagination button.current{background:#eaf0f8!important;color:#25405f!important} .predefined-reply-form-page{max-width:1120px!important}.predefined-form-heading.support-invoice-heading>div>a{order:0!important;margin:0 0 8px!important}.predefined-reply-form-card{border:1px solid #dce3ec!important;border-radius:12px!important;box-shadow:0 5px 18px rgba(31,48,76,.055)!important}.predefined-reply-form-card:before{display:none!important}.predefined-form-field{padding:18px 20px 0!important}.predefined-form-field>label{color:#53647a!important;font-size:11px!important}.predefined-form-field>input{height:36px!important;min-height:36px!important;border-radius:7px!important;font-size:12px!important}.predefined-editor-shell{border-color:#cfd9e5!important;border-radius:8px!important}.predefined-editor-menu{min-height:34px!important;color:#68788d!important;font-size:10.5px!important}.predefined-editor-toolbar{min-height:42px!important;background:#f8fafc!important}.predefined-editor-toolbar select{height:30px!important;border-radius:6px!important}.predefined-editor-toolbar button{width:29px!important;height:29px!important}.predefined-editor-shell textarea{min-height:270px!important;padding:14px!important;font-size:12px!important}.predefined-editor-footer{min-height:34px!important;background:#fbfcfe!important}.predefined-form-actions{margin-top:18px!important;padding:13px 20px!important;background:#fbfcfe!important}.predefined-cancel-button,.predefined-save-button{min-height:36px!important;border-radius:7px!important;font-size:11px!important}.predefined-save-button{background:#3157df!important;box-shadow:0 4px 10px rgba(49,87,223,.14)!important}.predefined-save-button:hover{background:#2749bf!important;transform:none!important} @media(max-width:900px){.support-invoice-nav{grid-template-columns:repeat(2,minmax(0,1fr))}.support-invoice-heading{align-items:flex-start!important;flex-direction:column!important}} @media(max-width:560px){.support-invoice-nav{grid-template-columns:1fr}.support-catalog-add{grid-template-columns:1fr!important}.predefined-table-toolbar{align-items:stretch!important;flex-direction:column!important}.predefined-table-search,.predefined-table-search input{width:100%!important}} /* ============================================================ SECTION: tag-input.css ============================================================ */ .crm-tag-editor{display:flex;align-items:center;flex-wrap:wrap;gap:5px;min-height:38px;box-sizing:border-box;width:100%;padding:4px 7px;border:1px solid #cbd5e1;border-radius:5px;background:#fff;cursor:text}.crm-tag-editor:focus-within{border-color:#6e9ee8;box-shadow:0 0 0 3px #2862c91a}.crm-tag-editor input[data-tag-input]{flex:1;min-width:90px;width:auto!important;min-height:25px!important;height:25px!important;margin:0!important;padding:0 3px!important;border:0!important;box-shadow:none!important;outline:0!important;background:transparent!important}.crm-tag-chip{display:inline-flex;align-items:center;gap:4px;max-width:100%;padding:4px 7px;border-radius:4px;background:#edf0f4;color:#253247;font-size:13px;font-weight:500;overflow-wrap:anywhere}.crm-tag-chip button{border:0;background:none;color:#64748b;cursor:pointer;font-size:16px;line-height:1} /* ============================================================ SECTION: task-detail.css ============================================================ */ .task-detail-link{display:block;padding:0;border:0;background:none;color:#24364b;font:inherit;font-weight:600;text-align:left;cursor:pointer}.task-detail-link:hover{color:#2563eb}.task-detail-dialog{width:min(900px,calc(100vw - 32px));max-width:none;max-height:92vh;padding:0;border:0;border-radius:14px;color:#172033;box-shadow:0 28px 80px #0f172a55}.task-detail-dialog::backdrop{background:#33415599}.td-head{display:flex;align-items:flex-start;justify-content:space-between;padding:22px 24px 18px;border-bottom:1px solid #e5e7eb}.td-title-line{display:flex;align-items:center;gap:18px}.td-head h2{margin:0;font-size:20px}.td-privacy{display:flex;align-items:center;gap:4px;margin-top:7px;font-size:13px;font-weight:600}.td-privacy form{display:inline}.td-privacy button{padding:0;border:0;background:none;color:#2563eb;cursor:pointer}.td-close{border:0;background:none;color:#94a3b8;font-size:30px;line-height:1;cursor:pointer}.td-status{padding:5px 10px;border:1px solid #cbd5e1;border-radius:7px;font-size:12px;font-weight:600}.td-status.status-awaiting-feedback{color:#65a30d;border-color:#bef264;background:#f7fee7}.td-status.status-complete{color:#16a34a;border-color:#86efac;background:#f0fdf4}.td-status.status-in-progress{color:#2563eb;border-color:#93c5fd;background:#eff6ff}.td-status.status-testing{color:#0284c7;border-color:#7dd3fc;background:#f0f9ff}.td-body{display:grid;grid-template-columns:minmax(0,2fr) minmax(285px,1fr);max-height:calc(92vh - 86px);overflow:auto}.td-main{padding:25px}.td-side{background:#f8fafc;border-left:1px solid #e2e8f0}.td-main section,.td-side section{border-bottom:1px solid #e5e7eb}.td-origin{padding-bottom:20px}.td-origin p{margin:2px 0;font-size:14px}.td-origin svg,.td-section h3 svg,.td-side svg{width:16px;height:16px;vertical-align:-3px}.td-origin a,.td-comments h3{color:#1d4ed8}.td-actions{display:flex;gap:8px;margin-top:16px}.td-actions button,.td-actions a{display:inline-flex;height:36px;align-items:center;justify-content:center;border:1px solid #cbd5e1;border-radius:7px;background:#fff;color:#64748b;text-decoration:none}.td-complete{width:36px!important;background:#172033!important;color:#fff!important}.td-open{width:36px}.td-timer{padding:0 12px}.td-section{padding:20px 0}.td-section h3,.td-side h3{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-size:14px}.td-description{font-size:14px;line-height:1.7}.td-section-title,.td-side-title{display:flex;align-items:center;justify-content:space-between}.td-section-title span{font-size:12px;color:#64748b}.td-progress{height:20px;margin:10px 0 12px;border-radius:3px;background:#eef2f7;overflow:hidden}.td-progress span{display:block;height:100%;min-width:42px;padding:2px 8px;background:#475569;color:#fff;font-size:11px;text-align:center}.td-check-item{padding:10px 4px;border-bottom:1px solid #f1f5f9}.td-check-item>span{display:flex;gap:10px;align-items:center;font-size:14px}.td-check-item>span.done{color:#16a34a;text-decoration:line-through}.td-check-item small,.td-list-item small{display:block;margin:5px 0 0 26px;color:#64748b}.td-muted{color:#64748b;font-size:13px}.td-inline-form{display:flex;gap:8px;margin-top:14px}.td-inline-form input,.td-stack-form input,.td-stack-form select,.td-comments textarea{width:100%;padding:9px 10px;border:1px solid #cbd5e1;border-radius:7px;background:#fff}.td-inline-form button,.td-stack-form button,.td-comments button,.td-upload button{padding:8px 12px;border:0;border-radius:7px;background:#172033;color:#fff;font-weight:600;cursor:pointer}.td-comments article{padding:10px 0;border-bottom:1px solid #f1f5f9}.td-comments article p{margin:5px 0}.td-comments article small{color:#64748b}.td-comments textarea{min-height:76px;margin-top:12px;resize:vertical}.td-comments form>button{float:right;margin-top:8px}.td-side section{padding:21px 20px}.td-side-title>span{letter-spacing:3px;color:#64748b}.td-side dl{margin:0}.td-side dl div{display:grid;grid-template-columns:1fr 1.25fr;gap:8px;padding:8px 0;border-bottom:1px dashed #dbe2ea;font-size:13px}.td-side dt{display:flex;gap:7px;color:#64748b}.td-side dd{margin:0}.td-green{color:#16a34a}.td-tags{display:flex;gap:6px;align-items:center;margin-top:14px;color:#94a3b8}.td-tags span{padding:3px 7px;border-radius:4px;background:#e9eef5;color:#475569;font-size:12px}.td-stack-form{display:grid;gap:7px}.td-stack-form button{justify-self:start}.td-people{display:flex;align-items:center;gap:6px;margin-top:10px;font-size:12px}.td-people span{display:grid;width:34px;height:34px;place-items:center;border:2px solid #fff;border-radius:50%;background:#dbeafe;color:#1e40af;font-weight:700;box-shadow:0 0 0 1px #cbd5e1}.td-list-item{font-size:13px}.td-upload label{display:grid;min-height:112px;place-items:center;align-content:center;gap:6px;border:2px dashed #cbd5e1;border-radius:8px;color:#475569;font-size:12px;cursor:pointer}.td-upload label svg{width:25px;height:25px}.td-upload input{max-width:210px;font-size:11px}.td-upload button{width:100%;margin-top:8px}@media(max-width:800px){.td-body{grid-template-columns:1fr}.td-side{border-top:1px solid #e2e8f0;border-left:0}.td-title-line{align-items:flex-start;flex-direction:column;gap:8px}.task-detail-dialog{width:calc(100vw - 18px)}} /* Keep secondary task controls available without crowding the reference layout. */ .td-add-control summary,.td-side-picker summary{list-style:none;cursor:pointer} .td-add-control summary::-webkit-details-marker,.td-side-picker summary::-webkit-details-marker{display:none} .td-section-title{justify-content:flex-start;gap:12px} .td-section-title h3{margin:0 auto 0 0} .td-section-title label{font-size:13px;color:#64748b;cursor:pointer;white-space:nowrap} .td-section-title label input{position:absolute;opacity:0} .td-section-title label:has(input:checked){color:#1d4ed8} .td-checklist:has(.td-hide-checks:checked) .td-check-item.is-done{display:none} .td-add-control{position:relative} .td-section-title .td-add-control>summary,.td-side-title .td-add-control>summary{font-size:23px;line-height:16px;color:#64748b} .td-add-control[open]>.td-inline-form{position:absolute;right:0;top:24px;z-index:5;min-width:300px;padding:12px;background:#fff;border:1px solid #dbe2ea;border-radius:6px;box-shadow:0 6px 18px #17243a22} .td-side-title .td-add-control[open]>.td-stack-form{position:absolute;right:0;top:24px;z-index:5;width:260px;padding:12px;background:#fff;border:1px solid #dbe2ea;border-radius:6px;box-shadow:0 6px 18px #17243a22} .td-comments .td-add-control>summary{color:#1d4ed8;font-size:14px;font-weight:600} .td-comments .td-add-control>summary:hover{text-decoration:underline} .td-side-picker>summary{display:flex;justify-content:space-between;color:#64748b;font-size:13px} .td-side-picker>.td-stack-form{margin-top:10px} .td-side-title{position:relative} .td-actions .td-open.active{background:#e8eef7;color:#172033}.td-timer.running{background:#ef4444!important;border-color:#ef4444!important;color:#fff!important}.td-timesheets{padding:16px 0!important}.td-timesheets>h3,.td-sheet-form{padding-left:0}.td-sheet-table{overflow:auto;border:1px solid #dbe2ea}.td-sheet-table table{width:100%;border-collapse:collapse;font-size:12px}.td-sheet-table th,.td-sheet-table td{padding:9px;border-right:1px solid #e2e8f0;border-bottom:1px solid #e2e8f0;text-align:left;white-space:nowrap}.td-sheet-table th{background:#f8fafc}.td-sheet-form{margin-top:14px}.td-sheet-form>div{display:grid;grid-template-columns:1fr 1fr;gap:14px}.td-sheet-form label{display:grid;gap:5px;margin-bottom:10px;font-size:12px;font-weight:600}.td-sheet-form input,.td-sheet-form textarea{width:100%;padding:9px;border:1px solid #cbd5e1;border-radius:6px;background:#fff}.td-sheet-form textarea{min-height:70px}.td-sheet-form .td-billable{display:flex;grid-template-columns:auto 1fr;align-items:center}.td-sheet-form .td-billable input{width:auto}.td-sheet-form>button{float:right;padding:8px 14px;border:0;border-radius:7px;background:#22c55e;color:#fff;font-weight:700;cursor:pointer}@media(max-width:600px){.td-sheet-form>div{grid-template-columns:1fr}} /* Task detail โ€” Invoice design system override */ .task-detail-dialog{width:min(980px,calc(100vw - 32px));max-width:none;max-height:92vh;padding:0;border:1px solid #dce4ed;border-radius:12px;background:#fff;color:#263954;box-shadow:0 24px 70px rgba(23,38,59,.25)}.task-detail-dialog::backdrop{background:rgba(37,50,70,.52)} .task-detail-dialog .td-head{min-height:66px;padding:13px 18px;border-bottom:1px solid #e3e9f1;background:linear-gradient(90deg,#fbfcff,#f7f9ff)}.task-detail-dialog .td-title-line{gap:10px}.task-detail-dialog .td-head h2{font-size:18px;letter-spacing:-.015em;color:#1c2b42}.task-detail-dialog .td-privacy{margin-top:4px;color:#7a899c;font-size:10.5px}.task-detail-dialog .td-privacy button{color:#285fc1;font-size:10.5px}.task-detail-dialog .td-close{font-size:26px;color:#8b98aa} .task-detail-dialog .td-status{min-height:23px;display:inline-flex;align-items:center;padding:0 8px;border-radius:999px;font-size:9.5px;font-weight:750}.task-detail-dialog .td-body{grid-template-columns:minmax(0,1.9fr) minmax(280px,.9fr);max-height:calc(92vh - 66px)}.task-detail-dialog .td-main{padding:20px}.task-detail-dialog .td-side{background:#fbfcfe;border-left:1px solid #e6ebf2}.task-detail-dialog .td-origin{padding-bottom:16px}.task-detail-dialog .td-origin p{font-size:12px;color:#52647c}.task-detail-dialog .td-origin a{color:#1f4f95}.task-detail-dialog .td-actions{gap:6px;margin-top:12px}.task-detail-dialog .td-actions button,.task-detail-dialog .td-actions a{height:32px;border-color:#d4dfec;border-radius:7px;color:#55729a;font-size:11px}.task-detail-dialog .td-complete{width:32px!important;background:#3157df!important;border-color:#3157df!important}.task-detail-dialog .td-open{width:32px}.task-detail-dialog .td-timer{padding:0 10px} .task-detail-dialog .td-section{padding:17px 0}.task-detail-dialog .td-section h3,.task-detail-dialog .td-side h3{font-size:12px;color:#24364f}.task-detail-dialog .td-section h3 svg,.task-detail-dialog .td-side h3 svg{color:#6178a4}.task-detail-dialog .td-description{font-size:12px;line-height:1.65;color:#455970}.task-detail-dialog .td-progress{height:16px;border-radius:999px;background:#edf1f6}.task-detail-dialog .td-progress span{min-width:36px;padding:1px 7px;border-radius:999px;background:#3157df;font-size:9px}.task-detail-dialog .td-check-item{padding:8px 3px}.task-detail-dialog .td-check-item>span{font-size:12px}.task-detail-dialog .td-muted,.task-detail-dialog .td-list-item{font-size:11px;color:#7a899c}.task-detail-dialog .td-inline-form input,.task-detail-dialog .td-stack-form input,.task-detail-dialog .td-stack-form select,.task-detail-dialog .td-comments textarea,.task-detail-dialog .td-sheet-form input,.task-detail-dialog .td-sheet-form textarea{border-color:#cfd9e5;border-radius:7px;font-size:11.5px}.task-detail-dialog .td-inline-form button,.task-detail-dialog .td-stack-form button,.task-detail-dialog .td-comments button,.task-detail-dialog .td-upload button{border-radius:7px;background:#3157df;font-size:10.5px}.task-detail-dialog .td-side section{padding:17px 16px}.task-detail-dialog .td-side dl div{padding:7px 0;border-bottom:1px solid #edf1f5;font-size:11px}.task-detail-dialog .td-side dt{color:#718096}.task-detail-dialog .td-tags span{border-radius:999px;background:#eef3f9;color:#607089;font-size:9px}.task-detail-dialog .td-people span{width:30px;height:30px;background:#eaf1ff;color:#315fc5;font-size:10px}.task-detail-dialog .td-upload label{min-height:96px;border-color:#cfd9e5;border-radius:8px;background:#fbfcfe}.task-detail-dialog .td-timesheets{padding:14px 0!important}.task-detail-dialog .td-sheet-table{border-color:#dce4ed;border-radius:8px;overflow:auto}.task-detail-dialog .td-sheet-table th{height:34px;background:#f8fafc;color:#21314c;font-size:9.5px}.task-detail-dialog .td-sheet-table td{font-size:10.5px}.task-detail-dialog .td-add-control[open]>.td-inline-form,.task-detail-dialog .td-side-title .td-add-control[open]>.td-stack-form{border-color:#dce4ed;border-radius:8px;box-shadow:0 10px 26px rgba(31,48,76,.12)} @media(max-width:800px){.task-detail-dialog .td-body{grid-template-columns:1fr}.task-detail-dialog .td-side{border-left:0;border-top:1px solid #e6ebf2}} /* Task detail Start Timer uses the same neutral action color as Edit */ .task-detail-dialog .td-timer:not(.running){background:#fff!important;border-color:#d4dfec!important;color:#55729a!important;box-shadow:none!important} .task-detail-dialog .td-timer:not(.running):hover,.task-detail-dialog .td-timer:not(.running):focus{background:#f5f8fd!important;border-color:#b9c9df!important;color:#1d4ed8!important} /* ============================================================ SECTION: task-overview.css ============================================================ */ .task-overview-page{color:#1c2c43}.task-overview-heading{margin-bottom:12px}.task-overview-heading h1{font-size:20px;margin:0 0 4px}.task-overview-heading a{color:#2169e8;font-size:13px}.task-overview-filters{display:grid;grid-template-columns:1.1fr 1.1fr 1.1fr 1fr 1.1fr;gap:28px;margin-bottom:17px}.task-overview-filters select,.task-overview-filters button{height:35px;border:1px solid #cbd6e4;border-radius:6px;background:#fff;padding:0 10px;color:#34465e}.task-overview-filters button{background:#1d2b40;color:#fff;border-color:#1d2b40;font-weight:600}.task-overview-card{background:#fff;border:1px solid #dce3ec;border-radius:8px;box-shadow:0 2px 5px #17243a17;overflow:hidden}.task-overview-card-head{display:flex;align-items:center;justify-content:space-between;padding:25px 24px 16px}.task-overview-card-head h2{font-size:18px;margin:0}.task-overview-search{display:flex;align-items:center;border:1px solid #cbd6e4;border-radius:5px;height:32px}.task-overview-search svg{width:16px;margin:0 10px}.task-overview-search input{border:0;outline:0;width:180px;padding-right:10px}.task-overview-tools{display:flex;padding:0 24px 8px}.task-overview-tools select,.task-overview-tools a{height:31px;border:1px solid #cbd6e4;background:#fff;padding:0 11px;color:#34465e}.task-overview-tools select{border-radius:5px 0 0 5px}.task-overview-tools a{display:flex;align-items:center;border-left:0;border-radius:0 5px 5px 0}.task-overview-scroll{overflow:auto}.task-overview-table{border-collapse:collapse;width:100%;min-width:1450px}.task-overview-table th{background:#f4f6f9;color:#526075;text-align:left;white-space:nowrap}.task-overview-table th,.task-overview-table td{border-top:1px solid #e3e8ef;padding:10px;font-size:13px}.task-overview-table td:first-child{min-width:310px}.task-overview-table td:first-child a{display:block;color:#21364f;font-weight:600}.task-overview-table td:first-child small{display:block;color:#65758a;margin-top:3px}.task-overview-status{display:inline-block;padding:5px 8px;border:1px solid #cbd5e2;border-radius:6px;white-space:nowrap}.task-overview-status.status-in-progress{color:#2872ea;border-color:#9bc0ff}.task-overview-status.status-testing{color:#0798ce;border-color:#8cd4ee}.task-overview-status.status-awaiting-feedback{color:#78ae18;border-color:#cbe892}.task-overview-status.status-done{color:#0da454;border-color:#9fe0ba}.task-overview-count,.task-overview-check{display:inline-flex;align-items:center;gap:4px;border:1px solid #e1e6ed;border-radius:6px;padding:4px 7px;white-space:nowrap}.task-overview-count svg{width:13px;height:13px}.task-overview-check{color:#ef4554;background:#fff4f4;border-color:#ffd4d6}.task-overview-check.complete{color:#149b54;background:#effcf4;border-color:#b9e7cb}.task-overview-footer{display:flex;justify-content:space-between;padding:19px 24px;color:#6c7a8d;font-size:12px;border-top:1px solid #e3e8ef}.task-overview-footer b{background:#edf1f6;color:#273950;border-radius:6px;padding:7px 10px;margin:0 10px}@media(max-width:900px){.task-overview-filters{grid-template-columns:1fr 1fr;gap:8px}.task-overview-card-head{align-items:flex-start;gap:12px;flex-direction:column}} /* ============================================================ SECTION: task-status.css ============================================================ */ .main-task-page .pw-task-status.status-complete{color:#0ba654;border-color:#9de0b9;background:#f5fff8}.main-task-page .pw-task-status.status-awaiting-feedback{background:#fbfff3}.main-task-page .pw-task-status.status-testing{background:#f5fcff}.main-task-page .pw-task-status.status-in-progress{background:#f7faff} /* ============================================================ SECTION: tasks.css ============================================================ */ /* Tasks โ€” Invoice design system */ .main-task-page{max-width:1600px;margin:0 auto;color:#263954} .main-task-heading{display:flex;align-items:center;justify-content:space-between;gap:22px;margin:0 0 14px;padding:18px 20px;border:1px solid #dce4ef;border-radius:14px;background:linear-gradient(120deg,#fff 62%,#f5f8ff 100%);box-shadow:0 6px 20px rgba(31,48,76,.055)} .main-task-heading>div:first-child{min-width:0}.main-task-eyebrow{display:block;margin-bottom:4px;color:#5f6bd6;font-size:10px;font-weight:850;letter-spacing:.1em;text-transform:uppercase}.main-task-heading h1{margin:0;font-size:24px;line-height:1.15;letter-spacing:-.025em;color:#18263b}.main-task-heading p{margin:5px 0 0;color:#76859a;font-size:12px;line-height:1.45} .main-task-heading-actions{display:flex;align-items:center;gap:8px;flex:none}.main-task-heading-actions a,.main-task-heading-actions button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:0 12px;border-radius:8px;font:inherit;font-size:12px;font-weight:750;cursor:pointer;text-decoration:none}.main-task-heading-actions svg{width:14px;height:14px}.main-task-secondary{border:1px solid #ced8e5;background:#fff;color:#34506f}.main-task-primary{border:1px solid #3157df;background:#3157df;color:#fff;box-shadow:0 6px 14px rgba(49,87,223,.18)} .main-task-stats{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px!important;padding:0!important;margin:0 0 12px!important}.main-task-stats a{position:relative;display:grid!important;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:center;gap:2px 10px;min-height:52px;padding:9px 13px!important;border:1px solid #dce4ed!important;border-radius:10px!important;background:#fff!important;color:#52647c!important;text-align:left!important;text-decoration:none;box-shadow:none!important}.main-task-stats a span{grid-column:1;font-size:11px;font-weight:700;color:#52647c!important}.main-task-stats a strong{grid-column:2;grid-row:1/3;align-self:center;font-size:17px;line-height:1;color:#21344f}.main-task-stats a small{grid-column:1;font-size:9.5px;color:#8a98aa}.main-task-stats a.active{border-color:#9bb5f0!important;background:#f2f6ff!important}.main-task-stats a.active span,.main-task-stats a.active strong{color:#285fc1!important}.main-task-stats a.slate{border-left:3px solid #7a8798!important}.main-task-stats a.blue{border-left:3px solid #4f7ee8!important}.main-task-stats a.cyan{border-left:3px solid #38a6cf!important}.main-task-stats a.lime{border-left:3px solid #9dbd36!important}.main-task-stats a.green{border-left:3px solid #2eaa73!important} .main-task-filters{display:none;align-items:end;gap:10px;padding:12px 14px!important;margin:0 0 10px!important;border:1px solid #dce4ed!important;border-radius:10px!important;background:#fff!important}.main-task-filters.open{display:flex!important}.main-task-filters label{display:grid!important;gap:5px!important;font-size:11px!important;font-weight:700!important;color:#53647a!important}.main-task-filters input,.main-task-filters select{height:32px!important;margin:0!important;border:1px solid #cfd9e5!important;border-radius:6px!important;padding:0 9px!important;background:#fff!important;color:#30435c!important;font:inherit!important;font-size:11px!important}.main-task-filters button{height:32px;padding:0 11px;border:1px solid #3157df;border-radius:6px;background:#3157df;color:#fff;font:inherit;font-size:11px;font-weight:750;cursor:pointer} .main-task-shell{padding:0!important;background:#fff;border:1px solid #dce3ec!important;border-radius:12px!important;box-shadow:0 5px 18px rgba(31,48,76,.055)!important;overflow:hidden}.main-task-shell .pw-table-tools{min-height:62px;display:flex!important;align-items:center;justify-content:space-between;gap:14px;padding:10px 14px!important;background:linear-gradient(90deg,#fbfcff,#f7f9ff)!important;border-bottom:1px solid #e3e9f1!important}.main-task-toolbar-left,.pw-task-search{display:flex;align-items:center}.main-task-toolbar-left{min-width:0}.main-task-shell .pw-table-tools select,.main-task-shell .pw-table-tools a,.main-task-shell .pw-table-tools button,.pw-task-search input{height:32px;box-sizing:border-box;border:1px solid #cbd6e4;background:#fff;color:#34465e;font:inherit;font-size:11px}.main-task-shell .pw-table-tools select{min-width:70px;padding:0 8px}.main-task-toolbar-left>select:first-child{border-radius:6px 0 0 6px}.main-task-toolbar-left>a,.main-task-toolbar-left>button{display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:0 9px;border-left:0;text-decoration:none;cursor:pointer;border-radius:0}.main-task-toolbar-left>select[name=action]{min-width:116px;border-left:0;border-radius:0}.main-task-toolbar-left>.pw-square{width:34px;padding:0}.main-task-refresh{border-radius:0 6px 6px 0!important}.main-task-toolbar-left svg,.pw-task-search svg{width:13px;height:13px}.pw-task-search{position:relative;height:32px}.pw-task-search>svg{position:absolute;left:11px;z-index:1;color:#7b899b}.pw-task-search input{width:210px;padding:0 10px 0 31px!important;border-radius:6px!important;outline:0}.pw-task-search input:focus{border-color:#8eace8;box-shadow:0 0 0 3px rgba(49,87,223,.08)} .main-task-shell .pw-table-scroll{overflow-x:auto}.main-task-shell .pw-task-table{width:100%;min-width:1120px;border-collapse:collapse;font-size:12px}.main-task-shell .pw-task-table th{height:40px;padding:0 11px!important;background:#f8fafc!important;color:#21314c!important;text-align:left;font-size:10.5px!important;font-weight:750!important;border-bottom:1px solid #e4eaf1!important}.main-task-shell .pw-task-table th+th{border-left:1px solid #e7ebf1}.main-task-shell .pw-task-table td{height:62px;padding:9px 11px!important;border-bottom:1px solid #e8edf3!important;color:#33465f!important;vertical-align:middle}.main-task-shell .pw-task-table tbody tr:hover td{background:#fbfcff}.main-task-shell .pw-task-table th:first-child,.main-task-shell .pw-task-table td:first-child{width:34px;text-align:center}.main-task-shell input[type=checkbox]{accent-color:#3157df} .main-task-name{display:flex!important;min-height:42px;flex-direction:row!important;align-items:center!important;gap:9px;min-width:230px}.main-task-icon{width:32px;height:32px;flex:none;display:grid;place-items:center;border-radius:9px;background:#eef3ff;color:#4965d7}.main-task-icon svg{width:15px;height:15px}.main-task-copy{min-width:0;display:flex;flex-direction:column;align-items:flex-start}.task-detail-link{display:block!important;max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0!important;border:0!important;background:transparent!important;color:#1f4f95!important;font:inherit!important;font-weight:800!important;text-align:left!important;cursor:pointer}.task-detail-link:hover{color:#1d4ed8!important}.main-task-hover-actions{display:flex!important;align-items:center;gap:5px;max-height:22px!important;margin-top:3px!important;overflow:visible!important;opacity:1!important;font-size:9.5px}.main-task-hover-actions form{display:inline;margin:0}.main-task-hover-actions a,.main-task-hover-actions button{padding:0!important;border:0!important;background:transparent!important;color:#55729a!important;font:inherit!important;font-size:9.5px!important;font-weight:650!important;text-decoration:none!important;cursor:pointer}.main-task-hover-actions a:hover,.main-task-hover-actions button:hover{color:#1d4ed8!important;text-decoration:underline}.main-task-hover-actions span{color:#b5bfcc;font-size:9px} .main-task-shell .pw-task-status,.main-task-shell .pw-priority{appearance:none;min-height:24px;padding:0 22px 0 8px;border:1px solid #d7e0eb;border-radius:999px;background-color:#f7f9fc;background-image:linear-gradient(45deg,transparent 50%,#74849a 50%),linear-gradient(135deg,#74849a 50%,transparent 50%);background-position:calc(100% - 10px) 9px,calc(100% - 7px) 9px;background-size:3px 3px,3px 3px;background-repeat:no-repeat;color:#5a6b80;font-size:9.5px;font-weight:750;cursor:pointer}.main-task-shell .pw-task-status.status-in-progress{background-color:#eef4ff;border-color:#d1e0fb;color:#2862c1}.main-task-shell .pw-task-status.status-testing{background-color:#effaff;border-color:#cfeaf5;color:#2681a4}.main-task-shell .pw-task-status.status-awaiting-feedback{background-color:#f7fbea;border-color:#e2edbd;color:#718a1d}.main-task-shell .pw-task-status.status-complete{background-color:#eefaf4;border-color:#d5f0e1;color:#198754}.main-task-shell .pw-priority.priority-high,.main-task-shell .pw-priority.priority-urgent{background-color:#fff2f2;border-color:#f3d0d0;color:#b63b45}.main-task-shell .pw-priority.priority-medium{background-color:#fff8ec;border-color:#f1dfba;color:#a56d10}.main-task-shell .pw-priority.priority-low{background-color:#f4f6f9;color:#66778b}.pw-assignees{display:flex;align-items:center}.pw-assignees span{display:grid!important;place-items:center;width:27px!important;height:27px!important;margin-left:-5px!important;border:2px solid #fff!important;border-radius:50%!important;background:#eaf1ff!important;color:#315fc5!important;font-size:9px!important;font-style:normal!important;font-weight:800!important;box-shadow:0 0 0 1px #d7e1ee}.pw-assignees span:first-child{margin-left:0!important}.pw-assignees span.empty{background:#f4f6f9!important;color:#8b98aa!important}.main-task-shell td>em{display:inline-flex;margin:2px 3px 2px 0;padding:3px 7px;border-radius:999px;background:#eef3f9;color:#607089;font-size:9px;font-style:normal} .main-task-shell .pw-task-footer{min-height:58px;display:flex!important;align-items:center;justify-content:space-between;gap:12px;padding:0 14px!important;border-top:0!important;background:#fff;color:#718096;font-size:11px}.main-task-shell .pw-task-footer nav{display:inline-flex}.main-task-shell .pw-task-footer nav>div:first-child{display:none}.main-task-shell .pw-task-footer nav>div:last-child{display:flex;align-items:center;gap:0}.main-task-shell .pw-task-footer nav span,.main-task-shell .pw-task-footer nav a{min-height:30px;display:inline-flex;align-items:center;padding:0 9px;border:0!important;background:transparent;color:#66778d;text-decoration:none}.main-task-shell .pw-task-footer nav span[aria-current=page] span{min-width:30px;justify-content:center;border-radius:7px;background:#eaf0f8;color:#25405f}.main-task-shell .pw-empty{padding:36px!important;text-align:center;color:#7d8b9e}.main-task-shell .pw-empty button{border:0;background:transparent;color:#285fc1;cursor:pointer} /* New Task modal, aligned to Invoice forms */ #main-task-dialog{width:min(720px,calc(100% - 28px));padding:0;border:1px solid #dce4ed;border-radius:12px;background:#fff;color:#263954;box-shadow:0 24px 70px rgba(23,38,59,.24)}#main-task-dialog::backdrop{background:rgba(37,50,70,.52)}#main-task-dialog form>header{min-height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 20px!important;border-bottom:1px solid #e3e9f1;background:linear-gradient(90deg,#fbfcff,#f7f9ff)}#main-task-dialog form>header h2{margin:0;font-size:17px;color:#1c2b42}#main-task-dialog form>header button{border:0;background:transparent;color:#8a98aa;font-size:26px;cursor:pointer}#main-task-dialog .pw-dialog-body{padding:0 20px 18px!important;max-height:74vh;overflow:auto}.pw-task-options{padding:18px 0 14px!important;margin-bottom:15px!important;border-bottom:1px solid #edf1f5!important}.pw-task-options label{font-size:12px!important;color:#465970}.pw-task-dialog .pw-dialog-body>label,.pw-task-dialog .pw-form-grid label{font-size:11.5px!important;font-weight:700!important;color:#40526a!important}.pw-task-dialog .pw-dialog-body input,.pw-task-dialog .pw-dialog-body select,.pw-task-dialog .pw-dialog-body textarea,.pw-task-tags .pw-tag-editor{border-color:#cfd9e5!important;border-radius:7px!important;background:#fff!important;color:#30435c!important;font-size:12px!important}.pw-task-dialog .pw-dialog-body>label>input,.pw-task-dialog .pw-form-grid input,.pw-task-dialog .pw-form-grid select{height:36px!important}.pw-task-dialog .pw-form-grid{gap:0 18px!important}.pw-task-tags{padding-bottom:15px!important;border-bottom:1px solid #edf1f5!important}.pw-task-description{margin-top:16px!important}.pw-task-description textarea{min-height:118px!important;padding:10px!important}.pw-task-dialog form>footer{display:flex;justify-content:flex-end;gap:8px;padding:12px 20px!important;border-top:1px solid #e3e9f1;background:#fafbfd}.pw-task-dialog form>footer button{min-height:34px;padding:0 12px;border:1px solid #cfd9e5;border-radius:7px;background:#fff;color:#506179;font:inherit;font-size:11px;font-weight:750;cursor:pointer}.pw-task-dialog form>footer .pw-dark{border-color:#3157df!important;background:#3157df!important;color:#fff!important} @media(max-width:1050px){.main-task-stats{grid-template-columns:repeat(3,minmax(0,1fr))!important}}@media(max-width:900px){.main-task-heading{align-items:flex-start;flex-direction:column}.main-task-shell .pw-table-tools{flex-wrap:wrap}.main-task-filters.open{flex-wrap:wrap}.pw-task-search{margin-left:auto}}@media(max-width:620px){.main-task-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}.main-task-heading-actions{width:100%;flex-wrap:wrap}.main-task-toolbar-left{flex-wrap:wrap}.main-task-toolbar-left>*{border-left:1px solid #cbd6e4!important;border-radius:6px!important;margin:2px}.pw-task-search{width:100%;margin:0}.pw-task-search input{width:100%}.main-task-shell .pw-task-footer{padding:12px 14px!important;flex-wrap:wrap}}@media(max-width:420px){.main-task-stats{grid-template-columns:1fr!important}} /* Tasks inline actions โ€” keep Start Timer and Delete identical to Edit */ .main-task-hover-actions .main-task-inline-action, .main-task-hover-actions form>button.task-start-timer-action, .main-task-hover-actions form>button.task-delete-action{ appearance:none!important;-webkit-appearance:none!important;display:inline!important;width:auto!important;height:auto!important;min-width:0!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;background-color:transparent!important;background-image:none!important;box-shadow:none!important;color:#55729a!important;font:inherit!important;font-size:9.5px!important;font-weight:650!important;line-height:inherit!important;letter-spacing:normal!important;text-transform:none!important;text-decoration:none!important;text-shadow:none!important;cursor:pointer!important;vertical-align:baseline!important } .main-task-hover-actions .main-task-inline-action:hover, .main-task-hover-actions .main-task-inline-action:focus, .main-task-hover-actions .main-task-inline-action:active{ border:0!important;background:transparent!important;background-image:none!important;box-shadow:none!important;color:#1d4ed8!important;text-decoration:underline!important;outline:none!important;transform:none!important } /* ============================================================ SECTION: tickets.css ============================================================ */ .ticket-create{max-width:1360px;margin:22px auto 50px;color:#223249} .ticket-create h1{font-size:19px;margin:0 0 12px;font-weight:700} .ticket-errors{margin:0 0 12px;padding:12px 16px;border:1px solid #f5b6b6;border-radius:6px;background:#fff4f4;color:#9d2525;font-size:14px}.ticket-errors ul{margin:5px 0 0;padding-left:20px} .ticket-create form{background:#fff;border:1px solid #d8dfe9;border-radius:8px;box-shadow:0 2px 5px #17243a16} .ticket-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 30px;padding:24px} .ticket-field{min-width:0} .ticket-field label,.ticket-attachments>label{display:flex;align-items:center;gap:4px;font-size:14px;font-weight:600;margin-bottom:7px} .ticket-field label svg{width:15px;height:15px} .ticket-field input,.ticket-field select,.ticket-body-section>.ticket-subgrid select{box-sizing:border-box;width:100%;height:35px;padding:6px 10px;border:1px solid #cbd5e1;border-radius:6px;background:#fff;color:#24364b;font:inherit;font-size:14px} .ticket-field input:read-only,.ticket-field select:disabled{background:#f5f7fa;color:#8a95a7} .ticket-subgrid{display:grid;grid-template-columns:1fr 1fr;gap:30px} .ticket-tags{display:flex;align-items:center;flex-wrap:wrap;gap:5px;min-height:35px} .ticket-tags input{flex:1;min-width:90px;border:0;padding-left:7px;outline:0} .ticket-tag{display:inline-flex;align-items:center;gap:4px;padding:6px 9px;border-radius:5px;background:#edf0f4;font-size:13px} .ticket-tag button{border:0;background:none;font-size:17px;color:#64748b;cursor:pointer} .ticket-service,.ticket-file-line{display:flex} .ticket-service select,.ticket-service input{border-radius:6px 0 0 6px} .ticket-service button,.ticket-file-add{width:40px;flex:none;border:1px solid #cbd5e1;border-left:0;border-radius:0 6px 6px 0;background:#fff;font-size:21px;cursor:pointer} .ticket-body-section{border-top:1px solid #e1e7ee;padding:27px 24px 24px} .ticket-body-section h2{margin:0 0 9px;font-size:15px} .ticket-body-section>.ticket-subgrid{margin-bottom:20px} .ticket-editor{border:1px solid #cbd5e1;border-radius:6px;overflow:hidden} .ticket-editor-menu{height:42px;padding:13px 20px 0;font-size:13px} .ticket-editor-toolbar{display:flex;align-items:center;gap:7px;min-height:46px;padding:5px 12px;border-bottom:1px solid #cbd5e1} .ticket-editor-toolbar select{height:29px;min-width:100px;border:0;background:#f4f5f8;padding:0 8px;font:inherit;font-size:13px} .ticket-editor-toolbar button{display:grid;width:30px;height:29px;place-items:center;border:0;background:#fff;color:#24364b;font-size:16px;cursor:pointer} .ticket-editor-toolbar button:hover{background:#edf0f4} .ticket-editor-toolbar svg{width:17px;height:17px} .ticket-editor-content{min-height:158px;padding:15px;outline:0;font-size:14px;line-height:1.5;white-space:pre-wrap} .ticket-editor-content[aria-invalid=true]{box-shadow:inset 0 0 0 1px #ef4444} .ticket-attachments{width:32%;margin:24px 0 20px auto} .ticket-file-line{height:35px;margin-bottom:7px} .ticket-file-line input{min-width:0;flex:1;border:1px solid #cbd5e1;border-radius:5px 0 0 5px;padding:5px} .ticket-submit{display:flex;justify-content:flex-end;border-top:1px solid #e1e7ee;padding-top:12px} .ticket-submit button{border:0;border-radius:7px;background:#1e293b;color:#fff;padding:10px 13px;font-weight:600;cursor:pointer} @media(max-width:900px){.ticket-info-grid{grid-template-columns:1fr}.ticket-attachments{width:100%}.ticket-editor-toolbar{overflow-x:auto}.ticket-editor-toolbar>*{flex:none}} @media(max-width:560px){.ticket-subgrid{grid-template-columns:1fr;gap:14px}} /* ========================================================== Tickets โ€” Invoice-style visual system ========================================================== */ .ticket-invoice-page{max-width:1600px;margin:0 auto 48px!important;color:#263954!important}.ticket-invoice-heading{display:flex;align-items:center;justify-content:space-between;gap:22px;margin:0 0 12px;padding:18px 20px;border:1px solid #dce4ef;border-radius:14px;background:linear-gradient(120deg,#fff 62%,#f5f8ff 100%);box-shadow:0 6px 20px rgba(31,48,76,.055)}.ticket-invoice-heading>div>span{display:block;margin-bottom:4px;color:#5f6bd6;font-size:10px;font-weight:850;letter-spacing:.1em}.ticket-invoice-heading h1{margin:0!important;color:#18263b!important;font-size:24px!important;line-height:1.2!important}.ticket-invoice-heading p{margin:5px 0 0;color:#76859a;font-size:12px}.ticket-invoice-heading>a{min-height:36px;display:inline-flex;align-items:center;gap:6px;padding:0 12px;border:1px solid #ced8e5;border-radius:8px;background:#fff;color:#34506f;text-decoration:none;font-size:12px;font-weight:750}.ticket-invoice-heading>a:hover{background:#f7f9fd;color:#285fc1}.ticket-invoice-heading>a svg{width:14px;height:14px}.ticket-section-title{margin:0 0 9px!important;color:#21314c!important;font-size:13px!important;font-weight:800!important} .ticket-create form{border:1px solid #dce3ec!important;border-radius:12px!important;box-shadow:0 5px 18px rgba(31,48,76,.055)!important;overflow:hidden!important}.ticket-info-grid{gap:14px 24px!important;padding:20px!important;background:#fff!important}.ticket-field label,.ticket-attachments>label{margin-bottom:6px!important;color:#53647a!important;font-size:11px!important;font-weight:700!important}.ticket-field input,.ticket-field select,.ticket-body-section>.ticket-subgrid select{height:36px!important;padding:0 9px!important;border:1px solid #cfd9e5!important;border-radius:7px!important;color:#30435c!important;font-size:12px!important}.ticket-field input:focus,.ticket-field select:focus,.ticket-body-section>.ticket-subgrid select:focus{outline:0!important;border-color:#9bb5f0!important;box-shadow:0 0 0 3px #eef4ff!important}.ticket-field input:read-only,.ticket-field select:disabled{background:#f8fafc!important;color:#8795a7!important}.ticket-subgrid{gap:18px!important}.ticket-tags{min-height:36px!important;border:1px solid #cfd9e5!important;border-radius:7px!important;padding:3px 5px!important;background:#fff!important}.ticket-tags input{height:28px!important;border:0!important;box-shadow:none!important}.ticket-tag{padding:4px 7px!important;border:1px solid #d7e2fa!important;border-radius:999px!important;background:#f2f6ff!important;color:#315fc5!important;font-size:10px!important}.ticket-service button,.ticket-file-add{width:38px!important;border-color:#cfd9e5!important;border-radius:0 7px 7px 0!important;color:#55729a!important;background:#fff!important}.ticket-service button:hover,.ticket-file-add:hover{background:#f5f8fd!important;color:#285fc1!important} .ticket-body-section{padding:18px 20px 20px!important;border-top:1px solid #e3e9f1!important;background:#fbfcfe!important}.ticket-body-section h2{margin:0 0 10px!important;color:#21314c!important;font-size:13px!important;font-weight:800!important}.ticket-body-section>.ticket-subgrid{margin-bottom:14px!important}.ticket-editor{border-color:#cfd9e5!important;border-radius:8px!important;background:#fff!important}.ticket-editor-menu{height:34px!important;padding:10px 14px 0!important;color:#68788d!important;font-size:10.5px!important;border-bottom:1px solid #e5eaf1!important}.ticket-editor-toolbar{min-height:42px!important;padding:6px 9px!important;gap:5px!important;border-bottom:1px solid #e5eaf1!important;background:#f8fafc!important}.ticket-editor-toolbar select{height:30px!important;min-width:92px!important;border:1px solid #dce3eb!important;border-radius:6px!important;background:#fff!important;font-size:10.5px!important}.ticket-editor-toolbar button{width:29px!important;height:29px!important;border:1px solid transparent!important;border-radius:6px!important;color:#56667c!important}.ticket-editor-toolbar button:hover{border-color:#d7e0eb!important;background:#eef4ff!important;color:#285fc1!important}.ticket-editor-content{min-height:190px!important;padding:14px!important;color:#30435c!important;font-size:12px!important;line-height:1.6!important}.ticket-attachments{width:38%!important;margin:18px 0 14px auto!important}.ticket-file-line{height:36px!important}.ticket-file-line input{border-color:#cfd9e5!important;border-radius:7px 0 0 7px!important;background:#fff!important;font-size:11px!important}.ticket-submit{margin:0 -20px -20px!important;padding:13px 20px!important;border-top:1px solid #e3e9f1!important;background:#fff!important}.ticket-submit button{min-height:36px!important;padding:0 13px!important;border-radius:7px!important;background:#3157df!important;font-size:11px!important;font-weight:750!important;box-shadow:0 4px 10px rgba(49,87,223,.14)!important}.ticket-submit button:hover{background:#2749bf!important}.ticket-errors{margin:0 0 10px!important;border-radius:8px!important;font-size:11px!important}.support-ticket-table th:last-child,.support-ticket-table td:last-child{text-align:right}.support-ticket-page .invoice-contact-inline-delete{color:#55729a!important} @media(max-width:900px){.ticket-invoice-heading{align-items:flex-start;flex-direction:column}.ticket-info-grid{grid-template-columns:1fr!important}.ticket-attachments{width:100%!important}} .ticket-body-section>.jodit-container{width:100%!important;max-width:none!important;border:1px solid #cfd9e5!important;border-radius:10px!important;background:#fff!important;overflow:hidden}.ticket-body-section .jodit-workplace{min-height:320px!important}.ticket-body-section .jodit-wysiwyg{min-height:320px!important;padding:18px!important;line-height:1.65!important}.ticket-body-section>.ticket-subgrid{width:100%!important}.ticket-service-dialog{width:min(620px,calc(100vw - 32px));padding:0;border:0;border-radius:14px;background:transparent}.ticket-service-dialog::backdrop{background:rgba(20,34,55,.58);backdrop-filter:blur(2px)}.ticket-service-card{overflow:hidden;border:1px solid #d7e1ec;border-radius:14px;background:#fff;box-shadow:0 24px 64px rgba(20,34,55,.24)}.ticket-service-card>header{display:flex;align-items:flex-start;justify-content:space-between;padding:22px 24px;background:#19283e;color:#fff}.ticket-service-card>header span{font-size:10px;letter-spacing:.12em;color:#b8c6d9}.ticket-service-card>header h2{margin:5px 0 0;font-size:20px}.ticket-service-card>header button{width:34px;height:34px;border:1px solid #506078;border-radius:8px;background:#263954;color:#fff;font-size:22px;cursor:pointer}.ticket-service-create,.ticket-service-search{display:grid;gap:8px;padding:20px 24px 0;color:#53647a;font-size:12px;font-weight:700}.ticket-service-create>div{display:flex}.ticket-service-create input,.ticket-service-search input{box-sizing:border-box;width:100%;height:42px;padding:0 12px;border:1px solid #cfd9e5;border-radius:8px;background:#fff;color:#223249}.ticket-service-create>div input{border-radius:8px 0 0 8px}.ticket-service-create>div button{padding:0 18px;border:0;border-radius:0 8px 8px 0;background:#3157df;color:#fff;font-weight:700;cursor:pointer}.ticket-service-create p{min-height:18px;margin:0;color:#3157df;font-weight:600}.ticket-service-list{display:grid;gap:8px;max-height:280px;overflow:auto;padding:14px 24px 24px}.ticket-service-list>button{display:flex;align-items:center;justify-content:space-between;width:100%;padding:12px 14px;border:1px solid #e0e7f0;border-radius:9px;background:#f8fafc;color:#263954;text-align:left;cursor:pointer}.ticket-service-list>button:hover{border-color:#9eb7ec;background:#eef4ff}.ticket-service-list b{color:#3157df;font-size:11px} /* Ticket service dialog contrast must remain independent from global button and heading styles. */ .ticket-service-dialog .ticket-service-card>header span{color:#cbd8e9!important}.ticket-service-dialog .ticket-service-card>header h2{color:#fff!important}.ticket-service-dialog .ticket-service-card>header>button{background:#fff!important;color:#111827!important;border-color:#fff!important}.ticket-service-dialog .ticket-service-create>div>#ticket-service-save{min-width:118px!important;height:42px!important;padding:0 20px!important;border:1px solid #111827!important;border-radius:0 8px 8px 0!important;background:#111827!important;color:#fff!important;font-size:12px!important;font-weight:800!important;line-height:1.1!important;box-shadow:0 5px 12px rgba(17,24,39,.18)!important;cursor:pointer!important}.ticket-service-dialog .ticket-service-create>div>#ticket-service-save:hover,.ticket-service-dialog .ticket-service-create>div>#ticket-service-save:focus{background:#000!important;border-color:#000!important;color:#fff!important;box-shadow:0 0 0 3px rgba(17,24,39,.16)!important} body.nextcrm-modern #ticket-service-dialog .ticket-service-card>header{--crm-action:#fff!important;color:#fff!important;-webkit-text-fill-color:#fff!important}body.nextcrm-modern #ticket-service-dialog .ticket-service-card>header span,body.nextcrm-modern #ticket-service-dialog .ticket-service-card>header h2{color:#fff!important;-webkit-text-fill-color:#fff!important}body.nextcrm-modern #ticket-service-dialog #ticket-service-save{--crm-action:#fff!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;white-space:nowrap!important;background:#111827!important;color:#fff!important;-webkit-text-fill-color:#fff!important}body.nextcrm-modern #ticket-service-dialog #ticket-service-save span{color:#fff!important;-webkit-text-fill-color:#fff!important} .invoice-payment-action,.credit-apply-action{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:0 16px;border:1px solid #142337;border-radius:8px;background:#142337!important;color:#fff!important;-webkit-text-fill-color:#fff!important;font-weight:800;cursor:pointer}.invoice-payment-dialog,.credit-apply-dialog{width:min(780px,calc(100vw - 32px))!important}.invoice-payment-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.invoice-payment-grid>div{display:grid;align-content:start;gap:14px}.invoice-payment-email{display:flex!important;align-items:center;gap:10px}.invoice-payment-email input{width:auto!important}.invoice-payment-dialog h3{margin:22px 0 10px}.credit-apply-dialog form>p{line-height:1.7}@media(max-width:720px){.invoice-payment-grid{grid-template-columns:1fr}} /* Standard invoice payment dialog */ body.nx-shell dialog#invoice-payment-dialog{width:min(820px,calc(100vw - 32px))!important;max-height:calc(100dvh - 32px)!important;padding:0!important;overflow:hidden!important;border:1px solid #d7e0eb!important;border-radius:16px!important;background:#fff!important;color:#17243a!important;box-shadow:0 28px 80px rgba(15,23,42,.28)!important} body.nx-shell dialog#invoice-payment-dialog::backdrop{background:rgba(15,23,42,.56)!important;backdrop-filter:blur(2px)} body.nx-shell dialog#invoice-payment-dialog>form{display:block!important;max-height:calc(100dvh - 34px)!important;overflow:auto!important;text-align:left!important} body.nx-shell #invoice-payment-dialog .invoice-dialog-heading{position:sticky;top:0;z-index:3;display:flex!important;align-items:center!important;justify-content:space-between!important;padding:22px 26px 18px!important;border-bottom:1px solid #e3e9f1!important;background:#fff!important;text-align:left!important} body.nx-shell #invoice-payment-dialog .invoice-dialog-heading small{display:block;color:#55708f!important;font-size:11px!important;font-weight:800!important;letter-spacing:.12em!important} body.nx-shell #invoice-payment-dialog .invoice-dialog-heading h2{margin:5px 0 0!important;color:#17243a!important;font-size:22px!important;line-height:1.25!important;text-align:left!important} body.nx-shell #invoice-payment-dialog .invoice-dialog-heading [data-close-invoice-dialog]{display:grid!important;place-items:center;width:36px;height:36px;padding:0!important;border:1px solid #d7e0eb!important;border-radius:9px!important;background:#fff!important;color:#53647a!important;font-size:22px!important} body.nx-shell #invoice-payment-dialog .invoice-dialog-heading [data-close-invoice-dialog]:hover{background:#f3f6fa!important;color:#17243a!important} body.nx-shell #invoice-payment-dialog .invoice-dialog-relation{margin:20px 26px 0!important;padding:13px 15px!important;border:1px solid #e1e8f0!important;border-radius:9px!important;background:#f7f9fc!important;color:#53647a!important;text-align:left!important} body.nx-shell #invoice-payment-dialog .invoice-dialog-relation strong{color:#17243a!important} body.nx-shell #invoice-payment-dialog .invoice-payment-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px 22px!important;padding:22px 26px 18px!important} body.nx-shell #invoice-payment-dialog .invoice-payment-grid>div{display:grid!important;align-content:start!important;gap:16px!important} body.nx-shell #invoice-payment-dialog .invoice-payment-grid label{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:7px!important;margin:0!important;color:#34445a!important;font-size:13px!important;font-weight:700!important;text-align:left!important} body.nx-shell #invoice-payment-dialog .invoice-payment-grid :is(input,select,textarea){width:100%!important;min-height:44px!important;padding:10px 12px!important;border:1px solid #cbd6e4!important;border-radius:8px!important;background:#fff!important;color:#17243a!important;text-align:left!important;outline:0!important} body.nx-shell #invoice-payment-dialog .invoice-payment-grid textarea{min-height:105px!important;resize:vertical!important} body.nx-shell #invoice-payment-dialog .invoice-payment-grid :is(input,select,textarea):focus{border-color:#4f7fe8!important;box-shadow:0 0 0 3px rgba(79,127,232,.13)!important} body.nx-shell #invoice-payment-dialog .invoice-payment-email{display:grid!important;grid-template-columns:16px minmax(0,1fr)!important;align-items:center!important;justify-content:start!important;gap:10px!important;margin:0 26px 22px!important;padding:14px 15px!important;border:1px solid #e1e8f0!important;border-radius:9px!important;background:#fbfcfe!important;color:#53647a!important;font-size:13px!important;font-weight:600!important;line-height:1.45!important;text-align:left!important} body.nx-shell #invoice-payment-dialog .invoice-payment-email span{display:block!important;text-align:left!important} body.nx-shell #invoice-payment-dialog .invoice-payment-email input{flex:0 0 auto!important;width:16px!important;height:16px!important;min-height:0!important;margin:2px 0 0!important} body.nx-shell #invoice-payment-dialog h3{margin:0!important;padding:0 26px 12px!important;color:#17243a!important;font-size:15px!important;text-align:left!important} body.nx-shell #invoice-payment-dialog table{display:table!important;width:calc(100% - 52px)!important;margin:0 26px 22px!important;border:1px solid #e1e8f0!important;border-radius:9px!important;overflow:hidden!important;font-size:12px!important} body.nx-shell #invoice-payment-dialog th{background:#f7f9fc!important;color:#53647a!important;text-align:left!important} body.nx-shell #invoice-payment-dialog :is(th,td){padding:11px 12px!important} body.nx-shell #invoice-payment-dialog footer{position:sticky;bottom:0;z-index:3;display:flex!important;justify-content:flex-end!important;gap:9px!important;padding:16px 26px!important;border-top:1px solid #e1e8f0!important;background:#fff!important} body.nx-shell #invoice-payment-dialog footer button{min-height:40px!important;padding:0 17px!important;border:1px solid #cbd6e4!important;border-radius:8px!important;background:#fff!important;color:#43536a!important;font-weight:700!important} body.nx-shell #invoice-payment-dialog footer button:last-child{border-color:#17243a!important;background:#17243a!important;color:#fff!important} body.nx-shell #invoice-payment-dialog footer button:disabled{opacity:.5!important;cursor:not-allowed!important} @media(max-width:720px){body.nx-shell #invoice-payment-dialog .invoice-payment-grid{grid-template-columns:1fr!important;padding:18px!important}body.nx-shell #invoice-payment-dialog .invoice-dialog-heading{padding:18px!important}body.nx-shell #invoice-payment-dialog .invoice-dialog-relation{margin:16px 18px 0!important}body.nx-shell #invoice-payment-dialog .invoice-payment-email{margin:0 18px 18px!important}body.nx-shell #invoice-payment-dialog h3{padding:0 18px 10px!important}body.nx-shell #invoice-payment-dialog table{display:block!important;width:auto!important;margin:0 18px 18px!important;overflow-x:auto!important}body.nx-shell #invoice-payment-dialog footer{padding:14px 18px!important}} /* ============================================================ SECTION: time-cards.css ============================================================ */ .timecard-page{width:100%;color:#26364b}.timecard-shell{overflow:hidden;border:1px solid #e0e6ef;border-radius:11px;background:#fff;box-shadow:0 3px 14px #1f29370a}.timecard-head{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 22px 14px}.timecard-title-wrap h1{margin:0;font-size:21px;letter-spacing:-.3px}.timecard-title-wrap p{margin:5px 0 0;color:#8390a2;font-size:13px}.timecard-manual-button{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 12px;border:1px solid #d5deea;border-radius:7px;background:#fff;color:#314156;text-decoration:none;font-size:13px;font-weight:600}.timecard-manual-button:hover{border-color:#a9c1e7;background:#f8fbff}.timecard-manual-button svg{width:15px}.timecard-tabs{display:flex;align-items:flex-end;gap:3px;overflow-x:auto;padding:0 15px;border-bottom:1px solid #e5eaf1;white-space:nowrap}.timecard-tabs a{position:relative;padding:13px 15px 12px;color:#425269;text-decoration:none;font-size:13px;font-weight:500}.timecard-tabs a:hover{color:#1f65cb}.timecard-tabs a.active{color:#1d4f91;font-weight:700}.timecard-tabs a.active:after{content:"";position:absolute;right:8px;bottom:-1px;left:8px;height:2px;border-radius:2px;background:#2c5f9e}.timecard-toolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:15px;padding:13px 16px;border-bottom:1px solid #e8edf3;background:#fbfcfe}.timecard-toolbar-left,.timecard-date-form,.timecard-range-form{display:flex;align-items:flex-end;gap:9px}.timecard-date-form label,.timecard-range-form label{display:grid;gap:4px;color:#718096;font-size:11px;font-weight:600}.timecard-date-form input,.timecard-range-form input{height:34px;border:1px solid #d2dbe8;border-radius:6px;background:#fff;padding:0 9px;color:#334155;font:inherit;font-size:12px}.timecard-range-form button{display:inline-flex;align-items:center;gap:6px;height:34px;border:1px solid #cbd6e5;border-radius:6px;background:#fff;color:#3a4b61;padding:0 11px;cursor:pointer}.timecard-range-form button svg{width:14px}.timecard-live-label{display:inline-flex;align-items:center;gap:7px;color:#65758a;font-size:12px}.timecard-live-label svg{width:15px;color:#17a36b}.timecard-search{display:flex;align-items:center;position:relative}.timecard-search>svg{position:absolute;left:10px;width:15px;color:#93a1b2}.timecard-search input{box-sizing:border-box;width:235px;height:34px;padding:0 72px 0 32px;border:1px solid #d4ddea;border-radius:6px;background:#fff;color:#334155;font:inherit;font-size:12px;outline:0}.timecard-search input:focus{border-color:#8fb6ed;box-shadow:0 0 0 3px #2f7de915}.timecard-search button{position:absolute;right:3px;height:28px;border:0;border-radius:5px;background:#edf4ff;color:#2e68bb;padding:0 9px;font-size:11px;font-weight:700;cursor:pointer}.timecard-table-wrap{overflow-x:auto}.timecard-table{width:100%;border-collapse:collapse;min-width:760px}.timecard-table th{padding:12px 14px;border-bottom:1px solid #e4eaf1;background:#fff;color:#405066;text-align:left;font-size:12px;font-weight:700}.timecard-table td{padding:12px 14px;border-bottom:1px solid #edf1f5;color:#4b5b70;font-size:12px;vertical-align:middle}.timecard-table tbody tr:hover{background:#fbfdff}.timecard-table.compact th,.timecard-table.compact td{padding:10px 14px}.timecard-member{display:inline-flex;align-items:center;gap:9px;color:#2868b8!important;text-decoration:none}.timecard-member>img,.timecard-member>span:first-child{width:32px;height:32px;flex:none;border-radius:50%;object-fit:cover;display:grid;place-items:center;background:linear-gradient(145deg,#e7f0ff,#d8e8ff);color:#2c67aa;font-size:10px;font-weight:800}.timecard-member-copy{display:grid;gap:2px}.timecard-member-copy strong{color:#2a69b5;font-size:12px;font-weight:600}.timecard-member-copy small{color:#929eae;font-size:10px;font-weight:400}.timecard-state{display:inline-flex;align-items:center;gap:6px;width:max-content;padding:4px 8px;border-radius:999px;font-size:10px;font-weight:700}.timecard-state.working{background:#eaf8f1;color:#148454}.timecard-state.complete{background:#edf4ff;color:#2b65b5}.timecard-state.missing,.timecard-state.neutral{background:#f3f5f7;color:#69788b}.timecard-state .pulse{width:6px;height:6px;border-radius:50%;background:#23a96b;box-shadow:0 0 0 4px #20a76916}.timecard-source{display:inline-flex;padding:4px 7px;border-radius:5px;background:#f3f6fa;color:#66758a;font-size:10px;text-transform:capitalize}.timecard-empty{padding:35px!important;text-align:center;color:#8996a7!important}.timecard-summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:16px}.timecard-summary-grid article{display:flex;align-items:center;gap:11px;padding:16px;border:1px solid #e1e7ef;border-radius:9px;background:#fff;box-shadow:0 2px 7px #1f293707}.timecard-summary-grid article>span{width:38px;height:38px;display:grid;place-items:center;border-radius:9px;background:#edf4ff;color:#2d6dca}.timecard-summary-grid article:nth-child(2)>span{background:#eef9f4;color:#19935d}.timecard-summary-grid article:nth-child(3)>span{background:#fff5ea;color:#cf7a1c}.timecard-summary-grid svg{width:17px}.timecard-summary-grid small,.timecard-summary-grid strong{display:block}.timecard-summary-grid small{color:#8491a2;font-size:10px}.timecard-summary-grid strong{margin-top:4px;color:#25364c;font-size:18px}.timecard-detail-list{display:grid;gap:10px;padding:15px}.timecard-member-detail{overflow:hidden;border:1px solid #e0e6ee;border-radius:8px;background:#fff}.timecard-member-detail>summary{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:13px 15px;cursor:pointer;list-style:none}.timecard-member-detail>summary::-webkit-details-marker{display:none}.timecard-member-detail[open]>summary{border-bottom:1px solid #e8edf3;background:#fbfcfe}.timecard-detail-metrics{display:flex;align-items:center;gap:12px}.timecard-detail-metrics b{font-size:12px}.timecard-detail-metrics small{color:#8c99aa;font-size:10px}.timecard-detail-metrics svg{width:14px;transition:transform .15s}.timecard-member-detail[open] .timecard-detail-metrics svg{transform:rotate(180deg)}.timecard-clock-heading,.timecard-clock-row{display:grid;grid-template-columns:minmax(280px,1fr) minmax(300px,.8fr) 145px;align-items:center;gap:16px;padding:12px 16px}.timecard-clock-heading{border-bottom:1px solid #e4e9f0;background:#fbfcfe;color:#394b60;font-size:11px;font-weight:700}.timecard-clock-heading>span:first-of-type{display:flex;align-items:center;gap:5px}.timecard-clock-heading svg{width:13px}.timecard-clock-row{min-height:54px;border-bottom:1px solid #edf1f5}.timecard-clock-row:hover{background:#fcfdff}.timecard-clock-status{color:#55667c;font-size:11px}.timecard-clock-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:103px;height:32px;border:1px solid #d5deea;border-radius:6px;background:#fff;color:#425269;font:inherit;font-size:11px;font-weight:600;cursor:pointer}.timecard-clock-button:hover{border-color:#9bb7dd;background:#f8fbff}.timecard-clock-button.in{color:#2567b8}.timecard-clock-button.out{color:#b65050}.timecard-clock-button svg{width:14px}.timecard-muted{color:#99a5b4;font-size:11px}.timecard-manual{display:grid;grid-template-columns:minmax(220px,.55fr) 1fr;gap:28px;padding:22px;border-top:1px solid #e3e9f1;background:#fbfcff}.timecard-manual h2{margin:5px 0 5px;font-size:18px}.timecard-manual p{margin:0;color:#7e8b9d;font-size:12px;line-height:1.5}.timecard-manual .eyebrow{color:#2d6cc5;font-size:9px;font-weight:800;letter-spacing:.9px}.timecard-manual form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.timecard-manual label{display:grid;gap:5px;color:#53647a;font-size:11px;font-weight:700}.timecard-manual label small{color:#9aa5b3;font-weight:400}.timecard-manual input,.timecard-manual select{box-sizing:border-box;width:100%;height:36px;border:1px solid #ced8e6;border-radius:6px;background:#fff;padding:0 9px;color:#334155;font:inherit;font-size:12px}.timecard-manual .wide{grid-column:1/-1}.timecard-manual-actions{display:flex;justify-content:flex-end;gap:8px}.timecard-manual-actions a,.timecard-manual-actions button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:34px;padding:0 12px;border-radius:6px;text-decoration:none;font:inherit;font-size:11px;font-weight:700}.timecard-manual-actions a{border:1px solid #d2dbe7;background:#fff;color:#596a7f}.timecard-manual-actions button{border:0;background:#24364e;color:#fff;cursor:pointer}.timecard-manual-actions svg{width:14px}.timecard-empty-card{padding:35px;text-align:center;color:#8491a3}.timecard-footer{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:#fbfcfe;color:#8996a7;font-size:10px;border-top:1px solid #e6ebf2}@media(max-width:950px){.timecard-summary-grid{grid-template-columns:1fr}.timecard-clock-heading,.timecard-clock-row{grid-template-columns:minmax(230px,1fr) minmax(250px,1fr) 120px}.timecard-manual{grid-template-columns:1fr}}@media(max-width:720px){.timecard-head,.timecard-toolbar{align-items:stretch;flex-direction:column}.timecard-manual-button{width:max-content}.timecard-toolbar-left,.timecard-range-form{flex-wrap:wrap}.timecard-search input{width:100%}.timecard-search{width:100%}.timecard-clock-heading{display:none}.timecard-clock-row{grid-template-columns:1fr;gap:8px;padding:15px}.timecard-clock-row>div:last-child{justify-self:start}.timecard-manual form{grid-template-columns:1fr}.timecard-manual .wide{grid-column:auto}.timecard-footer{gap:10px;flex-wrap:wrap}} /* Accurate attendance state */ .timecard-state.review{background:#fff4e5;color:#9a5a00;border-color:#f5d6a5}.timecard-entry-count{display:block;margin-top:4px;color:#8a97a8;font-size:10px;font-weight:500}.timecard-live-label{display:inline-flex;align-items:center;gap:6px;color:#0f766e;font-weight:700}.timecard-live-label svg{width:15px;height:15px}.timecard-manual label small{color:#8a97a8;font-weight:500} /* ============================================================ SECTION: timeline.css ============================================================ */ .timeline-page{max-width:980px;margin:0 auto;color:#2f4358}.timeline-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.timeline-head h1{margin:0;font-size:22px;font-weight:500}.timeline-head p{margin:4px 0 0;color:#8795a4;font-size:13px}.timeline-primary,.timeline-secondary{display:inline-flex;align-items:center;gap:6px;min-height:35px;padding:0 12px;border:1px solid #d9e1e9;border-radius:6px;background:#fff;color:#405469;font:inherit;cursor:pointer}.timeline-primary{background:#5f8ff0;border-color:#5f8ff0;color:#fff}.timeline-primary svg{width:15px}.timeline-filters{display:flex;gap:8px;margin-bottom:18px;padding:12px;background:#fff;border:1px solid #e1e6ec;border-radius:7px}.timeline-search{flex:1;display:flex;align-items:center;border:1px solid #d9e0e8;border-radius:5px}.timeline-search svg{width:16px;margin-left:10px;color:#9aa7b4}.timeline-search input{flex:1;border:0;outline:0;padding:9px}.timeline-filters select{min-width:150px;border:1px solid #d9e0e8;border-radius:5px;background:#fff;padding:0 9px}.timeline-stream{position:relative}.timeline-item{display:grid;grid-template-columns:48px 1fr;gap:0;position:relative}.timeline-line{position:relative;display:flex;justify-content:center}.timeline-line:after{content:'';position:absolute;top:40px;bottom:-8px;width:1px;background:#dfe6ed}.timeline-item:last-child .timeline-line:after{display:none}.timeline-dot{position:relative;z-index:1;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:#edf3f9;color:#4e769f}.timeline-dot svg{width:15px}.timeline-dot.project{background:#eef1ff;color:#645fd2}.timeline-dot.task{background:#eaf8ef;color:#2c8a56}.timeline-dot.client{background:#eaf6fa;color:#2785a3}.timeline-dot.team{background:#fff2e8;color:#c4782d}.timeline-dot.system{background:#f0eef8;color:#735ea2}.timeline-card{position:relative;margin-bottom:14px;padding:15px 18px;background:#fff;border:1px solid #e0e6ec;border-radius:7px}.timeline-card>header{display:flex;justify-content:space-between;gap:15px}.timeline-card strong,.timeline-card small{display:block}.timeline-card strong{font-size:14px}.timeline-card small{margin-top:3px;color:#9aa6b2;font-size:11px}.timeline-type{height:22px;display:inline-flex;align-items:center;padding:0 8px;border-radius:99px;background:#f1f4f7;color:#66788c;font-size:10px}.timeline-card p{margin:11px 0;color:#57697c;font-size:13px;line-height:1.6}.timeline-meta{display:flex;gap:14px;flex-wrap:wrap;color:#8b99a8;font-size:11px}.timeline-meta span{display:flex;align-items:center;gap:5px}.timeline-meta svg{width:13px}.timeline-delete{position:absolute;right:10px;bottom:8px;border:0;background:none;color:#a9b2bd;cursor:pointer}.timeline-delete svg{width:14px}.timeline-empty{padding:60px 20px;text-align:center;background:#fff;border:1px dashed #dce3ea;border-radius:7px;color:#8c99a7}.timeline-empty>svg{width:35px}.timeline-empty h2{font-size:17px}.timeline-pagination{padding-left:48px}.timeline-pagination nav>div:first-child{display:none}.timeline-modal{position:fixed;z-index:1100;inset:0;display:none;align-items:center;justify-content:center;padding:18px;background:#0f172a80}.timeline-modal.is-open{display:flex}.timeline-modal-card{width:min(680px,calc(100vw - 30px));background:#fff;border-radius:7px;box-shadow:0 20px 60px #0f172a55}.timeline-modal-card>header{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;border-bottom:1px solid #e5eaf0}.timeline-modal-card>header h2{margin:0;font-size:17px;font-weight:500}.timeline-modal-card>header button{border:0;background:none;color:#7d8997;cursor:pointer}.timeline-modal-card svg{width:18px}.timeline-form{padding:18px 20px}.timeline-form label{display:grid;gap:6px;margin-bottom:14px;color:#526579;font-size:13px}.timeline-form input,.timeline-form select,.timeline-form textarea{box-sizing:border-box;width:100%;padding:9px 10px;border:1px solid #dce3ea;border-radius:5px;background:#f9fafb;font:inherit}.timeline-form textarea{min-height:110px;resize:vertical}.timeline-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.timeline-modal-card footer{display:flex;justify-content:flex-end;gap:8px;padding:12px 20px;border-top:1px solid #e7ebf0}@media(max-width:700px){.timeline-head{align-items:flex-start;flex-direction:column;gap:10px}.timeline-filters{flex-direction:column}.timeline-filters select{height:38px}.timeline-grid{grid-template-columns:1fr}.timeline-card>header{flex-direction:column}.timeline-type{width:max-content}} /* ============================================================ SECTION: timer.css ============================================================ */ .top-timer-menu{position:relative;flex:none;color:#536076}.top-timer-menu summary{list-style:none;display:flex;align-items:center;cursor:pointer}.top-timer-menu summary::-webkit-details-marker{display:none}.top-timer-menu summary svg{width:18px;height:18px}.top-timer-menu[open] summary,.top-timer-menu summary:hover{color:#246fe6}.top-timer-popover{position:absolute;right:-22px;top:calc(100% + 18px);z-index:60;width:300px;min-height:165px;padding:20px 18px 16px;text-align:center;background:#fff;border:1px solid #d9e0e9;border-radius:7px;box-shadow:0 5px 12px #15223822;color:#26364c}.top-timer-empty-icon{display:block;width:30px;height:30px;margin:0 auto 10px;color:#8796a9}.top-timer-popover p{margin:8px 0 15px}.top-timer-action{display:inline-flex;align-items:center;justify-content:center;gap:5px;background:#1e293b;color:#fff;border:0;border-radius:5px;padding:8px 12px;font:inherit;font-weight:600;cursor:pointer;text-decoration:none}.top-timer-action svg{width:15px;height:15px}.top-timer-view{display:block;margin-top:9px;color:#2563d7;text-decoration:none}.top-timer-start{text-align:left}.top-timer-start[hidden]{display:none}.top-timer-start label{display:block;margin-bottom:5px;font-weight:600}.top-timer-start select{display:block;width:100%;min-height:36px;margin-bottom:10px;padding:6px 8px;border:1px solid #cbd5e1;border-radius:5px;background:#fff;color:#26364c;font:inherit}.top-timer-start button{width:100%}.top-timer-running{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:12px}.top-timer-running svg{width:27px;height:27px;color:#2773df}.top-timer-running span{color:#64748b}@media(max-width:760px){.top-timer-popover{right:-80px}} .top-timer-action[hidden]{display:none} /* Accurate multi-timer state */ .top-timer-menu summary{position:relative}.top-timer-dot{position:absolute;right:-3px;top:-4px;width:7px;height:7px;border-radius:50%;background:#22c55e;border:2px solid #fff}.top-timer-popover{width:330px;max-height:min(520px,75vh);overflow:auto}.top-timer-list{display:grid;gap:9px;margin-bottom:12px}.top-timer-running{align-items:stretch;margin:0;padding:11px;border:1px solid #e3e8ef;border-radius:8px;background:#f8fafc;text-align:left}.top-timer-running-head{display:flex;align-items:center;gap:7px}.top-timer-running-head svg{width:16px;height:16px;color:#2773df}.top-timer-running-head strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.top-timer-live{font-variant-numeric:tabular-nums;font-size:17px;font-weight:800;color:#0f766e;margin-top:3px}.top-timer-running small{color:#748197;margin-bottom:7px}.top-timer-running form{margin:0}.top-timer-stop{width:100%;background:#fff;color:#b42318;border:1px solid #efc9c6}.top-timer-start-button{width:100%}.top-timer-start{margin-top:10px}.top-timer-popover>p{color:#64748b} /* ============================================================ SECTION: todos.css ============================================================ */ .todo-page{padding:24px;max-width:1600px;margin:0 auto}.todo-page-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}.todo-new-btn{display:inline-flex;align-items:center;gap:7px;border:0;border-radius:8px;background:#172033;color:#fff;padding:10px 15px;font-weight:700;cursor:pointer}.todo-new-btn svg{width:17px;height:17px}.todo-page-summary{display:flex;gap:10px}.todo-page-summary span{padding:7px 11px;border:1px solid #e5eaf1;border-radius:999px;background:#fff;color:#6b7788;font-size:13px}.todo-page-summary b{color:#172033}.todo-alert{display:flex;align-items:center;gap:8px;background:#ecfdf3;border:1px solid #bbf7d0;color:#15803d;padding:10px 13px;border-radius:10px;margin-bottom:16px}.todo-alert svg{width:17px;height:17px}.todo-columns{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}.todo-panel{background:#fff;border:1px solid #e6ebf2;border-radius:12px;overflow:hidden;box-shadow:0 4px 18px rgba(15,23,42,.04)}.todo-panel-header{min-height:48px;padding:0 15px;display:flex;align-items:center;justify-content:space-between;color:#fff}.todo-panel-open .todo-panel-header{background:linear-gradient(135deg,#f1b90b,#e8a900)}.todo-panel-done .todo-panel-header{background:linear-gradient(135deg,#168ac5,#0e78ae)}.todo-panel-header h2{margin:0;display:flex;align-items:center;gap:7px;font-size:15px;font-weight:700}.todo-panel-header h2 svg{width:17px;height:17px}.todo-panel-header>span{min-width:28px;height:26px;padding:0 8px;border-radius:999px;background:rgba(255,255,255,.2);display:grid;place-items:center;font-size:12px;font-weight:800}.todo-list{min-height:106px}.todo-item{display:grid;grid-template-columns:20px 28px minmax(0,1fr) auto;gap:8px;align-items:center;padding:14px 14px;border-bottom:1px solid #edf1f5}.todo-item:last-child{border-bottom:0}.todo-item:hover{background:#fbfcfe}.todo-drag{color:#bec7d2;display:flex}.todo-drag svg{width:17px;height:17px}.todo-check-form{margin:0}.todo-checkbox{width:19px;height:19px;border:1.5px solid #cbd5e1;border-radius:4px;background:#fff;display:grid;place-items:center;padding:0;cursor:pointer}.todo-checkbox.checked{background:#fff;border-color:#94a3b8;color:#172033}.todo-checkbox svg{width:13px;height:13px}.todo-item-copy{min-width:0}.todo-description{font-size:14px;color:#253247;line-height:1.35;white-space:pre-line;overflow-wrap:anywhere}.todo-item-copy time{display:block;color:#8491a3;font-size:12px;margin-top:3px}.is-completed .todo-description{text-decoration:line-through;color:#64748b}.todo-item-actions{display:flex;gap:2px}.todo-item-actions form{margin:0}.todo-icon-btn{border:0;background:transparent;color:#63748a;width:30px;height:30px;border-radius:7px;display:grid;place-items:center;cursor:pointer}.todo-icon-btn:hover{background:#edf4ff;color:#356df3}.todo-icon-btn.todo-delete:hover{background:#fff1f2;color:#e11d48}.todo-icon-btn svg{width:16px;height:16px}.todo-empty{padding:40px 20px;display:flex;flex-direction:column;align-items:center;text-align:center;color:#8a96a8}.todo-empty svg{width:30px;height:30px;margin-bottom:8px;color:#b9c3d1}.todo-empty b{color:#4b5b70;font-size:14px}.todo-empty span{font-size:12px;margin-top:4px}.todo-modal-backdrop{position:fixed;inset:0;z-index:1050;background:rgba(15,23,42,.52);display:grid;place-items:start center;padding:7vh 18px;overflow:auto;backdrop-filter:blur(2px)}.todo-modal-backdrop[hidden]{display:none}.todo-modal{width:min(640px,100%);background:#fff;border-radius:14px;box-shadow:0 24px 80px rgba(15,23,42,.28);overflow:hidden}.todo-modal-head{height:62px;padding:0 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e7ebf1}.todo-modal-head h2{font-size:18px;margin:0;color:#26354a}.todo-modal-close{border:0;background:transparent;color:#7c8797;width:34px;height:34px;border-radius:8px;display:grid;place-items:center;cursor:pointer}.todo-modal-close:hover{background:#f2f5f8}.todo-modal-close svg{width:20px;height:20px}.todo-modal-body{padding:22px 20px}.todo-modal-body label{display:block;font-weight:700;color:#34445a;font-size:13px;margin-bottom:8px}.todo-modal-body textarea{width:100%;min-height:128px;resize:vertical;border:1px solid #ced6e0;border-radius:8px;padding:12px 13px;font:inherit;color:#26354a;outline:0}.todo-modal-body textarea:focus{border-color:#5b8ff9;box-shadow:0 0 0 3px rgba(91,143,249,.12)}.todo-assigned-note{display:flex;align-items:center;gap:6px;margin:10px 0 0;color:#78869a;font-size:12px}.todo-assigned-note svg{width:15px;height:15px}.todo-field-error{margin-top:8px;color:#dc2626;font-size:12px}.todo-modal-foot{display:flex;justify-content:flex-end;gap:8px;padding:15px 20px;border-top:1px solid #e7ebf1}.todo-secondary,.todo-save{border-radius:8px;padding:9px 15px;font-weight:700;cursor:pointer}.todo-secondary{border:1px solid #d6dde7;background:#fff;color:#536176}.todo-save{border:0;background:#172033;color:#fff}.todo-save:hover,.todo-new-btn:hover{background:#24314a}@media(max-width:950px){.todo-columns{grid-template-columns:1fr}.todo-page{padding:16px}.todo-page-toolbar{gap:12px;align-items:flex-start}.todo-page-summary{flex-wrap:wrap;justify-content:flex-end}}@media(max-width:560px){.todo-page-toolbar{flex-direction:column}.todo-page-summary{justify-content:flex-start}.todo-item{grid-template-columns:18px 26px minmax(0,1fr)}.todo-item-actions{grid-column:3;justify-content:flex-end}.todo-modal-backdrop{padding:18px 10px}.todo-modal{border-radius:12px}} /* ============================================================ SECTION: professional-ui.css ============================================================ */ :root{--pro-bg:#f4f7fb;--pro-surface:#fff;--pro-surface-soft:#f8fafd;--pro-border:#dfe6f0;--pro-border-strong:#cad5e4;--pro-text:#17243a;--pro-muted:#6d7c91;--pro-primary:#175cd3;--pro-primary-dark:#124cad;--pro-primary-soft:#edf4ff;--pro-success:#079455;--pro-warning:#dc6803;--pro-danger:#d92d20;--pro-radius:12px;--pro-shadow:0 1px 2px rgba(16,24,40,.04),0 7px 20px rgba(16,24,40,.06);--pro-shadow-lg:0 18px 50px rgba(15,35,70,.16)} *{box-sizing:border-box}.customer-theme{background:var(--pro-bg);color:var(--pro-text);font-family:Inter,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}.customer-theme ::selection{background:#cfe0ff;color:#123a78}.customer-theme a,.portal-professional a{transition:color .16s,background .16s,border-color .16s,box-shadow .16s,transform .16s}.customer-theme button,.customer-theme input,.customer-theme select,.customer-theme textarea,.portal-professional button,.portal-professional input,.portal-professional select,.portal-professional textarea{font:inherit}.customer-theme button,.customer-theme a{touch-action:manipulation}.customer-theme :focus-visible,.portal-professional :focus-visible{outline:3px solid rgba(45,112,224,.22)!important;outline-offset:2px}.customer-theme .customer-topbar{height:64px;border-color:rgba(213,222,234,.9);background:rgba(255,255,255,.94);box-shadow:0 2px 12px rgba(16,24,40,.045);backdrop-filter:blur(14px)}.customer-theme .customer-topbar-brand{height:64px}.customer-theme .customer-brand strong{color:#17243a;font-size:24px;letter-spacing:-.75px}.customer-theme .customer-menu-button{width:32px;height:32px;display:grid;place-items:center;border-radius:8px}.customer-theme .customer-menu-button:hover{background:#edf2f8;color:#1c5ec6}.customer-theme .customer-global-search input{height:40px;width:min(380px,34vw);border:1px solid transparent;background:#f1f4f8;border-radius:10px}.customer-theme .customer-global-search input:focus{border-color:#9dbcf0;background:#fff;box-shadow:0 0 0 4px rgba(34,105,224,.1)}.customer-theme .customer-plus{width:34px;height:34px;background:linear-gradient(145deg,#2b73e8,#1559cb);box-shadow:0 6px 14px rgba(23,92,211,.24)}.customer-theme .customer-plus:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(23,92,211,.3)}.customer-theme .customer-topbar-right{gap:19px}.customer-theme .customer-topbar-right>a{font-size:13px;font-weight:500}.customer-theme .customer-app{min-height:calc(100vh - 64px)}.customer-theme .customer-sidebar{width:238px;min-height:calc(100vh - 64px);padding:18px 11px;border-color:var(--pro-border);box-shadow:3px 0 18px rgba(23,36,58,.025)}.customer-theme .customer-profile-card{padding:12px;border-color:var(--pro-border);border-radius:11px;background:linear-gradient(145deg,#fff,#f9fbfe);box-shadow:0 3px 12px rgba(16,24,40,.045)}.customer-theme .customer-profile-avatar{width:38px;height:38px}.customer-theme .customer-sidebar nav{gap:3px}.customer-theme .customer-sidebar nav a{height:39px;border-radius:8px;padding:0 12px;color:#34445b;font-size:14px}.customer-theme .customer-sidebar nav a:hover{background:#f2f6fb;color:#174f9f}.customer-theme .customer-sidebar nav a.active{border-color:#d5e1f1;background:linear-gradient(90deg,#edf4ff,#f8fbff);color:#175cd3;box-shadow:none}.customer-theme .customer-sidebar nav a.active svg{color:#175cd3}.customer-theme .customer-content{padding:29px clamp(18px,2.1vw,34px) 72px;background:radial-gradient(circle at 92% -20%,rgba(64,132,235,.08),transparent 35%),var(--pro-bg)} .customer-theme .page-intro{align-items:flex-end;margin-bottom:20px}.customer-theme .page-intro h1,.customer-theme .customer-page-heading h1{color:#152238;font-size:25px;letter-spacing:-.55px}.customer-theme .page-intro p{color:var(--pro-muted)}.customer-theme .eyebrow{color:#5273a5;font-size:11px;font-weight:800;letter-spacing:.12em}.customer-theme .panel,.customer-theme .form-panel,.customer-theme .customer-table-card,.customer-theme .client-card,.customer-theme .dashboard-card,.customer-theme [class$="-card"]{border-color:var(--pro-border);border-radius:var(--pro-radius);box-shadow:var(--pro-shadow)}.customer-theme .panel,.customer-theme .form-panel{background:var(--pro-surface)}.customer-theme .module-summary{border-color:var(--pro-border);border-radius:11px;background:linear-gradient(135deg,#fff,#f5f9ff);box-shadow:var(--pro-shadow)}.customer-theme .summary-icon{background:var(--pro-primary-soft);color:var(--pro-primary)} .customer-theme .btn,.customer-theme .client-primary,.customer-theme .customer-new-button{min-height:38px;border-radius:8px;font-weight:650;letter-spacing:-.05px}.customer-theme .btn-primary,.customer-theme .client-primary,.customer-theme .customer-new-button{border-color:#163f78;background:linear-gradient(145deg,#213b5e,#13263f);box-shadow:0 5px 12px rgba(20,39,65,.16)}.customer-theme .btn-primary:hover,.customer-theme .client-primary:hover,.customer-theme .customer-new-button:hover{background:linear-gradient(145deg,#1b66dc,#124eae);border-color:#124eae;transform:translateY(-1px);box-shadow:0 7px 16px rgba(23,92,211,.22)}.customer-theme .btn-secondary{border-color:var(--pro-border-strong);background:#fff;color:#34445b}.customer-theme .btn-secondary:hover{border-color:#9db5d3;background:#f7faff}.customer-theme .btn svg,.customer-theme .client-primary svg{width:16px;height:16px} .customer-theme input:not([type=checkbox]):not([type=radio]):not([type=range]),.customer-theme select,.customer-theme textarea{border-color:var(--pro-border-strong);border-radius:8px;background:#fff;color:#23344c;transition:border-color .15s,box-shadow .15s,background .15s}.customer-theme input:not([type=checkbox]):not([type=radio]):not([type=range]):hover,.customer-theme select:hover,.customer-theme textarea:hover{border-color:#aabbd0}.customer-theme input:not([type=checkbox]):not([type=radio]):not([type=range]):focus,.customer-theme select:focus,.customer-theme textarea:focus{border-color:#5a93e8!important;box-shadow:0 0 0 4px rgba(23,92,211,.1)!important;outline:0}.customer-theme input::placeholder,.customer-theme textarea::placeholder{color:#9aa7b7}.customer-theme label>span,.customer-theme .field>span{color:#34445b;font-weight:650}.customer-theme .field em{color:#e43d49}.customer-theme input[type=checkbox],.customer-theme input[type=radio]{accent-color:var(--pro-primary)} .customer-theme .form-panel{max-width:1120px;overflow:hidden}.customer-theme .form-section{padding:27px 30px}.customer-theme .form-section+.form-section{border-top:1px solid #e8edf4}.customer-theme .form-section h2{font-size:17px;letter-spacing:-.2px}.customer-theme .form-section>p{color:#7d8b9e}.customer-theme .form-actions{padding:16px 30px;border-top:1px solid #e5ebf3;background:#fafbfd} .customer-theme .table-panel,.customer-theme .customer-table-card{overflow:hidden}.customer-theme .table-toolbar,.customer-theme .customer-table-toolbar{border-bottom:1px solid #e8edf4;background:linear-gradient(#fff,#fcfdff)}.customer-theme table{border-collapse:separate;border-spacing:0}.customer-theme table thead th{height:44px;background:#f6f8fb!important;color:#46566d;font-size:12px;font-weight:750;letter-spacing:.025em;text-transform:none;border-color:#e5eaf2!important}.customer-theme table tbody td{border-color:#e9edf3!important;color:#34445b}.customer-theme table tbody tr{transition:background .13s}.customer-theme table tbody tr:hover{background:#f8fbff!important}.customer-theme .record-title,.customer-theme table td>a{font-weight:600;color:#24466f}.customer-theme table td>a:hover{color:#175cd3}.customer-theme .row-arrow{width:31px;height:31px;border-radius:7px}.customer-theme .row-arrow:hover{background:#eaf2ff;color:#175cd3}.customer-theme .badge,.customer-theme [class*="status"]{font-weight:650}.customer-theme .pagination{border-top-color:#e7ecf3;background:#fff} .customer-theme dialog{border:0;border-radius:15px!important;box-shadow:var(--pro-shadow-lg)!important;overflow:hidden}.customer-theme dialog::backdrop{background:rgba(15,28,48,.56);backdrop-filter:blur(3px)}.customer-theme dialog>header{border-bottom-color:#e6ebf2!important}.customer-theme .flash{border:1px solid #a9dfc2;border-radius:9px;background:#ecfdf3;color:#087443;box-shadow:0 4px 12px rgba(7,148,85,.09)}.customer-theme .customer-errors,.customer-theme .field-error{color:#b42318}.customer-theme .customer-errors{border-color:#f0b9b5;background:#fff2f1;border-radius:9px} .customer-theme ::-webkit-scrollbar,.portal-professional ::-webkit-scrollbar{width:10px;height:10px}.customer-theme ::-webkit-scrollbar-track,.portal-professional ::-webkit-scrollbar-track{background:#edf1f6}.customer-theme ::-webkit-scrollbar-thumb,.portal-professional ::-webkit-scrollbar-thumb{border:2px solid #edf1f6;border-radius:99px;background:#aebbc9}.customer-theme ::-webkit-scrollbar-thumb:hover,.portal-professional ::-webkit-scrollbar-thumb:hover{background:#8797aa} .portal-professional{background:var(--pro-bg);color:var(--pro-text);font-family:Inter,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}.portal-professional .portal-top{border-bottom:1px solid var(--pro-border);background:rgba(255,255,255,.95);box-shadow:0 2px 12px rgba(16,24,40,.05);backdrop-filter:blur(14px)}.portal-professional .portal-brand b{letter-spacing:-.35px}.portal-professional .portal-top nav a{border-radius:7px;font-weight:600}.portal-professional .portal-top nav a:hover,.portal-professional .portal-top nav a.active{background:var(--pro-primary-soft);color:var(--pro-primary)}.portal-professional .portal-main{max-width:1240px}.portal-professional section,.portal-professional article,.portal-professional .portal-card{border-color:var(--pro-border)!important;border-radius:var(--pro-radius)!important;box-shadow:var(--pro-shadow)!important}.portal-professional button{border-radius:8px}.portal-professional input,.portal-professional select,.portal-professional textarea{border-radius:8px!important;border-color:var(--pro-border-strong)!important}.portal-professional table th{background:#f6f8fb!important;color:#46566d}.portal-professional table tr:hover td{background:#f8fbff} @media(max-width:900px){.customer-theme .customer-sidebar{width:220px}.customer-theme .customer-content{padding:22px 16px 60px}.customer-theme .form-section{padding:22px 20px}}@media(max-width:760px){.customer-theme .customer-topbar{height:58px}.customer-theme .customer-app{min-height:calc(100vh - 58px)}.customer-theme .customer-sidebar{top:58px}.customer-theme .customer-content{padding:18px 12px 54px}.customer-theme .page-intro{align-items:flex-start}.customer-theme .page-intro h1,.customer-theme .customer-page-heading h1{font-size:22px}.customer-theme .form-section{padding:20px 16px}.customer-theme .form-actions{padding:13px 16px}.customer-theme .customer-global-search input{width:150px}} @media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}} /* Consistent pagination for CRM data tables */ .crm-table-footer{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:58px;padding:12px 18px;border-top:1px solid #e4eaf2;background:#fff;color:#68788d;font-size:13px} .crm-table-pages{display:flex;align-items:center;gap:5px} .crm-table-pages button{min-width:34px;height:34px;padding:0 10px;border:1px solid transparent;border-radius:8px;background:transparent;color:#526178;font:inherit;cursor:pointer;transition:background .15s,border-color .15s,color .15s} .crm-table-pages button:hover:not(:disabled){border-color:#cbd8e8;background:#f4f7fb;color:#15243a} .crm-table-pages button.current{border-color:#dbe4ef;background:#edf2f8;color:#17263b;font-weight:700} .crm-table-pages button:disabled{color:#a3aebe;cursor:default} .crm-table-pages .ellipsis{padding:0 3px;color:#94a3b8} @media(max-width:640px){.crm-table-footer{align-items:flex-start;flex-direction:column}.crm-table-pages{width:100%;justify-content:flex-end}} /* Payment gateway management */ .gateway-intro{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:24px;border-radius:14px;background:linear-gradient(135deg,#111d31,#243c62);color:#fff;margin-bottom:20px}.gateway-intro span{font-size:10px;letter-spacing:.15em;color:#8fc5ff}.gateway-intro h3{font-size:20px;margin:6px 0}.gateway-intro p{max-width:700px;margin:0;color:#cbd7e8;line-height:1.55}.gateway-security{min-width:210px;border:1px solid #ffffff2b;border-radius:10px;padding:14px;background:#ffffff0d}.gateway-security svg{width:22px;color:#53dda2}.gateway-security strong,.gateway-security small{display:block}.gateway-security small{margin-top:4px;color:#cbd7e8}.gateway-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.gateway-card{border:1px solid #dbe3ed;border-radius:13px;background:#fff;overflow:hidden;box-shadow:0 8px 24px #2437500d}.gateway-card>header{display:flex;align-items:center;gap:11px;padding:17px 18px;border-bottom:1px solid #e7ecf2}.gateway-logo{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:#eaf2ff;color:#2867d8;font-weight:800}.gateway-card h3{margin:0;font-size:15px}.gateway-card header span{color:#7b8899;font-size:11px}.gateway-card header b{margin-left:auto;font-size:10px;padding:5px 8px;border-radius:20px}.gateway-card header b.ready{background:#e6f8ef;color:#198957}.gateway-card header b.disabled{background:#eef1f5;color:#718096}.gateway-fields{display:grid;grid-template-columns:1fr 1fr;gap:13px;padding:18px}.gateway-fields label{font-size:12px;font-weight:700;color:#3c4a5d}.gateway-fields input,.gateway-fields select,.gateway-fields textarea{display:block;width:100%;margin-top:6px;border:1px solid #cfd9e5;border-radius:7px;padding:9px 10px;background:#fff;font:inherit}.gateway-fields textarea{resize:vertical}.gateway-fields .gateway-wide{grid-column:1/-1}.gateway-webhook{margin:0 18px 16px;font-size:11px}.gateway-webhook b{display:block;margin-bottom:5px}.gateway-webhook code{display:block;overflow:auto;padding:8px;border-radius:6px;background:#f4f7fa;color:#315a94}.gateway-card footer{display:flex;align-items:center;gap:14px;border-top:1px solid #e7ecf2;padding:13px 18px;background:#fafbfd;font-size:12px}.gateway-card footer button,.gateway-add button{margin-left:auto;border:0;border-radius:7px;background:#17253a;color:#fff;padding:9px 13px;font-weight:700}.gateway-card-actions{display:flex;justify-content:flex-end;gap:8px;padding:0 18px 15px;background:#fafbfd}.gateway-card-actions button{border:1px solid #ccd6e2;border-radius:6px;background:#fff;padding:7px 10px;color:#334155}.gateway-card-actions button.danger{color:#c33f4b}.gateway-add{margin-top:20px;border:1px solid #d8e1ec;border-radius:12px;background:#fff}.gateway-add summary{display:flex;align-items:center;gap:8px;padding:17px 19px;font-weight:750;cursor:pointer}.gateway-add summary svg{width:17px}.gateway-add>form{border-top:1px solid #e5eaf0;padding-bottom:18px}.gateway-add>form p{padding:0 18px;color:#718096}.gateway-add>form>button{display:block;margin:0 18px 0 auto}@media(max-width:900px){.gateway-grid{grid-template-columns:1fr}.gateway-intro{align-items:flex-start;flex-direction:column}.gateway-security{width:100%}}@media(max-width:560px){.gateway-fields{grid-template-columns:1fr}.gateway-fields .gateway-wide{grid-column:auto}.gateway-card footer{align-items:flex-start;flex-wrap:wrap}} .gateway-warning{display:flex;gap:8px;align-items:center;margin:0 0 16px;padding:12px 14px;border:1px solid #f4d486;border-radius:9px;background:#fff9e9;color:#7b5612;font-size:12px}.gateway-warning strong{white-space:nowrap}.gateway-warning code{padding:2px 5px;border-radius:4px;background:#fff1c9}.gateway-webhook small{display:block;margin-top:6px;color:#69778a;line-height:1.4} /* Unified premium admin surface */ .customer-theme .customer-content>div,.customer-theme .customer-content>section{animation:pro-enter .22s ease both} .customer-theme h1,.customer-theme h2,.customer-theme h3{letter-spacing:-.025em} .customer-theme .lead-shell,.customer-theme .items-card,.customer-theme .commerce-card,.customer-theme .settings-card,.customer-theme .profile-card,.customer-theme .project-card,.customer-theme .ticket-card{border-color:var(--pro-border)!important;border-radius:14px!important;box-shadow:var(--pro-shadow)!important} .customer-theme [class*="toolbar"]{border-color:#e7ecf3} .customer-theme [class*="modal-backdrop"],.customer-theme [class*="modal"].is-open{backdrop-filter:blur(4px)} .customer-theme [class*="modal-card"],.customer-theme .items-modal{border:1px solid rgba(255,255,255,.6);border-radius:16px!important;box-shadow:0 24px 70px rgba(16,35,64,.22)!important} .customer-theme table tbody tr:last-child td{border-bottom:0} .customer-theme button:not(:disabled),.customer-theme a{cursor:pointer} .customer-theme [class*="primary"]{transition:transform .15s ease,box-shadow .15s ease,background .15s ease} .customer-theme [class*="primary"]:hover{transform:translateY(-1px)} @keyframes pro-enter{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){.customer-theme .customer-content>div,.customer-theme .customer-content>section{animation:none}} /* ==========================================================================\n NEXT CRM MODERN DESIGN SYSTEM ยท 2026\n Unified visual language for dashboard, navigation, settings, forms, tables,\n sales, customers, reports and shared CRM workspaces. Business logic remains\n unchanged; this layer is intentionally presentation-only.\n ========================================================================== */ .nextcrm-modern{ --nx-bg:#f4f7fb; --nx-surface:#ffffff; --nx-surface-soft:#f8fafc; --nx-surface-tint:#f2f6fc; --nx-border:#e3e8f0; --nx-border-strong:#cfd8e6; --nx-text:#132238; --nx-text-2:#33445d; --nx-muted:#708096; --nx-muted-2:#94a3b8; --nx-primary:#2563eb; --nx-primary-strong:#1d4ed8; --nx-primary-soft:#edf4ff; --nx-success:#059669; --nx-success-soft:#ecfdf5; --nx-warning:#d97706; --nx-warning-soft:#fff7ed; --nx-danger:#dc2626; --nx-danger-soft:#fff1f2; --nx-purple:#7c3aed; --nx-radius-xs:8px; --nx-radius-sm:10px; --nx-radius:14px; --nx-radius-lg:18px; --nx-shadow-xs:0 1px 2px rgba(15,23,42,.05); --nx-shadow:0 1px 2px rgba(15,23,42,.04),0 8px 24px rgba(15,23,42,.055); --nx-shadow-lg:0 18px 48px rgba(15,23,42,.14); --nx-sidebar:258px; --nx-topbar:68px; background:var(--nx-bg); color:var(--nx-text); font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; font-size:14px; line-height:1.5; } .nextcrm-modern *{box-sizing:border-box} .nextcrm-modern a{text-decoration:none} .nextcrm-modern svg{stroke-width:1.8} .nextcrm-modern .customer-topbar{ height:var(--nx-topbar); min-height:var(--nx-topbar); position:sticky; top:0; z-index:60; border-bottom:1px solid rgba(227,232,240,.95); background:rgba(255,255,255,.96); box-shadow:0 1px 0 rgba(15,23,42,.02),0 8px 24px rgba(15,23,42,.035); backdrop-filter:blur(16px); } .nextcrm-modern .customer-topbar-brand{ width:var(--nx-sidebar); height:var(--nx-topbar); padding:0 20px; gap:14px; border-right:1px solid var(--nx-border); } .nextcrm-modern .customer-menu-button{ width:34px;height:34px;display:grid;place-items:center;padding:0; border:1px solid transparent;border-radius:10px;color:#64748b; } .nextcrm-modern .customer-menu-button:hover{background:#f1f5f9;border-color:#e2e8f0;color:#1e40af} .nextcrm-modern .customer-brand{gap:10px;min-width:0} .nextcrm-modern .customer-brand strong{font-size:22px;font-weight:800;letter-spacing:-.7px;color:var(--nx-text)} .nextcrm-modern .customer-custom-logo{max-width:150px;max-height:36px} .nextcrm-modern .customer-topbar-center{gap:10px;margin-left:24px;margin-right:auto;justify-content:flex-start} .nextcrm-modern .customer-global-search{position:relative} .nextcrm-modern .customer-global-search svg{left:13px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:#8a99ad} .nextcrm-modern .customer-global-search input{ width:min(410px,34vw);height:40px;padding:0 14px 0 40px; border:1px solid #e4e9f1;background:#f7f9fc;border-radius:11px; color:var(--nx-text-2);box-shadow:none; } .nextcrm-modern .customer-global-search input::placeholder{color:#9aa7b8} .nextcrm-modern .customer-global-search input:focus{background:#fff;border-color:#9dbaf0;box-shadow:0 0 0 4px rgba(37,99,235,.09)} .nextcrm-modern .customer-plus{ width:38px;height:38px;border-radius:11px;background:var(--nx-primary);color:#fff; box-shadow:0 6px 14px rgba(37,99,235,.22); } .nextcrm-modern .customer-plus:hover{background:var(--nx-primary-strong);transform:translateY(-1px)} .nextcrm-modern .customer-topbar-right{gap:8px;padding:0 20px 0 12px} .nextcrm-modern .customer-topbar-right>a, .nextcrm-modern .customer-logout button{ min-height:34px;padding:0 10px;border-radius:9px;color:#5b6b80;font-size:13px;font-weight:650; } .nextcrm-modern .customer-topbar-right>a{display:inline-flex;align-items:center;gap:6px} .nextcrm-modern .customer-topbar-right>a:hover, .nextcrm-modern .customer-logout button:hover{background:#f3f6fa;color:#1d4ed8} .nextcrm-modern .customer-topbar-right svg{width:17px;height:17px} .nextcrm-modern .customer-app{min-height:calc(100vh - var(--nx-topbar));align-items:stretch} .nextcrm-modern .customer-sidebar{ width:var(--nx-sidebar);min-height:calc(100vh - var(--nx-topbar)); padding:18px 14px 28px;background:#fbfcfe;border-right:1px solid var(--nx-border); box-shadow:none;position:sticky;top:var(--nx-topbar);height:calc(100vh - var(--nx-topbar));overflow-y:auto; } .nextcrm-modern .customer-profile-card{ margin:0 0 16px;padding:11px 12px;min-height:58px;border:1px solid #e2e8f0; border-radius:13px;background:#fff;box-shadow:var(--nx-shadow-xs); } .nextcrm-modern .customer-profile-avatar{ width:36px;height:36px;border-radius:11px;background:#eaf2ff;color:#2259b9;font-size:13px;font-weight:800; } .nextcrm-modern .customer-profile-card b{color:#1f3048;font-size:13px;font-weight:750} .nextcrm-modern .customer-profile-card small{color:#8492a6;font-size:11px} .nextcrm-modern .nextcrm-main-nav{display:flex;flex-direction:column;gap:1px} .nextcrm-modern .nav-section-label{ display:block;margin:9px 10px 3px;color:#9aa7b8;font-size:9.5px;font-weight:850; text-transform:uppercase;letter-spacing:.13em;line-height:1.2; } .nextcrm-modern .nav-section-label:first-child{margin-top:0} .nextcrm-modern .customer-sidebar nav>a, .nextcrm-modern .customer-sidebar .nav-group>summary{ min-height:35px;border:1px solid transparent;border-radius:10px;padding:0 11px; display:flex;align-items:center;gap:11px;color:#42526a;font-size:13px;font-weight:650;cursor:pointer; transition:background .15s,border-color .15s,color .15s,transform .15s; } .nextcrm-modern .customer-sidebar nav>a svg, .nextcrm-modern .customer-sidebar .nav-group>summary>svg:first-child{width:17px;height:17px;color:#718198;flex:none} .nextcrm-modern .customer-sidebar nav>a:hover, .nextcrm-modern .customer-sidebar .nav-group>summary:hover{background:#f0f5fb;color:#183f78} .nextcrm-modern .customer-sidebar nav>a.active{ position:relative;background:#edf4ff;border-color:#d9e7ff;color:#1d4ed8;box-shadow:none;font-weight:750; } .nextcrm-modern .customer-sidebar nav>a.active:before{ content:"";position:absolute;left:-7px;top:9px;bottom:9px;width:3px;border-radius:99px;background:#2563eb; } .nextcrm-modern .customer-sidebar nav>a.active svg{color:#2563eb} .nextcrm-modern .nav-group{margin:0} .nextcrm-modern .nav-group>summary{list-style:none} .nextcrm-modern .nav-group>summary::-webkit-details-marker{display:none} .nextcrm-modern .nav-chevron{margin-left:auto!important;width:14px!important;height:14px!important;color:#a2adbb!important;transition:transform .16s} .nextcrm-modern .nav-group[open] .nav-chevron{transform:rotate(180deg)} .nextcrm-modern .nav-children{margin:2px 0 4px 18px;padding:2px 0 2px 13px;border-left:1px solid #e3e9f2} .nextcrm-modern .nav-children a{ min-height:30px!important;height:auto!important;padding:5px 10px!important;border:0!important;border-radius:8px!important; color:#607086!important;font-size:12.5px!important;font-weight:600!important; } .nextcrm-modern .nav-children a:hover{background:#f3f6fa!important;color:#244e89!important} .nextcrm-modern .nav-children a.active{background:#eef5ff!important;color:#1d4ed8!important} .nextcrm-modern .nav-children a.active:before{display:none} .nextcrm-modern .customer-content{ min-width:0;flex:1;padding:28px clamp(20px,2.5vw,40px) 72px; background:linear-gradient(180deg,#f7f9fc 0,#f4f7fb 220px,#f4f7fb 100%); } .nextcrm-modern .customer-content>*,.nextcrm-modern .crm-dashboard{max-width:1600px;margin-left:auto;margin-right:auto} .nextcrm-modern .page-intro,.nextcrm-modern .customer-page-heading,.nextcrm-modern .sales-heading{ margin-bottom:20px; } .nextcrm-modern .page-intro{align-items:center} .nextcrm-modern .page-intro h1, .nextcrm-modern .customer-page-heading h1, .nextcrm-modern .sales-heading h1, .nextcrm-modern .dash-heading h1{ margin:0;color:#14233a;font-size:27px;line-height:1.2;font-weight:780;letter-spacing:-.65px; } .nextcrm-modern .page-intro p,.nextcrm-modern .dash-heading p{margin:5px 0 0;color:var(--nx-muted);font-size:13px} .nextcrm-modern .eyebrow,.nextcrm-modern .dash-eyebrow,.nextcrm-modern .settings-eyebrow{ display:block;margin-bottom:5px;color:#5f7da8;font-size:10px;font-weight:850;text-transform:uppercase;letter-spacing:.12em; } /* Unified surfaces */ .nextcrm-modern .panel, .nextcrm-modern .form-panel, .nextcrm-modern .customer-table-card, .nextcrm-modern .sales-card, .nextcrm-modern .dash-card, .nextcrm-modern .client-card, .nextcrm-modern .expense-list-panel, .nextcrm-modern .expense-detail-panel, .nextcrm-modern .expense-receipt-card, .nextcrm-modern .settings-card, .nextcrm-modern .settings-nav-card, .nextcrm-modern [class$="-card"]{ border:1px solid var(--nx-border);border-radius:var(--nx-radius);background:var(--nx-surface); box-shadow:var(--nx-shadow-xs); } .nextcrm-modern .panel:hover,.nextcrm-modern .dash-card:hover{border-color:#d8e0ec} /* Unified buttons */ .nextcrm-modern .btn, .nextcrm-modern .customer-new-button, .nextcrm-modern .customer-import-button, .nextcrm-modern .customer-filter-button, .nextcrm-modern .sales-primary, .nextcrm-modern .sales-secondary, .nextcrm-modern .dash-options, .nextcrm-modern .dash-command-actions a, .nextcrm-modern button[type="submit"]{ border-radius:10px;font-weight:700;transition:background .15s,border-color .15s,color .15s,box-shadow .15s,transform .15s; } .nextcrm-modern .btn-primary, .nextcrm-modern .customer-new-button, .nextcrm-modern .sales-primary{ background:var(--nx-primary);border:1px solid var(--nx-primary);color:#fff; box-shadow:0 4px 10px rgba(37,99,235,.17); } .nextcrm-modern .btn-primary:hover, .nextcrm-modern .customer-new-button:hover, .nextcrm-modern .sales-primary:hover{background:var(--nx-primary-strong);border-color:var(--nx-primary-strong);transform:translateY(-1px)} .nextcrm-modern .btn-secondary, .nextcrm-modern .customer-import-button, .nextcrm-modern .customer-filter-button, .nextcrm-modern .sales-secondary{ background:#fff;border:1px solid var(--nx-border-strong);color:#40516a;box-shadow:var(--nx-shadow-xs); } .nextcrm-modern .btn-secondary:hover, .nextcrm-modern .customer-import-button:hover, .nextcrm-modern .customer-filter-button:hover, .nextcrm-modern .sales-secondary:hover{background:#f8fafc;border-color:#b9c7d8;color:#244c83} /* Unified inputs */ .nextcrm-modern input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), .nextcrm-modern select, .nextcrm-modern textarea{ min-height:40px;border:1px solid var(--nx-border-strong);border-radius:10px;background:#fff;color:#23344d; box-shadow:0 1px 2px rgba(15,23,42,.025);outline:0; } .nextcrm-modern textarea{min-height:96px} .nextcrm-modern input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):focus, .nextcrm-modern select:focus, .nextcrm-modern textarea:focus{border-color:#7aa5ec!important;box-shadow:0 0 0 4px rgba(37,99,235,.09)!important} .nextcrm-modern input::placeholder,.nextcrm-modern textarea::placeholder{color:#9aa7b8} .nextcrm-modern label>span,.nextcrm-modern .field>span{color:#3d4e65;font-size:12.5px;font-weight:700} .nextcrm-modern input[type=checkbox],.nextcrm-modern input[type=radio]{accent-color:var(--nx-primary)} /* One table language everywhere */ .nextcrm-modern .table-panel, .nextcrm-modern .customer-table-card, .nextcrm-modern .sales-card, .nextcrm-modern .expense-list-panel{overflow:hidden} .nextcrm-modern .table-scroll, .nextcrm-modern .customer-table-scroll, .nextcrm-modern .sales-table-wrap, .nextcrm-modern .dash-table-scroll, .nextcrm-modern .expense-table-wrap{overflow:auto} .nextcrm-modern table{width:100%;border-collapse:separate;border-spacing:0;background:#fff} .nextcrm-modern table thead th{ height:43px;padding:10px 14px;background:#f8fafc!important;border-top:0!important;border-bottom:1px solid #e5eaf1!important; color:#64748b;font-size:10.5px;font-weight:800;letter-spacing:.045em;text-transform:uppercase;text-align:left;white-space:nowrap; } .nextcrm-modern table tbody td{ min-height:52px;padding:13px 14px;border-top:0!important;border-bottom:1px solid #edf0f4!important; color:#34445b;font-size:13px;vertical-align:middle; } .nextcrm-modern table tbody tr:last-child td{border-bottom:0!important} .nextcrm-modern table tbody tr:hover{background:#f8fbff!important} .nextcrm-modern table td>a,.nextcrm-modern .record-title{color:#214f8a;font-weight:700} .nextcrm-modern table td>a:hover{color:#1d4ed8} .nextcrm-modern .table-toolbar, .nextcrm-modern .customer-table-toolbar, .nextcrm-modern .sales-toolbar, .nextcrm-modern .expense-list-toolbar{ min-height:62px;padding:11px 16px;border-bottom:1px solid var(--nx-border);background:#fff; } .nextcrm-modern .record-count{color:#8290a3;font-size:12px;font-weight:650} .nextcrm-modern .badge, .nextcrm-modern .sales-status, .nextcrm-modern .dash-badge{ display:inline-flex;align-items:center;min-height:24px;padding:3px 8px;border:1px solid #dfe6ef;border-radius:999px; background:#f8fafc;color:#516176;font-size:10.5px;font-weight:750;line-height:1.2; } .nextcrm-modern .pagination, .nextcrm-modern .customer-table-footer, .nextcrm-modern .sales-footer{ min-height:58px;padding:12px 16px;border-top:1px solid var(--nx-border);background:#fff;color:#748196; } .nextcrm-modern .empty-state,.nextcrm-modern .customer-empty,.nextcrm-modern .dash-empty{color:#8794a7} /* Customer/list pages */ .nextcrm-modern .customer-stat-grid{gap:12px;margin-bottom:20px} .nextcrm-modern .customer-stat-grid>a,.nextcrm-modern .customer-stat-grid>div{ min-height:64px;padding:14px 16px;border:1px solid var(--nx-border);border-radius:13px;background:#fff;box-shadow:var(--nx-shadow-xs); color:#526174;font-size:12px; } .nextcrm-modern .customer-stat-grid b{display:block;margin-bottom:3px;color:#182942;font-size:18px;letter-spacing:-.35px} .nextcrm-modern .customer-actions{margin-bottom:12px} .nextcrm-modern .customer-new-button,.nextcrm-modern .customer-import-button,.nextcrm-modern .customer-filter-button{min-height:38px;padding:0 13px} .nextcrm-modern .customer-filter-panel{border:1px solid var(--nx-border);border-radius:13px;box-shadow:var(--nx-shadow-xs)} .nextcrm-modern .customer-data-table{font-size:13px} .nextcrm-modern .customer-data-table td,.nextcrm-modern .customer-data-table th{height:auto} .nextcrm-modern .customer-table-controls select,.nextcrm-modern .customer-table-controls>a, .nextcrm-modern .customer-table-search button,.nextcrm-modern .customer-table-search input{height:36px} /* Sales pages */ .nextcrm-modern .sales-page{max-width:1600px;margin:0 auto} .nextcrm-modern .sales-heading{display:flex;align-items:center;justify-content:space-between;gap:14px} .nextcrm-modern .sales-actions{display:flex;align-items:center;gap:8px;margin-bottom:14px;flex-wrap:wrap} .nextcrm-modern .sales-primary,.nextcrm-modern .sales-secondary{display:inline-flex;align-items:center;min-height:38px;padding:0 13px} .nextcrm-modern .sales-stat-grid{gap:10px;margin-bottom:18px} .nextcrm-modern .sales-stat{ border:1px solid var(--nx-border)!important;border-radius:13px!important;background:#fff!important;box-shadow:var(--nx-shadow-xs)!important; } .nextcrm-modern .sales-stat strong{color:#172941!important;font-size:17px!important} .nextcrm-modern .sales-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap} .nextcrm-modern .sales-toolbar form{display:flex;gap:8px;align-items:center} .nextcrm-modern .sales-toolbar input,.nextcrm-modern .sales-toolbar select{height:36px;min-height:36px} .nextcrm-modern .sales-toolbar button{height:36px;padding:0 12px;border:1px solid var(--nx-primary);background:var(--nx-primary);color:#fff} /* Dashboard */ .nextcrm-modern .crm-dashboard{display:flex;flex-direction:column;gap:16px} .nextcrm-modern .dash-heading.dash-hero{ display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0;padding:2px 2px 4px; } .nextcrm-modern .dash-heading-actions{display:flex;align-items:center;gap:8px} .nextcrm-modern .dash-date,.nextcrm-modern .dash-options{ min-height:38px;display:inline-flex;align-items:center;gap:7px;padding:0 11px;border:1px solid var(--nx-border); border-radius:10px;background:#fff;color:#607086;font-size:12px;font-weight:650;box-shadow:var(--nx-shadow-xs); } .nextcrm-modern .dash-date svg,.nextcrm-modern .dash-options svg{width:15px;height:15px} .nextcrm-modern .dash-command-bar{ display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;border:1px solid #dce6f5; border-radius:15px;background:#fff;box-shadow:var(--nx-shadow-xs); } .nextcrm-modern .dash-command-copy{display:flex;align-items:center;gap:10px;min-width:180px} .nextcrm-modern .dash-command-copy>span{width:36px;height:36px;display:grid;place-items:center;border-radius:10px;background:#edf4ff;color:#2563eb} .nextcrm-modern .dash-command-copy>span svg{width:16px} .nextcrm-modern .dash-command-copy strong{display:block;color:#23344d;font-size:12.5px} .nextcrm-modern .dash-command-copy small{display:block;margin-top:1px;color:#8b98aa;font-size:10px} .nextcrm-modern .dash-command-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end} .nextcrm-modern .dash-command-actions a{ min-height:34px;display:inline-flex;align-items:center;gap:6px;padding:0 10px;border:1px solid #dfe6ef;background:#f9fbfd;color:#43546c;font-size:11.5px; } .nextcrm-modern .dash-command-actions a:hover{border-color:#b7cdf0;background:#edf4ff;color:#1d4ed8} .nextcrm-modern .dash-command-actions svg{width:14px;height:14px} .nextcrm-modern .dash-notice{ display:flex;align-items:center;gap:10px;padding:10px 13px;border:1px solid #d9e8ff;border-radius:12px;background:#f6faff;color:#47617f; } .nextcrm-modern .dash-notice-icon{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:#e8f2ff;color:#2563eb} .nextcrm-modern .dash-notice-icon svg{width:15px} .nextcrm-modern .dash-notice strong{display:block;color:#34506f;font-size:11.5px} .nextcrm-modern .dash-notice small{display:block;color:#8290a3;font-size:10px} .nextcrm-modern .dash-notice>a{margin-left:auto;color:#2563eb;font-size:11px;font-weight:750} .nextcrm-modern .dash-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0} .nextcrm-modern .dash-kpi{ min-height:112px;padding:16px;border:1px solid var(--nx-border);border-radius:15px;background:#fff;box-shadow:var(--nx-shadow-xs); position:relative;overflow:hidden;color:inherit;transition:transform .16s,border-color .16s,box-shadow .16s; } .nextcrm-modern .dash-kpi:hover{transform:translateY(-2px);border-color:#cbd9ec;box-shadow:var(--nx-shadow)} .nextcrm-modern .dash-kpi>span{display:flex;align-items:center;gap:7px;color:#66768b;font-size:11px;font-weight:700} .nextcrm-modern .dash-kpi>span svg{width:15px;height:15px;color:#5c7eb3} .nextcrm-modern .dash-kpi>strong{display:block;margin-top:12px;color:#172941;font-size:28px;line-height:1;font-weight:780;letter-spacing:-.7px} .nextcrm-modern .dash-kpi>strong small{color:#9aa7b7;font-size:12px;font-weight:600} .nextcrm-modern .kpi-line{position:absolute;left:0;bottom:0;height:3px!important;border-radius:0!important} .nextcrm-modern .dash-columns{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(290px,.75fr);gap:16px;align-items:start} .nextcrm-modern .dash-primary,.nextcrm-modern .dash-secondary{display:flex;flex-direction:column;gap:16px} .nextcrm-modern .dash-card{overflow:hidden;margin:0} .nextcrm-modern .dash-card-head{min-height:52px;padding:12px 16px;border-bottom:1px solid var(--nx-border);display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fff} .nextcrm-modern .dash-card-head h2{margin:0;display:flex;align-items:center;gap:7px;color:#2a3a52;font-size:12.5px;font-weight:750} .nextcrm-modern .dash-card-head h2 svg{width:15px;height:15px;color:#6d83a5} .nextcrm-modern .dash-card-head>a{color:#2563eb;font-size:10.5px;font-weight:750} .nextcrm-modern .overview-columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;padding:18px} .nextcrm-modern .overview-column{padding:0 18px} .nextcrm-modern .overview-column:first-child{padding-left:0} .nextcrm-modern .overview-column:last-child{padding-right:0} .nextcrm-modern .overview-column:not(:last-child){border-right:1px solid #edf0f4} .nextcrm-modern .overview-column h2{margin:0 0 12px;display:flex;gap:7px;align-items:center;color:#405069;font-size:11.5px} .nextcrm-modern .overview-column h2 svg{width:14px} .nextcrm-modern .overview-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 8px;padding:5px 0;color:#56667c;font-size:10.5px} .nextcrm-modern .overview-row>i{grid-column:1/-1;height:4px;border-radius:99px;background:#4f72e8} .nextcrm-modern .overview-totals{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--nx-border);background:#fafbfd} .nextcrm-modern .overview-totals>a{padding:13px 16px;border-right:1px solid var(--nx-border)} .nextcrm-modern .overview-totals>a:last-child{border-right:0} .nextcrm-modern .overview-totals span{display:block;color:#8492a6;font-size:9.5px;text-transform:uppercase;letter-spacing:.04em} .nextcrm-modern .overview-totals b{display:block;margin-top:4px;color:#20314a;font-size:15px} .nextcrm-modern .dash-tabs{display:flex;gap:2px;padding:8px 10px 0;border-bottom:1px solid var(--nx-border);background:#fafbfd;overflow:auto} .nextcrm-modern .dash-tabs button{padding:9px 10px 10px;border:0;border-bottom:2px solid transparent;border-radius:8px 8px 0 0;background:transparent;color:#748196;font-size:10.5px;font-weight:700;white-space:nowrap;cursor:pointer} .nextcrm-modern .dash-tabs button:hover{background:#f1f5f9;color:#40516a} .nextcrm-modern .dash-tabs button.selected{border-bottom-color:#2563eb;background:#fff;color:#1d4ed8} .nextcrm-modern .dash-donut:after{background:#fff!important} .nextcrm-modern .team-avatar{border-radius:10px} .nextcrm-modern .project-activity>a{border-color:#edf0f4!important} /* Settings */ .nextcrm-modern.settings-theme .customer-content{padding:0;background:#f5f7fb} .nextcrm-modern .settings-workspace{ grid-template-columns:300px minmax(0,1fr);gap:22px;padding:26px 30px 60px;min-height:calc(100vh - var(--nx-topbar));background:#f5f7fb; } .nextcrm-modern .settings-sections{position:sticky;top:calc(var(--nx-topbar) + 18px);align-self:start} .nextcrm-modern .settings-nav-heading{margin-bottom:13px} .nextcrm-modern .settings-nav-heading h1{font-size:24px;font-weight:780;color:#16263d} .nextcrm-modern .settings-count{height:26px;min-width:28px;background:#eaf2ff;color:#2e63bd} .nextcrm-modern .settings-search-wrap input{height:40px;border-radius:11px;border-color:#dbe3ee;background:#fff} .nextcrm-modern .settings-nav-card{padding:8px;border-radius:14px;box-shadow:var(--nx-shadow-xs)} .nextcrm-modern .settings-nav-group{border-color:#edf0f4} .nextcrm-modern .settings-nav-group>summary{border-radius:10px;padding:10px} .nextcrm-modern .settings-nav-group[open]>summary{background:#f1f5fb} .nextcrm-modern .settings-nav-group-icon{border-radius:9px;background:#edf4ff;color:#2563eb} .nextcrm-modern .settings-nav-links{padding:3px 7px 9px 41px} .nextcrm-modern .settings-nav-links a{padding:7px 9px;border-radius:8px;color:#5e6e83} .nextcrm-modern .settings-nav-links a.active{background:#eaf2ff;color:#1d4ed8;font-weight:750} .nextcrm-modern .settings-panel{max-width:1180px} .nextcrm-modern .settings-panel-heading{margin-bottom:14px;padding:1px 2px} .nextcrm-modern .settings-panel-heading h2{font-size:25px;font-weight:780;color:#16263d} .nextcrm-modern .settings-panel-heading p{max-width:680px;color:#79879a;font-size:12.5px} .nextcrm-modern .settings-save-state{border-color:#dbe3ee;background:#fff;color:#758397} .nextcrm-modern .settings-card{border-radius:15px;box-shadow:var(--nx-shadow-xs)} .nextcrm-modern .settings-tabs{padding:8px 15px 0;background:#fafbfd;border-color:var(--nx-border)} .nextcrm-modern .settings-tabs a{padding:9px 11px 10px;border-radius:8px 8px 0 0;color:#66758a} .nextcrm-modern .settings-tabs a.active{color:#1d4ed8;border-bottom-color:#2563eb} .nextcrm-modern .settings-fields{padding:24px 26px} .nextcrm-modern .settings-field{padding-bottom:19px;margin-bottom:19px;border-color:#edf0f4} .nextcrm-modern .settings-field>label,.nextcrm-modern .settings-add-tag label{color:#3c4d64;font-size:12.5px} .nextcrm-modern .settings-footer{padding:14px 24px;background:#fafbfd;border-color:var(--nx-border)} .nextcrm-modern .settings-footer button,.nextcrm-modern .settings-add-tag button,.nextcrm-modern .settings-tag-row button{min-height:38px;background:#2563eb;border-radius:9px;padding:0 14px} .nextcrm-modern .settings-footer button:hover,.nextcrm-modern .settings-add-tag button:hover,.nextcrm-modern .settings-tag-row button:hover{background:#1d4ed8} .nextcrm-modern .settings-tag-row .settings-delete{background:#fff1f2;color:#dc2626;border:1px solid #fecdd3} .nextcrm-modern .settings-tag-row .settings-delete:hover{background:#ffe4e6;color:#b91c1c} .nextcrm-modern .settings-notice{margin:18px 22px 0;padding:13px 15px;border:1px solid #dbeafe;border-left:3px solid #3b82f6;border-radius:10px;background:#f6f9ff;color:#496789} .nextcrm-modern .settings-provider-links a{border-radius:11px;box-shadow:var(--nx-shadow-xs)} /* Expenses and generic forms */ .nextcrm-modern .expense-page-head,.nextcrm-modern .expense-form-head{margin-bottom:18px} .nextcrm-modern .expense-summary-grid{gap:10px} .nextcrm-modern .expense-summary-card{border-radius:13px!important} .nextcrm-modern .expense-form-card{border:1px solid var(--nx-border);border-radius:15px;background:#fff;box-shadow:var(--nx-shadow-xs);overflow:hidden} .nextcrm-modern .expense-form-section{border-color:#edf0f4!important} .nextcrm-modern .form-panel{max-width:1180px;border-radius:15px;overflow:hidden} .nextcrm-modern .form-section{padding:26px 28px} .nextcrm-modern .form-section+.form-section{border-top:1px solid #edf0f4} .nextcrm-modern .form-actions{padding:15px 28px;border-top:1px solid var(--nx-border);background:#fafbfd} .nextcrm-modern .module-summary{border:1px solid var(--nx-border);border-radius:13px;background:#fff;box-shadow:var(--nx-shadow-xs)} .nextcrm-modern .summary-icon{background:#edf4ff;color:#2563eb;border-radius:10px} /* Dialogs, alerts and AI */ .nextcrm-modern dialog,.nextcrm-modern .todo-modal{border:1px solid #e4e9f0!important;border-radius:16px!important;box-shadow:var(--nx-shadow-lg)!important} .nextcrm-modern dialog::backdrop{background:rgba(15,23,42,.45);backdrop-filter:blur(3px)} .nextcrm-modern .flash{border:1px solid #b7e4cd;border-radius:11px;background:#f0fdf4;color:#087443;box-shadow:var(--nx-shadow-xs)} .nextcrm-modern .customer-errors{border:1px solid #fecdd3;border-radius:11px;background:#fff1f2;color:#be123c} .nextcrm-modern .next-ai-launcher{background:#17263d!important;border:1px solid #243955!important;box-shadow:0 12px 28px rgba(15,23,42,.2)!important} .nextcrm-modern .next-ai-drawer{border-left:1px solid var(--nx-border)!important;box-shadow:-24px 0 60px rgba(15,23,42,.16)!important} /* Scrollbars */ .nextcrm-modern ::-webkit-scrollbar{width:9px;height:9px} .nextcrm-modern ::-webkit-scrollbar-track{background:#f1f4f8} .nextcrm-modern ::-webkit-scrollbar-thumb{border:2px solid #f1f4f8;border-radius:99px;background:#b8c3d1} .nextcrm-modern ::-webkit-scrollbar-thumb:hover{background:#94a3b8} /* Responsive */ @media(max-width:1280px){ .nextcrm-modern{--nx-sidebar:238px} .nextcrm-modern .dash-columns{grid-template-columns:minmax(0,1.45fr) minmax(280px,.8fr)} .nextcrm-modern .customer-global-search input{width:min(330px,30vw)} .nextcrm-modern .settings-workspace{grid-template-columns:280px minmax(0,1fr);padding:22px} } @media(max-width:1020px){ .nextcrm-modern .customer-topbar-right>a:nth-of-type(-n+2){display:none} .nextcrm-modern .dash-columns{grid-template-columns:1fr} .nextcrm-modern .dash-secondary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start} .nextcrm-modern .dash-kpis{grid-template-columns:repeat(2,minmax(0,1fr))} .nextcrm-modern .overview-columns{grid-template-columns:1fr;gap:16px} .nextcrm-modern .overview-column{padding:0!important;border-right:0!important} .nextcrm-modern .settings-workspace{grid-template-columns:250px minmax(0,1fr);gap:16px;padding:18px} } @media(max-width:860px){ .nextcrm-modern .customer-sidebar{position:fixed;top:var(--nx-topbar);bottom:0;left:calc(-1 * var(--nx-sidebar) - 20px);z-index:55;height:auto;transition:left .2s ease;box-shadow:16px 0 34px rgba(15,23,42,.13)} .nextcrm-modern.customer-sidebar-open .customer-sidebar{left:0} .nextcrm-modern .customer-topbar-brand{width:auto;border-right:0} .nextcrm-modern .customer-topbar-center{margin-left:auto} .nextcrm-modern .customer-global-search input{width:230px} .nextcrm-modern .settings-workspace{display:block;padding:18px} .nextcrm-modern .settings-sections{position:static} .nextcrm-modern .settings-nav-card{max-height:none;margin-bottom:18px} .nextcrm-modern .settings-panel{max-width:none} } @media(max-width:720px){ .nextcrm-modern .customer-content{padding:20px 13px 56px} .nextcrm-modern .customer-global-search{display:none} .nextcrm-modern .customer-topbar-right{display:none} .nextcrm-modern .dash-heading.dash-hero,.nextcrm-modern .dash-command-bar{align-items:flex-start;flex-direction:column} .nextcrm-modern .dash-command-actions{justify-content:flex-start;width:100%} .nextcrm-modern .dash-kpis,.nextcrm-modern .dash-secondary{grid-template-columns:1fr} .nextcrm-modern .overview-totals{grid-template-columns:1fr} .nextcrm-modern .overview-totals>a{border-right:0;border-bottom:1px solid var(--nx-border)} .nextcrm-modern .overview-totals>a:last-child{border-bottom:0} .nextcrm-modern .customer-stat-grid{grid-template-columns:1fr 1fr} .nextcrm-modern .sales-toolbar{align-items:stretch;flex-direction:column} .nextcrm-modern .sales-toolbar form{width:100%;flex-wrap:wrap} .nextcrm-modern .sales-toolbar input{flex:1;min-width:160px} .nextcrm-modern .settings-workspace{padding:14px} } @media(max-width:460px){ .nextcrm-modern .dash-kpis,.nextcrm-modern .customer-stat-grid{grid-template-columns:1fr} .nextcrm-modern .dash-heading-actions{width:100%;align-items:stretch;flex-direction:column} .nextcrm-modern .dash-date,.nextcrm-modern .dash-options{justify-content:center} } @media(prefers-reduced-motion:reduce){ .nextcrm-modern *{scroll-behavior:auto!important;transition-duration:0s!important;animation-duration:0s!important} } /* ========================================================= NEXT CRM โ€” Colorful Dashboard refresh Dashboard-only visual overrides. Business logic unchanged. ========================================================= */ .nextcrm-modern .crm-dashboard{ --dash-blue:#2563eb;--dash-cyan:#0891b2;--dash-emerald:#059669;--dash-violet:#7c3aed; --dash-pink:#db2777;--dash-orange:#ea580c;--dash-amber:#d97706; max-width:1640px;gap:18px; } .nextcrm-modern .crm-dashboard::before{ content:"";position:fixed;z-index:-1;inset:var(--nx-topbar) 0 0 var(--nx-sidebar);pointer-events:none; background: radial-gradient(circle at 13% 8%,rgba(59,130,246,.09),transparent 25%), radial-gradient(circle at 78% 18%,rgba(139,92,246,.08),transparent 24%), radial-gradient(circle at 62% 72%,rgba(16,185,129,.06),transparent 25%); } .nextcrm-modern .dash-heading.dash-hero{ position:relative;isolation:isolate;overflow:hidden;min-height:156px;padding:28px 30px;border:0;border-radius:22px; background: radial-gradient(circle at 86% 20%,rgba(255,255,255,.28),transparent 17%), radial-gradient(circle at 64% 120%,rgba(34,211,238,.34),transparent 28%), linear-gradient(120deg,#4338ca 0%,#2563eb 46%,#0ea5e9 100%); box-shadow:0 22px 55px rgba(37,99,235,.24);color:#fff; } .nextcrm-modern .dash-heading.dash-hero::before, .nextcrm-modern .dash-heading.dash-hero::after{content:"";position:absolute;z-index:-1;border:1px solid rgba(255,255,255,.22);border-radius:50%} .nextcrm-modern .dash-heading.dash-hero::before{width:260px;height:260px;right:-72px;top:-118px} .nextcrm-modern .dash-heading.dash-hero::after{width:150px;height:150px;right:155px;bottom:-106px} .nextcrm-modern .dash-hero .dash-eyebrow{color:#dff7ff!important;font-size:11px;letter-spacing:.15em} .nextcrm-modern .dash-hero h1{color:#fff!important;font-size:34px!important;font-weight:830!important;letter-spacing:-1px!important;text-shadow:0 2px 16px rgba(20,43,100,.18)} .nextcrm-modern .dash-hero p{max-width:650px;color:#eaf6ff!important;font-size:13.5px!important;line-height:1.6} .nextcrm-modern .dash-heading-actions{position:relative;z-index:2} .nextcrm-modern .dash-date,.nextcrm-modern .dash-options{ min-height:42px;border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.14);color:#fff;box-shadow:none;backdrop-filter:blur(10px); } .nextcrm-modern .dash-options{background:#fff;color:#24498b;border-color:#fff;box-shadow:0 10px 26px rgba(23,50,120,.18)} .nextcrm-modern .dash-options:hover{transform:translateY(-2px);background:#f7fbff;color:#1d4ed8} .nextcrm-modern .dash-command-bar{ border:0;padding:15px 16px;border-radius:17px; background:linear-gradient(100deg,#ffffff 0%,#f8fbff 46%,#f5f3ff 100%); box-shadow:0 10px 28px rgba(35,57,96,.08); } .nextcrm-modern .dash-command-copy>span{ width:42px;height:42px;border-radius:13px;background:linear-gradient(135deg,#7c3aed,#2563eb);color:#fff;box-shadow:0 8px 18px rgba(99,102,241,.24) } .nextcrm-modern .dash-command-copy strong{font-size:13px;color:#172941}.nextcrm-modern .dash-command-copy small{font-size:10.5px} .nextcrm-modern .dash-command-actions{gap:8px} .nextcrm-modern .dash-command-actions a{ min-height:38px;padding:0 12px;border:0;border-radius:10px;background:#eef4ff;color:#2156b5;box-shadow:inset 0 0 0 1px #dbe8ff;font-weight:750; } .nextcrm-modern .dash-command-actions a:nth-child(2){background:#ecfdf5;color:#047857;box-shadow:inset 0 0 0 1px #c7f2df} .nextcrm-modern .dash-command-actions a:nth-child(3){background:#fff1f2;color:#be123c;box-shadow:inset 0 0 0 1px #ffd8df} .nextcrm-modern .dash-command-actions a:nth-child(4){background:#f5f3ff;color:#6d28d9;box-shadow:inset 0 0 0 1px #e5ddff} .nextcrm-modern .dash-command-actions a:nth-child(5){background:#fff7ed;color:#c2410c;box-shadow:inset 0 0 0 1px #ffdfbf} .nextcrm-modern .dash-command-actions a:hover{transform:translateY(-2px);filter:saturate(1.08);box-shadow:0 8px 18px rgba(43,68,110,.11)} .nextcrm-modern .dash-notice{ min-height:60px;padding:12px 15px;border:1px solid #bde7f2;border-radius:15px; background:linear-gradient(100deg,#ecfeff,#f0f9ff 55%,#eef2ff);box-shadow:0 8px 22px rgba(8,145,178,.08) } .nextcrm-modern .dash-notice-icon{width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,#06b6d4,#2563eb);color:#fff;box-shadow:0 7px 16px rgba(14,165,233,.22)} .nextcrm-modern .dash-notice strong{color:#164e63;font-size:12.5px}.nextcrm-modern .dash-notice small{color:#52758a;font-size:10.5px}.nextcrm-modern .dash-notice>a{color:#0369a1;font-size:11.5px} .nextcrm-modern .dash-kpis{gap:14px} .nextcrm-modern .dash-kpi{ min-height:132px;padding:18px 18px 22px;border:0;border-radius:18px;box-shadow:0 13px 30px rgba(32,52,86,.09); isolation:isolate;position:relative;overflow:hidden; } .nextcrm-modern .dash-kpi::before{content:"";position:absolute;z-index:-1;right:-42px;top:-48px;width:145px;height:145px;border-radius:50%;background:rgba(255,255,255,.58)} .nextcrm-modern .dash-kpi::after{content:"";position:absolute;z-index:-1;right:20px;bottom:-52px;width:105px;height:105px;border-radius:50%;background:rgba(255,255,255,.34)} .nextcrm-modern .dash-kpi-invoices{background:linear-gradient(135deg,#fff1f2,#ffe4e6 100%);color:#9f1239} .nextcrm-modern .dash-kpi-leads{background:linear-gradient(135deg,#ecfdf5,#d1fae5 100%);color:#065f46} .nextcrm-modern .dash-kpi-projects{background:linear-gradient(135deg,#eff6ff,#dbeafe 100%);color:#1e40af} .nextcrm-modern .dash-kpi-tasks{background:linear-gradient(135deg,#f5f3ff,#ede9fe 100%);color:#5b21b6} .nextcrm-modern .dash-kpi:hover{transform:translateY(-4px);box-shadow:0 18px 38px rgba(32,52,86,.15);border-color:transparent} .nextcrm-modern .dash-kpi>span{position:relative;z-index:2;color:currentColor;font-size:11.5px;font-weight:800;letter-spacing:.01em} .nextcrm-modern .dash-kpi>span svg{box-sizing:content-box;width:20px;height:20px;padding:10px;border-radius:12px;color:#fff;box-shadow:0 8px 18px rgba(30,41,59,.12)} .nextcrm-modern .dash-kpi-invoices>span svg{background:linear-gradient(135deg,#fb7185,#e11d48)} .nextcrm-modern .dash-kpi-leads>span svg{background:linear-gradient(135deg,#34d399,#059669)} .nextcrm-modern .dash-kpi-projects>span svg{background:linear-gradient(135deg,#60a5fa,#2563eb)} .nextcrm-modern .dash-kpi-tasks>span svg{background:linear-gradient(135deg,#a78bfa,#7c3aed)} .nextcrm-modern .dash-kpi>strong{position:relative;z-index:2;margin-top:15px;color:#172033;font-size:32px;font-weight:850;letter-spacing:-1.1px} .nextcrm-modern .dash-kpi>strong small{color:rgba(38,54,78,.58);font-size:12px;font-weight:750} .nextcrm-modern .dash-kpi .kpi-line{left:18px!important;bottom:13px!important;width:auto;max-width:calc(100% - 36px);height:6px!important;border-radius:999px!important;box-shadow:0 1px 5px rgba(0,0,0,.08)} .nextcrm-modern .dash-kpi .kpi-line.red{background:linear-gradient(90deg,#fb7185,#e11d48)} .nextcrm-modern .dash-kpi .kpi-line.green{background:linear-gradient(90deg,#34d399,#059669)} .nextcrm-modern .dash-kpi .kpi-line.blue{background:linear-gradient(90deg,#60a5fa,#2563eb)} .nextcrm-modern .dash-kpi .kpi-line.slate{background:linear-gradient(90deg,#a78bfa,#7c3aed)} .nextcrm-modern .dash-card{border:1px solid #e4e9f2;border-radius:18px;box-shadow:0 10px 28px rgba(37,55,88,.065);background:#fff} .nextcrm-modern .dash-card:hover{border-color:#d6dfed;box-shadow:0 15px 36px rgba(37,55,88,.1)} .nextcrm-modern .dash-card-head{min-height:58px;padding:13px 17px;background:linear-gradient(180deg,#fff,#fbfdff)} .nextcrm-modern .dash-card-head h2{font-size:13px;font-weight:820;color:#24354d} .nextcrm-modern .dash-card-head h2 svg{box-sizing:content-box;width:16px;height:16px;padding:7px;border-radius:9px;background:#eef4ff;color:#2563eb} .nextcrm-modern .dash-card-head>a{padding:6px 9px;border-radius:8px;background:#eef4ff;color:#2563eb;font-size:10.5px} .nextcrm-modern .dash-card-head>a:hover{background:#dfeaff;color:#1d4ed8} .nextcrm-modern .dash-overview-card{border-top:4px solid #4f46e5} .nextcrm-modern .dash-calendar-card{border-top:4px solid #0ea5e9} .nextcrm-modern .payment-modern-card{border-top:4px solid #10b981} .nextcrm-modern .dash-contract-card{border-top:4px solid #f97316} .nextcrm-modern .todo-card{border-top:4px solid #f59e0b} .nextcrm-modern .dash-activity-card{border-top:4px solid #8b5cf6} .nextcrm-modern .team-overview-card{border-top:4px solid #06b6d4} .nextcrm-modern .dash-announcement-card{border-top:4px solid #ec4899} .nextcrm-modern .goals-card{border-top:4px solid #22c55e} .nextcrm-modern .chart-tone-0{border-top:4px solid #2563eb}.nextcrm-modern .chart-tone-1{border-top:4px solid #10b981}.nextcrm-modern .chart-tone-2{border-top:4px solid #f43f5e}.nextcrm-modern .chart-tone-3{border-top:4px solid #8b5cf6} .nextcrm-modern .chart-tone-0 .dash-card-head h2 svg{background:#eff6ff;color:#2563eb}.nextcrm-modern .chart-tone-1 .dash-card-head h2 svg{background:#ecfdf5;color:#059669}.nextcrm-modern .chart-tone-2 .dash-card-head h2 svg{background:#fff1f2;color:#e11d48}.nextcrm-modern .chart-tone-3 .dash-card-head h2 svg{background:#f5f3ff;color:#7c3aed} .nextcrm-modern .overview-columns{padding:20px;background:linear-gradient(180deg,#fff,#fcfdff)} .nextcrm-modern .overview-column{padding:0 20px} .nextcrm-modern .overview-column h2{font-size:12px;font-weight:820;color:#344761} .nextcrm-modern .overview-column h2 svg{box-sizing:content-box;width:15px;height:15px;padding:6px;border-radius:8px} .nextcrm-modern .overview-column:nth-child(1) h2 svg{background:#fff1f2;color:#e11d48}.nextcrm-modern .overview-column:nth-child(2) h2 svg{background:#eff6ff;color:#2563eb}.nextcrm-modern .overview-column:nth-child(3) h2 svg{background:#f5f3ff;color:#7c3aed} .nextcrm-modern .overview-row{padding:6px 0;color:#52647d;font-size:10.8px} .nextcrm-modern .overview-row>i{height:5px}.nextcrm-modern .overview-column:nth-child(1) .overview-row>i{background:linear-gradient(90deg,#fb7185,#e11d48)!important}.nextcrm-modern .overview-column:nth-child(2) .overview-row>i{background:linear-gradient(90deg,#60a5fa,#2563eb)!important}.nextcrm-modern .overview-column:nth-child(3) .overview-row>i{background:linear-gradient(90deg,#a78bfa,#7c3aed)!important} .nextcrm-modern .overview-totals{gap:10px;padding:13px;background:#f8fafc} .nextcrm-modern .overview-totals>a{border:0!important;border-radius:12px;padding:13px 14px;background:#fff;box-shadow:inset 0 0 0 1px #e5eaf2} .nextcrm-modern .overview-totals>a:nth-child(1){background:#fff7ed;box-shadow:inset 0 0 0 1px #fed7aa}.nextcrm-modern .overview-totals>a:nth-child(2){background:#fff1f2;box-shadow:inset 0 0 0 1px #fecdd3}.nextcrm-modern .overview-totals>a:nth-child(3){background:#ecfdf5;box-shadow:inset 0 0 0 1px #bbf7d0} .nextcrm-modern .overview-totals>a:nth-child(1) b{color:#c2410c}.nextcrm-modern .overview-totals>a:nth-child(2) b{color:#be123c}.nextcrm-modern .overview-totals>a:nth-child(3) b{color:#047857} .nextcrm-modern .overview-totals b{font-size:17px;font-weight:820} .nextcrm-modern .dash-tabs{gap:5px;padding:10px 12px 0;background:linear-gradient(90deg,#f8fbff,#faf7ff)} .nextcrm-modern .dash-tabs button{padding:9px 11px 10px;border-radius:9px 9px 0 0;font-size:10.8px} .nextcrm-modern .dash-tabs button.selected{border-bottom-color:#4f46e5;background:#eef2ff;color:#4338ca} .nextcrm-modern .dash-table thead th{background:#f5f7fb!important;color:#66758a!important}.nextcrm-modern .dash-table tbody tr:hover{background:#f4f8ff!important} .nextcrm-modern .dash-badge{border-color:#c7d2fe!important;background:#eef2ff!important;color:#4338ca!important} .nextcrm-modern .calendar-grid{border-radius:13px;border-color:#dde6f2;box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)} .nextcrm-modern .calendar-weekdays span{background:linear-gradient(180deg,#eff6ff,#f8fbff);color:#3b5c87} .nextcrm-modern .calendar-day.today{background:linear-gradient(145deg,#eff6ff,#eef2ff)} .nextcrm-modern .calendar-day.today>span{background:linear-gradient(135deg,#4f46e5,#2563eb);box-shadow:0 5px 12px rgba(79,70,229,.22)} .nextcrm-modern .calendar-day a{background:linear-gradient(135deg,#60a5fa,#2563eb)}.nextcrm-modern .calendar-day .event-projects{background:linear-gradient(135deg,#c084fc,#9333ea)}.nextcrm-modern .calendar-day .event-invoices{background:linear-gradient(135deg,#fb923c,#ea580c)}.nextcrm-modern .calendar-day .event-contracts{background:linear-gradient(135deg,#4ade80,#16a34a)} .nextcrm-modern .payment-metrics{gap:10px;padding:17px 18px 8px} .nextcrm-modern .payment-metrics>div{border:0;border-radius:13px;padding:14px 15px;box-shadow:inset 0 0 0 1px rgba(148,163,184,.18)} .nextcrm-modern .payment-metrics>div:nth-child(1){background:#ecfdf5}.nextcrm-modern .payment-metrics>div:nth-child(2){background:#eff6ff}.nextcrm-modern .payment-metrics>div:nth-child(3){background:#fff7ed}.nextcrm-modern .payment-metrics>div:nth-child(4){background:#f5f3ff} .nextcrm-modern .payment-metrics>div:nth-child(1) strong{color:#047857}.nextcrm-modern .payment-metrics>div:nth-child(2) strong{color:#1d4ed8}.nextcrm-modern .payment-metrics>div:nth-child(3) strong{color:#c2410c}.nextcrm-modern .payment-metrics>div:nth-child(4) strong{color:#6d28d9} .nextcrm-modern .payment-chart-modern{border-color:#dce6f3;background:linear-gradient(180deg,#f8fbff,#fff),repeating-linear-gradient(to top,transparent 0 49px,#eef2f7 49px 50px)} .nextcrm-modern .payment-bars-modern b.current{background:linear-gradient(180deg,#22c55e 0%,#0ea5e9 52%,#4f46e5 100%);box-shadow:0 8px 18px rgba(79,70,229,.2)} .nextcrm-modern .payment-bars-modern b.previous{background:linear-gradient(180deg,#dbeafe,#cbd5e1)} .nextcrm-modern .dash-donut{box-shadow:0 12px 28px rgba(50,70,110,.12),inset 0 0 0 1px rgba(28,44,70,.05)} .nextcrm-modern .dash-donut:after{inset:28px!important;background:linear-gradient(145deg,#fff,#f8fbff)!important;box-shadow:0 0 0 1px #e5eaf2,0 7px 18px rgba(51,65,85,.06)!important} .nextcrm-modern .dash-donut b{font-size:24px!important;font-weight:850!important;color:#172941!important}.nextcrm-modern .dash-donut small{color:#8391a5!important} .nextcrm-modern .dash-chart-legend>span{padding:5px 7px;border-radius:8px;background:#f8fafc}.nextcrm-modern .dash-chart-legend>span>i{width:9px;height:9px}.nextcrm-modern .dash-chart-legend small{background:#eef2f7} .nextcrm-modern .chart-tone-0 .dash-donut-wrap{background:linear-gradient(145deg,#fff,#f7faff)}.nextcrm-modern .chart-tone-1 .dash-donut-wrap{background:linear-gradient(145deg,#fff,#f5fdf9)}.nextcrm-modern .chart-tone-2 .dash-donut-wrap{background:linear-gradient(145deg,#fff,#fff7f8)}.nextcrm-modern .chart-tone-3 .dash-donut-wrap{background:linear-gradient(145deg,#fff,#faf7ff)} .nextcrm-modern .todo-open{background:linear-gradient(180deg,#fffbeb,#fff)}.nextcrm-modern .todo-done{background:linear-gradient(180deg,#f0fdf4,#fff)} .nextcrm-modern .todo-open h3{color:#b45309}.nextcrm-modern .todo-done h3{color:#047857}.nextcrm-modern .todo-check:hover{background:#eef2ff;border-color:#6366f1} .nextcrm-modern .todo-row.completed>.todo-check{background:linear-gradient(135deg,#34d399,#059669);border-color:#059669} .nextcrm-modern .project-activity a:before{background:linear-gradient(135deg,#8b5cf6,#3b82f6)!important;box-shadow:0 0 0 3px #eef2ff!important;border:0!important} .nextcrm-modern .dash-announcement-card .project-activity a:before{background:linear-gradient(135deg,#f472b6,#db2777)!important;box-shadow:0 0 0 3px #fdf2f8!important} .nextcrm-modern .team-avatar{background:linear-gradient(135deg,#dbeafe,#e0e7ff)!important;color:#3730a3!important;box-shadow:inset 0 0 0 1px #c7d2fe} .nextcrm-modern .team-overview-list>a:nth-child(3n+2) .team-avatar{background:linear-gradient(135deg,#d1fae5,#ccfbf1)!important;color:#047857!important;box-shadow:inset 0 0 0 1px #a7f3d0} .nextcrm-modern .team-overview-list>a:nth-child(3n+3) .team-avatar{background:linear-gradient(135deg,#fae8ff,#fce7f3)!important;color:#a21caf!important;box-shadow:inset 0 0 0 1px #f5d0fe} .nextcrm-modern .team-copy em{background:linear-gradient(90deg,#22c55e,#0ea5e9,#6366f1)!important} .nextcrm-modern .goal-row:nth-child(2) em{background:linear-gradient(90deg,#34d399,#059669)!important}.nextcrm-modern .goal-row:nth-child(3) em{background:linear-gradient(90deg,#60a5fa,#2563eb)!important}.nextcrm-modern .goal-row:nth-child(4) em{background:linear-gradient(90deg,#a78bfa,#7c3aed)!important} .nextcrm-modern .goal-row:nth-child(2) b{color:#059669}.nextcrm-modern .goal-row:nth-child(3) b{color:#2563eb}.nextcrm-modern .goal-row:nth-child(4) b{color:#7c3aed} @media(max-width:950px){ .nextcrm-modern .crm-dashboard::before{left:0}.nextcrm-modern .dash-heading.dash-hero{min-height:145px}.nextcrm-modern .dash-hero h1{font-size:31px!important} } @media(max-width:760px){ .nextcrm-modern .dash-heading.dash-hero{padding:22px 20px}.nextcrm-modern .dash-kpi{min-height:120px}.nextcrm-modern .overview-totals{grid-template-columns:1fr} } /* Dashboard KPI layout hard-fix: isolates the 4 headline cards from legacy KPI rules */ .nextcrm-modern .dash-kpis-fixed{ display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:14px!important;align-items:stretch!important; } .nextcrm-modern .dash-kpis-fixed .dash-kpi{ display:flex!important;flex-direction:column!important;justify-content:space-between!important;align-items:stretch!important; min-width:0!important;min-height:146px!important;padding:18px!important;position:relative!important; } .nextcrm-modern .dash-kpis-fixed .dash-kpi-head{ display:flex!important;align-items:center!important;gap:11px!important;min-width:0!important;position:relative;z-index:2; } .nextcrm-modern .dash-kpis-fixed .dash-kpi-icon{ width:42px!important;height:42px!important;min-width:42px!important;max-width:none!important;padding:0!important; display:grid!important;place-items:center!important;border-radius:12px!important;color:#fff!important;box-shadow:0 8px 18px rgba(30,41,59,.12); } .nextcrm-modern .dash-kpis-fixed .dash-kpi-icon svg{width:20px!important;height:20px!important;padding:0!important;background:none!important;box-shadow:none!important;color:inherit!important} .nextcrm-modern .dash-kpis-fixed .dash-kpi-invoices .dash-kpi-icon{background:linear-gradient(135deg,#fb7185,#e11d48)!important} .nextcrm-modern .dash-kpis-fixed .dash-kpi-leads .dash-kpi-icon{background:linear-gradient(135deg,#34d399,#059669)!important} .nextcrm-modern .dash-kpis-fixed .dash-kpi-projects .dash-kpi-icon{background:linear-gradient(135deg,#60a5fa,#2563eb)!important} .nextcrm-modern .dash-kpis-fixed .dash-kpi-tasks .dash-kpi-icon{background:linear-gradient(135deg,#a78bfa,#7c3aed)!important} .nextcrm-modern .dash-kpis-fixed .dash-kpi-label{ display:block!important;max-width:none!important;min-width:0!important;color:currentColor!important;font-size:12px!important;font-weight:800!important; line-height:1.35!important;letter-spacing:0!important;white-space:normal!important;overflow-wrap:anywhere!important; } .nextcrm-modern .dash-kpis-fixed .dash-kpi-value{ display:flex!important;align-items:baseline!important;gap:7px!important;margin:15px 0 13px!important;position:relative;z-index:2;min-width:0; } .nextcrm-modern .dash-kpis-fixed .dash-kpi-value strong{ position:static!important;display:block!important;margin:0!important;color:#172033!important;font-size:34px!important;line-height:1!important;font-weight:850!important;letter-spacing:-1.1px!important; } .nextcrm-modern .dash-kpis-fixed .dash-kpi-value span{ display:block!important;max-width:none!important;color:rgba(38,54,78,.58)!important;font-size:12px!important;font-weight:750!important;line-height:1!important; } .nextcrm-modern .dash-kpis-fixed .dash-kpi-progress{ width:100%!important;height:7px!important;position:relative!important;z-index:2!important;overflow:hidden!important;border-radius:999px!important;background:rgba(255,255,255,.72)!important; box-shadow:inset 0 0 0 1px rgba(100,116,139,.08); } .nextcrm-modern .dash-kpis-fixed .dash-kpi-progress>i{display:block!important;height:100%!important;min-width:0;border-radius:999px!important} .nextcrm-modern .dash-kpis-fixed .dash-kpi-progress>i.red{background:linear-gradient(90deg,#fb7185,#e11d48)!important} .nextcrm-modern .dash-kpis-fixed .dash-kpi-progress>i.green{background:linear-gradient(90deg,#34d399,#059669)!important} .nextcrm-modern .dash-kpis-fixed .dash-kpi-progress>i.blue{background:linear-gradient(90deg,#60a5fa,#2563eb)!important} .nextcrm-modern .dash-kpis-fixed .dash-kpi-progress>i.slate{background:linear-gradient(90deg,#a78bfa,#7c3aed)!important} .nextcrm-modern .dash-kpis-fixed .dash-kpi>.kpi-line{display:none!important} @media(max-width:1180px){.nextcrm-modern .dash-kpis-fixed{grid-template-columns:repeat(2,minmax(0,1fr))!important}} @media(max-width:620px){.nextcrm-modern .dash-kpis-fixed{grid-template-columns:1fr!important}.nextcrm-modern .dash-kpis-fixed .dash-kpi{min-height:138px!important}} /* ==========================================================================\n NEXT CRM โ€” Dashboard Visual Language Across Full CRM\n Global presentation-only extension. Keeps routes, controllers and data intact.\n ========================================================================== */ .nextcrm-modern{ --nx-indigo:#4f46e5;--nx-violet:#7c3aed;--nx-sky:#0ea5e9;--nx-cyan:#06b6d4; --nx-emerald:#059669;--nx-lime:#65a30d;--nx-amber:#d97706;--nx-orange:#ea580c; --nx-rose:#e11d48;--nx-pink:#db2777; --nx-page-glow-1:rgba(59,130,246,.09);--nx-page-glow-2:rgba(139,92,246,.075);--nx-page-glow-3:rgba(16,185,129,.055); } .nextcrm-modern .customer-content{ position:relative; background: radial-gradient(circle at 12% 2%,var(--nx-page-glow-1),transparent 24%), radial-gradient(circle at 88% 3%,var(--nx-page-glow-2),transparent 22%), radial-gradient(circle at 62% 78%,var(--nx-page-glow-3),transparent 24%), linear-gradient(180deg,#f8fbff 0,#f5f7fc 230px,#f4f7fb 100%)!important; } .nextcrm-modern .customer-topbar{ border-bottom-color:#dfe7f3!important; background:linear-gradient(90deg,rgba(255,255,255,.97),rgba(247,250,255,.96),rgba(250,247,255,.96))!important; box-shadow:0 1px 0 rgba(37,99,235,.04),0 8px 26px rgba(55,65,110,.055)!important; } .nextcrm-modern .customer-plus{background:linear-gradient(135deg,#4f46e5,#2563eb 52%,#0ea5e9)!important;box-shadow:0 8px 18px rgba(79,70,229,.24)!important} .nextcrm-modern .customer-sidebar{ background:linear-gradient(180deg,#ffffff 0%,#fbfdff 45%,#f8faff 100%)!important; border-right-color:#dfe7f3!important; } .nextcrm-modern .customer-profile-card{background:linear-gradient(135deg,#fff,#f6f9ff 58%,#faf7ff)!important;border-color:#dce6f4!important;box-shadow:0 8px 22px rgba(50,70,110,.055)!important} .nextcrm-modern .customer-profile-avatar{background:linear-gradient(135deg,#dbeafe,#e0e7ff)!important;color:#3730a3!important;box-shadow:inset 0 0 0 1px #c7d2fe} .nextcrm-modern .nav-section-label{color:#7f8fa5!important} .nextcrm-modern .customer-sidebar nav>a.active, .nextcrm-modern .customer-sidebar .nav-children a.active{ background:linear-gradient(90deg,#eef2ff,#eff6ff)!important;border-color:#d9e4ff!important;color:#4338ca!important; } .nextcrm-modern .customer-sidebar nav>a.active:before{background:linear-gradient(180deg,#7c3aed,#2563eb,#0ea5e9)!important;width:4px!important} .nextcrm-modern .customer-sidebar nav>a:hover, .nextcrm-modern .customer-sidebar .nav-group>summary:hover{background:linear-gradient(90deg,#f3f6ff,#f8fbff)!important;color:#3445a3!important} .nextcrm-modern .customer-sidebar .nav-group>summary>svg:first-child, .nextcrm-modern .customer-sidebar nav>a>svg{color:#7185a6} .nextcrm-modern .customer-sidebar nav>a.active>svg{color:#4f46e5!important} .nextcrm-modern .nav-group:nth-of-type(4n+1)>summary>svg:first-child{color:#2563eb!important} .nextcrm-modern .nav-group:nth-of-type(4n+2)>summary>svg:first-child{color:#7c3aed!important} .nextcrm-modern .nav-group:nth-of-type(4n+3)>summary>svg:first-child{color:#059669!important} .nextcrm-modern .nav-group:nth-of-type(4n+4)>summary>svg:first-child{color:#ea580c!important} /* Page hero language */ .nextcrm-modern :where(.page-intro,.customer-page-heading,.sales-heading,.expense-page-head,.expense-form-head,.settings-panel-heading){ position:relative;overflow:hidden;padding:18px 20px!important;border:1px solid #dfe7f4;border-radius:17px; background: radial-gradient(circle at 93% 20%,rgba(99,102,241,.12),transparent 20%), radial-gradient(circle at 78% 130%,rgba(14,165,233,.12),transparent 28%), linear-gradient(115deg,#ffffff 0%,#f8fbff 55%,#f8f6ff 100%); box-shadow:0 10px 28px rgba(42,61,100,.065);margin-bottom:18px!important; } .nextcrm-modern :where(.page-intro,.customer-page-heading,.sales-heading,.expense-page-head,.expense-form-head,.settings-panel-heading)::after{ content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,#7c3aed,#2563eb 52%,#0ea5e9); } .nextcrm-modern :where(.page-intro,.customer-page-heading,.sales-heading,.expense-page-head,.expense-form-head,.settings-panel-heading) h1, .nextcrm-modern .settings-panel-heading h2{color:#17213a!important;font-weight:840!important;letter-spacing:-.8px!important} .nextcrm-modern :where(.page-intro,.customer-page-heading,.sales-heading,.expense-page-head,.expense-form-head,.settings-panel-heading) p{color:#6d7e95!important} .nextcrm-modern :where(.eyebrow,.settings-eyebrow){color:#4f46e5!important} /* Universal card depth + accent */ .nextcrm-modern :where(.panel,.form-panel,.customer-table-card,.sales-card,.client-card,.expense-list-panel,.expense-detail-panel,.expense-receipt-card,.settings-card,.settings-nav-card,.project-card,.ticket-card,.profile-card,.items-card,.commerce-card){ border-color:#dfe7f2!important;border-radius:16px!important;background:linear-gradient(180deg,#fff,#fdfefe)!important; box-shadow:0 10px 28px rgba(43,59,92,.065)!important; } .nextcrm-modern :where(.panel,.form-panel,.customer-table-card,.sales-card,.client-card,.expense-list-panel,.expense-detail-panel,.settings-card,.project-card,.ticket-card,.items-card,.commerce-card):hover{ border-color:#cddaf0!important;box-shadow:0 15px 36px rgba(43,59,92,.095)!important; } /* Modern colorful generic toolbars */ .nextcrm-modern :where(.table-toolbar,.customer-table-toolbar,.sales-toolbar,.expense-list-toolbar,[class*="toolbar"]){ background:linear-gradient(90deg,#fbfdff,#f7faff 52%,#faf7ff)!important;border-bottom-color:#e1e8f2!important; } .nextcrm-modern :where(.table-toolbar,.customer-table-toolbar,.sales-toolbar,.expense-list-toolbar) button, .nextcrm-modern :where(.table-toolbar,.customer-table-toolbar,.sales-toolbar,.expense-list-toolbar) a{ border-radius:9px; } /* Tables */ .nextcrm-modern table{border-radius:0 0 14px 14px;overflow:hidden} .nextcrm-modern table thead th{ height:46px!important;background:linear-gradient(180deg,#f3f7ff,#f7f9fd)!important;color:#52627b!important;border-bottom-color:#dfe6f1!important; font-size:10.5px!important;letter-spacing:.055em!important; } .nextcrm-modern table thead th:first-child{box-shadow:inset 4px 0 0 #6366f1} .nextcrm-modern table tbody tr:nth-child(even){background:rgba(248,250,252,.55)} .nextcrm-modern table tbody tr:hover{background:linear-gradient(90deg,#f4f7ff,#f8fbff)!important} .nextcrm-modern table tbody td{border-bottom-color:#edf1f6!important} .nextcrm-modern table td>a,.nextcrm-modern .record-title{color:#315bb4!important} .nextcrm-modern table td>a:hover{color:#4f46e5!important} .nextcrm-modern :where(.pagination,.customer-table-footer,.sales-footer,.crm-table-footer){background:linear-gradient(90deg,#fff,#fbfcff)!important} .nextcrm-modern .crm-table-pages button.current{background:linear-gradient(135deg,#eef2ff,#eaf4ff)!important;border-color:#cbd7fb!important;color:#4338ca!important} /* Buttons match dashboard */ .nextcrm-modern :where(.btn-primary,.customer-new-button,.sales-primary,button[type="submit"]:not(.danger):not(.settings-delete)){ background:linear-gradient(135deg,#4f46e5,#2563eb 58%,#0ea5e9)!important;border-color:transparent!important;color:#fff!important; box-shadow:0 7px 16px rgba(79,70,229,.2)!important; } .nextcrm-modern :where(.btn-primary,.customer-new-button,.sales-primary,button[type="submit"]:not(.danger):not(.settings-delete)):hover{ background:linear-gradient(135deg,#4338ca,#1d4ed8 58%,#0284c7)!important;transform:translateY(-1px);box-shadow:0 10px 22px rgba(79,70,229,.25)!important; } .nextcrm-modern :where(.btn-secondary,.customer-import-button,.customer-filter-button,.sales-secondary){background:linear-gradient(180deg,#fff,#f8fafc)!important;border-color:#cfd9e7!important} .nextcrm-modern .btn-danger{background:#fff1f2!important;border-color:#fecdd3!important;color:#be123c!important} /* Inputs and forms */ .nextcrm-modern :where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea){border-color:#ced9e8!important;background:#fff!important} .nextcrm-modern :where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea):focus{border-color:#818cf8!important;box-shadow:0 0 0 4px rgba(99,102,241,.11)!important} .nextcrm-modern .form-panel{position:relative;overflow:hidden!important} .nextcrm-modern .form-panel::before{content:"";display:block;height:4px;background:linear-gradient(90deg,#7c3aed,#2563eb,#06b6d4,#10b981)} .nextcrm-modern .form-section{background:linear-gradient(180deg,#fff,#fdfefe)!important} .nextcrm-modern .form-section:nth-of-type(even){background:linear-gradient(180deg,#fbfdff,#fff)!important} .nextcrm-modern .form-section h2{display:flex;align-items:center;gap:9px;color:#273a55!important;font-weight:820!important} .nextcrm-modern .form-section h2::before{content:"";width:8px;height:8px;border-radius:3px;background:linear-gradient(135deg,#7c3aed,#2563eb);box-shadow:0 0 0 4px #eef2ff} .nextcrm-modern .form-actions{background:linear-gradient(90deg,#f9fbff,#fbf9ff)!important} /* Generic summary/stat cards */ .nextcrm-modern .customer-stat-grid{gap:13px!important} .nextcrm-modern .customer-stat-grid>a,.nextcrm-modern .customer-stat-grid>div{ min-height:78px!important;border:0!important;position:relative;overflow:hidden;padding:16px 17px!important; box-shadow:0 10px 24px rgba(44,62,95,.08)!important; } .nextcrm-modern .customer-stat-grid>a:nth-child(6n+1),.nextcrm-modern .customer-stat-grid>div:nth-child(6n+1){background:linear-gradient(145deg,#eff6ff,#dbeafe)!important;color:#1e3a8a!important} .nextcrm-modern .customer-stat-grid>a:nth-child(6n+2),.nextcrm-modern .customer-stat-grid>div:nth-child(6n+2){background:linear-gradient(145deg,#f5f3ff,#ede9fe)!important;color:#5b21b6!important} .nextcrm-modern .customer-stat-grid>a:nth-child(6n+3),.nextcrm-modern .customer-stat-grid>div:nth-child(6n+3){background:linear-gradient(145deg,#ecfdf5,#d1fae5)!important;color:#065f46!important} .nextcrm-modern .customer-stat-grid>a:nth-child(6n+4),.nextcrm-modern .customer-stat-grid>div:nth-child(6n+4){background:linear-gradient(145deg,#fff7ed,#ffedd5)!important;color:#9a3412!important} .nextcrm-modern .customer-stat-grid>a:nth-child(6n+5),.nextcrm-modern .customer-stat-grid>div:nth-child(6n+5){background:linear-gradient(145deg,#fff1f2,#ffe4e6)!important;color:#9f1239!important} .nextcrm-modern .customer-stat-grid>a:nth-child(6n),.nextcrm-modern .customer-stat-grid>div:nth-child(6n){background:linear-gradient(145deg,#ecfeff,#cffafe)!important;color:#155e75!important} .nextcrm-modern .customer-stat-grid b{font-size:21px!important;color:currentColor!important} /* Sales */ .nextcrm-modern .sales-stat-grid{gap:12px!important} .nextcrm-modern .sales-stat{position:relative;overflow:hidden;border:0!important;padding:16px!important;box-shadow:0 10px 24px rgba(44,62,95,.075)!important} .nextcrm-modern .sales-stat:nth-child(5n+1){background:linear-gradient(145deg,#eff6ff,#dbeafe)!important}.nextcrm-modern .sales-stat:nth-child(5n+2){background:linear-gradient(145deg,#ecfdf5,#d1fae5)!important}.nextcrm-modern .sales-stat:nth-child(5n+3){background:linear-gradient(145deg,#fff7ed,#ffedd5)!important}.nextcrm-modern .sales-stat:nth-child(5n+4){background:linear-gradient(145deg,#f5f3ff,#ede9fe)!important}.nextcrm-modern .sales-stat:nth-child(5n){background:linear-gradient(145deg,#fff1f2,#ffe4e6)!important} .nextcrm-modern .sales-stat strong{font-size:20px!important;color:#1f3150!important} .nextcrm-modern .sales-card{border-top:4px solid #4f46e5!important} /* Expenses */ .nextcrm-modern .expense-summary-grid{gap:12px!important} .nextcrm-modern .expense-summary-card{border:0!important;box-shadow:0 10px 24px rgba(44,62,95,.075)!important} .nextcrm-modern .expense-summary-card:nth-child(5n+1){background:linear-gradient(145deg,#eff6ff,#dbeafe)!important}.nextcrm-modern .expense-summary-card:nth-child(5n+2){background:linear-gradient(145deg,#ecfdf5,#d1fae5)!important}.nextcrm-modern .expense-summary-card:nth-child(5n+3){background:linear-gradient(145deg,#fff7ed,#ffedd5)!important}.nextcrm-modern .expense-summary-card:nth-child(5n+4){background:linear-gradient(145deg,#f5f3ff,#ede9fe)!important}.nextcrm-modern .expense-summary-card:nth-child(5n){background:linear-gradient(145deg,#fff1f2,#ffe4e6)!important} .nextcrm-modern .expense-list-panel{border-top:4px solid #0ea5e9!important}.nextcrm-modern .expense-detail-panel{border-top:4px solid #7c3aed!important}.nextcrm-modern .expense-receipt-card{border-top:4px solid #059669!important} /* Settings */ .nextcrm-modern.settings-theme .customer-content{background:radial-gradient(circle at 13% 4%,rgba(59,130,246,.09),transparent 23%),radial-gradient(circle at 88% 10%,rgba(139,92,246,.075),transparent 23%),#f5f7fb!important} .nextcrm-modern .settings-nav-card{border:0!important;background:linear-gradient(180deg,#fff,#fbfdff)!important;box-shadow:0 12px 30px rgba(43,59,92,.08)!important} .nextcrm-modern .settings-nav-group>summary{transition:.15s ease} .nextcrm-modern .settings-nav-group:nth-of-type(5n+1) .settings-nav-group-icon{background:#eff6ff!important;color:#2563eb!important}.nextcrm-modern .settings-nav-group:nth-of-type(5n+2) .settings-nav-group-icon{background:#f5f3ff!important;color:#7c3aed!important}.nextcrm-modern .settings-nav-group:nth-of-type(5n+3) .settings-nav-group-icon{background:#ecfdf5!important;color:#059669!important}.nextcrm-modern .settings-nav-group:nth-of-type(5n+4) .settings-nav-group-icon{background:#fff7ed!important;color:#ea580c!important}.nextcrm-modern .settings-nav-group:nth-of-type(5n) .settings-nav-group-icon{background:#fff1f2!important;color:#e11d48!important} .nextcrm-modern .settings-nav-links a.active{background:linear-gradient(90deg,#eef2ff,#eff6ff)!important;color:#4338ca!important} .nextcrm-modern .settings-card{border-top:4px solid #6366f1!important} .nextcrm-modern .settings-tabs{background:linear-gradient(90deg,#f8fbff,#faf7ff)!important} .nextcrm-modern .settings-tabs a.active{background:#eef2ff!important;border-bottom-color:#4f46e5!important;color:#4338ca!important} .nextcrm-modern .settings-notice{background:linear-gradient(90deg,#eff6ff,#f5f3ff)!important;border-left-color:#6366f1!important} .nextcrm-modern .settings-provider-links a:nth-child(4n+1){background:#eff6ff}.nextcrm-modern .settings-provider-links a:nth-child(4n+2){background:#f5f3ff}.nextcrm-modern .settings-provider-links a:nth-child(4n+3){background:#ecfdf5}.nextcrm-modern .settings-provider-links a:nth-child(4n){background:#fff7ed} /* Gateway cards */ .nextcrm-modern .gateway-intro{background:radial-gradient(circle at 88% 12%,rgba(255,255,255,.2),transparent 22%),linear-gradient(120deg,#4338ca,#2563eb 55%,#0891b2)!important;box-shadow:0 18px 40px rgba(37,99,235,.22)!important} .nextcrm-modern .gateway-card{border:0!important;border-top:4px solid #4f46e5!important;box-shadow:0 11px 28px rgba(43,59,92,.08)!important} .nextcrm-modern .gateway-card:nth-child(4n+2){border-top-color:#059669!important}.nextcrm-modern .gateway-card:nth-child(4n+3){border-top-color:#ea580c!important}.nextcrm-modern .gateway-card:nth-child(4n){border-top-color:#db2777!important} .nextcrm-modern .gateway-logo{background:linear-gradient(135deg,#eef2ff,#dbeafe)!important;color:#4338ca!important} /* Common module cards */ .nextcrm-modern .project-card{border-top:4px solid #2563eb!important}.nextcrm-modern .ticket-card{border-top:4px solid #f59e0b!important}.nextcrm-modern .items-card{border-top:4px solid #059669!important}.nextcrm-modern .commerce-card{border-top:4px solid #7c3aed!important}.nextcrm-modern .profile-card{border-top:4px solid #06b6d4!important}.nextcrm-modern .client-card{border-top:4px solid #2563eb!important} /* Badges/statuses */ .nextcrm-modern :where(.badge,.sales-status,[class*="status-badge"],[class*="badge-"]){border-radius:999px!important;font-weight:780!important} .nextcrm-modern :where(.badge,.sales-status):not(.danger){background:#eef2ff!important;border-color:#c7d2fe!important;color:#4338ca!important} .nextcrm-modern :where(.badge-success,.status-success,.status-paid,.status-active){background:#ecfdf5!important;border-color:#a7f3d0!important;color:#047857!important} .nextcrm-modern :where(.badge-warning,.status-warning,.status-pending){background:#fff7ed!important;border-color:#fed7aa!important;color:#c2410c!important} .nextcrm-modern :where(.badge-danger,.status-danger,.status-overdue,.status-cancelled){background:#fff1f2!important;border-color:#fecdd3!important;color:#be123c!important} /* Alerts and modals */ .nextcrm-modern .flash{background:linear-gradient(90deg,#ecfdf5,#f0fdfa)!important;border-color:#a7f3d0!important;box-shadow:0 8px 20px rgba(5,150,105,.08)!important} .nextcrm-modern .customer-errors{background:linear-gradient(90deg,#fff1f2,#fff7f7)!important} .nextcrm-modern dialog,.nextcrm-modern [class*="modal-card"]{border-top:4px solid #6366f1!important;background:#fff!important} /* Footer / empty states */ .nextcrm-modern .empty-state,.nextcrm-modern .customer-empty,.nextcrm-modern .dash-empty{padding:38px 22px!important;background:linear-gradient(135deg,#fbfdff,#faf8ff)!important;color:#7a889c!important} @media(max-width:900px){ .nextcrm-modern :where(.page-intro,.customer-page-heading,.sales-heading,.expense-page-head,.expense-form-head,.settings-panel-heading){padding:16px!important} } @media(max-width:620px){ .nextcrm-modern :where(.page-intro,.customer-page-heading,.sales-heading,.expense-page-head,.expense-form-head,.settings-panel-heading){border-radius:14px!important} .nextcrm-modern .customer-stat-grid{grid-template-columns:1fr!important} } /* === Unified Knowledge Base table design across CRM === */ .nextcrm-modern{ --table-head-a:#eef4ff; --table-head-b:#f6f4ff; --table-head-text:#3d4f68; --table-row-text:#34445b; --table-border:#e5ebf3; --table-hover:#f8fbff; --table-card-shadow:0 12px 32px rgba(31,46,75,.075); } /* Table containers */ .nextcrm-modern :where( .table-panel,.customer-table-card,.sales-card,.lead-list-card,.contract-table-card, .subscription-index-card,.items-card,.contacts-card,.staff-panel,.commerce-card, .kb-table-card,.ticket-table-card,.project-table-card,.report-card,.file-list-card, .settings-table-card,.panel:has(> .table-wrap),.panel:has(table) ){ overflow:hidden!important; border:1px solid #e1e7f0!important; border-radius:16px!important; background:#fff!important; box-shadow:var(--table-card-shadow)!important; } /* Unified toolbar */ .nextcrm-modern :where( .table-toolbar,.customer-table-toolbar,.sales-toolbar,.lead-list-toolbar,.kb-table-toolbar, .contract-toolbar,.subscription-table-tools,.items-toolbar,.contacts-toolbar,.staff-toolbar, .commerce-toolbar,.leave-toolbar,.announce-toolbar,.timecard-toolbar,.ticket-toolbar, .file-toolbar,.support-toolbar,.report-table-heading ){ min-height:64px!important; display:flex; align-items:center; gap:8px!important; padding:12px 16px!important; border-bottom:1px solid #e7ecf3!important; background:linear-gradient(100deg,#fff 0%,#f8fbff 52%,#f7f4ff 100%)!important; } .nextcrm-modern :where( .table-toolbar,.customer-table-toolbar,.sales-toolbar,.lead-list-toolbar,.kb-table-toolbar, .contract-toolbar,.subscription-table-tools,.items-toolbar,.contacts-toolbar,.staff-toolbar, .commerce-toolbar,.leave-toolbar,.announce-toolbar,.timecard-toolbar,.ticket-toolbar, .file-toolbar,.support-toolbar ) :where(input[type="text"],input[type="search"],input[type="number"],select){ height:36px!important; min-height:36px!important; border:1px solid #ccd7e6!important; border-radius:9px!important; background:#fff!important; color:#3d4d64!important; padding:0 11px!important; font-size:12px!important; box-shadow:none!important; } .nextcrm-modern :where( .table-toolbar,.customer-table-toolbar,.sales-toolbar,.lead-list-toolbar,.kb-table-toolbar, .contract-toolbar,.subscription-table-tools,.items-toolbar,.contacts-toolbar,.staff-toolbar, .commerce-toolbar,.leave-toolbar,.announce-toolbar,.timecard-toolbar,.ticket-toolbar, .file-toolbar,.support-toolbar ) :where(input,select):focus{ border-color:#8eb0eb!important; box-shadow:0 0 0 3px rgba(37,99,235,.08)!important; } .nextcrm-modern :where( .table-toolbar,.customer-table-toolbar,.sales-toolbar,.lead-list-toolbar,.kb-table-toolbar, .contract-toolbar,.subscription-table-tools,.items-toolbar,.contacts-toolbar,.staff-toolbar, .commerce-toolbar,.leave-toolbar,.announce-toolbar,.timecard-toolbar,.ticket-toolbar, .file-toolbar,.support-toolbar ) :where(a,button):not(.danger):not(.btn-danger){ min-height:36px; border-radius:9px!important; } /* Every authenticated CRM table */ .nextcrm-modern .customer-content table{ width:100%; border-collapse:separate!important; border-spacing:0!important; background:#fff; color:var(--table-row-text); } .nextcrm-modern .customer-content table thead th{ height:46px!important; padding:10px 14px!important; border-top:0!important; border-right:0!important; border-left:0!important; border-bottom:1px solid #dfe7f2!important; background:linear-gradient(90deg,var(--table-head-a),var(--table-head-b))!important; color:var(--table-head-text)!important; font-size:10.5px!important; line-height:1.25!important; font-weight:850!important; letter-spacing:.055em!important; text-transform:uppercase!important; white-space:nowrap; vertical-align:middle!important; } .nextcrm-modern .customer-content table tbody td{ min-height:58px; padding:12px 14px!important; border-top:0!important; border-right:0!important; border-left:0!important; border-bottom:1px solid #edf1f5!important; background:#fff!important; color:var(--table-row-text)!important; font-size:12.5px!important; line-height:1.45!important; vertical-align:middle!important; } .nextcrm-modern .customer-content table tbody tr:last-child td{border-bottom:0!important} .nextcrm-modern .customer-content table tbody tr:hover td{ background:linear-gradient(90deg,#f8fbff,#fbfaff)!important; } .nextcrm-modern .customer-content table tbody tr{transition:background .15s ease} .nextcrm-modern .customer-content table td a:not(.btn):not([class*="button"]){ color:#203f72!important; font-weight:700; text-decoration:none; } .nextcrm-modern .customer-content table td a:not(.btn):not([class*="button"]):hover{color:#1d4ed8!important} .nextcrm-modern .customer-content table td small{color:#8996a8!important;font-size:10.5px!important} .nextcrm-modern .customer-content table td strong{color:#253851} /* Checkbox columns */ .nextcrm-modern .customer-content table :where(th,td):first-child input[type="checkbox"]{ width:15px;height:15px;accent-color:#4f46e5; } /* Status/category/tag pills in rows */ .nextcrm-modern .customer-content table :where( .badge,.status,.sales-status,.lead-status,.subscription-status-badge,.contract-status, .commerce-status,.kb-group-badge,.kb-status,[class*="status-badge"],[class*="table-tag"], [class*="status-"] ){ display:inline-flex!important; align-items:center!important; min-height:24px!important; padding:3px 8px!important; border-radius:999px!important; font-size:10.5px!important; line-height:1!important; font-weight:800!important; } /* Row action buttons */ .nextcrm-modern .customer-content table :where( .row-actions,.lead-row-actions,.kb-row-actions,.customer-row-actions,.table-actions, .contract-actions,.staff-actions,.items-actions,.sales-row-actions,.support-row-actions, [class*="row-actions"] ){display:flex!important;align-items:center!important;gap:6px!important;white-space:nowrap} .nextcrm-modern .customer-content table :where( .row-actions,.lead-row-actions,.kb-row-actions,.customer-row-actions,.table-actions, .contract-actions,.staff-actions,.items-actions,.sales-row-actions,.support-row-actions, [class*="row-actions"] ) :where(a,button){ width:32px!important; height:32px!important; min-width:32px!important; min-height:32px!important; display:grid!important; place-items:center!important; padding:0!important; border:1px solid #dbe4ef!important; border-radius:8px!important; background:#fff!important; color:#43638f!important; box-shadow:none!important; } .nextcrm-modern .customer-content table :where( .row-actions,.lead-row-actions,.kb-row-actions,.customer-row-actions,.table-actions, .contract-actions,.staff-actions,.items-actions,.sales-row-actions,.support-row-actions, [class*="row-actions"] ) :where(a,button):hover{ border-color:#abc6ef!important; background:#eef5ff!important; color:#1d4ed8!important; } .nextcrm-modern .customer-content table :where( .row-actions,.lead-row-actions,.kb-row-actions,.customer-row-actions,.table-actions, .contract-actions,.staff-actions,.items-actions,.sales-row-actions,.support-row-actions, [class*="row-actions"] ) :where(button.danger,.danger,button[class*="delete"]):hover{ border-color:#fecaca!important; background:#fff1f2!important; color:#dc2626!important; } .nextcrm-modern .customer-content table :where(.row-actions,[class*="row-actions"]) svg{width:14px!important;height:14px!important} /* Empty table rows */ .nextcrm-modern .customer-content table :where(.empty,.customer-empty,.lead-empty,.kb-empty,.contacts-empty,.announce-empty,.file-empty){ padding:46px 18px!important; text-align:center!important; color:#8794a7!important; background:linear-gradient(135deg,#fbfdff,#faf8ff)!important; } /* Table footers / pagination */ .nextcrm-modern :where( .table-footer,.customer-table-footer,.sales-footer,.lead-pagination,.kb-table-footer, .contract-footer,.subscription-pagination,.items-footer,.contacts-card>footer,.staff-panel>footer, .commerce-footer,.announce-footer,.timecard-footer,.leave-footer,.ticket-footer,.file-footer ){ min-height:60px!important; display:flex!important; align-items:center!important; justify-content:space-between!important; gap:16px!important; padding:12px 16px!important; border-top:1px solid #e5eaf1!important; background:#fbfcff!important; color:#748196!important; font-size:11.5px!important; } .nextcrm-modern :where( .table-footer,.customer-table-footer,.sales-footer,.lead-pagination,.kb-table-footer, .contract-footer,.subscription-pagination,.items-footer,.contacts-card>footer,.staff-panel>footer, .commerce-footer,.announce-footer,.timecard-footer,.leave-footer,.ticket-footer,.file-footer ) nav :where(a,span), .nextcrm-modern .customer-content .pagination :where(a,span){ min-width:34px!important; height:34px!important; display:inline-grid!important; place-items:center!important; padding:0 9px!important; border:1px solid transparent!important; border-radius:9px!important; background:transparent!important; color:#5c6d83!important; font-size:11.5px!important; font-weight:700!important; text-decoration:none!important; } .nextcrm-modern :where( .table-footer,.customer-table-footer,.sales-footer,.lead-pagination,.kb-table-footer, .contract-footer,.subscription-pagination,.items-footer,.contacts-card>footer,.staff-panel>footer, .commerce-footer,.announce-footer,.timecard-footer,.leave-footer,.ticket-footer,.file-footer ) nav a:hover, .nextcrm-modern .customer-content .pagination a:hover{ border-color:#c9d8eb!important; background:#eef5ff!important; color:#1d4ed8!important; } .nextcrm-modern .customer-content .pagination :where(.active,[aria-current="page"]){ border-color:#dbe4ef!important; background:#eaf1fb!important; color:#1f3554!important; } /* Preserve KB reference exactly */ .nextcrm-modern .kb-data-table thead th{background:linear-gradient(90deg,#eef4ff,#f6f4ff)!important} .nextcrm-modern .kb-data-table tbody tr:hover td{background:linear-gradient(90deg,#f8fbff,#fbfaff)!important} /* Responsive tables */ @media(max-width:760px){ .nextcrm-modern :where( .table-toolbar,.customer-table-toolbar,.sales-toolbar,.lead-list-toolbar,.kb-table-toolbar, .contract-toolbar,.subscription-table-tools,.items-toolbar,.contacts-toolbar,.staff-toolbar, .commerce-toolbar,.leave-toolbar,.announce-toolbar,.timecard-toolbar,.ticket-toolbar, .file-toolbar,.support-toolbar ){align-items:stretch!important;flex-wrap:wrap!important} .nextcrm-modern :where( .table-toolbar,.customer-table-toolbar,.sales-toolbar,.lead-list-toolbar,.kb-table-toolbar, .contract-toolbar,.subscription-table-tools,.items-toolbar,.contacts-toolbar,.staff-toolbar, .commerce-toolbar,.leave-toolbar,.announce-toolbar,.timecard-toolbar,.ticket-toolbar, .file-toolbar,.support-toolbar ) :where(input[type="text"],input[type="search"]){width:100%!important;max-width:none!important} .nextcrm-modern .customer-content table thead th{padding:10px 11px!important} .nextcrm-modern .customer-content table tbody td{padding:11px!important} } /* ============================================================================ NEXT CRM UNIFIED UI SYSTEM โ€” 2026-09-30 Reference language: Knowledge Base structure + Subscription compact controls. One visual system for pages, tables, forms, cards, filters, modals and mobile. ============================================================================ */ .nextcrm-modern{ --u-bg:#f5f7fb;--u-surface:#fff;--u-soft:#f8fafc;--u-text:#1f3047;--u-strong:#152238; --u-muted:#718096;--u-border:#dfe6ef;--u-border-strong:#cbd6e3;--u-primary:#202d3e; --u-primary-hover:#152238;--u-link:#2563eb;--u-danger:#dc2626;--u-radius:12px;--u-radius-sm:8px; --u-shadow:0 8px 24px rgba(31,46,75,.065);--u-shadow-soft:0 2px 7px rgba(31,46,75,.05); color:var(--u-text) } /* Shell */ .nextcrm-modern .customer-content{background:linear-gradient(180deg,#f8fafe 0,#f5f7fb 210px,#f5f7fb 100%)!important;color:var(--u-text)!important} .nextcrm-modern .customer-topbar{background:rgba(255,255,255,.97)!important;border-bottom:1px solid var(--u-border)!important;box-shadow:0 2px 10px rgba(23,36,58,.035)!important} .nextcrm-modern .customer-sidebar{background:#fff!important;border-right:1px solid var(--u-border)!important} .nextcrm-modern .customer-sidebar nav a{border-radius:8px!important;color:#3e4e64!important} .nextcrm-modern .customer-sidebar nav a:hover{background:#f5f7fb!important;color:#24476f!important} .nextcrm-modern .customer-sidebar nav a.active{background:#eef3f9!important;border-color:#d7e0eb!important;color:#203b60!important;box-shadow:none!important} /* Headings */ .nextcrm-modern .customer-content h1{color:var(--u-strong)} .nextcrm-modern :where(.page-intro,.customer-page-heading,.sales-heading,.expense-page-head,.expense-form-head,.staff-head,.contacts-head,.contract-head,.items-head,.order-head,.support-head,.announce-head,.timecard-head,.leave-head){margin-bottom:18px!important} .nextcrm-modern :where(.page-intro,.customer-page-heading,.sales-heading,.expense-page-head,.expense-form-head,.staff-head,.contacts-head,.contract-head,.items-head,.order-head,.support-head,.announce-head,.timecard-head,.leave-head) h1{margin:0!important;color:var(--u-strong)!important;font-size:25px!important;line-height:1.2!important;font-weight:800!important;letter-spacing:-.55px!important} .nextcrm-modern :where(.page-intro,.customer-page-heading,.sales-heading,.expense-page-head,.expense-form-head,.staff-head,.contacts-head,.contract-head,.items-head,.order-head,.support-head,.announce-head,.timecard-head,.leave-head) p{margin:5px 0 0!important;color:var(--u-muted)!important;font-size:12.5px!important;line-height:1.55!important} .nextcrm-modern :where(.eyebrow,.dash-eyebrow,.settings-eyebrow,.kb-eyebrow){color:#607693!important;font-size:10px!important;font-weight:850!important;letter-spacing:.11em!important;text-transform:uppercase!important} /* Surfaces */ .nextcrm-modern .customer-content :where(.panel,.form-panel,.table-panel,.customer-table-card,.sales-card,.subscription-index-card,.subscription-form-card,.kb-table-card,.kb-form-card,.contract-card,.contracts-card,.contacts-card,.staff-panel,.settings-card,.settings-nav-card,.expense-list-panel,.expense-detail-panel,.expense-receipt-card,.expense-form-card,.items-card,.order-card,.process-card,.support-card,.report-card,.commerce-card,.announce-card,.timecard-card,.leave-card,.file-card,.messages-card,.ticket-card,.module-summary,.client-card){border:1px solid var(--u-border)!important;border-radius:var(--u-radius)!important;background:#fff!important;box-shadow:var(--u-shadow-soft)!important} .nextcrm-modern .customer-content :where(.table-panel,.customer-table-card,.sales-card,.subscription-index-card,.kb-table-card,.expense-list-panel,.order-card,.staff-panel){overflow:hidden!important} .nextcrm-modern .customer-content :where(.store-card,.product-card,.dash-card,.todo-card){border-color:var(--u-border)!important;border-radius:var(--u-radius)!important;box-shadow:var(--u-shadow-soft)!important} /* Primary/secondary buttons */ .nextcrm-modern .customer-content :where(.btn-primary,.customer-new-button,.sales-primary,.subscription-dark,.kb-new-button,.items-primary,.settings-footer button,.settings-add-tag button,.kb-form-actions button,.subscription-form-actions button,.expense-form-actions button[type="submit"],.form-actions button[type="submit"],.process-card footer button[type="submit"]){min-height:38px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;padding:0 14px!important;border:1px solid var(--u-primary)!important;border-radius:var(--u-radius-sm)!important;background:var(--u-primary)!important;color:#fff!important;box-shadow:none!important;font-size:12px!important;font-weight:750!important;text-decoration:none!important;cursor:pointer!important} .nextcrm-modern .customer-content :where(.btn-primary,.customer-new-button,.sales-primary,.subscription-dark,.kb-new-button,.items-primary,.settings-footer button,.settings-add-tag button,.kb-form-actions button,.subscription-form-actions button,.expense-form-actions button[type="submit"],.form-actions button[type="submit"],.process-card footer button[type="submit"]):hover{background:var(--u-primary-hover)!important;border-color:var(--u-primary-hover)!important;transform:none!important;box-shadow:none!important} .nextcrm-modern .customer-content :where(.btn-secondary,.customer-import-button,.customer-filter-button,.sales-secondary,.subscription-filter-button,.kb-tool-button,.kb-icon-button,.items-button,.dash-options){min-height:36px!important;border:1px solid var(--u-border-strong)!important;border-radius:var(--u-radius-sm)!important;background:#fff!important;color:#45566e!important;box-shadow:none!important;font-size:11.5px!important;font-weight:700!important} .nextcrm-modern .customer-content :where(.btn-secondary,.customer-import-button,.customer-filter-button,.sales-secondary,.subscription-filter-button,.kb-tool-button,.kb-icon-button,.items-button,.dash-options):hover{background:#f7f9fc!important;border-color:#b7c6d8!important;color:#24476f!important} .nextcrm-modern .customer-content :where(button.danger,.btn-danger,.settings-delete,[class*="delete-button"]){border-color:#fecdd3!important;background:#fff!important;color:var(--u-danger)!important;box-shadow:none!important} .nextcrm-modern .customer-content :where(button.danger,.btn-danger,.settings-delete,[class*="delete-button"]):hover{background:#fff1f2!important;border-color:#fda4af!important} /* Forms */ .nextcrm-modern .customer-content :where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea){border:1px solid var(--u-border-strong)!important;border-radius:8px!important;background:#fff!important;color:#26384f!important;box-shadow:none!important;font-size:12.5px!important;outline:none!important} .nextcrm-modern .customer-content :where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select){min-height:38px!important;padding:7px 10px!important} .nextcrm-modern .customer-content textarea{min-height:102px!important;padding:9px 10px!important;line-height:1.55!important;resize:vertical} .nextcrm-modern .customer-content :where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea):focus{border-color:#7ea5dc!important;box-shadow:0 0 0 3px rgba(37,99,235,.08)!important} .nextcrm-modern .customer-content :where(label>span,.field>span,.kb-field>span,.settings-field>label,.subscription-form-section label span){color:#3c4d64!important;font-size:12px!important;font-weight:700!important} .nextcrm-modern .customer-content :where(.form-panel,.subscription-form-card,.kb-form-card,.expense-form-card,.process-card){overflow:hidden!important} .nextcrm-modern .customer-content :where(.form-section,.subscription-form-section,.expense-form-section,.settings-fields,.kb-form-fields){padding:22px 24px!important} .nextcrm-modern .customer-content :where(.form-section+.form-section,.subscription-form-section+.subscription-form-section,.expense-form-section+.expense-form-section){border-top:1px solid #e9eef4!important} .nextcrm-modern .customer-content :where(.form-actions,.subscription-form-actions,.expense-form-actions,.kb-form-actions,.settings-footer,.process-card footer){min-height:62px!important;padding:12px 20px!important;border-top:1px solid var(--u-border)!important;background:#fafbfd!important} .nextcrm-modern .customer-content :where(.subscription-custom-plan,.subscription-form-pair,.form-grid,.two-column,.settings-grid){gap:14px!important} /* Tables */ .nextcrm-modern .customer-content table{width:100%!important;border-collapse:separate!important;border-spacing:0!important;background:#fff!important;color:var(--u-text)!important} .nextcrm-modern .customer-content table thead th{height:42px!important;padding:9px 12px!important;border-top:0!important;border-left:0!important;border-right:0!important;border-bottom:1px solid var(--u-border)!important;background:#f7f9fc!important;color:#5e6d81!important;font-size:11px!important;line-height:1.25!important;font-weight:750!important;letter-spacing:.01em!important;text-transform:none!important;white-space:nowrap!important;vertical-align:middle!important} .nextcrm-modern .customer-content table tbody td{min-height:50px!important;padding:11px 12px!important;border-top:0!important;border-left:0!important;border-right:0!important;border-bottom:1px solid #edf1f5!important;background:#fff!important;color:#34445b!important;font-size:12.5px!important;line-height:1.45!important;vertical-align:middle!important} .nextcrm-modern .customer-content table tbody tr:last-child td{border-bottom:0!important} .nextcrm-modern .customer-content table tbody tr:hover td{background:#f8fafc!important} .nextcrm-modern .customer-content table td a:not(.btn):not([class*="button"]){color:#234f88!important;font-weight:700!important;text-decoration:none!important} .nextcrm-modern .customer-content table td a:not(.btn):not([class*="button"]):hover{color:#1d4ed8!important} .nextcrm-modern .customer-content :where(.table-scroll,.customer-table-scroll,.sales-table-wrap,.subscription-table-scroll,.kb-table-scroll,.items-table-wrap,.expense-table-wrap,.dash-table-scroll){overflow:auto!important} /* Toolbars and filters */ .nextcrm-modern .customer-content :where(.table-toolbar,.customer-table-toolbar,.sales-toolbar,.subscription-table-tools,.kb-table-toolbar,.items-toolbar,.contacts-toolbar,.staff-toolbar,.commerce-toolbar,.leave-toolbar,.announce-toolbar,.timecard-toolbar,.ticket-toolbar,.file-toolbar,.support-toolbar,.order-toolbar,.expense-list-toolbar){min-height:62px!important;display:flex!important;align-items:center!important;gap:8px!important;padding:11px 14px!important;border-bottom:1px solid var(--u-border)!important;background:#fff!important} .nextcrm-modern .customer-content :where(.table-toolbar,.customer-table-toolbar,.sales-toolbar,.subscription-table-tools,.kb-table-toolbar,.items-toolbar,.contacts-toolbar,.staff-toolbar,.commerce-toolbar,.leave-toolbar,.announce-toolbar,.timecard-toolbar,.ticket-toolbar,.file-toolbar,.support-toolbar,.order-toolbar,.expense-list-toolbar) :where(input[type="text"],input[type="search"],input[type="number"],select){height:34px!important;min-height:34px!important;border-radius:7px!important;font-size:11.5px!important} .nextcrm-modern .customer-content :where(.subscription-filters,.customer-filter-panel,.sales-filters,.order-filters,.expense-filters,.staff-filters,.contacts-filters){border:1px solid var(--u-border)!important;border-radius:9px!important;background:#f8fafc!important;box-shadow:none!important} /* Status pills */ .nextcrm-modern .customer-content :where(.badge,.status,.sales-status,.lead-status,.subscription-status-badge,.contract-status,.commerce-status,.kb-group-badge,.kb-status,[class*="status-badge"],[class*="table-tag"]){display:inline-flex!important;align-items:center!important;min-height:23px!important;padding:3px 8px!important;border:1px solid #dce4ed!important;border-radius:999px!important;background:#f8fafc!important;color:#56667b!important;font-size:10.5px!important;line-height:1!important;font-weight:750!important;box-shadow:none!important} .nextcrm-modern .customer-content :where(.status-active,.active.badge,.kb-status.published,.status-completed,.status-paid){background:#eefaf5!important;border-color:#caeadc!important;color:#087a59!important} .nextcrm-modern .customer-content :where(.status-draft,.status-pending,.kb-status.draft,.status-new){background:#fff8ec!important;border-color:#f2dfbd!important;color:#9a5a09!important} .nextcrm-modern .customer-content :where(.status-cancelled,.status-overdue,.status-unpaid,.status-danger){background:#fff2f3!important;border-color:#f6d0d4!important;color:#b42332!important} /* Row actions */ .nextcrm-modern .customer-content table :where(.row-actions,.lead-row-actions,.kb-row-actions,.customer-row-actions,.table-actions,.contract-actions,.staff-actions,.items-actions,.sales-row-actions,.support-row-actions,[class*="row-actions"]){display:flex!important;align-items:center!important;gap:5px!important;white-space:nowrap!important} .nextcrm-modern .customer-content table :where(.row-actions,.lead-row-actions,.kb-row-actions,.customer-row-actions,.table-actions,.contract-actions,.staff-actions,.items-actions,.sales-row-actions,.support-row-actions,[class*="row-actions"]) :where(a,button){width:30px!important;height:30px!important;min-width:30px!important;min-height:30px!important;padding:0!important;display:grid!important;place-items:center!important;border:1px solid #dbe3ec!important;border-radius:7px!important;background:#fff!important;color:#48617f!important;box-shadow:none!important} .nextcrm-modern .customer-content table :where(.row-actions,.lead-row-actions,.kb-row-actions,.customer-row-actions,.table-actions,.contract-actions,.staff-actions,.items-actions,.sales-row-actions,.support-row-actions,[class*="row-actions"]) :where(a,button):hover{background:#f2f6fb!important;border-color:#b9c9dd!important;color:#1d4ed8!important} /* Empty states, footers and pagination */ .nextcrm-modern .customer-content table :where(.empty,.empty-cell,.customer-empty,.lead-empty,.kb-empty,.contacts-empty,.announce-empty,.file-empty,.subscription-empty){padding:38px 18px!important;text-align:center!important;color:#8593a6!important;background:#fbfcfe!important} .nextcrm-modern .customer-content :where(.table-footer,.customer-table-footer,.sales-footer,.lead-pagination,.kb-table-footer,.contract-footer,.subscription-list-footer,.items-footer,.commerce-footer,.announce-footer,.timecard-footer,.leave-footer,.ticket-footer,.file-footer){min-height:56px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:14px!important;padding:11px 14px!important;border-top:1px solid var(--u-border)!important;background:#fbfcfe!important;color:#738196!important;font-size:11.5px!important} .nextcrm-modern .customer-content .pagination :where(a,span),.nextcrm-modern .customer-content :where(.kb-pagination,.subscription-pagination) :where(a,span){min-width:32px!important;height:32px!important;display:inline-grid!important;place-items:center!important;padding:0 8px!important;border:1px solid transparent!important;border-radius:7px!important;background:transparent!important;color:#617086!important;font-size:11px!important;font-weight:700!important;text-decoration:none!important} .nextcrm-modern .customer-content .pagination a:hover,.nextcrm-modern .customer-content :where(.kb-pagination,.subscription-pagination) a:hover{background:#f1f5f9!important;border-color:#d3dce7!important;color:#244f86!important} /* Tabs */ .nextcrm-modern .customer-content :where(.tabs,.sales-tabs,.settings-tabs,.dash-tabs,.project-tabs,.customer-tabs,.contract-tabs){border-bottom:1px solid var(--u-border)!important;background:#fafbfd!important} .nextcrm-modern .customer-content :where(.tabs,.sales-tabs,.settings-tabs,.dash-tabs,.project-tabs,.customer-tabs,.contract-tabs) :where(a,button){color:#66758a!important;border-radius:7px 7px 0 0!important;font-weight:700!important} .nextcrm-modern .customer-content :where(.tabs,.sales-tabs,.settings-tabs,.dash-tabs,.project-tabs,.customer-tabs,.contract-tabs) :where(a.active,a.selected,button.active,button.selected){color:#203f68!important;border-bottom-color:#202d3e!important;background:#fff!important} /* Summary blocks */ .nextcrm-modern .customer-content :where(.customer-stat-grid,.sales-stat-grid,.expense-summary-grid,.subscription-statuses){gap:8px!important} .nextcrm-modern .customer-content :where(.customer-stat-grid>a,.customer-stat-grid>div,.sales-stat,.expense-summary-card,.subscription-statuses>a){border:1px solid var(--u-border)!important;border-radius:9px!important;background:#fff!important;box-shadow:none!important} /* KB and Subscription are the visual reference */ .nextcrm-modern .kb-dashboard-hero,.nextcrm-modern .kb-form-hero{border-radius:14px!important;background:linear-gradient(135deg,#202d3e 0%,#2f435e 100%)!important;box-shadow:0 10px 26px rgba(22,34,52,.14)!important} .nextcrm-modern .kb-dashboard-hero .kb-new-button{background:#fff!important;color:#202d3e!important;border-color:#fff!important} .nextcrm-modern .kb-table-card,.nextcrm-modern .kb-form-card{border:1px solid var(--u-border)!important;border-radius:var(--u-radius)!important;box-shadow:var(--u-shadow-soft)!important} .nextcrm-modern .kb-table-toolbar{background:#fff!important} .nextcrm-modern .kb-data-table thead th{background:#f7f9fc!important;color:#5e6d81!important;text-transform:none!important;letter-spacing:.01em!important} .nextcrm-modern .subscription-index-card,.nextcrm-modern .subscription-form-card{border-radius:var(--u-radius)!important;box-shadow:var(--u-shadow-soft)!important} .nextcrm-modern .subscription-summary{padding:22px 20px 18px!important;background:#fff!important;border-bottom:1px solid var(--u-border)!important} .nextcrm-modern .subscription-summary h1{font-size:20px!important;color:var(--u-strong)!important} .nextcrm-modern .subscription-form-page{max-width:920px!important} /* Settings */ .nextcrm-modern.settings-theme .customer-content{background:var(--u-bg)!important} .nextcrm-modern .settings-workspace{background:var(--u-bg)!important;gap:18px!important} .nextcrm-modern .settings-nav-card,.nextcrm-modern .settings-card{border-radius:var(--u-radius)!important;box-shadow:var(--u-shadow-soft)!important} .nextcrm-modern .settings-tabs{background:#fafbfd!important} .nextcrm-modern .settings-nav-links a.active{background:#eef3f9!important;color:#203f68!important} .nextcrm-modern .settings-footer button{background:var(--u-primary)!important;border-color:var(--u-primary)!important} .nextcrm-modern .settings-footer button:hover{background:var(--u-primary-hover)!important} /* Sales, projects, products, details */ .nextcrm-modern .customer-content :where(.invoice-workspace,.proposal-workspace,.estimate-workspace,.project-page,.customer-detail-page,.lead-detail-page){color:var(--u-text)!important} .nextcrm-modern .customer-content :where(.invoice-card,.proposal-card,.estimate-card,.project-panel,.project-summary,.customer-detail-card,.lead-detail-card){border-color:var(--u-border)!important;border-radius:var(--u-radius)!important;box-shadow:var(--u-shadow-soft)!important} .nextcrm-modern .customer-content .store-card{overflow:hidden!important;background:#fff!important} .nextcrm-modern .customer-content .store-card:hover{transform:none!important;border-color:#cbd6e3!important;box-shadow:var(--u-shadow)!important} .nextcrm-modern .customer-content .order-summary{border-color:var(--u-border)!important;background:#fafbfd!important} /* Dialogs and alerts */ .nextcrm-modern :where(dialog,.todo-modal,.kb-modal-card,[class*="modal-card"],[class*="dialog-card"]){border:1px solid var(--u-border)!important;border-radius:14px!important;background:#fff!important;box-shadow:0 20px 58px rgba(15,23,42,.2)!important} .nextcrm-modern dialog::backdrop{background:rgba(15,23,42,.42)!important;backdrop-filter:blur(3px)} .nextcrm-modern .kb-modal{backdrop-filter:blur(3px)} .nextcrm-modern :where(.kb-modal-card>header,[class*="modal-card"]>header,[class*="dialog-card"]>header){border-bottom:1px solid var(--u-border)!important;background:#fafbfd!important} .nextcrm-modern .flash{border:1px solid #cbe8db!important;border-radius:9px!important;background:#f1fbf6!important;color:#08724f!important;box-shadow:none!important} .nextcrm-modern .customer-errors{border:1px solid #f4ccd2!important;border-radius:9px!important;background:#fff4f5!important;color:#b42332!important;box-shadow:none!important} /* Portal */ .portal-professional{--u-bg:#f5f7fb;--u-border:#dfe6ef;--u-border-strong:#cbd6e3;--u-text:#1f3047;--u-primary:#202d3e;background:var(--u-bg)!important;color:var(--u-text)!important} .portal-professional .portal-top{background:#fff!important;border-bottom:1px solid var(--u-border)!important;box-shadow:0 2px 10px rgba(23,36,58,.035)!important} .portal-professional :where(section,article,.portal-card){border:1px solid var(--u-border)!important;border-radius:12px!important;background:#fff!important;box-shadow:0 2px 7px rgba(31,46,75,.05)!important} .portal-professional :where(input,select,textarea){border:1px solid var(--u-border-strong)!important;border-radius:8px!important;background:#fff!important;box-shadow:none!important} .portal-professional table thead th{background:#f7f9fc!important;color:#5e6d81!important;text-transform:none!important} .portal-professional table tbody tr:hover td{background:#f8fafc!important} .portal-professional button:not(.danger){border-radius:8px!important} /* Responsive */ @media(max-width:900px){ .nextcrm-modern .customer-content :where(.form-section,.subscription-form-section,.expense-form-section,.settings-fields,.kb-form-fields){padding:20px 18px!important} .nextcrm-modern .customer-content :where(.table-toolbar,.customer-table-toolbar,.sales-toolbar,.subscription-table-tools,.kb-table-toolbar,.items-toolbar,.contacts-toolbar,.staff-toolbar,.commerce-toolbar,.leave-toolbar,.announce-toolbar,.timecard-toolbar,.ticket-toolbar,.file-toolbar,.support-toolbar,.order-toolbar,.expense-list-toolbar){flex-wrap:wrap!important;align-items:stretch!important} } @media(max-width:650px){ .nextcrm-modern .customer-content{padding:17px 11px 50px!important} .nextcrm-modern :where(.page-intro,.customer-page-heading,.sales-heading,.expense-page-head,.expense-form-head,.staff-head,.contacts-head,.contract-head,.items-head,.order-head,.support-head,.announce-head,.timecard-head,.leave-head) h1{font-size:22px!important} .nextcrm-modern .customer-content :where(.form-section,.subscription-form-section,.expense-form-section,.settings-fields,.kb-form-fields){padding:17px 14px!important} .nextcrm-modern .customer-content :where(.form-actions,.subscription-form-actions,.expense-form-actions,.kb-form-actions,.settings-footer,.process-card footer){padding:11px 14px!important;flex-wrap:wrap!important} .nextcrm-modern .customer-content :where(.subscription-custom-plan,.subscription-form-pair,.form-grid,.two-column,.settings-grid){grid-template-columns:1fr!important} .nextcrm-modern .customer-content table thead th{padding:9px 10px!important} .nextcrm-modern .customer-content table tbody td{padding:10px!important} .nextcrm-modern .customer-content :where(.table-footer,.customer-table-footer,.sales-footer,.lead-pagination,.kb-table-footer,.contract-footer,.subscription-list-footer,.items-footer,.commerce-footer,.announce-footer,.timecard-footer,.leave-footer,.ticket-footer,.file-footer){align-items:flex-start!important;flex-direction:column!important} } /* Sidebar profile spacing */ .nextcrm-modern .customer-profile-card{margin-bottom:0!important} /* Compact sidebar account dropdown */ .nextcrm-modern .customer-account-menu{position:relative;margin:0 0 12px} .nextcrm-modern .customer-account-menu>summary{list-style:none;cursor:pointer;user-select:none} .nextcrm-modern .customer-account-menu>summary::-webkit-details-marker{display:none} .nextcrm-modern .customer-profile-card{display:flex;align-items:center;gap:10px} .nextcrm-modern .customer-profile-photo{width:36px;height:36px;flex:none;border-radius:11px;object-fit:cover;border:1px solid #dbe4ef;background:#eef3f8} .nextcrm-modern .customer-profile-meta{min-width:0;flex:1} .nextcrm-modern .customer-profile-meta b,.nextcrm-modern .customer-profile-meta small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .nextcrm-modern .customer-account-chevron{width:15px;height:15px;flex:none;color:#94a3b8;transition:transform .16s ease,color .16s ease} .nextcrm-modern .customer-account-menu[open] .customer-account-chevron{transform:rotate(180deg);color:#2563eb} .nextcrm-modern .customer-account-menu[open]>.customer-profile-card{border-color:#cbdcf4;background:#f8fbff;box-shadow:0 0 0 3px rgba(37,99,235,.06)} .nextcrm-modern .customer-account-dropdown{display:grid;gap:2px;margin:6px 1px 7px;padding:6px;border:1px solid #e1e8f1;border-radius:11px;background:#fff;box-shadow:0 10px 26px rgba(15,23,42,.09)} .nextcrm-modern .customer-account-action{width:100%;min-height:36px;padding:0 10px;border:0;border-radius:8px;background:transparent;color:#405169;display:flex;align-items:center;gap:10px;text-align:left;font-size:12.5px;font-weight:650;text-decoration:none;cursor:pointer;transition:background .14s ease,color .14s ease} .nextcrm-modern .customer-account-action svg{width:16px;height:16px;flex:none;color:#7b8ca2} .nextcrm-modern .customer-account-action:hover{background:#f1f6fd;color:#1d4ed8} .nextcrm-modern .customer-account-action:hover svg{color:#2563eb} .nextcrm-modern .customer-account-divider{height:1px;margin:4px 5px;background:#e8edf4} .nextcrm-modern .customer-account-dropdown form{margin:0} .nextcrm-modern .customer-account-logout{color:#b42318} .nextcrm-modern .customer-account-logout svg{color:#d92d20} .nextcrm-modern .customer-account-logout:hover{background:#fff2f1;color:#b42318} .nextcrm-modern .customer-account-logout:hover svg{color:#d92d20} /* Desktop sidebar collapse toggle */ @media (min-width:861px){ .nextcrm-modern.customer-sidebar-collapsed .customer-sidebar{ display:none!important; } .nextcrm-modern.customer-sidebar-collapsed .customer-content{ width:100%; max-width:none; } .nextcrm-modern.customer-sidebar-collapsed .crm-dashboard::before{ left:0!important; } } /* ============================================================ SECTION: next-premium-shell.css ============================================================ */ /* NEXT's shared navigation foundation. Module-specific content remains intact. */ body.nextcrm-modern{--next-shell-ink:#17253b;--next-shell-paper:#f4f7fb;background:var(--next-shell-paper)!important} body.nextcrm-modern .customer-topbar{background:#fff!important;border-bottom:1px solid #dce5f0!important;box-shadow:none!important} body.nextcrm-modern .customer-sidebar{background:#f7f9fd!important;border-right:1px solid #dce5f0!important;box-shadow:none!important} body.nextcrm-modern .customer-sidebar nav a{border-radius:8px!important;color:#52647c!important;font-weight:550!important} body.nextcrm-modern .customer-sidebar nav a:hover{background:#f7f9fd!important;color:#263954!important} body.nextcrm-modern .customer-sidebar nav a.active{background:#eef3ff!important;border-color:#c8d4e4!important;color:#263954!important;box-shadow:none!important} body.nextcrm-modern .customer-sidebar nav a.active::before{background:#6d8954!important} body.nextcrm-modern .customer-sidebar nav svg{color:#52647c!important} body.nextcrm-modern .customer-global-search{background:#f7f9fd!important;border:1px solid #dce5f0!important;box-shadow:none!important;border-radius:9px!important} body.nextcrm-modern .customer-plus{background:#17253b!important;border-radius:9px!important;box-shadow:none!important;color:#fff!important} body.nextcrm-modern .customer-topbar-right>a{color:#52647c!important;font-size:11px!important} body.nextcrm-modern .customer-main{background:#f4f7fb!important} body.nextcrm-modern .customer-sidebar .nav-group summary{color:#52647c!important} @media(prefers-reduced-motion:reduce){body.nextcrm-modern *{scroll-behavior:auto!important}} /* ============================================================ SECTION: next-workspace-components.css ============================================================ */ /* Shared workspace surfaces. Preserve module layouts and semantic state colors. */ body.nextcrm-modern .customer-content{--u-bg:#f4f7fb;--u-border:#dce5f0;--u-border-strong:#c8d4e4;--u-text:#263954;--u-primary:#17253b;--u-primary-hover:#243954;--u-radius:14px;--u-radius-sm:8px;--u-shadow-soft:0 3px 12px #243b2d06;--nx-border:#dce5f0;--nx-primary:#17253b;color:#263954} body.nextcrm-modern .customer-content :is(.panel,.form-panel,.table-panel,.customer-table-card,.sales-card,.client-card,.contacts-card,.staff-panel,.settings-card,.settings-nav-card,.project-card,.report-card,.ticket-card,.items-card,.commerce-card,.file-card,.support-card){border-color:#dce5f0!important;background:#fff!important;border-radius:14px!important;box-shadow:0 3px 12px #243b2d06!important} body.nextcrm-modern .customer-content table{border-color:#dce5f0!important;font-variant-numeric:tabular-nums} body.nextcrm-modern .customer-content table thead :is(th,td){background:#f7f9fd!important;color:#52647c!important;border-color:#dce5f0!important;font-weight:600!important;font-size:12px!important;padding:13px 15px!important;text-transform:none!important;letter-spacing:.01em!important} body.nextcrm-modern .customer-content table tbody td{border-color:#e8eef6!important;padding:15px!important;line-height:1.55;color:#263954} body.nextcrm-modern .customer-content table tbody tr:hover td{background:#f7f9fd!important} body.nextcrm-modern .customer-content table td a:not(.danger):not(.text-danger){color:#17253b!important} body.nextcrm-modern .customer-content :is(.table-toolbar,.customer-table-toolbar,.sales-toolbar,.contacts-toolbar,.staff-toolbar,.items-toolbar,.file-toolbar,.ticket-toolbar){background:#fff!important;border-color:#dce5f0!important;gap:10px} body.nextcrm-modern .customer-content :is(.table-footer,.customer-table-footer,.sales-footer,.crm-table-footer,.lead-pagination,.contract-footer,.subscription-list-footer,.items-footer,.commerce-footer,.announce-footer,.timecard-footer,.leave-footer,.ticket-footer,.file-footer){background:#f7f9fd!important;color:#52647c!important;border-color:#dce5f0!important} body.nextcrm-modern .customer-content :is(.pagination,.crm-table-pages) :is(a,button,span){border-color:#c8d4e4!important;border-radius:7px!important} body.nextcrm-modern .customer-content :is(.pagination,.crm-table-pages) :is(.active,[aria-current="page"]){background:#eef3ff!important;color:#17253b!important} body.nextcrm-modern .customer-content :is(.tabs,.sales-tabs,.settings-tabs,.project-tabs,.customer-tabs,.contract-tabs,.profile-tabs){background:#f7f9fd!important;border-color:#dce5f0!important;padding:8px!important;gap:5px!important;overflow-x:auto} body.nextcrm-modern .customer-content :is(.tabs,.sales-tabs,.settings-tabs,.project-tabs,.customer-tabs,.contract-tabs,.profile-tabs) :is(a,button){color:#52647c!important;border-radius:8px!important;font-weight:600!important;white-space:nowrap;box-shadow:none!important} body.nextcrm-modern .customer-content :is(.tabs,.sales-tabs,.settings-tabs,.project-tabs,.customer-tabs,.contract-tabs,.profile-tabs) :is(.active,.selected,[aria-selected="true"]){background:#fff!important;color:#17253b!important;border-color:#c8d4e4!important;box-shadow:0 1px 4px #34594b0a!important} body.nextcrm-modern .customer-content :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="hidden"]),select,textarea){border-color:#c8d4e4!important;border-radius:8px!important;box-shadow:none!important;color:#17253b;background-color:#fff} body.nextcrm-modern .customer-content :is(input,select,textarea):focus-visible{outline:2px solid #294dbf!important;outline-offset:2px;box-shadow:none!important} body.nextcrm-modern .customer-content :is(input[type="checkbox"],input[type="radio"]){accent-color:#17253b} body.nextcrm-modern .customer-content :is(input,select,textarea):disabled{background:#f4f7fb!important;color:#52647c!important} body.nextcrm-modern .settings-workspace{background:#f4f7fb!important;color:#263954!important} body.nextcrm-modern :is(.settings-panel-heading,.settings-nav-heading){background:transparent!important;box-shadow:none!important;border:0!important} body.nextcrm-modern :is(.settings-panel-heading h2,.settings-nav-heading h1){color:#17253b!important} body.nextcrm-modern :is(.settings-eyebrow,.settings-panel-heading p,.settings-save-state){color:#52647c!important} body.nextcrm-modern .settings-nav-group>summary{color:#263954!important;border-radius:8px!important} body.nextcrm-modern .settings-nav-group[open]>summary,body.nextcrm-modern .settings-nav-group>summary:hover{background:#f7f9fd!important} body.nextcrm-modern :is(.settings-nav-group-icon,.settings-count){background:#eef3ff!important;color:#5f7850!important} body.nextcrm-modern .settings-nav-links a{color:#52647c!important} body.nextcrm-modern .settings-nav-links a.active,body.nextcrm-modern .settings-nav-links a:hover{background:#eef3ff!important;color:#17253b!important} body.nextcrm-modern .settings-card{border-top:1px solid #dce5f0!important} body.nextcrm-modern .settings-panel-heading::before,body.nextcrm-modern .settings-nav-heading::before{display:none!important} body.nextcrm-modern .settings-nav-group .settings-nav-group-icon{background:#eef3ff!important;color:#5f7850!important;box-shadow:none!important} body.nextcrm-modern .customer-content :is(.btn-primary,.customer-new-button,.sales-primary,.items-primary,.subscription-dark,.kb-new-button){background:#17253b!important;border-color:#17253b!important;color:#fff!important;border-radius:8px!important;box-shadow:none!important} body.nextcrm-modern .settings-field{border-color:#e8eef6!important} body.nextcrm-modern :is(.settings-field>label,.settings-add-tag label){color:#263954!important} body.nextcrm-modern .settings-footer{background:#f7f9fd!important;border-color:#dce5f0!important} body.nextcrm-modern .settings-footer button,body.nextcrm-modern .settings-add-tag button{background:#17253b!important;border-color:#17253b!important;color:#fff!important;border-radius:8px!important} @media(max-width:650px){body.nextcrm-modern .customer-content table thead :is(th,td),body.nextcrm-modern .customer-content table tbody td{padding:10px!important}} /* ============================================================ SECTION: workspace-direction.css ============================================================ */ /* NEXT's original workspace direction. Scoped to the dashboard for staged adoption. */ /* Briefings are business data; setup notices are configuration, not health claims. */ .next-command-grid{display:grid;grid-template-columns:1.7fr 1fr;gap:20px;margin:28px 0}.next-commitments{background:#fff;border:1px solid #e0e6dd;border-radius:16px;padding:22px}.next-panel-heading{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:12px}.next-panel-heading h2,.next-relationship-pulse h2{font-size:20px;letter-spacing:-.03em;color:#17253b;margin:7px 0}.next-panel-heading>a{font-size:11px;color:#5b7752;display:flex;gap:7px;align-items:center}.next-panel-heading svg{width:14px}.next-commitment-row{display:grid;grid-template-columns:62px 1fr 16px;align-items:center;gap:14px;padding:13px 0;border-top:1px solid #edf0e9;text-decoration:none;color:#284b3b}.next-commitment-row time{font-size:11px;border-radius:7px;background:#f0f3e9;padding:8px;text-align:center}.next-commitment-row strong{display:block;font-size:12px;font-weight:600}.next-commitment-row small{display:block;font-size:10px;color:#7b8878;margin-top:3px}.next-commitment-row>svg{width:14px}.next-commitment-row:hover strong{text-decoration:underline}.next-relationship-pulse{background:#eef1e6;padding:25px;border-radius:16px;border:1px solid #dee5d6}.next-relationship-pulse p{font-size:12px;line-height:1.65;color:#74816e;margin:10px 0 24px}.next-client-count{display:flex;align-items:center;gap:17px;margin:20px 0}.next-client-count>strong{font-size:46px;letter-spacing:-.05em;color:#17253b;line-height:1}.next-client-count>span{font-size:12px;color:#486142}.next-client-count small{display:block;font-size:10px;color:#7c8a72;margin-top:5px}.next-relationship-pulse>a{display:flex;justify-content:space-between;align-items:center;padding-top:18px;border-top:1px solid #d8e0cf;font-size:12px;color:#32533d;font-weight:600}.next-relationship-pulse>a svg{width:16px}.next-briefing-empty{padding:25px 0;color:#6f8366}.next-briefing-empty svg{width:26px;margin-bottom:12px}.next-briefing-empty strong{display:block;font-size:13px}.next-briefing-empty p{font-size:11px;color:#86907d}.next-system-card dl{padding:5px 18px;margin:0}.next-system-card dl>div{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid #edf0e8;font-size:10px}.next-system-card dt{color:#7b8976}.next-system-card dd{color:#3c5942;margin:0;text-align:right}.next-system-card>p{padding:0 18px 16px;font-size:10px;line-height:1.6;color:#8a9380} body.nextcrm-modern .next-workspace .dash-primary{display:flex;flex-direction:column}body.nextcrm-modern .next-workspace .payment-modern-card{order:-3}body.nextcrm-modern .next-workspace .dash-work-tabs{order:-2}body.nextcrm-modern .next-workspace .dash-overview-card{order:-1} @media(max-width:850px){.next-command-grid{grid-template-columns:1fr}.next-relationship-pulse p{margin-bottom:15px}} body.nextcrm-modern .crm-dashboard.next-workspace{--dash-text:#253e3a;--dash-title:#17253b;--dash-muted:#75837c;--next-paper:#f6f5ef;--next-ink:#183c35;max-width:1600px;margin:auto;font-family:Inter,"Segoe UI",sans-serif;color:var(--next-ink);padding:8px 0 32px} body.nextcrm-modern .crm-dashboard.next-workspace .dash-hero{position:relative;overflow:hidden;min-height:248px;padding:40px!important;border:0!important;border-radius:22px!important;background:#17253b!important;box-shadow:none!important;display:flex;align-items:center;justify-content:space-between;gap:30px} body.nextcrm-modern .crm-dashboard.next-workspace .dash-hero:before{content:"";position:absolute;width:360px;height:360px;right:100px;top:-160px;border:1px solid #ffffff16;border-radius:50%;pointer-events:none} body.nextcrm-modern .crm-dashboard.next-workspace .dash-hero:after{content:"";position:absolute;width:300px;height:300px;right:-110px;bottom:-200px;border:45px solid #c0d8a420;border-radius:50%;pointer-events:none} body.nextcrm-modern .crm-dashboard.next-workspace .dash-heading-copy{position:relative;z-index:1} body.nextcrm-modern .crm-dashboard.next-workspace .dash-eyebrow{color:#c4d7b3!important;font-size:10px!important;letter-spacing:.18em;font-weight:700} body.nextcrm-modern .crm-dashboard.next-workspace .dash-hero h1{color:#fafaf3!important;-webkit-text-fill-color:#fafaf3!important;font-size:clamp(30px,3vw,45px)!important;line-height:1.12!important;letter-spacing:-.045em!important;font-weight:650!important;margin:15px 0!important} body.nextcrm-modern .crm-dashboard.next-workspace .dash-hero p{color:#c3d3cd!important;-webkit-text-fill-color:#c3d3cd!important;max-width:520px;font-size:13px!important;line-height:1.7!important} body.nextcrm-modern .crm-dashboard.next-workspace .dash-heading-actions{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-end;gap:40px} body.nextcrm-modern .crm-dashboard.next-workspace .dash-date{background:transparent!important;border:1px solid #ffffff28!important;color:#d7e1dc!important;padding:9px 14px!important;border-radius:30px!important;font-size:11px!important} .next-hero-link{display:flex;align-items:center;gap:20px;background:#dfedba;color:#17253b!important;border-radius:8px;padding:13px 18px;font-size:12px;font-weight:650;text-decoration:none}.next-hero-link svg{width:17px} .next-attention{margin:24px 0 32px;background:#f6f5ef;border:1px solid #e3e5db;border-radius:16px;padding:22px;display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:18px;align-items:center;scroll-margin-top:90px} .next-section-number{font-size:9px;font-weight:750;letter-spacing:.14em;color:#6c806a}.next-attention h2{font-size:16px;line-height:1.4;margin:7px 0;color:#17253b}.next-attention p{font-size:11px;color:#7c877c;margin:0;line-height:1.6} .next-attention>a{display:grid;grid-template-columns:28px 1fr 16px;gap:10px;padding:12px;border-left:1px solid #dee2d6;color:#17253b;text-decoration:none;border-radius:6px}.next-attention>a:hover{background:#e9ecdf}.next-focus-icon{grid-column:1;grid-row:1;background:#e2e9d7;width:28px;height:28px;display:grid;place-items:center;border-radius:8px}.next-focus-icon svg{width:14px}.next-attention strong{grid-column:2;font-size:26px;line-height:1;font-weight:600}.next-attention>a>span:last-of-type{grid-column:2;font-size:11px;font-weight:650;line-height:1.5}.next-attention small{display:block;font-size:10px;font-weight:400;color:#7b877a}.next-attention>a>svg{width:14px;grid-column:3;grid-row:1;color:#75896b} body.nextcrm-modern .crm-dashboard.next-workspace .dash-section-heading{margin:24px 0 14px!important}body.nextcrm-modern .crm-dashboard.next-workspace .dash-section-heading h2{color:#17253b!important;font-size:20px!important;letter-spacing:-.03em}body.nextcrm-modern .crm-dashboard.next-workspace .dash-section-heading span{color:#77876e!important;font-size:9px!important;letter-spacing:.12em;text-transform:uppercase} body.nextcrm-modern .crm-dashboard.next-workspace .dash-kpis-financial{gap:14px!important}body.nextcrm-modern .crm-dashboard.next-workspace .dash-kpi-finance{border:1px solid #e1e6dc!important;border-radius:14px!important;background:#fff!important;box-shadow:none!important;padding:22px!important}body.nextcrm-modern .crm-dashboard.next-workspace .dash-kpi-finance:before,body.nextcrm-modern .crm-dashboard.next-workspace .dash-kpi-finance:after{display:none!important}body.nextcrm-modern .crm-dashboard.next-workspace .dash-kpi-value strong{font-size:29px!important;letter-spacing:-.04em;color:#17253b!important}body.nextcrm-modern .crm-dashboard.next-workspace .dash-kpi-icon{background:#edf1e6!important;color:#507046!important;border-radius:9px!important}body.nextcrm-modern .crm-dashboard.next-workspace .dash-kpi-context b{background:#f4f5ef!important;color:#7b866f!important}body.nextcrm-modern .crm-dashboard.next-workspace .dash-operation-card{box-shadow:none!important;border:1px solid #e3e7de!important;border-radius:12px!important;background:#f7f9fd!important}body.nextcrm-modern .crm-dashboard.next-workspace .dash-operation-icon{background:#eaf0e4!important;color:#53714c!important} body.nextcrm-modern .crm-dashboard.next-workspace .dash-card{border:1px solid #e0e6dd!important;border-radius:15px!important;box-shadow:0 4px 16px #183c3504!important;background:#fff!important;overflow:hidden}body.nextcrm-modern .crm-dashboard.next-workspace .dash-card-head{padding:18px!important;border-bottom:1px solid #edf0e8!important;background:#fff!important}body.nextcrm-modern .crm-dashboard.next-workspace .dash-card-head h2{color:#233e35!important;font-size:13px!important}body.nextcrm-modern .crm-dashboard.next-workspace .dash-card-head h2 svg{color:#6f8862!important;background:#eff3e8!important}body.nextcrm-modern .crm-dashboard.next-workspace .dash-card-head>a{background:#f0f3e9!important;color:#5b7451!important}body.nextcrm-modern .crm-dashboard.next-workspace .dash-table th{background:#f5f6f0!important;color:#7a8777!important;font-size:10px!important;font-weight:500!important}body.nextcrm-modern .crm-dashboard.next-workspace .dash-table td{padding:13px 12px!important;font-size:11px!important}body.nextcrm-modern .crm-dashboard.next-workspace .dash-table a{color:#263954!important}body.nextcrm-modern .crm-dashboard.next-workspace .dash-tabs{background:#f6f7f1!important;padding:8px!important;gap:4px!important}body.nextcrm-modern .crm-dashboard.next-workspace .dash-tabs button{border-radius:7px!important;color:#72806b!important}body.nextcrm-modern .crm-dashboard.next-workspace .dash-tabs button.active{color:#274b3d!important;background:#fff!important;box-shadow:0 2px 4px #193c3508!important}body.nextcrm-modern .crm-dashboard.next-workspace .todo-row{padding:13px 16px!important}body.nextcrm-modern .crm-dashboard.next-workspace a:focus-visible{outline:2px solid #6a8757;outline-offset:3px} @media(max-width:1250px){.next-attention{grid-template-columns:repeat(3,1fr)}.next-attention-title{grid-column:1/-1}body.nextcrm-modern .crm-dashboard.next-workspace .dash-hero{padding:30px!important}} @media(max-width:700px){body.nextcrm-modern .crm-dashboard.next-workspace .dash-hero{flex-direction:column;align-items:flex-start;min-height:auto;padding:24px!important}body.nextcrm-modern .crm-dashboard.next-workspace .dash-heading-actions{flex-direction:row;align-items:center;flex-wrap:wrap;gap:12px}.next-attention{grid-template-columns:1fr;padding:18px;gap:6px}.next-attention-title{margin-bottom:10px}.next-attention>a{border-left:0;border-top:1px solid #dee2d6;grid-template-columns:28px 40px 1fr 16px;align-items:center}.next-attention>a>span:last-of-type{grid-column:3;grid-row:1}.next-attention>a>svg{grid-column:4}.next-attention strong{font-size:23px}} body.nextcrm-modern .crm-dashboard.next-workspace::before{display:none!important} body.nextcrm-modern:has(.next-workspace) .customer-main{background:#f4f7fb!important} body.nextcrm-modern .crm-dashboard.next-workspace .dash-hero h1,body.nextcrm-modern .crm-dashboard.next-workspace .dash-kpi-value strong{text-shadow:none!important} body.nextcrm-modern .crm-dashboard.next-workspace{animation:none!important} /* ============================================================ SECTION: dashboard-details.css ============================================================ */ /* Complete dashboard component language โ€” data and interactions are unchanged. */ body.nextcrm-modern .crm-dashboard.next-workspace{--component-line:#dce5f0;--component-muted:#52647c;--component-accent:#17253b} body.nextcrm-modern .crm-dashboard.next-workspace .dash-kpi-finance{min-width:0;container-type:inline-size} body.nextcrm-modern .crm-dashboard.next-workspace .dash-kpi-value strong{font-size:clamp(18px,11cqi,29px)!important;overflow-wrap:anywhere} body.nextcrm-modern .crm-dashboard.next-workspace .dash-kpi-context{flex-wrap:wrap!important;gap:6px!important} body.nextcrm-modern .crm-dashboard.next-workspace .dash-kpi-label{white-space:normal!important;overflow:visible!important} body.nextcrm-modern .crm-dashboard.next-workspace .dash-columns{gap:22px!important;grid-template-columns:minmax(0,1.8fr) minmax(310px,1fr)!important} body.nextcrm-modern .crm-dashboard.next-workspace .dash-primary,body.nextcrm-modern .crm-dashboard.next-workspace .dash-secondary{gap:22px!important} body.nextcrm-modern .crm-dashboard.next-workspace .dash-card-head a,body.nextcrm-modern .crm-dashboard.next-workspace .todo-head-links a,body.nextcrm-modern .crm-dashboard.next-workspace .todo-head-links label{border:1px solid #c8d4e4!important;background:#f1f4e9!important;color:#4f6c43!important;border-radius:6px!important;padding:6px 9px!important;font-size:10px!important;font-weight:600!important} body.nextcrm-modern .crm-dashboard.next-workspace .payment-head p{font-size:11px!important;color:#87917e!important;margin-top:6px!important} body.nextcrm-modern .crm-dashboard.next-workspace .payment-metrics{gap:0!important;margin:18px!important;border:1px solid #e2e7db;border-radius:10px;overflow:hidden} body.nextcrm-modern .crm-dashboard.next-workspace .payment-metrics>div{border:0!important;border-right:1px solid #e2e7db!important;border-radius:0!important;background:#f8faf3!important;padding:15px 12px!important} body.nextcrm-modern .crm-dashboard.next-workspace .payment-metrics>div:last-child{border-right:0!important} body.nextcrm-modern .crm-dashboard.next-workspace .payment-metrics strong{color:#17253b!important;font-size:20px!important;letter-spacing:-.03em}body.nextcrm-modern .crm-dashboard.next-workspace .payment-metrics span{letter-spacing:.08em!important} body.nextcrm-modern .crm-dashboard.next-workspace .payment-metrics small{color:#839075!important} body.nextcrm-modern .crm-dashboard.next-workspace .payment-chart-modern{background:repeating-linear-gradient(to top,#edf0e6 0,#edf0e6 1px,transparent 1px,transparent 44px)!important;border:0!important;border-radius:0!important;margin:16px 22px 20px!important;padding:16px 0 0!important;box-shadow:none!important} body.nextcrm-modern .crm-dashboard.next-workspace .payment-bars-modern b.current{background:#42634f!important;border-radius:5px 5px 0 0!important;box-shadow:none!important} body.nextcrm-modern .crm-dashboard.next-workspace .payment-bars-modern b.previous{background:#c4d1b7!important;border-radius:5px 5px 0 0!important}body.nextcrm-modern .crm-dashboard.next-workspace .payment-legend .current{background:#42634f!important}body.nextcrm-modern .crm-dashboard.next-workspace .payment-legend .previous{background:#c4d1b7!important} body.nextcrm-modern .crm-dashboard.next-workspace .payment-day>span{color:#527046!important;font-weight:600!important}body.nextcrm-modern .crm-dashboard.next-workspace .payment-day>small{color:#89957d!important} body.nextcrm-modern .crm-dashboard.next-workspace .overview-columns{padding:22px!important;gap:22px!important}body.nextcrm-modern .crm-dashboard.next-workspace .overview-column h2{font-size:12px!important;color:#17253b!important}body.nextcrm-modern .crm-dashboard.next-workspace .overview-row{border-bottom:1px solid #eef1e9!important;padding:11px 0 16px!important;margin-bottom:7px!important;background:transparent!important}body.nextcrm-modern .crm-dashboard.next-workspace .overview-row span{font-size:11px!important;color:#596d4e!important}body.nextcrm-modern .crm-dashboard.next-workspace .overview-row small{font-size:10px!important;color:#8d9880!important}body.nextcrm-modern .crm-dashboard.next-workspace .overview-row i{background:#829966!important;height:3px!important;border-radius:8px!important}body.nextcrm-modern .crm-dashboard.next-workspace .overview-totals{background:#f7f9fd!important;border-top:1px solid #e5eadf!important;padding:16px!important;gap:12px!important}body.nextcrm-modern .crm-dashboard.next-workspace .overview-totals a{background:white!important;border:1px solid #e1e7d9!important;border-radius:9px!important;padding:12px!important;box-shadow:none!important}body.nextcrm-modern .crm-dashboard.next-workspace .overview-totals span{color:#7c896c!important}body.nextcrm-modern .crm-dashboard.next-workspace .overview-totals strong{color:#17253b!important;font-size:16px!important} body.nextcrm-modern .crm-dashboard.next-workspace .dash-tabs{padding:11px!important;overflow-x:auto;flex-wrap:nowrap!important}body.nextcrm-modern .crm-dashboard.next-workspace .dash-tabs button{padding:9px 10px!important;font-size:10px!important;white-space:nowrap}body.nextcrm-modern .crm-dashboard.next-workspace .dash-tabs button.active{border-bottom:0!important}body.nextcrm-modern .crm-dashboard.next-workspace .dash-badge{background:#edf2e5!important;border:1px solid #d9e2cd!important;color:#567046!important;border-radius:5px!important;font-size:10px!important;padding:4px 7px!important}body.nextcrm-modern .crm-dashboard.next-workspace .dash-table tr:hover td{background:#fbfcf8!important}body.nextcrm-modern .crm-dashboard.next-workspace .data-table-footer{background:#f7f9fd!important;border-top:1px solid #e6eadd!important;padding:13px!important;color:#8c957e!important}body.nextcrm-modern .crm-dashboard.next-workspace .data-table-footer button{border-radius:6px!important;border-color:#dde5d2!important;background:#f1f4e9!important;color:#506d42!important} body.nextcrm-modern .crm-dashboard.next-workspace .calendar-grid{padding:18px!important}body.nextcrm-modern .crm-dashboard.next-workspace .calendar-weekdays{background:#f2f5e9!important;border-radius:8px 8px 0 0!important}body.nextcrm-modern .crm-dashboard.next-workspace .calendar-weekdays span{font-size:10px!important;color:#7c8b69!important;padding:12px 0!important;letter-spacing:.05em}body.nextcrm-modern .crm-dashboard.next-workspace .calendar-day{background:#fff!important;border-color:#e5eadc!important;min-height:105px!important}body.nextcrm-modern .crm-dashboard.next-workspace .calendar-day.muted{background:#f7f9fd!important;opacity:1!important}body.nextcrm-modern .crm-dashboard.next-workspace .calendar-day>span{color:#89967c!important;font-size:10px!important}body.nextcrm-modern .crm-dashboard.next-workspace .calendar-day.today{background:#f3f7e8!important;box-shadow:inset 0 0 0 1px #bccba7!important}body.nextcrm-modern .crm-dashboard.next-workspace .calendar-day.today>span{background:#49673c!important;color:#fff!important;border-radius:5px!important}body.nextcrm-modern .crm-dashboard.next-workspace .calendar-day a{border-radius:4px!important;background:#e8efdc!important;color:#486337!important;font-size:9px!important;border-left:2px solid #8aa16c!important;line-height:1.45!important}body.nextcrm-modern .crm-dashboard.next-workspace .calendar-day .event-invoices{background:#f5eedf!important;color:#926e3b!important;border-color:#c5a467!important}body.nextcrm-modern .crm-dashboard.next-workspace .calendar-day .event-contracts{background:#ebe6e0!important;color:#8e7060!important;border-color:#a98e7a!important}body.nextcrm-modern .crm-dashboard.next-workspace .calendar-day .event-projects{background:#e4ebe6!important;color:#466452!important;border-color:#74917e!important} body.nextcrm-modern .crm-dashboard.next-workspace .todo-group{background:#fff!important}body.nextcrm-modern .crm-dashboard.next-workspace .todo-group h3{background:#f7f9f1!important;color:#6f8460!important;font-size:10px!important;letter-spacing:.05em;padding:12px 18px!important;border-bottom:1px solid #edf0e6}body.nextcrm-modern .crm-dashboard.next-workspace .todo-row{border-bottom:1px solid #edf0e6!important;background:#fff!important;gap:10px!important}body.nextcrm-modern .crm-dashboard.next-workspace .todo-row>a b{color:#49603f!important;font-size:12px!important;font-weight:550!important}body.nextcrm-modern .crm-dashboard.next-workspace .todo-row small{color:#9aa38d!important;font-size:9px!important}body.nextcrm-modern .crm-dashboard.next-workspace .todo-check{width:19px!important;height:19px!important;border:1px solid #cfd9c4!important;border-radius:6px!important}body.nextcrm-modern .crm-dashboard.next-workspace .todo-row.completed .todo-check{background:#527544!important;border-color:#527544!important}body.nextcrm-modern .crm-dashboard.next-workspace .todo-row.completed>a b{color:#8b987e!important}body.nextcrm-modern .crm-dashboard.next-workspace .todo-actions{opacity:1!important}body.nextcrm-modern .crm-dashboard.next-workspace .todo-actions a,body.nextcrm-modern .crm-dashboard.next-workspace .todo-actions button{color:#8ca17b!important}body.nextcrm-modern .crm-dashboard.next-workspace .todo-row:hover{background:#fbfcf7!important} body.nextcrm-modern .crm-dashboard.next-workspace .dash-chart-card{background:#fff!important;min-height:245px!important}body.nextcrm-modern .crm-dashboard.next-workspace .dash-donut-wrap{padding:24px!important;gap:20px!important}body.nextcrm-modern .crm-dashboard.next-workspace .dash-donut{width:126px!important;box-shadow:none!important}body.nextcrm-modern .crm-dashboard.next-workspace .dash-donut:after{inset:17px!important;box-shadow:none!important;background:#fff!important}body.nextcrm-modern .crm-dashboard.next-workspace .dash-donut b{font-size:25px!important;color:#17253b!important;font-weight:600!important}body.nextcrm-modern .crm-dashboard.next-workspace .dash-donut small{font-size:8px!important;color:#91a17d!important;letter-spacing:.12em!important}body.nextcrm-modern .crm-dashboard.next-workspace .dash-chart-legend>span{padding:5px 0!important;border-bottom:1px solid #edf0e8;gap:9px!important}body.nextcrm-modern .crm-dashboard.next-workspace .dash-chart-legend b{font-size:10px!important;color:#687958!important;font-weight:500!important;white-space:normal!important}body.nextcrm-modern .crm-dashboard.next-workspace .dash-chart-legend small{background:#f1f4e9!important;border-radius:5px!important;color:#587246!important}body.nextcrm-modern .crm-dashboard.next-workspace .dash-chart-legend i{border-radius:50%!important} body.nextcrm-modern .crm-dashboard.next-workspace .project-activity{padding:9px 20px!important}body.nextcrm-modern .crm-dashboard.next-workspace .project-activity>a{border-left:1px solid #c8d4e4!important;padding:14px 0 14px 18px!important;margin-left:4px!important;border-bottom:1px solid #e8eef6!important}body.nextcrm-modern .crm-dashboard.next-workspace .project-activity>a:before{background:#809768!important;border:3px solid #f4f7ec!important;box-shadow:none!important}body.nextcrm-modern .crm-dashboard.next-workspace .project-activity b{color:#47603c!important;font-size:11px!important;font-weight:600!important}body.nextcrm-modern .crm-dashboard.next-workspace .project-activity small{color:#9aa68c!important;font-size:8px!important;letter-spacing:.08em}body.nextcrm-modern .crm-dashboard.next-workspace .project-activity span{color:#8b977d!important;font-size:10px!important;line-height:1.6!important} body.nextcrm-modern .crm-dashboard.next-workspace .team-avatar{background:#edf2e2!important;color:#567342!important;border:1px solid #dbe4cd;border-radius:50%!important;font-weight:600!important}body.nextcrm-modern .crm-dashboard.next-workspace .team-overview-list{padding:9px 20px!important}body.nextcrm-modern .crm-dashboard.next-workspace .team-overview-list>a{padding:14px 0!important;border-color:#edf0e6!important}body.nextcrm-modern .crm-dashboard.next-workspace .team-copy b{color:#263954!important;font-size:11px!important}body.nextcrm-modern .crm-dashboard.next-workspace .team-copy small{color:#98a28a!important}body.nextcrm-modern .crm-dashboard.next-workspace .team-copy i{background:#f7f9fd!important;height:3px!important}body.nextcrm-modern .crm-dashboard.next-workspace .team-copy em{background:#839c68!important}body.nextcrm-modern .crm-dashboard.next-workspace .team-overview-list strong{color:#6a8157!important;font-size:10px!important} body.nextcrm-modern .crm-dashboard.next-workspace .goal-row{margin:0 20px!important;padding:16px 0!important;border-bottom:1px solid #edf0e5}body.nextcrm-modern .crm-dashboard.next-workspace .goal-row span{color:#5c734c!important;font-size:11px!important}body.nextcrm-modern .crm-dashboard.next-workspace .goal-row b{color:#45683a!important}body.nextcrm-modern .crm-dashboard.next-workspace .goal-row>i{background:#eef3ff!important;height:5px!important;border-radius:5px!important}body.nextcrm-modern .crm-dashboard.next-workspace .goal-row em{background:#8ba56c!important;border-radius:5px!important}body.nextcrm-modern .crm-dashboard.next-workspace .goal-row small{color:#9aa68c!important;font-size:9px!important}body.nextcrm-modern .crm-dashboard.next-workspace .dash-empty{color:#98a38a!important;font-size:12px!important;background:#fcfdf9!important;padding:25px!important} body.nextcrm-modern .dashboard-todo-modal{background:#152c25a6!important;backdrop-filter:blur(4px)}body.nextcrm-modern .dashboard-todo-modal .todo-modal{border-radius:18px!important;border:1px solid #c8d4e4!important;box-shadow:0 24px 80px #162d2540!important;background:#fff!important}body.nextcrm-modern .dashboard-todo-modal .todo-modal-head{background:#f5f8ee!important;border-bottom:1px solid #e0e7d8!important;padding:22px!important}body.nextcrm-modern .dashboard-todo-modal h2{color:#17253b!important;font-size:18px!important}body.nextcrm-modern .dashboard-todo-modal textarea{border:1px solid #d9e2cd!important;border-radius:9px!important;background:#fbfcf8!important;color:#17253b!important;padding:14px!important}body.nextcrm-modern .dashboard-todo-modal .todo-save{background:#17253b!important;border:0!important;border-radius:8px!important}body.nextcrm-modern .dashboard-todo-modal .todo-secondary{background:#f3f6ec!important;color:#5e7850!important;border:1px solid #dde5d2!important;border-radius:8px!important} body.nextcrm-modern .crm-dashboard.next-workspace .overview-column h2 svg{background:#eef3ff!important;color:#5f7850!important} body.nextcrm-modern .crm-dashboard.next-workspace .overview-totals b{color:#17253b!important} body.nextcrm-modern .crm-dashboard.next-workspace .calendar-weekdays span{background:#f2f5e9!important} body.nextcrm-modern .crm-dashboard.next-workspace .dash-chart-card::before{display:none!important} body.nextcrm-modern .crm-dashboard.next-workspace .team-avatar{box-shadow:none!important} body.nextcrm-modern .crm-dashboard.next-workspace .crm-table-footer{background:#f7f9fd!important;color:#52647c!important;border-color:#dce5f0!important} body.nextcrm-modern .crm-dashboard.next-workspace .crm-table-pages button{background:#f1f4e9!important;color:#506d42!important;border-color:#dde5d2!important} @media(max-width:1050px){body.nextcrm-modern .crm-dashboard.next-workspace .dash-columns{grid-template-columns:1fr!important}body.nextcrm-modern .crm-dashboard.next-workspace .dash-secondary{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))}body.nextcrm-modern .crm-dashboard.next-workspace .dash-donut-wrap{grid-template-columns:1fr!important}body.nextcrm-modern .crm-dashboard.next-workspace .dash-chart-legend{width:100%}} @media(max-width:650px){body.nextcrm-modern .crm-dashboard.next-workspace .dash-secondary{grid-template-columns:1fr}body.nextcrm-modern .crm-dashboard.next-workspace .payment-metrics{grid-template-columns:repeat(2,1fr)!important}body.nextcrm-modern .crm-dashboard.next-workspace .calendar-grid{overflow-x:auto}body.nextcrm-modern .crm-dashboard.next-workspace .calendar-weekdays,body.nextcrm-modern .crm-dashboard.next-workspace .calendar-days{min-width:520px}body.nextcrm-modern .crm-dashboard.next-workspace .overview-columns{grid-template-columns:1fr!important}body.nextcrm-modern .crm-dashboard.next-workspace .overview-totals{grid-template-columns:1fr!important}body.nextcrm-modern .crm-dashboard.next-workspace .dash-table-scroll{overflow-x:auto}body.nextcrm-modern .crm-dashboard.next-workspace .dash-donut-wrap{grid-template-columns:126px 1fr!important}} /* ============================================================ SECTION: next-system-theme.css ============================================================ */ /* System-wide NEXT workspace theme. Layouts and behavior remain module-owned. */ body.nextcrm-modern .customer-content :is(.main-task-primary,.project-primary,.contract-primary){background:#17253b!important;color:#fff!important;border-color:#17253b!important;box-shadow:none!important;border-radius:8px!important} body.nextcrm-modern .customer-content .main-task-heading{background:#f7f9fd!important;border-color:#dce5f0!important;box-shadow:none!important} body.nextcrm-modern .customer-content table thead th:first-child{box-shadow:none!important;border-left-color:#dce5f0!important} body.nextcrm-modern,body.portal-professional{--nx-primary:#17253b;--nx-text:#263954;--nx-border:#dce5f0;--u-primary:#17253b;--u-primary-hover:#243954;--u-bg:#f4f7fb;--u-border:#dce5f0;--u-border-strong:#c8d4e4;--u-text:#263954;background:#f4f7fb!important;color:#263954} body.nextcrm-modern .customer-content :is(h1,h2,h3){color:#17253b} body.nextcrm-modern .customer-content :is(.page-intro,.customer-page-heading,.sales-heading,.expense-page-head,.staff-head,.contacts-head,.contract-head,.items-head,.order-head,.support-head,.announce-head,.leave-head,.timecard-head){background:#f7f9fd!important;border:1px solid #dce5f0!important;box-shadow:none!important;border-radius:14px!important} body.nextcrm-modern .customer-content :is(.page-intro,.customer-page-heading,.sales-heading,.expense-page-head)::before{display:none!important} body.nextcrm-modern .customer-content :is(.subscription-index-card,.subscription-form-card,.expense-list-panel,.expense-form-card,.expense-detail-panel,.kb-table-card,.kb-form-card,.order-card,.process-card,.announce-card,.timecard-card,.leave-card,.messages-card,.module-summary,.profile-card,.report-card,.contract-card,.contracts-card){background:#fff!important;border:1px solid #dce5f0!important;border-radius:14px!important;box-shadow:0 3px 12px #243b2d06!important} body.nextcrm-modern .customer-content :is(.btn-primary,.customer-new-button,.sales-primary,.subscription-dark,.kb-new-button,.items-primary,.expense-primary,.ticket-primary,.staff-primary,.contacts-primary,.order-primary,.file-primary){background:#17253b!important;color:#fff!important;border-color:#17253b!important;box-shadow:none!important;border-radius:8px!important} body.nextcrm-modern .next-ai-shell :is(.ai-history-panel,.ai-chat-card,.ai-inspector-panel>section){background:#fff!important;border:1px solid #dce5f0!important;border-radius:14px!important;box-shadow:none!important} body.nextcrm-modern .next-ai-shell :is(.ai-brand-icon,.ai-agent-avatar,.ai-inspector-head>span){background:#eef3ff!important;color:#5f7850!important;box-shadow:none!important} body.nextcrm-modern .next-ai-shell :is(.ai-new-chat,.ai-setup-provider){background:#17253b!important;border-color:#17253b!important;box-shadow:none!important} body.portal-professional :is(.portal-top,.portal-shell-header){background:#fff!important;border-color:#dce5f0!important;box-shadow:none!important} body.portal-professional :is(section,article,.portal-card){background:#fff!important;border-color:#dce5f0!important;border-radius:14px!important;box-shadow:0 3px 12px #243b2d06!important} body.portal-professional :is(h1,h2,h3){color:#17253b!important} body.portal-professional .portal-primary-nav a{color:#52647c!important;border-radius:8px!important} body.portal-professional .portal-primary-nav a.active{background:#eef3ff!important;color:#17253b!important;border-color:#c8d4e4!important} body.portal-professional :is(input,select,textarea){border-color:#c8d4e4!important;border-radius:8px!important;color:#17253b!important;box-shadow:none!important} body.portal-professional :is(input,select,textarea):focus-visible{outline:2px solid #294dbf!important;outline-offset:2px} body.portal-professional table thead th{background:#f7f9fd!important;color:#52647c!important;border-color:#dce5f0!important} body.portal-professional table tbody td{border-color:#e8eef6!important} body.portal-professional table tbody tr:hover td{background:#f7f9fd!important} /* SECTION: NEXT AI settings (scoped to settings page) */ /* Critical Settings AI styles live with the view so /settings-ai cannot fall back to raw HTML. */ html:has(.nai-settings-shell){overflow-y:auto!important;overflow-x:hidden!important;scroll-behavior:smooth} body.next-ai-shell:has(.nai-settings-shell){height:auto!important;min-height:100vh!important;overflow-y:auto!important;overflow-x:hidden!important} body.next-ai-shell:has(.nai-settings-shell) .next-ai-app-shell{height:auto!important;min-height:calc(100vh - 64px)!important;overflow:visible!important;align-items:stretch!important} body.next-ai-shell:has(.nai-settings-shell) .next-ai-content{height:auto!important;min-height:calc(100vh - 64px)!important;padding:18px 18px 80px!important;overflow:visible!important;background:#f5f7fb!important} body.next-ai-shell:has(.nai-settings-shell) .customer-sidebar{position:sticky!important;top:64px!important;align-self:flex-start!important;max-height:calc(100vh - 64px)!important;overflow-y:auto!important} .nai-settings-shell{--nai-bg:#f5f7fb;--nai-card:#fff;--nai-ink:#17243a;--nai-muted:#748397;--nai-line:#dfe6ef;--nai-primary:#3157df;--nai-success:#16845d;--nai-danger:#b8424d;--nai-shadow:0 8px 24px rgba(22,38,66,.06);width:min(1440px,100%);margin:0 auto;display:flex;flex-direction:column;gap:16px;color:var(--nai-ink);font-family:Inter,"Segoe UI",Arial,sans-serif} .nai-settings-shell,.nai-settings-shell *{box-sizing:border-box}.nai-settings-shell a{text-decoration:none}.nai-settings-shell button,.nai-settings-shell input,.nai-settings-shell select,.nai-settings-shell textarea{font:inherit} .nai-settings-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:22px 24px;border:1px solid var(--nai-line);border-radius:16px;background:linear-gradient(135deg,#fff 0%,#f8faff 54%,#eef4ff 100%);box-shadow:var(--nai-shadow)} .nai-eyebrow{display:inline-flex;align-items:center;gap:7px;color:#536dd3;font-size:10px;font-weight:900;letter-spacing:.11em}.nai-eyebrow svg{width:15px;height:15px}.nai-settings-hero h1{margin:7px 0 6px;color:#17283f;font-size:28px;line-height:1.1;letter-spacing:-.04em}.nai-settings-hero p{max-width:780px;margin:0;color:#718096;font-size:13px;line-height:1.55}.nai-hero-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end} .nai-button{min-height:38px;display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid transparent;border-radius:9px;padding:0 13px;background:#fff;color:#52647c;font-size:12px;font-weight:800;cursor:pointer;transition:.15s ease}.nai-button svg{width:15px;height:15px}.nai-button:hover{transform:translateY(-1px)}.nai-button-primary{background:#1b2a41;color:#fff!important;border-color:#1b2a41}.nai-button-primary:hover{background:#274360}.nai-button-ghost{border-color:#d7e0eb;background:#fff;color:#52647c!important}.nai-button-ghost:hover{background:#f6f9fd;border-color:#bdcbe0}.nai-button-test{background:#eef5ff;color:#245fae!important;border-color:#cfe0f6}.nai-button-danger{background:#fff4f5;color:#ad3e49!important;border-color:#efc9ce} .nai-settings-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.nai-settings-metrics article{min-width:0;display:flex;align-items:center;gap:12px;padding:15px 16px;border:1px solid var(--nai-line);border-radius:13px;background:#fff;box-shadow:0 4px 14px rgba(29,44,70,.04)}.nai-metric-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:11px;flex:none}.nai-metric-icon svg{width:18px;height:18px}.nai-metric-icon.blue{background:#eef3ff;color:#3157df}.nai-metric-icon.green{background:#eaf8f1;color:#21865d}.nai-metric-icon.violet{background:#f1edff;color:#6d55d9}.nai-metric-icon.amber{background:#fff5e7;color:#b67517}.nai-settings-metrics small,.nai-settings-metrics strong,.nai-settings-metrics em{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nai-settings-metrics small{color:#8794a6;font-size:10px;font-weight:850;text-transform:uppercase;letter-spacing:.055em}.nai-settings-metrics strong{margin-top:3px;color:#20314a;font-size:22px;font-style:normal}.nai-settings-metrics strong.textual{font-size:14px}.nai-settings-metrics em{margin-top:2px;color:#8996a6;font-size:10px;font-style:normal} .nai-settings-nav{position:sticky;top:66px;z-index:8;display:flex;align-items:center;gap:5px;padding:7px;border:1px solid var(--nai-line);border-radius:11px;background:rgba(255,255,255,.96);box-shadow:0 5px 18px rgba(22,37,61,.05);backdrop-filter:blur(9px)}.nai-settings-nav a{display:inline-flex;align-items:center;gap:6px;padding:8px 11px;border-radius:7px;color:#596b82;font-size:11px;font-weight:800}.nai-settings-nav a:hover{background:#f1f5fb;color:#245ca7}.nai-settings-nav svg{width:14px;height:14px} .nai-settings-section{scroll-margin-top:112px;padding:18px;border:1px solid var(--nai-line);border-radius:15px;background:#fff;box-shadow:var(--nai-shadow)}.nai-section-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:16px}.nai-section-heading>div:first-child{display:flex;align-items:flex-start;gap:11px}.nai-section-heading>div:first-child>span{width:30px;height:30px;display:grid;place-items:center;flex:none;border-radius:8px;background:#edf3ff;color:#3157df;font-size:10px;font-weight:900}.nai-section-heading h2{margin:0;color:#22344e;font-size:19px;letter-spacing:-.02em}.nai-section-heading p{margin:4px 0 0;color:#7e8b9d;font-size:12px;line-height:1.45}.nai-section-badge{padding:6px 9px;border-radius:99px;background:#eef5ff;color:#3765a8;font-size:10px;font-weight:850;white-space:nowrap} .nai-preset-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.nai-preset-card{min-width:0;display:grid;grid-template-columns:40px minmax(0,1fr) 17px;gap:10px;align-items:center;padding:13px;border:1px solid #dfe6ef;border-radius:11px;background:#fbfcff;text-align:left;color:#3e526c;cursor:pointer;transition:.15s}.nai-preset-card:hover{transform:translateY(-1px);border-color:#bdcde5;background:#f5f8ff;box-shadow:0 6px 16px rgba(38,71,129,.06)}.nai-preset-symbol{width:40px;height:40px;display:grid;place-items:center;border-radius:10px;background:#eef3ff;color:#3157df}.nai-preset-symbol svg{width:17px;height:17px}.nai-preset-card strong,.nai-preset-card small{display:block}.nai-preset-card strong{font-size:12px}.nai-preset-card small{margin-top:3px;color:#8491a3;font-size:10px;line-height:1.35}.nai-preset-arrow{width:14px;height:14px;color:#9aa7b7}.nai-info-note{display:flex;gap:10px;margin-top:12px;padding:11px 13px;border:1px solid #dce8f7;border-radius:9px;background:#f6faff;color:#60748e}.nai-info-note>svg{width:16px;height:16px;flex:none;color:#4370b3}.nai-info-note p{margin:0;font-size:11px;line-height:1.5} .nai-panel{padding:16px;border:1px solid #dfe6ef;border-radius:12px;background:#fbfcfe}.nai-panel-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:15px}.nai-panel-heading>div:first-child{display:flex;align-items:center;gap:10px}.nai-panel-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;background:#eef3ff;color:#3157df}.nai-panel-icon svg{width:16px}.nai-panel h3{margin:0;color:#263950;font-size:14px}.nai-panel p{margin:3px 0 0;color:#8290a2;font-size:11px}.nai-security-pill{display:inline-flex;align-items:center;gap:5px;padding:6px 8px;border-radius:99px;background:#eaf8f1;color:#278760;font-size:10px;font-weight:850}.nai-security-pill svg{width:12px;height:12px} .nai-provider-form,.nai-agent-create-form,.nai-agent-edit-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.nai-form-group{min-width:0}.nai-form-group>label{display:block;margin-bottom:6px;color:#495c75;font-size:11px;font-weight:800}.nai-form-group>label b{color:#c74b57}.nai-form-group input,.nai-form-group select,.nai-form-group textarea{width:100%!important;border:1px solid #d1dbe7!important;border-radius:8px!important;background:#fff!important;color:#2d415b!important;padding:0 11px!important;font:inherit!important;font-size:12px!important;outline:none!important;box-shadow:none!important}.nai-form-group input,.nai-form-group select{height:40px!important}.nai-form-group textarea{min-height:96px!important;padding:10px 11px!important;resize:vertical}.nai-form-group input:focus,.nai-form-group select:focus,.nai-form-group textarea:focus{border-color:#91aae0!important;box-shadow:0 0 0 3px #edf2ff!important}.nai-form-group>small{display:block;margin-top:5px;color:#98a3b1;font-size:10px;line-height:1.35}.nai-span-2{grid-column:1/-1}.nai-input-suffix{display:flex;align-items:center;border:1px solid #d1dbe7;border-radius:8px;background:#fff;overflow:hidden}.nai-input-suffix input{border:0!important;border-radius:0!important}.nai-input-suffix span{padding:0 10px;color:#8c98a8;font-size:11px}.nai-form-checks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.nai-form-checks>label{display:flex;align-items:flex-start;gap:8px;padding:10px;border:1px solid #e0e6ef;border-radius:9px;background:#fff;cursor:pointer}.nai-form-checks input{width:15px!important;height:15px!important;margin:1px 0 0!important;accent-color:#3157df;flex:none}.nai-form-checks strong,.nai-form-checks small{display:block}.nai-form-checks strong{color:#40536c;font-size:11px}.nai-form-checks small{margin-top:2px;color:#929eac;font-size:9px;line-height:1.3}.nai-form-actions{display:flex;justify-content:flex-end;padding-top:2px}.nai-preset-note{min-height:0;color:#60748e;font-size:10px}.nai-preset-note:not(:empty){padding:9px 10px;border:1px solid #dce8f7;border-radius:8px;background:#f6faff} .nai-provider-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}.nai-provider-card{min-width:0;overflow:hidden;border:1px solid #dfe6ef;border-radius:12px;background:#fff}.nai-provider-card.is-default{border-color:#bfd0f3;box-shadow:0 0 0 2px #eef3ff}.nai-provider-card>header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px;border-bottom:1px solid #edf1f5}.nai-provider-identity{display:flex;align-items:center;gap:10px;min-width:0}.nai-provider-logo{width:40px;height:40px;display:grid;place-items:center;flex:none;border-radius:10px;background:#f0f4fb;color:#496a99}.nai-provider-logo svg{width:17px}.nai-provider-name-row{display:flex;align-items:center;gap:7px;min-width:0}.nai-provider-card h3{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#263950;font-size:14px}.nai-provider-card header p{margin:4px 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#8794a5;font-size:10px}.nai-provider-card code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:10px}.nai-tag{display:inline-flex;align-items:center;padding:4px 7px;border-radius:99px;font-size:8px;font-weight:900;text-transform:uppercase;letter-spacing:.04em}.nai-tag.default{background:#e9f1ff;color:#3157df}.nai-tag.custom{background:#f1edff;color:#6a55c8}.nai-provider-health-state{display:flex;align-items:center;gap:8px;flex:none}.nai-status-dot{width:8px;height:8px;border-radius:50%;background:#b8c2cf}.nai-status-dot.online{background:#27a16c;box-shadow:0 0 0 3px #e5f7ef}.nai-status-dot.offline{background:#c8cfd8}.nai-provider-health-state strong,.nai-provider-health-state small{display:block}.nai-provider-health-state strong{font-size:10px}.nai-provider-health-state small{margin-top:2px;color:#929eac;font-size:8px}.nai-provider-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid #edf1f5}.nai-provider-facts>div{padding:10px 11px;border-right:1px solid #edf1f5}.nai-provider-facts>div:last-child{border-right:0}.nai-provider-facts small,.nai-provider-facts strong,.nai-provider-facts em{display:block}.nai-provider-facts small{color:#939eac;font-size:8px;text-transform:uppercase;font-weight:800}.nai-provider-facts strong{margin-top:3px;color:#354a64;font-size:11px}.nai-provider-facts em{margin-top:1px;color:#9ba5b3;font-size:8px;font-style:normal}.text-success{color:#23845e!important}.text-danger{color:#b64651!important}.nai-provider-error{display:flex;gap:8px;margin:10px 10px 0;padding:10px;border:1px solid #f0c8cd;border-radius:8px;background:#fff5f6;color:#9e3d47}.nai-provider-error>svg{width:15px;flex:none}.nai-provider-error strong{display:block;font-size:10px}.nai-provider-error p{max-height:80px;margin:3px 0 0;overflow:auto;font-size:9px;line-height:1.45;white-space:pre-wrap}.nai-provider-details{border-bottom:1px solid #edf1f5}.nai-provider-details>summary{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;color:#53667d;font-size:11px;font-weight:800;cursor:pointer;list-style:none}.nai-provider-details>summary::-webkit-details-marker{display:none}.nai-provider-details>summary>span{display:flex;align-items:center;gap:6px}.nai-provider-details>summary svg{width:14px}.nai-chevron{transition:transform .15s}.nai-provider-details[open]>summary .nai-chevron,.nai-agent-card[open]>summary .nai-chevron{transform:rotate(180deg)}.nai-provider-edit-form{padding:0 14px 14px}.nai-provider-actions{display:flex;align-items:center;gap:8px;padding:11px 14px;background:#fbfcfe}.nai-provider-actions form{margin:0}.nai-empty-state{grid-column:1/-1;padding:38px;text-align:center;border:1px dashed #cfd9e6;border-radius:12px;background:#fbfcfe}.nai-empty-state>span{width:50px;height:50px;display:grid;place-items:center;margin:0 auto 10px;border-radius:14px;background:#eef3ff;color:#5572ad}.nai-empty-state svg{width:21px}.nai-empty-state h3{margin:0;color:#33465f;font-size:15px}.nai-empty-state p{max-width:500px;margin:7px auto 13px;color:#8491a2;font-size:11px} .nai-context-fieldset{min-width:0;margin:0;padding:12px;border:1px solid #dfe6ef;border-radius:10px;background:#fbfcfe}.nai-context-fieldset legend{padding:0 6px;color:#445871;font-size:11px;font-weight:850}.nai-context-fieldset>p{margin:0 0 10px;color:#8895a6;font-size:10px}.nai-context-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.nai-context-grid label{display:flex;align-items:center;gap:7px;min-width:0;padding:8px;border:1px solid #e2e8f0;border-radius:8px;background:#fff;color:#5a6d84;font-size:10px;font-weight:750;cursor:pointer}.nai-context-grid input{width:14px!important;height:14px!important;margin:0!important;accent-color:#3157df;flex:none}.nai-context-grid span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .nai-agent-list{display:flex;flex-direction:column;gap:9px}.nai-agent-card{overflow:hidden;border:1px solid #dfe6ef;border-radius:11px;background:#fff}.nai-agent-card>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 14px;cursor:pointer;list-style:none}.nai-agent-card>summary::-webkit-details-marker{display:none}.nai-agent-summary-main{display:flex;align-items:center;gap:10px;min-width:0}.nai-agent-icon{width:38px;height:38px;display:grid;place-items:center;flex:none;border-radius:10px;background:#eef3ff;color:#3157df}.nai-agent-icon svg{width:16px}.nai-agent-title-row{display:flex;align-items:center;gap:7px}.nai-agent-card h3{margin:0;color:#2b3d56;font-size:13px}.nai-agent-card summary p{margin:4px 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#8794a5;font-size:10px}.nai-agent-summary-side{display:flex;align-items:center;gap:9px;flex:none}.nai-status-pill{padding:5px 8px;border-radius:99px;font-size:8px;font-weight:900;text-transform:uppercase}.nai-status-pill.enabled{background:#eaf8f1;color:#23845e}.nai-status-pill.disabled{background:#f0f2f5;color:#7e8996}.nai-agent-provider{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#7b899b;font-size:10px}.nai-agent-body{padding:14px;border-top:1px solid #edf1f5;background:#fbfcfe}.nai-agent-danger-zone{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:11px;padding:11px;border:1px solid #f0cdd1;border-radius:9px;background:#fff6f7}.nai-agent-danger-zone strong{display:block;color:#9f3e48;font-size:11px}.nai-agent-danger-zone p{margin:2px 0 0;color:#a9747a;font-size:9px} @media(max-width:1180px){.nai-settings-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.nai-preset-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.nai-provider-list{grid-template-columns:1fr}.nai-context-grid{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:760px){body.next-ai-shell:has(.nai-settings-shell) .next-ai-content{padding:10px!important}.nai-settings-hero{align-items:flex-start;flex-direction:column}.nai-hero-actions{width:100%;justify-content:flex-start}.nai-settings-nav{position:static;overflow:auto}.nai-settings-nav a{white-space:nowrap}.nai-settings-section{padding:13px}.nai-preset-grid{grid-template-columns:1fr}.nai-provider-form,.nai-agent-create-form,.nai-agent-edit-form{grid-template-columns:1fr}.nai-span-2{grid-column:auto}.nai-form-checks{grid-template-columns:1fr}.nai-context-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.nai-provider-card>header,.nai-agent-card>summary{align-items:flex-start;flex-direction:column}.nai-provider-health-state,.nai-agent-summary-side{width:100%;justify-content:flex-start}.nai-provider-facts{grid-template-columns:repeat(2,minmax(0,1fr))}.nai-provider-facts>div:nth-child(2){border-right:0}.nai-provider-facts>div:nth-child(-n+2){border-bottom:1px solid #edf1f5}.nai-agent-danger-zone{align-items:flex-start;flex-direction:column}} @media(max-width:480px){.nai-settings-metrics{grid-template-columns:1fr}.nai-context-grid{grid-template-columns:1fr}.nai-hero-actions .nai-button{flex:1}.nai-section-heading{align-items:flex-start}.nai-section-badge{display:none}.nai-settings-hero h1{font-size:23px}} /* ============================================================ SECTION: Shared dashboard action palette All CRM controls use the dashboard colors; layout stays module-owned. ============================================================ */ :root { --crm-action: #17253b; --crm-action-hover: #243954; --crm-action-soft: #eef3ff; --crm-action-line: #c8d4e4; --crm-action-focus: #4165e8; --crm-action-danger: #875348; --crm-action-danger-soft: #f5eae6; } body:is(.nextcrm-modern,.portal-professional,.next-ai-shell) { --nx-primary: var(--crm-action); --nx-primary-strong: var(--crm-action-hover); --nx-primary-soft: var(--crm-action-soft); --pro-primary: var(--crm-action); --pro-primary-soft: var(--crm-action-soft); --u-primary: var(--crm-action); --u-primary-hover: var(--crm-action-hover); --u-link: var(--crm-action); } .nai-settings-shell { --nai-primary: var(--crm-action); } body:is(.nextcrm-modern,.portal-professional,.next-ai-shell) :is(button,input[type="button"],input[type="submit"],a[class*="button"],a[class*="btn"],a[class*="action"]) { color: var(--crm-action) !important; background: #fff !important; border-color: var(--crm-action-line) !important; box-shadow: none !important; } body:is(.nextcrm-modern,.portal-professional,.next-ai-shell) :is(button,input[type="button"],input[type="submit"],a[class*="button"],a[class*="btn"],a[class*="action"]):hover { color: var(--crm-action-hover) !important; background: var(--crm-action-soft) !important; border-color: #c8d4e4 !important; } body:is(.nextcrm-modern,.portal-professional,.next-ai-shell) :is(button[type="submit"],input[type="submit"],.primary,.btn-primary,[class*="-primary"],[class*="-save"],.todo-save,[class*="-new-button"],[class*="-new-btn"],.customer-plus,.subscription-dark,.portal-dark-button,.profile-dark-button,.lead-dark,.ai-new-chat,.ai-send-button,.tm-button:not(.ghost):not(.danger),.mp-btn:not(.secondary)) { color: #fff !important; background: var(--crm-action) !important; border-color: var(--crm-action) !important; } body:is(.nextcrm-modern,.portal-professional,.next-ai-shell) :is(button[type="submit"],input[type="submit"],.primary,.btn-primary,[class*="-primary"],[class*="-save"],.todo-save,[class*="-new-button"],[class*="-new-btn"],.customer-plus,.subscription-dark,.portal-dark-button,.profile-dark-button,.lead-dark,.ai-new-chat,.ai-send-button,.tm-button:not(.ghost):not(.danger),.mp-btn:not(.secondary)):hover { color: #fff !important; background: var(--crm-action-hover) !important; border-color: var(--crm-action-hover) !important; } body:is(.nextcrm-modern,.portal-professional,.next-ai-shell) :is(button,a):is(.danger,.btn-danger,[class*="delete"],[class*="danger"]) { color: var(--crm-action-danger) !important; background: #fff !important; border-color: #dfc6be !important; } body:is(.nextcrm-modern,.portal-professional,.next-ai-shell) :is(button,a):is(.danger,.btn-danger,[class*="delete"],[class*="danger"]):hover { color: #713e34 !important; background: var(--crm-action-danger-soft) !important; border-color: #bd968a !important; } body:is(.nextcrm-modern,.portal-professional,.next-ai-shell) :is(button,a[class*="button"],a[class*="btn"],a[class*="action"]) :is(svg,i) { color: inherit !important; } body:is(.nextcrm-modern,.portal-professional,.next-ai-shell) :is(button,a[class*="button"],a[class*="btn"],input[type="submit"]):focus-visible { outline: 2px solid var(--crm-action-focus) !important; outline-offset: 3px; } body:is(.nextcrm-modern,.portal-professional,.next-ai-shell) :is(button,input[type="submit"]):disabled { opacity: .5 !important; cursor: not-allowed !important; } /* SECTION: Business briefing dashboard โ€” original compact workspace */ .brief-dashboard { max-width:1560px; margin:0 auto; color:#263954; } .brief-dashboard *, .brief-dashboard *::before, .brief-dashboard *::after { box-sizing:border-box; } .brief-dashboard svg { width:16px;height:16px; flex-shrink:0; } .brief-header { display:flex;justify-content:space-between;align-items:center;gap:24px;padding:14px 0 26px; } .brief-kicker { display:block;color:#748477;font-size:10px;font-weight:750;letter-spacing:.13em;text-transform:uppercase; } .brief-header h1 { font-size:clamp(25px,2.4vw,36px);font-weight:650;letter-spacing:-1.25px;line-height:1.2;margin:12px 0 10px; } .brief-header p { margin:0;color:#78847b;font-size:12px; } .brief-header-actions { display:flex;align-items:flex-end;flex-direction:column;gap:12px;flex-shrink:0; } .brief-header-actions time { font-size:11px;color:#748477; } .brief-finance { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid #dce4d8;border-radius:16px;overflow:hidden;background:#fff;margin-bottom:22px; } .brief-finance-cell { padding:23px;display:flex;flex-direction:column;gap:16px;border-right:1px solid #dce5f0;min-width:0; } .brief-finance-cell:last-child { border:0;background:#f7f9fd; } .brief-finance-cell:hover { background:#f5f8ef; } .brief-finance-cell>span { display:flex;align-items:center;gap:8px;font-size:11px;color:#67796a;font-weight:650; } .brief-finance-cell>strong { font-size:clamp(18px,2vw,28px);letter-spacing:-.9px;overflow-wrap:anywhere;font-variant-numeric:tabular-nums;line-height:1.15; } .brief-finance-cell>small { display:flex;justify-content:space-between;gap:5px;font-size:10px;color:#80907e; } .brief-layout { display:grid;grid-template-columns:minmax(0,1.7fr) minmax(290px,1fr);gap:22px;align-items:start; } .brief-card { min-width:0;background:#fff;border:1px solid #dce5f0;border-radius:16px;overflow:hidden;box-shadow:0 4px 16px #29443804; } .brief-card-heading { display:flex;justify-content:space-between;align-items:center;gap:16px;padding:23px 24px 18px; } .brief-card-heading h2 { font-size:18px;letter-spacing:-.4px;margin:7px 0 0;font-weight:650; } .brief-card-heading>a,.brief-card-heading>label { display:inline-flex;align-items:center;gap:5px;color:#55724c;font-size:11px;cursor:pointer;white-space:nowrap; } .brief-cash-summary { display:flex;gap:18px;align-items:center;padding:0 24px 18px; } .brief-cash-summary>strong { font-size:32px;font-weight:600;letter-spacing:-1px;font-variant-numeric:tabular-nums; } .brief-cash-summary>span { font-size:11px;color:#55724c;border-left:1px solid #dce4d6;padding-left:18px; } .brief-cash-summary small { display:block;font-size:10px;color:#83917f;margin-top:5px; } .brief-chart { margin:0 24px;display:flex;gap:20px;justify-content:space-around;border-bottom:1px solid #dce5f0;background:repeating-linear-gradient(to top,transparent 0,transparent 43px,#eef2e9 43px,#eef2e9 44px);padding-top:8px; } .brief-chart-day { flex:1;min-width:0;text-align:center; } .brief-chart-day>div { display:flex;justify-content:center;align-items:flex-end;gap:5px;height:130px; } .brief-bar { display:block;width:22px;max-width:35%;border-radius:5px 5px 0 0;min-height:2px; } .brief-bar.current { background:#17253b; }.brief-bar.previous { background:#d0dcbf; } .brief-chart-day>small { display:block;padding:9px 0;background:#fff;font-size:10px;color:#7f8a79; } .brief-chart-key { display:flex;align-items:center;gap:16px;padding:16px 24px;font-size:10px;color:#778572; } .brief-chart-key>span { display:flex;gap:5px;align-items:center; }.brief-chart-key i{width:7px;height:7px;background:#17253b;border-radius:2px;}.brief-chart-key>span:nth-child(2) i{background:#d0dcbf;}.brief-chart-key>a{margin-left:auto;color:#456a4e;} .brief-attention { border-radius:16px;background:#17253b;padding:25px;color:#fff;align-self:stretch; } .brief-attention .brief-kicker { color:#b6cbaa; }.brief-attention h2 { color:#fff!important;font-size:24px;letter-spacing:-.7px;margin:12px 0; }.brief-attention>p{color:#b8cbbd;font-size:11px;line-height:1.6;margin:0 0 20px;} .brief-attention>a { display:flex;gap:11px;align-items:center;border-top:1px solid #ffffff25;padding:14px 0;color:#f1f5ec; } .brief-attention>a:hover { color:#d5e9be; }.brief-attention>a>span{flex:1;font-size:12px;}.brief-attention>a>strong{font-size:20px;font-variant-numeric:tabular-nums;}.brief-attention>a>svg:last-child{width:13px;} .brief-attention-foot{font-size:10px;color:#b8cbbd;border-top:1px solid #ffffff25;padding-top:18px;line-height:1.6;} .brief-tabs { display:flex;gap:4px;overflow-x:auto;padding:0 20px 12px;border-bottom:1px solid #dce5f0; } body.nextcrm-modern .brief-tabs button { border:0!important;border-radius:6px;padding:9px 10px;background:transparent!important;font-size:10px;white-space:nowrap;color:#7d8b76!important;font-weight:600; } body.nextcrm-modern .brief-tabs button.selected { background:#f7f9fd!important;color:#17253b!important; } .brief-table-scroll { overflow-x:auto; }.brief-table{border-collapse:collapse;width:100%;font-size:11px;} body.nextcrm-modern .brief-table th{font-weight:600;color:#82917c!important;background:#f7f9fd!important;padding:12px 24px!important;white-space:nowrap;border:0!important;} body.nextcrm-modern .brief-table td{padding:15px 24px!important;border-bottom:1px solid #e8eef6!important;color:#263954!important;} .brief-table td:first-child a { font-weight:650; }.brief-status{display:inline-block;font-size:9px;padding:4px 7px;border:1px solid #dfe7d3;border-radius:4px;background:#f3f6ec;color:#607a4f;} .brief-work .data-table-footer { border-top:1px solid #dce5f0;background:#f7f9fd;padding:14px 24px;font-size:10px; }.brief-work [hidden]{display:none!important;} .brief-empty { margin:0;padding:25px 24px;font-size:12px;line-height:1.7;color:#84917e!important; } .brief-feed { display:grid;padding:0 24px; }.brief-feed>a{display:flex;gap:12px;align-items:center;padding:14px 0;border-top:1px solid #dce5f0;}.brief-feed>a>span:nth-child(2){flex:1;}.brief-feed small{display:block;font-size:10px;color:#83917f;margin-top:5px;}.brief-feed b{font-size:12px;} .brief-checklist { padding:0 24px; }.brief-checklist>div{display:flex;gap:12px;align-items:center;padding:16px 0;border-top:1px solid #e8eef6;}.brief-checklist>div>span{flex:1;font-size:12px;line-height:1.5;overflow-wrap:anywhere;}.brief-checklist small{display:block;font-size:10px;color:#8a9784;margin-top:4px;} body.nextcrm-modern .brief-checklist button[type=submit] { display:grid;place-items:center;padding:3px;width:23px;height:23px;min-height:0;border:1px solid #c8d4e4!important;background:#fff!important;color:#9eaf92!important;border-radius:6px; } body.nextcrm-modern .brief-checklist button[type=submit]:hover { background:#17253b!important;color:#fff!important; } .brief-checklist>div>a{color:#8fa080;}.brief-checklist>div>a svg{width:13px;} .brief-card-foot{display:flex;justify-content:space-between;gap:10px;padding:16px 24px;background:#f7f9fd;border-top:1px solid #dce5f0;font-size:10px;color:#86927e;}.brief-card-foot a{display:flex;gap:4px;align-items:center;color:#55724c;} .brief-deadline-list{padding:0 24px;}.brief-deadline-list>a{display:flex;gap:15px;align-items:center;border-top:1px solid #e8eef6;padding:15px 0;}.brief-deadline-list time{width:42px;flex-shrink:0;text-align:center;font-size:9px;color:#81916f;text-transform:uppercase;}.brief-deadline-list time strong{display:block;font-size:22px;color:#17253b;font-weight:600;}.brief-deadline-list>a>span{flex:1;min-width:0;}.brief-deadline-list>a>span strong{display:block;font-size:12px;font-weight:650;}.brief-deadline-list small{display:block;font-size:10px;color:#8b9883;margin-top:5px;} .brief-contracts{margin:0 24px 20px;border-top:1px solid #dce5f0;padding-top:16px;}.brief-contracts h3{font-size:11px;margin:0 0 9px;}.brief-contracts a{display:flex;justify-content:space-between;gap:15px;padding:7px 0;font-size:11px;color:#83917f;}.brief-contracts time{white-space:nowrap;} .brief-team-list{padding:0 24px 8px;}.brief-team-list>a{display:flex;gap:12px;align-items:center;border-top:1px solid #e8eef6;padding:14px 0;}.brief-avatar{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:#f7f9fd;color:#6f8858;font-size:12px;flex-shrink:0;}.brief-team-list>a>span:nth-child(2){flex:1;min-width:0;}.brief-team-list strong{display:block;font-size:12px;}.brief-team-list small{display:block;font-size:10px;color:#89957e;margin-top:5px;font-weight:400;}.brief-team-list b{font-size:18px;text-align:right;font-weight:600;} .brief-pipeline{grid-column:1/-1;}.brief-pipeline-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:0 24px 24px;gap:28px;}.brief-pipeline-grid>div{border-right:1px solid #dce5f0;padding-right:28px;}.brief-pipeline-grid>div:last-child{border:0;padding-right:0;}.brief-pipeline-grid>div>a{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;}.brief-pipeline-grid h3{font-size:13px;margin:0;}.brief-pipeline-grid>div>a>strong{font-size:24px;font-weight:600;}.brief-distribution{display:grid;grid-template-columns:1fr auto;gap:6px;font-size:10px;margin-top:12px;}.brief-distribution>span{color:#85917b;}.brief-distribution meter{grid-column:1/-1;width:100%;height:6px;border:0;background:#edf2e5;border-radius:4px;}.brief-distribution meter::-webkit-meter-bar{background:#edf2e5;border:0;border-radius:4px;}.brief-distribution meter::-webkit-meter-optimum-value{background:#4165e8;border-radius:4px;}.brief-distribution meter::-moz-meter-bar{background:#4165e8;} .brief-footer{display:flex;justify-content:space-between;gap:20px;padding:24px 2px;font-size:10px;color:#8a9581;}.brief-footer>span,.brief-footer>a{display:flex;gap:6px;align-items:center;} @media(max-width:1100px){.brief-finance-cell{padding:18px;}.brief-layout{grid-template-columns:minmax(0,1.4fr) minmax(280px,1fr);}.brief-header{align-items:flex-start;}.brief-header h1{font-size:27px;}.brief-card-heading{padding:20px;}.brief-chart-key{flex-wrap:wrap;}} @media(max-width:850px){.brief-finance{grid-template-columns:repeat(2,minmax(0,1fr));}.brief-finance-cell:nth-child(2){border-right:0;}.brief-finance-cell:nth-child(-n+2){border-bottom:1px solid #dce5f0;}.brief-layout{grid-template-columns:1fr;}.brief-header{flex-direction:column;gap:16px;}.brief-header-actions{flex-direction:row;align-items:center;justify-content:space-between;width:100%;}.brief-pipeline{grid-column:auto;}} @media(max-width:500px){.brief-finance-cell{padding:15px;gap:12px;}.brief-finance-cell>span{font-size:10px;}.brief-finance-cell>strong{font-size:20px;}.brief-finance-cell>small{font-size:9px;}.brief-card-heading{padding:18px;gap:10px;}.brief-card-heading h2{font-size:16px;}.brief-card-heading>a{font-size:10px;}.brief-cash-summary>strong{font-size:27px;}.brief-chart{gap:10px;}.brief-pipeline-grid{grid-template-columns:1fr;gap:22px;}.brief-pipeline-grid>div{border-right:0;border-bottom:1px solid #dce5f0;padding:0 0 20px;}.brief-footer{flex-direction:column;gap:12px;}.brief-header-actions time{font-size:10px;}.brief-table th,.brief-table td{padding:12px!important;}.brief-finance-cell small svg{display:none;}} /* SECTION: Accessible text contrast Layered important rules take precedence over legacy module text colors. Light surfaces use black text; explicitly dark surfaces use white text. */ @layer crm-invoice-controls, crm-neutral-actions, crm-text-contrast; @layer crm-invoice-controls { /* Shared form controls: compact checks and readable action bars across CRM modules. */ body.crm-briefing .customer-content :is([class$="form-actions"],[class$="form-footer"],[class$="savebar"]){background:#fff!important;background-image:none!important;color:#111!important;border-top-color:#dce5f0!important} body.crm-briefing .customer-content :is([class$="form-actions"],[class$="form-footer"],[class$="savebar"])>a{background:#fff!important;color:#111!important;border-color:#c8d4e4!important} body.crm-briefing .customer-content :is([class$="form-actions"],[class$="form-footer"],[class$="savebar"])>button[type=submit]{background:#17253b!important;color:#fff!important;border-color:#17253b!important} body.crm-briefing :is(.customer-content,.next-ai-content,.portal-main) input:is([type=checkbox],[type=radio]){width:16px!important;height:16px!important;min-width:16px!important;min-height:16px!important;max-width:16px!important;max-height:16px!important;flex:0 0 16px!important;padding:0!important;accent-color:#17253b!important;vertical-align:middle!important} body.crm-briefing :is(.estimate-save-bar,.proposal-footer,.proposal-contact-savebar,.estimate-contact-savebar,.form-actions,.subscription-form-actions,.expense-form-actions,.settings-footer,.payment-form-footer){background:#fff!important;background-image:none!important;color:#111!important;border-top:1px solid #dce5f0!important;box-shadow:0 -2px 8px #00000005!important} body.crm-briefing :is(.estimate-save-bar,.proposal-footer,.proposal-contact-savebar,.estimate-contact-savebar,.form-actions,.subscription-form-actions,.expense-form-actions,.settings-footer,.payment-form-footer)>a{background:#fff!important;color:#111!important;border:1px solid #c8d4e4!important;padding:10px 14px!important;border-radius:8px!important;text-decoration:none!important} body.crm-briefing :is(.estimate-save-bar,.proposal-footer,.proposal-contact-savebar,.estimate-contact-savebar,.form-actions,.subscription-form-actions,.expense-form-actions,.settings-footer,.payment-form-footer)>button[type=submit]{background:#17253b!important;color:#fff!important;border:1px solid #17253b!important;border-radius:8px!important;padding:10px 14px!important} body.crm-briefing :is(.estimate-check,.estimate-optional,.proposal-check,.expense-check-field,.invoice-check){display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:8px!important} body.crm-briefing :is(.estimate-row-add,.proposal-add-item){background:#17253b!important;color:#fff!important;border-color:#17253b!important} body.crm-briefing :is(.estimate-row-remove,.proposal-remove){background:#fff!important;color:#111!important;border:1px solid #c8d4e4!important;border-radius:7px!important;min-width:32px!important;min-height:32px!important} body.crm-briefing .invoice-form-page .invoice-save-footer{background:#fff!important;background-image:none!important;border-top:1px solid #dce5f0!important;color:#111!important;gap:10px!important} body.crm-briefing .invoice-save-footer>a,body.crm-briefing .invoice-save-footer>button.invoice-draft-button[type=submit]{background:#fff!important;color:#111!important;border:1px solid #c8d4e4!important;padding:10px 14px!important;text-decoration:none!important} body.crm-briefing .invoice-save-group{display:flex;align-items:stretch;position:relative} body.crm-briefing .invoice-save-group .invoice-primary-save,body.crm-briefing .invoice-save-options>.invoice-save-toggle{background:#17253b!important;color:#fff!important;border:0!important;padding:10px 14px!important;min-height:38px!important;cursor:pointer} body.crm-briefing .invoice-save-group .invoice-primary-save{border-radius:8px 0 0 8px!important} body.crm-briefing .invoice-save-options>.invoice-save-toggle{border-radius:0 8px 8px 0!important;border-left:1px solid #ffffff55!important;list-style:none} body.crm-briefing .invoice-save-options>.invoice-save-toggle::-webkit-details-marker{display:none} body.crm-briefing .invoice-save-options:not(.is-open)>div{display:none!important} body.crm-briefing .invoice-save-options.is-open>div{display:block!important} body.crm-briefing .invoice-save-options:focus-within>div{display:block!important} body.crm-briefing .invoice-save-options>div{position:absolute;right:0;bottom:calc(100% + 8px);min-width:180px;padding:6px;border:1px solid #c8d4e4;border-radius:10px;background:#fff;box-shadow:0 6px 20px #0002} body.crm-briefing .invoice-save-options>div>button{display:block;width:100%;text-align:left;background:#fff!important;color:#111!important;border:0!important;padding:12px!important;border-radius:6px!important} body.crm-briefing .invoice-save-options>div>button:hover{background:#f7f9fd!important} body.crm-briefing .invoice-form-page :is(.invoice-check,.estimate-optional){display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:8px!important} body.crm-briefing .invoice-form-page :is(.invoice-check,.estimate-optional) input[type=checkbox]{width:16px!important;height:16px!important;min-width:16px!important;min-height:16px!important;flex:0 0 16px!important;margin:0!important;padding:0!important;accent-color:#17253b!important} body.crm-briefing .invoice-form-page .estimate-row-add{background:#17253b!important;color:#fff!important;border:1px solid #17253b!important} body.crm-briefing .invoice-form-page .estimate-row-remove{background:#fff!important;color:#111!important;border:1px solid #c8d4e4!important;width:34px!important;height:34px!important;border-radius:7px!important;margin-top:6px!important} } @layer crm-neutral-actions { /* Important layer priority keeps inline actions out of the primary-button theme. */ body :is([class*="inline-actions"],[class*="hover-actions"]) :is(button,a), body :is(button,a):is([class*="inline-action"],[class*="inline-delete"],[class*="delete-action"],.danger,.btn-danger,[title="Delete"]), body form:has(input[name="_method"][value="DELETE" i]) :is(button,input[type=submit]), body form:is([action$="/timer/start"],[action*="/timer/"]) button, body .task-detail-link, body .client-status, body form[method="GET" i] button[type="submit"], body .invoice-save-footer button.invoice-draft-button { background:transparent!important;background-image:none!important;color:#111!important; box-shadow:none!important;border-color:#c8d4e4!important; } body :is([class*="inline-actions"],[class*="hover-actions"]) :is(button,a) *, body :is(button,a):is([class*="inline-action"],[class*="inline-delete"],[class*="delete-action"],.danger,.btn-danger,[title="Delete"]) *, body form:has(input[name="_method"][value="DELETE" i]) button *, body .client-status *, body form[method="GET" i] button[type="submit"] *, body .invoice-save-footer button.invoice-draft-button * { background:transparent!important;color:#111!important; } } @layer crm-text-contrast { body.crm-briefing { color:#111!important; } body.crm-briefing * { color:#111!important; } body.crm-briefing :is(input,textarea)::placeholder { color:#333!important;opacity:1!important; } body.crm-briefing :is(input,select,textarea):disabled { color:#333!important; } body.crm-briefing :is(.brief-attention,.login-modern-brand,.installer>header,.report-chart-tooltip,.project-gantt-tooltip), body.crm-briefing :is(.brief-attention,.login-modern-brand,.installer>header,.report-chart-tooltip,.project-gantt-tooltip) * { color:#fff!important; } body.crm-briefing :is(button,a,input[type=submit]):is( [type=submit],.primary,.btn-primary,[class*="-primary"],[class*="-save"],.todo-save, [class*="-new-button"],[class*="-new-btn"],.customer-plus,.subscription-dark, .portal-dark-button,.profile-dark-button,.lead-dark,.ai-new-chat,.ai-send-button, .tm-button:not(.ghost):not(.danger),.mp-btn:not(.secondary),.login-submit ) { background:#17253b!important;border-color:#17253b!important;color:#fff!important; } body.crm-briefing :is(button,a):is( [type=submit],.primary,.btn-primary,[class*="-primary"],[class*="-save"],.todo-save, [class*="-new-button"],[class*="-new-btn"],.customer-plus,.subscription-dark, .portal-dark-button,.profile-dark-button,.lead-dark,.ai-new-chat,.ai-send-button, .tm-button:not(.ghost):not(.danger),.mp-btn:not(.secondary),.login-submit ) * { color:#fff!important; } body.crm-briefing :is(button,a,input[type=submit]):is(.danger,.btn-danger,[class*="delete"],[class*="danger"]), body.crm-briefing :is(button,a):is(.danger,.btn-danger,[class*="delete"],[class*="danger"]) * { background:#fff!important;color:#111!important; } body.crm-briefing :is(.customer-sidebar nav a.active,.client-kb-nav a.active,.portal-primary-nav a.active,.report-period a.active,.project-gantt-bar), body.crm-briefing :is(.customer-sidebar nav a.active,.client-kb-nav a.active,.portal-primary-nav a.active,.report-period a.active,.project-gantt-bar) * { color:#fff!important; } body.crm-briefing .brief-checklist button[type=submit], body.crm-briefing .brief-checklist button[type=submit] * { background:#fff!important;color:#111!important; } body.crm-briefing .brief-checklist button[type=submit]:hover, body.crm-briefing .brief-checklist button[type=submit]:hover * { background:#17253b!important;color:#fff!important; } body.crm-briefing .login-modern-brand :is(input,textarea,select) { color:#111!important;background:#fff!important; } body.crm-briefing button:disabled { opacity:.75!important; } body.crm-briefing .ai-message.user, body.crm-briefing .ai-message.user * { background-color:#17253b!important;color:#fff!important; } body.crm-briefing .project-gantt-bar.milestone, body.crm-briefing .project-gantt-bar.milestone * { color:#111!important; } /* Delete actions remain neutral, including submit buttons without a class. */ body.crm-briefing :is(button,a,input[type=submit]):is(.danger,.btn-danger,[class*="delete"],[class*="danger"],[title="Delete"]), body.crm-briefing form:has(input[name="_method"][value="DELETE" i]) :is(button,input[type=submit]) { background:transparent!important;background-image:none!important;color:#111!important; border-color:#c8d4e4!important;box-shadow:none!important; } body.crm-briefing :is(button,a):is(.danger,.btn-danger,[class*="delete"],[class*="danger"],[title="Delete"]) *, body.crm-briefing form:has(input[name="_method"][value="DELETE" i]) button * { background:transparent!important;color:#111!important; } body.crm-briefing :is(button,a,input[type=submit]):is(.danger,.btn-danger,[class*="delete"],[class*="danger"],[title="Delete"]):hover, body.crm-briefing form:has(input[name="_method"][value="DELETE" i]) :is(button,input[type=submit]):hover { background:transparent!important;color:#111!important;border-color:#aeb8aa!important;box-shadow:none!important; } } /* Invoice payment controls must stay readable above the global contrast layer. */ @layer crm-invoice-controls { body.crm-briefing button.invoice-payment-action, body.nextcrm-modern button.invoice-payment-action { display:inline-flex!important; align-items:center!important; justify-content:center!important; min-width:116px!important; min-height:40px!important; padding:0 16px!important; border:1px solid #17253b!important; border-radius:8px!important; background:#17253b!important; background-image:none!important; color:#fff!important; -webkit-text-fill-color:#fff!important; font-weight:700!important; opacity:1!important; box-shadow:none!important; } body.crm-briefing button.invoice-payment-action:hover, body.nextcrm-modern button.invoice-payment-action:hover { border-color:#0f1a2a!important; background:#0f1a2a!important; color:#fff!important; -webkit-text-fill-color:#fff!important; } body.crm-briefing #invoice-payment-dialog footer button:last-child, body.nextcrm-modern #invoice-payment-dialog footer button:last-child { border-color:#17253b!important; background:#17253b!important; background-image:none!important; color:#fff!important; -webkit-text-fill-color:#fff!important; font-weight:700!important; opacity:1!important; } body.crm-briefing #invoice-payment-dialog footer button:last-child:disabled, body.nextcrm-modern #invoice-payment-dialog footer button:last-child:disabled { border-color:#64748b!important; background:#64748b!important; color:#fff!important; -webkit-text-fill-color:#fff!important; opacity:1!important; cursor:not-allowed!important; } body.crm-briefing #invoice-payment-dialog .invoice-payment-email, body.nextcrm-modern #invoice-payment-dialog .invoice-payment-email { display:grid!important; grid-template-columns:16px minmax(0,1fr)!important; align-items:center!important; justify-content:start!important; text-align:left!important; } body.crm-briefing #invoice-payment-dialog .invoice-payment-email span, body.nextcrm-modern #invoice-payment-dialog .invoice-payment-email span { color:#53647a!important; text-align:left!important; -webkit-text-fill-color:#53647a!important; } } /* Credit allocation: readable actions and a compact, left-aligned dialog. */ @layer crm-invoice-controls { body.crm-briefing .credit-note-workspace .credit-apply-action, body.crm-briefing #credit-apply-dialog footer button:last-child { display:inline-flex!important;align-items:center!important;justify-content:center!important; min-height:42px!important;padding:10px 18px!important;border:1px solid #17253b!important; border-radius:8px!important;background:#17253b!important;background-image:none!important; color:#fff!important;-webkit-text-fill-color:#fff!important;font-weight:700!important;opacity:1!important; } body.crm-briefing .credit-note-workspace .credit-apply-action:hover, body.crm-briefing #credit-apply-dialog footer button:last-child:hover {background:#0f1a2a!important;border-color:#0f1a2a!important} body.crm-briefing #credit-apply-dialog footer button:last-child:disabled {background:#64748b!important;border-color:#64748b!important;opacity:1!important;cursor:not-allowed!important} body.crm-briefing #credit-apply-dialog {width:min(620px,calc(100vw - 32px))!important;max-height:calc(100dvh - 40px)!important;padding:0!important;border:1px solid #dce5f0!important;border-radius:16px!important;background:#fff!important;overflow-y:auto!important;overflow-x:hidden!important;text-align:left!important} body.crm-briefing #credit-apply-dialog form {display:flex!important;flex-direction:column!important;gap:0!important;margin:0!important;padding:0!important;min-width:0!important;text-align:left!important} body.crm-briefing #credit-apply-dialog .invoice-dialog-heading {display:flex!important;align-items:center!important;justify-content:space-between!important;gap:16px!important;margin:0!important;padding:24px!important;border-bottom:1px solid #e1e8f0!important;background:#fff!important;text-align:left!important} body.crm-briefing #credit-apply-dialog .invoice-dialog-heading small {display:block!important;margin-bottom:6px!important;color:#52647a!important;font-size:11px!important;font-weight:700!important;letter-spacing:1px!important} body.crm-briefing #credit-apply-dialog h2 {margin:0!important;color:#17253b!important;font-size:22px!important;text-align:left!important} body.crm-briefing #credit-apply-dialog [data-close-invoice-dialog] {color:#17253b!important;-webkit-text-fill-color:#17253b!important;background:#fff!important;border:1px solid #d4deeb!important;border-radius:8px!important;padding:8px 12px!important} body.crm-briefing #credit-apply-dialog form>p {margin:20px 24px 0!important;padding:0!important;line-height:1.7!important;text-align:left!important} body.crm-briefing #credit-apply-dialog form>.invoice-dialog-relation {padding:14px 16px!important;border:1px solid #dce5f0!important;border-radius:9px!important;background:#f5f8fc!important;color:#17253b!important} body.crm-briefing #credit-apply-dialog form>label {display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:8px!important;margin:20px 24px 0!important;padding:0!important;text-align:left!important;font-size:13px!important;font-weight:600!important} body.crm-briefing #credit-apply-dialog :is(input,select) {box-sizing:border-box!important;width:100%!important;min-width:0!important;min-height:44px!important;padding:10px 12px!important;border:1px solid #c8d4e4!important;border-radius:8px!important;background:#fff!important;color:#17253b!important;text-align:left!important} body.crm-briefing #credit-apply-dialog footer {display:flex!important;justify-content:flex-end!important;gap:10px!important;margin:24px 0 0!important;padding:18px 24px!important;border-top:1px solid #e1e8f0!important;background:#f8fafc!important} body.crm-briefing .credit-note-workspace .invoice-more-panel :is(a,button) {background:#fff!important;color:#17253b!important;-webkit-text-fill-color:#17253b!important;text-align:left!important} } /* Project form: isolate the editable document from form label behavior. */ @layer crm-invoice-controls { body.crm-briefing .project-description-field>label {display:block!important;margin:0!important;padding:0!important;font-size:13px!important;font-weight:700!important;text-align:left!important} body.crm-briefing .project-description-field .jodit-container {width:100%!important;min-width:0!important;border:1px solid #c8d4e4!important;border-radius:10px!important;background:#fff!important;overflow:visible!important} body.crm-briefing .project-description-field .jodit-wysiwyg {min-height:220px!important;padding:16px!important;font-size:14px!important;font-weight:400!important;line-height:1.7!important;text-align:left!important;cursor:text!important;overflow-wrap:anywhere!important} body.crm-briefing .project-description-field .jodit-wysiwyg p {margin:0 0 10px!important} body.crm-briefing .project-description-field .jodit-placeholder {font-size:14px!important;font-weight:400!important;color:#64748b!important;pointer-events:none!important} body.crm-briefing .project-form-wrap .project-form-grid {align-items:start!important} body.crm-briefing .project-form-wrap .project-field {min-width:0!important} body.crm-briefing .project-form-wrap .project-form-footer button {background:#17253b!important;color:#fff!important;-webkit-text-fill-color:#fff!important} body.crm-briefing .project-form-wrap .project-check-inline {display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:10px!important;text-align:left!important} }