/* ============================================================================
   Attendify Brand Tokens
   ----------------------------------------------------------------------------
   Single source of truth for the system palette. Every module CSS file
   references these custom properties (var(--brand-*)) instead of hard-coded
   colors, so the whole dashboard is re-themable at runtime.

   The two base colors (--brand-main, --brand-secondary) are the ONLY values
   that need to change. They are overridden per-company from Settings via an
   inline <style> block in the layout head (see owner/site master layouts).
   Everything else (hover, washes, tints, borders) is derived automatically
   from the base with color-mix(), so a custom palette stays internally
   consistent without any extra configuration.

   The values below are only the *fallback* defaults, used when a company has
   not chosen its own colors yet.
   ========================================================================== */

:root {
    /* --- Base palette (overridden from Settings) --- */
    --brand-main: #155A48;          /* primary: buttons, active nav, links, icons */
    --brand-secondary: #22A075;     /* secondary: accents, gradients, highlights */

    /* RGB channels for use inside rgba(var(--x), a) — overridden from Settings */
    --brand-main-rgb: 21, 90, 72;
    --brand-secondary-rgb: 34, 160, 117;

    /* --- Derived shades (auto-computed from the base colors) --- */
    --brand-main-dark: color-mix(in srgb, var(--brand-main, #155A48) 82%, #000);   /* pressed / hover on solids */
    --brand-heading:   var(--brand-main, #155A48);                                 /* headings & dark accents */

    /* Soft surfaces (selected rows, chips, hover backgrounds, subtle borders) */
    --brand-soft:   color-mix(in srgb, var(--brand-main, #155A48)  3%, #fff);   /* near-white wash */
    --brand-wash:   color-mix(in srgb, var(--brand-main, #155A48)  6%, #fff);   /* light background */
    --brand-tint:   color-mix(in srgb, var(--brand-main, #155A48) 13%, #fff);   /* badge / chip fill */
    --brand-border: color-mix(in srgb, var(--brand-main, #155A48) 22%, #fff);   /* soft border */
}

/* ============================================================================
   Vendor Bootstrap overrides
   ----------------------------------------------------------------------------
   Catches any residual framework blue on elements that don't use the custom
   module classes (stray .btn-primary, links, badges, form focus, etc.) so the
   brand is applied consistently everywhere.
   ========================================================================== */

.btn-primary {
    background-color: var(--brand-main, #155A48);
    border-color: var(--brand-main, #155A48);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    background-color: var(--brand-main-dark, #114a3b);
    border-color: var(--brand-main-dark, #114a3b);
}
.btn-outline-primary {
    color: var(--brand-main, #155A48);
    border-color: var(--brand-main, #155A48);
}
.btn-outline-primary:hover,
.btn-outline-primary:active {
    background-color: var(--brand-main, #155A48);
    border-color: var(--brand-main, #155A48);
    color: #fff;
}

.text-primary { color: var(--brand-main, #155A48) !important; }
.bg-primary   { background-color: var(--brand-main, #155A48) !important; }
.border-primary { border-color: var(--brand-main, #155A48) !important; }

a { color: var(--brand-main, #155A48); }
a:hover { color: var(--brand-main-dark, #114a3b); }

.badge.bg-primary,
.badge.badge-primary {
    background-color: var(--brand-main, #155A48) !important;
    color: #fff;
}

/* Form controls focus ring */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--brand-main, #155A48);
    box-shadow: 0 0 0 0.15rem rgba(var(--brand-main-rgb), 0.20);
}
.form-check-input:checked {
    background-color: var(--brand-main, #155A48);
    border-color: var(--brand-main, #155A48);
}
.form-switch .form-check-input:checked {
    background-color: var(--brand-main, #155A48);
    border-color: var(--brand-main, #155A48);
}

/* Select2 (used across settings & forms) */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--selected {
    background-color: var(--brand-main, #155A48);
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--brand-main, #155A48);
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--brand-tint);
    border-color: var(--brand-border);
    color: var(--brand-heading);
}

/* Spinners / progress that lean on the theme accent */
.spinner-border.text-primary,
.progress-bar {
    color: var(--brand-main, #155A48);
}
.progress-bar { background-color: var(--brand-main, #155A48); }

/* ============================================================================
   Settings — brand color pickers
   ----------------------------------------------------------------------------
   Turns the bare native <input type="color"> swatches into proper, sized,
   rounded pickers so the modal reads as part of the design system.
   ========================================================================== */

/* One clean control: a single-bordered color swatch + a plain hex readout.
   width/border/padding use !important to override the generic
   `.set-modal .sm-form-control input` rule that would otherwise add a
   second border and stretch both inputs to full width. */
.brand-color-field {
    display: flex;
    align-items: center;
    gap: 12px;
}
.brand-color-field input[type="color"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    flex: 1;
    width: auto !important;
    height: 46px;
    min-height: 46px !important;
    padding: 4px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
}
.brand-color-field input[type="color"]:focus { outline: none; }
.brand-color-field input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.brand-color-field input[type="color"]::-webkit-color-swatch { border: none; border-radius: 7px; }
.brand-color-field input[type="color"]::-moz-color-swatch { border: none; border-radius: 7px; }
.brand-color-field .brand-color-hex {
    flex: 0 0 auto;
    width: 96px !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    font-family: "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .5px;
    color: #374151;
    text-transform: uppercase;
    outline: none;
}