/* ═══════════════════════════════════════════════════════════
   POS Maki — Custom Admin Theme
   Harmonisé avec la charte graphique de la page de login
   Gradient: #667eea → #764ba2
   ═══════════════════════════════════════════════════════════ */

:root {
    --pos-primary:       #667eea;
    --pos-primary-dark:  #5a6fd6;
    --pos-secondary:     #764ba2;
    --pos-gradient:      linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --pos-gradient-soft: linear-gradient(135deg, rgba(102,126,234,0.08) 0%, rgba(118,75,162,0.08) 100%);
    --pos-surface:       #ffffff;
    --pos-bg:            #f5f6fa;
    --pos-text:          #1a1a2e;
    --pos-text-muted:    rgba(26,26,46,0.5);
    --pos-border:        #e8e9f0;
    --pos-shadow:        0 2px 12px rgba(102,126,234,0.12);
    --pos-shadow-lg:     0 8px 32px rgba(102,126,234,0.18);
    --sidebar-width:     250px;
}

/* ── Body & Layout ── */
body {
    background-color: var(--pos-bg) !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    color: var(--pos-text) !important;
}

/* ── Sidebar ── */
.main-sidebar {
    background: var(--pos-gradient) !important;
    box-shadow: 4px 0 24px rgba(102,126,234,0.25) !important;
}

/* Brand link (logo en haut du sidebar) */
.brand-link {
    background: rgba(0,0,0,0.15) !important;
    border-bottom: 1px solid rgba(255,255,255,0.12) !important;
    padding: 14px 16px !important;
    transition: background 0.2s !important;
}

.brand-link:hover {
    background: rgba(0,0,0,0.22) !important;
}

.brand-link .brand-text {
    font-size: 18px !important;
    font-weight: 300 !important;
    letter-spacing: 0.3px;
    color: white !important;
}

.brand-link .brand-text strong {
    font-weight: 700 !important;
}

/* User panel */
.user-panel {
    border-bottom: 1px solid rgba(255,255,255,0.12) !important;
    margin: 0 !important;
    padding: 16px 16px 14px 16px !important;
    align-items: center !important;
}

.user-panel .image {
    line-height: 1;
    padding-left: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.user-panel .info a {
    color: rgba(255,255,255,0.95) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}

.user-panel .info small {
    color: rgba(255,255,255,0.55) !important;
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

/* Sidebar nav */
.nav-sidebar .nav-link {
    color: rgba(255,255,255,0.75) !important;
    border-radius: 8px !important;
    margin: 1px 0 !important;
    padding: 9px 10px 9px 10px !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    transition: all 0.18s ease !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    width: calc(100% - 16px) !important;
    display: flex !important;
    align-items: center !important;
    margin-left: 8px !important;
    margin-right: 8px !important;
}

.nav-sidebar .nav-link:hover {
    background: rgba(255,255,255,0.14) !important;
    color: white !important;
    transform: translateX(2px);
}

.nav-sidebar .nav-link.active {
    background: rgba(255,255,255,0.22) !important;
    color: white !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
}

.nav-sidebar .nav-link .nav-icon {
    color: rgba(255,255,255,0.7) !important;
    width: 20px !important;
    font-size: 14px !important;
}

.nav-sidebar .nav-link.active .nav-icon,
.nav-sidebar .nav-link:hover .nav-icon {
    color: white !important;
}

/* Sous-menu treeview */
.nav-treeview .nav-link {
    color: rgba(255,255,255,0.6) !important;
    padding-left: 28px !important;
    font-size: 13px !important;
}

.nav-treeview .nav-link:hover,
.nav-treeview .nav-link.active {
    color: white !important;
    background: rgba(255,255,255,0.12) !important;
}

.nav-treeview .nav-icon {
    color: rgba(255,255,255,0.4) !important;
    font-size: 7px !important;
}

/* Flèche treeview */
.nav-sidebar .nav-link .right {
    color: rgba(255,255,255,0.5) !important;
}

/* Sidebar scroll */
.sidebar {
    overflow-y: auto;
    overflow-x: hidden;
}

.nav-sidebar,
.nav-sidebar .nav-item,
.nav-sidebar .nav-link,
.nav-treeview,
.nav-treeview .nav-item,
.nav-treeview .nav-link {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.nav-sidebar .nav-item,
.nav-treeview .nav-item {
    overflow: hidden !important;
    width: 100% !important;
}

.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 2px; }

/* ── Navbar principale ── */
.main-header.navbar {
    background: var(--pos-surface) !important;
    border-bottom: 1px solid var(--pos-border) !important;
    box-shadow: 0 1px 8px rgba(102,126,234,0.08) !important;
    min-height: 56px !important;
}

.main-header .nav-link {
    color: var(--pos-text) !important;
}

.main-header .nav-link:hover {
    color: var(--pos-primary) !important;
}

/* Dropdown user */
.dropdown-menu {
    border: 1px solid var(--pos-border) !important;
    border-radius: 10px !important;
    box-shadow: var(--pos-shadow-lg) !important;
    padding: 6px !important;
}

.dropdown-item {
    border-radius: 6px !important;
    font-size: 13.5px !important;
    color: var(--pos-text) !important;
    padding: 8px 12px !important;
}

.dropdown-item:hover {
    background: var(--pos-gradient-soft) !important;
    color: var(--pos-primary) !important;
}

.dropdown-header {
    font-size: 12px !important;
    color: var(--pos-text-muted) !important;
    padding: 6px 12px !important;
}

/* ── Content wrapper ── */
.content-wrapper {
    background: var(--pos-bg) !important;
}

/* ── Content (main section after content-header) ── */
.content {
    padding-top: 20px !important;
}

/* ── Content header (breadcrumb zone) ── */
.content-header {
    background: var(--pos-surface) !important;
    border-bottom: 1px solid var(--pos-border) !important;
    padding: 14px 0 !important;
    box-shadow: 0 1px 4px rgba(102,126,234,0.06) !important;
}

.content-header h1 {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--pos-text) !important;
    letter-spacing: -0.3px !important;
}

.breadcrumb {
    background: transparent !important;
    padding: 6px 0 !important;
    margin: 0 !important;
    font-size: 13px !important;
}

.breadcrumb-item a {
    color: var(--pos-primary) !important;
    text-decoration: none !important;
}

.breadcrumb-item.active {
    color: var(--pos-text-muted) !important;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--pos-border) !important;
}

/* ── Cards ── */
.card {
    border: 1px solid var(--pos-border) !important;
    border-radius: 12px !important;
    box-shadow: var(--pos-shadow) !important;
    background: var(--pos-surface) !important;
}

.card-header {
    background: var(--pos-surface) !important;
    border-bottom: 1px solid var(--pos-border) !important;
    border-radius: 12px 12px 0 0 !important;
    padding: 14px 20px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    color: var(--pos-text) !important;
}

.card-body { padding: 20px !important; }

/* Cards avec couleur de header */
.card-primary > .card-header {
    background: var(--pos-gradient) !important;
    border: none !important;
    color: white !important;
}

/* ── Info boxes / Small boxes ── */
.small-box {
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: var(--pos-shadow) !important;
    border: none !important;
}

.small-box .inner h3 {
    font-size: 2rem !important;
    font-weight: 700 !important;
}

.small-box .icon {
    font-size: 70px !important;
    opacity: 0.18 !important;
}

.small-box .small-box-footer {
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 0.2px !important;
}

/* ── Info boxes (icon + text) ── */
.info-box {
    border-radius: 12px !important;
    box-shadow: var(--pos-shadow) !important;
    border: 1px solid var(--pos-border) !important;
}

.info-box-icon {
    border-radius: 12px 0 0 12px !important;
    width: 70px !important;
}

/* ── Boutons ── */

.btn-secondary { font-weight: 500 !important; }
.btn-success   { font-weight: 600 !important; }
.btn-danger    { font-weight: 600 !important; }
.btn-warning   { font-weight: 600 !important; }
.btn-info      { font-weight: 600 !important; }

/* ── Tables ── */
.table {
    font-size: 13.5px !important;
}

.table thead th {
    font-weight: 600 !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    color: var(--pos-text-muted) !important;
    border-bottom: 2px solid var(--pos-border) !important;
    padding: 10px 16px !important;
}

.table td {
    padding: 10px 16px !important;
    border-color: var(--pos-border) !important;
    vertical-align: middle !important;
}

.table-hover tbody tr:hover {
    background: var(--pos-gradient-soft) !important;
}

/* ── Badges ── */
.badge {
    border-radius: 6px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 3px 8px !important;
}

/* ── Alerts / Flash messages ── */
.alert {
    border-radius: 10px !important;
    border: none !important;
    font-size: 13.5px !important;
    padding: 12px 16px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
}

.alert-success { background: rgba(40,167,69,0.1) !important; color: #1a7a34 !important; }
.alert-danger  { background: rgba(220,53,69,0.1) !important; color: #b02030 !important; }
.alert-warning { background: rgba(255,193,7,0.12) !important; color: #7a5a00 !important; }
.alert-info    { background: rgba(102,126,234,0.1) !important; color: #3a50a0 !important; }

/* ── Footer ── */
.main-footer {
    background: var(--pos-surface) !important;
    border-top: 1px solid var(--pos-border) !important;
    color: var(--pos-text-muted) !important;
    font-size: 13px !important;
    padding: 12px 20px !important;
}

.main-footer a {
    color: var(--pos-primary) !important;
    text-decoration: none !important;
}

/* ── Forms ── */
.form-control {
    border-radius: 8px !important;
    border: 1.5px solid var(--pos-border) !important;
    font-size: 14px !important;
    color: var(--pos-text) !important;
    background: #fafafa !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
}

.form-control:focus {
    border-color: var(--pos-primary) !important;
    box-shadow: 0 0 0 3px rgba(102,126,234,0.12) !important;
    background: white !important;
}

label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: rgba(26,26,46,0.7) !important;
    margin-bottom: 6px !important;
}

/* ── Pagination ── */
.page-link {
    border-radius: 6px !important;
    border: 1px solid var(--pos-border) !important;
    color: var(--pos-primary) !important;
    font-size: 13px !important;
    margin: 0 2px !important;
}

.page-item.active .page-link {
    background: var(--pos-gradient) !important;
    border-color: transparent !important;
}

/* ── Custom switch (checkboxes) ── */
.custom-switch .custom-control-label {
    padding-left: 0.5rem;
    line-height: 1.5;
}

.custom-switch .custom-control-label::before {
    left: -2.25rem;
}

.custom-switch .custom-control-label::after {
    left: calc(-2.25rem + 2px);
}

/* ── Scrollbar globale ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--pos-bg); }
::-webkit-scrollbar-thumb { background: var(--pos-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--pos-primary); }