/* XpertEsolutions Billing - application theme (on top of Bootstrap 5) */
:root {
    --xe-blue: #0f84d8;
    --xe-blue-dark: #0b5fae;
    --xe-navy: #0b2540;
    --xe-navy-2: #123357;
    --xe-orange: #f08a24;
    --xe-bg: #f3f6fa;
    --xe-border: #e4e9f0;
    --xe-text: #1c2a3f;
    --xe-muted: #6b7a90;
    --sidebar-w: 250px;
    --bs-primary: #0f84d8;
    --bs-primary-rgb: 15, 132, 216;
    --bs-link-color: #0b6fbd;
    --bs-link-color-rgb: 11, 111, 189;
    --bs-link-hover-color: #0b5fae;
    --bs-body-font-size: .925rem;
}
body { background: var(--xe-bg); color: var(--xe-text); font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
.btn, .nav-link, .dropdown-item, .page-link { text-decoration: none !important; }
.btn-primary { --bs-btn-bg: var(--xe-blue); --bs-btn-border-color: var(--xe-blue); --bs-btn-hover-bg: var(--xe-blue-dark); --bs-btn-hover-border-color: var(--xe-blue-dark); --bs-btn-active-bg: var(--xe-blue-dark); --bs-btn-active-border-color: var(--xe-blue-dark); --bs-btn-disabled-bg: var(--xe-blue); --bs-btn-disabled-border-color: var(--xe-blue); }
.btn-outline-primary { --bs-btn-color: var(--xe-blue); --bs-btn-border-color: var(--xe-blue); --bs-btn-hover-bg: var(--xe-blue); --bs-btn-hover-border-color: var(--xe-blue); --bs-btn-active-bg: var(--xe-blue); --bs-btn-active-border-color: var(--xe-blue); }
.text-primary { color: var(--xe-blue) !important; }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: #7cc0f0; box-shadow: 0 0 0 .2rem rgba(15, 132, 216, .15); }
.form-check-input:checked { background-color: var(--xe-blue); border-color: var(--xe-blue); }
.form-label { font-weight: 600; font-size: .82rem; color: #3a4a61; margin-bottom: .3rem; }
.form-text { font-size: .78rem; }
.required::after { content: " *"; color: #dc3545; }

/* ---------- Layout ---------- */
.app { display: flex; min-height: 100vh; }
.sidebar { width: var(--sidebar-w); background: linear-gradient(180deg, var(--xe-navy) 0%, #081b30 100%); color: #c9d6e6; position: fixed; inset: 0 auto 0 0; display: flex; flex-direction: column; z-index: 1040; transition: transform .2s ease; }
.sidebar-brand { padding: 16px 18px 12px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.sidebar-brand .logo-box { background: #fff; border-radius: 8px; padding: 6px 10px; display: block; }
.sidebar-brand img { max-width: 100%; height: 34px; object-fit: contain; display: block; margin: 0 auto; }
.sidebar-brand small { display: block; text-align: center; margin-top: 8px; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: #8ea5c0; }
.sidebar-nav { flex: 1; overflow-y: auto; padding: 10px 10px 20px; }
.sidebar-nav .nav-section { font-size: .66rem; letter-spacing: .13em; text-transform: uppercase; color: #6f87a5; padding: 14px 12px 5px; }
.sidebar-nav a { display: flex; align-items: center; gap: 11px; padding: 8px 12px; border-radius: 8px; color: #c9d6e6; font-size: .9rem; text-decoration: none; margin-bottom: 1px; }
.sidebar-nav a i { font-size: 1.02rem; width: 20px; text-align: center; color: #86a0be; }
.sidebar-nav a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.sidebar-nav a.active { background: var(--xe-blue); color: #fff; box-shadow: 0 4px 12px rgba(15, 132, 216, .35); }
.sidebar-nav a.active i { color: #fff; }
.sidebar-nav .badge { margin-left: auto; }
.strip { display: flex; height: 4px; }
.strip span { flex: 1; }
.main { flex: 1; margin-left: var(--sidebar-w); min-width: 0; display: flex; flex-direction: column; }
.topbar { background: #fff; border-bottom: 1px solid var(--xe-border); padding: 10px 24px; display: flex; align-items: center; gap: 14px; position: sticky; top: 0; z-index: 1020; }
.topbar h1 { font-size: 1.15rem; font-weight: 650; margin: 0; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .user-btn { display: flex; align-items: center; gap: 9px; border: 1px solid var(--xe-border); background: #fff; border-radius: 30px; padding: 4px 12px 4px 4px; font-size: .86rem; color: var(--xe-text); }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--xe-blue); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .8rem; flex-shrink: 0; }
.content { padding: 22px 24px 40px; flex: 1; }
.app-footer { padding: 12px 24px; font-size: .76rem; color: var(--xe-muted); border-top: 1px solid var(--xe-border); background: #fff; }
.sidebar-toggle { display: none; border: 0; background: transparent; font-size: 1.5rem; line-height: 1; color: var(--xe-navy); padding: 0 4px; }
.sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(8, 20, 38, .5); z-index: 1035; }
@media (max-width: 991.98px) {
    .sidebar { transform: translateX(-100%); }
    body.sidebar-open .sidebar { transform: none; }
    body.sidebar-open .sidebar-backdrop { display: block; }
    .main { margin-left: 0; }
    .sidebar-toggle { display: inline-block; }
    .topbar { padding: 10px 14px; }
    .content { padding: 16px 12px 32px; }
}

/* ---------- Cards / stats ---------- */
.card { border: 1px solid var(--xe-border); border-radius: 12px; box-shadow: 0 1px 2px rgba(16, 38, 70, .04); }
.card-header { background: #fff; border-bottom: 1px solid var(--xe-border); font-weight: 650; padding: .8rem 1.1rem; border-radius: 12px 12px 0 0 !important; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.card-header .card-title { margin: 0; font-size: .95rem; font-weight: 650; }
.stat { background: #fff; border: 1px solid var(--xe-border); border-radius: 12px; padding: 15px 16px; height: 100%; display: flex; gap: 13px; align-items: flex-start; position: relative; overflow: hidden; }
.stat .icon { width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0; }
.stat .label { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--xe-muted); font-weight: 600; }
.stat .value { font-size: 1.32rem; font-weight: 700; line-height: 1.25; color: var(--xe-navy); word-break: break-word; }
.stat .hint { font-size: .76rem; color: var(--xe-muted); }
.stat a.stretched-link { text-decoration: none; }
.tone-blue { background: #e6f3fc; color: #0f84d8; }
.tone-green { background: #e3f6ea; color: #17964a; }
.tone-orange { background: #fdf0e1; color: #d9770b; }
.tone-red { background: #fde8e8; color: #d92d2d; }
.tone-purple { background: #eeeafd; color: #6a4fd8; }
.tone-gray { background: #eef1f5; color: #55657c; }

/* ---------- Tables ---------- */
.table { --bs-table-bg: transparent; margin-bottom: 0; font-size: .875rem; }
.table > thead th { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--xe-muted); font-weight: 650; background: #f8fafc; border-bottom: 1px solid var(--xe-border); white-space: nowrap; padding: .6rem .9rem; }
.table > tbody td, .table > tfoot td { padding: .62rem .9rem; vertical-align: middle; border-color: #eef2f6; }
.table > tfoot td { font-weight: 700; background: #f8fafc; border-top: 2px solid var(--xe-border); }
.table-hover > tbody > tr:hover > * { background: #f6fafe; }
.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.table-responsive { border-radius: 0 0 12px 12px; }
.empty { text-align: center; padding: 42px 20px; color: var(--xe-muted); }
.empty i { font-size: 2.4rem; display: block; margin-bottom: 8px; color: #b9c6d6; }
.empty .btn { margin-top: 12px; }

/* ---------- Badges ---------- */
.badge { font-weight: 600; letter-spacing: .02em; padding: .38em .65em; border-radius: 6px; }
.badge-soft-success { background: #e3f6ea; color: #137a3c; }
.badge-soft-warning { background: #fff2d6; color: #9a6100; }
.badge-soft-danger { background: #fde8e8; color: #c22525; }
.badge-soft-info { background: #e0f2fb; color: #0b6a9c; }
.badge-soft-primary { background: #e8ebfd; color: #3f4fc4; }
.badge-soft-secondary { background: #eef1f5; color: #55657c; }
.badge-soft-dark { background: #dfe3e9; color: #2c3848; }

/* ---------- Misc ---------- */
.filter-bar { background: #fff; border: 1px solid var(--xe-border); border-radius: 12px; padding: 12px 14px; margin-bottom: 16px; }
.filter-bar .form-control, .filter-bar .form-select { font-size: .85rem; }
.dl-grid { display: grid; grid-template-columns: 150px 1fr; gap: 7px 14px; font-size: .88rem; margin: 0; }
.dl-grid dt { color: var(--xe-muted); font-weight: 500; }
.dl-grid dd { margin: 0; word-break: break-word; }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.page-actions .spacer { flex: 1; }
.pre-line { white-space: pre-line; }
.small-muted { font-size: .78rem; color: var(--xe-muted); }
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { padding: 9px 0 9px 20px; border-left: 2px solid var(--xe-border); position: relative; font-size: .84rem; margin-left: 6px; }
.timeline li::before { content: ""; position: absolute; left: -6px; top: 14px; width: 10px; height: 10px; border-radius: 50%; background: var(--xe-blue); border: 2px solid #fff; }
.timeline .when { font-size: .74rem; color: var(--xe-muted); }
.nav-tabs .nav-link { color: var(--xe-muted); font-weight: 600; font-size: .88rem; }
.nav-tabs .nav-link.active { color: var(--xe-blue); border-bottom-color: #fff; }
.alert { border-radius: 10px; font-size: .88rem; }
code.cron { display: block; background: #0b2540; color: #d8e6f5; padding: 9px 12px; border-radius: 8px; font-size: .78rem; white-space: pre-wrap; word-break: break-all; }
.progress { height: 12px; border-radius: 8px; }
.email-frame { border: 1px solid var(--xe-border); border-radius: 10px; background: #f4f6fa; padding: 12px; max-height: 520px; overflow: auto; }

/* ---------- Invoice document (HTML view) ---------- */
.invoice-doc { background: #fff; border: 1px solid var(--xe-border); border-radius: 12px; padding: 34px 38px; position: relative; overflow: hidden; }
.invoice-doc .strip { position: absolute; top: 0; right: 38px; width: 240px; height: 12px; }
.invoice-doc h2 { font-size: 2.6rem; font-weight: 300; letter-spacing: .02em; margin: 10px 0 0; color: #000; }
.invoice-doc .doc-logo { max-height: 52px; max-width: 220px; }
.invoice-doc .lbl { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #7a7f87; }
.invoice-doc table.items { width: 100%; margin-top: 26px; }
.invoice-doc table.items th { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #7a7f87; border-bottom: 2px solid #000; padding: 0 8px 7px 0; }
.invoice-doc table.items td { padding: 10px 8px 10px 0; border-bottom: 1px solid #cfd5dd; vertical-align: top; }
.invoice-doc .grand { font-size: 1.7rem; color: var(--xe-blue); }
.invoice-doc .totals td { padding: 3px 0 3px 18px; text-align: right; }
.invoice-doc .totals .k { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #374151; }
.status-text-paid { color: #16963a; font-weight: 700; }
.status-text-due { color: #e11d1d; font-weight: 700; }
.status-text-muted { color: #6b7280; font-weight: 700; }
@media (max-width: 575.98px) { .invoice-doc { padding: 26px 16px; } .invoice-doc h2 { font-size: 2rem; } .dl-grid { grid-template-columns: 110px 1fr; } }

/* ---------- Line item editor ---------- */
.items-editor th { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--xe-muted); }
.items-editor td { vertical-align: top; padding: .35rem .3rem; }
.items-editor .form-control { font-size: .86rem; }
.items-editor .line-total { padding-top: .5rem; font-weight: 600; }
@media (max-width: 767.98px) {
    .items-editor thead { display: none; }
    .items-editor tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; border: 1px solid var(--xe-border); border-radius: 10px; padding: 10px; margin-bottom: 10px; }
    .items-editor td { padding: 0; border: 0; }
    .items-editor td.c-desc { grid-column: 1 / -1; }
    .items-editor td[data-label]::before { content: attr(data-label); display: block; font-size: .68rem; text-transform: uppercase; color: var(--xe-muted); }
}

/* ---------- Auth pages ---------- */
.auth-body { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 14px; background: linear-gradient(135deg, #0b2540 0%, #0f4f86 55%, #0f84d8 100%); }
.auth-card { width: 100%; max-width: 430px; background: #fff; border-radius: 16px; box-shadow: 0 24px 60px rgba(4, 18, 38, .35); overflow: hidden; }
.auth-card.wide { max-width: 760px; }
.auth-card .auth-inner { padding: 30px 34px 28px; }
.auth-card .auth-logo { display: block; max-height: 56px; max-width: 240px; margin: 0 auto 6px; }
.auth-card h1 { font-size: 1.25rem; font-weight: 700; text-align: center; margin: 12px 0 4px; }
.auth-card .sub { text-align: center; color: var(--xe-muted); font-size: .86rem; margin-bottom: 20px; }
.auth-foot { text-align: center; color: rgba(255, 255, 255, .75); font-size: .78rem; margin-top: 16px; }
.auth-foot a { color: #fff; text-decoration: underline; }

/* ---------- Customer portal top navigation ---------- */
.portal-nav { background: #fff; border-bottom: 1px solid var(--xe-border); }
.portal-nav .navbar-brand img { height: 38px; }
.portal-nav .nav-link { font-weight: 600; color: #3a4a61; padding: .9rem .9rem !important; border-bottom: 3px solid transparent; font-size: .9rem; }
.portal-nav .nav-link.active, .portal-nav .nav-link:hover { color: var(--xe-blue); border-bottom-color: var(--xe-blue); }
.portal-hero { background: linear-gradient(120deg, #0b2540, #0f5c9c); color: #fff; border-radius: 14px; padding: 22px 26px; margin-bottom: 18px; }
.portal-hero h2 { font-size: 1.3rem; margin: 0 0 4px; font-weight: 650; }
.portal-hero .balance { font-size: 1.9rem; font-weight: 700; }

@media print { .sidebar, .topbar, .page-actions, .app-footer, .no-print, .portal-nav { display: none !important; } .main { margin: 0; } .content { padding: 0; } body { background: #fff; } }

.table td a[href*="/invoices/"] { white-space: nowrap; }