/* ==========================================================================
   app.css — Global brand layer on top of Bootstrap 5
   --------------------------------------------------------------------------
   This file does NOT replace or override Bootstrap's design system.
   It only adds a small set of brand tokens, utilities and components that
   can be combined with Bootstrap classes (.btn, .card, .badge, ...).
   --------------------------------------------------------------------------
   Sections:
     1. Brand variables
     2. Brand utilities
     3. Custom UI components
     4. Common states
   ========================================================================== */


/* ==========================================================================
   1. BRAND VARIABLES
   Replace the placeholder colors below with your real brand colors.
   Everything else in this file reads from these variables.
   ========================================================================== */

:root {
    /* Core brand palette */
    --evolution-primary:   #abc640;
    --econnect-primary: #8b14ac;
    --econnect-primary-dark: #6f108a;
    --econnect-primary-rgb: 139, 20, 172;
    /* --daysy-primary: #6c757d; */
    /* --daysy-accent:    #ffc107;
    --brand-dark:      #1b1f2a;
    --brand-light:     #f5f7fb; */

    /* Optional tints/shades built from the palette above */
    /* --brand-primary-rgb: 47, 109, 246;
    --brand-accent-rgb:  255, 193, 7; */
}


/* ==========================================================================
   2. BRAND UTILITIES
   Thin, single-purpose helpers. Keep them small so they never fight
   with Bootstrap utilities.
   ========================================================================== */

/* .text-brand          { color: var(--brand-primary) !important; }
.text-brand-secondary{ color: var(--brand-secondary) !important; }
.text-brand-accent   { color: var(--brand-accent) !important; }
.text-brand-dark     { color: var(--brand-dark) !important; }

.bg-brand            { background-color: var(--brand-primary) !important; color: #fff; }
.bg-brand-light      { background-color: var(--brand-light) !important; }
.bg-brand-dark       { background-color: var(--brand-dark) !important; color: #fff; }

.border-brand        { border-color: var(--brand-primary) !important; }
.border-brand-light  { border-color: var(--brand-light) !important; }

.link-brand          { color: var(--brand-primary); }
.link-brand:hover,
.link-brand:focus    { color: var(--brand-dark); } */


/* ==========================================================================
   3. CUSTOM UI COMPONENTS
   Designed to sit on top of Bootstrap: add .btn-brand to .btn, .brand-card
   to .card, and .badge-brand to .badge.
   ========================================================================== */

/* Buttons — combine with .btn / .btn-* for sizing and shape
.btn-brand {
    --bs-btn-color: #fff;
    --bs-btn-bg-color: var(--brand-primary);
    --bs-btn-border-color: var(--brand-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg-color: var(--brand-dark);
    --bs-btn-hover-border-color: var(--brand-dark);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg-color: var(--brand-dark);
    --bs-btn-active-border-color: var(--brand-dark);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg-color: var(--brand-secondary);
    --bs-btn-disabled-border-color: var(--brand-secondary);
    --bs-btn-focus-shadow-rgb: var(--brand-primary-rgb);
} */

/* Cards — combine with .card */
.brand-card {
    border-color: var(--brand-primary);
    border-width: 2px;
    border-radius: .5rem;
}

.brand-card > .card-header {
    background-color: var(--brand-light);
    color: var(--brand-dark);
    font-weight: 600;
}

/* Badges — combine with .badge */
.badge-brand {
    background-color: var(--brand-primary);
    color: #fff;
}

.badge-brand-outline {
    background-color: transparent;
    color: var(--brand-primary);
    border: 1px solid var(--brand-primary);
}


/* Buttons — the <x-econnect_button> component.
   Declaring Bootstrap's --bs-btn-* variables (instead of plain color rules)
   lets Bootstrap resolve hover / :active / :focus-visible / :disabled itself,
   at equal specificity — so no !important and no per-state rules. */
.btn-econnect {
    --bs-btn-color:                 #fff;
    --bs-btn-bg:                    var(--econnect-primary);
    --bs-btn-border-color:          var(--econnect-primary);
    --bs-btn-hover-color:           #fff;
    --bs-btn-hover-bg:              var(--econnect-primary-dark);
    --bs-btn-hover-border-color:    var(--econnect-primary-dark);
    --bs-btn-active-color:          #fff;
    --bs-btn-active-bg:             #610e78;
    --bs-btn-active-border-color:   #610e78;
    --bs-btn-disabled-color:        #fff;
    --bs-btn-disabled-bg:           #a84fc1;
    --bs-btn-disabled-border-color: #a84fc1;
    --bs-btn-focus-shadow-rgb:      var(--econnect-primary-rgb);

    font-weight: bold;
    width: 100%;
    border-radius: 2rem;
    border: none;
    padding: .75rem;
}

/* .btn-econnect img {
    width: 3rem;
    height: 1rem;
} */

/* ==========================================================================
   4. COMMON STATES
   Minimal state hooks you can toggle from JS or Blade.
   ========================================================================== */

.is-active {
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 .25rem rgba(var(--brand-primary-rgb), .25);
}

.is-loading {
    opacity: .6;
    pointer-events: none;
    cursor: progress;
}

.is-hidden {
    display: none !important;
}


/* ==========================================================================
   5. PAGINATION
   Retargets Bootstrap's stock .pagination through its own CSS variables, so
   vendor/pagination/bootstrap-5.blade.php needs no changes.
   TODO: swap to --brand-primary once each custom_<brand>.css declares it.
   ========================================================================== */

.pagination {
    --bs-pagination-color: var(--evolution-primary);
    --bs-pagination-hover-color: #fff;
    --bs-pagination-hover-bg: #829630;
    --bs-pagination-hover-border-color: #829630;
    --bs-pagination-focus-color: #fff;
    --bs-pagination-focus-bg: var(--evolution-primary);
    --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(171, 198, 64, .25);
    --bs-pagination-active-color: #fff;
    --bs-pagination-active-bg: var(--evolution-primary);
    --bs-pagination-active-border-color: var(--evolution-primary);
}