/* =============================================================================
   ROYAL EDUCARE — the brand layer
   Your Gateway to Global Education
   -----------------------------------------------------------------------------
   Loaded FIRST by every layout, immediately after Bootstrap and before the
   surface stylesheet (app.css, admin.css, portal.css, print.css).

   WHY THIS FILE EXISTS
   --------------------
   The admin panel loaded only admin.css, which carried its OWN copy of the
   design tokens — a different ink, a different body grey, a different muted, a
   different border, and an accent that was still the pre-Phase-16 gold. So the
   public site rendered green and the admin rendered gold, with six tokens
   quietly disagreeing between them.

   One definition, four surfaces. Change a brand colour here and every screen
   follows, including the ones nobody remembered to check.

   IT ALSO BRIDGES BOOTSTRAP
   -------------------------
   Bootstrap 5.3 builds its components on its own custom properties. Twenty-one
   of its classes were used five or more times in these views with no project
   styling at all — `btn-outline-primary` ninety-eight times, `btn-outline-
   secondary` a hundred and twenty-six, `badge` a hundred and seventy-seven —
   every one of them painting Bootstrap's default #0d6efd blue in the middle of
   a navy-and-green product.

   Overriding Bootstrap's variables is the honest way to fix that: no `!important`,
   no specificity war, and a component that Bootstrap updates keeps working.
   ============================================================================= */

:root {
    /* ---------------------------------------------------------------------
       THE BRAND — taken from the official logo, and from nothing else.
       --------------------------------------------------------------------- */
    --brand-primary:       #0b2e6f;   /* navy: the cap and the EDUCARE mark   */
    --brand-primary-dark:  #071f4a;
    --brand-primary-mid:   #1a4a9e;
    --brand-primary-soft:  #eef2fb;

    /* Green, from the Royal wordmark and the swoosh. Three weights because
       green is darker than the gold it replaced, and contrast had to be
       measured rather than assumed:
         #1f9d4d on white .... 3.51:1  icons and fills only
         #15773a on white .... 5.63:1  text on light
         #35c06a on navy ..... 5.44:1  text on a dark surface              */
    --brand-accent:        #1f9d4d;
    --brand-accent-dark:   #15773a;
    --brand-accent-deep:   #11602f;
    --brand-accent-light:  #35c06a;
    --brand-accent-soft:   #e9f7ef;

    --brand-text:          #0d1526;
    --brand-body:          #4a5568;
    --brand-muted:         #8a94a6;
    --brand-background:    #f6f8fc;
    --brand-surface:       #ffffff;
    --brand-border:        #e4e8f0;

    --brand-radius-sm:     10px;
    --brand-radius:        16px;
    --brand-radius-lg:     22px;
    --brand-shadow-xs:     0 1px 2px rgba(13, 21, 38, .06);
    --brand-shadow-sm:     0 4px 14px -6px rgba(11, 46, 111, .16);
    --brand-shadow:        0 14px 36px -20px rgba(11, 46, 111, .30);

    /* Semantic signals. NOT brand colours — a warning that matches the brand
       is a warning nobody reads as one. */
    --brand-danger:        #cd2e3a;
    --brand-danger-soft:   #fdecee;
    --brand-warning:       #b8862d;
    --brand-warning-dark:  #8a6320;
    --brand-warning-soft:  #fdf6e8;
    --brand-info:          #1a4a9e;
    --brand-info-soft:     #e8f1fd;
    --brand-success:       var(--brand-accent-dark);
    --brand-success-soft:  var(--brand-accent-soft);

    /* A five-star rating rendered in brand green reads as a progress bar. */
    --brand-star:          #e0a83a;

    --brand-ease:          cubic-bezier(.16, .84, .44, 1);
    --brand-t:             .22s var(--brand-ease);

    --brand-font:          'Inter', 'Noto Sans Bengali', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --brand-font-head:     'Poppins', 'Inter', 'Noto Sans Bengali', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* ---------------------------------------------------------------------
       BOOTSTRAP, MAPPED ONTO THE BRAND
       --------------------------------------------------------------------- */
    --bs-primary:          var(--brand-primary);
    --bs-primary-rgb:      11, 46, 111;
    --bs-success:          var(--brand-accent-dark);
    --bs-success-rgb:      21, 119, 58;
    --bs-danger:           var(--brand-danger);
    --bs-danger-rgb:       205, 46, 58;
    --bs-warning:          var(--brand-warning);
    --bs-warning-rgb:      184, 134, 45;
    --bs-info:             var(--brand-info);
    --bs-info-rgb:         26, 74, 158;

    --bs-link-color:       var(--brand-primary);
    --bs-link-color-rgb:   11, 46, 111;
    --bs-link-hover-color: var(--brand-primary-dark);

    --bs-body-color:       var(--brand-body);
    --bs-body-bg:          var(--brand-surface);
    --bs-border-color:     var(--brand-border);
    --bs-emphasis-color:   var(--brand-text);
    --bs-secondary-color:  var(--brand-muted);

    --bs-border-radius:    var(--brand-radius-sm);
    --bs-border-radius-sm: 8px;
    --bs-border-radius-lg: var(--brand-radius);

    --bs-font-sans-serif:  var(--brand-font);
}


/* =============================================================================
   BUTTONS — one system, five roles
   -----------------------------------------------------------------------------
   Section AC of the brief: primary, secondary, outline, text, danger, with a
   consistent height, padding, radius, focus and disabled state.

   Two button vocabularies exist in this project and that is deliberate: `re-btn`
   on the public site, where a button is a marketing call to action, and `btn`
   in the admin, where a button is a dense control in a data table. They are not
   merged — but they now share their tokens, so height, radius, focus ring and
   disabled behaviour match wherever a user crosses between them.
   ============================================================================= */

.btn {
    --bs-btn-border-radius: var(--brand-radius-sm);
    --bs-btn-focus-box-shadow: 0 0 0 .2rem rgba(11, 46, 111, .25);
    font-weight: 600;
}

/* Primary — navy. The default action, everywhere. */
.btn-primary {
    --bs-btn-bg: var(--brand-primary);
    --bs-btn-border-color: var(--brand-primary);
    --bs-btn-hover-bg: var(--brand-primary-dark);
    --bs-btn-hover-border-color: var(--brand-primary-dark);
    --bs-btn-active-bg: var(--brand-primary-dark);
    --bs-btn-active-border-color: var(--brand-primary-dark);
    --bs-btn-disabled-bg: var(--brand-primary);
    --bs-btn-disabled-border-color: var(--brand-primary);
}

/* Outline primary — the most-used control in the admin. Ninety-eight uses,
   every one of them Bootstrap blue until this rule existed. */
.btn-outline-primary {
    --bs-btn-color: var(--brand-primary);
    --bs-btn-border-color: var(--brand-border);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--brand-primary);
    --bs-btn-hover-border-color: var(--brand-primary);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--brand-primary-dark);
    --bs-btn-active-border-color: var(--brand-primary-dark);
    --bs-btn-disabled-color: var(--brand-muted);
    --bs-btn-disabled-border-color: var(--brand-border);
}

.btn-outline-secondary {
    --bs-btn-color: var(--brand-body);
    --bs-btn-border-color: var(--brand-border);
    --bs-btn-hover-color: var(--brand-text);
    --bs-btn-hover-bg: var(--brand-background);
    --bs-btn-hover-border-color: var(--brand-muted);
    --bs-btn-active-color: var(--brand-text);
    --bs-btn-active-bg: var(--brand-background);
    --bs-btn-active-border-color: var(--brand-muted);
    --bs-btn-disabled-color: var(--brand-muted);
    --bs-btn-disabled-border-color: var(--brand-border);
}

/* Green is the SUPPORTING colour: a positive action, not the default one. */
.btn-outline-success, .btn-success {
    --bs-btn-color: var(--brand-accent-dark);
    --bs-btn-border-color: var(--brand-border);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--brand-accent-dark);
    --bs-btn-hover-border-color: var(--brand-accent-dark);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--brand-accent-deep);
    --bs-btn-active-border-color: var(--brand-accent-deep);
}

.btn-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--brand-accent-dark);
    --bs-btn-border-color: var(--brand-accent-dark);
}

/* Danger is deliberately louder than the rest: these actions are the ones a
   person cannot undo by pressing back. */
.btn-outline-danger {
    --bs-btn-color: var(--brand-danger);
    --bs-btn-border-color: var(--brand-border);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--brand-danger);
    --bs-btn-hover-border-color: var(--brand-danger);
    --bs-btn-active-bg: #a5252f;
    --bs-btn-active-border-color: #a5252f;
    --bs-btn-focus-box-shadow: 0 0 0 .2rem rgba(205, 46, 58, .25);
}

.btn-link {
    --bs-btn-color: var(--brand-primary);
    --bs-btn-hover-color: var(--brand-primary-dark);
    text-decoration: none;
}

.btn-link:hover { text-decoration: underline; }

/* Small buttons are the admin's workhorse: 224 uses. A consistent height stops
   a row of them looking ragged. */
.btn-sm {
    --bs-btn-padding-y: .3rem;
    --bs-btn-padding-x: .65rem;
    --bs-btn-font-size: .8125rem;
    --bs-btn-border-radius: 8px;
}


/* =============================================================================
   STATUS BADGES — section AB
   -----------------------------------------------------------------------------
   One vocabulary, and never colour alone: each badge keeps its text label, so
   the meaning survives for a colour-blind reader and in a black-and-white
   print of an invoice.
   ============================================================================= */

.badge {
    font-weight: 600;
    letter-spacing: .01em;
    padding: .35em .6em;
    border-radius: 7px;
}

.badge.bg-primary   { background: var(--brand-primary) !important; }
.badge.bg-secondary { background: var(--brand-muted) !important; }
.badge.bg-success   { background: var(--brand-accent-dark) !important; }
.badge.bg-danger    { background: var(--brand-danger) !important; }
.badge.bg-warning   { background: var(--brand-warning) !important; color: #fff !important; }
.badge.bg-info      { background: var(--brand-info) !important; color: #fff !important; }
.badge.bg-light     { background: var(--brand-background) !important; color: var(--brand-body) !important; }
.badge.bg-dark      { background: var(--brand-text) !important; }

/* Bootstrap's text-bg-info picks black text, because stock info is a light cyan.
   The brand's info is a dark blue, where black fails contrast (about 2.5:1) and
   white passes (about 9:1). Warning keeps black: on the brand gold it is the
   stronger of the two. */
.text-bg-info { color: #fff !important; }


/* =============================================================================
   ALERTS
   ============================================================================= */

.alert { border-radius: var(--brand-radius-sm); border-width: 1px; }

.alert-primary   { --bs-alert-bg: var(--brand-primary-soft);  --bs-alert-border-color: #d6e0f6; --bs-alert-color: var(--brand-primary-dark); }
.alert-success   { --bs-alert-bg: var(--brand-accent-soft);   --bs-alert-border-color: #c7ead6; --bs-alert-color: var(--brand-accent-dark); }
.alert-warning   { --bs-alert-bg: var(--brand-warning-soft);  --bs-alert-border-color: #f3e2bd; --bs-alert-color: var(--brand-warning-dark); }
.alert-danger    { --bs-alert-bg: var(--brand-danger-soft);   --bs-alert-border-color: #f7ccd1; --bs-alert-color: #9c222c; }
.alert-info      { --bs-alert-bg: var(--brand-info-soft);     --bs-alert-border-color: #cfe0f8; --bs-alert-color: var(--brand-primary-dark); }
.alert-light,
.alert-secondary { --bs-alert-bg: var(--brand-background);    --bs-alert-border-color: var(--brand-border); --bs-alert-color: var(--brand-body); }


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

.form-control, .form-select {
    border-color: var(--brand-border);
    color: var(--brand-text);
}

.form-control:focus, .form-select:focus {
    border-color: var(--brand-primary-mid);
    box-shadow: 0 0 0 .2rem rgba(11, 46, 111, .16);
}

.form-control::placeholder { color: var(--brand-muted); }

.form-label { font-weight: 600; color: var(--brand-text); font-size: .875rem; }
.form-text  { color: var(--brand-muted); font-size: .8125rem; }

.form-check-input:checked {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

.form-check-input:focus {
    border-color: var(--brand-primary-mid);
    box-shadow: 0 0 0 .2rem rgba(11, 46, 111, .16);
}

/* A switch that is ON is a positive state — the one place green leads. */
.form-switch .form-check-input:checked {
    background-color: var(--brand-accent-dark);
    border-color: var(--brand-accent-dark);
}

.input-group-text {
    background: var(--brand-background);
    border-color: var(--brand-border);
    color: var(--brand-muted);
}

.is-invalid { border-color: var(--brand-danger) !important; }
.invalid-feedback { color: var(--brand-danger); font-size: .8125rem; }


/* =============================================================================
   TABLES, PAGINATION, DROPDOWNS
   ============================================================================= */

.table {
    --bs-table-border-color: var(--brand-border);
    --bs-table-color: var(--brand-body);
}

.table > :not(caption) > * > * { padding: .7rem .75rem; }

.pagination {
    --bs-pagination-color: var(--brand-body);
    --bs-pagination-border-color: var(--brand-border);
    --bs-pagination-hover-color: var(--brand-primary);
    --bs-pagination-hover-bg: var(--brand-primary-soft);
    --bs-pagination-hover-border-color: var(--brand-border);
    --bs-pagination-active-bg: var(--brand-primary);
    --bs-pagination-active-border-color: var(--brand-primary);
    --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(11, 46, 111, .2);
    --bs-pagination-border-radius: 8px;
}

.dropdown-menu {
    --bs-dropdown-border-color: var(--brand-border);
    --bs-dropdown-border-radius: var(--brand-radius-sm);
    --bs-dropdown-link-active-bg: var(--brand-primary);
    --bs-dropdown-link-hover-bg: var(--brand-primary-soft);
    --bs-dropdown-link-color: var(--brand-body);
    box-shadow: var(--brand-shadow-sm);
}

.nav-tabs {
    --bs-nav-tabs-border-color: var(--brand-border);
    --bs-nav-tabs-link-active-color: var(--brand-primary);
    --bs-nav-tabs-link-active-border-color: var(--brand-border) var(--brand-border) #fff;
}

.nav-tabs .nav-link { color: var(--brand-body); font-weight: 600; }
.nav-tabs .nav-link:hover { color: var(--brand-primary); }


/* =============================================================================
   ACCESSIBILITY — section AF
   -----------------------------------------------------------------------------
   A visible focus ring on everything reachable by keyboard. `:focus-visible`
   rather than `:focus`, so a mouse click does not leave a ring behind while a
   Tab press does.
   ============================================================================= */

:focus-visible {
    outline: 2px solid var(--brand-primary-mid);
    outline-offset: 2px;
    border-radius: 4px;
}

/* On a navy surface the navy ring would be invisible. */
.re-sidebar :focus-visible,
.re-footer :focus-visible,
.re-strip :focus-visible,
.re-auth-panel :focus-visible {
    outline-color: var(--brand-accent-light);
}

/*
 * Reach the content without tabbing the whole menu.
 *
 * `.re-skip` is the name app.css already used and the public and portal
 * layouts already emit; this definition moves here so the admin — which had
 * no skip link at all — gets it too.
 */
.re-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1080;
    padding: .7rem 1.1rem;
    background: var(--brand-primary);
    color: #fff;
    font-weight: 600;
    border-radius: 0 0 var(--brand-radius-sm) 0;
    text-decoration: none;
}

.re-skip:focus {
    left: 0;
    color: #fff;
}

/* Somebody who has asked their operating system for less motion has asked
   every site, including this one. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}