/* ============================================================
   TrustLedger Admin — Brand-aligned theme
   Typography: Inter
   Palette:
     Deep Blue   #0B3C5D    Emerald   #1F7A63
     Gold/Amber  #F2A900    Dark      #1F2933
     Light       #F5F7FA    White     #FFFFFF
   ============================================================ */

:root {
    --tl-primary:    #0B3C5D;
    --tl-primary-2:  #0E4F77;
    --tl-primary-3:  #163E5A;
    --tl-secondary:  #1F7A63;
    --tl-secondary-2:#2A9A7E;
    --tl-accent:     #F2A900;
    --tl-accent-2:   #FFC04A;
    --tl-dark:       #1F2933;
    --tl-muted:      #66707C;
    --tl-light:      #F5F7FA;
    --tl-white:      #FFFFFF;
    --tl-border:     #E2E8F0;
    --tl-border-2:   #EEF1F6;
    --tl-danger:     #B23A48;
    --tl-info:       #3B82F6;
    --tl-shadow:     0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 18px rgba(15, 23, 42, 0.06);
    --tl-shadow-lg:  0 10px 30px rgba(11, 60, 93, 0.18), 0 2px 6px rgba(15, 23, 42, 0.06);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: var(--tl-light);
    color: var(--tl-dark);
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a, .btn-link { color: var(--tl-primary); text-decoration: none; }
a:hover     { color: var(--tl-primary-2); }

h1, h2, h3, h4 { color: var(--tl-dark); font-weight: 700; letter-spacing: -0.015em; margin: 0 0 12px; }
h1 { font-size: 26px; }
h2 { font-size: 18px; font-weight: 600; }
h3 { font-size: 15px; font-weight: 600; }

.page-title    { font-size: 24px; font-weight: 700; margin: 0 0 4px; color: var(--tl-dark); letter-spacing: -0.02em; }
.page-subtitle { font-size: 13px; color: var(--tl-muted); margin: 0 0 24px; }

/* ----- Card ----- */
.tl-card {
    background: var(--tl-white);
    border: 1px solid var(--tl-border);
    border-radius: 14px;
    box-shadow: var(--tl-shadow);
    padding: 22px;
}
.tl-card + .tl-card { margin-top: 16px; }
.tl-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.tl-card-header h2 { margin: 0; }

/* ----- Hero card (gradient) — mirrors mobile balance card ----- */
.tl-hero {
    position: relative;
    overflow: hidden;
    color: var(--tl-white);
    background: linear-gradient(135deg, #0B3C5D 0%, #163E5A 55%, #1F7A63 130%);
    border-radius: 18px;
    padding: 26px 28px;
    box-shadow: var(--tl-shadow-lg);
    margin-bottom: 22px;
}
.tl-hero::after {
    /* soft gold orb in the corner */
    content: "";
    position: absolute;
    right: -60px; top: -60px;
    width: 220px; height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(242, 169, 0, 0.30) 0%, rgba(242, 169, 0, 0) 70%);
    pointer-events: none;
}
.tl-hero-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.10em;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
}
.tl-hero-amount {
    margin-top: 6px;
    font-size: 38px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.05;
    display: flex;
    align-items: baseline;
    gap: 10px;
}
.tl-hero-amount .tl-hero-currency {
    font-size: 14px;
    font-weight: 700;
    color: var(--tl-accent);
    letter-spacing: 0.04em;
}
.tl-hero-meta {
    margin-top: 14px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 13px;
}

/* Inline mini-stat row inside the hero card */
.tl-hero-row {
    margin-top: 22px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-top: 18px;
}
.tl-hero-stat-label { font-size: 11px; color: rgba(255, 255, 255, 0.65); text-transform: uppercase; letter-spacing: 0.08em; }
.tl-hero-stat-value { font-size: 18px; font-weight: 700; margin-top: 4px; }
.tl-hero-stat-value.gold { color: var(--tl-accent); }
.tl-hero-stat-value.emerald { color: #4FD1A8; }

/* ----- Action chips row (colored circular icons + label) ----- */
.tl-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}
.tl-action {
    background: var(--tl-white);
    border: 1px solid var(--tl-border);
    border-radius: 14px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: inherit;
    text-decoration: none;
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
    box-shadow: var(--tl-shadow);
}
.tl-action:hover {
    transform: translateY(-1px);
    border-color: var(--tl-primary);
    box-shadow: 0 8px 20px rgba(11, 60, 93, 0.10);
    color: inherit;
}
.tl-action-icon {
    flex: 0 0 42px;
    width: 42px; height: 42px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    color: var(--tl-white);
    font-weight: 800;
    font-size: 18px;
    letter-spacing: -0.02em;
}
.tl-action-icon.blue   { background: var(--tl-primary); }
.tl-action-icon.green  { background: var(--tl-secondary); }
.tl-action-icon.gold   { background: var(--tl-accent); color: var(--tl-dark); }
.tl-action-icon.dark   { background: var(--tl-dark); }
.tl-action-text  { display: flex; flex-direction: column; }
.tl-action-title { font-weight: 600; font-size: 14px; color: var(--tl-dark); }
.tl-action-sub   { font-size: 12px; color: var(--tl-muted); margin-top: 1px; }

/* ----- Stats grid (secondary stats below hero) ----- */
.tl-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}
.tl-stat {
    background: var(--tl-white);
    border: 1px solid var(--tl-border);
    border-radius: 14px;
    padding: 18px 20px;
    box-shadow: var(--tl-shadow);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.tl-stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--tl-muted); font-weight: 600; }
.tl-stat-value { font-size: 24px; font-weight: 700; color: var(--tl-primary); letter-spacing: -0.015em; margin-top: 4px; }
.tl-stat-accent .tl-stat-value { color: var(--tl-secondary); }
.tl-stat-gold   .tl-stat-value { color: var(--tl-accent); }
.tl-stat-trend  { font-size: 12px; color: var(--tl-secondary); margin-top: 2px; font-weight: 600; }

/* ----- Buttons ----- */
.tl-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 18px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-weight: 600; font-size: 13px;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.05s ease, box-shadow 0.12s ease;
    font-family: inherit;
}
.tl-btn:active { transform: translateY(1px); }
.tl-btn-primary   { background: var(--tl-primary);   color: var(--tl-white); }
.tl-btn-primary:hover   { background: var(--tl-primary-2); }
.tl-btn-secondary { background: var(--tl-secondary); color: var(--tl-white); }
.tl-btn-secondary:hover { background: var(--tl-secondary-2); }
.tl-btn-accent    { background: var(--tl-accent);    color: var(--tl-dark); }
.tl-btn-accent:hover    { background: var(--tl-accent-2); }
.tl-btn-outline   { background: transparent;         color: var(--tl-primary); border-color: var(--tl-primary); }
.tl-btn-outline:hover   { background: var(--tl-primary); color: var(--tl-white); }
.tl-btn[disabled] { opacity: 0.55; cursor: not-allowed; }

/* ----- Forms ----- */
.tl-form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.tl-form-group label {
    font-size: 11px; font-weight: 700; color: var(--tl-muted);
    text-transform: uppercase; letter-spacing: 0.06em;
}
.tl-input {
    padding: 11px 14px;
    border-radius: 10px;
    border: 1px solid var(--tl-border);
    font-size: 14px;
    background: var(--tl-white);
    color: var(--tl-dark);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    font-family: inherit;
}
.tl-input:focus { border-color: var(--tl-primary); box-shadow: 0 0 0 3px rgba(11, 60, 93, 0.12); }

/* ----- Badges ----- */
.tl-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.tl-badge-active     { background: rgba(31, 122, 99, 0.12); color: var(--tl-secondary); }
.tl-badge-suspended  { background: rgba(242, 169, 0, 0.18); color: #8a6200; }
.tl-badge-closed     { background: rgba(178, 58, 72, 0.12); color: var(--tl-danger); }
.tl-badge-completed  { background: rgba(31, 122, 99, 0.12); color: var(--tl-secondary); }
.tl-badge-pending    { background: rgba(102, 112, 124, 0.18); color: var(--tl-muted); }
.tl-badge-reversed   { background: rgba(178, 58, 72, 0.12); color: var(--tl-danger); }
.tl-badge-failed     { background: rgba(178, 58, 72, 0.12); color: var(--tl-danger); }
.tl-badge-system     { background: rgba(11, 60, 93, 0.12); color: var(--tl-primary); }
.tl-badge-transfer   { background: rgba(31, 122, 99, 0.12); color: var(--tl-secondary); }
.tl-badge-reversal   { background: rgba(242, 169, 0, 0.18); color: #8a6200; }

/* ----- Avatar / circular type icon ----- */
.tl-avatar {
    width: 38px; height: 38px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--tl-white);
    font-weight: 700;
    font-size: 13px;
    flex: 0 0 38px;
    letter-spacing: -0.02em;
}
.tl-avatar.blue   { background: var(--tl-primary); }
.tl-avatar.green  { background: var(--tl-secondary); }
.tl-avatar.gold   { background: var(--tl-accent); color: var(--tl-dark); }
.tl-avatar.dark   { background: var(--tl-dark); }
.tl-avatar.muted  { background: rgba(102, 112, 124, 0.20); color: var(--tl-muted); }

/* ----- Activity list (mobile-style transaction tiles) ----- */
.tl-activity { display: flex; flex-direction: column; gap: 10px; }
.tl-activity-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 12px;
    border-radius: 12px;
    transition: background-color 0.12s ease;
}
.tl-activity-row:hover { background: #FAFBFD; }
.tl-activity-main { flex: 1; min-width: 0; }
.tl-activity-title {
    font-weight: 600; font-size: 14px; color: var(--tl-dark);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tl-activity-meta {
    font-size: 12px; color: var(--tl-muted);
    margin-top: 2px;
}
.tl-activity-amount { font-weight: 700; font-size: 14px; }
.tl-activity-amount.in  { color: var(--tl-secondary); }
.tl-activity-amount.out { color: var(--tl-danger); }
.tl-activity-amount.neutral { color: var(--tl-primary); }

/* ----- Table ----- */
.tl-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.tl-table th, .tl-table td { padding: 12px; text-align: left; border-bottom: 1px solid var(--tl-border-2); }
.tl-table th {
    background: #FAFBFD; font-weight: 600; color: var(--tl-muted);
    text-transform: uppercase; letter-spacing: 0.06em; font-size: 11px;
}
.tl-table tr:hover td { background: #FAFBFD; }
.tl-mono { font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: 12px; }

.tl-amount-positive { color: var(--tl-secondary); font-weight: 600; }
.tl-amount-negative { color: var(--tl-danger); font-weight: 600; }
.tl-text-muted { color: var(--tl-muted); }

/* ----- Alerts ----- */
.tl-alert { padding: 11px 14px; border-radius: 10px; margin: 12px 0; font-size: 13px; }
.tl-alert-error   { background: rgba(178, 58, 72, 0.10); color: var(--tl-danger);    border: 1px solid rgba(178, 58, 72, 0.25); }
.tl-alert-success { background: rgba(31, 122, 99, 0.10); color: var(--tl-secondary); border: 1px solid rgba(31, 122, 99, 0.25); }

.tl-loading { padding: 24px; text-align: center; color: var(--tl-muted); }

/* ----- Brand pillar bar (mirrors mobile footer ribbon) ----- */
.tl-pillarbar {
    background: var(--tl-primary);
    color: var(--tl-white);
    padding: 12px 28px;
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    justify-content: space-between;
    font-size: 12px;
    letter-spacing: 0.02em;
}
.tl-pillarbar-item {
    display: flex; align-items: center; gap: 8px;
    color: rgba(255, 255, 255, 0.85);
}
.tl-pillarbar-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--tl-accent);
    flex: 0 0 6px;
}

/* Override default Blazor error UI */
#blazor-error-ui {
    background: #fff8e1;
    border-top: 1px solid var(--tl-accent);
    color: var(--tl-dark);
    bottom: 0; box-shadow: 0 -1px 2px rgba(0,0,0,0.2); display: none;
    left: 0; padding: 0.6rem 1.25rem 0.7rem 1.25rem; position: fixed; width: 100%; z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }

/* Validation messages */
.validation-message { color: var(--tl-danger); font-size: 12px; }