/* =============================================================================
   E-GWOKO — the application's own stylesheet
   =============================================================================

   public/css holds exactly TWO files (client, 2026-09-14: "reduce the
   number of css files for easy maintenance to only two files"):

     theme.css    the admin template we bought. VENDOR — never edit it.
     egwoko.css   this file. Everything E-Gwoko itself owns.

   That is the boundary worth keeping: anything in here is ours to change,
   anything in theme.css gets replaced wholesale if the template is ever
   upgraded. The files under public/plugins/ are third-party libraries
   (Bootstrap, DataTables, select2, toastr, the icon fonts) and are not
   part of this count for the same reason.

   This file was merged from five: style.css, app.css, layouts/master.css,
   auth.css and pages/egwoko-app.css. Section order below IS the old
   <link> order, so nothing that used to win stops winning.

   There is NO build step in this project (no package.json, no vite, no
   mix) — the browser loads this file as written. Keep it readable.

   CONTENTS
     1. Fonts
     2. Design tokens              every colour, named once
     3. Base & typography          (was style.css)
     4. Forms & buttons            (was app.css)
     5. Admin layout               (was layouts/master.css)
     6. Sign-in pages              (was auth.css)
     7. E-Gwoko design system      (was pages/egwoko-app.css)

   ============================================================================= */


/* =============================================================================
   1. FONTS
   -----------------------------------------------------------------------------
   One request, not three. The old files imported Sora, Fira Sans, Inter and
   Noto Sans HK between them; Sora and Fira Sans were downloaded on every
   page load and then overridden — body#app set Inter with !important and
   won. Only the two that actually render are requested now.
   @import must stay above every rule in the file.
   ============================================================================= */


@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

/* =============================================================================
   2. DESIGN TOKENS
   -----------------------------------------------------------------------------
   Every colour in this file is named once, here. There used to be THREE
   separate :root blocks — one for the admin chrome, one for the sign-in
   pages, one for the brand — and they repeated the same literals under
   different names: #0f172a was both --sidebar-bg and --auth-navy and
   --auth-ink, #0ea5e9 was both --accent and --auth-accent, #f1f5f9 was
   both --body-bg and --auth-surface-muted.

   The fix is one palette plus aliases. Every token name that existed
   still exists and still resolves to the same value, so no rule below
   had to change and nothing renders differently — but a colour is now
   defined in exactly one place.

   HEADS UP — this app runs on TWO palettes, and that is a design
   decision nobody has made yet, not a bug to quietly fix:

     · slate + sky   the admin chrome and the whole sign-in experience
     · E-Gwoko brand ink / gold / green / rust, used by the dashboards,
                     KPI cards, badges and buttons

   Unifying them (making --accent the brand gold, say) would change the
   look of the sidebar and the login screen, so it is left alone here.

   One more token arrives at RUNTIME, not from this file: master.blade.php
   injects --brand and --brand-contrast per request for per-tenant
   branding. It is written after this stylesheet loads, so it wins.
   ============================================================================= */
:root {
    /* ---- Type ------------------------------------------------------------
       Whatever is named here must also be in the @import above, or the
       browser silently falls back to the system font. */
    --primary-font: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --heading-font: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* ---- Neutrals: slate ------------------------------------------------ */
    --slate-900: #0f172a;
    --slate-800: #1e293b;
    --slate-700: #334155;
    --slate-600: #475569;
    --slate-500: #64748b;
    --slate-400: #f2f2f2;
    --slate-200: #e2e2e2;
    /* Added 2026-09-14: .card reached for var(--slate-300) but nothing
       declared it, which makes the whole `border: 1px solid var(…)`
       declaration invalid — cards were rendering with NO border.
       Sitting one step darker than --slate-200; adjust if the intent
       was a different weight. */
    --slate-300: #d4d4d4;
    --slate-100: #e4e4e4;
    --white: #ffffff;

    /* ---- Accent: sky (admin chrome + sign-in) --------------------------- */
    --sky: #0ea5e9;
    --sky-dark: #0284c7;
    --sky-light: #38bdf8;
    --sky-deep: #0c4a6e;
    --sky-wash: rgba(14, 165, 233, 0.12);

    /* ---- Status ---------------------------------------------------------- */
    --red: #dc2626;
    --red-bg: #fef2f2;
    --emerald: #15803d;
    --emerald-bg: #f0fdf4;

    /* ---- E-Gwoko brand ---------------------------------------------------- */
    --ink: #1B2A38;
    --parchment: #F5EFE0;
    /* brand palette; no rule uses it yet */
    --card: #FFFDF8;
    --gold: #C68A2E;
    --gold-dark: #8F621C;
    --green: #2F5233;
    --green-light: #E7EEE3;
    --rust: #8C3B22;
    --rust-light: #F3E6DC;
    --charcoal: #2B2621;
    --muted: #79726A;
    --line: #E4DCC8;

    /* ---- Aliases --------------------------------------------------------
       Kept so every existing rule keeps working unchanged. Prefer the
       palette names above in anything new. */

    /* admin chrome (was the :root in layouts/master.css) */
    --sidebar-bg: var(--slate-900);
    --sidebar-hover: var(--slate-800);
    --sidebar-active: var(--sky-wash);
    --header-bg: var(--white);
    --body-bg: var(--slate-100);
    --accent: var(--sky);

    /* sign-in pages (was the :root in auth.css) */
    --auth-accent: var(--sky);
    --auth-accent-dark: var(--sky-dark);
    --auth-accent-light: var(--sky-light);
    --auth-navy-2: var(--sky-deep);
    --auth-ink: var(--slate-900);
    --auth-slate-600: var(--slate-600);
    --auth-slate-500: var(--slate-500);
    --auth-slate-400: var(--slate-400);
    --auth-border: var(--slate-200);
    --auth-surface: var(--white);
    --auth-surface-muted: var(--slate-100);
    --auth-danger: var(--red);
    --auth-danger-bg: var(--red-bg);
    --auth-success: var(--emerald);
    --auth-success-bg: var(--emerald-bg);
    --auth-radius: 0px;
    --auth-shadow: 0 20px 40px -16px rgba(15, 23, 42, .16), 0 4px 14px -6px rgba(15, 23, 42, .10);
}


html,
body {
    font-family: var(--primary-font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--heading-font) !important;
}

/* The five stylesheets this file was merged from carried a CodePen
   demo table here — dark gradient <th>, 800px fixed width, and three
   background images HOTLINKED from jackrugile.com that were fetched on
   every page rendering a bare <table>. Nothing in E-Gwoko used it: the
   only non-Bootstrap tables are in the dompdf template (which does not
   load this file) and reports/egwoko-lookup, whose .rep-facts table
   brings its own styling. Removed 2026-09-14 along with the external
   requests. Data tables use Bootstrap's .table plus section 7. */


.w-60 {
    width: 60px !important
}

.w-200 {
    width: 200px !important;
}

.hm-30 {
    min-height: 30px !important;
}

.table td,
.table th {
    padding: 0.5rem;
}

#Widget-line-chart1,
#Widget-line-chart2,
#Widget-line-chart3,
#Widget-line-chart4 {
    width: 100%;
    height: 75px
}

#realtime-profit,
#sale-diff {
    height: 150px;
}

#sec-ecommerce-chart-line {
    height: 30px;
}

#sec-ecommerce-chart-bar {
    height: 100px;
}

#app-sale1,
#app-sale2,
#app-sale3,
#app-sale4 {
    height: 50px;
}

#status-round-1,
#status-round-2,
#status-round-3,
#status-round-4 {
    width: 80px !important;
    height: 80px !important;
}

#card-412 {
    min-height: 412px;
}

#card-422 {
    min-height: 422px;
}

#visitfromworld {
    width: 100%;
    height: 350px;
}

#pbc-1,
#pbc-2,
#pbc-3,
#pbc-4,
#pbc-5,
#pbc-6 {
    height: 50px;
}

/*.sale-card{
      min-height: 301px;
  }

#deal-analytic-chart {
    height: 300 !important;
}

#tot-rev-chart {
    width: 100px;
    height: 100px;
}

#allocation-map,
#allocation-chart {
    height: 250px;
}

#sal-income,
#rent-income,
#income-analysis {
    height: 100px;
}

.hide {
    display: none;
}


.pricing .card {
    border: none;
    border-radius: 1rem;
    transition: all 0.2s;
    box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1);
}

.pricing hr {
    margin: 1.5rem 0;
}

.pricing .card-title {
    margin: 0.5rem 0;
    font-size: 0.9rem;
    letter-spacing: .1rem;
    font-weight: bold;
}

.pricing .card-price {
    font-size: 3rem;
    margin: 0;
}

.pricing .card-price .period {
    font-size: 0.8rem;
}

.pricing ul li {
    margin-bottom: 1rem;
}

.pricing .text-muted {
    opacity: 0.7;
}

.pricing .btn {
    border-radius: 5rem;
    letter-spacing: .1rem;
    font-weight: bold;
    opacity: 0.7;
    transition: all 0.2s;
}

.app-sidebar {
    -webkit-transition-property: none !important;
    -moz-transition-property: none !important;
    -o-transition-property: none !important;
    transition-property: none !important;
}

.sidebar-action {
    position: absolute;
    right: 23px;
    font-size: 25px;
    color: #c7c7c7;
    cursor: pointer;
}

.sidebar-mini .sidebar-action i:before {
    content: "\e911";
}

.sidebar-mini.sidebar-mini-hover .sidebar-action i:before {
    content: "\e910";
}

.sidebar-mini .app-sidebar {
    width: 70px !important;
}

.sidebar-mini .app-sidebar .sidebar-content .nav-container .navigation-main .nav-item a span {
    display: none;
}

.sidebar-mini .header-brand-img {
    display: none;
}

.sidebar-mini .app-sidebar .sidebar-content .nav-container .navigation-main .nav-item.has-sub a::before {
    display: none;
}

.sidebar-mini .main-content,
.sidebar-mini .header-top {
    padding-left: 80px !important;
}

.sidebar-mini .app-sidebar .sidebar-content .nav-container .navigation-main .nav-lavel {
    display: none;
}

.sidebar-mini .app-sidebar.colored .sidebar-content .nav-container .navigation-main .nav-item .submenu-content {
    display: none;
}

.sidebar-mini.sidebar-mini-hover .app-sidebar {
    width: 240px !important;
}

.sidebar-mini.sidebar-mini-hover .app-sidebar .sidebar-content .nav-container .navigation-main .nav-item a span {
    display: inline-block;
}

.sidebar-mini.sidebar-mini-hover .header-brand-img {
    display: inline-block;
}

.sidebar-mini.sidebar-mini-hover .app-sidebar .sidebar-content .nav-container .navigation-main .nav-item.has-sub a::before {
    display: block;
}

.sidebar-mini.sidebar-mini-hover .main-content,
.sidebar-mini.sidebar-mini-hover .header-top {
    padding-left: 250px !important;
}

.sidebar-mini.sidebar-mini-hover .app-sidebar .sidebar-content .nav-container .navigation-main .nav-lavel {
    display: block;
}

.sidebar-mini.sidebar-mini-hover .app-sidebar.colored .sidebar-content .nav-container .navigation-main .nav-item.open.has-sub .submenu-content {
    display: block;
}

.wrapper .page-wrap .app-sidebar .sidebar-content .nav-container .navigation-main .nav-item.has-sub .submenu-content .menu-item:after {
    content: '--';
    position: absolute;
    left: 29px;
}

.select2-container {
    width: 100% !important;
}

.html-editor.h-205 .note-editor {
    height: 205px !important;
}

label {
    font-weight: bold;
}

.note-editable {
    height: 115px !important;
}

@media (min-width: 992px) {
    .pricing .card:hover {
        margin-top: -.25rem;
        margin-bottom: .25rem;
        box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.3);
    }

    .pricing .card:hover .btn {
        opacity: 1;
    }
}

.box-shadow {
    -webkit-box-shadow: 0 6px 0 0 rgb(0 0 0 / 1%), 0 15px 32px 0 rgb(0 0 0 / 6%);
    -moz-box-shadow: 0 6px 0 0 rgba(0, 0, 0, 0.01), 0 15px 32px 0 rgba(0, 0, 0, 0.06);
    box-shadow: 0 6px 0 0 rgb(0 0 0 / 1%), 0 15px 32px 0 rgb(0 0 0 / 6%);
}

.cursor-pointer {
    cursor: pointer;
}

.hidden {
    display: none;
}


/* =============================================================================
   4. FORMS & BUTTONS                                          (was app.css)
   -----------------------------------------------------------------------------
   The .btn rule here used to set `color:#fff !important` and a blue
   gradient background. Declared after Bootstrap at equal specificity, it
   won: btn-danger, btn-success, btn-outline-secondary and btn-light all
   rendered as the SAME blue, so "destructive actions clearly identified"
   was impossible. The geometry is kept; the colours are Bootstrap's again.
   ============================================================================= */

/* ================================
   Buttons
================================ */

.btn {
    display: inline-block;
    border-radius: 5px;
    font-weight: 500;
    line-height: 1.5;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn:hover,
.btn:focus {
    text-decoration: none;
}

.btn:active {
    transform: translateY(1px);
}


/* ================================
   Form Controls
================================ */

input[type="text"]:not(.form-control),
input[type="email"]:not(.form-control),
input[type="password"]:not(.form-control),
select:not(.form-control):not(.custom-select),
textarea:not(.form-control) {
    width: 100%;

    margin: 4px 0;
    padding: 8px 10px;

    color: #343A40;
    background: #fff;

    border: 1px solid #D9E2EC;
    border-radius: 4px;

    font-size: 14px;
    line-height: 1.5;

    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);

    transition: border-color 0.2s ease,
        box-shadow 0.2s ease;
}


/* ================================
   Form Focus
================================ */

input[type="text"]:not(.form-control):focus,
input[type="email"]:not(.form-control):focus,
input[type="password"]:not(.form-control):focus,
select:not(.form-control):not(.custom-select):focus,
textarea:not(.form-control):focus {
    border-color: #1698D5;

    outline: none;

    box-shadow:
        0 0 0 2px rgba(22, 152, 213, 0.12),
        inset 0 1px 2px rgba(0, 0, 0, 0.04);
}


/* ================================
   Placeholder
================================ */

input::placeholder,
textarea::placeholder {
    color: #888888;
}


/* ================================
   Disabled Controls
================================ */

input:disabled,
select:disabled,
textarea:disabled {
    color: #6C757D;
    background: #F5F7FA;
    cursor: not-allowed;
}


/* =============================================================================
   5. ADMIN LAYOUT                                    (was layouts/master.css)
   ============================================================================= */

/* Admin layout (resources/views/layouts/master.blade.php) */

/* Bootstrap 4 doesn't ship gap utilities; shim the scale used across the templates */
.gap-1 {
    gap: .25rem;
}

.gap-2 {
    gap: .5rem;
}

.gap-3 {
    gap: 1rem;
}


body#app {
    background-color: var(--body-bg) !important;
    font-family: var(--primary-font) !important;
}

.header-top {
    background: var(--header-bg) !important;
    border-bottom: 1px solid var(--slate-200) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.main-content {
    background: var(--body-bg) !important;
}

.app-sidebar.colored {
    background: var(--sidebar-bg) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.app-sidebar.colored .sidebar-header {
    background: var(--sidebar-bg) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Card styles */
.card-header {
    background-color: #ffffff;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    color: var(--slate-700);
    border-top: 3px solid var(--accent) !important;
    border-bottom: 1px solid var(--slate-200) !important;
}

.card {
    border: 1px solid var(--slate-300) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06) !important;
    border-radius: 0px !important;
    overflow: hidden;
}



.card:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05) !important;
}

/* Footer */
.footer {
    background: var(--header-bg) !important;
    border-top: 1px solid var(--slate-200) !important;
}

/* Sidebar navigation items */
.app-sidebar.colored .sidebar-content .nav-container .navigation-main .nav-item>a {
    border-radius: 8px !important;
    margin: 2px 12px !important;
    transition: all 0.2s ease !important;
}

.app-sidebar.colored .sidebar-content .nav-container .navigation-main .nav-item>a:hover {
    background: var(--sidebar-hover) !important;
}

.app-sidebar.colored .sidebar-content .nav-container .navigation-main .nav-item.active>a {
    background: var(--sidebar-active) !important;
    color: var(--accent) !important;
}


/* =============================================================================
   6. SIGN-IN PAGES                                           (was auth.css)
   -----------------------------------------------------------------------------
   Loaded on every page now rather than only the auth layout. Safe: every
   rule is scoped to .auth-* / .portal-list-* / .btn-auth-*, none of which
   appear inside the dashboard, and the two bare `body`/`h6` rules are
   overridden by section 4's body#app.
   ============================================================================= */

/* ==========================================================================
   WEB EFRIS — Authentication pages
   Split-screen layout: dark brand panel + light form panel.
   ========================================================================== */


body {
    font-family: var(--primary-font);
    color: var(--auth-ink);
}

/* ---------- Shell ---------- */
.auth-shell {
    min-height: 100vh;
    display: flex;
    background: var(--auth-surface-muted);
}

/* ---------- Brand panel (left) ---------- */
.auth-brand {
    position: relative;
    flex: 0 0 42%;
    max-width: 560px;
    display: flex;
    flex-direction: column;
    padding: 48px;
    overflow: hidden;
    color: #fff;
    background: #094C8A;
}

.auth-brand::before,
.auth-brand::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
}

.auth-brand::before {
    width: 420px;
    height: 420px;
    top: -140px;
    right: -120px;
    background: #1b1b1b;
    opacity: .22;
}

.auth-brand::after {
    width: 320px;
    height: 320px;
    bottom: -100px;
    left: -80px;

}


.auth-brand-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.auth-brand-word {
    display: inline-flex;
    align-items: baseline;
    gap: 1px;
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -.02em;
    text-decoration: none;
}

.auth-brand-word .w1 {
    color: #ffffff;
}

.auth-brand-word .w2 {
    color: var(--auth-accent-light);
}

.auth-brand-badge {
    display: inline-block;
    margin-top: 10px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .12);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .75);
    width: fit-content;
}

.auth-brand-copy {
    margin: auto 0 32px;
    max-width: 380px;
}

.auth-brand-copy h2 {
    font-size: 1.65rem;
    font-weight: 700;
    line-height: 1.35;
    color: #ffffff;
    margin-bottom: 14px;
}

.auth-brand-copy p {
    color: rgba(255, 255, 255, .68);
    font-size: .95rem;
    line-height: 1.6;
    margin: 0;
}

.auth-brand-features {
    list-style: none;
    margin: 0 0 auto;
    padding: 0;
}

.auth-brand-features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: .875rem;
    color: rgba(255, 255, 255, .82);
    margin-bottom: 12px;
}

.auth-brand-features li i {
    color: var(--auth-accent-light);
    margin-top: 3px;
    font-size: .8rem;
}

.auth-brand-footer {
    padding-top: 24px;
    margin-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, .1);
    color: rgba(255, 255, 255, .45);
    font-size: .78rem;
}

/* ---------- Form panel (right) ---------- */
.auth-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url(../asset/images/background.jpg) no-repeat center center;
    background-size: cover;
    padding: 40px 24px;
}

.auth-main-inner {
    width: 100%;
    max-width: 800px;
}

.auth-main-inner--wide {
    max-width: 800px;
}

.auth-card {
    background: var(--auth-surface);
    opacity: 0.9;
    border: 1px solid var(--auth-border);
    border-radius: var(--auth-radius);
    box-shadow: var(--auth-shadow);
    padding: 44px 40px;
    animation: authCardIn .5s ease-out;
}

@keyframes authCardIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.logo-area {
    text-align: center;
    margin-bottom: 28px;
}

.logo-area img {
    height: 42px;
    width: auto;
    margin-bottom: 18px;
}

.logo-area h1 {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--auth-ink);
    margin-bottom: 4px;
    letter-spacing: -.01em;
}

.logo-area p {
    color: var(--auth-slate-500);
    font-size: .875rem;
    margin: 0;
}

/* ---------- Form elements ---------- */
.auth-form-group {
    margin-bottom: 18px;
}

.auth-form-group .form-label {
    display: block;
    color: var(--auth-slate-600);
    font-weight: 600;
    font-size: .78rem;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.auth-form-group .input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--auth-slate-400);
    font-size: .85rem;
    pointer-events: none;
}

.auth-form-group .form-control {
    height: auto;
    padding: 11px 14px;
    border: 1px solid var(--auth-border);
    border-radius: 10px;
    font-size: .95rem;
    background: var(--auth-surface-muted);
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.auth-form-group .form-control.with-icon {
    padding-left: 40px;
}

.auth-form-group .form-control::placeholder {
    color: #888888;
}

.auth-form-group .form-control:focus {
    background: var(--auth-surface);
    border-color: var(--auth-accent);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, .14);
    outline: none;
}

.auth-form-group .form-control.is-invalid {
    border-color: var(--auth-danger);
    background: var(--auth-danger-bg);
}

/* ---------- Buttons & links ---------- */
.btn-auth-primary {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: .95rem;
    color: #ffffff;
    background: linear-gradient(135deg, var(--auth-accent) 0%, var(--auth-accent-dark) 100%);
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}

.btn-auth-primary:hover,
.btn-auth-primary:focus {
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 10px 24px -8px rgba(14, 165, 233, .5);
}

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

.btn-auth-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 11px 24px;
    border: 1px solid var(--auth-border);
    border-radius: 10px;
    font-weight: 600;
    font-size: .9rem;
    color: var(--auth-slate-600);
    background: var(--auth-surface);
    text-decoration: none;
    transition: all .15s ease;
}

.btn-auth-secondary:hover {
    color: var(--auth-ink);
    background: var(--auth-surface-muted);
    border-color: var(--auth-slate-400);
    text-decoration: none;
}

.auth-link {
    color: var(--auth-accent-dark);
    text-decoration: none;
    font-weight: 600;
    font-size: .85rem;
}

.auth-link:hover {
    color: var(--auth-navy-2);
    text-decoration: underline;
}

.auth-divider {
    display: flex;
    align-items: center;
    margin: 22px 0;
    color: var(--auth-slate-400);
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--auth-border);
}

.auth-divider span {
    padding: 0 14px;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.auth-footer {
    text-align: center;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--auth-border);
}

.auth-footer small {
    color: var(--auth-slate-400);
    font-size: .78rem;
}

/* ---------- Alerts ---------- */
.auth-card .auth-card .alert-success {
    background: var(--auth-success-bg);
    border-color: #bbf7d0;
    color: var(--auth-success);
}

.auth-card .alert-danger {
    background: var(--auth-danger-bg);
    border-color: #fecaca;
    color: var(--auth-danger);
}

.auth-card .invalid-feedback {
    font-size: .8rem;
}

/* ---------- Portal selector (landing page) ---------- */
.portal-list {
    border: 1px solid var(--auth-border);
    border-radius: 14px;
    overflow: hidden;
}

.portal-list-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: var(--auth-surface);
    border-color: var(--auth-border);
    border-left: none;
    border-right: none;
    text-decoration: none;
    transition: background-color .15s ease, padding-left .15s ease;
}

.portal-list-item:first-child {
    border-top: none;
}

.portal-list-item:last-child {
    border-bottom: none;
}

.portal-list-item:hover,
.portal-list-item:focus {
    text-decoration: none;
    background: var(--auth-surface-muted);
    padding-left: 22px;
}

.portal-list-icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 1.15rem;
}

.portal-list-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.portal-list-title {
    font-weight: 700;
    color: var(--auth-ink);
    font-size: .95rem;
}

.portal-list-desc {
    color: var(--auth-slate-500);
    font-size: .8rem;
    margin-top: 2px;
}

.portal-list-chevron {
    flex: 0 0 auto;
    color: var(--auth-slate-400);
    font-size: .8rem;
    transition: transform .15s ease, color .15s ease;
}

.portal-list-item:hover .portal-list-chevron {
    color: var(--auth-accent);
    transform: translateX(3px);
}

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
    .auth-brand {
        display: none;
    }

    .auth-main {
        padding: 32px 20px;
    }
}

@media (max-width: 575.98px) {
    .auth-card {
        padding: 32px 24px;
    }
}


/* =============================================================================
   7. E-GWOKO DESIGN SYSTEM                          (was pages/egwoko-app.css)
   -----------------------------------------------------------------------------
   Brand tokens and the shared components. Last, so it wins.
   ============================================================================= */

/* --- Dashboard content widgets (Overview / By location / Group statement / Audit log) --- */

.stat-row {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.stat-card,
.chart-card,
.table-card {
    background: var(--card);
    border-radius: 12px;
    border: 1px solid var(--line);
    padding: 16px;
}

.stat-card {
    flex: 1;
    min-width: 180px;
}

.stat-label {
    font-size: 12px;
    color: var(--muted);
}

.stat-value {
    font-size: 22px;
    font-weight: 700;
    margin-top: 4px;
    color: var(--charcoal);
}

.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 900px) {
    .grid-2 {
        grid-template-columns: 1fr;
    }
}

.chart-title {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--charcoal);
}

.table-card canvas,
.chart-card canvas {
    max-height: 240px;
}

.table-card table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.table-card th {
    text-align: left;
    font-size: 11px;
    color: var(--muted);
    padding: 8px;
}

.table-card td {
    padding: 8px;
    border-top: 1px solid var(--line);
}

.badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

.badge-green {
    background: var(--green-light);
    color: var(--green);
}

.badge-rust {
    background: var(--rust-light);
    color: var(--rust);
}

button.primary {
    padding: 0 16px;
    height: 40px;
    border-radius: 8px;
    border: none;
    background: var(--ink);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

/* Text/select inputs used directly in the dashboard views (not wrapped in
   Bootstrap's .form-control) so they don't inherit the theme's bare
   input/select reset. */
.table-card input[type=text],
.stat-row input[type=text],
div>input[type=text][wire\:model] {
    padding: 10px;
    border-radius: 8px;
    border: 1px solid var(--line);
    font-size: 14px;
}

/* --- Quick actions (Overview) — .quick-action / .action-icon /
   .section-label. These began as the admin template's dashboard.css
   tiles, reskinned to E-Gwoko's gold accent; that file was never linked
   (it also defined a rival .stat-card/.stat-icon that collided with the
   one above) and was deleted in the 2026-09-08 public/css tidy-up, so
   these rules are now the only definition.

   The group profile uses the compact .action-bar / .action-btn further
   down this file instead; other dashboards still use these tiles. --- */
.section-label {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted);
    margin: 1.75rem 0 .75rem;
}

.section-label:first-child {
    margin-top: 0;
}

.quick-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 22px 12px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: var(--card);
    text-decoration: none;
    color: var(--charcoal);
    height: 100%;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease;
}

.quick-action:hover,
.quick-action:focus {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px -10px rgba(198, 138, 46, .35);
    border-color: var(--gold);
    color: var(--gold-dark);
    text-decoration: none;
}

.quick-action .action-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    margin-bottom: 10px;
    background: var(--green-light);
    color: var(--gold-dark);
    transition: background .2s ease, color .2s ease;
}

.quick-action:hover .action-icon {
    background: var(--gold);
    color: #fff;
}

.quick-action h6 {
    font-size: .82rem;
    font-weight: 600;
    margin: 0;
    color: inherit;
}

/* --- Sidebar brand wordmark (left_side/sidebar included inside the
   template's .app-sidebar) --- */
.egwoko-sidebar-brand {
    color: var(--gold);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 1px;
}

/* --- Header user avatar (no photo asset — initials on a brand-colored
   circle instead of the template's default user_img.png) --- */
.egwoko-avatar {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--ink);
    color: var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    border: 2px solid var(--slate-200);
    flex-shrink: 0;
}

/* --- Login card (layouts/guest.blade.php, inside the auth template's
   .auth-main-inner panel) --- */
.egwoko-login-card {
    width: 100%;
    max-width: 360px;
    background: var(--card);
    border-radius: 14px;
    padding: 28px;
    box-shadow: 0 12px 32px -12px rgba(15, 23, 42, .15);
}

.egwoko-login-card .brand {
    color: var(--gold-dark);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1px;
}

.egwoko-login-card .title {
    font-size: 20px;
    font-weight: 700;
    color: var(--charcoal);
    margin: 4px 0 20px;
}

.egwoko-login-card label {
    font-size: 12px;
    color: var(--muted);
    display: block;
}

.egwoko-login-card input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    margin: 4px 0 12px;
    border-radius: 8px;
    border: 1px solid var(--line);
    font-size: 14px;
}

.egwoko-login-card button {
    width: 100%;
    padding: 12px;
    border-radius: 10px;
    border: none;
    background: var(--gold);
    color: var(--ink);
    font-weight: 700;
    cursor: pointer;
}

.egwoko-login-card .error {
    color: var(--rust);
    font-size: 12px;
    margin-bottom: 10px;
}

/* ---------- Linked dashboard widget cards (Bootstrap4 .card as an <a>) ---------- */
.stat-link-card {
    display: block;
    color: inherit;
    transition: box-shadow .15s ease, transform .15s ease;
}

.stat-link-card:hover,
.stat-link-card:focus {
    box-shadow: 0 10px 22px -10px rgba(27, 42, 56, .25);
    transform: translateY(-2px);
    color: inherit;
    text-decoration: none;
}

/* ---------- KPI cards (fintech-style: label / big value / trend or
   context) — Bootstrap4 .card underneath, no bespoke component framework.
   Every dashboard's headline metrics should use this instead of ad-hoc
   inline styles, so Overview/By location/By performance/Group statement
   all read as one product. Deliberately restrained: one accent color per
   card (an icon chip), not a colored card background — see brief's "avoid
   too many colors / huge cards". ---------- */
.kpi-card .card-body {
    padding: 1.1rem 1.25rem;
}

.kpi-label {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
}

.kpi-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    flex-shrink: 0;
}

.kpi-icon.bg-ink-soft {
    background: rgba(27, 42, 56, .08);
    color: var(--ink);
}

.kpi-icon.bg-green-soft {
    background: var(--green-light);
    color: var(--green);
}

.kpi-icon.bg-gold-soft {
    background: rgba(198, 138, 46, .14);
    color: var(--gold-dark);
}

.kpi-icon.bg-rust-soft {
    background: var(--rust-light);
    color: var(--rust);
}

.kpi-icon.bg-info-soft {
    background: rgba(23, 162, 184, .12);
    color: #0f7c8f;
}

.kpi-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin-top: .6rem;
    color: var(--charcoal);
    /* financial values must never wrap/clip inside a KPI card */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kpi-context {
    margin-top: .6rem;
    font-size: .78rem;
    color: var(--muted);
}

.kpi-trend {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-weight: 700;
    font-size: .78rem;
}

.kpi-trend.up {
    color: var(--green);
}

.kpi-trend.down {
    color: var(--rust);
}

/* ---------- Chart cards: header carries the title + a "go to report"
   affordance, body carries a fixed-height canvas so charts never reflow
   the page as they render. ---------- */
.chart-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .85rem;
    font-weight: 700;
    color: var(--charcoal);
}

.chart-card-header i {
    color: var(--muted);
    font-size: .85rem;
}

/* ---------- Empty states — a real icon + message + optional action
   instead of a bare "No X found" table row, per brief section 21. ---------- */
.empty-state {
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--muted);
}

.empty-state i {
    font-size: 1.8rem;
    color: var(--line);
    margin-bottom: .6rem;
    display: block;
}

.empty-state .empty-state-title {
    font-weight: 600;
    color: var(--charcoal);
    margin-bottom: .25rem;
}

/* ---------- Plan picker (companies._form / companies.subscriptions.create /
   subscription.show) — a Bootstrap4 custom-radio, styled as a pricing
   card instead of a bare radio button. .plan-radio is the (visually
   hidden, by Bootstrap's own custom-control CSS) <input>; the sibling
   label wraps .plan-card, and the :checked state is read via the
   sibling combinator since the native radio can't be styled by :has()
   reliably across the browsers this admin template already targets. ---------- */
.plan-card {
    border: 2px solid var(--line);
    border-radius: 10px;
    padding: 14px 16px;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.plan-radio:checked+.plan-card-label .plan-card {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(198, 138, 46, .15);
}

.plan-card-label {
    cursor: pointer;
}

/* "What's included" bullets — a plain list without its own bullet glyph
   would blend into the description above it; a small gold dash reads as
   deliberate rather than a leftover default <ul>. */
.plan-card-features {
    list-style: none;
    padding-left: 0 !important;
}

.plan-card-features li {
    position: relative;
    padding-left: 14px;
    margin-bottom: 4px;
    color: var(--charcoal, #2B2621);
}

.plan-card-features li::before {
    content: "–";
    position: absolute;
    left: 0;
    color: var(--gold);
    font-weight: 700;
}

/* ---------- Notifications (notifications.index) — unread row highlight,
   gold rather than a generic "blue unread" since that's this app's own
   accent, not Bootstrap's default. ---------- */
.notification-unread {
    background: rgba(198, 138, 46, .07);
    border-left: 3px solid var(--gold);
}

/* ==========================================================================
   Shared dashboard widgets — "Requires attention", "Recent activity" and the
   live-meeting card. Used by the Company Admin dashboard (dashboard/company),
   the Group Admin dashboard (groups/show) and the Member dashboard
   (member/dashboard) so every role's landing page reads the same way:
   what needs me → what's going on → what can I do. Built only from the brand
   tokens above; no gradients, no oversized cards (see the client brief).
   ========================================================================== */

/* --- Requires attention ------------------------------------------------- */
.attention-list {
    display: flex;
    flex-direction: column;
}

.attention-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 4px;
    border-top: 1px solid var(--line);
}

.attention-item:first-child {
    border-top: 0;
}

.attention-item .attn-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    background: rgba(198, 138, 46, .14);
    color: var(--gold-dark);
}

.attention-item.is-urgent .attn-icon {
    background: var(--rust-light);
    color: var(--rust);
}

.attention-item .attn-body {
    flex: 1;
    min-width: 0;
}

.attention-item .attn-label {
    font-weight: 600;
    color: var(--charcoal);
}

.attention-item .attn-detail {
    font-size: .82rem;
    color: var(--muted);
}

.attention-item .attn-action {
    flex-shrink: 0;
}

/* --- Recent activity feed --------------------------------------------- */
.activity-feed {
    display: flex;
    flex-direction: column;
}

.activity-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 11px 4px;
    border-top: 1px solid var(--line);
    font-size: .88rem;
    color: var(--charcoal);
}

.activity-item:first-child {
    border-top: 0;
}

.activity-item .act-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    background: rgba(27, 42, 56, .07);
    color: var(--ink);
}

.activity-item .act-text {
    flex: 1;
    min-width: 0;
}

.activity-item .act-time {
    flex-shrink: 0;
    font-size: .76rem;
    color: var(--muted);
    white-space: nowrap;
}

/* --- Live meeting card ------------------------------------------------- */
.live-meeting-card {
    background: var(--green);
    color: #fff;
    border-radius: 12px;
    padding: 18px 20px;
    margin-bottom: 1rem;
}

.live-meeting-card a {
    color: #fff;
}

.live-meeting-card .lm-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.live-meeting-card .lm-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    color: var(--rust);
    font-weight: 700;
    font-size: .72rem;
    letter-spacing: .04em;
    padding: 3px 9px;
    border-radius: 999px;
}

.live-meeting-card .countdown {
    font-size: 1.6rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.live-meeting-card .lm-meta {
    font-size: .82rem;
    opacity: .9;
}

.live-meeting-card .lm-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.live-meeting-card .lm-actions .btn {
    border-color: rgba(255, 255, 255, .55);
    color: #fff;
}

.live-meeting-card .lm-actions .btn-light {
    background: #fff;
    color: var(--green);
    border-color: #fff;
}

.dash-warning {
    background: rgba(255, 255, 255, .16);
    border-radius: 8px;
    padding: 8px 12px;
    margin-top: 12px;
    font-size: .85rem;
    font-weight: 600;
}

/* --- Loan pipeline strip (loans/oversight) --------------------------- */
.loan-pipeline {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 1rem;
}

.loan-pipeline .stage {
    flex: 1;
    min-width: 130px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--card);
    padding: 12px 14px;
    text-decoration: none;
    color: var(--charcoal);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.loan-pipeline .stage:hover,
.loan-pipeline .stage:focus {
    border-color: var(--gold);
    box-shadow: 0 8px 20px -12px rgba(198, 138, 46, .4);
    text-decoration: none;
    color: var(--charcoal);
}

.loan-pipeline .stage.is-active {
    border-color: var(--ink);
}

.loan-pipeline .stage .stage-name {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted);
}

.loan-pipeline .stage .stage-count {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--charcoal);
}

/* --- Progressive disclosure (groups/show "Group details & management") --- */
details.group-details {
    margin-top: 1.5rem;
    border-top: 1px solid var(--line);
    padding-top: .5rem;
}

details.group-details>summary {
    cursor: pointer;
    list-style: none;
    padding: .85rem .25rem;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: .5rem;
}

details.group-details>summary::-webkit-details-marker {
    display: none;
}

details.group-details>summary::before {
    content: "\203A";
    /* › */
    display: inline-block;
    font-size: 1.1rem;
    line-height: 1;
    transition: transform .15s ease;
}

details.group-details[open]>summary::before {
    transform: rotate(90deg);
}

details.group-details>summary:hover {
    color: var(--gold-dark);
}

.group-details-body {
    padding-top: .5rem;
}

/* --- Disbursement confirmation panel (loans/show) ------------------- */
.disburse-check {
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 14px;
}

.disburse-check .dc-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 6px 0;
}

.disburse-check .dc-row+.dc-row {
    border-top: 1px solid var(--line);
}

.disburse-check .dc-row.dc-total {
    font-weight: 700;
    color: var(--charcoal);
}

.disburse-check .dc-row.dc-short {
    color: var(--rust);
    font-weight: 700;
}

/* ---------------------------------------------------------------
   Compact action bar (client, 2026-09-08: "replacing card actions
   with action buttons, minimizing space").

   Replaces the .quick-action tile grid on the group profile: same
   destinations, one wrapping row instead of a block of large cards.
   Kept as its own class rather than restyling .quick-action, which
   other dashboards still use.
   --------------------------------------------------------------- */
.action-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1px solid var(--line, #E4DCC8);
    border-radius: 8px;
    background: var(--card, #FFFDF8);
    color: var(--ink, #1B2A38);
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.action-btn i {
    font-size: 1rem;
    opacity: .75;
}

.action-btn:hover,
.action-btn:focus {
    background: var(--brand, #4680ff);
    border-color: var(--brand, #4680ff);
    color: var(--brand-contrast, #fff);
    text-decoration: none;
}

.action-btn:hover i,
.action-btn:focus i {
    opacity: 1;
}

@media (max-width: 575.98px) {

    /* Two per row on a phone rather than one long scroll. */
    .action-btn {
        flex: 1 1 calc(50% - 8px);
        justify-content: center;
    }
}

/* ==========================================================================
   UI STANDARDISATION PASS (client brief, 2026-09-14)
   --------------------------------------------------------------------------
   Everything below exists to make the same thing look the same everywhere.
   Nothing here is decorative: each rule replaced either an inline style that
   was repeated across files, or a class that was being used but had never
   been defined.
   ========================================================================== */

.impersonation-bar {
    background: var(--gold);
    color: #fff;
    font-size: .85rem;
}

/* --- Alerts -------------------------------------------------------------
   One shape for every message in the app (partials/_flash). The icon is
   floated out of the text flow so a two-line message stays aligned under
   itself rather than wrapping beneath the icon. */
.alert {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: .9rem;
}

.alert>span {
    flex: 1;
    min-width: 0;
}

/* --- Buttons -------------------------------------------------------------
   `btn-xs` is a Bootstrap 3 class. Five views were already using it and
   getting a default-sized button, which is why "Remove"/"Mark read"
   buttons in dense tables looked oversized next to their row. Defining it
   is less churn than rewriting those call sites, and it gives the app a
   real third size for table-row actions. */
.btn-xs {
    padding: .15rem .5rem;
    font-size: .75rem;
    line-height: 1.5;
    border-radius: .2rem;
}

/* Buttons sitting next to each other in a table cell or a form footer
   should never touch. */
.btn+.btn {
    margin-left: .25rem;
}

td .btn+.btn,
.btn-group .btn+.btn {
    margin-left: 0;
}

/* --- Badges --------------------------------------------------------------
   The pill shape is set on bare `.badge` higher up this file. These two
   were being used by views but had never been defined anywhere, so they
   rendered as unstyled text. Defining them to match the palette is safer
   than deleting the call sites, which carry real meaning. */
.badge-soft-info {
    background: rgba(23, 162, 184, .12);
    color: #0f7c8f;
}

.badge-outline-secondary {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--muted);
}

/* --- Tables --------------------------------------------------------------
   Consistent scanning: quiet uppercase headers, roomy rows, numbers and
   actions where the eye expects them. */
.table thead th {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted);
    border-top: 0;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}

.table td {
    vertical-align: middle;
}

/* Money and counts read far faster right-aligned and in tabular figures,
   so columns line up digit under digit. Opt in with class="num". */
.table .num,
.table th.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* --- Forms ---------------------------------------------------------------
   A required field should be obvious without reading the help text, and
   help text should sit quietly under the input rather than competing with
   the label. */
.form-group label {
    font-weight: 600;
    font-size: .85rem;
    color: var(--charcoal);
}


/* --- Page header ---------------------------------------------------------
   76 pages hand-roll this block. The shared markup lives in
   partials/_page-header; these rules make the hand-rolled ones match it
   too, so the two look identical while the migration is incremental. */
.page-header {
    margin-bottom: 1.25rem;
}

.page-header-title h5 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--charcoal);
    margin: 0;
}

.page-header-title span {
    font-size: .85rem;
    color: var(--muted);
}

.breadcrumb-container .breadcrumb {
    background: transparent;
    padding: 0;
    margin-bottom: .35rem;
    font-size: .8rem;
    justify-content: flex-end;
}

@media (max-width: 767.98px) {

    /* Stacked on a phone: the breadcrumb and the action button go under
       the title instead of being squeezed beside it. */
    .breadcrumb-container .breadcrumb {
        justify-content: flex-start;
    }

    .page-header .text-right {
        text-align: left !important;
        margin-top: .5rem;
    }
}

/* --- Responsive: things the template gets wrong below 576px ------------- */
@media (max-width: 575.98px) {

    /* KPI cards were designed four-across; at phone width the value was
       clipping before the ellipsis could help. */
    .kpi-value {
        font-size: 1.25rem;
    }

    .kpi-card .card-body {
        padding: .9rem 1rem;
    }

    /* A card's own padding plus the container's gutter wasted a third of
       a 320px screen. */
    .card-body {
        padding: 1rem;
    }
}

/* A table inside .table-responsive still needs a hint that it scrolls. */
.table-responsive {
    -webkit-overflow-scrolling: touch;
}

/* --- Semantic text colours ------------------------------------------------
   These three were written inline 52 times across the views
   (color:var(--green) / --rust / --gold-dark). Same three meanings every
   time, so they are utilities now: money in / money out / needs a look.
   Named for what they MEAN, not what colour they are, so the palette can
   change without a find-and-replace through the Blade files. */
.text-positive {
    color: var(--green) !important;
}

.text-negative {
    color: var(--rust) !important;
}

.text-accent {
    color: var(--gold-dark) !important;
}

/* --- Small repeated bits of chrome -------------------------------------- */

/* A company/group logo thumbnail in a list or a profile header. */
.entity-logo-sm {
    height: 48px;
    width: 48px;
    object-fit: cover;
    border-radius: 8px;
}

.entity-logo-lg {
    height: 56px;
    width: 56px;
    object-fit: cover;
    border-radius: 12px;
    margin-right: 16px;
}

/* The label column of a two-column "detail" table (profile pages). */
.table .th-label {
    width: 220px;
    color: var(--muted);
    font-weight: 600;
}

@media (max-width: 575.98px) {

    /* A fixed 220px label column leaves nothing for the value on a
       phone; let both columns share the width instead. */
    .table .th-label {
        width: auto;
    }
}


/* --- select2 multi-select, matched to Bootstrap 4 -----------------------
   select2 ships its own look, which sits ~6px shorter than a
   .form-control and squares off the corners. Used by the agent group
   picker (agents/show); any future multi-select gets it for free. */
.select2-container--default .select2-selection--multiple {
    min-height: calc(1.5em + .75rem + 2px);
    padding: .25rem .4rem;
    border: 1px solid #ced4da;
    border-radius: .25rem;
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--gold);
    box-shadow: 0 0 0 .2rem rgba(198, 138, 46, .15);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--green-light);
    border: 1px solid var(--line);
    border-radius: 4px;
    color: var(--green);
    font-size: .82rem;
    padding: 1px 8px;
    margin-top: .25rem;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--green);
    margin-right: 5px;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--gold);
}


/* --- Sidebar: an item that ACTS rather than navigates -------------------
   "Sign out" has to be a POST (CSRF), so it is a <form><button>, not an
   <a>. The admin template styles only `.nav-item a`, so the button
   borrows the same padding, colour and hover here. This is the one
   place in the sidebar that needs it; everything else is a link. */
.navigation-main .nav-item > form {
    margin: 0;
}

.navigation-main .nav-item > form > button {
    display: block;
    width: calc(100% - 24px);
    margin: 2px 12px;
    padding: 10px 25px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: #fff;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background .2s ease;
}

.navigation-main .nav-item > form > button:hover,
.navigation-main .nav-item > form > button:focus {
    background: var(--sidebar-hover);
}

.navigation-main .nav-item > form > button i {
    font-size: 20px;
    margin-right: 10px;
    vertical-align: -4px;
}

.navigation-main .nav-item > form > button span {
    font-size: 13px;
}


/* --- What is deliberately NOT here -------------------------------------
   Bootstrap 4 already does these, so the app uses its utilities instead
   of a bespoke class (client, 2026-09-14: "stick to bootstrap4 classes
   and reduce the css styles"):

     .text-red        -> .text-danger
     .footer-note     -> .text-muted .small
     .form-actions    -> .d-flex .justify-content-end .border-top .pt-3 .mt-3
     .form-label      -> a plain <label> in a .form-group
     .form-text       -> Bootstrap's own, paired with .text-muted in markup
     .alert as a flex row -> .d-flex .align-items-start on the element
     the header's user box -> .font-weight-bold .text-muted .small .shadow

   Deleted outright for having no call sites: .d-grid, .gap-4, .gap-5,
   .custom-switch, .table .actions. (.actions LOOKED used six times — but
   every one of those was .form-actions / .sig-actions / .lm-actions,
   which a actions search matches because a hyphen is a word
   boundary. Worth remembering before the next find-and-replace.)

   What stays custom, and why Bootstrap 4 cannot do it:
     .gap-1 / .gap-2 / .gap-3   gap utilities are Bootstrap 5
     .btn-xs                    a third button size; BS3 had it, BS4 does not
     .table .num                tabular figures so money lines up digit-wise
     .text-positive/-negative/-accent, .section-label, .kpi-*, .empty-state
                                brand palette and brand components
   --------------------------------------------------------------------- */