/* =============================================================
   theme.css — Aphrodite Window Blinds Trading
   Central color system. Include this ONCE in your layout,
   before any other stylesheets (after Bootstrap).
   Usage: var(--color-brand-dark), bg-brand, text-brand, btn-brand, etc.
   ============================================================= */

/* ── 1. CSS Custom Properties (variables) ─────────────────────
   These are available everywhere in the app via var(--name).
   ─────────────────────────────────────────────────────────── */
:root {

    /* ── Brand Colors ── */
    --color-brand-darkest:  #000000;   /* deepest, for shadows / borders  */
    --color-brand-darker:   #2E2010; /* bridge between dark and brand */
    --color-brand-dark:     #1F150C;   /* primary brand brown (buttons, headings) */
    --color-brand:          #412D15;   /* hover state, secondary actions   */
    --color-brand-mid:      #5A4A2E;   /* accents, active states           */
    --color-brand-light:    #7A6A4A;   /* lighter accent, badges           */
    --color-brand-muted:    #A09070;   /* soft tint, hover backgrounds     */
    --color-brand-pale:     #C4BAA0;   /* gradient end, backgrounds        */
    --color-brand-faint:    #E1DCC9;   /* page/card tint backgrounds       */

    /* ── Gradient ── */
    --gradient-brand: linear-gradient(135deg, #C4BAA0, #E1DCC9);
    --gradient-brand-dark: linear-gradient(135deg, #2E2010, #412D15);

    /* ── Semantic aliases (use these in components) ── */
    --color-primary:        var(--color-brand-dark);
    --color-primary-hover:  var(--color-brand);
    --color-primary-text:   #ffffff;

    --color-sidebar-bg:     var(--color-brand-dark);
    --color-sidebar-active: var(--color-brand);
    --color-sidebar-text:   #ffffff;

    --color-btn-bg:         var(--color-brand-dark);
    --color-btn-hover:      var(--color-brand);
    --color-btn-text:       #ffffff;

    /* ── Neutral / UI ── */
    --color-text-base:      #2c3e50;
    --color-text-muted:     #6c757d;
    --color-border:         #dee2e6;
    --color-surface:        #ffffff;
    --color-bg-page:        #f8f9fa;
}


/* ── 2. Background utilities ──────────────────────────────────
    .bg-brand, .bg-brand-dark, .bg-brand-light, etc.
    ─────────────────────────────────────────────────────────── */
.bg-brand-darkest  { background-color: var(--color-brand-darkest) !important; }
.bg-brand-dark     { background-color: var(--color-brand-dark)    !important; }
.bg-brand          { background-color: var(--color-brand)         !important; }
.bg-brand-mid      { background-color: var(--color-brand-mid)     !important; }
.bg-brand-light    { background-color: var(--color-brand-light)   !important; }
.bg-brand-muted    { background-color: var(--color-brand-muted)   !important; }
.bg-brand-pale     { background-color: var(--color-brand-pale)    !important; }
.bg-brand-faint    { background-color: var(--color-brand-faint)   !important; }
.bg-gradient-brand { background: var(--gradient-brand)            !important; }
.bg-gradient-brand-dark { background: var(--gradient-brand-dark)  !important; }


/* ── 3. Text utilities ────────────────────────────────────────
    .text-brand, .text-brand-light, etc.
    ─────────────────────────────────────────────────────────── */
.text-brand-darkest { color: var(--color-brand-darkest) !important; }
.text-brand-dark    { color: var(--color-brand-dark)    !important; }
.text-brand         { color: var(--color-brand)         !important; }
.text-brand-mid     { color: var(--color-brand-mid)     !important; }
.text-brand-light   { color: var(--color-brand-light)   !important; }
.text-brand-muted   { color: var(--color-brand-muted)   !important; }
.text-brand-pale    { color: var(--color-brand-pale)    !important; }


/* ── 4. Border utilities ──────────────────────────────────────*/
.border-brand-darkest { border-color: var(--color-brand-darkest) !important; }
.border-brand-dark    { border-color: var(--color-brand-dark)    !important; }
.border-brand         { border-color: var(--color-brand)         !important; }
.border-brand-mid     { border-color: var(--color-brand-mid)     !important; }
.border-brand-light   { border-color: var(--color-brand-light)   !important; }
.border-brand-muted   { border-color: var(--color-brand-muted)   !important; }


/* ── 5. Button: .btn-brand ────────────────────────────────────
    Replaces the one-off .btn-laundry in login.php.
    Usage: <button class="btn btn-brand">Login</button>
    ─────────────────────────────────────────────────────────── */
.btn-brown {
    background-color: var(--color-btn-bg);
    color:            var(--color-btn-text);
    border:           none;
    transition:       0.3s;
}
.btn-brown:hover,
.btn-brown:focus {
    background-color: var(--color-btn-hover);
    color:            var(--color-btn-text);
}

.btn-brand {
    background-color: var(--color-btn-bg);
    color:            var(--color-btn-text);
    border:           none;
    font-weight:      600;
    border-radius:    25px;
    transition:       0.3s;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    min-height: 48px;
}
.btn-brand:hover,
.btn-brand:focus {
    background-color: var(--color-btn-hover);
    color:            var(--color-btn-text);
}
.btn-brand:active {
    background-color: var(--color-brand-darkest);
    color:            var(--color-btn-text);
}
.btn-brand:focus-visible {
    outline:        3px solid var(--color-brand-mid);
    outline-offset: 2px;
}

/* Outline variant */
.btn-brand-outline {
    background-color: transparent;
    color:            var(--color-brand-dark);
    border:           2px solid var(--color-brand-dark);
    font-weight:      600;
    border-radius:    25px;
    transition:       all 0.3s;
}
.btn-brand-outline:hover {
    background-color: var(--color-brand-dark);
    color:            #ffffff;
}


/* ── 6. Badge: .badge-brand ───────────────────────────────────
    Usage: <span class="badge badge-brand">Active</span>
    ─────────────────────────────────────────────────────────── */
.badge-brand {
    background-color: var(--color-brand-dark);
    color:            #ffffff;
}
.badge-brand-light {
    background-color: var(--color-brand-muted);
    color:            var(--color-brand-dark);
}


/* ── 7. Focus ring override ───────────────────────────────────
    Replaces Bootstrap's blue focus ring with the brand color.
    ─────────────────────────────────────────────────────────── */
.form-control:focus,
.form-select:focus {
    border-color: var(--color-brand-light);
    box-shadow:   0 0 0 0.2rem rgba(90, 74, 46, 0.25);
}


/* ── 8. Link variant ──────────────────────────────────────────*/
.link-brand {
    color:           var(--color-brand-dark);
    text-decoration: none;
    transition:      color 0.2s;
}
.link-brand:hover {
    color: var(--color-brand);
}


/* ── 9. Card accent variant ───────────────────────────────────*/
.card-brand {
    border-top: 4px solid var(--color-brand-dark);
}


/* ── 10. Sidebar integration ──────────────────────────────────
    If you want to drive the sidebar color from this file:
    Set --sidebar-bg in your sidebar styles to var(--color-brand).
   ─────────────────────────────────────────────────────────── */
.sidebar-wrapper {
    background-color: var(--color-brand-darker);
}

/* ────────────────────────────────────────────────────────────────
   Autocomplete Dropdown Styling
   ──────────────────────────────────────────────────────────────── */

.autocomplete-wrapper {
    position: relative;
}

.ac-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #ffffff;
    border: 1px solid #dee2e6;
    border-top: none;
    border-radius: 0 0 0.375rem 0.375rem;
    max-height: 300px;
    overflow-y: auto;
    z-index: 1050;
    display: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-top: -1px;
}

.ac-menu.show {
    display: block;
}

.ac-item {
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid #f1f1f1;
    transition: background-color 0.15s ease-in-out;
}

.ac-item:last-child {
    border-bottom: none;
}

.ac-item:hover,
.ac-item.hover {
    background-color: #e7f3ff;
    color: #522500;
    font-weight: 500;
}

.autocomplete-wrapper .form-control:focus {
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(82, 37, 0, 0.25);
}

.ac-menu::-webkit-scrollbar {
    width: 8px;
}

.ac-menu::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.ac-menu::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

.ac-menu::-webkit-scrollbar-thumb:hover {
    background: #555;
}