/* CFS — main.css — Fully Responsive Edition */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --sidebar-w: 200px; --topbar-h: 52px; --c-bg: #f5f5f2; --c-surface: #ffffff; --c-border: rgba(0,0,0,0.1); --c-border-mid: rgba(0,0,0,0.15); --c-text: #1a1a18; --c-text-2: #5a5a56; --c-text-3: #9a9a94; --c-blue: #185FA5; --c-blue-bg: #E6F1FB; --c-green: #1D9E75; --c-green-bg: #EAF3DE; --c-amber: #BA7517; --c-amber-bg: #FAEEDA; --c-red: #A32D2D; --c-red-bg: #FCEBEB; --c-purple: #3C3489; --c-purple-bg: #EEEDFE; --c-orange: #C75B12; --c-orange-bg: #FEF0E5; --r-md: 8px; --r-lg: 12px; font-size: 14px; } /* Dark theme — applied via data-theme="dark" on */ [data-theme="dark"] { --c-bg: #1a1a18; --c-surface: #242422; --c-border: rgba(255,255,255,0.1); --c-border-mid: rgba(255,255,255,0.18); --c-text: #e8e8e2; --c-text-2: #a8a8a2; --c-text-3: #6a6a64; --c-blue-bg: #0c2a4a; --c-green-bg: #0a2e1e; --c-amber-bg: #2e1e04; --c-red-bg: #2e0c0c; --c-purple-bg: #1a1640; --c-orange-bg: #2e1a08; } /* Auto-detect OS preference only if no user choice saved */ @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) { --c-bg: #1a1a18; --c-surface: #242422; --c-border: rgba(255,255,255,0.1); --c-border-mid: rgba(255,255,255,0.18); --c-text: #e8e8e2; --c-text-2: #a8a8a2; --c-text-3: #6a6a64; --c-blue-bg: #0c2a4a; --c-green-bg: #0a2e1e; --c-amber-bg: #2e1e04; --c-red-bg: #2e0c0c; --c-purple-bg: #1a1640; } } /* ---- Dark theme — mobile-specific adjustments ---- */ [data-theme="dark"] .mobile-overlay, html:not([data-theme="light"]) .mobile-overlay { background: rgba(0,0,0,0.7); } [data-theme="dark"] .flash-success, html:not([data-theme="light"]) .flash-success { color: #34d399; } [data-theme="dark"] .flash-error, html:not([data-theme="light"]) .flash-error { color: #f87171; } [data-theme="dark"] .flash-warning, html:not([data-theme="light"]) .flash-warning { color: #fbbf24; } [data-theme="dark"] .kill-banner, html:not([data-theme="light"]) .kill-banner { background: #3e0c0c; border-bottom: 1px solid rgba(248,113,113,0.2); } [data-theme="dark"] .spinner, html:not([data-theme="light"]) .spinner { border-color: rgba(255,255,255,0.15); border-top-color: var(--c-blue); } [data-theme="dark"] #loading-overlay, html:not([data-theme="light"]) #loading-overlay { background: rgba(26,26,24,0.85); } [data-theme="dark"] .data-table tbody tr, html:not([data-theme="light"]) .data-table tbody tr { box-shadow: 0 1px 3px rgba(0,0,0,0.3); } [data-theme="dark"] .mobile-menu-toggle, html:not([data-theme="light"]) .mobile-menu-toggle { box-shadow: 0 2px 8px rgba(0,0,0,0.4); } [data-theme="dark"] .sidebar, html:not([data-theme="light"]) .sidebar { box-shadow: 2px 0 12px rgba(0,0,0,0.5); } [data-theme="dark"] .admin-alert, html:not([data-theme="light"]) .admin-alert { background: #2e0c0c; color: #f87171; border-color: rgba(248,113,113,0.3); } [data-theme="dark"] .search-bar, html:not([data-theme="light"]) .search-bar { border-color: rgba(255,255,255,0.12); } [data-theme="dark"] .filter-chip, html:not([data-theme="light"]) .filter-chip { border-color: rgba(255,255,255,0.12); } @media (max-width: 768px) { [data-theme="dark"] .filter-chip.active, html:not([data-theme="light"]) .filter-chip.active { box-shadow: 0 2px 4px rgba(0,0,0,0.4); } [data-theme="dark"] .data-table tbody tr.expanded td:first-child, html:not([data-theme="light"]) .data-table tbody tr.expanded td:first-child { background: rgba(12,42,74,0.6); } [data-theme="dark"] .template-card.expanded .template-card-header, html:not([data-theme="light"]) .template-card.expanded .template-card-header { background: rgba(12,42,74,0.6); } [data-theme="dark"] .data-table tbody td:first-child, html:not([data-theme="light"]) .data-table tbody td:first-child { background: var(--c-surface); } } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: var(--c-bg); color: var(--c-text); line-height: 1.5; overscroll-behavior: none; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); } /* ---- Layout ---- */ .layout { display: flex; min-height: 100vh; } .main { flex: 1; display: flex; flex-direction: column; min-width: 0; } /* ---- Kill banner ---- */ .kill-banner { background: #A32D2D; color: #fff; padding: 8px 16px; font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .kill-banner-btn { margin-left: auto; background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.4); color: #fff; padding: 4px 12px; border-radius: var(--r-md); cursor: pointer; font-size: 12px; font-family: inherit; } .kill-banner-btn:hover { background: rgba(255,255,255,0.3); } @media (max-width: 768px) { .kill-banner { padding: 10px 12px; font-size: 12px; gap: 6px; } .kill-banner i { font-size: 16px; flex-shrink: 0; } .kill-banner-btn { margin-left: 0; width: 100%; text-align: center; padding: 8px 12px; margin-top: 4px; } } /* ---- Sidebar ---- */ .sidebar { width: var(--sidebar-w); background: var(--c-surface); border-right: 0.5px solid var(--c-border); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; flex-shrink: 0; transition: transform 0.3s ease; } /* Mobile hamburger menu button */ .mobile-menu-toggle { display: none; position: fixed; top: 12px; left: 12px; z-index: 1001; width: 44px; height: 44px; background: var(--c-surface); border: 0.5px solid var(--c-border); border-radius: var(--r-md); cursor: pointer; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } .mobile-menu-toggle i { font-size: 20px; color: var(--c-text); } /* Mobile overlay */ .mobile-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 999; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .mobile-overlay.active { opacity: 1; pointer-events: auto; } /* Responsive sidebar */ @media (max-width: 768px) { .sidebar { position: fixed; top: 0; left: 0; height: 100vh; z-index: 1000; transform: translateX(-100%); box-shadow: 2px 0 8px rgba(0,0,0,0.1); overflow-y: auto; display: flex; flex-direction: column; } .sidebar.active { transform: translateX(0); } .sidebar-footer { margin-top: auto; flex-shrink: 0; border-top: 0.5px solid var(--c-border); background: var(--c-surface); } .nav-item { padding: 12px 10px; min-height: 44px; } .mobile-menu-toggle { display: flex; } .mobile-overlay { display: block; } } .sidebar-logo { padding: 18px 16px 12px; border-bottom: 0.5px solid var(--c-border); display: flex; align-items: center; gap: 8px; } .logo-mark { font-size: 14px; font-weight: 600; letter-spacing: -.3px; } .logo-sub { font-size: 11px; color: var(--c-text-3); margin-top: 2px; } .sidebar-nav { flex: 1; padding: 10px 8px; overflow-y: auto; } .nav-section { font-size: 10px; font-weight: 600; color: var(--c-text-3); padding: 12px 10px 4px; text-transform: uppercase; letter-spacing: .5px; } .nav-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: var(--r-md); color: var(--c-text-2); font-size: 13px; text-decoration: none; margin-bottom: 2px; transition: background .15s, color .15s; } .nav-item:hover { background: var(--c-bg); color: var(--c-text); } .nav-item.active { background: var(--c-bg); color: var(--c-text); font-weight: 500; } .nav-item i { font-size: 16px; opacity: .75; } .sidebar-footer { padding: 12px; border-top: 0.5px solid var(--c-border); margin-top: auto; flex-shrink: 0; } .kill-btn { width: 100%; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--r-md); cursor: pointer; border: 0.5px solid var(--c-border-mid); background: transparent; color: var(--c-text-2); font-size: 12px; font-family: inherit; transition: all .15s; } .kill-btn:hover { border-color: #E24B4A; color: #E24B4A; } .kill-btn.kill-on { background: var(--c-red-bg); border-color: #E24B4A; color: #A32D2D; font-weight: 500; } /* ---- Topbar ---- */ .topbar { background: var(--c-surface); border-bottom: 0.5px solid var(--c-border); padding: 0 20px; height: auto; min-height: var(--topbar-h); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; gap: 12px; } @media (max-width: 768px) { /* Hamburger button is fixed at left:12px — push topbar content right to clear it */ .topbar { padding: 0 12px 0 60px; height: auto; min-height: var(--topbar-h); flex-wrap: wrap; gap: 6px; width: 100%; max-width: 100%; } } @media (max-width: 480px) { .topbar { padding: 0 8px 0 60px; gap: 4px; } } .topbar-left { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; } .topbar-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; flex-wrap: wrap; } /* Hide button labels on mobile — show icon only. Templates wrap text in */ @media (max-width: 768px) { .topbar-right { flex-shrink: 1; min-width: 0; } .topbar-right .btn span { display: inline; } .topbar-right .btn i { margin: 0; } /* Icon-only buttons: square up to 40px */ .topbar-right .btn { padding: 8px 10px; min-width: 40px; justify-content: center; } /* Forms inside topbar-right should not add extra spacing */ .topbar-right form { display: contents; } } .page-title { font-size: 15px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 480px) { .page-title { font-size: 14px; } } .back-link { display: flex; align-items: center; gap: 4px; color: var(--c-text-2); text-decoration: none; font-size: 13px; } .back-link:hover { color: var(--c-text); } /* ---- Buttons ---- */ .btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: var(--r-md); font-size: 13px; cursor: pointer; border: 0.5px solid var(--c-border-mid); background: var(--c-surface); color: var(--c-text); font-family: inherit; text-decoration: none; white-space: nowrap; transition: background .15s, border-color .15s; } .btn:hover { background: var(--c-bg); } .btn-primary { background: var(--c-text); color: var(--c-surface); border-color: var(--c-text); } .btn-primary:hover { opacity: .85; } .btn-secondary { background: var(--c-surface); } .btn-success { background: var(--c-green-bg); color: var(--c-green); border-color: var(--c-green); } .btn-danger { background: var(--c-red-bg); color: var(--c-red); border-color: var(--c-red); } .btn-sm { padding: 4px 10px; font-size: 12px; } .btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--r-md); cursor: pointer; border: 0.5px solid var(--c-border); background: transparent; color: var(--c-text-2); font-size: 15px; transition: background .15s; font-family: inherit; } .btn-icon:hover { background: var(--c-bg); color: var(--c-text); } .btn-danger-icon:hover { background: var(--c-red-bg); color: var(--c-red); border-color: var(--c-red); } /* ---- Flash messages ---- */ .flash-wrap { padding: 12px 20px 0; display: flex; flex-direction: column; gap: 8px; } .flash { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: var(--r-md); font-size: 13px; border: 0.5px solid; } @media (max-width: 768px) { .flash-wrap { padding: 8px 12px 0; gap: 6px; position: relative; z-index: 10; } .flash { font-size: 12px; padding: 10px 12px; border-radius: var(--r-md); line-height: 1.4; word-break: break-word; } .flash i { flex-shrink: 0; font-size: 16px; } } @media (max-width: 480px) { .flash-wrap { padding: 6px 8px 0; gap: 4px; } .flash { font-size: 12px; padding: 8px 10px; gap: 6px; } } .flash-success { background: var(--c-green-bg); color: #0F6E56; border-color: #1D9E75; } .flash-error { background: var(--c-red-bg); color: var(--c-red); border-color: #E24B4A; } .flash-warning { background: var(--c-amber-bg); color: var(--c-amber); border-color: #BA7517; } .flash-info { background: var(--c-blue-bg); color: #185FA5; border-color: #185FA5; } /* ---- Metric cards ---- */ .metrics-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; padding: 20px 20px 0; } @media (max-width: 1024px) { .metrics-grid { grid-template-columns: repeat(2,1fr); } } @media (max-width: 480px) { .metrics-grid { grid-template-columns: repeat(2, 1fr); padding: 16px 12px 0; gap: 8px; } .metric-card { padding: 10px 12px; } .metric-val { font-size: 18px; } } .metric-card { background: var(--c-bg); border-radius: var(--r-md); padding: 14px 16px; } .metric-label { font-size: 12px; color: var(--c-text-2); margin-bottom: 6px; } .metric-val { font-size: 22px; font-weight: 500; } .metric-sub { font-size: 11px; color: var(--c-text-3); margin-top: 4px; } .metric-sub a { color: var(--c-blue); text-decoration: none; } .metric-green { color: var(--c-green); } .metric-red { color: var(--c-red); } .metric-amber { color: var(--c-amber); } .metric-blue { color: var(--c-blue); } /* ---- Cards ---- */ .card { background: var(--c-surface); border: 0.5px solid var(--c-border); border-radius: var(--r-lg); overflow: hidden; margin: 0 20px; max-width: calc(100% - 40px); } @media (max-width: 480px) { .card { margin: 0 12px; border-radius: var(--r-md); max-width: calc(100% - 24px); } } .card-header { padding: 12px 16px; border-bottom: 0.5px solid var(--c-border); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; } .card-title { font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 8px; } .card-title i { color: var(--c-text-2); font-size: 15px; } .card-footer-note { padding: 12px 16px; border-top: 0.5px solid var(--c-border); font-size: 12px; color: var(--c-text-3); display: flex; align-items: flex-start; gap: 6px; } /* ---- Filter bar ---- */ .filter-bar { display: flex; gap: 6px; padding: 14px 20px 10px; flex-wrap: wrap; } @media (max-width: 480px) { .filter-bar { padding: 14px 12px 10px; gap: 8px; } } .filter-chip { padding: 6px 14px; border-radius: 20px; font-size: 13px; cursor: pointer; border: 2px solid var(--c-border); text-decoration: none; color: var(--c-text-2); background: var(--c-surface); transition: all .2s; display: inline-flex; align-items: center; -webkit-tap-highlight-color: rgba(24, 95, 165, 0.2); font-weight: 500; } .filter-chip:hover { border-color: var(--c-blue); color: var(--c-blue); background: var(--c-blue-bg); } .filter-chip:active { transform: scale(0.95); background: var(--c-blue-bg); } .filter-chip.active { background: #185FA5 !important; color: white !important; border-color: #185FA5 !important; font-weight: 600; box-shadow: 0 2px 4px rgba(24, 95, 165, 0.3); } @media (max-width: 768px) { .filter-chip { padding: 10px 14px; font-size: 13px; min-height: 44px; } .filter-bar { gap: 8px; } } /* ---- Data tables ---- */ .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; position: relative; } /* Mobile: Convert tables to collapsible card layout */ @media (max-width: 768px) { .table-wrapper { overflow: visible; } /* Hide table headers on mobile */ .data-table thead { display: none; } /* Make each row a collapsible card */ .data-table tbody tr { display: block; margin-bottom: 8px; background: var(--c-surface); border: 0.5px solid var(--c-border); border-radius: var(--r-md); overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.05); } .data-table tbody tr:hover { background: var(--c-surface); } /* Stack table cells vertically */ .data-table td { display: block; text-align: left; padding: 10px 14px; border: none; } /* Add labels before each cell using data attribute */ .data-table td::before { content: attr(data-label); font-weight: 600; font-size: 10px; color: var(--c-text-3); text-transform: uppercase; letter-spacing: 0.5px; display: block; margin-bottom: 4px; } /* Card header (first cell) - always visible with expand icon — tbody only */ .data-table tbody td:first-child { font-size: 15px; font-weight: 600; padding: 14px; background: var(--c-bg); border-bottom: 0.5px solid var(--c-border); margin-bottom: 0; cursor: pointer; display: flex; align-items: center; justify-content: space-between; position: relative; -webkit-tap-highlight-color: rgba(0,0,0,0.05); } .data-table tbody td:first-child::before { display: none; } /* Add chevron icon to first cell */ .data-table tbody td:first-child::after { content: '▼'; font-size: 14px; font-weight: 600; color: var(--c-blue); transform: rotate(-90deg); transition: transform 0.25s ease, color 0.2s; flex-shrink: 0; margin-left: 8px; display: inline-block; } /* Make chevron more obvious on tap */ .data-table tbody td:first-child:active::after { color: var(--c-blue); transform: rotate(-90deg) scale(1.2); } /* Hide all other cells by default (collapsed state) — tbody only */ .data-table tbody td:not(:first-child) { display: none; border-top: 0.5px solid var(--c-border); padding: 10px 14px; } /* Show cells when card is expanded */ .data-table tbody tr.expanded td:not(:first-child) { display: block; } /* Tfoot: always show all cells, never collapse */ .data-table tfoot td { display: block !important; } /* Rotate chevron when expanded */ .data-table tbody tr.expanded td:first-child::after { transform: rotate(0deg); color: var(--c-blue); } /* Expanded card has different header background */ .data-table tbody tr.expanded td:first-child { background: var(--c-blue-bg); border-bottom-color: var(--c-blue); } /* Table footer on mobile */ .data-table tfoot { display: block; } .data-table tfoot tr { display: block; margin-bottom: 8px; background: var(--c-bg); padding: 12px; border-radius: var(--r-md); } .data-table tfoot td { display: block; padding: 6px 0; border: none; } } /* Scrollbar styling for desktop */ .table-wrapper::-webkit-scrollbar { height: 8px; -webkit-appearance: none; } .table-wrapper::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.05); border-radius: 4px; } .table-wrapper::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.2); border-radius: 4px; } .data-table { width: 100%; border-collapse: collapse; } .data-table th { font-size: 11px; font-weight: 600; color: var(--c-text-3); text-align: left; padding: 10px 14px; border-bottom: 0.5px solid var(--c-border); white-space: nowrap; text-transform: uppercase; letter-spacing: .3px; } .data-table th.sortable { cursor: pointer; user-select: none; transition: color .15s, background .15s; } .data-table th.sortable:hover { color: var(--c-text); background: var(--c-bg); } .data-table th.sortable i { font-size: 12px; margin-left: 4px; opacity: 0.4; transition: opacity .15s; } .data-table th.sortable:hover i { opacity: 0.8; } .data-table th.sortable[data-asc="true"] i, .data-table th.sortable[data-asc="false"] i { opacity: 1; color: var(--c-blue); } .data-table td { padding: 11px 14px; border-bottom: 0.5px solid var(--c-border); font-size: 13px; vertical-align: middle; } @media (max-width: 480px) { .data-table th, .data-table td { padding: 8px 10px; font-size: 12px; } .data-table th { font-size: 10px; } } .data-table tr:last-child td { border-bottom: none; } .data-table tbody tr:hover td { background: var(--c-bg); } .data-table tfoot td { border-top: 0.5px solid var(--c-border); border-bottom: none; font-size: 13px; } .cell-primary { font-weight: 500; } .cell-sub { font-size: 11px; color: var(--c-text-3); margin-top: 2px; } .amount { font-weight: 500; } .mono { font-family: "SF Mono", "Fira Code", monospace; font-size: 12px; } .overdue-days { color: var(--c-red); font-weight: 500; } .text-muted { color: var(--c-text-3); } .row-actions { display: flex; align-items: center; gap: 6px; } /* ---- Badges ---- */ .badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 20px; font-size: 11px; font-weight: 500; white-space: nowrap; } .badge-paid { background: var(--c-green-bg); color: #0F6E56; } .badge-pending { background: var(--c-amber-bg); color: var(--c-amber); } .badge-overdue { background: var(--c-red-bg); color: var(--c-red); } .badge-promised { background: var(--c-amber-bg); color: var(--c-amber); } .badge-disputed { background: var(--c-purple-bg); color: var(--c-purple); } .badge-cancelled { background: var(--c-bg); color: var(--c-text-3); } /* intent badges */ .badge-intent-payment_sent { background: var(--c-green-bg); color: #0F6E56; } .badge-intent-promise_to_pay { background: var(--c-amber-bg); color: var(--c-amber); } .badge-intent-dispute { background: var(--c-purple-bg); color: var(--c-purple); } .badge-intent-unsubscribe { background: var(--c-red-bg); color: var(--c-red); } .badge-intent-out_of_office { background: var(--c-blue-bg); color: var(--c-blue); } .badge-intent-other { background: var(--c-bg); color: var(--c-text-3); border: 0.5px solid var(--c-border); } /* ---- Empty states ---- */ .empty-state { padding: 48px 24px; text-align: center; color: var(--c-text-3); } .empty-state i { font-size: 36px; margin-bottom: 12px; display: block; } .empty-state a { color: var(--c-blue); text-decoration: none; } /* ---- Forms ---- */ .form-page { padding: 20px; } @media (max-width: 480px) { .form-page { padding: 12px; } } .form-card { margin: 0; max-width: 720px; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 20px; } @media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; padding: 16px; gap: 14px; } } .form-group { display: flex; flex-direction: column; gap: 6px; } .form-group-full { grid-column: 1 / -1; } .form-group label { font-size: 12px; font-weight: 500; color: var(--c-text-2); } .required { color: var(--c-red); } .form-group input, .form-group select, .form-group textarea { padding: 8px 10px; border: 0.5px solid var(--c-border-mid); border-radius: var(--r-md); background: var(--c-surface); color: var(--c-text); font-size: 13px; font-family: inherit; transition: border-color .15s; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--c-blue); box-shadow: 0 0 0 2px rgba(24,95,165,.15); } .form-group textarea { resize: vertical; line-height: 1.6; } .form-actions { display: flex; gap: 8px; justify-content: flex-end; padding: 16px 20px; border-top: 0.5px solid var(--c-border); background: var(--c-bg); flex-wrap: wrap; } @media (max-width: 480px) { .form-actions { padding: 12px; } .form-actions .btn { flex: 1; justify-content: center; } } .import-instructions { padding: 16px 20px; border-bottom: 0.5px solid var(--c-border); font-size: 13px; color: var(--c-text-2); line-height: 1.7; } .code-block { font-family: "SF Mono","Fira Code",monospace; font-size: 12px; background: var(--c-bg); padding: 8px 12px; border-radius: var(--r-md); margin: 8px 0; border: 0.5px solid var(--c-border); overflow-x: auto; } /* ---- Section headers ---- */ .section-header { display: flex; align-items: center; gap: 10px; padding: 20px 20px 10px; flex-wrap: wrap; } @media (max-width: 480px) { .section-header { padding: 16px 12px 8px; } } .section-title { font-size: 14px; font-weight: 500; } /* Collapsible section (details/summary) */ .collapsible-section { border: none; } .collapsible-section summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 20px 20px 10px; flex-wrap: wrap; } .collapsible-section summary::-webkit-details-marker { display: none; } .collapsible-section summary::marker { display: none; content: ""; } .collapsible-section summary:hover { opacity: 0.8; } .collapsible-section summary .section-title { position: relative; } .collapsible-section summary .section-title::before { content: '▸'; font-size: 16px; font-weight: 700; color: var(--c-blue); margin-right: 8px; transition: transform .2s; display: inline-block; } .collapsible-section[open] summary .section-title::before { transform: rotate(90deg); } @media (max-width: 480px) { .collapsible-section summary { padding: 16px 12px 8px; } } /* ---- Template cards ---- */ .template-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(280px,1fr)); gap: 12px; padding: 0 20px; } @media (max-width: 640px) { .template-grid { grid-template-columns: 1fr; padding: 0 12px; } } .template-card { margin: 0; padding: 14px 16px; } .template-card-pending { border-color: #BA7517; } .template-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; gap: 8px; } .template-name { font-size: 13px; font-weight: 500; } .template-seq { font-size: 11px; color: var(--c-text-3); margin-top: 2px; } .template-subject { font-size: 12px; color: var(--c-text-2); font-style: italic; margin-bottom: 8px; } .template-preview { font-size: 12px; color: var(--c-text-3); line-height: 1.5; white-space: pre-line; } .template-full-body { font-size: 12px; color: var(--c-text-2); white-space: pre-line; margin-top: 8px; padding: 8px; background: var(--c-bg); border-radius: var(--r-md); line-height: 1.6; } .template-actions { display: flex; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 0.5px solid var(--c-border); flex-wrap: wrap; } /* Collapsible template cards on mobile */ @media (max-width: 768px) { .template-card { overflow: hidden; } .template-card-header { cursor: pointer; user-select: none; position: relative; padding-right: 28px; } /* Add chevron to template header */ .template-card-header::after { content: '›'; position: absolute; right: 0; top: 0; font-size: 20px; color: var(--c-text-3); transform: rotate(0deg); transition: transform 0.2s ease; } /* Hide details by default on mobile */ .template-card .template-subject, .template-card .template-preview, .template-card .template-full-body, .template-card .template-actions { display: none; } /* Show details when expanded */ .template-card.expanded .template-subject, .template-card.expanded .template-preview, .template-card.expanded .template-full-body, .template-card.expanded .template-actions { display: block; } .template-card.expanded .template-actions { display: flex; } /* Rotate chevron when expanded */ .template-card.expanded .template-card-header::after { transform: rotate(90deg); } /* Highlight expanded card */ .template-card.expanded .template-card-header { background: var(--c-blue-bg); margin: -14px -16px 12px; padding: 14px 44px 14px 16px; } } /* ---- Cadence ---- */ .cadence-list { padding: 8px 16px; } .cadence-item { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 0.5px solid var(--c-border); } .cadence-item:last-child { border-bottom: none; } .cadence-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 4px; flex-shrink: 0; } .cadence-dot-ok { background: var(--c-green); } .cadence-dot-warn { background: var(--c-amber); } .cadence-dot-err { background: var(--c-red); } .cadence-info { flex: 1; } .cadence-name { font-size: 13px; font-weight: 500; } .cadence-sub { font-size: 12px; color: var(--c-text-3); margin-top: 2px; } /* ---- Classifier ---- */ .classifier-layout { display: grid; grid-template-columns: 1fr 360px; gap: 16px; padding: 20px; align-items: start; max-width: 100%; } @media (max-width: 1024px) { .classifier-layout { grid-template-columns: 1fr; padding: 16px; } } @media (max-width: 768px) { .classifier-layout { padding: 12px; gap: 12px; } .classifier-layout .card { margin: 0; min-width: 0; overflow: hidden; max-width: 100%; } } .classifier-left { display: flex; flex-direction: column; } .classifier-right {} .ingest-form { padding: 16px; } .mode-toggle-form { display: flex; align-items: center; gap: 8px; font-size: 13px; flex-wrap: wrap; } .mode-label { color: var(--c-text-2); } .status-dots { display: flex; align-items: center; gap: 5px; margin-right: 8px; font-size: 11px; color: var(--c-text-3); } .status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-border-mid); display: inline-block; transition: background .3s; } .status-dot.ok { background: var(--c-green); } .status-dot.err { background: var(--c-red); } .status-dot-label { margin-right: 6px; } .toggle-option { padding: 5px 12px; border-radius: var(--r-md); cursor: pointer; font-size: 12px; border: 0.5px solid var(--c-border); background: var(--c-surface); color: var(--c-text-2); display: flex; align-items: center; gap: 6px; transition: all .15s; } .toggle-option input { display: none; } .toggle-option.active, .toggle-option:has(input:checked) { background: var(--c-text); color: var(--c-surface); border-color: var(--c-text); font-weight: 500; } .reply-feed { max-height: 380px; overflow-y: auto; } .reply-item { padding: 12px 16px; border-bottom: 0.5px solid var(--c-border); cursor: pointer; transition: background .15s; } .reply-item:hover { background: var(--c-bg); } .reply-item:last-child { border-bottom: none; } .reply-item.selected { background: var(--c-blue-bg); } .reply-item.unreviewed { border-left: 3px solid var(--c-blue); } .reply-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3px; } .reply-from { font-size: 12px; font-weight: 500; } .reply-time { font-size: 11px; color: var(--c-text-3); } .reply-subject { font-size: 12px; color: var(--c-text-2); margin-bottom: 6px; } .reply-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .conf-pct { font-size: 11px; color: var(--c-text-3); } .mode-chip { font-size: 10px; color: var(--c-text-3); background: var(--c-bg); padding: 2px 6px; border-radius: 20px; border: 0.5px solid var(--c-border); } .reviewed-chip { font-size: 11px; color: var(--c-green); display: flex; align-items: center; gap: 3px; } .detail-panel { margin: 0; min-height: 300px; } .detail-placeholder { padding: 60px 24px; text-align: center; color: var(--c-text-3); } .detail-placeholder i { font-size: 32px; margin-bottom: 12px; display: block; } .email-detail-body { padding: 14px 16px; border-bottom: 0.5px solid var(--c-border); font-size: 12px; line-height: 1.8; } .email-meta-row { color: var(--c-text-2); } .email-body-text { padding: 14px 16px; font-size: 13px; line-height: 1.7; white-space: pre-wrap; border-bottom: 0.5px solid var(--c-border); max-height: 200px; overflow-y: auto; } .ai-result-box { padding: 12px 16px; background: var(--c-bg); border-bottom: 0.5px solid var(--c-border); } .ai-result-label { font-size: 11px; font-weight: 600; color: var(--c-text-3); text-transform: uppercase; letter-spacing: .3px; margin-bottom: 8px; } .ai-result-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .action-note { margin-top: 8px; font-size: 12px; color: var(--c-text-2); display: flex; align-items: flex-start; gap: 6px; } .review-form { padding: 14px 16px; } .reviewed-note { padding: 14px 16px; font-size: 12px; color: var(--c-green); display: flex; align-items: center; gap: 6px; } .live-preview { margin-top: 12px; padding: 10px 12px; background: var(--c-bg); border-radius: var(--r-md); border: 0.5px solid var(--c-border); } .preview-label { font-size: 11px; font-weight: 500; color: var(--c-text-3); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .3px; } /* ---- Aging grid ---- */ .aging-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; } @media (max-width: 768px) { .aging-grid { grid-template-columns: repeat(2,1fr); } } @media (max-width: 480px) { .aging-grid { grid-template-columns: 1fr; } } .aging-card { border-radius:var(--r-md); padding:12px 16px; background:var(--c-surface); border:1.5px solid; } .aging-current { border-color:#1D9E75; } .aging-30 { border-color:#B8860B; } .aging-60 { border-color:#D4710A; } .aging-90 { border-color:#A32D2D; } .aging-label { font-size:11px; font-weight:600; color:var(--c-text-2); margin-bottom:4px; } .aging-val { font-size:18px; font-weight:500; } .aging-current .aging-val { color:#1D9E75; } .aging-30 .aging-val { color:#B8860B; } .aging-60 .aging-val { color:#D4710A; } .aging-90 .aging-val { color:#A32D2D; } /* ---- Notifications ---- */ .notif-item { padding:14px 16px; border-bottom:0.5px solid var(--c-border); border-left:3px solid transparent; } .notif-item:last-child { border-bottom:none; } .notif-high { border-left-color:#E24B4A; } .notif-medium { border-left-color:#BA7517; } .notif-low { border-left-color:#1D9E75; } .notif-header { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; margin-bottom:8px; flex-wrap: wrap; } .notif-subject { font-size:13px; font-weight:500; line-height:1.4; } .notif-body { font-size:12px; color:var(--c-text-2); line-height:1.6; white-space:pre-line; margin-bottom:10px; } .notif-footer { display:flex; align-items:center; gap:10px; font-size:12px; flex-wrap: wrap; } .notif-action { color:var(--c-blue); font-weight:500; } /* ---- Two column layout ---- */ .two-col-layout { display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:16px 20px 0; } @media(max-width:900px){ .two-col-layout { grid-template-columns:1fr; } } @media(max-width:480px){ .two-col-layout { padding: 16px 12px 0; } } /* ---- field hint ---- */ .field-hint { font-size:11px; color:var(--c-text-3); margin-top:4px; } /* ---- badge intent aliases for client choices ---- */ .badge-intent-paid { background:var(--c-green-bg); color:#0F6E56; } .badge-intent-will_pay { background:var(--c-amber-bg); color:var(--c-amber); } .badge-intent-question { background:var(--c-purple-bg); color:var(--c-purple); } .badge-intent-pause { background:var(--c-blue-bg); color:var(--c-blue); } .badge-intent-not_applicable { background:var(--c-bg); color:var(--c-text-3); border:0.5px solid var(--c-border); } .badge-intent-other { background:var(--c-bg); color:var(--c-text-3); border:0.5px solid var(--c-border); } /* ---- Auth / User pill ---- */ .user-pill { display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:var(--r-md); background:var(--c-bg); margin-bottom:4px; } .user-avatar { width:28px; height:28px; border-radius:50%; background:var(--c-text); color:var(--c-surface); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600; flex-shrink:0; } .user-info { flex:1; min-width:0; } .user-name { font-size:12px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .user-role { font-size:10px; color:var(--c-text-3); text-transform:capitalize; } /* ---- Auth pages ---- */ .auth-page { min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--c-bg); padding:20px; } .auth-card { background:var(--c-surface); border:0.5px solid var(--c-border); border-radius:var(--r-lg); padding:32px; width:100%; max-width:400px; } @media (max-width: 480px) { .auth-card { padding: 24px; } } .auth-logo { font-size:20px; font-weight:600; margin-bottom:4px; } .auth-sub { font-size:13px; color:var(--c-text-2); margin-bottom:28px; } .auth-field { display:flex; flex-direction:column; gap:6px; margin-bottom:16px; } .auth-field label { font-size:12px; font-weight:500; color:var(--c-text-2); } .auth-field input { padding:10px 12px; border:0.5px solid var(--c-border-mid); border-radius:var(--r-md); background:var(--c-surface); color:var(--c-text); font-size:14px; font-family:inherit; min-height:44px; } .auth-field input:focus { outline:none; border-color:var(--c-blue); box-shadow:0 0 0 2px rgba(24,95,165,.15); } .auth-submit { width:100%; padding:10px; border-radius:var(--r-md); background:var(--c-text); color:var(--c-surface); border:none; font-size:14px; font-weight:500; cursor:pointer; font-family:inherit; margin-top:8px; transition:background .15s; } .auth-submit:hover { background:#3a3a38; } .auth-footer { text-align:center; margin-top:16px; font-size:12px; color:var(--c-text-3); } /* ---- iOS input zoom prevention (< 16px triggers auto-zoom on Safari) ---- */ @media (max-width: 768px) { .form-group input, .form-group select, .form-group textarea, .auth-field input, .fg input, .fg select, .fg textarea { font-size: 16px !important; } } /* ---- Mobile touch targets ---- */ @media (max-width: 768px) { .btn { min-height: 44px; padding: 10px 16px; } .btn-sm { min-height: 36px; padding: 6px 12px; } .btn-icon { width: 40px; height: 40px; } /* Ensure form submit buttons are easy to tap */ button[type="submit"] { min-height: 44px; } } /* ---- Aging grid wrapper ---- */ .aging-wrap { padding: 0 20px 16px; } @media (max-width: 480px) { .aging-wrap { padding: 0 12px 16px; } } /* ---- Two-col inner cards (no double margin on mobile) ---- */ .two-col-card { margin: 0 20px; } @media (max-width: 900px) { .two-col-card { margin: 0 12px; } } @media (max-width: 480px) { .two-col-card { margin: 0; border-radius: 0; border-left: none; border-right: none; } } /* ---- Invoice detail: summary 4-col grid ---- */ .inv-summary-wrap { padding: 16px 20px 0; } .inv-summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } @media (max-width: 900px) { .inv-summary-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .inv-summary-wrap { padding: 16px 12px 0; } .inv-summary-grid { grid-template-columns: 1fr; } } /* ---- Invoice detail: active token response-link box ---- */ .active-token-wrap { padding: 12px 20px 0; } .active-token-box { background: var(--c-blue-bg); border: 0.5px solid var(--c-blue); border-radius: var(--r-md); padding: 12px 16px; font-size: 12px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .active-token-box code { font-size: 11px; word-break: break-all; flex: 1; min-width: 0; } @media (max-width: 480px) { .active-token-wrap { padding: 12px 12px 0; } .active-token-box { flex-direction: column; align-items: flex-start; gap: 8px; } .active-token-box .btn { width: 100%; justify-content: center; } } /* ---- Invoice detail: two-column email/response grid ---- */ .invoice-detail-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 16px 20px 0; } @media (max-width: 768px) { .invoice-detail-cols { grid-template-columns: 1fr; padding: 16px 12px 0; } } /* ---- Invoice detail: notification wrapper ---- */ .inv-notif-wrap { padding: 16px 20px 0; } @media (max-width: 480px) { .inv-notif-wrap { padding: 16px 12px 0; } } /* ---- Admin: system status 3-col grid ---- */ .sys-status-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; } @media (max-width: 768px) { .sys-status-grid { grid-template-columns: 1fr; } .sys-status-grid > div { border-right: none !important; border-bottom: 0.5px solid var(--c-border); } .sys-status-grid > div:last-child { border-bottom: none; } } /* ---- Admin: high-notif alert responsive ---- */ .admin-alert { margin: 12px 20px 0; padding: 14px 16px; background: #FCEBEB; border: 0.5px solid #E24B4A; border-radius: 10px; font-size: 13px; color: #A32D2D; } @media (max-width: 480px) { .admin-alert { margin: 12px 12px 0; } } /* ---- Defensive Ops Suite sidebar card ---- */ .suite-crosssell{margin:0 8px 8px;border-radius:var(--r-md); background:#EBF5FB;overflow:hidden; border:0.5px solid #add8e6} .suite-crosssell-header{padding:8px 10px;display:flex;align-items:center; justify-content:space-between;border-bottom:0.5px solid #add8e6} .suite-crosssell-body{padding:10px} .suite-crosssell-product{display:flex;align-items:flex-start;gap:8px; padding:6px 0} /* ---- Version badge ---- */ .version-badge { position: fixed; bottom: 12px; right: 12px; background: var(--c-surface); border: 0.5px solid var(--c-border); border-radius: var(--r-md); padding: 4px 8px; font-size: 9px; color: var(--c-text-3); letter-spacing: 0.3px; text-transform: uppercase; z-index: 100; box-shadow: 0 2px 6px rgba(0,0,0,0.08); opacity: 0.6; transition: opacity 0.2s; } .version-badge:hover { opacity: 1; } @media (max-width: 768px) { .version-badge { bottom: 8px; right: 8px; font-size: 8px; padding: 3px 6px; } } /* ---- Batch delete checkboxes ---- */ .th-checkbox, .td-checkbox { width: 40px; text-align: center; padding: 8px 4px !important; } .th-checkbox input, .td-checkbox input { width: 16px; height: 16px; cursor: pointer; accent-color: var(--c-blue); } .batch-actions { display: flex; align-items: center; gap: 16px; padding: 12px 16px; border-top: 1px solid var(--c-border); background: var(--c-surface); } .batch-actions span { font-size: 13px; color: var(--c-text-2); } .btn-danger { background: var(--c-red); color: #fff; border: none; padding: 8px 16px; border-radius: var(--r-md); cursor: pointer; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; } .btn-danger:hover { opacity: 0.85; } @media (max-width: 640px) { .th-checkbox, .td-checkbox { width: 32px; padding: 6px 2px !important; } .th-checkbox input, .td-checkbox input { width: 14px; height: 14px; } .batch-actions { flex-wrap: wrap; gap: 10px; padding: 10px 12px; } .batch-actions .btn-danger { width: 100%; justify-content: center; } } /* Hide mobile checkbox on desktop */ .mobile-checkbox { display: none !important; } /* Mobile card layout */ @media (max-width: 768px) { /* Hide the standalone checkbox column on mobile */ .invoices-table .th-checkbox, .invoices-table .td-checkbox { display: none !important; } /* Hide desktop checkbox, show mobile checkbox */ .invoices-table .desktop-checkbox { display: none !important; } .invoices-table .mobile-checkbox { display: inline-block !important; } /* Override td:first-child card header to use .card-first instead */ .invoices-table tbody td:first-child { display: none !important; } .invoices-table tbody td.card-first { display: flex !important; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; padding: 14px; background: var(--c-bg); border-bottom: 0.5px solid var(--c-border); cursor: pointer; align-items: center; justify-content: space-between; position: relative; -webkit-tap-highlight-color: rgba(0,0,0,0.05); } .invoices-table tbody td.card-first::before { display: none !important; } .invoices-table tbody td.card-first::after { content: '\25BC'; font-size: 14px; font-weight: 600; color: var(--c-blue); transform: rotate(-90deg); transition: transform 0.25s ease, color 0.2s; flex-shrink: 0; margin-left: 8px; display: inline-block; } .invoices-table tbody tr.expanded td.card-first::after { transform: rotate(0deg); color: var(--c-blue); } .invoices-table tbody tr.expanded td.card-first { background: var(--c-blue-bg); border-bottom-color: var(--c-blue); } /* Hide all non-card-first cells by default (collapsed) */ .invoices-table tbody td:not(.card-first) { display: none !important; border-top: 0.5px solid var(--c-border); padding: 10px 14px; } /* Show cells when card is expanded */ .invoices-table tbody tr.expanded td:not(.card-first) { display: block !important; } /* Hide thead on mobile */ .invoices-table thead { display: none; } } /* Generic card-first — used by any table that needs a custom first column on mobile */ @media (max-width: 768px) { .data-table tbody td.card-first { display: flex !important; font-size: 15px; font-weight: 600; padding: 14px; background: var(--c-bg); border-bottom: 0.5px solid var(--c-border); cursor: pointer; align-items: center; justify-content: space-between; position: relative; -webkit-tap-highlight-color: rgba(0,0,0,0.05); } .data-table tbody td.card-first::before { display: none !important; } .data-table tbody td.card-first::after { content: '\25BC'; font-size: 14px; font-weight: 600; color: var(--c-blue); transform: rotate(-90deg); transition: transform 0.25s ease, color 0.2s; flex-shrink: 0; margin-left: 8px; display: inline-block; } .data-table tbody tr.expanded td.card-first::after { transform: rotate(0deg); color: var(--c-blue); } .data-table tbody tr.expanded td.card-first { background: var(--c-blue-bg); border-bottom-color: var(--c-blue); } } /* Classifier topbar — prevent overflow on mobile */ @media (max-width: 768px) { .topbar-right { flex-wrap: wrap; gap: 6px; width: 100%; } .topbar-right .status-dots { display: none; } .topbar-right .mode-toggle-form { display: flex !important; flex-wrap: wrap; gap: 4px; width: 100%; } .topbar-right .mode-toggle-form .mode-label { display: none; } .topbar-right .mode-toggle-form .toggle-option { flex: 0 0 calc(50% - 4px); padding: 6px 8px; font-size: 11px; border: 0.5px solid var(--c-border-mid); border-radius: var(--r-md); cursor: pointer; white-space: nowrap; text-align: center; } .topbar-right .mode-toggle-form .toggle-option.active { background: var(--c-blue); color: #fff; border-color: var(--c-blue); } } /* Password strength meter */ .password-strength { height: 4px; border-radius: 2px; margin-top: 6px; transition: all 0.2s; } .password-strength.weak { background: #A32D2D; width: 25%; } .password-strength.fair { background: #854F0B; width: 50%; } .password-strength.good { background: #6B8E23; width: 75%; } .password-strength.strong { background: #3B6D11; width: 100%; } /* Flash undo link */ .flash-undo { color: inherit; font-weight: 600; text-decoration: underline; margin-left: 8px; } .flash-undo:hover { opacity: 0.8; } /* Pagination */ .pagination { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 16px; margin-top: 16px; } .pagination-info { font-size: 13px; color: var(--c-text-2); } .pagination .btn.disabled { opacity: 0.5; pointer-events: none; } /* Search bar */ .search-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 10px; margin-bottom: 16px; } .search-input { flex: 1; border: none; outline: none; font-size: 14px; background: transparent; color: var(--c-text); } @media (max-width: 768px) { .search-input { font-size: 16px; } } .search-input::placeholder { color: var(--c-text-3); } /* Loading overlay spinner */ #loading-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.8); display: flex; justify-content: center; align-items: center; z-index: 9999; } .spinner { width: 40px; height: 40px; border: 4px solid #e0e0e0; border-top: 4px solid #185FA5; border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* FAQ, Support, About, Settings page containers */ .faq-page, .support-page, .about-page, .settings-page { max-width: 720px; width: 100%; margin: 0 auto; padding: 20px; box-sizing: border-box; overflow-wrap: break-word; word-wrap: break-word; overflow-x: hidden; } @media (max-width: 480px) { .faq-page, .support-page, .about-page, .settings-page { padding: 12px; } } /* Settings page components (shared across My Account, Help Center, Settings) */ .settings-section { margin-bottom: 20px; } .settings-heading { font-size: 14px; font-weight: 600; color: var(--c-text); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--c-border); } .settings-card { background: var(--c-surface); border: 0.5px solid var(--c-border); border-radius: var(--r-md); overflow: hidden; margin: 0 20px; max-width: calc(100% - 40px); } @media (max-width: 480px) { .settings-card { margin: 0 12px; max-width: calc(100% - 24px); } } .settings-row { display: flex; align-items: center; justify-content: space-between; padding: 16px; gap: 12px; border-bottom: 0.5px solid var(--c-border); flex-wrap: wrap; } .settings-row:last-child { border-bottom: none; } .settings-label { font-size: 13px; font-weight: 500; } .settings-value { font-size: 12px; color: var(--c-text-3); margin-top: 2px; } .settings-link { display: flex; align-items: center; gap: 12px; padding: 14px 16px; text-decoration: none; color: var(--c-text); transition: background .15s; } .settings-link:hover { background: var(--c-bg); } .settings-link i:first-child { font-size: 18px; color: var(--c-text-3); } .toggle-switch { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--c-border-mid); border-radius: 22px; transition: .3s; } .toggle-slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 3px; bottom: 3px; background-color: white; border-radius: 50%; transition: .3s; } input:checked + .toggle-slider { background-color: var(--c-blue); } input:checked + .toggle-slider:before { transform: translateX(18px); } /* Collapsible sections */ .collapsible-row { display: flex; align-items: center; justify-content: space-between; padding: 16px; cursor: pointer; user-select: none; transition: background 0.15s; } .collapsible-row:hover { background: var(--c-bg); } .collapsible-icon { font-size: 18px; color: var(--c-text-3); transition: transform 0.2s ease; flex-shrink: 0; } .collapsible-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .collapsible-content.open { max-height: 800px; } .collapsible-inner { padding: 0 16px 16px 16px; border-top: 0.5px solid var(--c-border); } .collapsible-inner .fg { margin-bottom: 0; } .collapsible-inner .fg label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; } @media (max-width: 480px) { .settings-row { flex-direction: column; align-items: flex-start; } } /* Mobile audit remaining fixes (Batch 21 + mobile) */ /* Row action buttons: 40px → 44px on mobile */ @media (max-width: 768px) { .btn-icon { width: 44px; height: 44px; min-width: 44px; min-height: 44px; } } /* Sticky batch actions bar on mobile */ @media (max-width: 768px) { .batch-actions { position: sticky; bottom: 0; z-index: 50; background: var(--c-surface); border-top: 0.5px solid var(--c-border); padding: 12px; } } /* Pagination text overflow */ .pagination-info { font-size: 12px; color: var(--c-text-3); text-align: center; overflow-wrap: break-word; word-wrap: break-word; } /* User-select none on filter chips and toggle options */ .filter-chip, .toggle-option { -webkit-user-select: none; user-select: none; } /* Reduced motion support */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .sidebar { transition: none; } } /* Safe-area on fixed elements */ .mobile-menu-toggle { top: calc(12px + env(safe-area-inset-top)); } /* Reply-feed max-height responsive */ @media (max-width: 768px) { .reply-feed { max-height: 250px; } } /* Landscape mode adjustments */ @media (orientation: landscape) and (max-height: 500px) { .metrics-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 12px 12px 0; } .metric-card { padding: 8px 10px; } .metric-val { font-size: 16px; } .metric-label, .metric-sub { font-size: 10px; } } /* Accessibility — skip to content */ .skip-to-content { position: absolute; top: -100px; left: 0; background: var(--c-blue); color: #fff; padding: 8px 16px; z-index: 10000; font-size: 14px; text-decoration: none; border-radius: 0 0 var(--r-md) 0; } .skip-to-content:focus { top: 0; } /* Accessibility — focus indicators */ :focus-visible { outline: 2px solid var(--c-blue); outline-offset: 2px; } /* Accessibility — reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }