/**
 * Molasses Trading Management System theme
 * Consolidated styles from all templates
 */
:root {
    /* Dark Theme (Default) */
    --htc-primary: #94a3b8;
    --htc-primary-mid: #64748b;
    --htc-primary-light: #60a5fa;
    --htc-text: #f8fafc;
    --htc-text-muted: #94a3b8;
    --htc-accent: #d97777;
    --htc-accent-soft: #7f3d3d;
    --htc-gold: #d9bd77;
    --htc-success: #55b98f;
    --htc-success-bg: #264e3f;
    --htc-warning: #d9a45b;
    --htc-warning-bg: #78350f;
    --htc-danger-bg: #7f1d1d;
    --htc-bg: #0f172a;
    --htc-surface: #1e293b;
    --htc-sidebar-bg: #1e293b;
    --htc-sidebar-hover: #334155;
    --htc-sidebar-text: #cbd5e1;
    --htc-sidebar-active: #334155;
    --htc-sidebar-active-text: #60a5fa;
    --htc-border: #334155;
    --htc-font: "Inter", system-ui, -apple-system, sans-serif;
    --htc-radius: 10px;
    --htc-radius-sm: 6px;
    --htc-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    --htc-space-xs: 0.35rem;
    --htc-space-sm: 0.5rem;
    --htc-space-md: 0.75rem;
    --htc-space-lg: 1rem;
    --htc-space-xl: 1.25rem;
}

[data-theme="light"] {
    /* Light Theme */
    --htc-primary: #1e293b;
    --htc-primary-mid: #334155;
    --htc-primary-light: #2563eb;
    --htc-text: #0f172a;
    --htc-text-muted: #64748b;
    --htc-accent: #b24d4d;
    --htc-accent-soft: #f5eaea;
    --htc-gold: #b2884d;
    --htc-success: #3c7d62;
    --htc-success-bg: #d7e8e0;
    --htc-warning: #b2884d;
    --htc-warning-bg: #fef3c7;
    --htc-danger-bg: #fee2e2;
    --htc-bg: #f1f5f9;
    --htc-surface: #ffffff;
    --htc-sidebar-bg: #ffffff;
    --htc-sidebar-hover: #f8fafc;
    --htc-sidebar-text: #475569;
    --htc-sidebar-active: #eff6ff;
    --htc-sidebar-active-text: #2563eb;
    --htc-border: #e2e8f0;
    --htc-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 16px rgba(15, 23, 42, 0.06);
}

/* Smooth Theme Transitions */
body, .app-sidebar, .app-topbar, .app-main-wrap, .login-split-form, .login-split-brand,
.metric-box, .status-card, .chart-box, .pane-card, .doc-category, .kpi-card,
table, th, td, .interactive-row, .timeline-item, .detail-pane,
input, select, button, a, i, span, div {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* ==========================================================================
   Dashboard Home - Status Cards, Charts, System Status
   ========================================================================== */
.system-status-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 1.5rem;
}
.system-live-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    color: var(--htc-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    margin-bottom: 0.5rem;
}
.system-live-pill::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--htc-success);
    box-shadow: 0 0 8px var(--htc-success);
}
.last-sync-block {
    text-align: right;
    font-size: 0.8rem;
    color: var(--htc-text-muted);
}
.last-sync-block strong {
    color: var(--htc-text);
    display: block;
    font-size: 0.85rem;
    margin-top: 0.15rem;
}
.dashboard-title-group h2 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--htc-primary);
    margin: 0;
}
.dashboard-title-group p {
    font-size: 0.9rem;
    color: var(--htc-text-muted);
    margin: 0.25rem 0 0 0;
}

.aggregation-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--htc-sidebar-hover);
    border: 1px dashed var(--htc-border);
    border-radius: var(--htc-radius-sm);
    padding: 0.6rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--htc-text-muted);
    letter-spacing: 0.5px;
}
.aggregation-bar .left-info { text-transform: uppercase; }
.aggregation-bar .right-info { display: flex; align-items: center; gap: 0.35rem; }

.status-cards-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}
@media (max-width: 1200px) {
    .status-cards-row { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .status-cards-row { grid-template-columns: repeat(2, 1fr); }
}
.status-card {
    background: var(--htc-surface);
    border: 1px solid var(--htc-border);
    border-radius: var(--htc-radius-sm);
    padding: 1rem;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 2px 4px rgba(15, 45, 92, 0.02);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
    cursor: pointer;
}
.status-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--htc-shadow);
}
.status-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background-color: transparent;
}
.status-card.stripe-green::before { background-color: var(--htc-success); }
.status-card.stripe-red::before { background-color: var(--htc-accent); }
.status-card.stripe-blue::before { background-color: var(--htc-primary-light); }
.status-card.stripe-orange::before { background-color: var(--htc-gold); }
.status-card.stripe-purple::before { background-color: #805ad5; }
.status-card.stripe-darkred::before { background-color: var(--htc-accent); }

.status-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    color: var(--htc-text-muted);
}
.status-card-header i { font-size: 1.1rem; }
.status-card-val {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--htc-primary);
    line-height: 1.2;
}
.status-card-label {
    font-size: 0.8rem;
    color: var(--htc-text-muted);
    margin-top: 0.25rem;
    font-weight: 500;
}
.status-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
}
.status-card-trend { display: flex; align-items: center; gap: 0.2rem; }
.status-card-trend.up { color: var(--htc-success); }
.status-card-trend.down { color: var(--htc-accent); }
.status-card-source {
    color: var(--htc-text-muted);
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: 500;
}

.charts-split-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}
@media (max-width: 1024px) {
    .charts-split-grid { grid-template-columns: 1fr; }
}
.chart-box {
    background: var(--htc-surface);
    border: 1px solid var(--htc-border);
    border-radius: var(--htc-radius);
    padding: 1.25rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
}
.chart-box-header { margin-bottom: 1rem; }
.chart-box-header h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--htc-primary);
    margin: 0;
}
.chart-box-header p {
    font-size: 0.8rem;
    color: var(--htc-text-muted);
    margin: 0.15rem 0 0 0;
}

.cash-flow-banner {
    background-color: var(--htc-success-bg);
    border: 1px solid var(--htc-success-bg);
    border-radius: var(--htc-radius-sm);
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.cash-flow-banner i {
    background-color: var(--htc-success-bg);
    color: var(--htc-success);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}
.cash-flow-banner .banner-text {
    font-size: 0.8rem;
    color: var(--htc-text-muted);
    font-weight: 500;
}
.cash-flow-banner .banner-text strong {
    color: var(--htc-success);
    font-size: 0.95rem;
    display: block;
    margin-top: 0.1rem;
}

.system-status-bar {
    background: var(--htc-surface);
    border: 1px solid var(--htc-border);
    border-radius: var(--htc-radius-sm);
    padding: 0.75rem 1.25rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    box-shadow: 0 2px 4px rgba(15, 45, 92, 0.01);
}
.status-bar-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--htc-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.status-bar-item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--htc-text);
}
.status-bar-item.success i { color: var(--htc-success); }
.status-bar-item.danger i { color: var(--htc-accent); }

/* ==========================================================================
   Finance Reconciliation
   ========================================================================== */
/* Inline styles converted from template */
.reconciliation-empty {
    padding: 1.5rem;
    text-align: center;
    color: var(--htc-text-muted);
}
.reconciliation-back-link { padding: 1rem; }

/* ==========================================================================
   Analytics Dashboard
   ========================================================================== */
.info-banner {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: var(--htc-radius-sm);
    padding: var(--htc-space-md) var(--htc-space-lg);
    margin-bottom: var(--htc-space-lg);
    display: flex;
    gap: var(--htc-space-md);
    align-items: flex-start;
}
.info-banner i {
    color: var(--htc-primary-light);
    font-size: 1.1rem;
    margin-top: 0.1rem;
}
.info-banner h4 {
    margin: 0 0 0.25rem;
    font-size: 0.875rem;
    color: var(--htc-text);
}
.info-banner p {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--htc-text-muted);
    line-height: 1.5;
}

.param-card {
    background: var(--htc-surface);
    border: 1px solid var(--htc-border);
    border-radius: var(--htc-radius);
    padding: var(--htc-space-lg);
    margin-bottom: var(--htc-space-lg);
    box-shadow: var(--htc-shadow);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--htc-space-lg);
    align-items: center;
}
.param-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(140px, 1fr));
    gap: var(--htc-space-md);
}
.param-grid label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--htc-text-muted);
    margin-bottom: 0.25rem;
}
.param-grid input {
    width: 100%;
    padding: 0.45rem 0.65rem;
    border: 1px solid var(--htc-border);
    border-radius: var(--htc-radius-sm);
    font-size: 0.875rem;
}

.margin-highlight {
    background: var(--htc-success-bg);
    border: 1px solid var(--htc-success-bg);
    border-radius: var(--htc-radius-sm);
    padding: var(--htc-space-md) var(--htc-space-lg);
    text-align: center;
    min-width: 180px;
}
.margin-highlight .label {
    font-size: 0.75rem;
    color: var(--htc-success);
    font-weight: 600;
}
.margin-highlight .value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--htc-success);
    line-height: 1.2;
}
.margin-highlight .via {
    font-size: 0.75rem;
    color: var(--htc-text-muted);
    margin-top: 0.15rem;
}

.analytics-kpi-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--htc-space-md);
    margin-bottom: var(--htc-space-lg);
}
.analytics-kpi {
    background: var(--htc-surface);
    border: 1px solid var(--htc-border);
    border-radius: var(--htc-radius-sm);
    padding: var(--htc-space-md);
    display: flex;
    align-items: center;
    gap: var(--htc-space-md);
}
.analytics-kpi i { font-size: 1.1rem; }
.analytics-kpi .kpi-text .label {
    font-size: 0.68rem;
    color: var(--htc-text-muted);
    text-transform: uppercase;
    font-weight: 600;
}
.analytics-kpi .kpi-text .val {
    font-size: 1rem;
    font-weight: 700;
    color: var(--htc-text);
}

.analytics-split {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr);
    gap: var(--htc-space-md);
    align-items: start;
}

.supplier-card {
    background: var(--htc-surface);
    border: 1px solid var(--htc-border);
    border-radius: var(--htc-radius);
    padding: var(--htc-space-lg);
    box-shadow: var(--htc-shadow);
    margin-bottom: var(--htc-space-md);
}
.supplier-card.best { border-color: var(--htc-success-bg); }
.supplier-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--htc-space-md);
}
.supplier-card-header h3 { margin: 0; font-size: 1rem; }
.best-badge {
    background: var(--htc-success-bg);
    color: var(--htc-success);
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
}
.supplier-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--htc-space-sm);
    margin-bottom: var(--htc-space-md);
}
.supplier-metric { text-align: center; }
.supplier-metric .val { font-size: 1.1rem; font-weight: 700; }
.supplier-metric .lbl { font-size: 0.68rem; color: var(--htc-text-muted); }
.score-bar {
    height: 6px;
    background: var(--htc-border);
    border-radius: 999px;
    overflow: hidden;
    margin-top: 0.25rem;
}
.score-bar .fill {
    height: 100%;
    background: var(--htc-success);
    border-radius: inherit;
}
.supplier-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--htc-space-sm);
    font-size: 0.8125rem;
}
.supplier-detail-grid div {
    background: var(--htc-sidebar-hover);
    border-radius: var(--htc-radius-sm);
    padding: 0.45rem 0.55rem;
}
.supplier-detail-grid .lbl {
    display: block;
    font-size: 0.65rem;
    color: var(--htc-text-muted);
}
.supplier-note {
    margin-top: var(--htc-space-md);
    font-size: 0.8125rem;
    color: var(--htc-text-muted);
    font-style: italic;
}

.chart-panel {
    background: var(--htc-surface);
    border: 1px solid var(--htc-border);
    border-radius: var(--htc-radius);
    padding: var(--htc-space-lg);
    box-shadow: var(--htc-shadow);
    margin-bottom: var(--htc-space-md);
}
.chart-panel h4 { margin: 0 0 var(--htc-space-md); font-size: 0.875rem; }

@media (max-width: 1024px) {
    .analytics-split, .partners-split, .doc-grid { grid-template-columns: 1fr; }
    .metric-grid, .analytics-kpi-row { grid-template-columns: repeat(2, 1fr); }
    .param-card { grid-template-columns: 1fr; }
}
@media (max-width: 992px) {
    .detail-pane { position: static; max-height: none; }
}

/* ==========================================================================
   Documents Dashboard
   ========================================================================== */
.doc-search {
    width: 100%;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--htc-border);
    border-radius: var(--htc-radius-sm);
    font-size: 0.875rem;
    margin-bottom: var(--htc-space-lg);
    background: var(--htc-surface);
}
.doc-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--htc-space-md);
    margin-bottom: var(--htc-space-lg);
}
.doc-category {
    background: var(--htc-surface);
    border: 1px solid var(--htc-border);
    border-radius: var(--htc-radius);
    box-shadow: var(--htc-shadow);
    overflow: hidden;
}
.doc-category-header {
    padding: var(--htc-space-md) var(--htc-space-lg);
    border-bottom: 1px solid var(--htc-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.doc-category-header h3 { margin: 0; font-size: 0.875rem; }
.doc-count {
    font-size: 0.75rem;
    color: var(--htc-text-muted);
    background: #f1f5f9;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
}
.doc-item {
    display: flex;
    align-items: center;
    gap: var(--htc-space-md);
    padding: 0.55rem var(--htc-space-lg);
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.8125rem;
}
.doc-item:last-child { border-bottom: none; }
.doc-item i { color: #ef4444; font-size: 1.1rem; }
.doc-item-meta { flex: 1; min-width: 0; }
.doc-item-meta .name {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.doc-item-meta .sub { font-size: 0.72rem; color: var(--htc-text-muted); }
.doc-actions { display: flex; gap: 0.25rem; }
.doc-actions button, .doc-actions a {
    border: 1px solid var(--htc-border);
    background: var(--htc-surface);
    border-radius: var(--htc-radius-sm);
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--htc-text-muted);
    text-decoration: none;
    font-size: 0.8rem;
}

/* ==========================================================================
   Partners / Suppliers & Customers
   ========================================================================== */
.partners-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--htc-space-md);
}
.partner-column {
    background: var(--htc-surface);
    border: 1px solid var(--htc-border);
    border-radius: var(--htc-radius);
    box-shadow: var(--htc-shadow);
    overflow: hidden;
}
.partner-column-header {
    padding: var(--htc-space-md) var(--htc-space-lg);
    border-bottom: 1px solid var(--htc-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.partner-column-header h3 { margin: 0; font-size: 0.95rem; }
.partner-column-header p { margin: 0.1rem 0 0; font-size: 0.75rem; color: var(--htc-text-muted); }
.partner-card {
    display: flex;
    align-items: center;
    gap: var(--htc-space-md);
    padding: var(--htc-space-md) var(--htc-space-lg);
    border-bottom: 1px solid #f1f5f9;
}
.partner-card:last-child { border-bottom: none; }
.partner-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--htc-radius-sm);
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--htc-text-muted);
}
.partner-info { flex: 1; min-width: 0; }
.partner-info .name { font-weight: 600; font-size: 0.875rem; }
.partner-info .type { font-size: 0.72rem; color: var(--htc-text-muted); }
.partner-stats {
    font-size: 0.75rem;
    color: var(--htc-text-muted);
    text-align: right;
}
.partner-stats strong {
    display: block;
    color: var(--htc-text);
    font-size: 0.8125rem;
}
.status-active { color: var(--htc-success); font-size: 0.68rem; font-weight: 700; }

/* ==========================================================================
   Finance Loans
   ========================================================================== */
.loan-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}
@media (max-width: 992px) { .loan-kpis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .loan-kpis { grid-template-columns: 1fr; } }

.loan-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
@media (max-width: 1100px) { .loan-grid { grid-template-columns: 1fr; } }

.loan-card {
    background: var(--htc-surface);
    border: 1px solid var(--htc-border);
    border-radius: var(--htc-radius);
    box-shadow: var(--htc-shadow);
    overflow: hidden;
}
.loan-card.overdue {
    border-color: rgba(229, 62, 62, 0.35);
    box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.06);
}
.loan-head {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--htc-border);
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
}
.loan-head strong { color: var(--htc-primary); font-size: 1rem; }
.loan-head .sub { font-size: 0.8rem; color: var(--htc-text-muted); }
.loan-body { padding: 1rem 1.25rem 1.25rem; }
.loan-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem 1rem;
}
.loan-meta div { font-size: 0.85rem; color: var(--htc-text-muted); }
.loan-meta strong { color: var(--htc-text); display: block; margin-top: 0.15rem; }
.loan-track { margin-top: 1rem; }
.loan-track-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--htc-text-muted);
    margin-bottom: 0.35rem;
}
.loan-track-bar {
    height: 10px;
    background: var(--htc-bg);
    border-radius: 999px;
    overflow: hidden;
}
.loan-track-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--htc-primary-light), var(--htc-primary-light));
    border-radius: inherit;
}

/* ==========================================================================
   Operations Cluster Detail
   ========================================================================== */
.alert-banner.variance-alert {
    border: 2px solid var(--htc-accent);
    box-shadow: 0 0 10px rgba(229, 62, 62, 0.2);
}
.badge-variance-danger {
    animation: pulse-warn 2s infinite;
    background: var(--htc-danger-bg);
    color: var(--htc-accent);
    border: 1px solid var(--htc-danger-bg);
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-block;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

@keyframes pulse-warn {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(229, 62, 62, 0.4); }
    70% { transform: scale(1.02); box-shadow: 0 0 0 6px rgba(229, 62, 62, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(229, 62, 62, 0); }
}

/* ==========================================================================
   Utility Classes (extracted from inline styles)
   ========================================================================== */
.text-center { text-align: center; }
.text-muted { color: var(--htc-text-muted); }
.mt-3 { margin-top: 1rem; }
.mb-0 { margin-bottom: 0; }
.flex { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.gap-2 { gap: 0.5rem; }

*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: var(--htc-font);
    background: var(--htc-bg);
    color: var(--htc-text);
    margin: 0;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--htc-primary-light); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Utilities */
.flex { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.flex-start { display: flex; justify-content: space-between; align-items: flex-start; }
.flex-col { display: flex; flex-direction: column; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.mt-3 { margin-top: 1rem; }
.text-muted { color: var(--htc-text-muted); }
.text-danger { color: var(--htc-accent); }
.small { font-size: 0.85rem; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.grid-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }

/* Login */
.login-split { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.login-split-brand {
    background: linear-gradient(160deg, var(--htc-sidebar-bg) 0%, var(--htc-primary-mid) 55%, var(--htc-primary-light) 100%);
    color: var(--htc-surface); padding: 3rem; display: flex; flex-direction: column; justify-content: center;
}
.login-split-brand h1 { font-size: 2rem; font-weight: 700; margin: 0 0 0.5rem; }
.login-split-brand p { color: rgba(255,255,255,0.75); max-width: 360px; line-height: 1.6; }
.login-split-brand .badge-pill {
    background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2);
    border-radius: 999px; padding: 0.35rem 1rem; font-size: 0.8rem; margin-top: 2rem; display: inline-block;
}
.login-split-form { display: flex; align-items: center; justify-content: center; padding: 2rem; background: var(--htc-bg); }
.login-form-inner { width: 100%; max-width: 400px; }
.login-form-inner h2 { font-size: 1.5rem; font-weight: 700; color: var(--htc-primary); margin: 0 0 0.25rem; }
.login-form-inner .subtitle { color: var(--htc-text-muted); margin-bottom: 2rem; font-size: 0.9rem; }

/* Centered Login Card layout (Figma alignment) */
.login-card-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: radial-gradient(circle, var(--htc-bg) 0%, var(--htc-border) 100%);
}
.login-card {
    background: var(--htc-surface);
    border-radius: var(--htc-radius);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 20px 25px -5px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--htc-border);
    width: 100%;
    max-width: 440px;
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
.login-card-brand-icon {
    width: 56px;
    height: 56px;
    background-color: var(--htc-primary);
    color: var(--htc-surface);
    border-radius: var(--htc-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.3rem;
    margin: 0 auto 1.5rem auto;
    letter-spacing: 0.5px;
}
.login-card-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--htc-text);
    text-align: center;
    margin: 0 0 0.25rem 0;
}
.login-card-subtitle {
    font-size: 0.95rem;
    color: var(--htc-text-muted);
    text-align: center;
    margin: 0 0 1.5rem 0;
}
.login-card-divider {
    height: 1px;
    background-color: var(--htc-border);
    margin-bottom: 1.5rem;
}
.login-card-forgot {
    display: block;
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--htc-primary-light);
}
.login-card-forgot:hover {
    color: var(--htc-primary-mid);
    text-decoration: underline;
}

.form-control-htc {
    display: block; width: 100%; padding: 0.7rem 1rem;
    border: 1px solid var(--htc-border); border-radius: var(--htc-radius-sm);
    font-size: 0.95rem; background: var(--htc-surface);
}
.form-control-htc:focus { outline: none; border-color: var(--htc-primary-light); box-shadow: 0 0 0 3px rgba(43,108,176,0.15); }
.form-label-htc { font-size: 0.8rem; font-weight: 600; color: var(--htc-text-muted); margin-bottom: 0.35rem; display: block; }

.btn-htc-primary, .btn-htc {
    background: var(--htc-primary); color: var(--htc-surface); border: none;
    border-radius: var(--htc-radius-sm); padding: 0.65rem 1.25rem;
    font-weight: 600; font-size: 0.9rem; cursor: pointer; text-decoration: none;
    display: inline-flex; align-items: center; gap: 0.4rem;
}
.btn-htc-primary { width: 100%; justify-content: center; padding: 0.75rem; }
.btn-htc:hover, .btn-htc-primary:hover { background: var(--htc-primary-mid); color: var(--htc-surface); text-decoration: none; }
.btn-htc-outline {
    background: transparent; color: var(--htc-primary); border: 1px solid var(--htc-border);
    border-radius: var(--htc-radius-sm); padding: 0.45rem 0.9rem; font-weight: 600; font-size: 0.85rem;
}
.btn-htc-sm { padding: 0.4rem 0.85rem; font-size: 0.8rem; }
.btn-logout {
    background: transparent; color: var(--htc-text-muted); border: 1px solid var(--htc-border);
    border-radius: var(--htc-radius-sm); padding: 0.4rem; font-size: 0.8rem; width: 100%; cursor: pointer;
}
.btn-logout:hover { background: var(--htc-sidebar-hover); color: var(--htc-text); }

/* App shell */
.app-shell { display: flex; min-height: 100vh; position: relative; overflow-x: hidden; }
.app-sidebar {
    width: 220px; background: var(--htc-sidebar-bg); color: var(--htc-sidebar-text);
    flex-shrink: 0; display: flex; flex-direction: column;
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 200;
    transition: transform 0.25s ease;
    border-right: 1px solid var(--htc-border);
}
.app-sidebar .brand-block { padding: var(--htc-space-lg) var(--htc-space-xl) var(--htc-space-md); border-bottom: 1px solid var(--htc-border); }
.app-sidebar .logo-text { color: var(--htc-text); font-weight: 700; font-size: 0.95rem; line-height: 1.3; }
.app-sidebar .logo-sub { font-size: 0.68rem; color: var(--htc-text-muted); margin-top: 0.1rem; }
.app-sidebar nav { flex: 1; padding: var(--htc-space-sm) var(--htc-space-sm); overflow-y: auto; }
.app-sidebar .nav-link {
    color: var(--htc-sidebar-text); padding: 0.5rem 0.75rem;
    display: flex; align-items: center; gap: 0.55rem; text-decoration: none;
    font-size: 0.8125rem; font-weight: 500; border-radius: var(--htc-radius-sm);
    margin-bottom: 2px; border-left: none;
}
.app-sidebar .nav-link:hover { background: var(--htc-sidebar-hover); color: var(--htc-text); text-decoration: none; }
.app-sidebar .nav-link.active {
    background: var(--htc-sidebar-active); color: var(--htc-sidebar-active-text);
    font-weight: 600;
}
.app-sidebar .nav-link.active i { color: var(--htc-sidebar-active-text); }
.app-sidebar .nav-link-danger { color: var(--htc-accent) !important; margin-top: auto; border-top: 1px solid var(--htc-border); padding-top: var(--htc-space-md); }
.app-sidebar .nav-link-danger:hover { background: var(--htc-accent-soft); }
.app-sidebar .user-block { padding: var(--htc-space-md) var(--htc-space-xl); border-top: 1px solid var(--htc-border); }
.app-sidebar .user-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.app-sidebar .user-avatar {
    width: 32px; height: 32px; border-radius: 50%; background: var(--htc-primary-light);
    color: var(--htc-surface); display: flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 0.8rem; flex-shrink: 0;
}
.app-sidebar .user-name { color: var(--htc-text); font-weight: 600; font-size: 0.8125rem; }
.app-sidebar .user-role { font-size: 0.68rem; color: var(--htc-text-muted); }

.app-main-wrap { flex: 1; margin-left: 220px; min-height: 100vh; display: flex; flex-direction: column; }
.sidebar-backdrop { display: none; }
.app-topbar {
    background: var(--htc-surface); border-bottom: 1px solid var(--htc-border);
    padding: 0.65rem 1.25rem; display: flex; justify-content: space-between; align-items: center;
    position: sticky; top: 0; z-index: 50;
}
.topbar-left { display: flex; align-items: center; gap: 0.65rem; min-width: 0; }
.topbar-subtitle { font-size: 0.72rem; color: var(--htc-text-muted); margin-top: 0.05rem; }
.app-topbar h1 { font-size: 1rem; font-weight: 600; margin: 0; color: var(--htc-text); }
.app-topbar .role-badge {
    background: #eff6ff; color: var(--htc-primary-light);
    padding: 0.2rem 0.65rem; border-radius: 999px; font-size: 0.7rem; font-weight: 600;
}
.sidebar-toggle {
    display: none; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; border: 1px solid var(--htc-border);
    border-radius: var(--htc-radius-sm); background: var(--htc-surface); color: var(--htc-primary);
    flex-shrink: 0; cursor: pointer;
}
.sidebar-toggle:hover { background: var(--htc-sidebar-hover); }
.app-main { padding: var(--htc-space-lg) 1.25rem 1.5rem; flex: 1; }

.page-header h2 { font-size: 1.2rem; font-weight: 700; color: var(--htc-text); margin: 0; }
.page-header p { color: var(--htc-text-muted); font-size: 0.8125rem; margin: 0.15rem 0 0; }
.page-header.compact { margin-bottom: var(--htc-space-lg); }

/* KPI */
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--htc-space-md); margin-bottom: var(--htc-space-lg); }
.kpi-card {
    background: var(--htc-surface); border-radius: var(--htc-radius); padding: var(--htc-space-lg);
    box-shadow: var(--htc-shadow); display: flex; align-items: flex-start; gap: var(--htc-space-md);
    border: 1px solid var(--htc-border);
}
.kpi-icon {
    width: 44px; height: 44px; border-radius: var(--htc-radius-sm);
    display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0;
}
.kpi-icon.blue { background: var(--htc-bg); color: var(--htc-primary-light); }
.kpi-icon.red { background: var(--htc-danger-bg); color: var(--htc-accent); }
.kpi-icon.green { background: var(--htc-success-bg); color: var(--htc-success); }
.kpi-icon.amber { background: var(--htc-warning-bg); color: var(--htc-warning); }
.kpi-label { font-size: 0.75rem; font-weight: 600; color: var(--htc-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.kpi-value { font-size: 1.75rem; font-weight: 700; color: var(--htc-text); line-height: 1.2; }
.kpi-sub { font-size: 0.75rem; color: var(--htc-text-muted); margin-top: 0.15rem; }

/* Cards */
.content-card {
    background: var(--htc-surface); border-radius: var(--htc-radius);
    box-shadow: var(--htc-shadow); border: 1px solid var(--htc-border); overflow: hidden;
}
.content-card .card-header-htc {
    padding: 1rem 1.25rem; border-bottom: 1px solid var(--htc-border);
    font-weight: 600; font-size: 0.9rem; color: var(--htc-primary);
    display: flex; justify-content: space-between; align-items: center;
}
.panel { background: var(--htc-surface); border-radius: var(--htc-radius); border: 1px solid var(--htc-border); box-shadow: var(--htc-shadow); margin-bottom: 1rem; overflow: hidden; }
.panel-header { padding: 0.85rem 1.25rem; border-bottom: 1px solid var(--htc-border); font-weight: 600; font-size: 0.9rem; color: var(--htc-primary); background: var(--htc-bg); }
.panel-body { padding: 1.25rem; }

.alert-banner {
    background: var(--htc-danger-bg); color: var(--htc-accent); border: 1px solid var(--htc-danger-bg);
    border-radius: var(--htc-radius-sm); padding: 0.85rem 1rem; margin-bottom: 1rem;
    font-size: 0.9rem; display: flex; align-items: center; gap: 0.5rem;
}
.alert-banner.info { background: var(--htc-bg); color: var(--htc-primary-light); border-color: var(--htc-primary-light); }
.flash-msg {
    background: var(--htc-bg); color: var(--htc-primary-light); padding: 0.85rem 1rem;
    border-radius: var(--htc-radius-sm); margin-bottom: 1rem; font-size: 0.85rem; border: 1px solid var(--htc-primary-light);
    box-shadow: 0 1px 2px rgba(43, 108, 176, 0.06);
}

/* Tables */
.table-htc { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.table-htc thead th {
    background: var(--htc-sidebar-hover); padding: 0.65rem 1rem; text-align: left; font-weight: 600;
    color: var(--htc-text-muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em;
    border-bottom: 1px solid var(--htc-border);
}
.table-htc tbody td { padding: 0.7rem 1rem; border-bottom: 1px solid var(--htc-bg); vertical-align: middle; }
.table-htc tbody tr:hover { background: var(--htc-sidebar-hover); }

.badge-status { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.7rem; font-weight: 600; }
.badge-status.active { background: var(--htc-bg); color: var(--htc-primary-light); }
.badge-status.draft { background: var(--htc-bg); color: var(--htc-text-muted); }
.badge-status.delivered { background: var(--htc-success-bg); color: var(--htc-success); }
.badge-status.alert { background: var(--htc-danger-bg); color: var(--htc-accent); }

.badge-variance { background: var(--htc-danger-bg); color: var(--htc-accent); padding: 0.15rem 0.5rem; border-radius: 4px; font-size: 0.75rem; font-weight: 600; }

@keyframes pulse-warn {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(229, 62, 62, 0.4); }
    70% { transform: scale(1.02); box-shadow: 0 0 0 6px rgba(229, 62, 62, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(229, 62, 62, 0); }
}
.badge-variance-danger {
    animation: pulse-warn 2s infinite;
    background: var(--htc-danger-bg);
    color: var(--htc-accent);
    border: 1px solid var(--htc-danger-bg);
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-block;
}

.alert-list-item {
    padding: 0.75rem 1.25rem; border-bottom: 1px solid var(--htc-bg);
    display: flex; justify-content: space-between; align-items: center;
    text-decoration: none; color: inherit;
}
.alert-list-item:hover { background: var(--htc-sidebar-hover); text-decoration: none; }
.alert-list-item:last-child { border-bottom: none; }

.role-hint {
    background: var(--htc-warning-bg); border: 1px solid var(--htc-warning-bg); border-radius: var(--htc-radius-sm);
    padding: 0.75rem 1rem; font-size: 0.85rem; color: var(--htc-warning); margin-bottom: 1.25rem;
}

.form-field { margin-bottom: 0.75rem; }
.form-field label {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--htc-text);
    display: block;
    margin-bottom: 0.4rem;
}
.form-field input, .form-field select, .form-field textarea {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--htc-bg);
    border-radius: 10px;
    background: var(--htc-bg);
    color: var(--htc-text);
    font-size: 0.95rem;
    line-height: 1.4;
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
    outline: none;
    border-color: rgba(43, 108, 176, 0.45);
    background: var(--htc-surface);
    box-shadow: 0 0 0 3px rgba(43, 108, 176, 0.1);
}
.form-field input::placeholder,
.form-field textarea::placeholder {
    color: var(--htc-text-muted);
}
.form-field textarea {
    min-height: 110px;
    resize: vertical;
}
.form-field select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--htc-text-muted) 50%), linear-gradient(135deg, var(--htc-text-muted) 50%, transparent 50%);
    background-position: calc(100% - 18px) calc(1em + 2px), calc(100% - 13px) calc(1em + 2px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 2.25rem;
}
.field-help {
    margin-top: 0.35rem;
    font-size: 0.8rem;
    color: var(--htc-text-muted);
    line-height: 1.45;
}
.field-error {
    margin-top: 0.35rem;
    font-size: 0.8rem;
    color: var(--htc-accent);
    line-height: 1.45;
}
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.25rem;
}
.form-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.form-panel {
    background: var(--htc-surface);
    border: 1px solid var(--htc-border);
    border-radius: var(--htc-radius);
    padding: 1.25rem;
    box-shadow: var(--htc-shadow);
}
.form-panel-header {
    margin-bottom: 1rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--htc-primary);
}
.readonly-panel { background: var(--htc-sidebar-hover); border-radius: var(--htc-radius-sm); padding: 1rem; }
.readonly-panel p { margin: 0 0 0.35rem; font-size: 0.9rem; }

.loan-box {
    background: var(--htc-warning-bg); border: 1px solid var(--htc-warning-bg); border-radius: var(--htc-radius-sm);
    padding: 0.85rem; margin-top: 0.75rem; font-size: 0.85rem;
}
.record-list { list-style: none; padding: 0; margin: 0.75rem 0 0; }
.record-list li { padding: 0.5rem 0; border-bottom: 1px solid var(--htc-bg); font-size: 0.85rem; }
.record-list li:last-child { border-bottom: none; }

/* Charts Grid */
.dashboard-charts-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.5rem;
}

.chart-container {
    padding: 1.5rem;
    position: relative;
    height: 350px;
    width: 100%;
}

.chart-side-col {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.net-cash-card {
    background-color: rgba(0, 168, 107, 0.1);
    color: var(--htc-success);
    padding: 0.8rem 1.2rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    font-size: 0.95rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.system-status-card .status-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 1rem;
}

.system-status-card .status-item {
    font-size: 0.9rem;
    color: var(--htc-text);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

@media (max-width: 992px) {
    .dashboard-charts-grid { grid-template-columns: 1fr; }
    .kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .grid-2, .grid-detail { grid-template-columns: 1fr; }
    .app-sidebar {
        transform: translateX(-100%);
        box-shadow: 20px 0 40px rgba(15, 45, 92, 0.18);
    }
    body.sidebar-open .app-sidebar { transform: translateX(0); }
    .sidebar-backdrop {
        display: block; position: fixed; inset: 0; z-index: 150; background: rgba(15, 23, 42, 0.48);
        opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
    }
    body.sidebar-open .sidebar-backdrop { opacity: 1; pointer-events: auto; }
    .sidebar-toggle { display: inline-flex; }
    .app-main-wrap { margin-left: 0; }
}
@media (max-width: 768px) {
    .login-split { grid-template-columns: 1fr; }
    .app-topbar { padding: 0.85rem 1rem; }
    .app-main { padding: 1.15rem 1rem 1.75rem; }
    .kpi-grid { grid-template-columns: 1fr; }
    .page-header.flex-start { flex-direction: column; gap: 1rem; }
    .page-header .btn-htc { width: 100%; justify-content: center; }
    .role-hint { line-height: 1.5; }
    .form-grid { grid-template-columns: 1fr; }
}

/* ── Transactions split-pane ── */
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--htc-space-md); margin-bottom: var(--htc-space-lg); }
.metric-box {
    background: var(--htc-surface); border: 1px solid var(--htc-border);
    border-radius: var(--htc-radius-sm); padding: var(--htc-space-md) var(--htc-space-lg);
    box-shadow: var(--htc-shadow);
}
.metric-box .label { font-size: 0.68rem; color: var(--htc-text-muted); text-transform: uppercase; font-weight: 600; letter-spacing: 0.04em; }
.metric-box .value { font-size: 1.35rem; font-weight: 700; color: var(--htc-text); margin-top: 0.15rem; }

.filters-bar {
    display: grid; grid-template-columns: 1fr auto; gap: var(--htc-space-md);
    margin-bottom: var(--htc-space-md); background: var(--htc-surface);
    padding: var(--htc-space-sm); border-radius: var(--htc-radius-sm); border: 1px solid var(--htc-border);
}
.search-input-wrap { position: relative; display: flex; align-items: center; }
.search-input-wrap i { position: absolute; left: 0.65rem; color: var(--htc-text-muted); font-size: 0.85rem; }
.search-input-wrap input {
    width: 100%; padding: 0.45rem 0.75rem 0.45rem 2rem; border: 1px solid var(--htc-border);
    border-radius: var(--htc-radius-sm); font-size: 0.8125rem; background: var(--htc-sidebar-hover);
}
.filter-select {
    padding: 0.45rem 1.75rem 0.45rem 0.75rem; border: 1px solid var(--htc-border);
    border-radius: var(--htc-radius-sm); font-size: 0.8125rem; background: var(--htc-sidebar-hover);
}

.tabs-row { display: flex; gap: var(--htc-space-sm); margin-bottom: var(--htc-space-md); }
.tab-btn {
    background: var(--htc-border); border: 1px solid var(--htc-border); padding: 0.35rem 0.9rem;
    border-radius: var(--htc-radius-sm); font-size: 0.8125rem; font-weight: 600;
    color: var(--htc-text-muted); cursor: pointer; display: inline-flex; align-items: center; gap: 0.3rem; text-decoration: none;
}
.tab-btn.active { background: var(--htc-surface); color: var(--htc-primary-light); border-color: #bfdbfe; }

.split-layout { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, 1fr); gap: var(--htc-space-md); align-items: start; }
.list-pane { background: var(--htc-surface); border: 1px solid var(--htc-border); border-radius: var(--htc-radius); box-shadow: var(--htc-shadow); overflow: hidden; }
.list-pane-header { padding: var(--htc-space-md) var(--htc-space-lg); border-bottom: 1px solid var(--htc-border); }
.list-pane-header h3 { font-size: 0.95rem; font-weight: 700; color: var(--htc-text); margin: 0; }
.list-pane-header p { font-size: 0.75rem; color: var(--htc-text-muted); margin: 0.1rem 0 0; }

.interactive-row { cursor: pointer; transition: background-color 0.15s; }
.interactive-row:hover { background-color: var(--htc-sidebar-hover) !important; }
.interactive-row.selected { background-color: #eff6ff !important; box-shadow: inset 3px 0 0 var(--htc-primary-light); }

.detail-pane {
    background: var(--htc-surface); border: 1px solid var(--htc-border); border-radius: var(--htc-radius);
    padding: var(--htc-space-lg); box-shadow: var(--htc-shadow); position: sticky; top: calc(52px + var(--htc-space-md));
    max-height: calc(100vh - 80px); overflow-y: auto;
}
.detail-pane h3 { font-size: 1rem; font-weight: 700; color: var(--htc-text); margin: 0 0 0.1rem; }
.detail-pane .subtitle { font-size: 0.75rem; color: var(--htc-text-muted); margin-bottom: var(--htc-space-md); }
.detail-section { border-top: 1px solid var(--htc-border); padding: var(--htc-space-md) 0; }
.detail-section-title { font-size: 0.68rem; font-weight: 700; color: var(--htc-text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: var(--htc-space-sm); }
.detail-row { display: flex; justify-content: space-between; font-size: 0.8125rem; margin-bottom: 0.35rem; gap: 0.5rem; }
.detail-row span:first-child { color: var(--htc-text-muted); flex-shrink: 0; }
.detail-row span:last-child { font-weight: 600; color: var(--htc-text); text-align: right; }
.detail-progress .track { height: 6px; background: var(--htc-border); border-radius: 999px; overflow: hidden; margin-top: 0.25rem; }
.detail-progress .fill { height: 100%; background: linear-gradient(90deg, var(--htc-primary-light), #60a5fa); border-radius: inherit; }
.timeline-list { display: flex; flex-direction: column; gap: 0.45rem; }
.timeline-item { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8125rem; font-weight: 500; color: var(--htc-text-muted); }
.timeline-item.active { color: var(--htc-text); font-weight: 600; }
.timeline-item i { font-size: 0.9rem; color: #cbd5e1; }
.timeline-item.active i { color: var(--htc-success); }
.btn-full-width {
    width: 100%; display: block; text-align: center; background: #f1f5f9; border: 1px solid var(--htc-border);
    color: var(--htc-primary-light); padding: 0.5rem; border-radius: var(--htc-radius-sm);
    font-size: 0.8125rem; font-weight: 600; margin-top: var(--htc-space-md); text-decoration: none;
}
.btn-full-width:hover { background: var(--htc-border); text-decoration: none; }

/* ── Analytics ── */
.page-toolbar { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--htc-space-md); margin-bottom: var(--htc-space-lg); flex-wrap: wrap; }
.page-filters { display: flex; gap: var(--htc-space-sm); }
.page-filters select { padding: 0.4rem 0.75rem; border: 1px solid var(--htc-border); border-radius: var(--htc-radius-sm); font-size: 0.8125rem; background: var(--htc-surface); }

.info-banner {
    background: #eff6ff; border: 1px solid #bfdbfe; border-radius: var(--htc-radius-sm);
    padding: var(--htc-space-md) var(--htc-space-lg); margin-bottom: var(--htc-space-lg);
    display: flex; gap: var(--htc-space-md); align-items: flex-start;
}
.info-banner i { color: var(--htc-primary-light); font-size: 1.1rem; margin-top: 0.1rem; }
.info-banner h4 { margin: 0 0 0.25rem; font-size: 0.875rem; color: var(--htc-text); }
.info-banner p { margin: 0; font-size: 0.8125rem; color: var(--htc-text-muted); line-height: 1.5; }

.param-card {
    background: var(--htc-surface); border: 1px solid var(--htc-border); border-radius: var(--htc-radius);
    padding: var(--htc-space-lg); margin-bottom: var(--htc-space-lg); box-shadow: var(--htc-shadow);
    display: grid; grid-template-columns: 1fr auto; gap: var(--htc-space-lg); align-items: center;
}
.param-grid { display: grid; grid-template-columns: repeat(2, minmax(140px, 1fr)); gap: var(--htc-space-md); }
.param-grid label { display: block; font-size: 0.75rem; font-weight: 600; color: var(--htc-text-muted); margin-bottom: 0.25rem; }
.param-grid input {
    width: 100%; padding: 0.45rem 0.65rem; border: 1px solid var(--htc-border);
    border-radius: var(--htc-radius-sm); font-size: 0.875rem;
}
.margin-highlight {
    background: var(--htc-success-bg); border: 1px solid var(--htc-success-bg); border-radius: var(--htc-radius-sm);
    padding: var(--htc-space-md) var(--htc-space-lg); text-align: center; min-width: 180px;
}
.margin-highlight .label { font-size: 0.75rem; color: var(--htc-success); font-weight: 600; }
.margin-highlight .value { font-size: 1.75rem; font-weight: 700; color: var(--htc-success); line-height: 1.2; }
.margin-highlight .via { font-size: 0.75rem; color: var(--htc-text-muted); margin-top: 0.15rem; }

.analytics-kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--htc-space-md); margin-bottom: var(--htc-space-lg); }
.analytics-kpi {
    background: var(--htc-surface); border: 1px solid var(--htc-border); border-radius: var(--htc-radius-sm);
    padding: var(--htc-space-md); display: flex; align-items: center; gap: var(--htc-space-md);
}
.analytics-kpi i { font-size: 1.1rem; }
.analytics-kpi .kpi-text .label { font-size: 0.68rem; color: var(--htc-text-muted); text-transform: uppercase; font-weight: 600; }
.analytics-kpi .kpi-text .val { font-size: 1rem; font-weight: 700; color: var(--htc-text); }

.analytics-split { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr); gap: var(--htc-space-md); align-items: start; }
.supplier-card {
    background: var(--htc-surface); border: 1px solid var(--htc-border); border-radius: var(--htc-radius);
    padding: var(--htc-space-lg); box-shadow: var(--htc-shadow); margin-bottom: var(--htc-space-md);
}
.supplier-card.best { border-color: var(--htc-success-bg); }
.supplier-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--htc-space-md); }
.supplier-card-header h3 { margin: 0; font-size: 1rem; }
.best-badge { background: var(--htc-success-bg); color: var(--htc-success); font-size: 0.68rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 999px; }
.supplier-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--htc-space-sm); margin-bottom: var(--htc-space-md); }
.supplier-metric { text-align: center; }
.supplier-metric .val { font-size: 1.1rem; font-weight: 700; }
.supplier-metric .lbl { font-size: 0.68rem; color: var(--htc-text-muted); }
.score-bar { height: 6px; background: var(--htc-border); border-radius: 999px; overflow: hidden; margin-top: 0.25rem; }
.score-bar .fill { height: 100%; background: var(--htc-success); border-radius: inherit; }
.supplier-detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--htc-space-sm); font-size: 0.8125rem; }
.supplier-detail-grid div { background: var(--htc-sidebar-hover); border-radius: var(--htc-radius-sm); padding: 0.45rem 0.55rem; }
.supplier-detail-grid .lbl { display: block; font-size: 0.65rem; color: var(--htc-text-muted); }
.supplier-note { margin-top: var(--htc-space-md); font-size: 0.8125rem; color: var(--htc-text-muted); font-style: italic; }

.chart-panel {
    background: var(--htc-surface); border: 1px solid var(--htc-border); border-radius: var(--htc-radius);
    padding: var(--htc-space-lg); box-shadow: var(--htc-shadow); margin-bottom: var(--htc-space-md);
}
.chart-panel h4 { margin: 0 0 var(--htc-space-md); font-size: 0.875rem; }

/* ── Documents ── */
.doc-search {
    width: 100%; padding: 0.55rem 0.75rem; border: 1px solid var(--htc-border);
    border-radius: var(--htc-radius-sm); font-size: 0.875rem; margin-bottom: var(--htc-space-lg);
    background: var(--htc-surface);
}
.doc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--htc-space-md); margin-bottom: var(--htc-space-lg); }
.doc-category {
    background: var(--htc-surface); border: 1px solid var(--htc-border); border-radius: var(--htc-radius);
    box-shadow: var(--htc-shadow); overflow: hidden;
}
.doc-category-header {
    padding: var(--htc-space-md) var(--htc-space-lg); border-bottom: 1px solid var(--htc-border);
    display: flex; justify-content: space-between; align-items: center;
}
.doc-category-header h3 { margin: 0; font-size: 0.875rem; }
.doc-count { font-size: 0.75rem; color: var(--htc-text-muted); background: #f1f5f9; padding: 0.15rem 0.5rem; border-radius: 999px; }
.doc-item {
    display: flex; align-items: center; gap: var(--htc-space-md); padding: 0.55rem var(--htc-space-lg);
    border-bottom: 1px solid #f1f5f9; font-size: 0.8125rem;
}
.doc-item:last-child { border-bottom: none; }
.doc-item i { color: #ef4444; font-size: 1.1rem; }
.doc-item-meta { flex: 1; min-width: 0; }
.doc-item-meta .name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-item-meta .sub { font-size: 0.72rem; color: var(--htc-text-muted); }
.doc-actions { display: flex; gap: 0.25rem; }
.doc-actions button, .doc-actions a {
    border: 1px solid var(--htc-border); background: var(--htc-surface); border-radius: var(--htc-radius-sm);
    width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
    color: var(--htc-text-muted); text-decoration: none; font-size: 0.8rem;
}

/* ── Partners split ── */
.partners-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--htc-space-md); }

/* ==========================================================================
   Login Page Overhaul (Gradient & Glassmorphism)
   ========================================================================== */
.login-page-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    position: relative;
    overflow: hidden;
    font-family: var(--htc-font);
}

[data-theme="light"] .login-page-wrapper {
    background: linear-gradient(135deg, var(--htc-sidebar-hover) 0%, var(--htc-border) 100%);
}

.login-page-wrapper::before {
    content: "";
    position: absolute;
    width: 60vw;
    height: 60vw;
    background: radial-gradient(circle, rgba(37,99,235,0.15) 0%, rgba(37,99,235,0) 70%);
    top: -20vw;
    left: -20vw;
    border-radius: 50%;
    z-index: 0;
}

[data-theme="light"] .login-page-wrapper::before {
    background: radial-gradient(circle, rgba(37,99,235,0.05) 0%, rgba(37,99,235,0) 70%);
}

.login-page-wrapper::after {
    content: "";
    position: absolute;
    width: 50vw;
    height: 50vw;
    background: radial-gradient(circle, rgba(16,185,129,0.1) 0%, rgba(16,185,129,0) 70%);
    bottom: -20vw;
    right: -10vw;
    border-radius: 50%;
    z-index: 0;
}

[data-theme="light"] .login-page-wrapper::after {
    background: radial-gradient(circle, rgba(16,185,129,0.05) 0%, rgba(16,185,129,0) 70%);
}

.glass-login-card {
    background: rgba(30, 41, 59, 0.7);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 3rem;
    width: 100%;
    max-width: 440px;
    z-index: 1;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
}

[data-theme="light"] .glass-login-card {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
}

.login-logo {
    width: 80px;
    height: 80px;
    object-fit: contain;
    margin-bottom: 1rem;
    border-radius: 12px;
}

.login-company-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--htc-text);
    margin-bottom: 0.25rem;
    text-align: center;
}

.login-subtitle {
    font-size: 0.85rem;
    color: var(--htc-text-muted);
    margin-bottom: 2rem;
    text-align: center;
}

.glass-login-card form {
    width: 100%;
}

.glass-login-card .form-label-htc {
    color: var(--htc-text);
    text-align: left !important;
    display: block !important;
    width: 100% !important;
    margin-bottom: 0.35rem !important;
}

.glass-login-card .form-control-htc {
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--htc-text);
}

[data-theme="light"] .glass-login-card .form-control-htc {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid var(--htc-border);
}

.glass-login-card .form-control-htc:focus {
    background: rgba(15, 23, 42, 0.8);
    border-color: var(--htc-primary-light);
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

[data-theme="light"] .glass-login-card .form-control-htc:focus {
    background: var(--htc-surface);
}

.glass-login-card .btn-htc-primary {
    width: 100%;
    margin-top: 1rem;
    padding: 0.75rem;
    font-size: 1rem;
}

.partner-column {
    background: var(--htc-surface); border: 1px solid var(--htc-border); border-radius: var(--htc-radius);
    box-shadow: var(--htc-shadow); overflow: hidden;
}
.partner-column-header {
    padding: var(--htc-space-md) var(--htc-space-lg); border-bottom: 1px solid var(--htc-border);
    display: flex; justify-content: space-between; align-items: center;
}
.partner-column-header h3 { margin: 0; font-size: 0.95rem; }
.partner-column-header p { margin: 0.1rem 0 0; font-size: 0.75rem; color: var(--htc-text-muted); }
.partner-card {
    display: flex; align-items: center; gap: var(--htc-space-md); padding: var(--htc-space-md) var(--htc-space-lg);
    border-bottom: 1px solid #f1f5f9;
}
.partner-card:last-child { border-bottom: none; }
.partner-icon {
    width: 36px; height: 36px; border-radius: var(--htc-radius-sm); background: #f1f5f9;
    display: flex; align-items: center; justify-content: center; color: var(--htc-text-muted);
}
.partner-info { flex: 1; min-width: 0; }
.partner-info .name { font-weight: 600; font-size: 0.875rem; }
.partner-info .type { font-size: 0.72rem; color: var(--htc-text-muted); }
.partner-stats { font-size: 0.75rem; color: var(--htc-text-muted); text-align: right; }
.partner-stats strong { display: block; color: var(--htc-text); font-size: 0.8125rem; }
.status-active { color: var(--htc-success); font-size: 0.68rem; font-weight: 700; }

@media (max-width: 1024px) {
    .split-layout, .analytics-split, .partners-split, .doc-grid { grid-template-columns: 1fr; }
    .metric-grid, .analytics-kpi-row { grid-template-columns: repeat(2, 1fr); }
    .param-card { grid-template-columns: 1fr; }
}
@media (max-width: 992px) {
    .detail-pane { position: static; max-height: none; }
}

.introjs-tooltip { background-color: var(--htc-surface); color: var(--htc-text); border: 1px solid var(--htc-primary); }
.introjs-arrow.top { border-bottom-color: var(--htc-primary); }
.introjs-tooltiptext { color: var(--htc-text); font-family: var(--htc-font); }
.introjs-button { background-color: var(--htc-primary); color: #fff; text-shadow: none; border-radius: var(--htc-radius-sm); }

/* ==========================================================================
   Executive Modern Design Enhancements & Dropdown Reset
   ========================================================================== */

:root {
    --htc-font: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif;
}

body {
    font-family: var(--htc-font);
    -webkit-font-smoothing: antialiased;
}

/* Fix Unstyled Dropdowns & Lists */
ul.dropdown-menu, .dropdown-menu {
    list-style: none !important;
    padding: 0.5rem 0 !important;
    margin: 0.5rem 0 0 0 !important;
    border-radius: 12px !important;
    background: var(--htc-surface) !important;
    border: 1px solid var(--htc-border) !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.25), 0 10px 10px -5px rgba(0, 0, 0, 0.1) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 1050;
    min-width: 190px;
}

ul.dropdown-menu li, .dropdown-menu li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.dropdown-item {
    color: var(--htc-text) !important;
    padding: 0.6rem 1.1rem !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    transition: all 0.2s ease !important;
}

.dropdown-item:hover, .dropdown-item:focus {
    background: var(--htc-sidebar-hover) !important;
    color: var(--htc-primary-light) !important;
    transform: translateX(3px);
}

.dropdown-divider {
    border-top: 1px solid var(--htc-border) !important;
    margin: 0.4rem 0 !important;
    opacity: 0.6;
}

/* Pulsing Live System Dot */
.system-live-pill::before {
    animation: pulse-dot 2s infinite ease-in-out;
}

@keyframes pulse-dot {
    0% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    }
    70% {
        box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}

/* Executive Card Improvements */
.status-card {
    border-radius: 12px;
    border: 1px solid var(--htc-border);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.status-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 28px -4px rgba(0, 0, 0, 0.15);
    border-color: rgba(96, 165, 250, 0.3);
}

/* Enhanced Buttons & Badges */
.btn-htc {
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.btn-htc:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.role-badge {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.15), rgba(96, 165, 250, 0.1));
    border: 1px solid rgba(96, 165, 250, 0.3);
    color: var(--htc-primary-light);
    font-weight: 700;
    padding: 0.35rem 0.85rem;
    border-radius: 20px;
    font-size: 0.75rem;
    letter-spacing: 0.4px;
}

/* ==========================================================================
   Transaction Form Layout & Input Controls
   ========================================================================== */

.form-section-card {
    background: var(--htc-surface);
    border: 1px solid var(--htc-border);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.05);
}

.form-section-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--htc-border);
}

.form-section-header i {
    font-size: 1.25rem;
    color: var(--htc-primary-light);
}

.form-section-header h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--htc-text);
}

.form-section-header p {
    margin: 0.1rem 0 0 0;
    font-size: 0.8rem;
    color: var(--htc-text-muted);
}

.form-control-htc, .form-select-htc {
    width: 100%;
    background-color: var(--htc-bg) !important;
    border: 1px solid var(--htc-border) !important;
    color: var(--htc-text) !important;
    border-radius: 8px !important;
    padding: 0.65rem 0.9rem !important;
    font-size: 0.9rem !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.form-control-htc:focus, .form-select-htc:focus {
    border-color: var(--htc-primary-light) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2) !important;
}

.input-addon-group {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.input-addon-group .form-control-htc,
.input-addon-group input {
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
    margin-bottom: 0;
}

.input-addon-group .addon {
    background: var(--htc-sidebar-hover);
    border: 1px solid var(--htc-border);
    color: var(--htc-text-muted);
    padding: 0.65rem 0.85rem;
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.input-addon-group .addon-prefix {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    border-right: none;
}

.input-addon-group .addon-suffix {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    border-left: none;
}

.input-addon-group .addon-prefix + .form-control-htc,
.input-addon-group .addon-prefix + input,
.input-addon-group .has-prefix {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.input-addon-group .form-control-htc:first-child,
.input-addon-group input:first-child,
.input-addon-group .form-control-htc:not(:last-child),
.input-addon-group input:not(:last-child),
.input-addon-group .has-suffix {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* Live Financial Calculator Box */
.live-calc-box {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(16, 185, 129, 0.05));
    border: 1px solid rgba(96, 165, 250, 0.3);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.25rem;
}

.live-calc-box .calc-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
    color: var(--htc-text-muted);
}

.live-calc-box .calc-formula {
    font-size: 0.75rem;
    color: var(--htc-text-muted);
}

.live-calc-box .calc-value {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--htc-success);
}

/* ==========================================================================
   Modern Login & Signup Page Overhaul
   ========================================================================== */
.login-page-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 50% 20%, #1e293b 0%, #0f172a 100%);
    padding: 2rem 1rem;
}
[data-theme="light"] .login-page-wrapper {
    background: radial-gradient(circle at 50% 20%, #f8fafc 0%, #e2e8f0 100%);
}

.glass-login-card {
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 2.75rem 2.25rem;
    width: 100%;
    max-width: 440px;
    text-align: center;
    position: relative;
}
[data-theme="light"] .glass-login-card {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(226, 232, 240, 0.9);
    box-shadow: 0 20px 30px -10px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.03);
}

.login-brand-badge {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: #ffffff;
    padding: 6px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
    margin: 0 auto 1.25rem auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.login-brand-badge img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.login-company-name {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--htc-text);
    margin-bottom: 0.35rem;
}

.input-password-wrapper {
    position: relative;
    width: 100%;
    display: block;
}
.input-password-wrapper input {
    width: 100% !important;
    padding-right: 44px !important;
}

.password-toggle-btn {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--htc-text-muted, #94a3b8);
    cursor: pointer;
    padding: 6px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    border-radius: 6px;
    transition: color 0.15s ease, background-color 0.15s ease;
}
.password-toggle-btn:hover {
    color: var(--htc-primary-light, #3b82f6);
    background: rgba(59, 130, 246, 0.1);
}

/* ==========================================================================
   Role Identity & Context Banners
   ========================================================================== */
.role-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    background: var(--htc-surface);
    border: 1px solid var(--htc-border);
    color: var(--htc-text);
}

.role-badge-administrator {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.18), rgba(15, 23, 42, 0.5));
    border-color: rgba(251, 191, 36, 0.45);
    color: var(--htc-gold);
}
.role-badge-operations_management {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.18), rgba(15, 23, 42, 0.5));
    border-color: rgba(16, 185, 129, 0.45);
    color: var(--htc-success);
}
.role-badge-finance {
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.18), rgba(15, 23, 42, 0.5));
    border-color: rgba(96, 165, 250, 0.45);
    color: var(--htc-primary-light);
}
.role-badge-invoicing {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.18), rgba(15, 23, 42, 0.5));
    border-color: rgba(6, 182, 212, 0.45);
    color: #38bdf8;
}

[data-theme="light"] .role-badge-administrator {
    background: #fef3c7;
    border-color: #fde68a;
    color: #92400e;
}
[data-theme="light"] .role-badge-operations_management {
    background: #d1fae5;
    border-color: #a7f3d0;
    color: #065f46;
}
[data-theme="light"] .role-badge-finance {
    background: #dbeafe;
    border-color: #bfdbfe;
    color: #1e40af;
}
[data-theme="light"] .role-badge-invoicing {
    background: #cff4fc;
    border-color: #9eeaf9;
    color: #055160;
}

.role-welcome-banner {
    position: relative;
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, var(--htc-surface), var(--htc-bg));
    border: 1px solid var(--htc-border);
    box-shadow: var(--htc-shadow);
    overflow: hidden;
}
.role-welcome-banner::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--htc-primary-light);
}
.role-welcome-banner.banner-admin::before { background: var(--htc-gold); }
.role-welcome-banner.banner-ops::before { background: var(--htc-success); }
.role-welcome-banner.banner-finance::before { background: var(--htc-primary-light); }
.role-welcome-banner.banner-invoicing::before { background: #06b6d4; }

.hover-zoom-card {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease, border-color 0.25s ease !important;
}
.hover-zoom-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px -4px rgba(0, 0, 0, 0.25) !important;
    border-color: var(--htc-primary-light) !important;
}

/* ==========================================================================
   Dashboard Hero Card & Floating Quick Action Dock Redesign
   ========================================================================== */

.dashboard-hero-card {
    background: var(--htc-surface);
    border: 1px solid var(--htc-border);
    border-radius: 14px;
    padding: 1.5rem;
    margin-bottom: 1.75rem;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.18), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: visible;
}

[data-theme="light"] .dashboard-hero-card {
    background: #ffffff;
    border-color: #e2e8f0;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.08), 0 4px 10px -2px rgba(15, 23, 42, 0.04);
}

.dashboard-hero-title {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--htc-text);
    letter-spacing: -0.025em;
    margin-bottom: 0.25rem;
}

.dashboard-role-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--htc-primary-light);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.dashboard-user-greeting {
    font-size: 0.875rem;
    color: var(--htc-text-muted);
    margin-bottom: 0;
}

.dashboard-sync-text {
    font-size: 0.8rem;
    color: var(--htc-text-muted) !important;
}

/* Floating Quick Action Dock */
.quick-action-dock {
    background: var(--htc-sidebar-hover);
    border: 1px solid var(--htc-border);
    border-radius: 10px;
    padding: 0.65rem 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .quick-action-dock {
    background: #f1f5f9;
    border-color: #cbd5e1;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03), 0 4px 12px rgba(15, 23, 42, 0.05);
}

/* Button Hierarchy & Solid Fill Styles */
.btn-action-primary {
    background-color: #10b981 !important; /* Vibrant Emerald Green */
    color: #ffffff !important;
    border: none !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    padding: 0.45rem 1.15rem !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.45rem !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35) !important;
    transition: all 0.2s ease !important;
}
.btn-action-primary:hover {
    background-color: #059669 !important;
    color: #ffffff !important;
    transform: translateY(-1.5px) !important;
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.45) !important;
}

.btn-action-primary-blue {
    background-color: #1e40af !important; /* Deep Brand Blue */
    color: #ffffff !important;
    border: none !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    padding: 0.45rem 1.15rem !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.45rem !important;
    box-shadow: 0 4px 12px rgba(30, 64, 175, 0.35) !important;
    transition: all 0.2s ease !important;
}
.btn-action-primary-blue:hover {
    background-color: #1d4ed8 !important;
    color: #ffffff !important;
    transform: translateY(-1.5px) !important;
    box-shadow: 0 6px 16px rgba(30, 64, 175, 0.45) !important;
}

.btn-action-secondary {
    background-color: var(--htc-surface) !important;
    color: var(--htc-text) !important;
    border: 1px solid var(--htc-border) !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    padding: 0.45rem 1rem !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.2s ease !important;
}
[data-theme="light"] .btn-action-secondary {
    background-color: #ffffff !important;
    color: #1e293b !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}
.btn-action-secondary:hover {
    background-color: var(--htc-sidebar-hover) !important;
    color: var(--htc-primary-light) !important;
    border-color: var(--htc-primary-light) !important;
    transform: translateY(-1px) !important;
}
[data-theme="light"] .btn-action-secondary:hover {
    background-color: #f8fafc !important;
    color: #2563eb !important;
    border-color: #2563eb !important;
}

.action-icon {
    font-size: 1.05rem;
    flex-shrink: 0;
}

/* ==========================================================================
   Elderly Usability & High Legibility Mode ([data-legibility="high"])
   ========================================================================== */
html[data-legibility="high"] {
    font-size: 17px !important;
}

html[data-legibility="high"] body {
    line-height: 1.65 !important;
    letter-spacing: 0.2px !important;
}

html[data-legibility="high"] [data-theme="light"] {
    --htc-text: #000000 !important;
    --htc-text-muted: #334155 !important;
    --htc-border: #94a3b8 !important;
}

html[data-legibility="high"] [data-theme="dark"] {
    --htc-text: #ffffff !important;
    --htc-text-muted: #cbd5e1 !important;
    --htc-border: #64748b !important;
}

html[data-legibility="high"] button,
html[data-legibility="high"] .btn,
html[data-legibility="high"] input,
html[data-legibility="high"] select,
html[data-legibility="high"] textarea {
    min-height: 48px !important;
    font-size: 1.05rem !important;
}

html[data-legibility="high"] .table,
html[data-legibility="high"] table {
    font-size: 1rem !important;
}

html[data-legibility="high"] td,
html[data-legibility="high"] th {
    padding: 1rem 0.75rem !important;
}

html[data-legibility="high"] .card,
html[data-legibility="high"] .panel-body,
html[data-legibility="high"] .detail-card,
html[data-legibility="high"] .cluster-card,
html[data-legibility="high"] .summary-card {
    padding: 1.5rem !important;
    margin-bottom: 1.5rem !important;
}

html[data-legibility="high"] .detail-row {
    padding: 0.75rem 0 !important;
}

html[data-legibility="high"] .badge {
    font-size: 0.85rem !important;
    padding: 0.35rem 0.65rem !important;
}

/* ==========================================================================
   HTC Copilot Slide-Over Drawer
   ========================================================================== */
.copilot-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(4px);
    z-index: 1040;
    transition: opacity 0.3s ease;
}

.copilot-drawer {
    position: fixed;
    top: 0;
    right: -420px;
    width: 420px;
    max-width: 100vw;
    height: 100vh;
    background: var(--htc-surface);
    border-left: 1px solid var(--htc-border);
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.25);
    z-index: 1050;
    display: flex;
    flex-direction: column;
    transition: right 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.copilot-drawer.open {
    right: 0;
}

.copilot-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--htc-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--htc-surface);
}

.copilot-avatar {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.copilot-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.copilot-msg {
    display: flex;
    flex-direction: column;
    max-width: 90%;
}

.copilot-msg.user-msg {
    align-self: flex-end;
}

.copilot-msg.user-msg .copilot-bubble {
    background: var(--htc-primary-light);
    color: #ffffff;
    border-radius: 14px 14px 2px 14px;
}

.copilot-msg.bot-msg {
    align-self: flex-start;
}

.copilot-msg.bot-msg .copilot-bubble {
    background: var(--htc-sidebar-hover);
    color: var(--htc-text);
    border: 1px solid var(--htc-border);
    border-radius: 14px 14px 14px 2px;
}

.copilot-bubble {
    padding: 0.85rem 1rem;
    font-size: 0.88rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.prompt-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.6rem;
}

.copilot-pill {
    background: var(--htc-surface);
    border: 1px solid var(--htc-border);
    color: var(--htc-text);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.3rem 0.6rem;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.copilot-pill:hover {
    border-color: var(--htc-primary-light);
    color: var(--htc-primary-light);
    transform: translateY(-1px);
}

.btn-action-secondary {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.2s ease !important;
}
[data-theme="light"] .btn-action-secondary {
    background-color: #ffffff !important;
    color: #1e293b !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}
.btn-action-secondary:hover {
    background-color: var(--htc-sidebar-hover) !important;
    color: var(--htc-primary-light) !important;
    border-color: var(--htc-primary-light) !important;
    transform: translateY(-1px) !important;
}
[data-theme="light"] .btn-action-secondary:hover {
    background-color: #f8fafc !important;
    color: #2563eb !important;
    border-color: #2563eb !important;
}

.action-icon {
    font-size: 1.05rem;
    flex-shrink: 0;
}

/* ==========================================================================
   Elderly Usability & High Legibility Mode ([data-legibility="high"])
   ========================================================================== */
html[data-legibility="high"] {
    font-size: 17px !important;
}

html[data-legibility="high"] body {
    line-height: 1.65 !important;
    letter-spacing: 0.2px !important;
}

html[data-legibility="high"] [data-theme="light"] {
    --htc-text: #000000 !important;
    --htc-text-muted: #334155 !important;
    --htc-border: #94a3b8 !important;
}

html[data-legibility="high"] [data-theme="dark"] {
    --htc-text: #ffffff !important;
    --htc-text-muted: #cbd5e1 !important;
    --htc-border: #64748b !important;
}

html[data-legibility="high"] button,
html[data-legibility="high"] .btn,
html[data-legibility="high"] input,
html[data-legibility="high"] select,
html[data-legibility="high"] textarea {
    min-height: 48px !important;
    font-size: 1.05rem !important;
}

html[data-legibility="high"] .table,
html[data-legibility="high"] table {
    font-size: 1rem !important;
}

html[data-legibility="high"] .badge {
    font-size: 0.85rem !important;
    padding: 0.35rem 0.65rem !important;
}

/* ==========================================================================
   HTC Copilot Slide-Over Drawer
   ========================================================================== */
.copilot-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(4px);
    z-index: 1040;
    transition: opacity 0.3s ease;
}

.copilot-drawer {
    position: fixed;
    top: 0;
    right: -420px;
    width: 420px;
    max-width: 100vw;
    height: 100vh;
    background: var(--htc-surface);
    border-left: 1px solid var(--htc-border);
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.25);
    z-index: 1050;
    display: flex;
    flex-direction: column;
    transition: right 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.copilot-drawer.open {
    right: 0;
}

.copilot-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--htc-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--htc-surface);
}

.copilot-avatar {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.copilot-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.copilot-msg {
    display: flex;
    flex-direction: column;
    max-width: 90%;
}

.copilot-msg.user-msg {
    align-self: flex-end;
}

.copilot-msg.user-msg .copilot-bubble {
    background: var(--htc-primary-light);
    color: #ffffff;
    border-radius: 14px 14px 2px 14px;
}

.copilot-msg.bot-msg {
    align-self: flex-start;
}

.copilot-msg.bot-msg .copilot-bubble {
    background: var(--htc-sidebar-hover);
    color: var(--htc-text);
    border: 1px solid var(--htc-border);
    border-radius: 14px 14px 14px 2px;
}

.copilot-bubble {
    padding: 0.85rem 1rem;
    font-size: 0.88rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.prompt-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.6rem;
}

.copilot-pill {
    background: var(--htc-surface);
    border: 1px solid var(--htc-border);
    color: var(--htc-text);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.3rem 0.6rem;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.copilot-pill:hover {
    border-color: var(--htc-primary-light);
    color: var(--htc-primary-light);
    transform: translateY(-1px);
}

.copilot-footer {
    padding: 0.85rem 1.25rem;
    border-top: 1px solid var(--htc-border);
    background: var(--htc-surface);
}

.fs-8 {
    font-size: 0.72rem !important;
}

/* Document Category Card Scrollbars */
.doc-category-scroll {
    max-height: 380px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--htc-border) transparent;
}

.doc-category-scroll::-webkit-scrollbar {
    width: 6px;
}

.doc-category-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.doc-category-scroll::-webkit-scrollbar-thumb {
    background-color: var(--htc-border);
    border-radius: 4px;
}

.doc-category-scroll::-webkit-scrollbar-thumb:hover {
    background-color: var(--htc-primary-light);
}

/* Audit Log Formatted Payload Diff Styling */
.audit-diff-table {
    width: 100%;
    margin-bottom: 0;
}

.audit-diff-table th {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--htc-text-muted);
    background: rgba(0, 0, 0, 0.03);
    padding: 0.6rem 0.85rem;
}

.audit-diff-table td {
    padding: 0.65rem 0.85rem;
    font-size: 0.84rem;
    vertical-align: middle;
}

.audit-val-old {
    color: #dc2626;
    background: rgba(220, 38, 38, 0.08);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    display: inline-block;
    font-size: 0.82rem;
    font-family: inherit;
    word-break: break-word;
}

.audit-val-new {
    color: #059669;
    background: rgba(5, 150, 105, 0.08);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    display: inline-block;
    font-size: 0.82rem;
    font-family: inherit;
    word-break: break-word;
}

.audit-val-unchanged {
    color: var(--htc-text-muted);
    font-size: 0.82rem;
}

/* ==========================================================================
   Standalone Auth Pages Layout (Login, 2FA, Signup)
   ========================================================================== */
.login-page-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--htc-bg);
    padding: 2rem 1rem;
    position: relative;
    overflow: hidden;
}

.glass-login-card {
    width: 100%;
    max-width: 440px;
    background: var(--htc-surface);
    border: 1px solid var(--htc-border);
    border-radius: 20px;
    padding: 2.5rem 2rem;
    box-shadow: var(--htc-shadow), 0 20px 40px rgba(0, 0, 0, 0.25);
    text-align: center;
    position: relative;
    z-index: 2;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.login-brand-badge {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: rgba(37, 99, 235, 0.1);
    border: 2px solid rgba(96, 165, 250, 0.3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem auto;
    box-shadow: 0 0 20px rgba(37, 99, 235, 0.15);
}

.login-company-name {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--htc-text);
    margin-bottom: 0.4rem;
    letter-spacing: -0.3px;
}

.form-control-htc {
    display: block;
    width: 100%;
    padding: 0.8rem 1rem;
    font-size: 0.95rem;
    color: var(--htc-text);
    background-color: var(--htc-bg);
    border: 1px solid var(--htc-border);
    border-radius: 10px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.form-control-htc:focus {
    border-color: var(--htc-primary-light);
    background-color: var(--htc-surface);
    box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.18);
    outline: none;
}

.otp-token-input {
    font-size: 1.45rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.38em !important;
    text-align: center !important;
    padding: 0.85rem 0.5rem !important;
    font-family: 'Plus Jakarta Sans', monospace, sans-serif !important;
    background-color: var(--htc-bg) !important;
    color: var(--htc-text) !important;
    border: 2px solid var(--htc-border) !important;
    border-radius: 12px !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.2s ease !important;
}

.otp-token-input:focus {
    border-color: var(--htc-primary-light) !important;
    box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.2) !important;
    outline: none !important;
}

.btn-htc-primary {
    display: block;
    width: 100%;
    padding: 0.8rem 1.5rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: #ffffff !important;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    border: none !important;
    border-radius: 10px !important;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3) !important;
    transition: all 0.2s ease !important;
    text-decoration: none;
}

.btn-htc-primary:hover {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4) !important;
    color: #ffffff !important;
}

.btn-htc-primary:active {
    transform: translateY(0);
}

/* ==========================================================================
   UX/UI Refinements & Layout Overhaul
   ========================================================================== */

/* 1. Collapsible Sidebar (Compact Icon Mode) */
.app-sidebar {
    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.app-main-wrap {
    transition: margin-left 0.25s cubic-bezier(0.4, 0, 0.2, 1), margin-right 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

html.sidebar-collapsed .app-sidebar,
body.sidebar-collapsed .app-sidebar {
    width: 68px !important;
    min-width: 68px !important;
}
html.sidebar-collapsed .app-main-wrap,
body.sidebar-collapsed .app-main-wrap {
    margin-left: 68px !important;
}
html.sidebar-collapsed .brand-text-group,
body.sidebar-collapsed .brand-text-group,
html.sidebar-collapsed .nav-label,
body.sidebar-collapsed .nav-label,
html.sidebar-collapsed .user-card-info,
body.sidebar-collapsed .user-card-info,
html.sidebar-collapsed .user-card-dots,
body.sidebar-collapsed .user-card-dots {
    display: none !important;
}
html.sidebar-collapsed .brand-block,
body.sidebar-collapsed .brand-block {
    justify-content: center !important;
    padding: 0.75rem 0.25rem !important;
}
html.sidebar-collapsed .app-sidebar .nav-link,
body.sidebar-collapsed .app-sidebar .nav-link {
    justify-content: center !important;
    padding: 0.75rem 0.5rem !important;
}
html.sidebar-collapsed .sidebar-danger-zone .nav-link,
body.sidebar-collapsed .sidebar-danger-zone .nav-link {
    justify-content: center !important;
}
html.sidebar-collapsed .sidebar-collapse-btn,
body.sidebar-collapsed .sidebar-collapse-btn {
    position: static !important;
    display: flex !important;
    margin: 0 auto !important;
    z-index: 25 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}
html.sidebar-collapsed .brand-block,
body.sidebar-collapsed .brand-block {
    flex-direction: column !important;
    gap: 0.35rem !important;
    cursor: pointer !important;
}
html.sidebar-collapsed .brand-logo-group,
body.sidebar-collapsed .brand-logo-group {
    justify-content: center !important;
}

.user-block .dropdown-menu {
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18) !important;
}
.user-block .dropdown-item:hover {
    background: var(--htc-sidebar-hover) !important;
}

/* 2. Copilot Slide Drawer Push Content Mode */
@media (min-width: 993px) {
    body.copilot-open .app-main-wrap {
        margin-right: 380px !important;
        transition: margin-right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    body.copilot-open .copilot-drawer {
        box-shadow: -4px 0 24px rgba(0, 0, 0, 0.25);
    }
}

/* 3. Sidebar Navigation & Centered Icons */
.app-sidebar .nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.85rem;
    font-size: 0.88rem;
    border-radius: var(--htc-radius-sm);
    transition: background-color 0.2s ease, color 0.2s ease;
}
.app-sidebar .nav-link .nav-icon {
    font-size: 1.15rem;
    line-height: 1;
    width: 22px;
    text-align: center;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* 4. Login Page Overhaul & Visual Softening */
.login-page-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to bottom, rgba(15, 23, 42, 0.72), rgba(15, 23, 42, 0.88)),
                url('../img/login-bg.jpg') center/cover no-repeat fixed !important;
    position: relative;
    padding: 2rem 1rem;
}
[data-theme="light"] .login-page-wrapper {
    background: linear-gradient(to bottom, rgba(241, 245, 249, 0.75), rgba(241, 245, 249, 0.88)),
                url('../img/login-bg.jpg') center/cover no-repeat fixed !important;
}
.glass-login-card {
    background: rgba(30, 41, 59, 0.82) !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
    border-radius: 20px !important;
    padding: 2.75rem 2.25rem !important;
    width: 100%;
    max-width: 450px !important;
    text-align: center;
    position: relative;
    z-index: 2;
}
[data-theme="light"] .glass-login-card {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.15) !important;
}
.login-brand-badge {
    width: 64px !important;
    height: 64px !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 auto 1rem auto !important;
    display: flex;
    align-items: center;
    justify-content: center;
}
.login-brand-badge img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.login-company-name {
    font-size: 1.4rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    color: var(--htc-text) !important;
    margin-bottom: 0.25rem !important;
}
.login-page-wrapper .form-control,
.login-page-wrapper input[type="text"],
.login-page-wrapper input[type="password"] {
    padding: 0.65rem 0.9rem !important;
    border-radius: 8px !important;
    border: 1px solid var(--htc-border) !important;
    background-color: var(--htc-surface) !important;
    color: var(--htc-text) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

/* ==========================================================================
   Stark Outlier / Statistical Warning Confirmation Modal & Button
   ========================================================================== */
.btn-stark-red {
    background-color: #dc2626 !important;
    color: #ffffff !important;
    border: 1px solid #991b1b !important;
    font-weight: 700 !important;
    padding: 0.6rem 1.4rem !important;
    border-radius: 6px !important;
    letter-spacing: 0.02em !important;
    transition: background-color 0.15s ease, border-color 0.15s ease !important;
    cursor: pointer;
}
.btn-stark-red:hover, .btn-stark-red:focus {
    background-color: #b91c1c !important;
    border-color: #7f1d1d !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.3) !important;
}

.stark-outlier-card {
    background-color: var(--htc-surface) !important;
    border: 2px solid #dc2626 !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 36px rgba(220, 38, 38, 0.25) !important;
}
.stark-outlier-header {
    border-bottom: 2px solid #dc2626 !important;
    padding: 1.25rem 1.5rem !important;
}
.stark-outlier-title {
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    color: #dc2626 !important;
    margin: 0 !important;
    letter-spacing: -0.02em !important;
    text-transform: uppercase;
}
.stark-stats-table {
    width: 100%;
    margin-top: 1rem;
    border-collapse: collapse;
    font-size: 0.88rem;
}
.stark-stats-table th, .stark-stats-table td {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--htc-border);
}
.stark-stats-table th {
    background-color: rgba(220, 38, 38, 0.08);
    font-weight: 700;
}

/* ==========================================================================
   Horizontal Process Flowchart Component (Company Process Handoffs)
   ========================================================================== */
.htc-flowchart-card {
    background-color: var(--htc-surface) !important;
    border: 1px solid var(--htc-border) !important;
    border-radius: 12px !important;
    padding: 1.5rem !important;
    margin-bottom: 1.5rem !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

.flowchart-container {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    position: relative;
    width: 100%;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
}

.flowchart-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    flex: 1;
    min-width: 130px;
    z-index: 2;
}

.flowchart-connector {
    position: absolute;
    top: 20px;
    left: 50%;
    width: 100%;
    height: 3px;
    background-color: var(--htc-border);
    z-index: 1;
}

.flowchart-connector.is-completed {
    background-color: #10b981 !important;
}

.flowchart-node {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-color: var(--htc-surface);
    border: 3px solid var(--htc-border);
    color: var(--htc-text-muted);
    font-weight: 800;
    font-size: 0.88rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.65rem;
    position: relative;
    z-index: 2;
    transition: all 0.25s ease;
}

/* Completed Step Node */
.flowchart-step.is-completed .flowchart-node {
    background-color: #10b981 !important;
    border-color: #059669 !important;
    color: #ffffff !important;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.3) !important;
}

/* Current / Active Step Node */
.flowchart-step.is-active .flowchart-node {
    background-color: #2563eb !important;
    border-color: #60a5fa !important;
    color: #ffffff !important;
    box-shadow: 0 0 14px rgba(37, 99, 235, 0.5) !important;
    transform: scale(1.12);
}

/* Returned / Rejected Step Node */
.flowchart-step.is-returned .flowchart-node {
    background-color: #dc2626 !important;
    border-color: #991b1b !important;
    color: #ffffff !important;
    box-shadow: 0 0 14px rgba(220, 38, 38, 0.5) !important;
}

.flowchart-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--htc-text);
    line-height: 1.25;
    margin-bottom: 0.2rem;
}

.flowchart-subtext {
    font-size: 0.72rem;
    color: var(--htc-text-muted);
}

/* ==========================================================================
   Consolidated Uniform Theme & Notifications
   ========================================================================== */
.notif-item {
    background: var(--htc-surface) !important;
    color: var(--htc-text) !important;
    border-color: var(--htc-border) !important;
    transition: background-color 0.15s ease-in-out, transform 0.15s ease-in-out;
}
.notif-item:hover {
    background: var(--htc-sidebar-hover) !important;
    color: var(--htc-text) !important;
}
html[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

.notif-filter-btn {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 0.18rem 0.5rem;
    border-radius: 6px;
    border: 1px solid var(--htc-border);
    background: var(--htc-surface);
    color: var(--htc-text-muted);
    transition: all 0.15s ease-in-out;
    white-space: nowrap;
}
.notif-filter-btn.active, .notif-filter-btn:hover {
    background: var(--htc-sidebar-hover);
    color: var(--htc-primary-light);
    border-color: var(--htc-primary-light);
}

#notifList::-webkit-scrollbar {
    width: 6px;
}
#notifList::-webkit-scrollbar-track {
    background: var(--htc-surface);
}
#notifList::-webkit-scrollbar-thumb {
    background: var(--htc-border);
    border-radius: 4px;
}
#notifList::-webkit-scrollbar-thumb:hover {
    background: var(--htc-primary-mid);
}

/* ==========================================================================
   HT Management System - Consolidated Form Controls & Buttons
   ========================================================================== */
.form-control-htc,
.form-select-htc,
.form-control,
.form-select {
    background-color: var(--htc-surface) !important;
    color: var(--htc-text) !important;
    border: 1px solid var(--htc-border) !important;
    border-radius: 8px !important;
    padding: 0.55rem 0.85rem !important;
    font-size: 0.85rem !important;
    font-family: var(--htc-font) !important;
    box-shadow: none !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
}

.form-control-htc:focus,
.form-select-htc:focus,
.form-control:focus,
.form-select:focus {
    border-color: var(--htc-primary-light) !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2) !important;
    outline: none !important;
}

.form-control-htc[readonly],
.form-control-htc[disabled],
.form-select-htc[disabled] {
    background-color: rgba(30, 41, 59, 0.5) !important;
    color: var(--htc-text-muted) !important;
    border-color: var(--htc-border) !important;
    opacity: 0.85;
}

[data-theme="light"] .form-control-htc,
[data-theme="light"] .form-select-htc,
[data-theme="light"] .form-control,
[data-theme="light"] .form-select {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
}

[data-theme="light"] .form-control-htc[readonly],
[data-theme="light"] .form-control-htc[disabled] {
    background-color: #f1f5f9 !important;
    color: #64748b !important;
}

.btn-htc {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: #ffffff !important;
    border: 1px solid #2563eb;
    border-radius: 8px;
    padding: 0.5rem 1.25rem;
    font-size: 0.85rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.btn-htc:hover {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.35);
}

.btn-htc-outline {
    background: transparent;
    color: var(--htc-text) !important;
    border: 1px solid var(--htc-border);
    border-radius: 8px;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.btn-htc-outline:hover {
    background: var(--htc-sidebar-hover);
    border-color: var(--htc-primary-light);
    transform: translateY(-1px);
}

/* 5. Smooth Loading & Page Transition Controls */
#htcTopProgressBar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, #3b82f6, #6366f1, #10b981);
    z-index: 99999;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.7);
    pointer-events: none;
}

.app-main-wrap {
    animation: htcSmoothPageFade 0.3s ease-out;
}

@keyframes htcSmoothPageFade {
    from { opacity: 0.88; transform: translateY(2px); }
    to { opacity: 1; transform: translateY(0); }
}

.skeleton-shimmer {
    background: linear-gradient(90deg, var(--htc-surface) 25%, var(--htc-sidebar-hover) 50%, var(--htc-surface) 75%);
    background-size: 200% 100%;
    animation: htcShimmer 1.5s infinite;
    border-radius: 6px;
}

@keyframes htcShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}