:root {
    --primary: #262626;
    --secondary1: #7F7F7F;
    --secondary2: #364867;
    --button: #6E86A3;

    --font: 'Poppins', sans-serif;
}

body {
    font-family: var(--font);
    margin: 0;
    background: #f5f5f5;
}

/* ==============================
   HEADER
   ============================== */

.app-header {
    height: 46px;
    background: var(--primary);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    box-sizing: border-box;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 13px;
}

.header-user {
    font-weight: 600;
}

.header-datetime {
    opacity: 0.9;
}

/* ==============================
   LAYOUT
   ============================== */

.app-container {
    display: flex;
    height: calc(100vh - 46px);
}

.sidebar {
    width: 260px;
    background: #ffffff;
    overflow-y: auto;
    border-right: 1px solid #ddd;
}

.content {
    flex: 1;
    padding: 20px;
    overflow: auto;
}

/* ==============================
   SIDEBAR MENU
   ============================== */

.menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.menu-section > .menu-title {
    display: block;
    padding: 12px;
    font-weight: 600;
    cursor: pointer;
    background: #f0f0f0;
    border-bottom: 1px solid #ddd;
}

.menu-section ul {
    display: none;
    list-style: none;
    margin: 0;
    padding: 6px 0;
}

.menu-section.open ul {
    display: block;
}

.submenu > span {
    display: block;
    padding: 8px 12px;
    font-weight: 500;
    color: #444;
}

.submenu ul {
    list-style: none;
    margin: 4px 0 8px 0;
    padding-left: 18px;
}

.submenu ul li {
    margin-bottom: 4px;
}

.menu a {
    display: block;
    padding: 8px 14px;
    text-decoration: none;
    color: #000;
    font-size: 14px;
}

.submenu a {
    padding: 6px 12px;
    font-size: 13px;
}

.menu a:hover {
    background: #f5f5f5;
}

.menu .active a {
    background: var(--primary);
    color: #ffffff;
    border-radius: 4px;
}

/* ==============================
   BUTTONS / FORMS
   ============================== */

button,
.btn {
    background: var(--button);
    color: #ffffff;
    border: none;
    padding: 8px 14px;
    cursor: pointer;
    font-family: var(--font);
    font-size: 14px;
    border-radius: 6px;
}

button:hover,
.btn:hover {
    opacity: 0.9;
}

/* ==============================
   FORM FIELDS
   ============================== */

label {
    font-weight: 500;
    margin-bottom: 4px;
}

input,
select {
    padding: 6px 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: var(--font);
}

/* ==============================
   GLOBAL TABLE / CRUD STYLES
   ============================== */

.table-wrap {
    width: 100%;
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
}

thead th {
    background: #f2f2f2;
    font-weight: 600;
    text-align: left;
    padding: 12px 14px;
    border: 1px solid #d0d0d0;
    white-space: nowrap;
    font-size: 14px;
}

tbody td {
    padding: 10px 14px;
    border: 1px solid #d0d0d0;
    vertical-align: top;
    font-size: 14px;
}

tbody tr:nth-child(even) {
    background: #fafafa;
}

tbody tr:hover {
    background: #f0f6ff;
}

td a {
    margin-right: 6px;
    white-space: nowrap;
}

.content table {
    max-width: 100%;
}

/* ==============================
   BREADCRUMBS
   ============================== */

.breadcrumbs {
    background: #ffffff;
    border-bottom: 1px solid #ddd;
    padding: 10px 20px;
    font-size: 13px;
}

.breadcrumbs a {
    color: var(--secondary2);
    text-decoration: none;
    font-weight: 500;
}

.breadcrumbs a:hover {
    text-decoration: underline;
}

.breadcrumbs span {
    color: #555;
}

.breadcrumb-sep {
    margin: 0 6px;
    color: #999;
}

/* ==============================
   AGING BUCKET COLORS
   ============================== */

:root {
    --age-total: #D0D0D0;
    --age-current: #6F86A1;
    --age-30: #E08A4F;
    --age-60: #D15A45;
    --age-90: #B44745;
    --age-120: #7E1F2A;
}


/*
:root {
    --age-total: #2E3A59;
    --age-current: #D0D0D0;
    --age-30: #FF9C5A;
    --age-60: #F06A00;
    --age-90: #C2471C;
    --age-120: #8B1E2D;
}
*/


/* ==============================
   TILE LAYOUT (FIXED)
   ============================== */

.tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 18px;
    margin-bottom: 26px;
}

.tile {
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: 0 8px 18px rgba(0,0,0,0.15);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 110px;
}

/* Typography inside tiles */
.tile .tile-title {
    font-size: 13px;
    font-weight: 600;
    opacity: 0.95;
}

.tile .tile-value {
    font-size: 20px;
    font-weight: 600;
    margin-top: 4px;
}

.tile .tile-percent {
    font-size: 12px;
    margin-top: 6px;
    opacity: 0.9;
}

/* Text contrast */
.tile.light { color: #000; }
.tile.dark  { color: #fff; }

/* Bucket backgrounds */
.tile.total   { background: var(--age-total); color: #000; }
.tile.credit  { background: #EEF1F6; color: #000; }
.tile.current { background: var(--age-current); }
.tile.d30     { background: var(--age-30); }
.tile.d60     { background: var(--age-60); color: #fff; }
.tile.d90     { background: var(--age-90); color: #fff; }
.tile.d120    { background: var(--age-120); color: #fff; }

/* Toggle buttons spacing */
.tile-toggle {
    margin-bottom: 14px;
}

.tile-toggle .btn {
    margin-right: 6px;
}


/* ==============================
   DOUGHNUT CHARTS (GLOBAL)
   ============================== */

.doughnut-section {
    margin: 36px 0 40px 0;
}

.doughnut-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 32px;
}

.doughnut-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 20px 22px 24px;
    box-shadow: 0 8px 18px rgba(0,0,0,0.12);
}

.doughnut-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 16px;
    color: #333;
}

/* 🔒 Square container = round doughnut */
.doughnut-wrap {
    width: 300px;
    height: 300px;
    margin: 0 auto;
    position: relative;
}

.doughnut-wrap canvas {
    width: 100% !important;
    height: 100% !important;
}

/* ==============================
   VETTING VINTAGE PIVOTS
   ============================== */

.pivot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(520px, 1fr));
    gap: 32px;
    margin-bottom: 40px;
}

.pivot-grid table thead th:not(:first-child),
.pivot-grid table tbody td:not(:first-child) {
    text-align: center;
}

.pivot-grid table thead th:first-child,
.pivot-grid table tbody td:first-child {
    text-align: left;
}

/* ==============================
   POSITIVE / NEGATIVE INDICATORS
   ============================== */

.pos {
    color: #1a9c5d;
    font-weight: 600;
}

.neg {
    color: #c0392b;
    font-weight: 600;
}

.arrow {
    font-size: 12px;
    margin-left: 4px;
}

.filters-bar {
    display: flex;
    gap: 20px;
    margin: 20px 0 30px;
}

.filter-group {
    display: flex;
    flex-direction: column;
    min-width: 180px;
}

.filter-group label {
    font-size: 0.85rem;
    color: #555;
    margin-bottom: 4px;
}

.filter-group select {
    padding: 6px 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.9rem;
}



/* ==============================
   AGILITY CREDIT VETTING COLORS
   ============================== */

:root {
    --vet-accepted: #648E82;
    --vet-rejected: #BC3804;
    --vet-uptake:   #364867;
    --vet-breakage:#895033;
}

/* Reject reason colors */
:root {
    --reject-delinquent-debtor: #C00000;
    --reject-unacceptable-credit-risk: #648E82;
    --reject-under-debt-review: #BC3804;
    --reject-affordability-concerns: #C48362;
    --reject-verification-failed: #364867;
    --reject-adverse-judgement: #E2A4AE;
}


/* ==============================
   SELECT-STYLE CHECKBOX DROPDOWN
   ============================== */

.select-checkbox {
    position: relative;
    width: 220px;
}

.select-display {
    padding: 6px 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    font-size: 0.9rem;
    cursor: pointer;
}

.select-options {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: 220px;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-top: 4px;
    padding: 8px;
    z-index: 1000;
}

.select-checkbox.open .select-options {
    display: block;
}

.select-options label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    margin-bottom: 6px;
}

.checkbox-actions {
    font-size: 0.8rem;
    margin-bottom: 8px;
}


/* ==============================
   VETTING TILES
   ============================== */

.vetting-tiles .tile-body {
    font-size: 13px;
    line-height: 1.5;
}

.vetting-tiles .tile-footer {
    font-size: 12px;
    margin-top: 6px;
}

.mom-up {
    color: #1a9c5d;
    font-weight: 600;
}

.mom-down {
    color: #c0392b;
    font-weight: 600;
}

.vet-approved { background:#EEF3F1; color:#000; }
.vet-rejected { background:#BC3804; color:#fff; }
.vet-total    { background:#e0e0e0; color:#000; }
.vet-uptake   { background:#364867; color:#fff; }
.vet-breakage { background:#895033; color:#fff; }


/* ==============================
   TILE HEADING EMPHASIS
   ============================== */

.tile .tile-title {
    font-size: 15px;      /* was ~13px */
    font-weight: 700;     /* stronger emphasis */
    margin-bottom: 6px;
}

/* Inline percentages inside tiles */
.tile-pct {
    font-size: 12px;
    opacity: 0.9;
}


/* ==============================
   UPTAKE TILE – CONTRAST FIX
   ============================== */

/* Improve MoM visibility on dark Uptake tile */
.vet-uptake .pos {
    color: #6EE7B7;   /* light mint green */
    font-weight: 600;
}

.vet-uptake .neg {
    color: #FCA5A5;   /* soft light red */
    font-weight: 600;
}

/* Neutral / flat fallback if ever used */
.vet-uptake .flat {
    color: #E5E7EB;
}