/* Kafi BI shared styles (loaded by base_template.html after Bootstrap). */

/* ---- Brand green, contrast and focus ----
   Bootstrap's green (#198754) is 4.30:1 on the light navbar, below WCAG AA's 4.5:1 for
   normal text, and only 4.53:1 on white. Green *text* (text-success, link-success, the
   outline buttons, badges) uses the darker #146c43 instead: 6.1:1 on the navbar, 6.5:1
   on white. Filled .btn-success keeps Bootstrap's colour: white on it is already 4.53:1.
   Bootstrap's blue accents (tabs, pagination, focus rings) become green, so pages use
   one accent colour. */
:root {
    --kb-green: #146c43;
    --kb-green-rgb: 20, 108, 67;
    --kb-focus-ring: 0 0 0 .25rem rgba(25, 135, 84, .35);
    --bs-success-rgb: var(--kb-green-rgb);
    --bs-focus-ring-color: rgba(25, 135, 84, .35);
}

.btn-outline-success {
    --bs-btn-color: var(--kb-green);
    --bs-btn-border-color: var(--kb-green);
    --bs-btn-hover-bg: var(--kb-green);
    --bs-btn-hover-border-color: var(--kb-green);
    --bs-btn-active-bg: var(--kb-green);
    --bs-btn-active-border-color: var(--kb-green);
}

.nav-pills {
    --bs-nav-link-color: var(--kb-green);
    --bs-nav-link-hover-color: #0f5132;
    --bs-nav-pills-link-active-bg: var(--bs-green);
}

.pagination {
    --bs-pagination-color: var(--kb-green);
    --bs-pagination-hover-color: #0f5132;
    --bs-pagination-focus-color: #0f5132;
    --bs-pagination-focus-box-shadow: var(--kb-focus-ring);
    --bs-pagination-active-bg: var(--bs-green);
    --bs-pagination-active-border-color: var(--bs-green);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: #75b798;
    box-shadow: var(--kb-focus-ring);
}

.nav-link:focus-visible,
.dropdown-item:focus-visible,
.navbar-brand:focus-visible,
.breadcrumb a:focus-visible {
    outline: 0;
    box-shadow: var(--kb-focus-ring);
    border-radius: var(--bs-border-radius-sm);
}

/* "Skip to content" link (base_template.html): hidden until it receives keyboard focus. */
.kb-skip-link {
    position: absolute;
    left: 1rem;
    top: -3rem;
    z-index: 1100;
    padding: .5rem 1rem;
    background: var(--bs-body-bg);
    color: var(--kb-green);
    border: 2px solid var(--kb-green);
    border-radius: var(--bs-border-radius);
}
.kb-skip-link:focus {
    top: .5rem;
}

/* ---- Card grids: platform landing + every app home (components/app_card.html) ---- */

.kb-card {
    border-color: var(--bs-border-color);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.kb-card:hover,
.kb-card:focus-visible {
    border-color: var(--bs-success);
    box-shadow: 0 .25rem .75rem rgba(25, 135, 84, .15);
    transform: translateY(-2px);
}

.kb-card:focus-visible {
    outline: 2px solid var(--bs-success);
    outline-offset: 2px;
}

/* Full width on phones; capped beside the heading from md up. */
@media (min-width: 768px) {
    .kb-search {
        max-width: 18rem;
    }
}

.kb-empty {
    border: 1px dashed var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}

@media (prefers-reduced-motion: reduce) {
    .kb-card { transition: none; }
    .kb-card:hover { transform: none; }
}

/* ---- Platform landing page (apps/home_page) ---- */

.landing-hero {
    max-width: 32rem;
    padding: 4rem 1rem 3rem;
}

/* ---- Layout: wider containers on large screens ----
   Moved from an inline <style> in base_template.html. The old rules weren't monotonic
   (>=2200px gave 2180px but >=2400px dropped back to 2100px); widths now only grow. */
@media (min-width: 1400px) {
    .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl { max-width: 1390px; }
}
@media (min-width: 1800px) {
    .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl { max-width: 1750px; }
}
@media (min-width: 2200px) {
    .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl { max-width: 2100px; }
}

/* Excel report folder table: the last column (download button) is right-aligned. */
.report-table td:last-child,
.report-table th:last-child {
    text-align: right;
}

/* Embedded dashboards: full container width. iframe-resizer sets the height when the
   embedded page supports it; this is the starting/fallback height. */
.kb-embed {
    display: block;
    width: 100%;
    min-height: 900px;
    border: 0;
}

/* SIA wide tables (T-Point tabs, 20+ columns): keep header/footer labels on one line
   and let DataTables' scrollX scroll horizontally, instead of wrapping each label onto
   3-4 lines. Pinned-column styling comes from fixedColumns.bootstrap5.min.css. */
.sia-wide-table thead th,
.sia-wide-table tfoot th {
    white-space: nowrap;
}

/* The skip link focuses <main>; it doesn't need a visible ring of its own. */
#main-content:focus {
    outline: 0;
}

/* DataTables DateTime picker: selected day in the brand green instead of its blue. */
/* "body" prefix: the DateTime stylesheet loads after app.css (extra_css block). */
body div.dt-datetime table td.selectable.selected button {
    background: var(--kb-green);
}