/* Ridhaa overrides -- loaded after bootstrap.min.css. Chrome pattern ported from AMCapital / tscv5. */

body {
  background-color: #f5f6f8;
}

.highlight-search {
  background-color: #ffff00;
  font-weight: bold;
}

.req {
  font-weight: 500;
}
.req::after {
  content: " *";
  color: #dc3545;
  font-weight: 700;
  font-size: 1.2em;
  vertical-align: -0.15em;
}

/* A search input + adjacent action button: joined as a normal Bootstrap
   .input-group on desktop, but stacked as two full-width blocks on mobile.
   Scoped to this class (not all .input-group usage) so ordinary input
   groups elsewhere keep Bootstrap's default un-stacked behavior. */
@media (max-width: 767.98px) {
  .search-action-group {
    flex-direction: column;
  }
  .search-action-group > .form-control,
  .search-action-group > .btn {
    width: 100%;
    border-radius: var(--bs-border-radius) !important;
  }
}

/* KYC-based row text color on mobile only -- once the Type/Branch/Status/KYC
   columns are hidden below md (see the customers table's d-md-table-cell
   classes), the KYC column's colored text disappears with them, so the
   row's own text carries that same signal instead. Desktop keeps plain
   text since the KYC column is still visible there. The Name cell's link
   needs its own rule too: an <a> has its own color rule, which otherwise
   wins over the color it would normally inherit from the row. */
@media (max-width: 767.98px) {
  .table > tbody > tr.kyc-row-approved > *,
  .table > tbody > tr.kyc-row-approved > * > a {
    color: #146c43 !important;
  }
  .table > tbody > tr.kyc-row-rejected > *,
  .table > tbody > tr.kyc-row-rejected > * > a {
    color: #b02a37 !important;
  }
}

/* ============================================================
   Top bar: ONE light row (tscv5 style) -- logo + name, plain text menu with carets, account menu at the right; slide-in drawer below lg.
   Brand colours are placeholders: swap --app-brand / --app-accent (and web-assets/img/logo.svg) once a theme colour is chosen.
   ============================================================ */
:root { --app-brand: #2c3e50; --app-brand-dark: #1e2b37; --app-accent: #3d8bfd; --app-nav-h: 4rem; }

#top_nav.app-navbar { background: #fff; min-height: var(--app-nav-h); padding: 0; border-bottom: 1px solid #e3e8ee; box-shadow: 0 2px 14px rgba(20, 35, 60, .09); }
#top_nav .app-brand { display: flex; align-items: center; gap: .65rem; margin: 0 1.5rem 0 0; padding: .5rem 0; font-size: 1.3rem; font-weight: 700; letter-spacing: -.015em; color: #1b2a3b; }
#top_nav .app-brand:hover, #top_nav .app-brand:focus { color: #1b2a3b; }
#top_nav .app-logo { width: 2rem; height: 2rem; margin: 0; vertical-align: middle; }
#top_nav .navbar-toggler { border: 0; padding: .4rem .55rem; }
#top_nav .navbar-nav .nav-link { color: #2b3a4a; font-weight: 500; font-size: 1rem; }
#top_nav .navbar-nav .nav-link:hover, #top_nav .navbar-nav .nav-link:focus { color: var(--bs-primary); }
#top_nav .navbar-nav .nav-link.active { color: var(--bs-primary); font-weight: 600; }
#top_nav .dropdown-menu { border: 1px solid #e3e8ee; border-radius: .6rem; box-shadow: 0 .6rem 1.6rem rgba(20, 35, 60, .14); padding: .4rem 0; min-width: 12.5rem; }
#top_nav .dropdown-item { padding: .55rem 1.15rem; color: #2b3a4a; }
#top_nav .dropdown-item:hover, #top_nav .dropdown-item:focus { background: #f1f5fb; color: var(--bs-primary); }
#top_nav .dropdown-item.active, #top_nav .dropdown-item:active { background: #e8f0fe; color: var(--bs-primary); font-weight: 600; }
#top_nav .dropdown-item.text-danger:hover, #top_nav .dropdown-item.text-danger:focus { background: #fdecee; color: #b02a37; }
#top_nav .app-account > .nav-item > .nav-link { max-width: 17rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* the page starts below the fixed bar */
#page-content.after-nav-full, #page-content.after-nav-simple { padding-top: calc(var(--app-nav-h) + 1.4rem); }

/* desktop: roomy click targets and an underline for where you are */
@media (min-width: 992px) {
  #top_nav .app-mainmenu .nav-link { padding: 1.4rem .9rem; position: relative; }
  #top_nav .app-mainmenu .nav-link::before { content: ''; position: absolute; left: .9rem; right: .9rem; bottom: .75rem; height: 3px; border-radius: 2px; background: var(--bs-primary); opacity: 0; transition: opacity .12s ease; }
  #top_nav .app-mainmenu .nav-link:hover::before { opacity: .3; }
  #top_nav .app-mainmenu .nav-link.active::before { opacity: 1; }
  #top_nav .app-account .nav-link { padding: 1.4rem .25rem 1.4rem .9rem; }
  #top_nav .dropdown-menu { margin-top: -.2rem; }
}

/* phone/tablet: the menu slides in from the right */
@media (max-width: 991.98px) {
  #appNavbar { --bs-offcanvas-width: 300px; }
  .app-offcanvas-header { background: #f6f8fb; border-bottom: 1px solid #e3e8ee; padding: .9rem 1rem; }
  .app-offcanvas-id { display: flex; align-items: center; gap: .7rem; min-width: 0; }
  .app-offcanvas-avatar { width: 2.5rem; height: 2.5rem; border-radius: 50%; background: #1b2a3b; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; flex: none; }
  .app-offcanvas-who { min-width: 0; } .app-offcanvas-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .app-offcanvas-role { color: #6c757d; font-size: .75rem; }
  #appNavbar .offcanvas-body { padding: 0 0 1rem; overflow-y: auto; display: flex; flex-direction: column; }
  #top_nav .navbar-nav .nav-link { padding: .85rem 1.1rem; border-bottom: 1px solid #eef1f5; }
  #top_nav .navbar-nav .nav-link.active { background: #eef4ff; box-shadow: inset 3px 0 0 var(--bs-primary); }
  #top_nav .app-nav-icon { width: 1.5rem; margin-right: .5rem; color: #6c7c8c; }
  #top_nav .dropdown-menu { position: static; border: 0; border-radius: 0; box-shadow: none; background: #f8fafc; padding: 0; margin: 0; }
  #top_nav .dropdown-item { padding: .7rem 1.1rem .7rem 3rem; border-bottom: 1px solid #eef1f5; }
  .app-offcanvas-account-label { padding: .9rem 1.1rem .35rem; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6c757d; border-top: 6px solid #f1f4f8; margin-top: .5rem; }
  .app-account .dropdown-menu { display: block; position: static; background: transparent; }
  .app-account .dropdown-item { padding-left: 1.1rem; }
}

/* Search box in a card header: no focus glow (scoped to the search group only). */
.search-action-group .form-control:focus { box-shadow: none; border-color: var(--bs-border-color, #ced4da); }

/* Stat tiles on a record's page */
.stat-tile .stat-label { color: #6c757d; font-size: .8rem; }
.stat-tile .stat-value { font-weight: 600; }

/* Printing (loan statements): hide the app chrome and the controls, keep the cards flat */
@media print { .navbar, .no-print, #back-to-top, .app-footer, footer { display: none !important; } body { padding-top: 0 !important; background: #fff !important; } .card { box-shadow: none !important; border: 1px solid #ccc !important; } .table-responsive { overflow: visible !important; } }

/* Help (the user manual inside the app) */
.help-content h1 { font-size: 1.6rem; border-bottom: 2px solid var(--bs-primary); padding-bottom: .4rem; margin-bottom: 1rem; }
.help-content h2 { font-size: 1.25rem; margin-top: 2rem; } .help-content h3 { font-size: 1.05rem; margin-top: 1.4rem; }
.help-content .help-note { border-left: 4px solid var(--bs-primary); background: var(--bs-tertiary-bg); padding: .6rem 1rem; margin: 1rem 0; }
.help-content .help-note p:last-child { margin-bottom: 0; } .help-content code { font-size: .85em; }
.help-content .help-table th { white-space: normal; } .help-content .header-section-number { margin-right: .35rem; color: var(--bs-secondary-color); }
.help-toc .list-group-item { font-size: .9rem; }
.help-toc .list-group-item.active .text-muted { color: rgba(255,255,255,.8) !important; }

/* Collapsible detail sections (native <details>) */
.app-details > summary { cursor: pointer; list-style: none; position: relative; padding-right: 2.5rem; }
.app-details > summary::-webkit-details-marker { display: none; }
.app-details > summary::after { content: ''; position: absolute; right: 1.1rem; top: 50%; width: .55rem; height: .55rem; border-right: 2px solid #6c757d; border-bottom: 2px solid #6c757d; transform: translateY(-70%) rotate(45deg); transition: transform .15s ease; }
.app-details[open] > summary::after { transform: translateY(-30%) rotate(-135deg); }
.app-details > .card-body > .card:last-child, .app-details > .card-body > .row:last-child { margin-bottom: 0 !important; }

/* Empty states */
.empty-state .empty-icon { font-size: 2.6rem; }

/* Dashboard */
.dash-tile { border-left: 4px solid var(--bs-primary); transition: box-shadow .12s ease; }   /* no transform on hover: a moving layer made the tiles repaint with a grey band on some browsers */
.dash-tile:hover { box-shadow: 0 .4rem 1rem rgba(0,0,0,.12) !important; }
.dash-success { border-left-color: var(--bs-success); } .dash-danger { border-left-color: var(--bs-danger); } .dash-warning { border-left-color: var(--bs-warning); }
.dash-icon { font-size: 1.35rem; color: #6c757d; } .dash-success .dash-icon { color: var(--bs-success); } .dash-danger .dash-icon { color: var(--bs-danger); } .dash-warning .dash-icon { color: #b58105; }
.dash-value { font-size: 1.55rem; line-height: 1.2; color: #1f2933; }
.dash-danger .dash-value { color: var(--bs-danger); }
.attn-icon { width: 2.4rem; height: 2.4rem; border-radius: .6rem; display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; flex: none; }
.attn-primary { background: rgba(13,110,253,.12); color: var(--bs-primary); } .attn-warning { background: rgba(255,193,7,.2); color: #8a6300; } .attn-danger { background: rgba(220,53,69,.12); color: var(--bs-danger); }
.dash-bar { height: .65rem; background: #e9ecef; }
.dash-chart { display: flex; align-items: flex-end; gap: .35rem; height: 170px; }
.dash-col { flex: 1; display: flex; flex-direction: column; height: 100%; min-width: 0; }
.dash-colbar-wrap { flex: 1; display: flex; align-items: flex-end; }
.dash-colbar { width: 100%; background: var(--bs-primary); border-radius: .3rem .3rem 0 0; min-height: 0; opacity: .85; }
.dash-colbar:hover { opacity: 1; } .dash-colbar-zero { background: #ced4da; height: 2px !important; opacity: 1; }
.dash-collabel { text-align: center; font-size: .72rem; color: #6c757d; margin-top: .25rem; }

/* Branding */
.app-footer { margin-top: 1rem; border-top: 1px solid #e3e7eb; }

/* ---- Visual system: calmer, consistent (2026-11) ---------------------------------------------------------------------------------------- */
:root { --app-ink: #1f2933; --app-muted: #5b6b7c; --app-line: #dfe5ea; --app-soft: #f8fafc; }
body { color: var(--app-ink); }
h1, .h1, h2, .h2, .h3, .h4, .h5 { font-weight: 600; letter-spacing: -.01em; }
.card { border-radius: .65rem; border-color: var(--app-line); }
.card-header { font-weight: 600; background: var(--app-soft); border-bottom-color: var(--app-line); padding: .7rem 1rem; }
.card-header .text-muted.small { font-weight: 400; }
/* tables: lighter headers, quieter rows (cell padding is Bootstrap's own table-sm: no override) */
.table { --bs-table-striped-bg: rgba(27, 42, 59, .028); --bs-table-hover-bg: rgba(59, 130, 246, .07); }
.table > thead > tr > th { font-size: .76rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--app-muted); border-bottom: 2px solid var(--app-line); white-space: nowrap; }
/* reference codes: neutral, not pink */
code { color: #3b4a5a; background: #eef1f5; padding: .1rem .35rem; border-radius: .25rem; font-size: .84em; }
/* soft status chips: the one way a status is shown */
.status-chip { font-weight: 600; font-size: .74rem; padding: .38em .75em; letter-spacing: .01em; }
.chip-success { background: #dff3e7; color: #17663a; } .chip-danger { background: #fbe3e6; color: #9b1c2c; } .chip-warning { background: #fff1cc; color: #7a5700; }
.chip-secondary { background: #e8ecf0; color: #4a5866; } .chip-primary { background: #dbe8fd; color: #174ea6; }
/* buttons: readable warning outline, quieter links */
.btn-outline-warning { --bs-btn-color: #8a6300; --bs-btn-border-color: #d9a400; --bs-btn-hover-bg: #ffc107; --bs-btn-hover-border-color: #ffc107; --bs-btn-hover-color: #1f2933; --bs-btn-active-bg: #ffc107; --bs-btn-active-color: #1f2933; }
.btn { font-weight: 500; }
a { text-underline-offset: .15em; }
.stat-tile .stat-label { text-transform: none; letter-spacing: 0; color: var(--app-muted); }
.alert-primary { background: #eaf2ff; border-color: #cfe0fb; color: #123a73; }
/* a visible keyboard focus everywhere */
:focus-visible { outline: 3px solid rgba(59, 130, 246, .55); outline-offset: 2px; }
.form-control:focus, .form-select:focus { box-shadow: 0 0 0 .2rem rgba(59, 130, 246, .2); }
/* money inputs read like money */
input[data-money] { font-variant-numeric: tabular-nums; text-align: right; }
/* long forms keep their buttons in reach */
.sticky-actions { position: sticky; bottom: 0; z-index: 5; background: rgba(255,255,255,.96); border-top: 1px solid var(--app-line); padding: .75rem 0; margin-top: 1rem; backdrop-filter: blur(4px); }

/* hamburger: quiet focus ring instead of a heavy box */
#top_nav .navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(61, 139, 253, .25); outline: 0; }
#top_nav .navbar-toggler { border-radius: .5rem; }
/* phone numbers never break across lines */
td.text-nowrap, .phone-nowrap { white-space: nowrap; }

/* Bootstrap form validation (app.js): an OPTIONAL field that was left empty is not painted green once the form has been checked */
.was-validated .form-control[data-optional-empty]:valid { border-color: var(--bs-border-color); background-image: none; padding-right: .75rem; box-shadow: none; }
.was-validated .form-select[data-optional-empty]:valid { border-color: var(--bs-border-color); background-image: var(--bs-form-select-bg-img); padding-right: 2.25rem; box-shadow: none; }
.was-validated .invalid-feedback { font-size: .8rem; }

/* The public onboarding is built to be as accessible as possible: no animation, no transition, no smooth scrolling, nothing that flashes or moves. */
.public-flow *, .public-flow *::before, .public-flow *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
/* The public landing page has no top bar: its own large logo is the brand. The public apply pages use the same large logo block (owner preference, 7 Nov 2026); only the staff sign in page keeps the small top bar. */
#page-content.no-topbar { padding-top: 2rem; }

/* public onboarding: skip link, step list, support box */
.skip-link { position: absolute; left: .5rem; top: .5rem; z-index: 2000; background: #fff; padding: .5rem .75rem; border-radius: .25rem; }
.oa-steps .oa-step-later { color: #5b6670; }
.oa-steps a, .oa-steps span { display: inline-block; padding: .25rem 0; }
.public-flow .btn { min-height: 44px; }
.public-flow main:focus { outline: none; }

/* phone field = country box + number. Wide screens: side by side (the box is as wide as its text). Phones: the country box on its own line so nothing is clipped. */
.phone-field .phone-cc { flex: 0 0 auto; width: auto; }
.phone-field .form-control { min-width: 0; }
@media (max-width: 575.98px) {
  .phone-field { display: block; }
  .phone-field .phone-cc { width: 100%; margin-bottom: .5rem; border-radius: var(--bs-border-radius) !important; }
  .phone-field .form-control { width: 100%; border-radius: var(--bs-border-radius) !important; margin-left: 0 !important; }
}

.brand-link:focus-visible { border-radius: .5rem; }