/* ============================================
   CSS Custom Properties — Color System
   Zanimex Theme Variables
   ============================================ */

:root {
    /* ── Layout ──────────────────────────────── */
    --page-width:           1400px;

    /* ── Primary ─────────────────────────────── */
    --color-primary:        #ffd256; /* #ffbade */
    --color-primary-hover:  #ff9bc7;
    --color-primary-active: #ff7eb3;
    --color-primary-rgb:    255, 186, 222;          /* for rgba() usage */

    /* ── Secondary ───────────────────────────── */
    --color-secondary:      #9ca3af;
    --color-secondary-hover:#bcc3ce;

    /* ── Background ──────────────────────────── */
    --bg-color:             #1B1B1B;        /* body / page background */
    --bg-card:              #202020;                 /* cards, sidebars, containers */
    --bg-card-deep:         #16213e;                 /* deeper cards */
    --bg-surface:           #1e1e24;                 /* episode containers, surfaces */
    --bg-elevated:          #2b2b2b;                 /* tooltips, elevated panels */
    --bg-input:             #ffffff;                 /* select / input backgrounds */
    --text-input:           #222;                    /* input text color */
    --text-input-placeholder: #999;                  /* input placeholder color */
    --border-input:         #ddd;                    /* input border color */
    --border-input-focus:   var(--color-primary);    /* input border focus color */
    --input-icon-color:     #999;                    /* input icon color */
    --input-icon-focus:     var(--color-primary);    /* input icon focus color */
    --bg-item:              #35373d;                 /* episode items, small tiles */
    --bg-item-hover:        #67686f;                 /* item hover state */

    /* ── Text ────────────────────────────────── */
    --text-white:           #fff;
    --text-primary:         #fff;
    --text-secondary:       #aaa;
    --text-muted:           #777;
    --text-placeholder:     #555;
    --text-light:           #ccc;
    --text-dark:            #111;

    /* ── Border ──────────────────────────────── */
    --border-primary:       rgba(255, 186, 222, 0.08);
    --border-primary-hover: rgba(255, 186, 222, 0.15);
    --border-primary-focus: rgba(255, 186, 222, 0.20);
    --border-subtle:        rgba(255, 255, 255, 0.06);
    --border-light:         rgba(255, 255, 255, 0.1);

    /* ── Hover / Overlay ─────────────────────── */
    --hover-primary-bg:     rgba(255, 186, 222, 0.08);
    --hover-primary-bg-md:  rgba(255, 186, 222, 0.12);
    --hover-primary-bg-lg:  rgba(255, 186, 222, 0.15);
    --hover-primary-bg-xl:  rgba(255, 186, 222, 0.20);
    --overlay-dark:         rgba(0, 0, 0, 0.3);
    --overlay-dark-md:      rgba(0, 0, 0, 0.5);

    /* ── Status / Accent ─────────────────────── */
    --color-danger:         #ff6b7a;
    --color-danger-bg:      rgba(220, 53, 69, 0.12);
    --color-success:        #5ddb6e;
    --color-success-bg:     rgba(40, 167, 69, 0.12);
    --color-warning:        #FF5700;
    --color-rating:         #ffd700;
    --color-info:           #7676ff;

    /* ── Badge ───────────────────────────────── */
    --color-sub:            #b0e3af;
    --color-dub:            #B9E7FF;

    /* ── Focus / Shadow ──────────────────────── */
    --focus-ring:           0 0 0 3px rgba(255, 186, 222, 0.12);
    --shadow-primary:       0 2px 8px  rgba(255, 186, 222, 0.35);
    --shadow-primary-lg:    0 4px 15px rgba(255, 186, 222, 0.30);
}

/* ============================================
   Global White Inputs Override
   ============================================ */

.form-control,
textarea.form-control,
select.form-control,
input.form-control {
    background-color: #fff !important;
    color: #222 !important;
    border-color: #ddd !important;
}

.form-control:focus,
textarea.form-control:focus,
select.form-control:focus,
input.form-control:focus {
    background-color: #fff !important;
    color: #222 !important;
    border-color: var(--color-primary) !important;
    box-shadow: var(--focus-ring);
}

.form-control::placeholder {
    color: #999 !important;
}

.form-control:disabled,
.form-control[readonly] {
    background-color: #f5f5f5 !important;
    color: #666 !important;
}

/* Override Bootstrap bg-dark on inputs */
.form-control.bg-dark {
    background-color: #fff !important;
    color: #222 !important;
}

/* Preform dark inputs override */
.preform.preform-dark .form-control {
    background-color: #fff !important;
    color: #222 !important;
}

.preform.preform-dark .form-control::placeholder {
    color: #999 !important;
    opacity: 1 !important;
}

/* Override search inputs in navigation */
.nc-search .search-content input.search-input {
    background-color: #fff !important;
    color: #222 !important;
    border-color: #ddd !important;
}

/* Select elements */
select,
.custom-select {
    background-color: #fff !important;
    color: #222 !important;
    border-color: #ddd !important;
}

select:focus,
.custom-select:focus {
    border-color: var(--color-primary) !important;
}