/* =======================================================================
   BUTTON SYSTEM  –  FULL SHEET  (v2: improved outline-primary / secondary)
   =======================================================================*/

/* ──────────────────────────────────────────────
   0.  BASE
   ──────────────────────────────────────────────*/
.btn {
    display: inline-block;
    padding: .5rem 1rem;
    font-size: .9375rem; /* 15px */
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    text-align: center;
    border: 2px solid transparent;
    border-radius: .4rem;
    cursor: pointer;
    user-select: none;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}

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

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

    .btn:focus-visible {
        outline: none;
        box-shadow: 0 0 0 .25rem var(--focus-ring);
    }

    .btn:disabled,
    .btn.disabled {
        opacity: var(--disabled-opacity);
        cursor: not-allowed;
        pointer-events: none;
        transform: none;
        box-shadow: none;
    }

/* ──────────────────────────────────────────────
   1.  SOLID VARIANTS
   ──────────────────────────────────────────────*/
.btn-primary {
    color: var(--text-light);
    background: var(--primary-color);
    border-color: var(--primary-color);
}

    .btn-primary:hover,
    .btn-primary:focus {
        background: var(--primary-dark);
        border-color: var(--primary-dark);
    }

.btn-secondary {
    color: var(--text-light);
    background: var(--secondary-color);
    border-color: var(--secondary-color);
}

    .btn-secondary:hover {
        background: var(--secondary-dark);
        border-color: var(--secondary-dark);
    }

.btn-success {
    color: var(--text-light);
    background: var(--success-color);
    border-color: var(--success-color);
}

    .btn-success:hover {
        background: var(--success-dark);
        border-color: var(--success-dark);
    }

.btn-danger {
    color: var(--text-light);
    background: var(--danger-color);
    border-color: var(--danger-color);
}

    .btn-danger:hover {
        background: var(--danger-dark);
        border-color: var(--danger-dark);
    }

.btn-warning {
    color: var(--text-dark);
    background: var(--warning-color);
    border-color: var(--warning-color);
}

    .btn-warning:hover {
        background: var(--warning-dark);
        border-color: var(--warning-dark);
    }

.btn-info {
    color: var(--text-light);
    background: var(--info-color);
    border-color: var(--info-color);
}

    .btn-info:hover {
        background: var(--info-dark);
        border-color: var(--info-dark);
    }

.btn-light {
    color: var(--text-dark);
    background: var(--background-light);
    border-color: var(--border-light);
}

    .btn-light:hover {
        background: var(--background-medium);
        border-color: var(--border-medium);
    }

.btn-dark {
    color: var(--text-light);
    background: var(--background-dark);
    border-color: var(--background-dark);
}

    .btn-dark:hover {
        filter: brightness(1.08);
    }

/* ──────────────────────────────────────────────
   2.  OUTLINE VARIANTS
   ──────────────────────────────────────────────*/
/* ——— PRIMARY ——— */
.btn-outline-primary {
    color: var(--primary-color);
    background: transparent;
    border-color: var(--primary-color);
}

    .btn-outline-primary:hover,
    .btn-outline-primary:focus-visible {
        background: var(--primary-light);
        color: var(--text-light);
        border-color: var(--primary-dark);
        box-shadow: 0 0 0 .25rem var(--focus-ring);
    }

    .btn-outline-primary:focus { /* mouse-focus */
        border-color: var(--primary-dark);
        box-shadow: 0 0 0 .25rem var(--focus-ring);
    }

    .btn-outline-primary:disabled,
    .btn-outline-primary.disabled {
        background: transparent;
        color: var(--disabled-text);
        border-color: var(--disabled-border);
        opacity: 1;
    }

/* ——— SECONDARY ——— */
.btn-outline-secondary {
    color: var(--secondary-color);
    background: transparent;
    border-color: var(--secondary-color);
}

    .btn-outline-secondary:hover,
    .btn-outline-secondary:focus-visible {
        background: var(--secondary-light);
        color: var(--text-light);
        border-color: var(--secondary-dark);
        box-shadow: 0 0 0 .25rem var(--focus-ring);
    }

    .btn-outline-secondary:focus {
        border-color: var(--secondary-dark);
        box-shadow: 0 0 0 .25rem var(--focus-ring);
    }

    .btn-outline-secondary:disabled,
    .btn-outline-secondary.disabled {
        background: transparent;
        color: var(--disabled-text);
        border-color: var(--disabled-border);
        opacity: 1;
    }

/* ——— SUCCESS ——— */
.btn-outline-success {
    color: var(--success-color);
    background: transparent;
    border-color: var(--success-color);
}

    .btn-outline-success:hover {
        background: var(--success-color);
        color: var(--text-light);
    }

    .btn-outline-success:disabled {
        background: transparent;
        color: var(--disabled-text);
        border-color: var(--disabled-border);
        opacity: 1;
    }

/* ——— DANGER ——— */
.btn-outline-danger {
    color: var(--danger-color);
    background: transparent;
    border-color: var(--danger-color);
}

    .btn-outline-danger:hover {
        background: var(--danger-color);
        color: var(--text-light);
    }

    .btn-outline-danger:disabled {
        background: transparent;
        color: var(--disabled-text);
        border-color: var(--disabled-border);
        opacity: 1;
    }

/* ——— WARNING ——— */
.btn-outline-warning {
    color: var(--warning-color);
    background: transparent;
    border-color: var(--warning-color);
}

    .btn-outline-warning:hover {
        background: var(--warning-color);
        color: var(--text-dark);
    }

    .btn-outline-warning:disabled {
        background: transparent;
        color: var(--disabled-text);
        border-color: var(--disabled-border);
        opacity: 1;
    }

/* ——— INFO ——— */
.btn-outline-info {
    color: var(--info-color);
    background: transparent;
    border-color: var(--info-color);
}

    .btn-outline-info:hover {
        background: var(--info-color);
        color: var(--text-light);
    }

    .btn-outline-info:disabled {
        background: transparent;
        color: var(--disabled-text);
        border-color: var(--disabled-border);
        opacity: 1;
    }

.btn-outline-light {
    color: var(--text-dark);
    background: transparent;
    border: 1px solid var(--border-light);
    transition: background .2s, color .2s, border-color .2s;
}

    .btn-outline-light:hover {
        background-color: var(--background-accent);
    }

    .btn-outline-light:disabled {
        background: transparent;
        color: var(--disabled-text);
        border-color: var(--disabled-border);
        opacity: var(--disabled-opacity);
        cursor: not-allowed;
    }


.btn-outline-dark {
    color: var(--background-dark);
    background: transparent;
    border-color: var(--background-dark);
}

    .btn-outline-dark:hover {
        background: var(--background-dark);
        color: var(--text-light);
    }

    .btn-outline-dark:disabled {
        background: transparent;
        color: var(--disabled-text);
        border-color: var(--disabled-border);
        opacity: 1;
    }

/* ──────────────────────────────────────────────
   3.  SPECIALS
   ──────────────────────────────────────────────*/
.btn-link {
    padding: 0;
    border: none;
    background: transparent;
    color: var(--primary-color);
    text-decoration: underline;
}

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

.btn-ghost {
    color: var(--primary-color);
    background: transparent;
    border: 2px solid transparent;
}

    .btn-ghost:hover {
        background: rgba(var(--primary-rgb),.08);
        border-color: var(--primary-color);
    }

/* ──────────────────────────────────────────────
   4.  SIZES & UTILITIES
   ──────────────────────────────────────────────*/
.btn-sm {
    padding: .35rem .75rem;
    font-size: .8125rem;
}

.btn-lg {
    padding: .65rem 1.5rem;
    font-size: 1.125rem;
}

.btn-block {
    display: block;
    width: 100%;
}

/* Elevated -----------------------------------------------------*/
.btn-elevated {
    box-shadow: 0 4px 6px var(--shadow-color);
}

    .btn-elevated:hover {
        box-shadow: 0 6px 12px rgba(var(--black-rgb),.15);
    }

    .btn-elevated:active {
        box-shadow: inset 0 3px 6px rgba(var(--black-rgb),.20);
    }

    .btn-elevated:disabled {
        box-shadow: none;
    }



/* ======================================================================
   CARD COMPONENTS
   ======================================================================*/
.card {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: .75rem;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(var(--black-rgb),.05);
    transition: transform .25s ease, box-shadow .25s ease;
}

    .card:hover:not(.card-disabled) {
        transform: translateY(-6px);
        box-shadow: 0 8px 24px rgba(var(--black-rgb),.12);
    }

/* Clickable ----------------------------------------------------*/
.card-clickable {
    cursor: pointer;
}

    .card-clickable:focus-visible {
        outline: none;
        box-shadow: 0 0 0 .25rem var(--focus-ring);
        transform: translateY(-6px);
    }

/* Elevated -----------------------------------------------------*/
.card-elevated {
    box-shadow: 0 6px 12px rgba(var(--black-rgb),.12);
}

/* Disabled -----------------------------------------------------*/
.card-disabled {
    opacity: var(--disabled-opacity);
    pointer-events: none;
    box-shadow: none;
    filter: grayscale(.05);
}

/* ──────────────────────────────────────────────
   2.  CARD REGIONS
   ──────────────────────────────────────────────*/
.card-header {
    padding: 1rem 1.25rem;
    background: var(--background-light);
    border-bottom: 1px solid var(--border-light);
    font-weight: 600;
    color: var(--text-dark);
}

.card-header--flush {
    border-bottom: none;
}

.card-body {
    flex: 1 1 auto;
    padding: 1rem 1.25rem;
    color: var(--text-medium);
}

.card-footer {
    padding: .75rem 1.25rem;
    background: var(--background-light);
    border-top: 1px solid var(--border-light);
    font-size: .875rem;
}

/* ──────────────────────────────────────────────
   3.  CARD IMAGES
   ──────────────────────────────────────────────*/
.card-img-top {
    width: 100%;
    display: block;
    object-fit: cover;
}

.card-img-cover {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
}

    .card-img-cover > img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* ──────────────────────────────────────────────
   4.  COLOUR VARIANTS  (border + tinted header)
   ──────────────────────────────────────────────*/
.card-primary {
    border-color: var(--primary-color);
}

.card-secondary {
    border-color: var(--secondary-color);
}

.card-success {
    border-color: var(--success-color);
}

.card-danger {
    border-color: var(--danger-color);
}

.card-warning {
    border-color: var(--warning-color);
}

.card-info {
    border-color: var(--info-color);
}

.card-primary > .card-header {
    background: rgba(var(--primary-rgb), .08);
    color: var(--primary-dark);
}

.card-secondary > .card-header {
    background: rgba(var(--secondary-rgb),.08);
    color: var(--secondary-dark);
}

.card-success > .card-header {
    background: rgba(var(--success-rgb), .08);
    color: var(--success-dark);
}

.card-danger > .card-header {
    background: rgba(var(--danger-rgb), .08);
    color: var(--danger-dark);
}

.card-warning > .card-header {
    background: rgba(var(--warning-rgb),.10);
    color: var(--warning-dark);
}

.card-info > .card-header {
    background: rgba(var(--info-rgb), .08);
    color: var(--info-dark);
}

/* ──────────────────────────────────────────────
   5.  OUTLINE VARIANTS (no @apply)
   ──────────────────────────────────────────────*/
.card-outline {
    background: transparent;
    border-width: 2px;
}

.card-outline-primary {
    border-color: var(--primary-color);
}

.card-outline-secondary {
    border-color: var(--secondary-color);
}

.card-outline-success {
    border-color: var(--success-color);
}

.card-outline-danger {
    border-color: var(--danger-color);
}

.card-outline-warning {
    border-color: var(--warning-color);
}

.card-outline-info {
    border-color: var(--info-color);
}

/* subtle hover tint */
.card-outline-primary:hover:not(.card-disabled) {
    background: rgba(var(--primary-rgb), .04);
}

.card-outline-secondary:hover:not(.card-disabled) {
    background: rgba(var(--secondary-rgb),.04);
}

.card-outline-success:hover:not(.card-disabled) {
    background: rgba(var(--success-rgb), .04);
}

.card-outline-danger:hover:not(.card-disabled) {
    background: rgba(var(--danger-rgb), .04);
}

.card-outline-warning:hover:not(.card-disabled) {
    background: rgba(var(--warning-rgb), .06);
}

.card-outline-info:hover:not(.card-disabled) {
    background: rgba(var(--info-rgb), .04);
}

/* ──────────────────────────────────────────────
   6.  CARD GRID / DECK
   ──────────────────────────────────────────────*/
.card-deck {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
}

@media(max-width:600px) {
    .card-deck {
        grid-template-columns: 1fr;
    }
}

/* Text colors */
.text-primary {
    color: var(--primary-color) !important;
}

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

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

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

.text-secondary-light {
    color: var(--secondary-light) !important;
}

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

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

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

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

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

.text-muted {
    color: var(--text-gray) !important;
}

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

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

/* Backgrounds */

.bg-white {
    background-color: var(--white) !important;
}

.bg-light {
    background-color: var(--background-light) !important;
}

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

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

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

.bg-secondary {
    background-color: var(--secondary-color) !important;
}

.bg-secondary-light {
    background-color: var(--secondary-light) !important;
}

.bg-secondary-dark {
    background-color: var(--secondary-dark) !important;
}

.bg-success {
    background-color: var(--success-color) !important;
}

.bg-danger {
    background-color: var(--danger-color) !important;
}

.bg-warning {
    background-color: var(--warning-color) !important;
}

.bg-info {
    background-color: var(--info-color) !important;
}

/* Borders */
.border-primary {
    border-color: var(--primary-color) !important;
}

.border-secondary {
    border-color: var(--secondary-color) !important;
}

.border-success {
    border-color: var(--success-color) !important;
}

.border-danger {
    border-color: var(--danger-color) !important;
}

.border-warning {
    border-color: var(--warning-color) !important;
}

.border-info {
    border-color: var(--info-color) !important;
}

.border-muted {
    border-color: var(--border-medium) !important;
}

/* Links */
.link-primary {
    color: var(--link-color);
}

    .link-primary:hover,
    .link-primary:focus {
        color: var(--link-hover);
    }

/* Status Indicators */
.status-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.status-active {
    background-color: var(--success-color);
}

.status-inactive {
    background-color: var(--danger-color);
}

.status-warning {
    background-color: var(--warning-color);
}




/* ───────────────── BUTTON OUTLINES ───────────────── */
/*.btn-outline-primary {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

    .btn-outline-primary:hover {
        background: var(--primary-light);
        color: var(--white);
    }

.btn-outline-secondary {
    color: var(--text-dark);
    border-color: var(--border-medium);
}

    .btn-outline-secondary:hover {
        background: var(--border-medium);
        color: var(--text-light);
    }*/