/* ============================================================
   Stock Plus — Orange Theme (#fd7e14)
   Single source of truth for the primary accent color.
   Load AFTER style.css so these rules can override it.
   ============================================================ */

:root {
    --theme-primary: #fd7e14;
    --theme-primary-hover: #dc6803;
    --theme-primary-active: #b9560a;
    --theme-primary-soft: rgba(253, 126, 20, 0.12);
    --theme-primary-soft-strong: rgba(253, 126, 20, 0.22);
    --theme-font: 'Kanit', 'Sarabun', sans-serif;
    --theme-font-decorative: 'Pacifico', cursive;
}

body {
    font-family: var(--theme-font);
}

/* ------------------------------------------------------------
   Bootstrap primary-color mapping (override, not core edit)
   ------------------------------------------------------------ */
.btn-primary {
    background-color: var(--theme-primary);
    border-color: var(--theme-primary);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--theme-primary-hover) !important;
    border-color: var(--theme-primary-hover) !important;
}

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

.btn-outline-primary:hover {
    background-color: var(--theme-primary);
    border-color: var(--theme-primary);
}

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

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

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

.form-check-input:checked {
    background-color: var(--theme-primary);
    border-color: var(--theme-primary);
}

.page-link {
    color: var(--theme-primary);
}

.page-item.active .page-link {
    background-color: var(--theme-primary);
    border-color: var(--theme-primary);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 0.25rem var(--theme-primary-soft-strong);
}

/* ------------------------------------------------------------
   Theme utility classes (spec-defined)
   ------------------------------------------------------------ */
.bg-orange {
    background-color: var(--theme-primary) !important;
    color: #fff;
}

.text-orange-custom {
    color: var(--theme-primary) !important;
}

.btn-orange-custom {
    background-color: var(--theme-primary);
    border-color: var(--theme-primary);
    color: #fff;
    font-weight: 600;
    transition: background-color 0.2s, border-color 0.2s;
}

.btn-orange-custom:hover,
.btn-orange-custom:focus {
    background-color: var(--theme-primary-hover);
    border-color: var(--theme-primary-hover);
    color: #fff;
}

.btn-orange-custom:active {
    background-color: var(--theme-primary-active) !important;
    border-color: var(--theme-primary-active) !important;
}

.bg-icon-orange {
    background-color: var(--theme-primary-soft);
    color: var(--theme-primary);
}

.bullet-icon-circle {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--theme-primary-soft);
    color: var(--theme-primary);
    font-size: 1.05rem;
}

/* Badge chip: base pill shape, pair with a color modifier */
.badge-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.35rem 0.85rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.8rem;
    line-height: 1;
    border: 1px solid transparent;
}

.badge-chip-orange {
    background-color: var(--theme-primary-soft);
    color: var(--theme-primary-hover);
    border-color: rgba(253, 126, 20, 0.3);
}

.badge-chip-success {
    background-color: #E8F5E9;
    color: #2E7D32;
    border-color: #C8E6C9;
}

.badge-chip-warning {
    background-color: #FFF8E1;
    color: #B26A00;
    border-color: #FFE0B2;
}

.badge-chip-danger {
    background-color: #FFEBEE;
    color: #C62828;
    border-color: #FFCDD2;
}

.badge-chip-secondary {
    background-color: #ECEFF1;
    color: #546E7A;
    border-color: #CFD8DC;
}

/* Legend row, e.g. under charts: colored dot + label */
.badge-legend {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: #495057;
    margin-right: 12px;
}

.badge-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    background-color: var(--theme-primary);
}

/* Disabled link/menu item: visually inert without removing the element */
.disabled-link {
    pointer-events: none;
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(35%);
}

/* Generic full-height flex wrapper for sidebar + content layouts */
.main-wrapper {
    display: flex;
    width: 100%;
    min-height: calc(100vh - 56px);
}

/* ------------------------------------------------------------
   Accessibility: visible focus ring, keyboard-only
   ------------------------------------------------------------ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.nav-link:focus-visible,
.btn:focus-visible {
    outline: 2px solid var(--theme-primary);
    outline-offset: 2px;
}

/* ------------------------------------------------------------
   Responsive: keep the fixed sidebar usable on narrow screens
   ------------------------------------------------------------ */
@media (max-width: 768px) {
    #sidebar {
        min-width: 220px;
        max-width: 220px;
    }
}