/* ============================================================================= tawala-ui-w4cust-portal.css — [tawala W4CUST 2026-10-18] client portal + public document pages (Claude Design 006 · D3 public page, D4 portal). Loaded ONLY under tawala_ui_v2 via the app_customers_head hook (tawala_w4cust_helper.php); everything is scoped to html.twp. Dark follows the visitor's device setting; documents (invoice / estimate paper) stay light. 1 tokens 2 base 3 portal shell (top bar, nav, user) 4 content (cards, tables, buttons, pills) 5 public document pages 6 footer 7 phone ============================================================================= */ /* 1. tokens */ html.twp { --twp-accent: #2563EB; --twp-accent-hover: #1D4ED8; --twp-accent-soft: #EFF4FF; --twp-accent-ink: #1E40AF; --twp-ink: #0F172A; --twp-text: #1E293B; --twp-muted: #64748B; --twp-subtle: #94A3B8; --twp-bg: #F6F8FB; --twp-surface: #FFFFFF; --twp-surface-2: #F8FAFC; --twp-border: #E3E8EF; --twp-border-strong: #CBD5E1; --twp-good: #15803D; --twp-good-bg: #E8F6EE; --twp-warn: #B45309; --twp-warn-bg: #FDF3E1; --twp-bad: #B91C1C; --twp-bad-bg: #FDECEC; --twp-info: #0369A1; --twp-info-bg: #E6F3FA; --twp-neutral: #475569; --twp-neutral-bg: #EEF1F5; --twp-shadow: 0 1px 2px rgba(15, 23, 42, .05); --twp-shadow-lg: 0 16px 40px rgba(15, 23, 42, .14), 0 2px 6px rgba(15, 23, 42, .06); --twp-head: "Sora", "Inter", ui-sans-serif, system-ui, sans-serif; color-scheme: light; } @media (prefers-color-scheme: dark) { html.twp { --twp-accent: #2563EB; --twp-accent-hover: #3B82F6; --twp-accent-soft: rgba(59, 130, 246, .16); --twp-accent-ink: #93B4FF; --twp-ink: #F1F5F9; --twp-text: #DCE3EC; --twp-muted: #94A3B8; --twp-subtle: #6B7A90; --twp-bg: #0B1120; --twp-surface: #111A2B; --twp-surface-2: #162136; --twp-border: #22304A; --twp-border-strong: #33445F; --twp-good: #4ADE80; --twp-good-bg: rgba(34, 197, 94, .14); --twp-warn: #FBBF24; --twp-warn-bg: rgba(245, 158, 11, .15); --twp-bad: #F87171; --twp-bad-bg: rgba(239, 68, 68, .15); --twp-info: #38BDF8; --twp-info-bg: rgba(14, 165, 233, .15); --twp-neutral: #CBD5E1; --twp-neutral-bg: rgba(148, 163, 184, .14); --twp-shadow: 0 1px 2px rgba(0, 0, 0, .3); --twp-shadow-lg: 0 16px 40px rgba(0, 0, 0, .5); color-scheme: dark; } } /* paper stays light (design 006: "paper output is always light") */ html.twp .tw-money-page, html.twp .twp-paper { --twp-ink: #0F172A; --twp-text: #1E293B; --twp-muted: #64748B; --twp-surface: #FFFFFF; --twp-surface-2: #F8FAFC; --twp-border: #E3E8EF; --twp-border-strong: #CBD5E1; color-scheme: light; } /* 2. base */ html.twp body.customers { background: var(--twp-bg) !important; color: var(--twp-text); font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-variant-numeric: tabular-nums; } html.twp body.customers a { color: var(--twp-accent); } html.twp body.customers h1, html.twp body.customers h2, html.twp body.customers h3, html.twp body.customers h4 { font-family: var(--twp-head); color: var(--twp-ink); letter-spacing: -.01em; } html.twp :focus-visible { outline: 2px solid #2563EB; outline-offset: 2px; } /* 3. portal shell */ html.twp .twp-shell { min-height: 100vh; display: flex; flex-direction: column; } html.twp .twp-top { position: sticky; top: 0; z-index: 30; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; min-height: 60px; padding: 0 16px; background: var(--twp-surface); border-bottom: 1px solid var(--twp-border); } html.twp .twp-brand { display: flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none !important; } html.twp .twp-logo { width: 34px; height: 34px; flex: none; border-radius: 8px; background: var(--twp-accent-soft); color: var(--twp-accent-ink); display: flex; align-items: center; justify-content: center; font-family: var(--twp-head); font-weight: 600; font-size: 12.5px; overflow: hidden; } html.twp .twp-logo--img { background: transparent; width: auto; max-width: 120px; } html.twp .twp-logo--img img { max-height: 34px; max-width: 120px; width: auto; display: block; } html.twp .twp-brand__txt { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; } html.twp .twp-brand__txt b { font-family: var(--twp-head); font-size: 14.5px; font-weight: 600; color: var(--twp-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; } html.twp .twp-brand__txt span { font-size: 11.5px; color: var(--twp-muted); } html.twp .twp-nav { display: flex; gap: 2px; margin-left: 8px; overflow-x: auto; scrollbar-width: none; } html.twp .twp-nav::-webkit-scrollbar { display: none; } html.twp .twp-nav__a { height: 36px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 8px; font-size: 13.5px; font-weight: 500; color: var(--twp-text) !important; text-decoration: none !important; white-space: nowrap; } html.twp .twp-nav__a:hover { background: var(--twp-surface-2); } html.twp .twp-nav__a.is-on { background: var(--twp-accent-soft); color: var(--twp-accent-ink) !important; font-weight: 600; } html.twp .twp-user { margin-left: auto; display: flex; align-items: center; gap: 10px; } html.twp .twp-user__who { display: flex; flex-direction: column; text-align: right; line-height: 1.2; } html.twp .twp-user__who b { font-size: 13px; font-weight: 600; color: var(--twp-ink); } html.twp .twp-user__who span { font-size: 11.5px; color: var(--twp-muted); } html.twp .twp-user__av { display: block; width: 36px; height: 36px; border-radius: 999px; overflow: hidden; border: 1px solid var(--twp-border); background: var(--twp-surface-2); } html.twp .twp-user__av img { width: 100%; height: 100%; object-fit: cover; display: block; } html.twp .twp-user__menu .dropdown-menu { border-radius: 12px; border: 1px solid var(--twp-border); background: var(--twp-surface); box-shadow: var(--twp-shadow-lg); padding: 6px; min-width: 200px; } html.twp .twp-user__menu .dropdown-menu > li > a { border-radius: 8px; padding: 8px 10px; color: var(--twp-text) !important; } html.twp .twp-user__menu .dropdown-menu > li > a:hover { background: var(--twp-surface-2); } html.twp .twp-user__ann { position: relative; display: inline-flex; color: var(--twp-muted) !important; } html.twp .twp-user__badge { position: absolute; top: -6px; right: -8px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--twp-accent); color: #fff; font-size: 10.5px; font-weight: 600; display: flex; align-items: center; justify-content: center; } html.twp .twp-main { flex: 1; display: flex; flex-direction: column; min-width: 0; } html.twp .twp-content { flex: 1; width: 100%; max-width: 1152px; margin: 0 auto; padding: 20px 16px 40px; } html.twp .twp-content > .container, html.twp .twp-content > div > .container, html.twp #wrapper .container { width: 100%; max-width: 1150px; } html.twp body.customers #wrapper, html.twp body.customers #content { background: transparent; } html.twp .customer-top-submenu { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 12px; padding: 0; list-style: none; } html.twp .customer-top-submenu > li > a { height: 32px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 999px; border: 1px solid var(--twp-border-strong); background: var(--twp-surface); color: var(--twp-text) !important; font-size: 13px; font-weight: 600; text-decoration: none; } /* 4. content */ html.twp body.customers .panel_s, html.twp body.customers .panel_s > .panel-body { background: var(--twp-surface); color: var(--twp-text); } html.twp body.customers .panel_s { border: 1px solid var(--twp-border); border-radius: 12px; box-shadow: var(--twp-shadow); } html.twp body.customers .panel_s > .panel-body { border-radius: 12px; } html.twp body.customers .section-heading, html.twp body.customers .tw-text-neutral-700, html.twp body.customers .tw-text-neutral-800 { color: var(--twp-ink) !important; } html.twp body.customers .tw-text-neutral-500, html.twp body.customers .tw-text-neutral-600, html.twp body.customers .text-muted { color: var(--twp-muted) !important; } html.twp body.customers .table > thead > tr > th { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--twp-muted); background: var(--twp-surface-2); border-bottom: 1px solid var(--twp-border) !important; } html.twp body.customers .table > tbody > tr > td { border-top: 1px solid var(--twp-border); color: var(--twp-text); vertical-align: middle; } html.twp body.customers .table { background: transparent; color: var(--twp-text); } html.twp body.customers .table-bordered, html.twp body.customers .table-bordered > thead > tr > th, html.twp body.customers .table-bordered > tbody > tr > td { border-color: var(--twp-border) !important; } html.twp body.customers .btn { border-radius: 999px; font-weight: 600; } html.twp body.customers .btn-primary, html.twp body.customers .btn-success, html.twp body.customers .btn-info { background: var(--twp-accent) !important; border-color: var(--twp-accent) !important; color: #fff !important; } html.twp body.customers .btn-primary:hover, html.twp body.customers .btn-success:hover, html.twp body.customers .btn-info:hover { background: var(--twp-accent-hover) !important; border-color: var(--twp-accent-hover) !important; } html.twp body.customers .btn-default { background: var(--twp-surface); border: 1px solid var(--twp-border-strong); color: var(--twp-ink); } html.twp body.customers .label, html.twp body.customers .invoice-status-1, html.twp body.customers [class*="invoice-status-"], html.twp body.customers [class*="estimate-status-"], html.twp body.customers [class*="proposal-status-"] { border-radius: 999px; font-weight: 600; } html.twp body.customers .form-control { border-radius: 12px; border-color: var(--twp-border-strong); background: var(--twp-surface); color: var(--twp-ink); } html.twp body.customers .alert { border-radius: 12px; } html.twp body.customers .dataTables_wrapper .dataTables_filter input { border-radius: 999px; } html.twp body.customers .nav-tabs > li > a { border-radius: 0; } @media (prefers-color-scheme: dark) { html.twp body.customers .tw-bg-white, html.twp body.customers .bg-white, html.twp body.customers .modal-content, html.twp body.customers .well { background: var(--twp-surface) !important; color: var(--twp-text); } html.twp body.customers a:not(.btn):not(.twp-nav__a) { color: #7AA7FF; } html.twp body.customers .progress { background: var(--twp-surface-2) !important; } html.twp body.customers .pagination > li > a, html.twp body.customers .pagination > li > span, html.twp body.customers .input-group-addon, html.twp body.customers .input-group-btn > .btn, html.twp body.customers .dataTables_filter .input-group-addon { background: var(--twp-surface) !important; border-color: var(--twp-border-strong) !important; color: var(--twp-text) !important; } html.twp body.customers .pagination > .active > a { background: var(--twp-accent) !important; color: #fff !important; } html.twp body.customers .tw-money-page a:not(.btn) { color: #2563EB; } html.twp body.customers .tw-money-page .tw-card, html.twp body.customers .tw-money-page .panel_s, html.twp body.customers .tw-money-page .panel-body { background: #FFFFFF !important; color: #1E293B; } html.twp body.customers .tw-money-page .table > tbody > tr > td { color: #1E293B; } html.twp body.customers .tw-money-page .table > thead > tr > th { background: #F8FAFC; color: #64748B; } } /* 5. public document pages (invoice / estimate / proposal / contract links) */ html.twp .twp-pbar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--twp-surface); border-bottom: 3px solid var(--twp-accent); } html.twp .twp-pbar__name { flex: 1; min-width: 0; font-family: var(--twp-head); font-size: 15px; font-weight: 600; color: var(--twp-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html.twp .twp-pbar__secure { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--twp-muted); } html.twp.twp-public .invoice-html-logo, html.twp.twp-public .estimate-html-logo { display: none; } html.twp.twp-public .tw-money-page .preview-top-wrapper .mbot30 { margin-bottom: 0; } html.twp.twp-public .preview-sticky-header { background: var(--twp-surface); border-bottom: 1px solid var(--twp-border); } html.twp.twp-public .invoice-html-status .label, html.twp.twp-public .estimate-html-status .label { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; font-size: 12px; } html.twp.twp-public .tw-money-page .invoice-html-pay-now-top.btn-success, html.twp.twp-public .tw-money-page #pay_now.btn-success { border-radius: 999px; height: 44px; padding: 0 20px; } /* 6. footer */ html.twp .twp-foot { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: space-between; padding: 10px 16px; border-top: 1px solid var(--twp-border); background: var(--twp-surface); font-size: 12px; color: var(--twp-muted); } html.twp .twp-foot--public { justify-content: center; flex-direction: column; align-items: center; text-align: center; padding: 16px; background: transparent; border-top: 0; font-size: 12.5px; } html.twp .twp-tawala { color: #2563EB; font-weight: 700; } @media (prefers-color-scheme: dark) { html.twp .twp-tawala { color: #7AA7FF; } } /* 7. phone */ @media (max-width: 860px) { html.twp .twp-nav { order: 3; width: 100%; margin: 0 -16px; padding: 6px 12px 8px; border-top: 1px solid var(--twp-border); flex: 0 0 calc(100% + 32px); } html.twp .twp-user__who { display: none; } html.twp .twp-top { padding-top: 8px; } html.twp .twp-content { padding: 16px 12px 32px; } html.twp .twp-foot { justify-content: center; text-align: center; } } @media (max-width: 480px) { html.twp.twp-public .preview-top-wrapper .-tw-mx-4 { margin-left: 0; margin-right: 0; } html.twp .tw-money-page .invoice-payments-table, html.twp .tw-money-page .estimate-payments-table { display: block; overflow-x: auto; } html.twp .twp-brand__txt b { max-width: 180px; } html.twp body.customers .table-responsive, html.twp body.customers .dataTables_wrapper { overflow-x: auto; } }