/* InsurePay Admin Theme — Statement Ingestion
   Mirrors payments-stripe/V3 visual style (no Telerik). */

html, body {
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    margin: 0;
    padding: 0;
}

/* CSS Tokens */
:root {
    --nav-bg:              #0f172a;
    --nav-divider:         rgba(255,255,255,0.07);

    --accent:              #0ea5e9;
    --accent-wash:         rgba(14,165,233,0.14);

    --nav-text-idle:       rgba(255,255,255,0.52);
    --nav-text-hover:      rgba(255,255,255,0.88);
    --nav-text-active:     #ffffff;
    --nav-hover-wash:      rgba(255,255,255,0.06);

    --topbar-btn-bg:       rgba(255,255,255,0.07);
    --topbar-btn-border:   rgba(255,255,255,0.11);
    --topbar-btn-text:     rgba(255,255,255,0.70);
    --topbar-btn-bg-hover: rgba(255,255,255,0.13);
    --topbar-btn-text-hover: #ffffff;

    --font-size-nav-link:     0.83rem;
    --font-size-nav-section:  0.67rem;
    --font-size-topbar-btn:   0.77rem;
    --font-size-topbar-avatar: 0.75rem;
    --letter-spacing-section:  0.09em;

    --radius-topbar-btn: 7px;
    --radius-avatar:     50%;

    --sidebar-width:     240px;
    --topbar-height:     58px;
    --topbar-padding-x:  24px;
    --topbar-gap:        14px;
    --topbar-cluster-gap: 8px;
    --avatar-size:       32px;
    --active-stripe-width: 3px;

    --nav-transition-fast: 0.12s;
}

/* Nav shell */
.nav-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
}
.nav-shell .nav-body {
    display: flex;
    flex: 1;
    min-height: 0;
}

/* Top bar */
.nav-topbar {
    display: flex;
    align-items: center;
    height: var(--topbar-height);
    padding: 0 var(--topbar-padding-x);
    background: var(--nav-bg);
    border-bottom: 1px solid var(--nav-divider);
    color: #fff;
    gap: var(--topbar-gap);
    flex-shrink: 0;
}
.nav-topbar-logo {
    height: 34px;
    width: auto;
    display: block;
    transform: translateY(3px);
}
.nav-topbar-logo-btn {
    display: block;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    line-height: 0;
}
.nav-topbar-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
    margin-left: 4px;
}
.nav-topbar-spacer { flex: 1; }
.nav-topbar-cluster {
    display: flex;
    align-items: center;
    gap: var(--topbar-cluster-gap);
}
.nav-topbar-current-company {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.85);
    white-space: nowrap;
}
.nav-topbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 13px;
    background: var(--topbar-btn-bg);
    border: 1px solid var(--topbar-btn-border);
    border-radius: var(--radius-topbar-btn);
    color: var(--topbar-btn-text);
    font-size: var(--font-size-topbar-btn);
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--nav-transition-fast), color var(--nav-transition-fast);
}
.nav-topbar-btn i { font-size: 0.95rem; }
.nav-topbar-btn:hover,
.nav-topbar-btn.active {
    background: var(--topbar-btn-bg-hover);
    color: var(--topbar-btn-text-hover);
}
.nav-topbar-avatar {
    width: var(--avatar-size);
    height: var(--avatar-size);
    border-radius: var(--radius-avatar);
    background: var(--accent);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-topbar-avatar);
    font-weight: 700;
    text-transform: uppercase;
    flex-shrink: 0;
}
.nav-topbar-user { line-height: 1.25; color: #fff; }
.nav-topbar-user-name  { font-size: 0.8rem; font-weight: 600; }
.nav-topbar-user-email { font-size: 0.7rem; color: rgba(255,255,255,0.6); }

/* Sidebar */
.nav-sidebar {
    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    background: var(--nav-bg);
    border-right: 1px solid var(--nav-divider);
    padding: 8px 0 24px;
    display: flex;
    flex-direction: column;
}
.nav-section-label {
    padding: 18px 20px 8px;
    font-size: var(--font-size-nav-section);
    font-weight: 700;
    color: rgba(255,255,255,0.36);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-section);
}
.nav-link {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 20px;
    color: var(--nav-text-idle);
    font-size: var(--font-size-nav-link);
    font-weight: 500;
    text-decoration: none;
    border-left: var(--active-stripe-width) solid transparent;
    transition: background var(--nav-transition-fast), color var(--nav-transition-fast);
}
.nav-link i {
    font-size: 1rem;
    opacity: 0.75;
    width: 1.1em;
    text-align: center;
    transition: opacity var(--nav-transition-fast), color var(--nav-transition-fast);
}
.nav-link:hover {
    background: var(--nav-hover-wash);
    color: var(--nav-text-hover);
    text-decoration: none;
}
.nav-link:hover i { opacity: 1; }
.nav-link.active {
    background: var(--accent-wash);
    color: var(--nav-text-active);
    border-left-color: var(--accent);
}
.nav-link.active i { opacity: 1; color: var(--accent); }
.nav-link.nav-sublink { padding-left: 44px; font-size: 0.78rem; }

/* Content area */
.nav-content {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    background: #f1f5f9;
    padding: 24px 32px 40px;
}

/* Page tabs */
.nav-page-tabs {
    display: flex;
    gap: 24px;
    padding: 0 24px;
    margin: 0;
    border-bottom: 1px solid #e2e8f0;
}
.nav-page-tabs .nav-page-tab {
    position: relative;
    padding: 12px 0;
    margin-bottom: -1px;
    font-size: 0.83rem;
    font-weight: 500;
    color: #64748b;
    text-decoration: none;
    border-bottom: 2px solid transparent;
}
.nav-page-tabs .nav-page-tab:hover { color: #0f172a; }
.nav-page-tabs .nav-page-tab.active {
    color: #0f172a;
    border-bottom-color: var(--accent);
    font-weight: 600;
}

/* InsurePay Admin — page-level styles under .ip-admin */
.ip-admin { font-family: 'Inter', 'Roboto', system-ui, sans-serif; }

.ip-admin .page-title,
.ip-admin h4.page-title {
    font-size: 20px;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 18px;
    line-height: 1.3;
}

.ip-admin .page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 18px;
}
.ip-admin .page-header h4 { margin: 0; font-size: 20px; font-weight: 700; color: #1f2937; line-height: 1.3; }
.ip-admin .page-header--with-back { justify-content: flex-start; gap: 12px; }
.ip-admin .page-header--with-back .page-meta { font-size: 13px; color: #888; }

/* Card */
.ip-admin .ip-card {
    background: #fff;
    border: 1px solid #e6e8eb;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    overflow: hidden;
    margin-bottom: 16px;
}
.ip-admin .ip-card-body { padding: 28px 32px; }

/* Controls / filter bar */
.ip-admin .controls-bar {
    display: flex;
    align-items: flex-end;
    gap: 20px;
    flex-wrap: wrap;
}
.ip-admin .field-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #9ca3af;
    margin-bottom: 10px;
}
.ip-admin .info-text,
.ip-admin .result-count { font-size: 13px; color: #6b7280; white-space: nowrap; align-self: center; }

/* Override Bootstrap primary to InsurePay navy */
.btn-primary {
    --bs-btn-bg: #2e3a6c;
    --bs-btn-border-color: #2e3a6c;
    --bs-btn-hover-bg: #24305a;
    --bs-btn-hover-border-color: #24305a;
    --bs-btn-active-bg: #1e2849;
    --bs-btn-active-border-color: #1e2849;
    --bs-btn-focus-shadow-rgb: 46, 58, 108;
}

/* Named navy variants for non-Bootstrap contexts */
.btn-primary-navy {
    background-color: #2e3a6c;
    border: 1px solid #2e3a6c;
    color: #fff;
    border-radius: 10px;
    padding: 0 24px;
    height: 44px;
    font-weight: 500;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}
.btn-primary-navy:hover,
.btn-primary-navy:focus { background-color: #24305a; border-color: #24305a; color: #fff; }

.btn-outline-navy {
    background: #fff;
    border: 1px solid #2e3a6c;
    color: #2e3a6c;
    border-radius: 10px;
    padding: 0 20px;
    height: 44px;
    font-weight: 500;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}
.btn-outline-navy:hover,
.btn-outline-navy:focus { background: #f2f4fa; color: #24305a; border-color: #24305a; }

/* Action pill buttons */
.btn-pill {
    border-radius: 999px;
    padding: 0 18px;
    height: 34px;
    font-weight: 500;
    font-size: 13px;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}
.btn-details-pill       { background: #2e3a6c; color: #fff; }
.btn-details-pill:hover { background: #24305a; color: #fff; }
.btn-refund-pill        { background: #fdf2d6; color: #b7791f; }
.btn-refund-pill:hover  { background: #f7e6b5; color: #8b5a11; }
.btn-cancel-pill        { background: #fde2e2; color: #c53030; }
.btn-cancel-pill:hover  { background: #fbcaca; color: #991b1b; }
.btn-receipt-pill       { background: #d4f5e0; color: #1e7e34; }
.btn-receipt-pill:hover { background: #bce9ce; color: #155724; }

.btn-pill-outline {
    border-radius: 999px;
    padding: 0 18px;
    height: 34px;
    font-weight: 500;
    font-size: 13px;
    background: #fff;
    border: 1px solid #2e3a6c;
    color: #2e3a6c;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}
.btn-pill-outline:hover { background: #f2f4fa; color: #24305a; }
.btn-pill-outline.danger { border-color: #c53030; color: #c53030; }
.btn-pill-outline.danger:hover { background: #fde2e2; color: #991b1b; }

/* Links */
a { color: #2e3a6c; }
a:hover { color: #24305a; }

/* Form focus ring — navy */
.form-control:focus,
.form-select:focus {
    border-color: #2e3a6c;
    box-shadow: 0 0 0 3px rgba(46, 58, 108, 0.12);
}

/* Table */
.ip-admin .table th {
    padding: 14px 16px;
    background: #fafbfc;
    border-color: #eef0f3;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.8px;
    color: #9ca3af;
    font-weight: 700;
    vertical-align: middle;
}
.ip-admin .table td {
    padding: 16px;
    border-color: #f1f3f5;
    vertical-align: middle;
    font-size: 14px;
    color: #374151;
}
.ip-admin .table tbody tr:hover td { background: #fafbfc; }

/* Cell typography */
.ip-admin .date-primary { font-weight: 700; color: #1f2937; font-size: 14px; line-height: 1.3; }
.ip-admin .text-sub     { font-size: 11px; color: #9ca3af; margin-top: 4px; }
.ip-admin .amount-stack  { line-height: 1.5; }
.ip-admin .amount-detail { font-size: 12px; color: #9ca3af; margin-bottom: 3px; }
.ip-admin .amount-total  { font-weight: 700; color: #1f2937; font-size: 15px; }

/* Pills */
.ip-admin .type-pill {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;
    background-color: #f1f3f5;
    color: #495057;
    font-size: 12px;
    font-weight: 500;
}
.ip-admin .type-pill.type-info    { background-color: #d8eefc; color: #0c5a94; }
.ip-admin .type-pill.type-success { background-color: #d4f5e0; color: #1e7e34; }

.status-pill {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
}
.status-pill.status-succeeded,
.status-pill.status-active     { background-color: #d4f5e0; color: #1e7e34; }
.status-pill.status-refunded,
.status-pill.status-inactive,
.status-pill.status-error      { background-color: #fde2e2; color: #c53030; }
.status-pill.status-processing { background-color: #d8eefc; color: #0c5a94; }
.status-pill.status-canceled   { background-color: #e5e7eb; color: #4b5563; }
.status-pill.status-pending    { background-color: #fef5d6; color: #92610b; }
.status-pill.status-partial    { background-color: #fef3c7; color: #92610b; }
.status-pill.status-failed-refund { background-color: #fecaca; color: #991b1b; }

/* Transaction detail rows */
.txn-section { margin-bottom: 20px; }
.txn-section-header {
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.08em;
    color: #6b7280;
    font-weight: 600;
    padding: 6px 0 8px;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 4px;
}
.txn-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #f3f4f6;
    font-size: 13.5px;
    gap: 16px;
}
.txn-row:last-child { border-bottom: none; }
.txn-row-label { color: #6b7280; font-weight: 400; flex-shrink: 0; }
.txn-row-value { color: #1f2937; font-weight: 600; text-align: right; word-break: break-word; }

/* Amount breakdown grid */
.amount-breakdown-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 4px;
}
.amount-tile {
    padding: 14px 12px;
    border-radius: 8px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    text-align: center;
}
.amount-tile .tile-label {
    font-size: 10px;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}
.amount-tile .tile-value { font-size: 20px; font-weight: 700; margin-top: 6px; color: #1f2937; }
.amount-tile.tile-refunded .tile-value { color: #c53030; }
.amount-tile.tile-collected-pos .tile-value { color: #1e7e34; }
.amount-tile.tile-collected-zero .tile-value { color: #9ca3af; }

/* Report table */
.report-table { width: 100%; border-collapse: collapse; margin-top: 24px; }
.report-table thead tr { background: #fafbfc; border-bottom: 1px solid #e6e8eb; }
.report-table th, .report-table td { padding: 10px 12px; }
.report-table th {
    text-align: left;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.6px;
    color: #9ca3af;
    font-weight: 700;
}
.report-table tbody tr { border-bottom: 1px solid #f1f3f5; }
.report-table tfoot tr { border-top: 1px solid #e6e8eb; background: #fafbfc; }
.report-table tfoot td { font-weight: 700; color: #1f2937; }
.col-right   { text-align: right; }
.col-mono    { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
.col-muted   { color: #6b7280; }
.col-success { font-weight: 600; color: #1e7e34; }
.col-sub     { color: #9ca3af; }

/* Detail section */
.detail-section { margin-bottom: 25px; }
.detail-section h5 {
    border-bottom: 2px solid #2e3a6c;
    padding-bottom: 10px;
    margin-bottom: 15px;
    color: #1f2937;
    font-weight: 600;
}
.detail-table { width: 100%; border-collapse: collapse; }
.detail-table tr { border-bottom: 1px solid #f1f3f5; }
.detail-table td { padding: 10px 0; }
.detail-table .lbl { font-weight: 600; width: 30%; color: #374151; }

/* Company detail — definition list grid */
.ip-admin .detail-dl dt,
.ip-admin .detail-dl dd {
    padding-top: 9px;
    padding-bottom: 9px;
    border-bottom: 1px solid #f1f3f5;
    margin-bottom: 0;
    font-size: 14px;
    vertical-align: middle;
}
.ip-admin .detail-dl dt { color: #6b7280; font-weight: 500; }
.ip-admin .detail-dl dd { color: #1f2937; font-weight: 600; }
.ip-admin .detail-dl .row > dt:last-of-type,
.ip-admin .detail-dl .row > dd:last-child { border-bottom: none; }

/* Hide validation summary when there are no errors */
.validation-summary-valid { display: none; }

/* Floating label muted colour (auth + authenticated forms) */
.form-floating label { color: #6b7280; }

/* Nav language selector (authenticated layout topbar) */
.nav-lang-select {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.25);
    color: #fff;
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 0.82rem;
    cursor: pointer;
}
.nav-lang-select:focus { outline: none; }
.nav-lang-select option { background: #0f172a; color: #fff; }

/* Misc helpers */
.no-data          { text-align: center; color: #6b7280; padding: 30px 0; }
.loader-center    { text-align: center; padding: 50px; }
.error-center     { padding: 20px; text-align: center; color: #c53030; font-weight: bold; }
.alert-warning-soft {
    background: #fff8e6;
    border: 1px solid #f4d79e;
    color: #92610b;
    padding: 12px 14px;
    border-radius: 8px;
    margin-bottom: 20px;
}