/* frontend/css/erp.css - Lady Vanilla Back-Office & ERP Styles */
:root {
    --mint-bg: #b8dec9;          /* Vert menthe principal */
    --mint-light: #e8f5ed;       /* Fond clair ERP */
    --chocolate: #4a3525;        /* Brun chocolat profond (Sidebar & Textes) */
    --chocolate-light: #70533d;  /* Brun secondaire */
    --cream-card: #ffffff;       /* Blanc pur / cartes */
    --accent-gold: #d4a373;      /* Touche caramel/or */
    --sidebar-width: 270px;
    --border-subtle: rgba(74, 53, 37, 0.08);
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Quicksand', sans-serif; }
body { background-color: var(--mint-light); color: var(--chocolate); display: flex; height: 100vh; overflow: hidden; }

/* Sidebar ERP */
aside {
    width: var(--sidebar-width); min-width: var(--sidebar-width); background: var(--chocolate);
    color: #fff; display: flex; flex-direction: column; padding: 22px 18px; box-shadow: 5px 0 20px rgba(74, 53, 37, 0.15); z-index: 10;
}
.brand-box { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: rgba(255, 255, 255, 0.08); border-radius: 16px; margin-bottom: 22px; }
.brand-box i { font-size: 24px; color: var(--mint-bg); }
.brand-box h1 { font-family: 'Playfair Display', serif; font-size: 18px; font-weight: 700; color: #fff; }
.brand-box span { font-size: 11px; opacity: 0.75; display: block; }

.nav-menu { list-style: none; display: flex; flex-direction: column; gap: 5px; flex-grow: 1; overflow-y: auto; padding-right: 4px; }
.nav-menu::-webkit-scrollbar { width: 4px; }
.nav-menu::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 4px; }

.nav-menu li a {
    display: flex; align-items: center; gap: 12px; padding: 11px 15px; text-decoration: none; color: #fff; font-weight: 600;
    border-radius: 12px; transition: all 0.2s; font-size: 13.5px; opacity: 0.85; cursor: pointer;
}
.nav-menu li.active a, .nav-menu li a:hover { background: rgba(184, 222, 201, 0.2); color: var(--mint-bg); opacity: 1; transform: translateX(4px); }
.nav-menu i { width: 20px; text-align: center; }

.user-profile { display: flex; align-items: center; gap: 12px; padding: 12px; background: rgba(0,0,0,0.25); border-radius: 14px; margin-top: 15px; }
.user-profile img { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--mint-bg); object-fit: cover; }
.user-info h4 { font-size: 13px; color: #fff; font-weight: 700; }
.user-info p { font-size: 11px; color: var(--mint-bg); }

/* Main Workspace */
main { flex-grow: 1; display: flex; flex-direction: column; overflow-y: auto; background: var(--mint-light); }
header.erp-top-header {
    padding: 18px 35px; display: flex; justify-content: space-between; align-items: center;
    background: var(--cream-card); border-bottom: 1px solid var(--border-subtle); box-shadow: 0 4px 15px rgba(0,0,0,0.02);
}
.welcome h2 { font-family: 'Playfair Display', serif; font-size: 22px; color: var(--chocolate); }
.welcome p { font-size: 13px; color: #666; margin-top: 2px; }

.header-actions { display: flex; align-items: center; gap: 12px; }
.boutique-select {
    padding: 8px 14px; border-radius: 18px; border: 1.5px solid var(--border-subtle);
    background: #fff; color: var(--chocolate); font-weight: 700; font-size: 13px; outline: none;
}

.btn-action {
    background: var(--chocolate); color: #fff; border: none; padding: 10px 20px; border-radius: 20px;
    font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: background 0.3s; font-size: 13px;
}
.btn-action:hover { background: #2f2117; }

.dashboard-content { padding: 30px 35px; display: flex; flex-direction: column; gap: 28px; }

/* Stats Grid */
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.stat-card { background: var(--cream-card); padding: 22px; border-radius: 20px; border: 1px solid var(--border-subtle); display: flex; align-items: center; gap: 16px; box-shadow: 0 6px 20px rgba(74, 53, 37, 0.04); }
.stat-icon { width: 52px; height: 52px; border-radius: 16px; background: var(--mint-bg); color: var(--chocolate); display: flex; align-items: center; justify-content: center; font-size: 22px; }
.stat-info span { font-size: 12px; color: #777; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.stat-info h3 { font-size: 22px; color: var(--chocolate); margin-top: 3px; font-family: 'Playfair Display', serif; }

/* Grid Split (Production & Stocks) */
.grid-split { display: grid; grid-template-columns: 2fr 1fr; gap: 25px; }
.card-box { background: var(--cream-card); border-radius: 24px; padding: 25px; border: 1px solid var(--border-subtle); box-shadow: 0 6px 20px rgba(74, 53, 37, 0.04); }
.card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.card-header h3 { font-family: 'Playfair Display', serif; font-size: 18px; color: var(--chocolate); display: flex; align-items: center; gap: 10px; }
.card-header h3 i { color: var(--chocolate-light); }

/* Tables */
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 12px; color: #888; padding-bottom: 12px; border-bottom: 2px solid var(--border-subtle); font-weight: 700; text-transform: uppercase; }
td { padding: 14px 0; font-size: 13.5px; color: var(--chocolate); border-bottom: 1px solid rgba(74, 53, 37, 0.04); }

/* Badges for Order Statuses */
.badge { padding: 6px 12px; border-radius: 12px; font-size: 11px; font-weight: 700; display: inline-block; text-transform: uppercase; }
.badge.nouvelle { background: #e2e3e5; color: #383d41; }
.badge.a_confirmer { background: #fff3cd; color: #856404; }
.badge.confirmee { background: #cce5ff; color: #004085; }
.badge.acompte_recu { background: #d1ecf1; color: #0c5460; }
.badge.en_preparation, .badge.prod { background: #ffeeba; color: #856404; }
.badge.prete, .badge.ready { background: #d4edda; color: #155724; }
.badge.expediee { background: #d6d8db; color: #1b1e21; }
.badge.livree { background: #c3e6cb; color: #155724; }
.badge.annulee, .badge.danger { background: #f8d7da; color: #721c24; }

/* Stock Alert List */
.stock-list { display: flex; flex-direction: column; gap: 12px; }
.stock-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: #fafafa; border-radius: 14px; border: 1px solid #eee; }
.stock-info h5 { font-size: 13px; color: var(--chocolate); }
.stock-info p { font-size: 11px; color: #c0392b; font-weight: 600; margin-top: 2px; }
.stock-qty { font-weight: 700; font-size: 14px; color: var(--chocolate); background: #fde8e8; padding: 4px 10px; border-radius: 8px; }

/* Section Tabs */
.erp-section { display: none; }
.erp-section.active { display: block; }

/* Filter Bars */
.table-filter-bar { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-bottom: 20px; flex-wrap: wrap; }
.table-filter-bar select, .table-filter-bar input {
    padding: 8px 14px; border-radius: 16px; border: 1.5px solid var(--border-subtle); outline: none; font-size: 13px;
}

/* KDS Kitchen Ticket Card */
.kitchen-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; }
.kitchen-card {
    background: #fff; border-radius: 20px; border-left: 6px solid var(--chocolate);
    padding: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); display: flex; flex-direction: column; gap: 12px;
}
.kitchen-card.priority { border-left-color: #c0392b; }
.kitchen-card-header { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 14px; }
.kitchen-details { font-size: 13px; color: #555; line-height: 1.5; background: var(--mint-light); padding: 12px; border-radius: 12px; }
.kitchen-actions { display: flex; gap: 8px; margin-top: auto; }

/* Recipes Margin Table */
.margin-high { color: #27ae60; font-weight: 700; }
.margin-med { color: #f39c12; font-weight: 700; }
.margin-low { color: #c0392b; font-weight: 700; }

/* Modals */
.erp-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px); z-index: 2000; display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
}
.erp-modal-overlay.open { opacity: 1; pointer-events: auto; }
.erp-modal {
    background: #fff; border-radius: 24px; width: 90%; max-width: 700px; max-height: 88vh;
    overflow-y: auto; padding: 30px; position: relative; box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}

.erp-modal.modal-lg { max-width: 850px; }

/* Modal Form Styles */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.form-grid.full { grid-template-columns: 1fr; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label { font-size: 12.5px; font-weight: 700; color: var(--chocolate); }
.form-group input, .form-group select, .form-group textarea {
    padding: 10px 14px; border-radius: 12px; border: 1.5px solid #dcdad5; font-size: 13.5px;
    font-family: inherit; color: var(--chocolate); outline: none; transition: border-color 0.2s;
    background: #fff;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    border-color: var(--chocolate); box-shadow: 0 0 0 3px rgba(74, 53, 37, 0.08);
}
.form-group textarea { resize: vertical; min-height: 70px; }
.form-checkbox { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13px; font-weight: 600; margin-top: 6px; }
.form-checkbox input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--chocolate); cursor: pointer; }

/* Buttons & CRUD actions */
.btn-choc {
    background: var(--chocolate); color: #fff; border: none; padding: 10px 20px; border-radius: 20px;
    font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; font-size: 13px;
    transition: all 0.2s;
}
.btn-choc:hover { background: #2f2117; transform: translateY(-1px); }

.btn-secondary {
    background: #e2ded9; color: var(--chocolate); border: none; padding: 10px 18px; border-radius: 20px;
    font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: 13px;
    transition: background 0.2s;
}
.btn-secondary:hover { background: #d0cbc4; }

.btn-danger {
    background: #fde8e8; color: #c0392b; border: 1px solid #f8b4b4; padding: 6px 12px; border-radius: 12px;
    font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: 12px;
    transition: all 0.2s;
}
.btn-danger:hover { background: #c0392b; color: #fff; }

.table-actions { display: flex; align-items: center; gap: 6px; }
.btn-action-sm {
    padding: 6px 10px; border-radius: 10px; border: none; font-size: 11.5px; font-weight: 700;
    cursor: pointer; display: inline-flex; align-items: center; gap: 4px; transition: all 0.2s;
}
.btn-action-sm.view { background: var(--mint-bg); color: var(--chocolate); }
.btn-action-sm.view:hover { background: #96cbb0; }
.btn-action-sm.edit { background: #e8f0fe; color: #1a73e8; }
.btn-action-sm.edit:hover { background: #d2e3fc; }
.btn-action-sm.delete { background: #fde8e8; color: #d93025; }
.btn-action-sm.delete:hover { background: #d93025; color: #fff; }

.table-img-thumb {
    width: 44px; height: 44px; border-radius: 10px; object-fit: cover; border: 1.5px solid rgba(74,53,37,0.1);
}

/* Pagination System */
.pagination-container { margin-top: 20px; padding-top: 16px; border-top: 1.5px solid var(--border-subtle); }
.pagination-bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; }
.pagination-info { font-size: 12.5px; color: #777; }
.pagination-info strong { color: var(--chocolate); }
.pagination-controls { display: flex; align-items: center; gap: 18px; }
.pagination-size { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #666; }
.pagination-size select {
    padding: 5px 10px; border-radius: 10px; border: 1px solid #ccc; font-size: 12.5px;
    outline: none; background: #fff; cursor: pointer;
}
.pagination-btns { display: flex; align-items: center; gap: 4px; }
.page-btn {
    min-width: 32px; height: 32px; padding: 0 8px; border-radius: 8px; border: 1px solid #ddd;
    background: #fff; color: var(--chocolate); font-size: 12px; font-weight: 700;
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
    transition: all 0.2s;
}
.page-btn:hover:not(:disabled) { background: var(--mint-light); border-color: var(--mint-bg); color: var(--chocolate); }
.page-btn.active { background: var(--chocolate); border-color: var(--chocolate); color: #fff; }
.page-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.page-ellipsis { padding: 0 4px; color: #999; font-size: 12px; }

/* Filter pills */
.filter-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.filter-pill {
    padding: 6px 14px; border-radius: 14px; border: 1px solid #ddd; background: #fff;
    color: #666; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.2s;
}
.filter-pill.active, .filter-pill:hover {
    background: var(--mint-bg); color: var(--chocolate); border-color: var(--mint-bg); font-weight: 700;
}

/* Dynamic Recipe Ingredients Builder */
.recipe-ing-row { display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: 10px; align-items: center; margin-bottom: 8px; }

/* Toast notifications */
.toast-container { position: fixed; bottom: 25px; right: 25px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; }
.toast { background: var(--chocolate); color: #fff; padding: 14px 22px; border-radius: 16px; font-size: 13.5px; display: flex; align-items: center; gap: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.18); transition: opacity 0.3s ease; }
.toast i { color: var(--mint-bg); font-size: 16px; }

@media(max-width: 1200px) {
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .grid-split { grid-template-columns: 1fr; }
}